Tutorial 3: Advanced Screen Enhancement

Objectives

This tutorial teaches you how to customize 5250 screens by moving and hiding screen elements, and adding new screen elements using aXes eXtensions including dates, dropdown lists, group boxes, hyperlinks, images, push buttons, and radio buttons.

Prerequisites

Tutorial 2 – Basic Screen Enhancement

Before attempting this tutorial, please complete all of the steps in Tutorial 2.

Outline

What this tutorial covers

Screen and field names

What’s the plan?

Getting assistance

Setting up your styles

Defining styles

Why are styles important?

Adding a stripe

Moving elements, changing labels and captions

Move and resize screen elements

Hiding screen elements

Applying styles

Tooltips

Dates

Radio buttons

Drop down lists

Using row and other scripting objects

Push buttons

Multi-lingual text

Group boxes

Images

Hyperlinks

Finish the screen customization

Testing customizations

What this tutorial covers

Tutorial 3 focuses on customizing this 5250 screen:

image001

By the end of the tutorial, you will be able to make it look and act like this:

image002

The screen customization includes these areas of visual customization and functional enrichment:

tutorial 03 - 00 what this tutorial covers (201406 03 Jun v01).png

 

Features

Tutorial Topics

image004

Styles and styling

Defining and using styles.

How to style screen elements by their role.

image005

Moving, hiding and enhancing

Understand how to move things around the screen.

Hide and alter screen content.

Use tool tips (hints) as a substitute for long labels.

image006

Group Boxes

Use group boxes and stripes to visually group and draw attention to information.

image007

Radio Buttons

How to use radio buttons.

image008

Dates

How to change the way that dates are displayed and adding calendar pickers.

image009

Drop Downs

How to add drop downs or combo boxes.

image010

Images

How to add images.

image011

Hyperlinks

How to add hyperlinks to display associated information.

image012

Buttons

How to add buttons and script what happens when users click them.

Screen and field names

This section defines screen and field names used in all tutorials.

You don’t have to read this section just now. It is a reference point for this and following tutorials.

The screens are XHRRPGTRN_Select and XHRRPGTRN_Maint.

You can display the screens by adding AXESDEMO to your library list, and then calling the program XHRRPGTRN.

XHRRPGTRN_Select and its field names

This is the XHRRPGTRN_Select screen, with its fields named as indicated:

image013

XHRRPGTRN_Maint and its field names

This is the XHRRPGTRN_Maint screen, with its fields named as indicated:

image014

What’s the plan?

It’s important to have a 5250 screen customization and enhancement plan. Creating a plan will ensure that the look and feel of the screens remains consistent after customization, and help you to allocate a priority to the screens you intend to customize – work on the most important screens first.

In this tutorial, the plan is to customize this 5250 screen:

image015

The customization will add these visual and functional eXtensions to the screen: styles, a stripe, date pickers, a radio button, drop downs, buttons, group boxes, an image and hyperlinks.

The outcome of the customizations will look like this screen.

image016

Getting assistance

While completing these tutorials you can get information from the product documentation. This is a sample page from the eXtensions Guide.

tutorial 03 - 02 (20140602).png

The aXes Technical Documentation Index provides a list of the documents.

Setting up your styles

Up until now, you may have used one of the shipped basic 5250 themes, e.g. blue or default, to change the appearance of your aXes 5250 application.

tutorial 03 - 03 (20140602).png

Once you start customizing an application you should stop using the basic 5250 themes and develop your own customized role-based styles and themes.

What follows in this tutorial covers the basics of screen styling.

Later you should review Tutorial 10 – 5250 Screen Styling to obtain an in depth understanding of what you can do with customized styles and themes.

Also refer to Tutorial 15 – Jquery Styles to enhance the overall appearance by just selecting a jQuery theme.

Defining styles

To get started with customized styles and themes you need to define some styles.

The next task will add styles for background, font, key information and screen title. You will use the styles later in the tutorial.

Open the Projects Home Page.

Select your project, and then use the Work as TS2 Developer option and sign on to a 5250 session.

tutorial 03 - 04 (20140602).png

In the aXes Developer window, click Application in the Extendable Objects list to view the application properties. No need to put in edit mode, it's already editable.

Locate the Styling bar at the bottom of the aXes Developer window.

