Graphical user interface (Part 1)

<=   =>

These days almost no programming task is complete until it is packaged in a graphical user interface (GUI).

Let's add a GUI to your centigrade and fahrenheit verbs.

There are many steps in building a form and an application. The exact steps you should follow are contained in the series of indented, bulleted items. General discussion and background information is provided in text between these bulleted items.

Run your cf.ijs script and make sure that centigrade and fahrenheit work.

The first step in creating a GUI is to create a form definition. A form definition is stored in a script file just as are all your other definitions.

Create a new script file, save it as a permanent file in the user directory. The creation of forms is covered in more detail in the Window Driver entry available in the JQt help menu and you should refer to that if you want more information at this time.

• create a new script file with File | New
  
• save it in the user directory as cfgui.ijs
  

NB. base form 

CFGUI=: 0 : 0 
pc cfgui;
pmove 100 200 200 100; 
bin v;
 bin h;
  minwh 80 10;cc s1 static;cn "Centigrade";
  minwh 40 14;cc cid edit;
 bin z;
 bin h;
  minwh 80 10;cc s1 static;cn "Farenheit";
  minwh 40 14;cc fid edit;
 bin z;
bin z;
)

cfgui_run=: 3 : 0
wd CFGUI
NB. initialize form here
wd 'pshow;'
)

cfgui_close=: 3 : 0
wd'pclose'
)

All interactions with forms are done with the wd (Window Driver) verb. The wd argument is always a string that starts with a command. A string can contain multiple commands separated by semicolons.

The noun CFGUI is defined by the conjunction : in a manner similar to how verbs are defined. The left argument of 0 creates a noun. It is defined as the lines of characters up to the line which contains only the ). It contains the commands that will create the form. Don't worry about the details now, but most of it should make some sense. Commands are followed by parameters and multiple commands on a line are separated by ;. The pc command is a parent create (a form is referred to as a parent). The pmove 100 200 200 100; in the next line places the window at position x=100 y=200 width=200 height=100. The bin v; initiates a vertical grouping of components and the bin h; initiates a horizontal grouping of components. The bin z; command terminates the closest previous bin v; or bin h;'s. Lines beginning with a minwh command set a rectangular area on the form and is followed by a cc command (create child) that creates one of the controls you put on the form.

After the definition of CFGUI you will see a verb called cfgui_run. This verb ignores its argument. It executes the wd verb with CFGUIas an argument. This creates the form, but doesn't show it. The final wdwith the argument 'pshow;' will show the parent (form).

The cfgui_close verb will close the window using the wd 'pclose' command. At this point the cfgui.ijs script has not been run so the definitions are just text in the script file and have not been defined. After you run the script you are ready to run your application.

• run the cfgui.ijs script with Run | Load Script
  
• in the Term window: cfgui_run 0
  

When you execute cfgui_run 0 you should see your form in the upper left of the screen. Typing into the controls and pressing Enter has no effect because you have no code connected to the events yet. You can close the form manually by executing the wd 'reset' command that closes all forms.

• in the Term window: wd 'reset'
  

When you type a value in the centigrade edit control and press Enter you cause an event. An event is identified by the form and the control in which it occurs and the type of the event. An Enter in an edit control is a button event (pressing enter in an edit field is analogous to pressing a button control). So, the event of interest here is for form cfgui, control cid, and is a button event. When an event occurs, a verb called the event handler is executed. The name of the verb that is executed is determined by the event. The name of an event handler is made up of three parts: formid_controlid_event. So, the event handler of interest has the name cfgui_cid_button. The event handler cfgui_cid_button should convert the value from the cid edit control to Fahrenheit and then display that result in the fid edit control.

You need to define cfgui_cid_button. When the event handler is executed the noun cidwill automatically have the value of the contents of the edit field. It will be a string and you need to convert that to a number with the ". primitive.

t =. 0 ". cid

The next thing is to convert that centigrade value to Fahrenheit.

t =. fahrenheit t

The noun t is the number you want to display in the fid edit control. The number must be converted to a string before it can be shown in an edit field. Use ": (format) for this.

t =. ": t

Finally, write the text string to the fid edit field.

wd 'set fid text' , t

The wd argument has a command of set, the id of the control to set fid, the property to be set text, and t contains the data to set.

Add these sentences to the cfgui_cid_button definition in the cfgui.ijs script.

cfgui_cid_button=: 3 : 0
t =. 0 ". cid
t =. fahrenheit t
t =. ": t
wd 'set fid text', t
)

To keep our form self-contained, we will add definitions of fahrenheit and centigrade to our script so calculations can be performed. Be careful to type this correctly into your script.

fahrenheit =: 3 : 0
t1 =. y * 9
t2 =. t1 % 5
t3 =. t2 + 32
)

centigrade =: 3 : 0
t1 =. y - 32
t2 =. t1 * 5
t3 =. t2 % 9
)

At this point the cfgui.ijs script has not been run so the changes are just text in the script file.

• run the script with Run | Load Script
  
• in the Term window run the application: cfgui_run 0
  

You should see your form in the middle of the screen. Type a number into the centigrade field and press Enter. The Fahrenheit value should display in its field.

If you type into the Fahrenheit field and press Enter nothing happens. This is because you have not provided a handler for that event. If an event handler verb is not defined, the event is ignored. The definition for cfgui_fid_button is similar to that of cfgui_cid_button.

cfgui_fid_button=: 3 : 0
t =. 0 ". fid
t =. centigrade t
wd'set cid text', ": t
)

• add the definition of cfgui_fid_button to cfgui.ijs
  
• run the script with Run | Load Script
  
• in the Term window: cfgui_run 0
  

Now when you type a value in the Fahrenheit field and press Enter it will be converted and display in the centigrade field.

The cfgui_close verb handles the event when you click the close box on the form. The wd 'pclose' (parent close) command closes the form. But as practice you should add a button control with caption Close that will also close the form.

• in the Term window: wd 'reset'
  
• add the line minwh 80 30;cc close button;cn "Close"; between the last two bin z;'s in the CFGUI definition.
  

• pc cfgui;
  pmove 100 100 200 100; 
  bin v;
   bin h;
    minwh 80 10;cc s1 static;cn "Centigrade";
    minwh 40 14;cc cid edit;
   bin z;
   bin h;
    minwh 80 10;cc s1 static;cn "Farenheit";
    minwh 40 14;cc fid edit;
   bin z;
   minwh 80 30;cc close button;cn "Close";
  bin z;
  )

  
  
• define the cfgui_close_button
  

• cfgui_close_button=: 3 : 0
  wd'pclose;'
  )

  
  
• run the script with Run | Load Script
  
• in the Term window: cfgui_run 0
  

When you tire of doing conversions you can press the Close button to close your form.

Congratulations! you have written a GUI application in J. It is simple and has rough edges, but you are over the high hurdles.

<=   =>

Primer Index               Hover to reveal titles   -   Click to access   -   Current page is highlighted
1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	✅
26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	✅
45	46	47	48	✅
50	51	52	53	54	55	56	57	✅
59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	✅
77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	✅
97	98	99	100	101	102	103	104	105	106	✅