©wdesigner User’s Manual
for MYTUI1.2

Fan Xiaohua
2006.04
Content
2. Introduction to MYTUI Widgets 2
2.1.3. Widgets in a Form Window … 3
2.3. Widget Naming Constraints 5
2.3.1. Widget Name vs. Widget Handle 5
2.4.1. Callbacks of the Form Window 6
2.4.1.1. PreProcess Function 6
2.4.1.2. Escape Callback Function 7
2.4.1.3. PostProcess Function 7
2.4.2. Callbacks of Line Editor 8
2.4.2.1. PreProcess Function 8
2.4.2.2. PostProcess Function 9
2.4.2.3. Input Callback Function 9
2.4.3. Callbacks of Push Button 10
2.4.3.1. PostProcess Function 10
2.4.4. Callbacks of Combobox 11
2.4.4.1. PreProcess Function 11
2.4.4.2. PostProcess Function 11
2.4.5. Callbacks of Pull Down/Popup Menu 11
2.4.5.1. Menu Item Callback Function 11
2.4.6. Callbacks of List Box 12
2.4.6.1. PreProcess Function 12
2.4.6.2. PostProces Function 12
2.4.6.3. Select Callback Function 12
2.4.7. Callbacks of Data Grid 13
2.4.7.1. PostProcess Function 13
2.4.7.2. Delete PreProcess Function 13
2.4.7.3. Insert PostProcess Function 13
2.4.7.4. Field’s PostProcess Function 14
2.5.1. Line Editor’s Key Bindings 14
2.5.2. ComboBox’s Key Bindings 15
2.5.3. Push Button’s Key Bindings 15
2.5.4. Pull Down Menu’s Key Bindings 15
2.5.5. List Box’s Key Bindings 16
2.5.6. Scroll Window’s Key Bindings 16
2.5.7. Data Grid’s Key Bindings 17
2.5.8. Key Bindings for Traversing the Form’s widgets 18
3. Introduction to ©wdesigner? 19
3.1. How to start ©wdesigner? 19
3.1.1. No TRF file specified… 19
3.1.2. A TRF file specified… 19
3.2. ©wdesigner’s Basic Operations 19
3.2.1. Get help information… 19
3.2.3. Select/Deselect a widget… 20
3.2.4. Select/Deselect all widgets… 20
3.2.5. Move selected widgets… 20
3.2.6. Create a new widget… 20
3.2.7. Delete the selected widgets… 21
3.2.9. Save your work into a TRF file… 22
3.2.11. Set all callbacks to one shared object… 23
3.2.12. Generate C codes for your form… 23
3.3. General Steps of Developing An Application 24
4.2.6. Select Title Alignment 29
4.2.8. Set Position for the Window 29
4.2.9. Set Size for the Window 30
4.2.11. Set Status Attribute 31
4.2.12. Select Status Alignment 31
5.1.1. Creating a new label: 32
5.1.2. Edit a existing label 32
6.1.1. Creating a new line editor: 35
6.1.2. Edit a existing line editor 35
6.2.1. Set Line Editor’s Name 36
6.2.8. Set Display Attribute (Normal) 39
6.2.9. Set Display Attribute (in Focus) 39
6.2.13. Set Callback Functions 40
7.1.1. Creating a New push button: 41
7.1.2. Edit a Existing Push Button 42
7.2.1. Set Push Button’s Name 42
7.2.6. Set Display Attribute (Normal) 43
7.2.7. Set Display Attribute (Focus) 44
7.2.10. Set Callback Function 44
8.1.1. Creating a New ComboBox: 45
8.1.2. Edit a Existing ComboBox 46
8.2.6. Set Attribute (Normal) 47
8.2.7. Set Attribute (Focus) 48
8.2.10. Set Line Editor’s Edit Flag 48
8.2.11. Set Callback Functions 49
8.2.13. Set Drop Down Height 49
8.2.14. Set Drop Down List’s Box Mode 50
8.2.15. Set Drop Down List’s Box Attribute 50
8.2.16. Set Drop Down List’s Title Mode 50
8.2.17. Set Drop Down List’s Title Alignment 50
8.2.18. Set Drop Down List’s Title 50
8.2.19. Set Drop Down List’ Attribute (Normal) 51
8.2.20. Set Drop Down List’s Attribute (Focus) 51
8.2.21. Define Drop Down List’s Options 51
9.1.1. Creating a List Box: 52
9.1.2. Edit a Existing List Box 52
9.2.3. Set Dimensions (Lines, Cols) 53
9.2.6. Set Attribute (Normal) 54
9.2.7. Set Attribute (Focus) 54
9.2.10. Set Callback Functions 55
10.1.1. Creating a Progress Bar 56
10.1.2. Edit a Existing Progress Bar 56
10.2.1. Set Progress Bar’s Name 57
10.2.4. Set Box’s Attribute 58
10.2.5. Set Attribute (Normal) 58
10.2.6. Set Attribute (Bar) 58
11.1.1. Creating a Scroll Window 59
11.1.2. Edit a Existing Scroll Window 59
11.2.1. Set Scroll Window’s Name 60
11.2.2. Set Dimensions (Lines, Cols) 60
11.2.5. Set Box’s Attribute 61
11.2.6. Set Attribute (Normal) 61
11.2.7. Set Attribute (focus) 61
12.1.1. Creating a Data Grid 63
12.1.2. Edit a Existing Data Grid 63
12.2.1. Set Data Grid’s Name 63
12.2.2. Set Dimensions (Lines, Cols) 64
12.2.4. Set Box’s Attribute 64
12.2.5. Set Attribute (Normal) 64
12.2.6. Set Attribute (Focus) 65
12.2.10. Set Callback Functions 66
12.2.11. Define Fields (Columns) 66
13. Define a Pull Down Menu 68
13.1.1. Creating a Pull Down Menu 68
13.1.2. Edit a Existing Pull Down Menu 68
13.2.1. Set Pull Down Menu’s Name 69
13.2.3. Set Box’s Attribute 70
13.2.4. Set Attribute (Normal) 70
13.2.5. Set Attribute (Focus) 70
13.2.9. Define Submenu and Menu Items 71
14.1.1. Step1: Widgets Planning 75
14.1.2. Create the TRF file—login.trf 77
14.1.2.1. Define the form window’s attributes 77
14.1.2.2. Define the label “Host” 78
14.1.2.3. Define the line editor “Host” 79
14.1.2.4. Define the label “User” 80
14.1.2.5. Define the line editor “User” 80
14.1.2.6. Define the label “Password” 81
14.1.2.7. Define the line editor “Password” 82
14.1.2.8. Define the push button “Login” 83
14.1.2.9. Define the push button “Cancel” 84
14.1.3. Step2: Test the TRF file 85
14.1.4. Step3: Generate C Codes 85
14.1.4.1. Codes for Static Linking Mode 86
14.1.4.2. Codes for Dynamic Linking Mode 90
14.1.5. Step4 Make the Executable Object File 93
14.1.5.1. For Static Linking Mode… 93
14.1.5.2. For Dynamic Linking Mode… 94
14.1.6. Step5 Improve Callback Functions 96
14.1.7. Some Helpful Topics 98
14.1.7.1. Avoid defining global or static variables in the shared object 98
14.1.7.2. Trace error messages 98
14.1.7.3. Transfer data between widgets even forms 99
14.2. Adding a pull down menu… 101
14.2.1. Step1: Widgets Planning 101
14.2.2. Create the TRF file—PdMenu.trf 102
14.2.2.1. Define the form window’s attributes 102
14.2.2.2. Define the pull down menu “Menu” 103
14.2.2.3. Define the scroll window “Log” 106
14.2.2.4. Define the label “Host” 107
14.2.2.5. Define the line editor “Host” 108
14.2.2.6. Define the label “Operator” 109
14.2.2.7. Define the line editor “Operator” 110
14.2.3. Step2: Test the TRF file 111
14.2.4. Step3: Generate C Codes 111
14.2.4.1. Codes for Static Linking Mode 112
14.2.4.2. Codes for Dynamic Linking Mode 115
14.2.5. Implement our functions 117
14.2.5.1. Activate the menu form 117
14.2.5.2. Expanding the preprocess function 117
14.2.5.3. Improve the escape callback 119
14.2.5.4. Clean the screen 119
14.2.6. Step4 Make the Executable Object File 120
14.2.6.1. For Static Linking Mode… 120
1.Why ©wdesigner?
©wdesigner is a WYSIWYG (What You See is What You Get) development tool of MYTUI. It is the most complete RAD tool to develop text-based UI applications under UNIX/LINUX environments.
You can directly use standard MYTUI SDK to develop applications instead of ©wdesigner, but that will become a time-consuming and boring task, especially for large-scale systems. You have to define all attributes of widgets and forms, register callback functions in C/C++ source files without extracting them into special resource containers. The disadvantages are obvious:
First, you have to spend considerable time on UI details before implementing your core business logic. For extreme worse situations (complicated UI with simple business logic), almost all your work will be wasted on these static attributes.
Second, the application has poor maintainability because resources are “solidified” in your application. Even a tiny adjustment such as changing the position of a widget will lead to the complete recompiling of the overall application or relevant modules, though it has nothing to do with the business logic.
©wdesigner resolves all these problems. It separates the management of static attributes from the whole development cycle. Instead of defining attributes by directly calling SDK functions, these resources are contained in a special file named TRF (TUI Resource File). ©wdesigner provides the WYSIWYG interface for managing resources. MYTUI automatically create forms and widgets by reading static information from the file at runtime. Your source codes will become quite compact and legible.
©wdesigner can also generate C/C++ codes for you to quickly setup the frame of your application.
2.Introduction to MYTUI Widgets
2.1.MYTUI Widget Hierarchy
Widgets are the elements that make up a user interface. Here is the hierarchy tree used to implement widgets:

