Web Development


Chapter 3 . Setting Properties for Web Applications

This chapter discusses screen and widget properties and behavior that are specific to Web applications. In most respects, screens and widgets have the same properties and behavior in Web applications as on other platforms. You use the same tools—screen editor, screen wizard, debugger—to create and test Web screens. For information about these tools and common properties, refer to the Using the Editors.


Screen Properties

Table 3-1 lists screen properties by category and describes their relevance in Web applications.

Table 3-1 Screen properties and Web applications

Property Category Behavior Ignored properties

Identity

Same

Dialog
3D
Mnemonic Position

Geometry

n/a

All

Positioning

Same

Color

Same

Font

Same if browser supports font specification. See "Font Properties."

Focus

Same

Menu Name
Menu Script File

Help

If the browser is enabled for JavaScript, the Status Line Text entry displays in the browser's status message area

Starting in Panther 5.50, if @app()->web_use_tooltips is set to PV_YES and @app()-> web_alt_as_tooltips is set to PV_NO, the Tooltip Text property is used for images.

All other help options

Display

Same

Style
Border*
Icon
Pointer
Title Bar*
System Menu*

Transaction

Same

Fetch Directions

Web Options

Refer to Table 3-2

* Set to No in order to maximize usage of browser window space.

Web Options Properties

Table 3-2 lists the Web Options properties for screens that have property settings that are relevant only to Web applications:

Table 3-2 Web Options properties for Web application screens

Web Options property Purpose More information

Secure POST

If set to Yes, enable secure transfer of sensitive data.

"Transmitting Screens Securely"

Display Window

Set the window or frame used to display the screen.

"Setting the Window for a Screen"

Target Default

Set the window or frame to use as the default target for hyperlinks that are contained by the screen.

"Setting the Window for a Specific Hyperlink"

Stylesheet Source

Set the type and location of the stylesheet for the screen.

"Using Style Sheets"

Browser Options

Each of these properties specifies the JavaScript or VBScript function to execute when the corresponding event occurs.

Chapter 9, "Using JavaScript and VBScript"

HTML Options

The properties under Custom HTML let you add elements or attributes to the HTML that Panther generates for the screen.

"Screen Custom HTML Properties"


Widget Types

Table 3-3 lists Panther widget types whose presentation or behavior is different in Web applications:

Table 3-3 Widget-type conversions and behavior in a Web application

Widget type Description

Push Button

Executes an action or procedure and submits the screen back to the HTTP server.

Combo Box

Converted to text widgets.

Toggle Button

If part of a multiple selection group, converted to a check box group. Single toggle buttons are converted to radio buttons.

Scales

Converted to text widgets.

List Box

Selection list boxes in grid widgets are automatically converted to columns of radio buttons or check boxes.

Action list boxes in a grid widget submit the screen back to the server. They may appear as either hyperlinks or push buttons.

Tab Cards

Tab Decks

Vertical Lines

Not supported in browser.


Widget Properties

Widgets have several properties that are relevant only to Web applications. A number of other properties are implemented differently in Web applications or are ignored altogether. Three widget types–push buttons, selection groups, and grid widgets–are discussed individually; widget positioning in an HTML document is also discussed separately.

Web Options Properties

Table 3-4 lists Web Options properties that can be set for widgets used in Web applications.

Table 3-4 Web Options properties for Web application widgets

Web Options property Purpose

Auto Expand

If set to Yes, specify that the grid size is sized dynamically to match the number of returned rows.

Custom HTML properties

The properties under Custom HTML let you add elements or attributes to the HTML tag that Panther generates for the widget.

Export to HTML

Generate an HTML tag for the widget even if the widget is hidden at runtime to enable scripting access in a Web browser.

Image Map

Divide the image on a dynamic label into a separate sections, each with its own hyperlink.

Ins/Del Buttons

If set to Yes, Insert and Delete buttons appear at the bottom of the grid widget if one of the grid members is unprotected.

JavaScript

Write JavaScript functions that can be specified for any of the widget's Browser Event properties.

VBScript

Write VBScript functions that can be specified for any of the widget's Browser Event properties.

Browser Options

Each of these properties specifies the JavaScript or VBScript to execute when the corresponding event occurs.

Keep Image Size

If set to Yes, the GUI dimensions of the widget's image is used when it is positioned in the generated HTML.