Click on the Edit Items button adjacent to the styles label.

aXes will display the Edit Items window.

image020

Click on the plus button [+] to add a style item.

image021

Use the following property values for the background style.

Name

BasicWindowBackground

styleFor

Application Window

htmlTag

 

style

 

theme

 

for5250Attributes

 

Click the Edit Styles button in the style property.

image022

Input the following into the Edit Styles window, then click OK.

background: #9cc1e5 url('/ts/skins/images/bluebgimg.jpg') repeat-x top left

This will set the image (bluebgimg.jpg) as the screen background.

Next, add the font, key information and screen title styles.

Click on the plus button [+] to add an item for the font style.

Use the following property values for the font style.

Name

BasicFont

styleFor

All

htmlTag

 

style

Click the Edit Styles button, input the following into the Edit Styles window, then click OK.

font-family:Verdana

font-size:9pt

 

theme

 

for5250Attributes

 

Click on the plus button [+] to add an item for the key information style.

Use the following property values for the key information style.

Name

KeyInformation

styleFor

 

htmlTag

 

style

Click the Edit Styles button, input the following into the Edit Styles window, then click OK.

color:blue

 

theme

 

for5250Attributes

 

Click on the plus button [+] to add an item for the screen title style.

Use the following property values for the screen title style.

Name

ScreenTitle

styleFor

 

htmlTag

 

style

Click the Edit Styles button, input the following into the Edit Styles window, then click OK.

font-style:italic

 

theme

 

for5250Attributes

 

When you finish adding the styles the Edit Items window should look like this:

image023

Click the OK button to close the Edit Items window.

Click Save button to apply the changes.

To see the effect of your styles:

Sign off from your aXes development session.

Close the browser window.

Start your aXes development session again.

You should see the result of the BasicWindowBackground style.

Why are styles important?

You define styles so that screen elements can be quickly associated with their visual display characteristics or rules, e.g. all screen titles are to be displayed in italics, and screens will have a blue background.

Styling is a sophisticated feature and there is another tutorial dedicated to styling.

The benefits of using styles are compelling.

Standardization

Styles produce standardization, which is essential to produce a common look and feel, and to prevent unconstrained style use of styles.

Single point of change

Styles provide a single point of change.

What do you do when the marketing people decide screen titles should be italic/green this week and bold/blue next week?

Using styles simplifies the change, e.g.

This week - font-color: green; font-style: italic;

Next week - font-color: blue; font-style: bold;

If by default a style is to be applied to all instances of an eXtension (e.g. we want all buttons to have the same appearance), the style should be applied to the button eXtension template instead of applying the change to each button instance, as this saves you from having to assign a style to individual buttons.

Please refer to FAQ – Customizing eXtensions for more information on how to customize an eXtension template.

Adding a stripe

In our customization plan there is a "bar" or "stripe" across the top of the 5250 screen. After you have added the stripe to the top of your 5250 screen, it will look like this:

image024

Open the Projects Home Page.

Select your project, and then use the Work as Developer option, and sign on to a 5250 session.

Add library AXESDEMO to your library list and call program XHRRPGTRN using the buttons you created in the previous tutorial.

Select one of the displayed employees with an X and press enter. The resulting 5250 screen will look something like this:

tutorial 03 - 09 (20140602).png

You identified this screen as XHRRPGTRN_Maint in a previous tutorial.

tutorial 03 - 09 with check screen name (20140604).png

Check that the name in the Screen Definition shown on the Screens tab in the Developer window is XHRRPGTRN_Maint.

If the name is not XHRRPGTRN_Maint, or you do not understand why it is XHRRPGTRN_Maint, please complete all the preceding tutorials before going any further in this tutorial.

Click Screen in the Extendable Objects list and then choose Customize Screen from the eXtensions actions button (in the eXtensions bar of the Developer window).

tutorial 03 - 10 (20140602).png

By default, screen XHRRPGTRN_Maint uses the same styles as the basic, un-customized 5250 screens. Since we are going to heavily enhance this screen, you need to prevent this by changing the useTerminalStyles property to false.

The useTerminalStyles property is in the Basic properties below the eXtensions bar. Uncheck the useTerminalStyles property.

tutorial 03 - 11 (20140602).png

