Adding Additional functionality to a Websphere Webfacing Project

Webfacing's biggest strength is the ability to rapidly convert standard 5250 screens to run on a standard web browser.  This permits an organization to potentially expand its user base to anyone in the world with a web browser and internet connection.  However, the conversion process does not make the resulting code very web-friendly.

Since 5250 and web technologies were developed in different generations and for different target users, many green-screen concepts do not map well to the Web, and many web features that we take for granted, simply don't exist in 5250 screens.

For instance, concepts like hyperlinks and mouse-click events are foreign to 5250 application. Similarly function keys and conditional indicators are not common or easily deployed on web applications.

...using Project Properties

The first place to look to add additional functionality is in the Project Properties of a Webfacing Project. Here you can control many aspects of your project, including function key conversions, fonts and colours and graphics used in the project.

Link to an external URL in a Webfacing Project using Project Propeties

This Screen demonstrates how to link to an external URL using project properties.

 

Webfacing offers several solutions to add functionality to the webfaced Web page. One technique is to insert HTML-like code into your DDS code. This code is interpreted as HTML at run time.

To give you an idea of what I am talking about, here is a fragment from 5250 screen:




Here is a fragment from a Webfaced page after making the automatic conversion. Note that the typical 5250 selection field is imported to the Webfaced application. AS/400 users are used to entering standard option codes like "1" for details or "4" to delete. However, this method is not very intuitive for web users. :


and here is a fragment from Webfaced page with some custom changes. Note that entry field OPT is now represented with hyperlinks on the product name:


 

How did we do this?
Note the following entry from a DDS screen display file.

This "HTML-like" code shown above was generated using special tools in the IBM CODE Designer code editor.

This is a fairly easy way to make a 5250 application behave in a much more web-like manner. After making changes in IBM CODE Designer, you have to save the code back to the AS/400 and re-import code into Websphere Webfacing. Be careful not to use SDA (IBM's 5250 screen editor) on this code, because SDA may mix up these additions or strip them out entirely.

The example below shows how to create a hyperlink from a selection field using CODE Designer. Here I click on the Product Description field in a subfile and CODE Designer highlights the whole field.

In the CODE Designer Web settings below, I set up a hyperlink

Once you are finished and run your web page you will be able to to click the Product Field, the HTML code pushes a '1' into the OPT field and simulates an ENTER key.

In the second part of this example, we redefined the visual properties of the Product Description field that is acting as a hyperlink. wf_field_link is a class defined in the CSS style page. This gives us the undeline property that we generally associate with an HTML hyperlink.

At run-time, the HTML code generated will look something like this:

validateAndSubmit is a javascript function that triggers the calling of the function keys.

Say you want to show a picture of a shaving brush if the user clicks on "SHAVBRUS99" from a Webfaced inventory listing. One technique to accomplish this would be to grab the product number (SHAVBRUS99) and display a picture called SHAVBRUS99.JPG.

To accomplish this task, we shall create a screen called REC1F with a Product Number field is called PROD#. We have a literal field (simply the letter X) on our screen, whose only job is to mark the location on the screen of our inventory image. We also have to have an image called SHAVBRUS99.JPG found in the directory called images/generated/. This following has to be inserted in CODE Designer in Web Settings|Insert HTML text box.



The JSP expression <%=REC1E.getFieldValueWithTransform("STATUS", UNQUOTED_TRANSFORM)%>will be substituted with the string "SHAVBRUS99" at run time.
 

There is a worderful function that permits you to quickly enable a function similar to WRKSPLF

Unfortunately I don't see anything similar for other common commands like WRKACTJOB or WRKUSRJOB. Here is how you deploy it



Here is what the results look like.


Here is a detail of an actual spooled file.


 

Here is a detail of an actual spooled file.



 

undefined

undefined More...

undefined [Close]

undefined [Close]

undefined