The Design Window is where the user interface for client applications is created. Graphical containers and components are added and arranged in a layout grid and their contents, attributes and event linkages are assigned. The Design Window is made up of several parts: a Menubar, Toolbars, Component Tree Panel, Design Layout Panel, Properties Panel, and a Status Panel. Each of these is discussed more fully below.
 

Menubar
The menubar at the top of the Design Window uses normal mouse or keyboard actions to select menu choices. Some of the menu choices may also be selected by clicking toolbar buttons or other buttons in other panels of the Design Window. Following is a detailed explanation of each menu choice.

File
Contains menu choices for creating, opening, saving and closing app files, and exiting the program. Also see "Working with XML Procedures" in Section 1.

File-->New
Create a new XML app file, with whatever default contents are specified by the XML template file "templates\NewApplicationTemplate.xml". (The name will be assigned when the first "Save" or "Save As" operation is done).

File-->Open
Open an existing app file.  In Version 2, app files can reside locally in any directory on the client system or a networked server, or they can be served remotely from the host's web server.

File-->Save
Save the app file that is currently displayed in the appname combobox (which is at the top of the leftmost panel, just below the toolbar). Note: when a new app is first saved, the "Save" choice will actually run the "Save As" choice, in order to assign a name to the new app file.

File-->Save As
Like Save, but requests a new appname. All appnames must end in ".xml".

File-->Close
Closes the appfile that is currently displayed in the appname combobox. Note that the "Close" choice will prompt for a "Save" before closing, if the app has changes that have not been saved.

File-->Close All
Closes all open appfiles (those that are listed in the appname combobox). Note that closing an app will prompt for a "Save" before closing, if the app has changes that have not been saved.

File-->Reopen App
Closes the appfile that is currently displayed in the appname combobox and then reopens it. This can be used to force Jargon Writer to use a "fresh" copy of an app. Note that the "Close" choice will prompt for a "Save" before closing, if the app has changes that have not been saved.

File-->Exit
Closes all open apps and then exits Jargon Writer. Note that closing an app will prompt for a "Save" before closing, if the app has changes that have not been saved.
 

Edit-->Cut
Copies the selected components into a temporary clipboard memory and flags them to be deleted from their current location when they are pasted into a new location.

Edit-->Copy
Copies the selected components into a temporary clipboard memory.

Edit-->Paste
Pastes the components in the temporary clipboard memory into the new container that is highlighted in the component tree.

View-->Script Editor
Displays the Script Editor Window where functions and methods may be defined and changed.

View-->Preferences
This menu choice is not currently implemented.

View-->Error Console
Displays a "console" window where error messages and the session error log can be displayed. This windown is used primarily for debugging.

View-->Windows Style Look and Feel
Changes the visual display style and user interface behavior to the Microsoft Windows standard.

View-->Metal Look and Feel
Changes the visual display style and user interface behavior to Sun's new "metal" standard for Java.

View-->Motif Look and Feel
Changes the visual display style and user interface behavior to the motif (X-Windows) standard. Motif is used on many Unix workstations and X-Terminals.
 

Run-->Execute
Runs (executes) the currently active app whose root node in the component tree is highlighted. The app is run in the emulator (ReaderPDA or ReaderWIN) whose pathname is specified by the "ReaderExecutable" preferences parameter.

Note: make sure the emulator is not already running before executing an app with this feature. Otherwise, Reader will display various error messages and end.

Run-->Render
Renders (paints) a frame if the frame node or any component node within the frame in the component tree is highlighted.

Run-->Generate Host Procedure
This feature is used only when developing apps that will communicate with host procedures written in the Progress 4GL. It generates one or more Progress ".p" source programs, based on the program specs in host tasks that were defined in the Task Editor for the currently active app.
 

Help-->Help Topics
Starts the default Web browser on your system and loads the "Jargon Software Index to Online Help Documents" (./doc/index.html). This document has links to all online documentation for Jargon Software products. The browser startup command and the location of the documentation directory are specified in several name/value parameters in the "system\preferences.ini" file.