2.1.1.MYTUI Root
See the dashed line frame in the above figure.
Strictly speaking, it is not a real widget. However to let your application work, you should first initialize it. Only one root exists so you needn’t to create it like doing that for other widgets. ©wdesigner doesn’t care about it , we will not describe it in this manual.
2.1.2.Form Window
The form window is a container that can hold an arbitrary number of children or widgets(label, push button, line editor, etc.). It provides geometry management for its children and traversing control when the form is activated. In fact, each MYTUI application is a combination of a series of form window.
All form windows are modal dialog window. MYTUI doesn’t support modeless form. Only one form is active at the same time and it requires the user to respond before continuing the program. When a modal form is displayed on the screen, it intercepts the control, so the user has no access to any parent or sibling of the other forms.
A typical MYTUI application is designed to use a sequence (not cascade) of modal forms. That is to say, one form is activated by another form’s widgets, it then automatically hands over the control to that form when it is closed.
A typical form window has an OK and Cancel button. User press OK button to implement a task or activate another form, or press Cancel button to close the form and return to the last form.
For how to define a form window with ©wdesigner, please refer to Define a Form Window.
2.1.3.Widgets in a Form Window …
|
Widget Name |
Description |
|
Label |
The Label Widget is used to provide text output capabilities. The text string cannot be edited. For details about defining a form window with ©wdesigner, please refer to Define a Label |
|
Push Button |
It is rectangular and typically displays a text label describing its action. Typically it commands the computer to perform some action, or to activate another form, etc. For details about defining a push button with ©wdesigner, please refer to Define a Push Button. |
|
Line Editor |
It is a one-line text editor. It allows the user to enter and edit a single line of plain text. For details about defining a line editor with ©wdesigner, please refer to Define a Line Editor. |
|
ComboBox |
It is a combined line editor and drawdown list box. It provides a means of presenting a list of options to the user in a way that takes up the minimum amount of screen space. For details about defining a combobox with ©wdesigner, please refer to Define a ComboBox. |
|
Scroll Window |
It is a text box with the content can be horizontally and vertically scrolled. Each line contains a single line of text. It is usually used as a log window as text can be only appended at the end in order. For details about defining a scroll window with ©wdesigner, please refer to Define a Scroll Window. |
|
List Box |
It provides a single-column list of selectable, read-only items (can be scrolled vertically). It may be a single-select mode box, or a multi-select mode box. For details about defining a list box with ©wdesigner, please refer to Define a List Box |
|
Popup Menu |
It is a standalone context (popup) selection menu. Technically it consists of a list of menu items, an item can also have a submenu. Note: at present, ©wdesigner doesn’t support defining popup menus. |
|
Pull down Menu |
A list of options indicated by a row of single items at a main menu bar. Each item can be activated and a full submenu is pulled down, the user can then select the required menu item on the submenu. Like the popup menu, a submenu item can also have a submenu. For details about defining a list box with ©wdesigner, please refer to Define a Pull Down Menu. |
|
Data Grid |
It is used to store, retrieve and manipulate two-dimensional arrays or grids of data. Each cell can be a label, line editor or a combobox. It resembles a table in a database: there are field definitions with all cells on one column has the same data type (or widget type), constraints can be applied to a field by defining a callback. Data Grid provides some advanced functions such as sorting data, searching records, exporting/importing data to/from a text file etc. For details about defining a list box with ©wdesigner, please refer to Define a Data Grid. |
|
Progress Bar |
It is a simple progress indicator used to show the status of an operation. It works in determinate mode that shows the percentage completed. For details about defining a list box with ©wdesigner, please refer to Define a Progress Bar. |
Here is a figure shows these widgets’s typical appearances and layouts (except the popup menu and pull down menu):

