Jargon Software
Getting Started with Jargon Writer
Using the Design Window

Contents:
Overview of the Design Window
Menubar Toolbars Component Tree Panel Design Layout Panel
Properties Panel Borders Editor
Script Test Panel
Status Panel
Preferences Window
Logs Window


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
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 specified in the writer.ini "TemplateFile" option. (default is "./templates/NewApplicationTemplate.xml"). The app's real name will be assigned when the first "Save" or "Save As" operation is done.

File-->Open
Open an existing app file. The XML app files can reside locally in any directory on the client system or a networked server, or they can be served remotely from a web server.

File-->Save
Save the app file that is currently selected in the Component Tree. 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 selected in the Component Tree.. 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 shown in the Component Tree). 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 selected in the Component Tree. and then reopens it. This can be used to force Jargon Writer to use a "fresh" copy of an app. 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 closes the Design Window and returns to the Startup Window. Closing an app will prompt for a "Save" before closing, if the app has changes that have not been saved.
 

Edit
Contains menu choices for cut, copy and paste actions.
Edit-->Cut
In the Design Window, copies the selected component(s) into a temporary clipboard memory and flags them to be deleted from their current location when they are pasted into a new location. In the Script Editor, does the same for highlighted text in the script window.

Edit-->Copy
In the Design Window, copies the selected components into a temporary clipboard memory. In the Script Editor, does the same for highlighted text in the script window.

Edit-->Paste
In the Design Window, pastes the components previously cut or copied into the temporary clipboard memory into the new container that is highlighted in the component tree. In the Script Editor, pastes the copied text into the location of the insertion cursor in the script window.

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

Insert-->If-Else Template Inserts a template for an "if/else" statement block.

Insert-->Switch Template Inserts a template for a "switch" statement block with specific cases and a default case.

Insert-->While Loop Template Inserts a template for a "while" loop body.

Insert-->Do While Loop Template Inserts a template for "do while" loop body.

Insert-->For Template Inserts a template for a "for" loop body.

Insert-->Conditional Operator Inserts a template for the compact and handy "conditional operator" statement: Result=(condition)?trueValue:FalseValue.

View
Contains menu choices for viewing other windows and for changing the font size in text panels.
View-->Layout
Displays the Design Window (to return to it from the other windows below).

View-->Script Editor
Displays the Script Editor Window where script functions may be entered and changed.

View-->Preferences
Displays the Preferences Window where the contents of the "writer.ini" configuration file may be viewed, reloaded and changed.

View-->Logs
Displays a "console" window where trace messages and the session error log can be displayed. This window is used mostly for debugging.

View-->Small Font
Uses a smaller fixed font in the Script Test, Script Editor, Preferences and Logs windows.

View-->Normal Font
Uses the normal fixed font in the Script Test, Script Editor, Preferences and Logs windows.

View-->Large Font
Uses a larger fixed font in the Script Test, Script Editor, Preferences and Logs windows.
 

Run
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 ReaderPDA
Runs (executes) the app that is currently selected in the Component Tree. The app is run in the Jargon Reader PDA emulator (ReaderPDA).

UserTip.gif Important: Make sure that a copy of Reader is not already running before executing an app with this feature. Otherwise, Reader will display various error messages and end.

Run-->Run in ReaderWIN
Runs (executes) the app that is currently selected in the Component Tree. The app is run in Jargon Reader for Windows(ReaderWIN).

UserTip.gif Important: Make sure that a copy of Reader is not already running before executing an app with this feature. Otherwise, Reader will display various error messages and end.

Run-->Generate Host Procedure
This feature generates "template" source code for host procedure(s) that are run by http requests from this app. Code generation is done by a separate app that is specified by the "SourceCodeGeneratorApp" preference value. All of the generated file(s) are placed in the folder specified by the "4GLRootDir" preference.

Currently, Jargon Writer includes a SrcCodeGenP4GL.xml generator for 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 specs and parameters in http requests that were defined in the Script Editor for the currently active app.

Other generators can be written for other host language environments such as Microsoft ASP pages, Oracle PL/SQL procedures, "php" scripts, etc. by using the included generator as a model.

For more information, see Generating Source Code For Host Procedures in the Completing Your Application section.
 

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

Help-->About
Displays the version and build number of the Jargon Writer executable program (writer.exe), which is a specialized "Writer IDE" version of the standard Jargon Reader for Windows.

Help-->About Jargon Writer
Displays the current version and build number of the Jargon Writer application (writer.xml.gz) and license information.

Help-->Readme File
Displays the Readme file for the current Jargon Writer release in Notepad.

Help-->Documentation Index
Displays your local copy of the "Jargon Software Index to Online Help Documents" help page in the default Web browser on your PC.

This document has links to all online documentation for Jargon Software products.

Help-->Writing Scripts
Displays your local copy of the "Writing Scripts" help page in the default Web browser on your PC.

This reference document describes the syntax, structure, variables, data types, statements, methods, operators and other features of the scripting language.

Help-->Component Methods
Displays your local copy of the "Client Methods" help page from the Jargon Writer docs in the default Web browser on your PC.

This reference document specifies the methods that can be used in scripts for every component supported by Jargon Reader, such as textfields, buttons, tables, etc. The specs include the method name, calling parameters, options, defaults, and result types.

Help-->Component Events
Displays your local copy of the "List of Events" in the "Functions, Methods and Events" help page from the Jargon Writer docs in the default Web browser on your PC. (If your browser does not go to the anchored link, click the "List of Events" link in the top index of this page).

This reference document specifies the events that can be used with each component supported by Jargon Reader, such as ActionEvent, ListSelection, FocusLost, etc.

Help-->Jargonsoft Home Page
Displays the Jargon Software Home Page in the default Web browser on your PC.

