Play with Pythonista UI implementation [Action implementation]

Introduction

I was worried about adding movement to the UI made with Pythonista, so I will write it as an article. If you're looking here without touching the Pythonista UI implementation too much, you should read the following first! Playing with the UI implementation of Pythonista3 [Super Super Introduction] Play with the UI implementation of Pythonista [Screen elements]

Action In the UI implementation of Pythonista, each element has an attribute called Action, and for example, if it is a button, you can define the action when it is pressed (tapped or clicked). This is the red circle.

If you specify the function name or method name that defines the process here, it will be called when the button is pressed. The process is described in the py file corresponding to pyui.

ui_sample.py

import ui
import console

def button_clicked(sender):
	console.alert('Button1 clicked!')

v = ui.load_view()
v.present('sheet')

Select Button1 in sample_ui.pyui in the above image and specify button_clicked in Action.

When I run it and press the button. .. .. That's why. Let's explain the source.

import ui
import console

As an aside, the console module can be used for message output, so it's good to remember. It is a built-in module of Pythonista.

def button_clicked(sender):
	console.alert('Button1 clicked!')

This is the process you want to call when you press the button. Be sure to specify the argument sender for the function or method specified in Action. (Since no argument can be specified for pyui, only sender can be specified.)

The object that is the source of the Action is passed to sender. In this case it's a Button.

Coordination of elements in the screen

The UI shown in the image above has not only buttons but also text fields. When this happens, you want to retrieve the character string entered in the text field in the program when you press the button, right? It's decided to be!

The elements placed in the view are

v = ui.load_view()

When you do, everything is loaded in v. To retrieve elements from the return value of load_view (), specify the Name of each element as the dictionary key.

s = v['button1'].title
print(s)  #button1 title("OK" in the example of the figure)Is printed.

That's right. please try it.

By the way, you can also set the value in reverse by the above specification method.

v = ui.load_view()

v['button1'].title = 'NG'  #Set the title displayed on the button with pyui to "OK"
## I set it, but set it to "NG"

v.present('sheet')         #Value set before drawing with present

Well, you may have noticed a good kid, but the v defined in the main processing part cannot be passed to the Action function of button1 which takes only sender as an argument. However, you can pull the View element from the sender as follows:

def button_clicked(sender):
	v = sender.superview     # superview: sender(button1)Parent element of
	console.alert(v['textfield1'].text)

Since button1 and textfield1 are placed in the same CustomView, they can be obtained by using superview and tracing the parent of button1.

Classify View

Now, I was able to arrange the screen elements. Action can also be implemented. let's try it! So I made a screen and implemented Action for all the elements ...

import ui

def button1_clicked(sender):
	#Process 1

def button2_clicked(sender):
	#Process 2

def button3_clicked(sender):
	#Process 3

def button4_clicked(sender):
	#Process 4

def button5_clicked(sender):
	#Process 5

v = ui.load_view()
v.present('sheet')

how is it? Isn't it time to want to classify in units of View (screen)?

Well, roughly, for example, like this

import ui

class CustomView1():
	def button1_clicked(sender):
		#Process 1

	def button2_clicked(sender):
		#Process 2
	...

v = ui.load_view()
v.present('sheet')

Also specify the class name for Action on the pyui side and specify it as CustomView1.button1_clicked.

Oh? Even though it is a method in the class, the argument self is not specified. This will not work unless you specify this. Writing self only contains objects that span sender. You cannot pass more than one, such as self and sender.

As it is, class variables cannot be used, so it's just a matter of enclosing them.

However, it's okay if you write as follows!

import ui

class CustomView1(object):
	def button1_clicked(self, sender):
		#Process 1

	def button2_clicked(self, sender):
		#Process 2
	...

v = ui.load_view()

cv = CustomView1()
v['button1'].action = cv.button1_clicked

v.present('sheet')

Let's specify the method directly to ʻaction by the method of accessing the screen element from the source introduced earlier. Do not use pyui to specify ʻaction.

in conclusion

I haven't touched on any detailed processing, but it's almost done! Next, I will write about screen transitions! !!