2.2.TRF file
TRF means MYTUI Resource File. It is a form container that saves all the static attributes/initial values of a form window and its widgets.
Each TRF file can only defines one form. And, the file name must be in the form like XXX.trf where XXX is the form name. Otherwise ©wdesigner will not save your editings.
2.3.Widget Naming Constraints
2.3.1.Widget Name vs. Widget Handle
Each form and widget has its own name and this name is a ‘static’ attribute. Whether a form is in running status or not, its name will not change. Handle is also used by MYTUI to refer to a window or a widget because it is more convenient and efficient than using the name. However, handles are meaningful only when a form is running, they are dynamically generated when the form is started from a TRF (see TRF file) or the widgets are created by explicitly calling MYTUInewObj() function. At the same time, no two handles have the same value.
As you cannot directly manipulate a form window or widget by its name, you must first call MYTUIgetHandleByName() function to get its handle. If you employ ©wdesigner to develop MYTUI applications, then naming is very critical for defining forms and widgets. You should plan a good mnemonic for the names of widgets in your TRF files.
2.3.2.Naming Constraints
Each form window has its unique form name to identify it from other forms. Within a form, you should also give each widget a unique name. That is, two widget belong to two different forms can have the same name without confliction.
2.4.Callback Functions
It is also an important task you should pay more attention to define callbacks for your forms and their widgets. ©wdesigner can automatically construct skeleton codes for your application by these functions together with other attributes. So you must be familiar with each widget’s callback functions.
2.4.1.Callbacks of the Form Window
2.4.1.1.PreProcess Function
It is called immediately after the form is activated but before waiting the user’s first response. Usually this function performs some initializations, such as setting initial values for widgets. The prototype is:
int (*PreProcess)(long Hwin);
Where Hwin is the handle of the form window.
NOTE: If it returns a non-zero value, MYTUI will consider it as an error and immediately close the form and return.
2.4.1.2.Escape Callback Function
It is called when a Escape key is detected while traversing the form window’s widgets. By default, MYTUI will immediately end the traversing and return to the caller that activates the form. This callback gives you a chance to decide if you really want to close the form. For example, you can implement a callback popping up a simple dialog box to ask the user. The prototype is:
int (*EscapeCallback)(long Hwin);
Where Hwin is the handle of the form window.
NOTE: If it returns a non-zero value, MYTUI will consider the user doesn’t want to exit and continue traversing the form.
2.4.1.3.PostProcess Function
It is called immediately when a exit signal received from the user (usually issued by calling MYWINsetExitOn() somewhere) before ending the traversing and return to the caller. It is often called to perform final clearing work. The prototype is:
int (*PostProcess)(long Hwin);
Where Hwin is the handle of the form window.
NOTE: If it returns a non-zero value, MYTUI will consider the user doesn’t want to exit and continue traversing the form.
The figure below illustrates what happens when a form is activated and how three callbacks are triggered.
2.4.2.Callbacks of Line Editor
2.4.2.1.PreProcess Function
It will be called immediately after the line editor is activated but before waiting the user’s first response. Usually it is used to perform some initializations, such as setting initial value for the line editor. The prototype is:
int (*PreProcess)(long Hwin, long Hledit);
Where Hwin is the handle of the form window and Hledit is the handle of the line editor.
NOTE: If it returns a non-zero value, the line editor will still be activated.
2.4.2.2.PostProcess Function
It is called immediately before the line editor loses the focus (by pressing Tab/Enter/Up/Down key). It is often called to validate the user’s inputs. The prototype is:
int (*PostProcess)(long Hwin, long Hledit);
Where Hwin is the handle of the form window and Hledit is the handle of the line editor.
NOTE: If it returns a non-zero value, MYTUI will consider the user’s inputs is wrong and refuse to move out.
2.4.2.3.Input Callback Function
It is called whenever a printable character (excepts key bindings described in Line Editor’s Key Bindings) received. It is often used as a input filter. For example, you can employ it to convert the inputs to upper/lower case. The prototype is:
chtype (*InputCallback)(long Hwin, long Hledit, chtype input);
Where Hwin is the handle of the form window and Hledit is the handle of the line editor, input is the character input by the user. It should return a character to MYTUI.
The figure below illustrates what happens when a line editor is activated and how three callbacks are triggered.