After unchecking the use Terminal Styles property, click the Save button.

You should see your screen change as the BasicFont style takes effect.

Now you are going to change the top of the screen from this:

image029

To this:

image030

Do this by adding a new element to the screen.

Add an eXtension by selecting Simple Stripe from the Extension Toolbox then drag and drop it onto the screen panel.

Change the stripe's context to Mini-Panel Heading.

Move and position the stripe so that it sits below the screen name, above the Department Abbreviation label, and spans the screen width.

Save your changes.

The customized screen will look similar to this:

tutorial 03 - 12 (20140602).png

Moving elements, changing labels and captions

The objective of this task is to change the screen appearance by manipulating screen elements e.g. labels and fields.

Move and resize screen elements

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed.

The label "Department Abbreviation .." on the 5250 screen can be made shorter.

Click on the label Department Abbreviation to select it and choose Customize Field:

tutorial 03 - 13 (20140602).png

Change the value property to the word Department (the value property is in the Default Visualization).

tutorial 03 - 14 (20140602).png

Now move the label up onto the stripe:

tutorial 03 - 14 (20140602).png

Your screen should show the word Department in the bar at the top left-hand side of the screen.

Save your changes.

How to move screen elements

You can move elements around either by dragging them with the mouse, or by using the arrow keys (you must select an element before you can move it).

To move multiple elements as a group, draw a box around them (in screen edit mode). Any element that is fully or partially within the box will be selected. All the selected elements can be moved (or sized) together.

The keyboard shortcuts for moving screen elements are:

Right Arrow

Move to right

Left Arrow

Move to left

Up Arrow

Move up

Down Arrow

Move down

How to resize screen elements

To resize an element, or a group of elements, use the mouse to click on one of the element's sizing handles and drag the element to the size you want.

Hiding screen elements

The objective of this task is to hide the screen identifier.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed.

Click on the screen identifier XHRRPGTRN to select it and choose Customize Field from the eXtensions actions button (in the eXtensions bar of the Developer window).

tutorial 03 - 15 (20140602).png

Uncheck the visible property, then save your changes and unlock the screen.

The screen identifier, XHRRPGTRN, will no longer appear on the screen.

tutorial 03 - 16 (20140602).png

You have now used three essential skills of screen enhancement:

—  Simplification or replacement of long text

—  Moving screen elements

—  Hiding screen elements

Using these skills, you should be able to rearrange the 5250 screen elements so that the top of the screen looks something like this:

tutorial 03 - 17 (20140602).png

Move the business unit label and field, the employee identification label and field, and the screen title into the bar beside department.

The exact location of a customized screen element is visible in its basic style property. You can manually change these values to move elements around the screen.

Sometimes the manual approach is an easier and more accurate way to very precisely align fields.

Save your changes.

Applying Styles

The top bar of the 5250 screen now contains three pieces of key information (department, business unit and employee ID), and the screen title. These fields can now be associated with a style to give them their specific visual characteristics.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed.

Click on the department code "ADM" (or whatever code is displayed) to select it.

In the Basic properties sheet, click the Edit Styles button adjacent to the style property.

tutorial 03 - 18 (20140602).png

Select the base style from the dropdown list: KeyInformation

image039

Click OK and save your changes. You can see the effect of the changes.

tutorial 03 - 19 (20140602).png

The colour of the Department Abbreviation text has changed to blue. You defined the colour when you created the KeyInformation style earlier in this tutorial.

Apply the KeyInformation style to the Business Unit field.

Apply the KeyInformation style to the Employee ID field.

Next, select the screen title and apply the base style as ScreenTitle

The top of the 5250 screen will look similar to this:

tutorial 03 - 20 (20140602).png

The text in the fields is blue and the screen title text is italic.

Using styles will save you time and effort. If you customize 20 screens and then decide that you want to change the screen title text to be italic and blue, you only have to change the style (i.e. the ScreenTitle style), not individual style properties in all 20 screens.

Tooltips

You can add hints or explanations to fields by adding a tooltip. Tooltips provide more meaningful details than a short or abbreviated label.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, click on the Business Unit code, then choose Customize Field and select Tooltip from the Add eXtensions list.

tutorial 03 - 21 (20140602).png