Default Link

Designate a dynamic label or graph widget to act as a hyperlink by specifying the desired URL.

Item Link

In an array, designate a separate hyperlink for each occurrence.

Submit

If set to No, clicking on the push button will run the JavaScript or Java attached to the button and not submit the document back to the server.

Scroll Buttons

If set to Yes, scroll buttons appear to the left of the grid if the number of rows is greater than the size of the grid widget.

Target

Set the browser window or frame to use in order to display the resource that is invoked by a widget's hyperlink.

Property Usage in Web Applications

Table 3-5 shows which properties are implemented differently in a Web application.

Table 3-5 Properties and their behavior in Web applications

Property Widget type Behavior
Identity properties

Default/Cancel

Push button

Ignored.

Hidden

Any

If a widget's Hidden property is set to Yes or Al ways, no HTML tag is generated for the widget and it is stored in the cache file. If set to Always, no space is reserved for unhiding the widget at runtime.

To generate an HTML tag for hidden widgets, set its Export to HTML property to Yes.

Label

Dynamic/static label

Displayed in the browser's default font and point size.

Mnemonic Position

Push button

Ignored.

Name

Any

Use the widget name in JPL procedures and C functions. For JavaScript, use the HTML tag.

Geometry properties

Length

Dynamic/static label, push button

Ignored; the browser uses the label's length to determine the widget's size.

Max Data Length

Multiline text

Ignored.

Scrolling

Multiline text

Ignored.

Size to Contents

Dynamic/static label, push button

Ignored; the browser uses the label length to determine the widget's size.

Positioning properties

Any

Same

Color properties

Any

Depends on browser.

Font properties

Any

Same, if browser supports font specification.

Focus properties

Focus Protection

Single line, multiline text

If set to Yes, widget's contents are displayed in bold text.

Option menu, list box

Ignored.

Next/Prev Tab Stop

Any

Ignored.

Help properties

Any

Except for Status Line Text, help options are ignored.

Status Line Text

Any

If JavaScript is enabled, status line text for a widget displays in the browser's status message area.

Input properties

Single line, multiline text

If JavaScript is enabled, Panther automatically generates JavaScript functions when many input properties are set.

Edit Mask

Single line text

Only with JavaScript; otherwise, ignored even when the widget cannot receive focus.

Input Protection

Single line, multiline text

If set to Yes, widget's contents are displayed in bold text.

Validation properties

Calculation

Any

Ignored.

Double Click

Any

Ignored.

Format/Display properties

Active Pixmap

Push button

If a pixmap is set, onClick JavaScript event is not activated on the Web browser.

Border

Multiline text

Customer Drawn

Push button

Ignored.

Justification

Any

Ignored.

Password Field

Single line text

If set to Yes, text entered in the HTML form is displayed as asterisks (*). The JavaScript function that converts case cannot be specified for pass word fields.

Password Char

Single line text

Ignored.

Word Wrap

Multi line text

Word wrapping varies in each browser. All browsers honor hard returns and newline characters. Browser programs that support the WRAP attribute insert soft returns in the text string.

Push Buttons

Push buttons are used in Web applications to submit the form back to the server and perform the processing associated with that button. Inactive push buttons use the Inactive Pixmap property setting; if it is not set, the push button is drawn as display text with a border.

The size of a push button is controlled by the browser, which typically uses the label length; the push button's Length and Size to Contents properties are ignored.

JavaScript or VBScript can be specified for push buttons using the onClick event; however, do not specify pixmaps in this case. In the HTML specifications, the pixmap specification takes precedence, and the JavaScript or VBScript function for the push button is not activated.

Using push buttons to perform processing in the browser

To perform the processing attached to a push button without submitting the form back to the server, set the Submit property on the push button to No. One use for this property is when Java or JavaScript is specified for a push button. If the Submit property is No, activating the push button runs the Java/JavaScript on the Web browser without additional interaction with the HTTP server.

Warning: Do not use push buttons in Web applications to execute shell commands whose output is displayed back to the user. If you execute a shell command, redirect the output to a file, then display that file to the user.

Selection Groups

You can use either radio button or check box widgets in a Web application to record the user's selection. If an application contains toggle buttons that are part of a multiple selection group, Panther converts them to a check boxes. Single-selection toggle buttons are converted to radio buttons.

