In this lesson you create a 4GL JSP and add a Web service to it. You use the same Web service that you used for the simple.jsp page.
Click File>New from the PowerBuilder menu and click the Web tab.
Make sure jspTutorial is selected in the Target drop-down list.
Select the 4GL JSP Page icon, click OK, then click Next.
The 4GL JSP Page wizard opens to the Specify New JSP File page.
Type fourgl in
the Title text box and click Next until the Choose EAServer Profile
page displays.
The name in the File Name field changes to fourgl.jsp the first time you click Next. You accept the default values for the other pages on which you click Next.
Select the Skip EAServer Components check box on the Choose EAServer Profile page of the wizard and click Next.
Click Finish.
The wizard creates the fourgl.jsp page in the jspTutorial target. The page opens in the HTML editor. It is also listed in the System Tree along with the other pages you created for the target.
Highlight the default text on the fourgl.jsp page: Put your data here.
Type Currency Converter for
the new text.
With the cursor in the same line as the text you typed, select Format>Paragraph in the PowerBuilder menu.
The Paragraph dialog box displays.
Select Heading 1 from the Paragraph Style drop-down list, select Center for the Align Text field, and click OK.
The text you typed is formatted to the Heading 1 font style.
Place the cursor at the end of the text and press Enter.
Type (4GL Version) and
press Enter.
Click the Save button on the HTML editor toolbar.
Click the Components tab of the System Tree.
Expand the list of custom tag libraries to display the CurrencyExchangeService.tld file.
The Currency Exchange Service library was added to the list of custom tag libraries by the JSP Web Service Proxy wizard. This is the same library that you added in a taglib directive to the simple.jsp page.
Drag the CurrencyExchangeService.tld file to the fourgl.jsp page in the HTML editor.
A dialog box prompts you to enter a prefix as a shorthand to refer to the TLD file.
Type cur for
the prefix and click OK.
PowerBuilder adds a taglib directive to the page.
Right-click the fourgl.jsp page in Page view.
Select Page Properties from the pop-up menu and click the Variables tab.
Add a variable with the following properties and click OK:
Column |
Type or select |
|---|---|
Variable Name |
v_units |
Data Type |
double |
Initial Value |
100. |
Life Time |
page |
Client Access |
NONE |
Click the Save button on the HTML editor toolbar.
In Page view, place the cursor on the fourgl.jsp page below the lines containing the text that you typed.
Select Table>Table Wizard from the PowerBuilder menu.
Type 2 for
the number of rows in the table and click Next.
Type 3 for the
number of columns in the table, click Finish, then OK.
PowerBuilder adds a table to the fourgl.jsp page. The word Cell appears in each table cell by default.
Highlight the default text in the top left cell of the table.
Type the following text in the cell: Currency
From:
Highlight the default text in the bottom left cell of the table.
Type the following text in the cell: Currency
To:
Highlight the default text in the top middle cell in the table.
Select Insert>Form Field>List Box from the PowerBuilder menu.
The List Box Properties dialog box displays.
Type country_from in
the Name To Send To Server text box.
Click the Options tab of the List Box Properties dialog box.
Type the following display text and values in the Options list:
Text |
Value |
|---|---|
China |
china |
France |
euro |
Great Britain |
united kingdom |
Singapore |
singapore |
United States |
usa |
Select the check box in the Selected column next to the entry you made for the United States, and click OK.
The list box displays in the top middle cell of the table. The only value you see in Page view is for the United States. If you view the page in Preview view, you can see all the countries that you entered in the drop-down list. However, you must return to Page view to continue editing.
Highlight the default text in the bottom middle cell in the table.
Select Insert>Form Field>List Box from the PowerBuilder menu.
Type country_to in
the Name To Send To Server text box.
Click the Options tab of the List Box Properties dialog box.
Type the same display text and values that you typed in step 7.
Select the check box in the Selected column next to the entry you made for France, and click OK.
The list box displays in the bottom middle cell of the table. The only value you see in Page view is for France.
Highlight the default text in the top right cell of the table.
Select Insert>Form Field>Single Line Text from the PowerBuilder menu.
Type units in
the Name box of the Text Control INPUT1 Properties dialog box.
Click the Bind tab in the Text Control Properties dialog box.
Select <Page Variable> for the component name, v_units for the property name, and click OK.
The fourgl.jsp page should now look like this:
Highlight the default text in the bottom right table cell and press Delete.
You clear the default text. Next you will enter a call to the getRate Web service and return a calculated value into this table cell.
On the Components tab of the System Tree, expand the listing for the CurrencyExchangeService.tld file.
Drag the getRate class to the bottom right cell of the table on the fourgl.jsp page.
The cur:getRate Properties dialog box displays.
In the Values column, type the following values for the listed attributes and click OK:
Attribute Name |
Value |
|---|---|
country1 |
<%= psPage.country_from.value %> |
country2 |
<%= psPage.country_to.value %> |
In Page view, the bottom right table cell displays the symbol: <ctl:/> to indicate
that a custom JSP action has been added. In Source view, the code inside
the last table cell looks like the following:
<cur:getRate country1="<%=psPage.country_from.value %>" country2="<%= psPage.country_to.value %>" />
Right-click inside the Script view and select New Script>Server>"<%= ... %>" from the pop-up menu.
The Script view displays ServerScript[0] in the first drop-down list box.
Expand the listing for the getRate class under the CurrencyExchangeService.tld listing on the Components tab.
Drag the CurrencyExchangeService_getRate_returnValue variable to the Script view for ServerScript[0].
CurrencyExchangeService_getRate_returnValue displays in the Script view.
Type .floatValue()* v_units immediately
after the text you dragged to the Script view.
Using dot notation, the server script now calls the floatValue method to cast the return value before multiplying it by the value of the v_units page variable to obtain a final result. The full script looks like this:
CurrencyExchangeService_getRate_returnValue.floatValue()* v_units
Make sure the server script symbol "<%=>" displays in the bottom right table cell after the "<ctl:/>" symbol.
In Page view, you can drag and drop the server script <%=>
symbol to the location where you want to place it. It must be placed
after the call to the custom tag library that is represented in
Page view by the <ctl:/> symbol.
Place the cursor to the right of the table and press Enter.
With the cursor in the new line, select Insert>Form Field>Push Button.
The Button Properties dialog box displays.
Type Get Conversion Result in
the Label text box and click OK.
(Optional) In Source view, add the following text after the code for the Submit button but before the closing Body tag:
<HR id="HR1"> <P>Currency Converter Web Service is from <A href="http://www.xmethods.net">www.xmethods.net</A> </P> <P>wsdl: <A id="WSDLURL" href= "http://www.xmethods.net/sd/2001/CurrencyExchangeService.wsdl"> http://www.xmethods.net/sd/2001/CurrencyExchangeService.wsdl</A> </P>
You credit the owners of the Web service for the use of their service.
Save the changes you made to the fourgl.jsp page.
Now you deploy and run the JSP application.
Make sure that EAServer is running.
On the Workspace tab of the System Tree, right-click the jspTutorial target and select Deploy from the pop-up menu.
Deployment is done when the Output window displays Finished
Deploy of target jspTutorial.
Right-click the jspTutorial target.
Select Properties from the pop-up menu.
Click the Run tab of the target properties dialog box.
Click the browse button next to the Start Page text box.
The Choose URL dialog box displays.
Select fourgl.jsp in the list box showing the contents of the jspTutorial target and click OK.
The target properties dialog box now displays /fourgl.jsp for
the target start page.
Click OK again.
Right-click the jspTutorial target in the System Tree.
Select Run from the pop-up menu.
Your default browser opens. The URL address box contains the file path for your fourgl.jsp Web page.
The conversion rate is calculated and displayed for the default values you selected:
Parameter or variable |
Default value |
|---|---|
country1 |
United States |
country2 |
France |
v_units |
100 |
In your browser, select a different country from the Currency From or Currency To drop-down lists.
Click the Get Conversion Result button.
The new result displays in the bottom right cell of the table on the fourgl.jsp Web page.
Type a different unit number in the top right cell of the table on the fourgl.jsp Web page and click the Get Conversion Result button.
The calculation of the conversion value takes into account the units you entered.