Help-->About
Displays the current Jargon Writer version number and build number, license information and how to contact Jargon Software for product support.
 

File Action Toolbar

The first toolbar has six buttons which perform file-related actions that are the same as their corresponding menubar choices.

The first button ("Create new application object") is the same as the "File-->New" menu choice.

The second button ("Open an existing application object") is the same as the "File-->Open" menu choice.

The third button ("Save application object") is the same as the "File-->Save" menu choice.

The fourth button ("Render selected frame") is the same as the "Run-->Render" menu choice.

The fifth button ("Generate Host Procedure") is the same as the "Run-->Generate Host Procedure" menu choice.

The sixth button ("Execute application") is the same as the "Run-->Execute" menu choice.
 

The second toolbar contains seven separate 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 from the drop-down combo box to the left of these toolbars.

Unlike the first set of buttons, these visual object selector buttons stay depressed once clicked, until a different button within this group is clicked. Whichever button is depressed represents the type of  object 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.

User Tip: The first button in each of the component group toolbars is an upward-pointing arrow, similar to the image used as a mouse cursor. This is a "do-nothing" button that simply shuts off selection of the other buttons in that toolbar. It is useful to click this when you are done adding a certain type of component, in order to avoid adding more instances of that component by accidentally clicking in an empty grid cell in the middle layout panel.

The "Frame" button selects a frame container object. Frames can only be added under the app "root" node. An app can contain any number of frames. Each frame can contain any of the following objects: menubar, toolbar, panel, cardpanel, tabpanel,  label, textfield, passwordfield, textarea, textpane, combobox, listbox,  button, togglebutton, checkbox, radiobutton, buttonGroupPanel, table, tree, internal frame container, and progressbar.

The "Panel" button selects a single panel container object. The panel, cardpanel and tabpanel containers are normally used inside frames (or nested within other panels) to contain other components. Components allowed within a panel, card, tab or buttongroup panel are: menubar, toolbar, panel, cardpanel, tabpanel, label, textfield, passwordfield, textarea, textpane, combobox, listbox, button, togglebutton, checkbox, radiobutton, buttonGroupPanel, table, tree, internal frame container, and progressbar.

The "Label" button selects a label with an image or text caption.

The "Hyperlink" button selects a hyperlink with an underlined text caption.

The "Textfield" button selects a single-line field in which text can be entered and displayed.

The "Passwordfield" button selects a single-line field similar to a textfield in which text can be entered and displayed. All data values are displayed as asterisks for security purposes.

The "Textarea" button selects a multi-line textfield, with optional word wrapping.

The "Textpane" button selects a multi-line textpane for display of text, much like a multi-line label. A textpane does not have a border and has the same background as the frame iteself, so it does not look like a textarea or other data entry fields.

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.

The "ListItem" button selects a component with a text label and/or an image that is used as one choice within a Combobox. To add a ListItem to a combobox, highlight the ComboBox in the component tree, then select the "ListItem" button and click the "+" button above the component tree.

The "Button" button selects a rectangular button that can contain an image, a caption, or both.

The "Checkbox" button selects a special button with a small, square box that toggles between "checked" and empty, plus a caption and/or an image.

The "Table" button selects a spreadsheet-like Table (or "Grid" for Oracle folks) 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 "TextCellEditor" or HyperlinkCellEditor button and click the "+" button above the component tree.

Note that while rows can be added dynamically to a Table, columns can NOT be dynamically added. You can only use columns that have been defined in advance by adding one or more of the available xxxxCellEditor components to the table in Jargon Writer.

The "TextCellEditor" button selects a table column in which text can be displayed, similar to a regular textfield.

The "HyperlinkCellEditor" button selects a table column in which underlined text can be displayed, similar to a regular hyperlink.