If a selection group's member has its Active property set to No, the widget is removed; however, its text remains displayed.

Grid Widgets

Three types of widgets can be included in grid widgets—dynamic labels, single line text, and list boxes. A Web application displays these widget types as follows:

Dynamically Resizing Grids

By default, the grid widget is created with a fixed size that is calculated from its Onscreen Rows property. If the number of rows in a grid is greater than this property, Panther inserts a column of scrolling push buttons to enable access to the unseen data (refer to "Scrolling Grids."). You can specify that a grid's size be set dynamically by setting its Auto Expand property (under Web Options) to Yes. When data returns, the size of the grid matches the number of returned rows. The screen size limit of 255 lines is not enforced with expandable grids.

When an expandable grid widget's size changes, all other widgets on a screen maintain their position relative to its borders. For example, when the grid expands, the widgets below it shift down. If widgets are aligned to the bottom of the grid, their positions remain unchanged, and they stay aligned to the bottom of the grid.

For sample usage, refer to the Panther Web gallery example Expandable Grids.

Selecting and Modifying Grid Data

If one or more grid members is unprotected, Panther, by default, modifies the grid in two ways:

If all grid members are protected, you can allow users to select a row by setting the grid widget's Stripe Current Row property to Yes. A grid thus set contains a column of radio buttons that enable user selection.

When the screen is submitted back to the server, Panther sets the grid_current_occ property to the selected row and performs all grid row entry and exit functions.

Figure 3-2 When the Radio Buttons property is set to Yes, radio buttons appear in the left column of the grid if one of the grid members is unprotected or if the grid's Stripe Current Row property is set to Yes.

If the Ins/Del Buttons property is set to No, the buttons to insert and delete rows are not generated. If the Radio Buttons property is set to No, the radio buttons indicating the current selection are not generated, even though the current selection is still tracked.

When screens are submitted at runtime, Panther variables contain information about the grid push button that was pressed and the grid's object ID and occurrence number. For more information, refer to "Web Entry Context Flags."

The grid push buttons derive their GIF images from a Panther library:

Push button GIF file

Insert Above

gridsi.gif

Insert Below

gridsa.gif

Delete Row

gridsd.gif

Scrolling Grids

If a grid widget's size is fixed and it contains more rows than its onscreen size allows, a column of push buttons are inserted in the leftmost position of the grid widget to enable scrolling:

Figure 3-3 A grid with unseen rows contains push buttons for scrolling all data into view.

This default behavior can be changed by setting the Scroll Buttons property on the grid widget to No.

When screens are submitted at runtime, Panther variables contain information about the grid push button that was pressed and the grid's object ID and occurrence number. For more information, refer to "Web Entry Context Flags."

The grid push buttons derive their GIF images from a Panther library:

Push button GIF file

Bottom

gridbb.gif

Screen Down

griddn.gif

Screen Up

gridup.gif

Top

gridtt.gif

The Panther Gallery contains sample screens entitled Action & Selection in Grids and Scrolling Grids, and is accessible from the Web application server:

http://server-name/cgi-bin/jwsamp/main

Widget Positioning

To maintain widget positions within an HTML document and maximize usage of window space, the following position-specific properties and design options are provided.

Overlapping Widgets

HTML does not support overlapping widgets. In order to quickly detect overlap ping widgets, radio buttons, check boxes and labels have borders to indicate whether they overlap another widget. These borders do not appear at runtime. Additionally, to check for overlapping widgets while editing a screen, choose EditFindOverlapping Widgets. To check for overlapping widgets when a screen in saved, choose OptionsCheck Overlap on Screen Save.

Horizontal and Vertical Anchors

Each widget has two anchor properties–Horizontal Anchor and Vertical Anchor—to help align widgets. These properties can be set manually in the Properties window, but they are also set automatically when the screen editor's alignment feature is used. Thus, if you left-align a group of widgets, you are automatically setting their horizontal anchor properties to be left. Panther uses these anchor properties to determine how widgets are aligned with other widgets on the screen.

Each widget has one vertical and one horizontal anchor property, so you can control alignment once in each direction. If you align a widget one direction and then realign it the other way, only the latter setting of the anchor property is in effect. So, you can align a large widget like a pixmap or a grid widget relative to a widget on the left or on the right, but not both.

For example, a screen has a pixmap with several widgets to one side of it. The pixmap's Vertical Anchor property is set to middle.