Select the tooltip property in the Basic property sheet, and set it to this text (copy and paste from this):

This code is the business unit that the employee currently works for. It is often referred to as their "BU" code. Their id badges must always display this code or they may be refused admittance to company premises.

This tooltip is just plain text. When you add the text, the property field should have the pencil symbol on the right hand side. The gear symbol will be greyed.

You can change the type of property value you wish to enter by clicking on the gear symbol on the right hand side of the tooltip property. The gear symbol indicates that this property will be evaluated by executing the script that is displayed.

If you want to dynamically create the tooltip by executing a script, then the script you need for this example is:

ENV.returnValue = "This code is the business unit that the employee currently works for. It is often referred to as their \"BU\" code. Their id badges must always display this code or they may be refused admittance to company premises.";

tutorial 03 - 22 (20140602).png

Save your changes.

When you hover the mouse over the business unit code, you will now see the tooltip:

tutorial 03 - 23 (20140602).png

Managing long text in tooltips

If you require a lot of text for your tooltips (i.e. hints or explanations), create the tooltips in a word processing tool (e.g. Microsoft Word) where you can perform a spelling and grammar check.

When the text is ready, copy and paste it into your screen definitions, or use CTEXT("Tooltip.0001") type scripting references to externalize the definitions and multilingual translations.

You must use a Unicode capable text editor when editing multilingual strings.

The multilingual section of this tutorial provides more details.

Dates

This task adds a calendar date picker to the date fields.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, double-click Employee Date of Birth, and the add eXtension list window is displayed.

Select Date from the Add eXtension list.

tutorial 03 - 24 (20140602).png

Click the Add button and the date eXtension will appear on the screen.

tutorial 03 - 25 (20140602).png

In the date property sheet, change the dateFormatDisplay and the dateFormatServer property values.

dateFormatDisplay

day dd month yyyy

dateFormatServer

dd/mm/yy

The dateFormatServer property must match the format of the date as it appears on the uncustomized screen. We used dd/mm/yy to match the date format shown on the uncustomized screen used in the tutorial. On your machine, the format may be different.

If you cannot find a format that matches the format used to display your dates, you can change the dateFormatServer property to a script, and set it to any valid jQuery date format, using the script:

ENV.returnValue = "dd-mm-y";

See http://docs.jquery.com/UI/Datepicker/formatDate for valid jQuery date formats.

Widen the field to the right so that you can see the full date.

Save your changes.

The Employee Date of Birth field is now displayed like this:

tutorial 03 - 27 (20140602).png

The date is displayed in a long format and has a date picker (calendar) that can be invoked by clicking the red calendar icon.

You can control date options using their various properties.

The defaults for the various date formats can be set by changing the global defaults used by the Date eXtension or even programmatically by scripting. You can do this for most properties in most eXtensions. Changing the default value for a property in an eXtension is more efficient than changing the property repeatedly.

Repeat this process for the Employee Start Date and the Termination Date.

Save your screen changes.

After the changes, the screen will look something like this:

tutorial 03 - 27 (20140602).png

Radio Buttons

This task will transform the Employee Gender field into radio buttons.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, double-click Employee Gender and add eXtension window is displayed.

Select Radio Button from the Add eXtension list.

tutorial 03 - 28 (20140602).png

Click the Add button.

aXes will insert a radio button extension and the screen will look like this:

tutorial 03 - 29 (20140602).png

Next, we need a value for each radio button.

Radio button values can be created from multiple types of input sources. In this case, we are going to use the simplest source, a table of fixed values.

Look at radio button property sheet:

tutorial 03 - 29 (20140602).png

Change the value of the dataSourceType property to Fixed Values.

Change the value of the orientation property from vertical to Horizontal.

Then, click the Edit Items button adjacent to the fixedValues property.

The Edit Items window will appear where you will define a value and label text for each radio button.

The empty Edit Items window looks like this:

tutorial 03 - 30 (20140602).png

The value determines what will be checked for and put into the 5250 entry field by the radio button. The label text determines what is displayed beside the radio button.

Click the plus button [+] in the Edit Items window and add two items:

Item

Value
(inserted in the real 5250 field)

Text
(displayed beside the radio button)

1

Male

Man

2

Female

Woman

After you finish the Edit Item windows should look like this:

