Contents: Overview of the Design Window
The Design Window is where the user interface for client applications is created. Graphical containers and components are added and arranged in a WYSIWYG layout grid and their contents, attributes and event linkages are assigned. The Design Window is made up of several parts:
Menubar,
Toolbars,
Component Tree Panel,
Script Test Panel,
Design Layout Panel,
Properties Panel, and a
Status Panel.
Each of these is discussed more fully below.
Menubar
File
File-->NewEdit Contains menu choices for cut, copy and paste actions. Edit-->CutInsert Contains menu choices to insert templates of commonly used script statements into the Script Test panel or the Script Editor panel. These insert choices save you from looking up and typing in the exact syntax of a script statement. For slow typists, those who work with a lot of languages, and those with failing memories (such as the present author), this feature will save you a lot of time and energy. Insert-->Function Template Inserts a template for a "function" body.View Contains menu choices for viewing other windows and for changing the font size in text panels. View-->LayoutRun Runs (executes) the currently selected app in a PDA emulator or Windows client engine, or generates host source code for the remote procedure calls defined in the app's script. Run-->Run in ReaderPDAHelp Displays various online documentation and other reference information. The location of the documentation directory and filenames for HTML help pages are specified by preference values "DocRootDir" and related parameters. Toolbars The toolbar panel contains various toolbars with buttons that perform different types of actions. The File Action Toolbar at the top left contains buttons that perform file-related actions, as discussed in "Working with XML Client Applications" in Section 1. To its right is a tabpanel containing a set of Component Toolbars that are used to select component types when you are creating a screen layout in the Design Layout Panel. Below the File Action toolbar is the Component Tree Toolbar with buttons used to add, remove or reorder certain types of non-visual components such as table columns and combobox list items, and buttons used to insert new rows and columns in the layout grid. These buttons are described in the Component Tree Panel section below.
The buttons on the first toolbar perform file-related actions that are the same as their corresponding menubar choices. The first button ("New app") is the same as the "File-->New" menu choice.Component Toolbars The Component Toolbars tabpanel contains a set of toolbars, each with one or more related components, that are used when adding visual objects (containers and components) to the Design Layout Panel or when adding nonvisual objects to the Component Tree Panel. The toolbar with the desired group of components is selected by clicking on a tab in the tabpanel. Unlike the first set of buttons, these visual object selector buttons stay selected once clicked, until a different button within the group is clicked. Whichever button in a given toolbar is most recently selected is the component that will be added when you click on a grid cell within the Design Layout Panel or click the "+" button in the Component Tree Panel. 1. Buttons Toolbar The "Button" button selects a rectangular button that can contain an image, a text caption, or both.2. Containers Toolbar The "Frame" button selects a frame container object. Frames can only be added under the app's root "XML" node. An app can contain any number of frames. Each frame can contain any of the following objects: menubar, panel, cardpanel, tabpanel, label, textfield, passwordfield, textarea, textpane, combobox, button, checkbox, table, tree, image and progressbar.3. Lists Toolbar The "Combobox" button selects an object similar to a text field, but with an arrow at the right that, when clicked, "drops down" a scrollable list of choices. Combo box selections can be populated with static initial values that are assigned by adding ListItem components to the Combobox, or with dynamically assigned values supplied by a host or client function.4. Menus Toolbar The "Menubar" button selects a menubar component that can be used to contain menu choices.5. Misc Toolbar The "Image" button selects an image component that can be used to display GIF or JPG images on Windows-based devices.6. Table Toolbar The "Table" button selects a spreadsheet-like Table (or "Grid" in Oracle terminology) with multiple rows and columns, which can be used for displaying browse results and row selection. Tables can have both horizontal and vertical scrolling, column headings, single row selection and other features. To add columns to a table, highlight the table in the component tree, then select the "Text Cell" or "Link Cell" component toolbar button and click the "+" button above the component tree.7. Text Toolbar The "Label" button selects a label with a text caption.8. Tree Toolbar The "Tree" button selects a tree object similar to the trees used in Jargon Writer, such as the Component Tree Panel in the Design Window.
The left-hand panel in the center of the Design Window is the Component Tree Panel. This panel contains a tree that shows each app that is currently open. You can have any number of apps open at once in the tree. The tree is used to select the currently active "app" and to select a specific component object within the app so that you can modify its layout, properties, events and attributes in the Layout and Properties panels to the right of the Component Tree Panel. The same tree is used in the Script Editor to select components for finding or inserting them with a selected method into a script. The first node in the tree is always a special "Global Objects" node. This node is used primarily in the Script Editor, not in the Design Window. As each xml app is opened, it will create a new tree node as a sibling of the Global Objects node. The currently selected app is the one whose tree structure, layout, properties and functions will be displayed in the corresponding panels and windows. To modify an app, it must be opened and its XML node or a subnode in it must be selected. Each open app has a tree representation of the visual objects that make up the app, starting with the "root" (XML) object which is the app itself. To expand a tree node, click on the "+" sign in front of it, or double-click on the node icon or name. When you expand the root node of an app, you see one or more frames that are the first-level containers within the app. When you expand a frame node, you see the next level of contents within the frame, such as panels, menubars and other objects. This process may be continued recursively within a branch of the tree, until it is fully expanded (all branches are fully opened down to each individual "leaf"). Each type of container object and component object has its own icon (the same icon that is used in the Components Toolbar buttons). Frames and non-visual containers are shown in the order they were defined. Most other types of objects are displayed in the same order as their layout in the Design Layout Panel, reading from left to right and top to bottom. Objects that are defined in list boxes in the Properties Tabpanel rather than in the Design Layout Panel (such as tabs in a tab panel) are displayed in the same order as in the list box. To select an object to work on, single-click it within this tree. If it is a container which is not expanded, you can double-click the icon or name, which will both select the object and expand its first-level tree contents. When a frame or panel is selected, its contents are displayed in the Design Layout Panel (the center panel), and the Properties Tabpanel (the right-hand panel) shows the various properties of the frame or panel selected. When a tabpanel or card panel is selected, the center panel will show it with the first tab or card displayed. The full set of tabs or cards that make up the tabpanel or card panel will be shown only in the component tree. This is because the tabs or cards contained in a tabpanel or card panel are not laid out in a grid pattern, but rather are all overlaid or "stacked" on top of each other, so a grid layout is not appropriate or possible. Table columns, trees, tree nodes, menubars, submenus and menu items also do not display anything in the center panel, only in the component tree. When you select other components such as buttons, checkboxes, labels, textfields, textareas, combo boxes and list boxes, the selected component will be displayed in the center panel along with all other "sibling" components that have the same parent container, and the selected component will be highlighted in red. Also, the righthand tabpanel will display the properties and attributes of the selected component.
Above the Component Tree Panel is the Component Tree Toolbar that has six buttons used to modify the tree contents and layout grid. To Add components to certain parent components, such as a List Item to a Combobox, or a Text Cell or Link Cell to a Table:
To Delete a component, click on its node in the component tree, then click the "-" button at the top of the component tree panel. When this button is selected, a confirmation message box is displayed. Be very careful when deleting to be sure you are deleting the object you intended. It is also a good idea to do a "save" immediately before deleting one or more items.
To Rearrange the order of two or more components, click on a component node in the component tree, then click the up or down arrow button at the top of the component tree panel to move that component up or down within its container. This is primarily used for components like menu items, listbox choices etc. that do not have a gridbag layout representation. To insert a new row within a specified container in the Design Layout Panel, click on a component in the tree that is in the row immediately below where you want to insert a new row, then click the Insert Row button. Then, select a component in the Components Toolbar and click in the new row to add it. If you do not add any components to a new row, it will not be saved when you leave that container and select another container. Similarly, to insert a new column, click on a component in the tree that is in the column immediately to the right of where you want to insert a new column, then click the Insert Column button.
The Design Layout Panel is the center panel in the Design Window. Here you can add panels and other components such as labels, textfields and buttons within frames and panels. You can also control the relative positioning of a group of two or more components within a container by specifying their location, height and width in the grid of cells that make up this panel. When starting a new app, you begin by clicking the "New" toolbar button or selecting "File-->New" from the menubar. When this is done, you will see one frame (with a default name such as "Frame1") appear in the Component Tree Panel. If you click on this frame node in the component tree, you will see a checkerboard-type grid pattern in this Design Layout Panel. To practice adding containers and components to this frame, first click the toolbar button for a panel from the Containers toolbar group, then click in the upper leftmost cell of the Design Layout Panel grid. A panel will be added within the frame, and the tree node for Frame1 will be expanded so you can see the Panel1 node, which is highlighted.
Next, select the "Text" Components Toolbar and click the "Label" toolbar button, then click in the upper leftmost grid cell to add a label. Now click the "Textfield" toolbar button and click in the grid cell to the right of the label cell. Congratulations, you have just created your first screen layout in Jargon Writer! To see the edges of the (invisible) panel "Panel1", select "Frame1" again in the Component Tree, then click the "Show Outlines" checkbox above the Layout Panel. When this option is selected, certain objects such as panels, textpanes and images will show a green border in the layout panel when their parent container is selected in the tree. Note that this only applies to the first level of objects in a container. That is, if a frame contains a panel that contains a textpane, only the panel will show a green border when the frame is selected. To see the green border of the textpane, select the panel which is its first-level parent. The layout panel shows a WYSIWYG version of your screen as it will appear, using the default layout behavior for the layout system used in Jargon Software products: the "GridBag Layout Manager". Components are placed right next to each other, and containers shrink to the smallest size that can hold all of their contents. This default layout can be changed by selecting various layout attributes (or "constraints") in the Layout Panel within the Properties Panel. For a more detailed explanation of the layout system (called the "GridBag Layout Manager") used in this panel, refer to the GridBag Layout Manager document. To save the appfile you have just created, click the "Save" toolbar button or select "File-->Save" from the menubar, then assign a name such as "myapp.xml" and click Save. Notice that the appname in the root node of the Component Tree changes to "myapp". Also note that you can select a component in a container by either clicking on its node in the Component Tree or by clicking on its cell icon in the Design Layout Panel. To move an object from one grid cell to another, drag it with the left mouse button depressed until the upper left-hand corner of the object is inside the destination cell, then release the mouse button. You do not have to position it exactly over the grid cell. If the upper lefthand corner is inside the cell, it will "snap to" when released. To make an object take up two or more cells relative to the other sibling objects in the same container, position the mouse cursor over an edge of the object until it changes to a horizontal or vertical two-headed arrow, then drag the edge until it is inside the cell you want to exand it into. It will "snap to" the outer edge of that cell. You do not have to get the edge of the object positioned over the edge of the destination cell.
This panel on the right side of the Design Window contains three panels: an Attributes Panel, a Layout Panel, and an Events Panel. The Events Panel is always displayed at the bottom, while the other two panels can be viewed by selecting either the Attributes or Layout tab of the tabpanel at the top of this Properties Panel.
The Attributes panel contains a wide range of properties specific to the type of object to which they apply. For example, the properties of textfields include default (initial) value, width (in average character columns), field type, and tooltip. The meanings of most of these various object properties are self-explanatory. For a detailed explanation of each property of each object type, refer to the Component Properties section. The only property that is common to every container and component is the object name, which must be unique for every object (container or component) within an app. IMPORTANT: All object names in Jargon Software apps are case-sensitive, which means that "Frame1" and "frame1" are the names of two different frame objects and cannot be used interchangeably. This is the opposite of some other languages (like the Progress 4GL) which are case-insensitive (where the compiler does not care how upper and lower case letters are used for variable names, procedure names, or table and field names). Similarly, the Unix operating system IS case-sensitive, while DOS and Windows are not. For this reason, it is important to adopt a consistent set of rules for naming objects within your app, and these rules should also specify upper or lower case.Some other common properties used in many components are listed below.
The Layout Panel contains the various GridBag constraints which control the placement and resizing behavior of an object. For more details on each of these constraints, refer to the GridBag Layout Manager document. The Grid X, Y, W and H values are read-only. These values are determined by the placement of an object in the Design Layout Panel (its X/Y coordinates) and by how many cells it occupies (its Width and Height).The following diagram (Figure 1) may help to explain the various GridBag constraint parameters.
The Events Panel is used to identify which events Jargon Reader will respond to on a specific object, and which function will be executed when those events occur. For a more detailed discussion of events and functions, see the Overview of Functions, Methods and Events section. The Event combobox lists all of the events that Jargon Reader can "listen for" on an object. The events in the list vary depending on the type of object. Some objects have no events. Click the Help button to see a "List of Events" that describes each available event, the actions that cause it to fire, and the components on which it is available for use. To see or change the function associated with a given event of a given component, first select the component in the tree, then select the event in the Event combobox. To associate an Event with a function, first select the event in the combobox, then click the desired function name in the Available functions list (scrolling if necessary), then click the Select button in the bottom set of buttons. This will add the specified function to the Function field (below the Event combobox), replacing any previous entry. To unassociate (remove) a function from an event, first select the event in the combobox, then click the Clear button in the bottom set of buttons. To view Available functions in alphabetical (case-sensitive) order, check the "Sort" checkbox. To view them in the order that they occur in the script, uncheck it. To find a function that starts with or contains some character string, enter the string in the textfield before the "Find" button (start with an asterisk "*" for a "contains" search). Then click the "Find" button to find the first function name in the list that starts with or contains that string, and click "Next" to find the next one in the list. A message box will notify you if no match is found or if there are no more matches. To quickly go to the last function name in the list, click the ">|" button. To return to the top of the list, just drag the vertical scrollbar slider to the top. To add, change or delete the functions which are shown in the Available Functions box, select View-->Script Editor from the top menubar to bring up the Script Editor Window. Or, simply click any function name in the listbox and then click the Edit button to open the Script Editor and position it to the selected function within the text editor window. Borders Editor
The Borders Editor window is used to add a visible border to a container object such as a panel. To access this window, click in the "Border" property value in the Attributes panel for a panel or other container with a border property, then pull down the combobox in the value field and choose "Select Border" to open the above window. Currently the only border available is a Line Border with choice of pixel width, or no border. After making border selections, click the Save button in the Border Editor window. If you do not want to use your selections, click the Cancel button. To remove a previously selected border, select "Remove Border" from the Border combobox value in the Attributes panel.
The Script Test Panel below the Component Tree contains a textarea where you can enter and execute script statements to quickly test syntax or functionality of small sets of statements. Enter script statements by typing them or by using the Insert menu choices from the menubar to insert code templates which you then modify. After entering the script statements, click the Eval Stmts to interpret and execute the statements. The Clear button clears the textarea, while the Help button opens the "Writing Scripts" help page. The Status Panel at the bottom of the Design Window contains a one-line message area that shows the currently selected component name, the currently selected app name, and that app's status (Opened, Modified, etc). No input fields are used in the Status Panel.
The Preferences Window allows you to view and/or change the contents of the "writer.ini" configuration file that controls various Writer options. This file is located in Jargon Writer's "./xml/writer" subdirectory. If you make changes in this window and click Save, the writer.ini file on disk is updated. Or, if you have changed writer.ini using an external text editor, click Reload to read in the new version here to make use of the new values. To view the Preferences Window, select View-->Preferences from the menubar in the Design Window. To return to the previous window, click the Close button in the Preferences Window.
The Logs Window contains a Trace Log with a checkbox to turn on tracing of internal Jargon Writer processing steps, and an Error Log that shows the time-stamped text of any error messages from this session of Jargon Writer. There are also buttons to clear each of the logs. These logs are used primarily for debugging purposes by developers and Jargon Software support personnel. To view the Logs Window, select View-->Logs from the menubar in the Design Window. To return to the previous window, click the Close button in the Logs Window. |