This chapter describes how to create the pages that make up your applications's user interface. This is done by implementing the application's presentation layout. Users of your application proceed from one page to another in a sequence.

• About Presentation Layout
• Adding HTML Pages
• Displaying Pages Using Different Views
• Editing Text with the Format Toolbar
• Adding Components with the Palette
• Adding Objects by Dragging and Dropping
• Creating Hyperlinks
• Creating Forms
• Adding Images
• Inserting Calls to Servlets or Enterprise JavaBeans
• Validating Data Entered on a Form
• Handling Browser Events
• Binding JavaServer Page Components to Dynamic Data
• Using GX Markup Tags

1. Choose the Add File(s) menu item from the Project menu.
2. Select All Files for the kind of file.
3. Locate the file in the NasRoot directory.
4. Click Add to add the file to your project.

• Create a new individual page, as described in Creating Files.
• Add existing pages to the project, as described in Adding Existing Files.
• Use one of the available wizards to create functionality, resulting in both pages and necessary source code. These wizards are described in detail in Using Wizards to Generate Project Files.

• Layout view shows approximately how the finished page looks at runtime, within certain limits.
• Outline view displays the page according to its HTML tag structure.
• Source view displays the HTML source code that defines your page.

<SCRIPT PURPOSE="EVENT_HANDLER"

SCRIPTID="document.Form1.TEXT3.onchange" LANGUAGE="JAVASCRIPT"> 

<!-- 

function document.Form1.TEXT3_onchange() { 

alert("user defined event" ); 

//!! begin generated code !! 

return checkInteger(this, true); 

//!! end generated code !! 

} 

//--> 

</SCRIPT>

• Select text and click on the link icon.
• Drag the Data-Bound Link component onto your JSP from the palette and edit its properties.
• Drag an HTML page from the Project window onto your page. A hypertext link is created, with the directory path to the page as the initial text.
• Drag a JSP or servlet from the Project window onto your page. You are prompted for information about the link.

• Drag the DropDownLink component onto your page from the palette, and edit its properties. This component creates a drop-down box where each item is a hyperlink; when a reader selects an item, the corresponding URL is loaded into the current window or frame.

• Create an image, select it, then click the Link icon in the toolbar.

• First, add the required image to your project (see Adding Images). Next, drag the Data-Bound Image Link component onto your page from the palette. Edit its properties, specifying your image as the Image Source.

• Drag any form component from the Form palette tab onto your page. A form is automatically generated around the component. To create a Submit button on the form, drag the PushButton component into the form.
• Drag a JSP or servlet from the Project window onto your page. You are prompted for information about the link. To create a form, choose to link to the servlet with a form.

1. Choose Add Files from the Project menu or New File from the File menu.
2. Click the Existing tab on the New File(s) dialog box.
3. Locate the image in the file system subdirectory and click Add.
4. Drag the Image or Data-Bound Image Link component from the palette to the location on your page (in Layout view) where you want the image. The component's properties appear in the properties window.

Alternatively, drag the icon representing the image from the Images folder in the Properties window onto your page. This creates an Image component with this image as the source.

5. Click the Image Source property definition in the properties window. You are prompted to choose an absolute or relative URL pointing to the source for this image. For more information, see Editing Image URLs.

• Inserting Calls to Servlets
• Inserting Calls to Enterprise JavaBeans

• Drag the icon representing the servlet file from the Project window and drop it on your HTML page or JavaServer Page (JSP).
• Select Call Existing Servlet from the Insert menu or the right-mouse menu. Choose an existing servlet or browse for one not listed.
• In any hypertext link component (DropDownLink, Data-Bound Image Link, Data-Bound Link), you can specify a servlet as the target of the link. Note that you must provide input parameters if the servlet requires them.
• In any form, you can specify a servlet as the action taken when the Submit button is pressed.

1. Select the component's Validation property.
2. Select one of the following validation types from the drop-down list:

Validation Type	Description	Example of Valid Data
(none)	No validation. This is the default.	anything
Integer	Positive or negative integer.	-4, 0, 4, 44, 444
PositiveInteger	Integer greater than or equal to zero.	0, 4, 44, 444
Number	Any real number.	-12.5, 0, 12.5, 1000000
Alphabetic	Alphabetic characters A-Z a-z, and spaces.	A man, a plan, a canal
CreditCard	Standard credit card number.	1234 5678 9012 3456
USPhone	10-digit US telephone number.	(123) 456-7890
InternationalPhone	International telephone number.	011 23 4 567 890
Email	Email address, like user@domain.	jefro@haven.com
SSN	A 9-digit social-security number.	123-45-6789
USDate	A date as mm/dd/yy or mm/dd/yyyy.	12/31/99
IntlDate	A date as dd/mm/yy or dd/mm/yyyy.	31/12/99
Year	A 2- or 4-digit integer.	99, 1999
Month	An integer between 1 and 12.	1, 2, 3
Day	An integer between 1 and 31.	1, 15, 31
StateCode	2-character US state code.	CA, NY, AK
ZIPCode	US ZIP or ZIP+4 code.	94043, 94043-1234
(Custom)	Custom validation.

3. If you choose (Custom), you must provide the JavaScript code for your custom validation in the Validation Expression property.

The expression is evaluated in the context of the field you want to check, thus, you can use unqualified properties in your JavaScript code. Often, you need to use the value property, which contains the field's value. For example, the following expression specifies validation of a field so that its values are between 10 and 20:

(value >= 10) && (value <= 20)

