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:

Image

The resulting display looks like this:

Image

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

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

Image

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:

Image

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:

Image

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:

Image

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:

Image

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

Image

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

Image

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:

Image

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:

Image

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:

Image

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.

Image

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.

Administrators

Legal Mentions

aXes is brought to you by:

LANSA

Serving the IBM i community for 30 years.