Panther uses that middle point to determine where the pixmap lies relative to the widgets to the side of it. With this setting, you cannot directly control whether the topmost widget is above or below the upper border of the pixmap. To ensure that the topmost widget lies below the upper border of the pixmap, specify the pixmap's Vertical Anchor to be top and make sure that the topmost widget's vertical anchor is below the upper border of the pixmap.

Snap to Grid

In the screen editor, select OptionsSnap to Grid. With this option enabled, a new widget is automatically positioned at the nearest grid point. This makes it easier to visually align widgets.

Spacing of Widgets

If you want a group of widgets to be spaced close together, select all these widgets; then use EditSpaceCustom to distance them at 0, either horizontally or vertically.

Positioning Regions

If you find that widgets are being pushed out further than expected in the generated HTML, place repeated design elements together in a positioning region. Widgets inside a positioning region keep the same relative distance to each other when the HTML is generated. A positioning region is defined through a box widget (refer to "Using Boxes as Positioning Regions" in Using the Editors); a screen can have multiple positioning regions.

Maximum Usage of Space

Three screen properties that are otherwise ignored can affect how closely widgets can be positioned next to the browser window's borders: Border, Title Bar, and System Menu. Set all three properties to No in order to allow widgets to abut on the browser window's borders without any intermediate space.

Fonts

One browser may create its widgets using different font families and sizes than another browser, or than the Panther screen editor. This results in screens that can appear slightly different (more or less space between widgets) from browser to browser, or from browser to screen editor. Specifying font sizes in the Panther screen editor results in better positioning than using header tags, such as H1.


Font Properties

If the Font Name or Point Size property for a screen or widget is set to a value other than Default, the generated HTML specifies fonts and sizes in this format: <div style="font-size:relative-fontsize;font-family:font-family-names">

Font Name

If a screen has its Font Name property set, a style tag that specifies this setting is generated for each widget whose Font Name property is set to Default. If a widget has its own Font Name property setting, the HTML contains a style tag that specifies the widget's font.

If font-name is supported by the browser, this setting overrides the browser's proportional and fixed font settings.

The font name must map to a font that the browser supports in order to have effect. For maximum flexibility, set the Font Name property to a font alias whose definition in the Web configuration map file webcmap specifies one or more fonts. For example, this entry maps Prolifics Helvetica to three comma-delimited sans serif fonts:

Prolifics Helvetica=Helvetica,Arial,Geneva

When HTML is generated, all Font Property settings that specify Prolifics Helvetica are mapped to Helvetica,Arial,Geneva in a style tag. Then the HTML is rendered, the browser will use the first font in the list that it supports.

When HTML is being generated by prorun or prodev, if the Configuration Map file has .the [HTML Fonts] section, the font aliases specified are used instead of those in the [Display Fonts] section.

Font Size

If a screen has its Point Size property set, a style tag that specifies this setting is generated for each widget whose Point Size property is set to Default. If a widget has its own Point Size property setting, the HTML contains a tag that specifies the widget's relative size.

Point Size property settings for screens and widgets are converted into equivalent HTML font sizes, as shown in Table 3-6:

Table 3-6 HTML Font Sizes

Point size Relative font size

6, 7, 8, 9

60%

10, 11, 12

80%

13, 14

100%

15, 16, 17

120%

18, 19, 20

150%

21, 22, 23

200%

24, 26, 28, 36, 48, 72

300%


Application Properties

Web applications also have access to the following runtime properties:

in_web
Determine whether the application is running as a Web application, so that appropriate actions can be taken. It is possible to create screens and write code that is common to two-tier, three-tier, and Web applications; this property determines the current environment.

Values: PV_YES/, PV_NO

Constraints: Read-only.

The following section of a JPL procedure would hide the push buttons needed for Web processing in other types of applications:

if ( @app()->in_web=PV_NO ) 
{
pb_details->hidden=PV_YES
pb_back->hidden=PV_YES
}

The Panther Web Gallery contains a documentation sample entitled Web and GUI Application which uses in_web. The Panther Web Gallery is accessible from the Web Application Server at:

http://server-name/cgi-bin/jwsamp/main

previous_form
The current screen as specified in the cache file. (Refer to "Caching Data.")

webid
Determine the name of the next cache file to be generated by the web application server. (Refer to "Caching Data.")