If you want to only accept entries that contain the string `scape,' as in Netscape, you could use the following expression:

value.indexOf("scape")!=-1

The application displays a generic warning message, which is defined in the validate.js file, if the user enters invalid data. To change this error message, edit the file and change the contents of the iCustom variable.

1. Click the Events tab in the Properties window.
2. Select the event you want to edit and click the Go To button.

The HTML page where the component resides is shown in Source view with the cursor at the appropriate place for editing the event handler.

3. Edit the event handler script.

1. Select the component you want to associate with dynamic data. If the data occurs on multiple rows (in other words, if you are populating a multiple-item component where the items come from the same field of multiple rows in a ResultSet), this component should be set in a tile. See Using the Tile Component to Display Rows of Data.
2. Select the ResultSet property in the Properties window.
3. Click the custom property editor button and select a ResultSet.

Note that some components have more than one result set property, as in the List Box component where the Options result set gathers all the options to be displayed and the optional Selection result set specifies the one to be the initial selection.

4. Click OK to return to the Properties window.
5. Choose a DataField object for the current data set by selecting a field from the drop-down box in the DataField property.

The Drop-Down List, List Box, and Radio Button Group components have more than one possible DataField. The Options ResultSet offers both a Labels DataField, from which you select the label to be displayed on the page, and an Items DataField, from which you select the value to be submitted with the form. These data correspond because they are chosen from the same row in the data set. Follow this step for each DataField property.

6. To choose a DataField for display, click the DataField property definition and select an item from the drop-down box.
7. If you want to apply a format mask to the field, adjust the format mask by selecting the Display Format property definition and clicking the custom property editor icon.

1. Drag the Table component onto your JSP.
2. Select a row in the table and click the right mouse button.
3. Choose Tile and then choose Add Row Tile from the sub-menu.

The row becomes a tile.

4. Set the tile's ResultSet (ID) property to states.
5. Drag the Label component into the new tile.
6. Set the Label's ResultSet property to states, and the DataField property to capital.

1. Open the JSP with the field you want to format.
2. Select the field you want to format.
3. From the Properties window, open the property editor dialog box for the Display Format property.
4. Select the Custom option for formatting.
5. Specify the name of the Java method that will be used to format the data field.

You must use a method that is implemented by a RowSet subclass. By default, Netscape Application Builder will generate code for a new RowSet method with the name you specified in this step. Alternatively, you can choose from a list of methods that currently exist in your servlet.

6. In the servlet that calls the JSP, find the method that you have just chosen and fill in the code to format the field appropriately.
7. Your formatting method takes in an argument that holds the original value of the data field. To format the DataField, write code to return the formatted value.

The following example shows a formatting function for the AMT field, which sets the text to red if the value is negative:

public String formatAMT (NASString field) throws java.sql.SQLException

{

	String value = getString (field.toString());

	String result = value;

	if (Float.valueOf(value).floatValue() < 0.0)

		result = "<FONT COLOR='RED'" + value + "</FONT>";

	return result;

}

%gx {TagAttributes} %

   [textBlock]

%/gx%

<gx {TagAttributes} >

   [textBlock]

</gx>

• Plain text
• HTML tags
• Nested GX markup tags

%gx type=tile id=CONTINENT%

   %gx type=cell id=CONTINENT.NAME%%/gx%<br>

%/gx%

%gx type=replace id=CONTINENT.NAME value=PlaceHolder%

   Selected Continent: <img src="images/PlaceHolder.gif">

   %/gx%

• type=TypeCode
• id=Name
• visible={True | False}
• min=MinVal
• max=MaxVal
• value=ReplaceVal

• Cell
• Tile
• Replace
• Include

Replaces the entire GX marker, from %gx% to %/gx%, with a dynamic data value. Used with the id attribute, which specifies a field in the result set that contains the dynamic value to be used. For example:

%gx type=cell id=CTY.sumsales%%/gx%

Repeats the TextBlock. The tile tag can be used in two ways: repeating a fixed number of times, or repeating for each row in a result set. When you use nested tile tags along with a hierarchical query, the result is a grouped master-detail report.

%gx type=tile min=5% . . . %/gx%

%gx type=tile id=COUNTRY max=1000% . . . %/gx%

Searches TextBlock for a string and substitutes a dynamic data value for that string. Used with the value attribute, which specifies the search string, and with the id attribute, which specifies where to find the replacement value. For example:

%gx type=replace id=CUST.name value=CustName%

   Dear CustName: %/gx%

Replaces TextBlock with HTML output created by evaluating another JavaServer Page. Used with the id attribute, which specifies the path of the template. For example:

%gx type=include 

   id="GXApp/OnlineBooks/Templates/header1.html"%

When the type attribute is tile, the id attribute specifies the name of a query. The marker's TextBlock repeats for the number of rows in the query's result set. For an example, see "Using the Tile Attribute in a GX Markup Tag."

%gx type=tile id=CTY%

When the type attribute is cell or replace, the id attribute specifies a field in the result set. The field contains the data value to be displayed. If the servlet is using a hierarchical query, the field is specified using dot notation. A query name (derived in the same way as that used with the tile tag) comes before the dot, and a column name or alias comes after the dot. For example:

%gx type=cell id=CTY.sumsales%%/gx%

%gx type=tile id=CUST%

   %gx type=cell id=CUST.custName%Customer name here

   %/gx%<br>

%/gx%

When the type attribute is include, the id attribute specifies the path of a JSP. You can use a literal path enclosed in double quotes or a field in a result set. For example:

%gx type=include 

   id="GXApp/OnlineBooks/Templates/header1.html"%

Dear %gx type=cell id=CustName%

   Customer name here   %/gx%,<br>

Thank you for buying the SmartSurf 2000 Web robot . . .

Dear M. Smith,<br>

Thank you for buying the SmartSurf 2000 Web robot . . .

%gx type=tile id=CONTINENT%

   %gx type=cell id=CONTINENT.NAME%%/gx%<br>

%/gx%

AFRICA<br>

ANTARCTICA<br>

ASIA<br>

AUSTRALIA<br>

EUROPE<br>

N_AMERICA<br>

OCEANIA<br>

S_AMERICA<br>

%gx type=tile id=DETAILS MAX=100%

   %gx type=cell id=DETAILS.COUNTYNAM%%/gx%

   %gx type=cell id=DETAILS.CUSTS%%/gx%<br>

%/gx%

San Mateo  100<br>

Santa Clara  300<br>

Sonoma  400<br>

%gx type=cell id="CTY.sumsales, format($0,000.00)"%%/gx%

Character	Meaning	Example Data	Example String	Example Result
#	Unfilled digit placeholder. Replaced by numeric digits in the data. If the data to format has fewer digits than the format string, the empty places are not filled. The output can be shorter than the format string.	679.649 700	#####.## $#,###.00	679.64 $700.00
0	Zero-filled digit placeholder. Replaced by numeric digits in the data. If the data to format has fewer digits than the format string, the empty places are filled with zeros. The output is always at least as long as the format string. When placed to right of decimal point, indicates precision. Data is rounded if necessary.	679.649 679.649 700	0000.00 00### $000.00	0679.65 00679 $700.00
,	Thousands separator. A separator character will appear between every three digits to the left of the decimal point in the output data.	1234	0,000	1,234
.	Decimal separator. A decimal point character will appear between the whole and fractional parts of the output data.	679.649 700	000.00 $#,###.00	679.65 $700.00
;	Separates a pair of formats. The first format is used for positive numbers, the second for negative numbers.	23 -66	##;(##) ##;(##)	23 (66)
Literals such as $ + - ( ) and space characters	Any character in the format string that is not a special character will appear in the output data exactly as typed. If using parentheses, always use matched pairs.	5552365 69100 123	###-#### $0,000 0 0 0	555-2365 $69,100 1 2 3

Character	Meaning	Example Data	Example String	Example Result
D	Day of the month, with no leading zero.	1/1/2020	M-D-YY	1-1-20
DD	Day of the month, with leading zero.	1/1/2020	MM-DD-YY	01-01-20
DDD	Day of the week, abbreviated.	7/4/1996	DDD	Thu
DDDD	Full day of the week.	7/4/1996	DDDD	Thursday
M	Number of the month, with no leading zero.	1/1/2020	M-D-YY	1-1-20
MM	Number of the month, with leading zero.	1/1/2020	MM-DD-YY	01-01-20
MMM	Name of the month, abbreviated.	1/1/2020	MMM	Jan
MMMM	Full name of the month.	1/1/2020	MMMM	January
Y	Number of the day in the year (1-366).	1/1/2020	Y	1
YY	Last 2 digits of the year.	1/1/2020	M-D-YY	1-1-20
YYY or YYYY	All 4 digits of the year.	1/1/2020	M-D-YYYY	1-1-2020
h	Hour from 1-12, with no leading zero.	8:05 pm	h:mm	8:05
hh	Hour from 1-12, with leading zero.	8:05 pm	hh:mm	08:05
H	Hour from 1-24, with no leading zero.	8:05 pm	H:mm	20:05
HH	Hour from 1-24, with leading zero.	3:00 am	HH:mm	03:00
m	Minute, with no leading zero.	3:09 am	h:m	3:9
mm	Minute, with leading zero.	3:09 am	h:mm	3:09
s	Seconds, with no leading zero.	3:09 am	h:m:s	3:9:0
ss	Seconds, with leading zero.	5:07:02 am	hh:mm:ss	05:07:02
AM/PM	Adds letters AM or PM after the date/time data to indicate morning or afternoon/evening hours.	5:07:02 am	h:mm AM/PM	5:07 AM
Literals such as / - : and space characters	Any character in the format string that is not a special character will appear in the output data exactly as typed.	1/1/2020 8:05 am	m-d-yy h:m:s	1-1-20 8:5:0

• Repeating for Each Row in a Result Set
• Repeating a Specified Number of Times

%gx type=tile id=CONTINENT%

   - %gx type=cell id=CONTINENT.NAME%%/gx%<br>

   %gx type=tile id=COUNTRY%

      --- %gx type=cell id=COUNTRY.NAME%%/gx%<br>

   %/gx%

%/gx%

- ASIA<br>

--- China<br>

--- Japan<br>

- EUROPE<br>

--- France<br>

--- Germany<br>

- N_AMERICA<br>

--- Canada<br>

--- Mexico<br>

%gx type=tile min=5%

   <IMG SRC="/GXApp/MyApp/Images/smiley.gif" ><br>

%/gx%

<IMG SRC="/GXApp/MyApp/Images/smiley.gif" ><br>

<IMG SRC="/GXApp/MyApp/Images/smiley.gif" ><br>

<IMG SRC="/GXApp/MyApp/Images/smiley.gif" ><br>

<IMG SRC="/GXApp/MyApp/Images/smiley.gif" ><br>

<IMG SRC="/GXApp/MyApp/Images/smiley.gif" ><br>

%gx type=replace id=CONTINENT.NAME value=PlaceHolder%

   <img src="images/PlaceHolder.gif">

%/gx%

%gx type=tile id=CONTINENT%

   %gx type=replace id=CONTINENT.NAME value=PlaceHolder%

   <img src="images/PlaceHolder.gif">

   %/gx%

%/gx%

<img src="images/ASIA.gif">

<img src="images/EUROPE.gif">

<img src="images/N_AMERICA.gif">

%gx type=include 

   id="/GXApp/OnlineBooks/Templates/header1.html"%

   Text block to be replaced by output from header1.html

%/gx%

%gx type=include id=CUSTOMER.Preferred_Header%

   Text block to be replaced by output from a template

%/gx%

%gx type=trigger name=Clock arg1=hello%Default text%/gx%

userDefinedType:attr1="val1";attr2="val2"

trigger:name="Clock";arg1="hello"