tutorial 03 - 31 (20140602).png

Click OK to close the Edit Items window.

Save your changes.

Your screen should look something like this:

tutorial 03 - 32 (20140602).png

Drop down lists

This task will transform the State and Country fields into drop downs (i.e. list boxes).

The data used to fill drop downs can come from static tables, dynamic tables (created by SQL commands), XML documents or simple static lists.

A separate tutorial covers the possibilities for supplying data to fill drop down lists and ways that you can use them.

In this tutorial you are going to use server based static tables shipped with aXes as the data source for the drop down lists.

State field drop down

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, double-click State, an add eXtensionv window is displayed.

Select Dropdown from the Add eXtension list.

tutorial 03 - 33 (20140602).png

Click the Add button.

aXes will insert a dropdown extension and the screen will look like this:

tutorial 03 - 34 (20140602).png

Next, we need to define a data source type and a data source.

Look at the dropdown property sheet:

tutorial 03 - 34 (20140602).png

Change the value of the dataSourceType property to Static Table.

Change the value of the tableName propertyto USState.

Widen the state field on the 5250 screen so that the state names fit in the window width.

Save your changes.

Your screen will now show a state code drop down like this:

tutorial 03 - 35 (20140602).png

Country field drop down

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, double-click Country, and add eXtension window is displayed.

Select Dropdown from the Add eXtension list.

tutorial 03 - 33 (20140602).png

Click the Add button.

aXes will insert a dropdown extension.

Next, we need to define a data source type and a data source.

On the dropdown property sheet, change the value of the dataSourceType property to Static Table.

Change the value of the tableName property to ISOCountry (the table name is case sensitive, so ensure you use the exact spelling and upper and lower case).

Widen the state field on the 5250 screen so that the country names fit in the window width.

Save your changes.

Your screen will now show a state code drop down like this:

tutorial 03 - 36 (20140602).png

Dropdowns have many options for sources of data, presenting the data, and can initiate actions when a user selects a drop down item. Using these features drop downs can be used to achieve clever and useful screen interactions. For example, imagine you want the country drop down to show the country code and the full name of the country.

Put the screen in edit mode and select the country code drop down.

Look at the dropdown property sheet:

tutorial 03 - 34 (20140602).png

Click the Edit Script button adjacent to the onFillDropDown property.

Copy this code into the Edit Script window.

ROW.value + " (" + ROW.text + ")"

tutorial 03 - 37 (20140602).png

Click OK and save your changes.

The Country drop down will now look like this:

tutorial 03 - 38 (20140602).png

As you may imagine, this ability to script what happens as the drop down is filled and what happens when a user selects an item can be used in many clever and useful ways.

Using ROW and other scripting objects

In the preceding example the ROW scripting object was used. In scripts that process table information, it is shorthand scripting used to refer to the "current" ROW in the table.

There are other shorthand objects you can use in your scripting:

Objects

Description

Example of Common Methods

FIELD

The specific field bound to the extension.

FIELD.getValue()

FIELD.setValue("ADM")

FIELDS

Gets a reference to any named field on the current screen.

FIELDS(“CustomerName”).getValue()

CTEXT

Shortcut for TEXT.cust

CTEXT(“label001”).

Retrieves the customer text associated with the key value "label001".

SENDKEY

Send key

SENDKEY(“Enter”)

SENDKEY("F4")

TRACE

Traces values into the trace window.

TRACE("Button 1 clicked")

DEBUG

Shortcut for AXES.Debug.output

 

LANGUAGE

Current language code

 

Push Buttons

This task will hide the function keys and replace them with push buttons.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, select Push Button from the Extension Toolbox then drag and drop it onto the screen panel.

image063

Repeat these steps, selecting then dragging and dropping Push Button onto the screen, until you have three push buttons.

Select each button in turn and edit the script for the caption and onClick properties.

First Button

caption

CTEXT("Save Changes");

 

onClick

SENDKEY("Enter");

Second Button

caption

CTEXT("Cancel Changes");

 

onClick

SENDKEY("F12");

Third Button

caption

CTEXT("Delete All Details");

 

onClick

SENDKEY("F22");

Click the Edit Script button adjacent to the property to open the Edit Script window. You can copy and paste the script from the table above.

