Technical details

Genie Template

The core of a skin is the template file start.html in the /www/profoundui/htdocs/profoundui/userdata/genie skins/Skin_Name/  folder.  This file can be customized at will as long as it contains a div with id of 5250

Some skins also add a class name for styling purposes

This is the div where all the 5250 content is rendered. It can be inside another div or inside a table cell with any other content around it.

The template file must also include links to external style sheets and JavaScript files. These include:

The order of these is important

• profoundui.css should be above the Skin_Name.css link

• Genie.js should be above custom.js

Font color and attribute bytes

Below is a chart of all the font colors and attribute for the 5250 display. It has been copied from https://www-01.ibm.com/support/knowledgecenter/ssw_ibm_i_72/apis/dsm1f.htm

Open

Obviously some of these colors need to be remapped because the background color of a web page is often white or a light color and rarely black.  White text will no longer be visible on a white page.

The 5250 data stream changes color/attribute by outputting an attribute byte as shown in the above table. The hex code x'20' will change the text to green text, x'34' will change it to turquoise/underscore etc. Genie detects these attribute bytes and assigns the text impacted by this byte to a class name.

Genie class of A20 represent Green, A34 represent turquoise/underscore. These classes can then be controlled entirely by style sheets allowing the colors to be remapped to an appropriate equivalent. We also distinguish between an input field and an output field allowing a different color map for each.

In the Hybrid skin we map a green output field DIV.A20 to hex color #333333 which is a dark grey but a green input field INPUT.A20 to hex color  #003399 which is a dark blue. This choice was arbitrary and was chosen to give a more modern look.  Most modern interfaces limit the number of "primary" colors.

Some applications however use color to represent specific information.  For example a yellow field in a subfile might represent an inactive record, a red field might represent an overdue reccord etc  In this case the original colors will need to be retained or a variant of them. Obviously if white text has a specific meaning this will need mapping to an alternate color as long as the color is unique,not used for any other attribute mapping.  Ultimately the mapping of the colors may need to be customized for each installation using your knowledge of your application.

If certain colors do need to be retained, you could consider reducing the intensity so they still retain their fundamental color but form a more cohesive modern interface. The hex code of a color can be determined using a graphics package like Photoshop or a website such as http://www.color-hex.com/

Cascading Style Sheets

Two cascading sheets are used by Genie.

• /www/profoundui/htdocs/profoundui/proddata/css/profoundui.css

• /www/profoundui/htdocs/profoundui/userdata/genie skins/Skin_Name/Skin_Name.css

The main cascading style sheet for Genie is Skin_Name.css but Profoundui.css is included to allow the integration of Profound UI Rich display file programs within Genie

Most of Skin_Name.css is used to define the text colors via the attribute classes detailed above but it also defines the usual style properties used in many web pages. These include

• Background color

• default font family

• alignment of the 5250 container div

• much more

JavaScript

Genie uses two JavaScript files genie.js and custom.js

Genie.js is the main product runtime. It is obfuscated and updated whenever a Profound UI update is installed. 

In your skin folder, there is a JavaScript file named custom.js  This file can contain screen specific custom JavaScript and also global functions that apply to all screens. The most common use for this file can be found here customize function (Genie)

A list of global functions that can be used in this file is here Global Events