2.4.3.Callbacks of Push Button
It is simple, only postprocess function is available for the push button widget.
2.4.3.1.PostProcess Function
It is called immediately before the push button loses the focus (by pressing Enter/Space key). It is often called to perform some actions. The prototype is:
int (*Callback)(long Hwin, long Hbutton);
Where Hwin is the handle of the form window and Hbutton is the handle of the push button.
NOTE: If it returns zero value, MYTUI will consider the callback is successfully executed and the focus will be moved to the next available widget. Otherwise the cursor will still be focused on the push button.
2.4.4.Callbacks of Combobox
2.4.4.1.PreProcess Function
It is called immediately after the combobox is activated but before waiting the user’s first response. Usually it is used to perform some initializations, such as setting initial value for the combobox or other widgets. The prototype is:
int (*PreProcess)(long Hwin, long Hcombox);
Where Hwin is the handle of the form window and Hcombox is the handle of the comboxbox.
NOTE: If it returns a non-zero value, the line editor will still be activated.
2.4.4.2.PostProcess Function
It is called immediately before the combobox loses the focus (by pressing Tab/Enter/Up/Down/Left/Right key). It is often called to validate the user’s inputs. The prototype is:
int (*PostProcess)(long Hwin, long Hcombox);
Where Hwin is the handle of the form window and Hcombox is the handle of the comboxbox.
NOTE: If it returns a non-zero value, MYTUI will consider an error occurs and refuse to move the cursor out.
2.4.5.Callbacks of Pull Down/Popup Menu
You can define a callback function for each menu item of the menu. No preprocess or postprocess functions available.
2.4.5.1.Menu Item Callback Function
It is called whenever a menu item is activated (by pressing Enter key). The prototype is:
int (*Callback)(long Hwin, long Hmenu, long Hsubmenu, long Hitem);
Where Hwin is the handle of the form window, Hmenu is the handle of the pull down or popup menu, Hsubmenu is the handle of the current submenu and Hitem is the handle of the current menu item on the submenu.
2.4.6.Callbacks of List Box
2.4.6.1.PreProcess Function
It is called immediately after the list box is activated but before waiting the user’s first response. Usually it is used to perform some initializations, such as setting initial value for the list box. The prototype is:
int (*PreProcess)(long Hwin, long Hlist);
Where Hwin is the handle of the form window and Hlist is the handle of the list box.
NOTE: Even if it returns a non-zero value, the list box will still be activated.
2.4.6.2.PostProces Function
It is called immediately before the list box loses the focus (by pressing Tab key). It is often called to validate the user’s inputs. The prototype is:
int (*PostProcess)(long Hwin, long Hlist);
Where Hwin is the handle of the form window and Hlist is the handle of the list box.
NOTE: If it returns a non-zero value, MYTUI will consider the user’s selections are wrong and refuse to move out.
2.4.6.3.Select Callback Function
It is called whenever a item is selected or unselected (by pressing space key). It is often used as a trigger to perform some actions that rely on the status of the items. The prototype is:
int (*SelectCallback)(long Hwin, long Hlist);
Where Hwin is the handle of the form window and Hlist is the handle of the list box.
2.4.7.Callbacks of Data Grid
2.4.7.1.PostProcess Function
It is called immediately when the data grid is to lose the focus (by pressing Tab key). It is often called to validate the user’s inputs. The prototype is:
int (*PostProcess)(long Hwin, long Hdgrid);
Where Hwin is the handle of the form window and Hdgrid is the handle of the data grid.
NOTE: If it returns a non-zero value, MYTUI will consider validating fails and refuse to hand out the focus.
2.4.7.2.Delete PreProcess Function
It is called whenever a row is to be deleted (by pressing Ctrl+y key). It is often used to get the user’s confirm before really deleting the current row. The prototype is:
int (*DeletePreProcess)(long Hwin, long Hdgrid, int Line);
Where Hwin is the handle of the form window, Hdgrid is the handle of the data grid and Line the the index of the line to be deleted.
NOTE: If it returns a non-zero value, MYTUI will consider the user doesn’t want to delete the row and end the action. That means no rows are deleted.
2.4.7.3.Insert PostProcess Function
It is executed whenever a row is to be inserted (by pressing Ctrl+n or Ctrl+e key). It is often called to get the user’s confirm before inserting a new row. The prototype is:
int (*InsertPostProcess)(long Hwin, long Hdgrid, int Line);
Where Hwin is the handle of the form window, Hdgrid is the handle of the data grid and Line the the index of the line to be inserted.
NOTE: If it returns a non-zero value, MYTUI will consider the user doesn’t want to insert a row and end the action. That means no rows are inserted.
2.4.7.4.Field’s PostProcess Function
Fields are also called columns. Each field can be specified a postprocess function that applies to all cells in this column. It is called when the relevant cells are activated (See also Define Fields (Columns) for details). The prototype is:
int (*FieldPostProcess)(long Hwin, long Hdgrid, int Line, int Col);
Where Hwin is the handle of the form window, Hdgrid is the handle of the data grid and (Line,Col) indicates which cell is activated.
NOTE: If it returns a non-zero value, MYTUI will consider the post processing failed and cancel all changes made in the postprocess function.
2.5.Key Bindings
Before starting ©wdesigner, you should know how to operate typical widgets and form with key bindings. Actually, ©wdesigner is also developed with MYTUI SDK, each dialog window for editing a widget is a MYTUI form window contains a series of widgets.
2.5.1.Line Editor’s Key Bindings
|
Key Binding |
Function |
|
Left |
Move the cursor one character to the left. |
|
Ctrl+b |
|
|
Right |
Move the cursor one character to the right. |
|
Ctrl+f |
|
|
Ctrl+a |
Move the cursor to the beginning. Note that Home key will not always work. |
|
Home |
|
|
Ctrl+e |
Move the cursor to the end. Note that End key will not always work. |
|
End |
|
|
Ctrl+d |
Deletes the character to the right of the cursor. |
|
Delete |
|
|
Ctrl+h |
Deletes the character to the left of the cursor. |
|
Backspace |
|
|
Escape |
Cancel editing, discard any changes and restore the original content and notify the form to escape. |
For any other printable characters, ©wdesigner will consider them as normal inputs.
Note: At present only overwrite mode works for line editor, no insert mode. So each character from your input will overwrite the character at the cursor position.
2.5.2.ComboBox’s Key Bindings
The combobox widget consists of a line editor and a drawdown list box. When entry of the combobox has the input focus, if the line editor of the combobox is read-only( this is the default case), you can press Space key to pop up the drawdown list box