This is an example of editing the script for the caption property of the Save Changes button.

tutorial 03 - 41 (20140602).png

Move the buttons to the bottom right-hand side of the screen.

Select the F12=Cancel object and hide it by unchecking its visible property.

Select the F22=Delete object and hide it by unchecking its visible property.

Your screen will look like this:

tutorial 03 - 40 (20140602).png

Save your changes.

The F12=Cancel and F22=Delete text at the bottom of the 5250 screen is screen text, just like the text "Employee Title". There is nothing special at all about this text. Its presence or absence in no way influences what function keys are actually enabled by the screen.

The Save button was added for the Enter function key. In most good GUI designs all function keys generally have an associated button.

Multi-lingual text

If you are not concerned about multi-lingual applications, skip to the next section.

You can use multi-lingual text for buttons, tooltips, labels, etc.

You must use a Unicode capable text editor when editing multi-lingual text. Almost all PC based text editors recognize and can handle Unicode files.

Typically, you can check this by looking at the “Save as” dialog options. For example, Notepad shows this in the Encoding option.

When you added the Save Changes button, you used the script, CTEXT("Save Changes"); to set the button's caption. This indicates that the button's caption is found by executing the CTEXT("Save Changes") scripting function.

The CTEXT() function looks up the customer multi-lingual text for the key "Save Changes" and returns the associated language text.

Customer multi-lingual text is stored in the Texts_Cust_LL.txt file. The LL represents a language code, e.g. English is en, French is fr, German is de, and Japanese is ja. The name of the multi-lingual text file for Japanese is Texts_Cust_ja.txt.

At execution time CTEXT("key") looks up the key supplied and returns a value from data loaded from the current language file. If no entry is found, the "key" is returned as the string.

See the deployment tutorial for more details about using multi-lingual text.

The technique of using CTEXT("key") for multilingual text can and should be used for literal text values everywhere in eXtensions intended for use in multi-lingual applications.

The choice of the CTEXT "key" here makes the button captions correct even when there are no key values in the Texts_Cust_LL.txt files. This is because the key and the English translations are the same values.

This approach is fine with short to medium text strings, but using CTEXT("Enter your password or click cancel to cancel and then log on again") would be not be advisable.

You should probably look to developing a "key" naming standard like CTEXT("Message_0001") or CTEXT("LongString.001") instead. This means that you have to provide English (or native) language translations of what Message_0001 (say) translates to.

If you change a Texts_Cust_LL.txt file you should clear your browser cache to pick up the new file version.

Group boxes

This task will rearrange data on the 5250 screen into groups.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, select Group Box from the Extension Toolbox then drag and drop it onto the screen panel.

tutorial 03 - 42 (20140602).png

Look at the Group Box property sheet:

tutorial 03 - 42 (20140602).png

Change the value of the caption property to Identification.

Change the value of the look property from Classic to Modern.

Save your changes.

Tip: we can tell the group box to always use the Modern look by modifying the group box eXtension template. This way we don’t need to adjust the look property for each group box we add.

Please refer to FAQ – Customizing eXtensions for more information on how to customize an eXtension template.

Move the group box under the title bar, leaving a small gap, and approximately size it according to the about half the width of the screen plan.

Save your changes.

Now, move the employee identification information according to the plan. The employee identification information is title, last name, first name and gender. After you finish your screen should look something like this:

tutorial 03 - 43 (20140602).png

Save your changes.

Add another group box and set its caption as Important Dates, and the look property to Modern, and move it to the right-hand side of the Identification group box.

Change the Employee Date of Birth label to Birth.

Change the Employee Start Date label to Start.

Change the Termination Date label to Termination.

Then arrange the date information according to the overall screen plan, something along these lines:

tutorial 03 - 44 (20140602).png

Save your changes.

Add another group box labelled Location and Job Details, and the look property to Modern, and position it on the left-hand side of the screen below the Identification group box.

image070

After you finish the group box will look like this.

Move these fields into the group box:

Street

City

State

Zip (Postal Code)

Country

Phone (Employee Telephone)

Job Title

Salary (Employee Annual Salary)

Start Action

Do not obsess over the exact layout. You may notice that this layout is slightly different to the original.

Save your changes.

Images

