axFrame – Insert a frame into the screen

Description

axFrame allows a frame to be added to a 5250 screen.

The frame is typically used to display a web page from a corporate or external web site. 

The frame can be made to fade away when the user moves the mouse out of it to another 5250 screen area - revealing what is visible beneath it. This allows for significant reuse of 5250 screen real estate.

There may be multiple frames on a 5250 screen.

Usability

Context	Supported
Input screen fields	No
Output screen fields	No
Input subfile fields	No
Output subfile fields	No
New screen elements	Yes

Properties

Name	Description and Comments	JavaScript	Shipped default
enabled	Indicates whether this element is enabled. TS2 only.	Yes. Must return a Boolean.	True.
intFadeInterval	The initial fade interval. The use of fading is a way to preserve and reuse 5250 screen real estate. Refer to the examples following. This specifies, in milliseconds, the initial time taken for the frame to fade by 10%. When the frame has faded to zero it is made invisible and can no longer be accessed. The default value of 600 indicates that it takes 6 seconds (600 milliseconds X 10 fades) for the frame to become invisible. Set this property to zero to turn off frame fading. Frame fading is initiated when the user moves the mouse out of the frame area. Frame fading stops and the fade effect is removed if the user moves the mouse back over the frame any point before it becomes invisible.	Yes	600
src	The URL that the frame is to be loaded from. The load process, like all web pages, is asynchronous. The frame will not attempt to display itself if this property is set to an empty string.	Yes	/ts/blank_page.html
style	The style to be applied to the frame.	Yes
subsFadeInterval	The subsequent fade interval. This specifies, in milliseconds, the subsequent time taken for the frame to fade by 10%. The default value of 150 indicates that it takes 1.5 seconds (150 milliseconds X 10 fades) for the frame to become subsequently invisible. Set this property to zero to turn off frame fading.	Yes	150

Examples

Add the IBM web site to the System i Main menu. 

A frame is added to the System i Main Menu as a new element with these properties:

The resulting display looks like this:

Fade the IBM web site to the System i Main menu.

The frame in example 1 is changed to have these properties:

These indicate that when the frame is displayed initially it will fade away in about 10 seconds (1000 milliseconds is defined as the time for each 10% of the fading) unless the user positions the mouse over it.

If they subsequently move the mouse off the frame it will fade away in about 0.5 seconds (50 milliseconds is defined as the time for each 10% of the fading).    

The display now looks like this:

The frame initially fades away over 10 seconds. If the user moves the mouse over the frame the fading stops and the fading effect is removed from the frame. When the user subsequently moves the mouse out of the frame it fades away almost instantly.

Reusing 5250 screen real estate 

The command input field on the System i Main menu is named CommandLine.

A frame is then added to the System i Main Menu with these properties:

Significantly, the frame:

is named GoogleMap.

has no src (source) value specified.

has a long initial total fade time of 20 seconds.

has a short subsequent total fade time of 0.5 seconds.    

The frame is sized to use a very large portion of the 5250 screen, like this:

Next a button is added as new element with caption Google Map and this onClick script:

/* Get the value typed into the command line */

var cl = FIELDS("CommandLine").getValue();

/* If it is blank/null then show an error */

if (cl == "")

{

   window.alert("Enter the location details for the map");

}

/* Display the Google map details using the command */

/* details as the requested address details         */

else

{

   var gm = FIELDS("GoogleMap");

   var url = "http://maps.google.com/maps?q=" + cl;

   gm.setProperty("src",url); 

   gm.refresh();

}

This script takes the value from the CommandLine and passes it to Google Maps.

In use, this example works something like this:

Initially the frame does not appear because it has a blank/null src property:

The user enters an address and clicks the Google Map button:

The frame is now activated because it has a src property, so it displays the Google map details:

The frame will stay on display as long as the user keeps the mouse over it.

Once they move the mouse outside it, back to the 5250 screen, it will fade away very quickly and become invisible - allowing the user to perform another Google map search or to resume using the normal 5250 options on the System i Main menu.

Introductions and Welcomes

In this example a simple and visually crude “corporate home page” HTML document named MyCompany.html is added to the aXes ts/screens folder.

Its source code is like this:

<html>

<head>

</head>

<body style="font-family:Verdana;background-color:#FFFF99;">

<p style="text-align:center;">Welcome to ACME</p>

<dir>

<li style="margin-top:20px;"><b>Company HR Policy</b></li>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<li style="margin-top:20px;"><b>Upcoming Company Social Functions</b></li>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<li style="margin-top:20px;"><b>Visit the Company Facebook to get to know your Peers</b></li>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

<div style="margin-left=40px;">Click in here to read about ..... etc, etc, etc, etc</div>

</DIR>

</body>

</html>

Hint: Set user *PUBLIC to have *R rights only for any new documents you add to aXes folders.

It looks like this when displayed in a browser page:

Hint: We very strongly recommend that you consult with a professional graphics designer if you intend to build a corporate home page.

Next a property is added to the USERENV object to count how often the System i Main menu has been displayed in the current session:

var USERENV =

{

    mainMenuUseCount: 0, /* Count how many times the main menu is used */  

}

Hint: You will need to stop and restart your development session to pick up the modified USERENV.

Next a frame is added to the System i Main menu with these properties:

Significantly, the frame:

is named Introduction.

has no src (source) value specified.

has a long initial total fade time of 6 seconds.

has a short subsequent total fade time of 1.5 seconds.

Finally, this script is a added to the onArrive property of the System i Main menu screen itself:

/* Increment count of times menu used */

USERENV.mainMenuUseCount++;

/* If this is the first time show the introduction */

if (USERENV.mainMenuUseCount == 1)

{

   var intro = FIELDS("Introduction")

   intro.setProperty("src","/ts/screens/myCompany.html");

   intro.refresh();

}

This script is counting how many times the System i Main Menu is displayed. It shows the introduction frame only the first time that the screen arrives.

So when the user signs on and the System i Main Menu displays for the first time they see this “corporate home page” frame overlaying the 5250 screen:

As long as they keep the mouse over the frame they can work within it.

Once they move the mouse outside the frame it fades away in about 1.5 seconds.

If the mouse is not over frame on the initial display the frame would fade away much more slowly - in about 6 seconds. 

Subsequent redisplays of the System i Main Menu do not show the frame at all because the src property is not set to anything by the System i Main Menu’s onArrive script.

These types of corporate home pages are useful to keep employees up to date.

Additionally, they can be changed externally at any time in just a few seconds - without any changes being required to the 5250 application or to any aXes customizations.

Additionally, they easily link off to other HTML pages, web sites, etc.