The "Image" button selects an image component that can be used to display GIF or JPG images on Windows-based devices. Only GIF87a images can be displayed on PalmOS-based devices in Version 3.2.

The "Menubar" button selects a menubar component that can be used to contain menu choices.

The "Menu" button selects a menu component that can be a choice in a menubar or a submenu of another menu choice.

The "Menuitem" button selects an individual menu item of a menubar menu or submenu. An Action Event can be linked to menuitems.

Component Tree Panel

The left-hand panel in the center of the Design Window is the Component Tree Panel. This panel 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 two panels to the right of the Component Tree Panel.

At the top of this panel is a combo box which shows the currently active app,  or a blank entry if no app has been opened or created yet within this session. This combo box is also used to select a different app as the currently active app. You can select any app that has previously been opened or created in this session, and not yet closed, which makes it very easy to work on multiple related apps in one session.

The currently active 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 currently active.

Below the combo box is a tree representation of the visual objects that make up the app, starting with the "root" object which is the app itself. To expand the root object, double-click on it. Unlike all other tree nodes, the root object does not have a "+/-" sign that can be single-clicked to expand or contract the node.

When you expand the root icon, you will see one or more frames and/or miscellaneous containers that are the first level containers within the app. By clicking on the "+" sign in front of a frame, or by double-clicking on the frame icon or name, you can 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").

User Tip: A faster way to completely expand or collapse a tree or one of its "branches" is to click with the right mouse button on the name of the container. This will alternately fully expand or fully collapse the contents of the container on which you click.

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 first-level 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 be blank, and the panels that make up the tabpanel or card panel will be shown only in the component tree. This is because the panels 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. (Note: these components are not available in Version 3.2).

Table cell editors, misc. containers, message handlers, button groups, trees, tree nodes, menubars, submenus and menu items also do not display anything in the center panel, only in the component tree.  (Note: some of these components are not available in Version 3.2).

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 blue. Also, the righthand tabpanel will display the properties and attributes of the selected component.

User Tip: The Component Tree Panel can be automatically scrolled horizontally or vertically as needed. You can also make it wider by slowly moving the mouse cursor over the right-hand boundary between this panel and the center panel until the cursor changes to a double-headed horizontal arrow, then holding down the left mouse button and dragging it to the right, then releasing the mouse button. It will auto-size to fully display the widest element of the tree as it is currently expanded.

If you are using a screen resolution higher than 800 by 600, you can also double-click on the "Jargon Writer" frame title at the top of the Design Window to go to full-screen mode. Double-clicking again will restore the display to normal mode. Of course, you can also use the corresponding buttons in the upper right-hand corner of the frame to do the same thing, or to minimize the Design Window temporarily while working on something else.

• click on the parent object node (combobox or table) in the component tree
• select the child object (listitem, etc.) in the appropriate toolbar
• click the "+" button at the top of the component tree panel

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.

!! IMPORTANT: Deletes are "recursive". That is, if you delete a panel, it will also delete all components within that panel.

Design Layout Panel
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 "Frame0") 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 begin adding containers and components to this frame, first click (depress) the toolbar button for the type of container you want (such as a panel) from the appropriate toolbar group (such as Containers), 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 Frame0 will be expanded so you can see the Panel0 node, which is highlighted. Notice that the grid layout is cleared; this is because you are now viewing the contents of Panel0, and can begin adding components to it.

To practice, click the "Label" toolbar button, then click in the upper leftmost grid cell to add a label, then 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 view your screen as it will appear, highlight the root object in the component tree, then click the "Execute" toolbar button. You will see that a very small frame has been created, just large enough to hold the label and textfield and the panel. This is the default layout behavior for the Java-based 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.

You can close the execution window by clicking the "X" button in the upper right-hand corner. 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 appnames in the combo box and root node of the Component Tree change to "myapp".

Notice 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 don't 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 taller or wider 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 edger of that cell; you do not need to get the edge of the object positioned over the edge of the destination cell.

