CODE Designer is an optional install with WebSphere® Development Studio Client for iSeries® up to Version 7.0 of this product. IBM® WebFacing Tool Version 7.1 and beyond includes Web Setting options that don't exist in CODE Designer. We strongly recommend that you use the Web Setting view of IBM WebFacing Tool for Web Setting customizations.
We recommend that you use the Web Settings with your DDS source to customize your application. You can use the Web Settings tab in CODE Designer to customize how your programs will look and function when accessed through a Web browser. Programs that use DDS source to describe 5250 display screens can be accessed with a Web browser after the DDS source has been converted with the WebFacing Tool. Use Web Settings when you want to manipulate the Web presentation of individual screens and individual fields within screens. If you want to change the Web presentation of multiple screens or of an entire WebFacing project, use Style properties. Installation of CODE Designer is optional.
You can access CODE Designer from the Windows® Start menu of WebSphere Development Studio Client for iSeries or from within IBM WebFacing Tool. To Load DDS source in CODE Designer from within IBM WebFacing Tool:
After a DDS source member has been loaded into CODE Designer, Web Settings can be accessed by clicking the icons in CODE Designer's DDS Tree. The DDS Tree is located on the left-hand side of the CODE Designer window. Web Settings are also accessible by selecting DDS objects from within CODE Designer's Details and SCREEN tabs. If Web Settings are available for the selected object, the Web Settings tab will be displayed in the bottom pane of CODE Designer.
CODE Designer allows you to design DDS screens graphically. In CODE Designer, each DDS object is represented by an icon or push button. For example, there are push buttons so that you can easily create named fields or text constants for your DDS screen. The Web Settings available for each DDS object vary depending on the object that you are working with. The table below lists the Web Settings available for each DDS object. Refer to the section of this document Web Setting descriptions for more details on each setting. When you use Web Settings for an object, special comments are added to your DDS source which later get processed by the WebFacing conversion. Web Setting comments begin with the characters *%%WB.
DDS object | CODE Designer graphic | Available Web Settings |
---|---|---|
Standard Record | ![]() |
|
Subfile Control Record | ![]() |
|
Date Field | ![]() |
|
Time Field | ![]() |
|
Timestamp Field | ![]() |
|
Message Constant | ![]() |
|
Date Constant | ![]() |
|
Time Constant | ![]() |
|
User Constant | ![]() |
|
System Constant | ![]() |
|
Named Field (Input capable) | ![]() |
|
Continued Field (Input capable) | ![]() |
|
Source Reference Field (Input capable) | ![]() |
|
Database Reference Field (Input capable) | ![]() |
|
Database Reference Field by Selection (Input Capable) | ![]() |
|
Named Field (Output) | ![]() |
|
Continued Field (Output) | ![]() |
|
Source Reference Field (Output) | ![]() |
|
Database Reference Field (Output) | ![]() |
|
Database Reference Field by Selection (Output) | ![]() |
|
Text Constant | ![]() |
|
Date Field (Hidden) | ![]() |
|
Time Field (Hidden) | ![]() |
|
Named Field (Hidden) | ![]() |
|
Continued Field (Hidden) | ![]() |
|
Source Reference Field (Hidden) | ![]() |
|
Database Reference Field (Hidden) | ![]() |
|
Database Reference Field by Selection (Hidden) | ![]() |
For function or command keys in your DDS source, you can specify the text labels to be used in your Web pages to represent the keys. To change a label, select a label from the Labels already defined list, enter the text you would prefer for the key in the New Label field, click Change. To remove a label that you have defined, select the label from the Override labels in web setting list, click Remove.
For function or command keys in your DDS source, you can specify whether keys will be visible on your Web pages and the order in which the keys will be displayed. To work with this setting, select the Change order and visibility of command keys checkbox. To make a key visible, select the key from the Hidden list and click the arrow button to move it to the Display order list. To hide a key, select the key from the Display order list and click the arrow to move it to the Hidden list. If more than one key is available in the Display order list, the order in which it is displayed can be changed by selecting the key and clicking the Up or Down buttons. If the Change order and visibility of command keys checkbox is not selected, defined keys will be shown in numeric order.
The Display size setting is available if a secondary display size has
been selected for your display file. Secondary display sizes can be set through
the properties dialog of the file node icon in the DDS Tree. Use the Display size Web Setting to change the size
of the HTML table that will be used to display your application in a browser.
Options available for the Visibility setting are Hide Field or Show Field. If Show Field is chosen, the field will be displayed on your Web pages.
Options available for the Location setting are Change span and Change position. After your DDS source has been converted with the WebFacing Tool, your application is positioned on a Web page using an HTML table. The HTML table has the same number of rows and columns as your DDS screen -- that is, 24 by 80 or 27 by 132. With Location settings, you can change how your fields will be positioned on the HTML table after your source is converted.
CODE Designer's screen view shows the row and column layout for your DDS source. Use this view to get an idea of how your fields will be positioned relative to each other if you make changes with Change span and Change position.
With the Program defined HTML setting, check the box Use field value as HTML if the value returned by the field is HTML markup that you would like to use in your page.
User defined HTML allows you to specify HTML text or tags that can be displayed with or in place of the value for your field. To work with this setting, select the Specify HTML checkbox. In the entry area, enter the HTML tags you would like to use. If you want to use the value for your field as part of the HTML, click the button Insert field value. One example of how you could use this setting would be if you wanted the value for your field to be displayed with a bold font. To do this, use the <BOLD> tag with the &{FIELD.value} text.With this example, edit the entry area so that it displays <BOLD>&{FIELD.value}</BOLD>. If the code for &{FIELD.value} is not there by default, it can be added by clicking the Insert field value button.
Options available for the Appearance and Text setting are Change style class, Override field value, Override constant text, and Hide characters:
The Insert HTML setting provides a way to customize your fields by adding additional HTML. HTML can optionally be added Before, Inside, and After the HTML tag that is automatically generated for the field. As an example, you might have an input field for employee numbers and at your company all employee numbers are prefixed with 64-. You could make the field easier to use by adding some HTML such as:
In this example, the HTML Before the field provides some information about the field and uses the <strong> tag so that the information is emphasized with a bold font. Since the HTML generated by conversion uses the <input> tag for input fields, Inside the <input> tag we could add the HTML attribute value="64-" so that the field will be pre-populated with the employee number prefix and your users will not be required to enter it. After the field is the HTML for a link that users can click to get more information about the field.
Ensure that you thoroughly test pages that you are altering with the Insert HTML setting. Changes that you make can conflict with the HTML that is generated by the WebFacing conversion. One way to work around this would be to convert your program without using Web Settings, look at the .html or .jsp source that is generated to see what changes can safely be made with Web settings, apply Web settings and then re-convert.
The Options for VALUES setting is available for input fields that are specified with the VALUES keyword. Fields that are specified with the VALUES keyword are displayed on Web pages as a single choice selection box. The options displayed in the selection box are the values given as parameters to the VALUES keyword in your DDS source.
The Options for VALUES Web Setting allows you to change the label or text that is displayed to the user. For example, if one of the VALUES parameters that your program is expecting is "item8", you might change the text that is displayed in a browser to something more descriptive such as "8 gauge wire". While the text displayed to the user would be "8 gauge wire" the value returned to your program would be the same "item8" that the program would expect.
To use this Web Setting, select the Option texts for VALUES keyword checkbox. To set a new label for a VALUES parameter, select the value, enter the text that you want for the label in the New Label field.
Use the Create graphic setting if you want to display an image in place of your field. An example use for this setting would be a product database that includes images of inventoried items.
Populate the File name field with the complete path to an image file on your workstation or with the complete URL to an image file (e.g. http://www.ibm.com/image.gif). The File name field can be populated by entering a value directly or by using the Browse button to locate a local file. Local images that you specify will be copied to the ..\Web Content\images\generated\ directory of your WebFacing project during the WebFacing conversion. The images in this directory are later published to the server when you deploy your project with the Export wizard.
Width in pixels and Height in pixels can be used if you know the dimensions of an image. Adding width and height information can sometimes decrease the time required to render Web pages that contain images.
If there are fields in your program that return values that can be used as part of the image file name, or the full URL to an image file, these values can be added to the File name field by selecting the field from the Choose a field list and clicking Insert field value. For example, if you had &{FIELD1.value} that returned the value bicycle1, you could easily refer to a graphic bicycle1.gif that you may be working with on your workstation. In this example, populate the File name field from the Choose a field list and then add the .gif extension. Files that you identify by using the Choose a field list must be manually copied over to the ..\Web Content\images\generated\ directory.
Use the Create hyperlink setting so that your field is displayed as a hyperlink. There are three different approaches available for creating hyperlinks. They are: Specify static URL, JavaScript hyperlink, and Action hyperlink. If you want to override the browser's settings for hyperlink appearance, select the checkbox Override browser's hyperlink appearance with DDS appearance. If you use the Create hyperlink setting along with the Create Graphic setting, your field can be displayed as a graphic that also acts as a hyperlink.
Most browsers follow a convention for the color and appearance of hyperlinks on Web pages or have settings for hyperlink appearance that users can change. For example, unvisited links may be displayed in blue text and visited links may be displayed in purple text. If you want the browser to display the hyperlink with the same appearance as is used for the field in your DDS, select the checkbox Override browser's hyperlink appearance with DDS appearance.
If there is a specific URL that you want to be displayed for a field, select Specify static URL. The output value of your field will be the text that is displayed as a hyperlink. The location loaded by the browser when a user clicks the link is the value that is entered in the URL field. If you want the link to launch a separate browser window when it is clicked, enter a name for the window in the Target field. If you leave the Target field blank or enter *SAME, the link will open in the current browser window.
If you are working with a WebFacing portlet project, you can specify *PORTLET in the Target field to open the link within the portlet.
Enter the name of a JavaScript function that you want to be called when the link is clicked. For example, enter myFunction() . The function can be one that you have entered using the Insert into script Web Setting, a function that you have defined in an external JavaScript file, or a function that is included with WebFacing in the file webface.js. If you create your own external JavaScript files, put them in the usr directory of your WebFacing project. This directory is located in the path <project name>\WebContent\ClientScript\usr. Any scripts that you put in this directory are available to your WebFacing application at runtime. If you have a short inline JavaScript function, you can also enter the entire function in the JavaScript hyperlink field.
Entries in Position cursor to the field can take the following form:
Entries in the Enter data field can take the following form:
You can also manually enter values in the Enter data field.
If the Submit checkbox is selected, you can choose a Function key or JavaScript function call submit action for the hyperlink. For example, from the Function key drop down list, you can choose ENTER, LOGOFF, or a function key that you have defined in your DDS. If there is a function key from another DDS record that you would like to use, manually enter the value for the function key. When a user clicks a link that you have created for a function key, the program will execute that function. In the JavaScript function call field, you can enter the name of a JavaScript function that you want to be executed when the link is clicked. The function can be one that you have entered using the Insert into script Web Setting, a function that you have defined in an external JavaScript file, or a function that is included with WebFacing in the file webface.js. If you create your own external JavaScript files, put them in the usr directory of your WebFacing project. This directory is located in the path <project name>\WebContent\ClientScript\usr. Any scripts that you put in this directory are available to your WebFacing application at runtime.
You can combine the Position cursor to the field option with the Submit option. Do this if you want to set the value for a specific field and submit that value back to your program. To do this, select the Position cursor to the field checkbox, choose a field from the drop down list (or enter a field) , in the Enter data field choose a {FIELD.value} (or enter a specific value), select the Submit checkbox, select the Function key radio button, and choose ENTER from the Function key drop down menu. For information about the entry format to use for Position cursor to the field and the Enter data field, see the section of this document Position cursor to the field.
if(&{CID}.value="") { &{CID}.value="0001"; }In this example, the code &{CID} refers to a field CID that was selected using the Insert field name button. Fields under the Insert field name button are enclosed with an ampersand and two brackets; for example &{FIELDNAME}. Other examples would be JSP code that determines the IP address of a WebFacing user or javascript that displays the time of day of the user's system. You can use Insert into script along with the Send to browser setting. For example, you can use values determined by your scripts to populate hidden fields that you have set with the Send to browser setting. If there is an existing field in your DDS that you want to use as part of your script, add it to your script using the Insert field name button. For example, you can select an H or hidden field and use it in your script so that a value can be assigned to it.
The Send to browser setting can be used for H or hidden DDS fields. This setting modifies the generated JSP files for your records. For example, if you have an H field in a record called LISTCTL, when this setting is used, an HTML hidden input form element will be generated in the JSP file LISTCTL.jsp. Hidden input form elements begin with the HTML code <INPUT TYPE="hidden" . Using Send to browser enables an H field to become part the the browser environment and for values to be assigned to it based on that environment. For example, the IP address of a user that is determined by a script you added using the Insert into script setting.
The Dynamic key label setting can be used to determine the text label of a command key at runtime. This setting is only available for output fields. With this setting, a command key is associated with the output field and text for the command key is determined by the runtime value of the field. An example use is if your application is to support more than one language and you want the command key text to appear in the user's native language. One way of doing this is to have a MSGF per language that contains the text strings that your application uses and put each MSGF in a language specific library. If the output field's value is read from the MSGF, you could change the language of the text displayed in the field by putting the library that contains the MSFG for your user's language higher in the library list in the user's profile. Subsequently, the command key label would be displayed in their language.
Prefix | Separator |
---|---|
F | = |
FP | = |
CF | = |
CA | = |
PF | = |