This task will add an image to the 5250 screen. You may notice that the image is not part of the original 5250 screen.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, select Group Box from the Extension Toolbox then drag and drop it onto the screen panel.

Change the group box caption to Photo, and the look property to Modern, and move it to the right-hand side of the Location and Job Details group box.

Add another extension by selecting Image from the Extension Toolbox then drag and drop it onto the screen panel.

image071

Select the image eXtension.

Change the imagePath property to /ts/skins/images.

Change the imageName property to examplephoto.gif.

Save your changes.

The image will appear in the Photo group box.

tutorial 03 - 46 (20140602).png

The image may appear to be very large.

This is because the image appears as its full size.

To shrink the image to the desired size, we need to change the height and width properties so that the browser will render the image to fit inside its container.

Click the Edit Style button in the style property of the image extension.

image073

Input the following into the Edit Styles window, then click OK.

height: 100%

width: 100%

This will ensure the image fits inside the Photo group box and not extend beyond the group box borders.

The completed screen will look similar to this:

tutorial 03 - 48 (20140602).png

The ability to script the image properties is useful. Often the image name needs to be dynamically determined by using information present on the screen, such as a product number or an employee number. You may even have to execute an SQL request to look up a database table to find the name of the image.

Hyperlinks

This task will add hyperlinks to the 5250 screen.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, select Group Box from the Extension Toolbox then drag and drop it onto the screen panel.

Change the group box caption to Online Documents, and move it to the right-hand side of the Photo group box.

Add another extension by selecting HyperLink from the Extension Toolbox then drag and drop it onto the screen panel, then change the caption to Employment Contract, and move it into the Online Documents group box.

There is a small problem here. Since we don’t want the text to wrap around on two lines the font size needs to be reduced. You can do this in two ways:

Option 1:

Change the style font-size of the hyperlink to 7pt or 8pt

Option 2:

Define a new application-wide style named SmallHyperLink (say) that defines and standardizes the visual characteristics of a small hyperlink.

If you choose option 1, you will have to change the font-size for every small hyperlink.

If you choose option 2, you need to edit your application properties and define a new style with properties, something like this:

name

SmallHyperLink

styleFor

HTML Element

htmlTag

a

style

font-size: 7pt;

Refer to the earlier section in this tutorial describing how to create styles.

Edit the style property of the Employment Contract hyperlink.

image075

Input the following into the Edit Styles window, then click OK:

cursor: Hand

 

Next, you need to specify what happens when a user clicks the hyperlink.

Edit the script for the onClick property of the Employment Contract hyperlink, and copy the this code into the Edit Script window, then click OK.

{

window.open('/ts/skins/images/examplecontract.pdf','_blank');

}

tutorial 03 - 50 (20140602).png

When clicked, the Employment Contract hyperlink will open a PDF document.

image077

Add another HyperLink extension.

Move the hyperlink into the Online Documents group box and change its caption to Latest Time Sheet.

Edit the style property of the Latest Time Sheet hyperlink and input the following into the Edit Styles window, then click OK.

cursor: hand;

Edit the script for the onClick property of the Latest Time Sheet hyperlink, and copy the this code into the Edit Script window, then click OK.

{

window.open('/ts/skins/images/exampletimesheet.xls','_blank');

}

Save your changes.

When clicked, the Latest Time Sheet hyperlink will open an Excel workbook.

image078

Finish the screen customization

This task will add one more group box to the 5250.

With the aXes Developer window and the XHRRPGTRN_Maint screen displayed, select Group Box from the Extension Toolbox then drag and drop it onto the screen panel.

Change the value of the caption property to Actions.

Change the value of the look property to Modern.

The finished screen will look something like this:

tutorial 03 - 52 (20140602).png

This screen is not exactly the same as the original plan as some minor improvements have been made along the way.

Testing customizations

Always test your customizations as a user.

You can test your screen customizations while logged on to aXes as a developer, but you must always also test your application while logged on as a user.

To test as a user, open the Projects Home Page.

Select your project, and then use the Work as a User (aXes-TS2) option to start aXes.

Add library AXESDEMO to your library list and call program XHRRPGTRN using the buttons you created in the previous tutorial.

Select one of the displayed employees with an X and press enter.

Verify that the customizations display correctly, try out the buttons and hyperlinks.