User Tip: When designing any screen with more than a few components, a useful technique is to leave every other row and column blank; in other words, leave an empty cell between any two components. While this may require some scrolling at times, it will make it much easier to rearrange components if the need arises.

!! IMPORTANT: Jargon Reader versions vary in the number of grid rows and columns that can be used in the Design Window. Jargon Reader versions for handheld devices (PDAs) support only 8 columns and 24 rows, while versions for PC and tablet platforms support up to 40 columns and 80 rows.

Properties Panel

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 radio buttons at the top of this Properties Panel.

Attributes 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 initial value, column width, field type, and default value options.

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 "Frame0" and "frame0" 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.

• The isVisible property determines whether an object is displayed on the screen or is hidden (only exists in memory). One use for this property is to add a "secondary" frame that initially will be nonvisible, such as a "browse" frame. When a hidden object is needed, a local or host method can change the isVisible property to "true".

• The isEnabled property determines whether an object is initially enabled for input or disabled when it is first created and displayed.

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 GridX, GridY, GridW and GridH 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 height/width).

The Fill combobox controls whether an object will grow to fill its cell horizontally, vertically, both or neither, if it is smaller than its cell.

The Anchor combobox controls the placement of an object within its cell, if it is smaller than its cell. The default is "Northwest".

The Pad X and Pad Y fields are used to add a fixed number of pixels to the width (Pad X) or height (Pad Y) of an object. The values must be integers, and the defaults are zero.

The Top, Left, Bottom and Right Inset values are used to add a fixed number of pixels between the specified edge of a cell and the adjacent edge of the object in it. The values must be integers, and the defaults are zero.

The WeightX and WeightY values are used when a frame is resized, to determine how many pixels will be added to a component's cell, relative to other components within the same container. The values are decimal values with up to 2 decimal places, and the defaults are zero (no resizing).

Events Panel

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 name 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.

To see or change the function associated with a given event, select that event in the Event Name 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 listbox (scrolling if necessary), then click the "Select" button in the bottom set of buttons. This will add the specified function to the Function to execute field (below the Event name combobox).

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 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 double-click any function name in the listbox to open the Script Editor and position it to the selected function within the text editor window.

User Tip: When you first select an object, the Events Panel will show the first Event that has an associated function (if there is one). This makes it easy to see if an object has any defined actions for any of its events, without selecting each possible event to see if that event has an associated function. Note that there could be more than one Event with an associated function; only the first one in the list will be shown initially.

The Borders Editor window is used to add a visible border to a container object, typically a panel. To access this window, click in the "Border" property value field for a panel or other container which can have a border property, then click the button at the right of the value field to open the above window.

The border type is selected by clicking the radio button in front of each border choice in the Borders Editor window. Available choices are the following (some choices may not be currently available and will be grayed out):

No Border (the default)
Etched Border
Raised Border (gives contents a raised 3D look)
Lowered Border (gives contents a lowered 3D look)
Line Border (with choice of pixel width and color)   ** Color choice not yet implemented
Empty border (which is similar to using pad and inset constraints)
Image border (specifying an image and pixel width for a border)

The etched, raised, lowered and line borders also allow an optional title to be entered, by checking the "Set Title" radio button in the Title panel of this window, then entering the title caption, font face and font size. The title will be displayed on the top edge of the border, starting near the left side.

After making border selections, click the "OK" button in the Border Editor window. If you do not want to use your selections, click the "Cancel" button.

Status Panel

The Status Panel at the bottom of the Design Window contains a one-line message area at the lower left in which various Jargon Writer status messsages are displayed, and a progress bar at the lower right which graphically indicates the completion status of various actions such as opening, closing and executing apps. No input fields are used in the Status Panel.

Error Console
The Error Console is used to display error messages from Jargon Writer and from apps that it executes. It is used primarily for debugging purposes by Jargon Software support personnel. To view the Error Console, select View-->Error Console from the menubar in the Design Window.