Help-->Jargonsoft Online Docs
Displays the "Jargon Software Index to Online Help Documents" from the Jargon Software web site in the default Web browser on your PC.

This will always contain the latest updated version of the online documentation for Jargon Software products and may contain newer information than the documentation included with your current Jargon Writer release file.
 

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.


File Action Toolbar

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.

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

The third button ("Save selected app") is the same as the "File-->Save" menu choice. If a new app has not yet been saved, it will work like the "File-->Save As" menu choice

The fourth button ("Save and Reopen selected app") is the same as the "File-->Reopen" menu choice.

The fifth button ("Close selected app") is the same as the "File-->Close" menu choice.

The sixth button ("Generate Host Procedure for selected app") is the same as the "Run-->Generate Host Procedure" menu choice.

The seventh button ("Run selected app in default Reader") is the same as the "Run-->Run in ReaderPDA" or "Run-->Run in ReaderWIN" menu choices. The app is run in the default Jargon Reader engine (ReaderPDA or ReaderWIN) that is specified by the "DefaultExecutable" preferences parameter.

The eighth button ("Exit") is the same as the "File-->Exit" 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.

UserTip.gif 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.
1. Buttons Toolbar
The "Button" button selects a rectangular button that can contain an image, a text caption, or both.

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

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.

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 regular panel, card of a cardpanel or tab of a tabpanel are: menubar, panel, cardpanel, tabpanel, label, textfield, passwordfield, textarea, textpane, combobox, button, checkbox, table, tree, image and progressbar.

The "Tabpanel" button selects a single tabpanel container object. Tabpanels can only contain tabs.

The "Tab of Tabpanel" button selects a single tab container object. Tabs can only be added to tabpanels and can contain any object that a regular panel can contain. To add a Tab to a Tabpanel, highlight the Tabpanel in the component tree, then select the "Tab" button and click the "+" button above the component tree.

The "Cardpanel" button selects a single cardpanel container object. Cardpanels can only contain cards.

The "Card of Cardpanel" button selects a single card container object. Cards can only be added to cardpanels (with the "+" button) and can contain any object that a regular panel can contain. To add a Card to a Cardpanel, highlight the Cardpanel in the component tree, then select the "Card" button and click the "+" button above the component tree.

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.

The "List Item" button selects a component with a text label 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.

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

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

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

5. Misc Toolbar
The "Image" button selects an image component that can be used to display GIF or JPG images on Windows-based devices.

The "ProgressBar" button selects a progress bar component that can graphically display the completion status of some client operation.

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.

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 Text Cell or Link Cell columns to the table in Jargon Writer.

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

The "Link Cell" button selects a table column in which underlined text can be displayed, similar to a regular link.

The "Checkbox Cell" button selects a table column in which a checkbox can be displayed, similar to a regular checkbox. Scripts can use normal Get/Set cell methods (with true/false values) on these table cell checkboxes.

7. Text Toolbar
The "Label" button selects a label with a text caption.

The "Link" button selects a link with an underlined text caption.

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

The "Password field" 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 and scrollbars.

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 itself, so it does not look like a textarea or other data entry field.

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 "Tree Node" button selects a node that can be added under a Tree object or nested under another TreeNode object (to any level of nesting). To add a node, highlight (in Jargon Writer's component tree) the component that is the tree root or node that you want to be the parent node for the new node, then select this Tree Node button and click the "+" button above the component tree.

Component Tree Panel

Component Tree

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.

User Tip: The Component Tree Panel can be automatically scrolled horizontally or vertically as needed. 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.

Component Tree Toolbar

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:

  • 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 in the Component Tree Toolbar above the Component Tree Panel
Note that these components are added in this manner because they do not have an "X/Y" location in the grid layout. Rather, they are sub-elements of a parent component that does have a grid layout.

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.

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.

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

User Tip: Notice that the grid layout is cleared. This is because you are now viewing the contents of Panel1, and can begin adding components to it. In other words, your design view has moved from the top-level container (Frame1) to the first sub-container in that frame (Panel1).

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.

User Tip: Dragging an object into two or more cells does not make it larger. Doing this only allows a large component to be alongside two or more other objects in another row or column.

To make an object larger, increase its size in columns (for text objects and table columns), its pixel dimensions (for images), or increase its layout inset values (for buttons and other non-text objects).

!! 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 tab of the tabpanel 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 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 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.
Layout Panel

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 Reset button provides a quick way to reset all layout values to their defaults, except for the Grid X/Y (grid location) values. The Grid W/H values are reset to 1 (one) cell wide/high.

The Padding fields are used to add a fixed number of pixels to the width (field on left) or height (top field) of an object. The values must be integers, and the defaults are zero. This padding value is added to both the left/right sides or top/bottom sides of an object, and are within the boundary of the object (e.g. inside the border of a button, making the button appear larger).

The Anchor combobox controls the placement of an object within its cell, if it is smaller than its cell. The direction indicates the compass point on the cell boundary to which the smaller object will be attached. The default is "Northwest". Objects will be smaller than their cell if other objects in the same row or column are higher or wider, because all cells in any given row or column will be as high or wide as their largest component.

The 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. You can specify any combination of different values for the left, right, top and bottom insets, within the space allowed by the screen of the physical device on which the app will be run.

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 Weighting 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 in the same row or column within its container.

The values are decimal values with up to 2 decimal places, and the defaults are zero (no resizing). The field on the left controls horizontal weighting, while the top field controls vertical weighting.

The following diagram (Figure 1) may help to explain the various GridBag constraint parameters.

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

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 while there could be more than one Event with an associated function; only the first one in the list will be shown initially.
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.

Script Test 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.

Status Panel

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.

Preferences Window

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.

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


<-- Previous Section      Up to Top      Return to Help Index      Next Section -->