2

TABLE OF CONTENTS

CHAPTER 1: INTRODUCTION.............................................................................................5

1-1: ADVANTAGES AND FEATURES ............................................................................................81-2: GRAPHICAL WYSIWYG ELEMENTS ...............................................................................10

CHAPTER 2: INSTALLATION ............................................................................................14

2-1: CUSTOMIZED INSTALLATION ...........................................................................................232-2: USER INSTALLATION ........................................................................................................26

CHAPTER 3: GETTING STARTED.....................................................................................27

3-1: CREATE A NEW SKIN ........................................................................................................273-2: GENIE DESIGNER ..............................................................................................................313-3: GENIE ADMINISTRATOR ...................................................................................................533-4: HTTP CONFIGURATION....................................................................................................553-5: GENIE SKINS .....................................................................................................................563-6: MAPPING A NETWORK DRIVE ..........................................................................................56

CHAPTER 4: WORKING WITH GENIE.............................................................................59

4-1: BUTTONS...........................................................................................................................594-2: GRAPHIC BUTTON ............................................................................................................664-3: CHARTS.............................................................................................................................674-4: CHECKBOX .......................................................................................................................834-5: AJAX CONTAINER .............................................................................................................894-6: IFRAME.............................................................................................................................964- 7: TEXT AREA ....................................................................................................................1024-8: SPINNER ..........................................................................................................................1064-9: IMAGE .............................................................................................................................1104-10: OUTPUT FIELD ..............................................................................................................1144-11: GENIE DESIGNER ..........................................................................................................1174-12: SCREEN NAME AND IDENTIFIER ...................................................................................1194- 13: MOVING AND RESIZING SCREEN ELEMENTS. ...............................................................1214- 14: MULTIPLE SELECTION.................................................................................................1244- 15: DATE FIELD..................................................................................................................1284- 16: SELECT BOX.................................................................................................................1324- 17: FIELD SET PANEL.........................................................................................................1394- 18: HTML CONTAINER .....................................................................................................1434- 19: HYPERLINK ..................................................................................................................1464- 20: TEXTBOX......................................................................................................................1514- 21: PASSWORD FIELD.........................................................................................................1574- 22: RADIO BUTTON ............................................................................................................1584- 23: GRID.............................................................................................................................161

3

CHAPTER 5: GENIE API CLIENT-SIDE SCRIPTING.................................................176

5-1: DETECTSCREEN( ID, VALUE, [ID2, VALUE2, ETC] )......................................................1765-2: GET( ID )..........................................................................................................................1775-3: GETELEMENTVALUE( ID ) ..............................................................................................1775-4: GETOBJ( ID ) ...................................................................................................................1785-5: HIDEELEMENT( ID ) ........................................................................................................1785-6: HIDEELEMENTS( ID1, [ID2, ID3, ETC...] ) .........................................................................1795-7: REMOVEELEMENT( ID ) ..................................................................................................1795-8: REMOVEELEMENTS( ID1, [ID2, ID3, ETC] )..................................................................1805-9: CHANGEELEMENTVALUE( ID, VALUE )...........................................................................1805-10: CHANGEELEMENTCLASS( ID, CUSTOMCLASS ) ............................................................1815-11: NEWELEMENT( [ROW, COLUMN, TYPE, CONTENT, IDENTIFIER] ).................................1825-12: MOVEELEMENT( ID, ROW, COLUMN ) ...........................................................................1845-13: MASSMOVE( FROMROW, TOROW, FROMCOL, TOCOL, VCHANGE, HCHANGE,ELEMTYPE ) ...........................................................................................................................1845-14: DEABBREVIATE( ID, FROM, TO )....................................................................................1855-15: SETTAB( TABPANELID, TAB ) ........................................................................................1865-16: SETCURSOR( ROW, COLUMN ).......................................................................................1865-17: PRESSKEY( KEYDESC ) .................................................................................................1875-18: MULTISTEPACTION( ARGS )..........................................................................................1885-19: LTRIM( STRING )............................................................................................................1895-20: RTRIM( STRING ) ...........................................................................................................1895-21: TRIM( STRING )..............................................................................................................1905-22: SHOWASWINDOW( SCROLLINGFLAG, REVERSEFLAG ) ...............................................1915-23: SAVESCREENIMAGE() ...................................................................................................1925-24: GETOUTPUTFIELDS()....................................................................................................1925-25: GETINPUTFIELDS() .......................................................................................................1935-26: PREVENTEVENT( EVENT ) .............................................................................................1935-27: GETROW( OBJ ) .............................................................................................................1945-28: GETCOL( OBJ ) ..............................................................................................................1945-29: ATTACHCALENDAR( ID, FORMAT ) ...............................................................................1955-30: GETWINDOWOBJ( DESIGNID, WINDOWDIV )................................................................1955-31: POSTTONEWWINDOW( URL, PARM1, VALUE1 [, PARM2, VALUE2, ETC] ).................1965-32: REFRESHSCREEN()........................................................................................................1975-33: CREATENAMEDELEMENT( TYPE, NAME ) .....................................................................1975-34: FIND( SEARCHSTRING, EXACTMATCH )........................................................................1985-35: GETLEFT( STARTELEMENT ) ........................................................................................1995-36: GETRIGHT( STARTELEMENT ) ......................................................................................1995-37: SETDOMATTRIBUTE(ELEMENT, ATTRIBUTE, VALUE ) ................................................2005-38: ADDEVENT( OBJ, EVENTNAME, FUNC ) .........................................................................2015-39: REMOVEEVENT( OBJ, EVENTNAME, FUNC )..................................................................2025-40: GETMOUSEX( EVENT )..................................................................................................2025-41: GETMOUSEY( EVENT )..................................................................................................2035-42: SHOWERRORS() ............................................................................................................2045-43: GETINNERTEXT( OBJECT )............................................................................................2045-44: SESSION.SET(NAME, VALUE) .........................................................................................2055-45: SESSION.GET(NAME) .....................................................................................................2055-46: SESSION.CLEAR()...........................................................................................................2065-47: APPLYDESIGNPROPERTY(OBJ, PROPNAME, PROPVALUE) ...........................................207

4

CHAPTER 6: FREQUENTLY ASKED QUESTIONS........................................................208

6-1: USING THE ENTER KEY ON A TEXT AREA FOR A NEW LINE............................................2086-2: HOW CAN I MAKE GENIE RUN FASTER? .........................................................................2106-3: CAPTURING A LOG FILE FOR DEBUGGING ......................................................................2116-4: SECURITY AND GENIE.....................................................................................................2136-5: GETTING GENIE TO SEARCH MULTIPLE LIBRARIES FOR CGI PROGRAMS ....................2146-6: EXECUTING SCRIPTS ACROSS MULTIPLE SCREENS.......................................................2176-7: HOW CAN I AUTOMATICALLY SUBMIT A SUBFILE OPTION ON CLICK?...........................2186-8: HOW CAN I EASILY WORK WITH MY IFS FILES? ............................................................2196-9: GENIE DOESNT APPEAR TO BE RUNNING. HOW CAN I START IT?..................................2206-10: PARTIAL DATA FROM FIELDS ON A GENIE SCREEN .....................................................2206-11: USING THE SKINS CSS FILE TO CUSTOMIZE SPECIFIC SCREENS ...............................2216-12: CREATING DYNAMIC SELECT BOXES IN GENIE ...........................................................2216-13: CREATING A DYNAMIC IMAGE .....................................................................................2226-14: DO I NEED RPGSP IN ORDER TO USE GENIE?...............................................................223

5

Chapter 1: Introduction

Welcome to Genie. Genie is Profound Logic Softwares intuitive, non-intrusive, 100% browser-based tool that modernizes and enhances RPG, CL, COBOL, menu, or i5/OS system screens. Genie produces standard HTML with no need for PC Clients, ActiveX Controls, or Applets. This means you can deploy Genie to hundreds of users without installing anything on their machine.

Because Genie runs natively on the System i and does not use costly interactive CPW, you can save on hardware costs and experience fast performance just by deploying your green-screens to an enhanced browser interface. In addition, Genie uses the systems built-in HTTP server, which ensures that your applications are running at the fastest speeds possible. It does not require proprietary Web servers or the IBM Websphere Application Server (WAS).

Genie also offers a powerful Rich Internet Application (RIA) platform with an abundance of graphical elements such as Tab Panels, Field Set Panels, Dynamic Charts, Date Fields with pop-up calendars, and many other advanced Graphical User Interface (GUI) controls that can be implemented without manual programming. Developers can add new functionality to their existing applications with ease. They can also integrate individual screens, entire menus, or complete programs into an existing Web application.

In addition, Genie comes with various prepackaged skins. The skins are comprised of HTML templates to control content for headers and footers, as well as Cascading Style Sheet (CSS) files to control default colors, fonts, sizes, and shapes. Customers can modify theses skins or create their own to include company logos, colors, and templates.

6

Genie is bundled with 2 main browser-based development tools:

The Genie Visual Designer The Genie Administrator

The Genie Visual Designer allows developers to customize their green-screen applications into interactive web applications while removing the limitations of legacy systems. By default, without any developer intervention, Genie automatically translates all of your systems screens to a browser equivalent. Some of your screens may need additional enhancements, in which case the Visual Designer is used to perform tasks such as adding images, database-driven dropdowns, charts, or calendars. The Genie Visual Designer has a simple point-and-click, drag-and-drop interface.

7

Additionally, many settings can be controlled globally using the Genie Administrator. For example, you can stripe alternating rows in all of your subfiles with certain colors, convert all function key labels into buttons, or turn menu options into hyperlinks. Just like the Genie Visual Designer, you access the Genie Administrator through a browser window.

With the Administrator, you can also manage screen enhancement definitions, and promote them from test to production when necessary.

8

1-1: Advantages and Features

100% Browser-Based - Genie is 100% browser-based and produces standard HTML with no need for PC Clients, ActiveX Controls, or Applets. This makes it a very low maintenance product. Your users will never need to install any software. They will access Genie applications using a hyperlink to an Intranet, Extranet, or Internet site. Thus, system updates can occur with complete transparency to the user.

o Cross-Browser - All major browsers are supported, including Internet Explorer, FireFox, Opera, Safari and Chrome.

o Accurate WYSIWYG View - The designer tool produces a completely accurate WYSIWYG (What-You-See-Is-What-You-Get) view of all application screens. Unlike Windows-based tools, the Genie designer runs within the same browser window as the final output, so it can produce accurate results.

o Automatic Screen Discovery - Identifying and modifying application screens is easy with Genie. Screens are automatically discovered by navigating the original application in the browser.

o Integrated Development - All tasks are integrated into one browser session, making it easy to prototype, develop, test, and deploy.

o Dynamic Architecture - Genies browser interface is built to handle modifications in real-time. That means your GUI and backend changes will instantly merge. You never have to recompile, reconvert, or run complicated processes.

Zero Interactive - When Genie web-enables your applications, it completely eliminates interactive CPW. This capability, known as the Genie Accelerator, makes modernization much more affordable. You no longer have to worry about upgrading your systems or buying a more powerful server to modernize. With Genie Accelerator, all your applications will run entirely in batch, eliminating the need for expensive 5250 OLTP and unlocking the full processing power of the system for 5250 applications

System i charting - Genie offers single-series, multi-series, and combination charting capabilities with more than 60 different chart types to visually enhance your applications. You can pick from 2D or 3D Column Charts, Bar Charts, Line Charts, Area Charts, Pie Charts, Doughnut Charts, and more. Your chart data can come directly from a Genie screen or from any other source.

Flexible Integration Capabilities - Genie has a number of unique features that allow you to integrate it with other applications. Using simple scripting techniques, you can single-out specific green-screens and integrate them into other browser applications. Alternatively, Genie gives you the capability to embed other Web applications directly into your green-screen programs. Additionally, Genie can easily integrate with web services and offers a built-in Simple Object Access Protocol (SOAP) client.

9

No Double Maintenance - Genie gives you the capability to seamlessly merge all of your backend changes with existing front-end enhancements. Adding or removing fields from your green-screen applications will not break your graphical interface, and Genie screens will not have to be rebuilt or recompiled after changes. Instead, all backend changes are automatically incorporated into Genie, and you can easily customize any new fields with the designer.

Programming Not Required - Coding is hidden from the user through a visual point-and-click environment. In fact, some customers allow their end-users and non-developer business analysts to prototype and help develop their own interfaces.

Flexibility - Although custom programming is not required to achieve great results, it is fully supported by Genie and can be done using a variety of server-side and client-side languages, such as RPG, PHP, .NET, Java, as well as HTML, CSS, and JavaScript.

Global Enhancements Many global settings can be configured using the Genie Administrator interface. However, global customization capabilities and enhancements are taken even further with Genie's client-side scripting. The scripting capabilities in Genie are incredibly powerful, and you can automate any customization on a global level. You can specify your own rules for subfile and menu detection. You can also integrate online help globally or define custom rules specific to your application. For example, you can define one or more rules such as the following:

o Whenever there is a question mark on the screen, turn it into a button which sends the F4 key to the System i application.

o Whenever an output field containing Y/N is displayed on the screen, find the input field next to it and turn it into a checkbox control.

Many more rule types are possible as well. The Genie scripting language is a superset of JavaScript, which is a scripting language that is widely used for client-side web development. This makes it a very capable and comprehensive high-level language.

Totally Secure - Your modernization efforts with Genie will not jeopardize your system's security. You will be able to secure your applications with SSL and take advantage of all the security provided by the i5/OS. It is a completely native solution and does not require any extra servers. You will be able to securely deploy your applications to the Web. Unlike other solutions, Genie will never expose critical ports such as telnet.

10

1-2: Graphical WYSIWYG Elements

The Genie Visual Designer provides you with codeless point-and-click support for dozens of graphical elements. Below are some of the GUI elements included in the designer:

AJAX Containers - The AJAX container brings in content from other Web applications. It integrates with RPGsp, Java, PHP, .NET, and other Web technologies. The content is typically dynamic and can accept information from the screen as parameters. You can place the container anywhere on the screen, size it in any way, and specify properties to control borders, backgrounds, vertical and horizontal scrolling, etc.

Buttons - You can turn existing screen elements into buttons or add new buttons for new functionality. Buttons can initiate function keys, bring up pop-up dialogs, or execute code (client-side or server-side).

Charts - Genie is packaged with many different types of flash charts, and they are extremely easy to integrate with your applications. Simply pick the chart type and point at the DB2 table on the System i for chart data. Or, if you want to generate chart data on the fly, this can be done in any Web capable language that can produce XML. If you own the RPGsp development environment, this tool provides wizards to automatically generate RPG code to output the required XML for you.

Checkboxes - Any existing application field can be turned into a checkbox. You simply specify which values represent a checked state and an unchecked state.

Date fields with pop-up calendars - Adding a pop-up calendar to any field is very simple and requires no coding. Genie supports many different date formats. Genie can also add calendars to all date fields on a global level.

Field Set Panels - This element offers an easy way to organize screen information into professional-looking panels.

11

Graphic Buttons - Graphic buttons act just like regular buttons, but allow the combination of icons and/or text to be placed within the button.

Grid - A grid can enhance an existing subfile listing with professional looking headings, alternating rows, hover effects, scrollbars, and more. In Genie, the grid component can also tap directly into the underlying database files without custom programming. This allows you to display additional columns of application data, even when that data was not available on the original application screen.

HTML Containers - The HTML container allows you to create your own custom elements using HTML code. The HTML code can be static or dynamic. Dynamic HTML can utilize values from other fields on the screen.

Hyperlinks - Hyperlinks can link to other applications, initiate function keys, submit menu options, bring up dialogs, or execute code.

IFrame - This element acts as a container which makes it possible to embed external (cross-domain) HTML documents within an HTML document.

Images - Image files stored on the System i IFS or on a Web server somewhere else can be displayed using this element. You can display dynamic images just as easily as static ones. For example, you can display a product image based on a product number in your inquiry application.

List Boxes - A list box allows the user to select one or more items from a list. In Genie, the list can be a static list of items or a dynamic list loaded from a DB2 table using an SQL expression.

Output Fields - An output field displays application text on the screen. In Genie, output fields can be styled in many different ways.

Password Fields - Password fields are textboxes that mask the characters that are typed into them. They are similar to non-display input fields on the green-screen.

Radio Buttons - Genie allows you to easily turn existing application elements into radio button groups, so that the user can pick from several different choices. All you have to do is arrange the radio buttons on the screen and relate them together.

12

Select Boxes - The select box allows the user to pick a value from a drop-down list of items. You can provide the items as a static list or as a database-driven dynamic list.

Spinners - A spinner is a textbox control equipped with an up arrow button and a down arrow button. The spin buttons allow the user to scroll through a range of numerical values using a predefined increment.

Tab Panels - Genie's tab panels provide a super-easy way to organize information on a cluttered green-screen. Everything is done in a point-and-click manner. Simply pick some tab names, and then drag and drop the elements onto the various tabs you created.

Text Areas - A text area is a multi-line input control. You can join multiple textboxes on the green-screen into one multi-line field.

Textboxes - The textbox element is a standard input box that accepts free-form text entry or text entry based on auto-complete suggested values from a DB2 database or from a custom list.

13

With each of the elements, you have complete control over the look and feel, as well as functionality. The elements have hundreds of various properties that you can modify, and all of these changes can be made easily using the designers properties panel.

In Genie, most element properties are self-explanatory. You can modify colors, fonts, backgrounds, borders, hover tooltips, and much more. If you are not sure what a property is supposed to do, simply refer to the help text at the bottom of the panel. There you will find a detailed description of each property, as well as some examples of how it is used. The properties panel in the Genie Designer allows you to modify all HTML attributes and CSS styles without any coding. If you have worked with HTML and CSS code in the past, you will immediately appreciate how much effort the Genie Designer saves you.

Genie ensures that you are getting the most out of your system. With Genie, you can go from starting your modernization efforts to having a somewhat modernized system in less than a day. You then have all the tools necessary to take it as far as you need. You are able to reap the benefits of modernization without investing a lot of time, effort, and money into the process.

14

Chapter 2: Installation

Genie consists of three main types of components that work together:

1. Genie library and executable program objects. Genie uses CGI to communicate with the browser. The interface is presented by standard RPGLE programs that output HTML to the browser through the HTTP powered by Apache server.

2. Genie IFS files. Images, templates, and scripts are maintained on the System i IFS file system.

3. HTTP Instance. An HTTP instance configures a set of jobs for handling user requests from the browser. There will be at least one job per session, and additional jobs to handle requests outside the session. The HTTP instance is controlled by a configuration file. This file is typically stored in the /www/ folder on the IFS.

Genie can be installed multiple times; once for each environment you would like to setup. This is the recommended way to separate Production vs. Development environments.

15

To properly install Genie onto your system, first make sure that you are running i5/OS V5R2 or higher, and follow the installation process listed below:

1. Download and run the Genie installer (GenieSetup.exe) from www.profoundlogic.com by selecting Genie under the Products dropdown box and filling out the remaining text boxes and clicking Download.

2. Click Next at the Welcome screen:

http://www.profoundlogic.com/

16

3. Review and check the Accept License Agreement checkbox:

17

4. Next, you are presented with the Genie Install Wizard :a. Enter the IP address or host name of your System i

server.

18

5. Enter your System i user id and password. To accept default settings, click Install. Otherwise, see Customized Installation on page 23 to review information about custom settings.

19

6. Genie will now be installed to your System i server via FTP. Once the server is set up Next will be highlighted for you to click:

20

7. Finish installation and launch Genie in your default browser by clicking Finish:

21

8. Genie is a browser-based solution, so it will launch in your default browser, such as Internet Explorer or Mozilla Firefox.

9. The first time you launch the product, you will be redirected to the Profound Logic website to activate your copy. The web page will ask you to confirm your System i information. After confirmation, your activation key will be emailed to you. Enter this information into your server with your terminal emulation software.

10. Once your copy of Genie is activated, you can launch it by typing in your Genie URL (typically, the URL is http://SystemiHostName:460/genie/genie.pgm). For your convenience, the installer creates a desktop icon for launching Genie in your browser:

11. Genie automatically starts a session, and presents your systems sign-on screen in the browser. Enter your username and password and click Login

http://systemihostname:460/genie/genie.pgm

22

12. Your systems menus and programs will be available in the browser. They will look and feel familiar to current green screen users, but will be enhanced with HTML, JavaScript and CSS:

23

2-1: Customized Installation

There are several components that can be customized for an advanced installation of Genie. For instance:

You may wish to install a Genie upgrade, but not replace certain configuration files.

You can set up separate environments for development, testing or production.

To make your customizations, click Customize within the Installation Settings section of the Install Wizard:

24

The Genie Installation Settings screen will appear:

Each setting is individually explained below:

1. Select the components you want to install. You will typically select all:

Explain a scenario in which you may deselect each.

25

2. Server Settings

Genie Library Name: Name for the Genie Library on your server. The default name is GENIE.

IFS Folder Name: Name of the IFS folder to be used by Genie; typed as: /name/.Default is /genie/. If installing multiple environments, a unique name will need to be chosen for each environment.

Instance Name: Apache server instance name. The default name is GENIE. If installing multiple environments, a unique name will need to be chosen for each environment.

Port Number: HTTP Port number used for Genie. The default HTTP port is 460. If you plan to use Genie for public Internet access, you may wish to use the standard HTTP port 80, or the default SSL HTTPS port 443. If installing multiple environments, a unique port will need to be chosen for each. Also, this port number must not be used by any other web services or environments on the System i.

HTTP Directory Name: Name for the HTTP directory for Genie. It signifies the portion of the Genie URL that follows the port number.

Host Code Page: This defines the country code language and character set configuration of the host system. The host code page typically should be set similarly to the host code page setting in your standard 5250 emulator. System Default will use your default server setting.

26

2-2: User Installation

One of the major benefits of Genie is that it is 100% browser-based. You do not have to install anything on the client PC for end users to access your now modernized applications. You may want to create a desktop shortcut or bookmark for them. You can also link to the URL from an existing Intranet application or website.

The format is:

http://ip address of Server i:PortNumber/Genie HTTP Directory Name/genie.pgm

Example:http://192.168.1.9:80/genie/genie.pgm

http://192.168.1.9/genie/genie.pgm

27

Chapter 3: Getting Started

Before you start Genie, we strongly recommend that you create a new Genie skin. The easiest way to do this is to copy and rename an existing skin. If you use one of the default skins, you risk losing your customizations on a future product update.

3-1: Create a New Skin

To create a new skin, start the Genie Administrator. Enter the following URL into your browser http://SystemiHostName:460/genie/admin.pgm.

Select Gradient Skin from the menu, then click the Copy Skin button.

http://systemihostname:460/genie/admin.pgm

28

You will be asked for a Skin name. Enter your company name

Click on the Global Menu and then select your newly created Skin

29

Save the configuration and then click the Launch Genie button to launch Genie using your skin.

The Genie version of your 5250 login screen will appear in your browser. You can see that it has been considerably modified from the layout that you will be familiar with.

Note: Take note of the Genie URL. It should be in the format of http://SystemiHostName:460/genie/genie.pgm. Please bookmark this page in your browser so you can easily launch Genie at a later date.

http://systemihostname:460/genie/genie.pgm

30

The 5250 login screen.

On this page, there is also the Design Toolbar. This toolbar launches the Genie Designer which allows your application to be modernized page by page. You are able to move the toolbar anywhere on the screen simply by clicking and dragging the blue title bar.

31

3-2: Genie Designer

Out of the box, Genie will modernize your application instantly by recognizing menus and turning options into hyperlinks, outlining and color striping subfiles, changing function key labels to clickable buttons, adding a clickable calendar to date fields, plus many more default settings. Below is a WRKACTJOB screen. You can see the subfile striping, function key buttons, and the Up/Down buttons.

However, this is just a small fraction of what Genie can do to enhance your applications. Many additional enhancements can be added using the Genie Designer tool.

32

The Genie Designer can be turned on by clicking the button on the Design Toolbar.

No Design Toolbar? Start the Genie Administrator and enable the designer in the Global configuration Settings. Use http://SystemiHostName:460/genie/admin.pgm. See the Genie Administrator section for more information.

In design mode, a properties window will also appear. This window can also be moved around the page by clicking and dragging the blue title bar.

http://systemihostname:460/genie/admin.pgm

33

The Designer allows you to customize the modernization of each individual screen. This can include enhancements such as

changing subfile options to checkboxes, adding a chart or an image adding a dropdown box to replace an input field re-arranging any or all items on a screen to take advantage of the larger

workspace of a browser window converting a crowded menu to one where menu options are clickable and

grouped onto separate tabs

This process occurs in two steps:

1. Recognize a screen by a unique identifier(s)

2. Perform all of the designer customizations for that screen on the fly.

Setting up a Unique Identifier

The first step to customizing a screen is to select one or more items that are unique to a particular screen and give the screen a unique name.

1. Start Genie, sign in and navigate to the screen that is to be enhanced.

2. Turn on the Designer. (Click the Design Mode is Off button on the Design Toolbar)

3. Right-click on a heading or some other element of the screen that is unique to that screen. Select Mark as Identifier. This will name the screen (in the example below, the name will be PMNT01R) and assign this heading as a unique identifier.

Note: Multiple identifiers can be used on a screen. You can mark them individually, or use your mouse to select multiple fields to mark them all at once.

34

4. Now, perform a small customization by clicking on any field and moving it to a different location.

5. Click the Save button on the Design Toolbar. Then, turn off the Designer by clicking the Design Mode is On button.

6. Your customization is complete. Every time you navigate to this screen the unique id will be recognized and the field move applied. It is now possible to apply more sophisticated enhancements to this screen. See Working with Genie for more information and examples on how this can be done.

35

Sample Customizations

Lets have a look at some customization examples. Below is a sample 5250 subfile application and the out of the box Genie version of the same screen.

36

First turn design mode on by clicking the button, then right clicking the Product Number label, and selecting Mark as Identifier.

37

On each subfile row, there is a text box where the user can enter either 2 or 5 to Change or View the record. Lets change this text box to a select box (drop down). Drag the mouse across all textboxes. This will select them all at one time.

38

In the properties box, change the field type from textbox to select box.

39

Under the Selection Settings, change the choices and choice values properties as shown.

Note: It is also possible to load the select box options from a database file. See the Working with Genie chapter for more information.

Click on the Edit Choices button.

40

On the Edit choices Dialog, enter the two choices, re-arrange the order with the Move Up Move/down buttons and click OK.

Notice that there is a blank entry above Change. This will set the first (and default) entry in the dropdown box to blank.

41

The choice will be entered into the properties box as a coma separated list. Notice how the first blank entry is stored with a leading coma.

Repeat the process to enter the choice values.

42

Now scroll down to the event properties select pressKey(Enter) for the onchange property.

43

Now that the user can select the options, they no longer need to know that 2 will change and 5 will display a record, so we can hide these labels.

Select both labels, right-click and select Hide.

44

Click the Save button and turn design mode off to see the results. There is now a select box on each row. As soon as you select one of the options (Change or Display), Genie will effectively place a 2 or 5 in the original text box beside the row and press the Enter key.

45

Customizing Text

By selecting any text on the screen, you can change any of the font style properties. These include font color, family (Arial, Times New Roman etc), size, weight (bold) and alignment.

46

Adding a New Element to a Screen

A new element can be added to a screen by clicking the Add Element button on the Design Toolbar. Each of these will be explained in detail in a later chapter. For now, lets add a button to our screen.

A new button will appear near the top of the page. Drag the button to where you want it to appear on your screen.

47

In the properties window, change the value property of the button from Click Here to Hello World.

Scroll down to the bottom of the properties window to the Event properties and enter alert("Hello World") into the onclick event property.

48

Save the configuration and turn off design mode. When you click the button, an alert box will pop up.

49

JavaScriptGenie relies on the JavaScript environment of your browser. Any designer customizations that are made to a screen are placed in the System i IFS file system using the JavaScript Object Notation (JSON) format. You can also define various customizations by directly using the JavaScript language and the JavaScript set of libraries included with Genie.

Custom JavaScript code is typically placed in the custom.js file. Below is an example of how the Genie folder structure would normally be viewed in the Websphere Development Studio Client (WDSc) or Rational Developer for i (RDi) environment. You can also use Profound Logics RPGsp IDE, which provides the capability to work and edit IFS files directly. Alternatively, you can edit the files with any PC editor through a mapped network drive to your IFS file system. (Refer to 3-6: Mapping a Network Driveon how to map the drive)

Within the main genie folder, you will find a subfolder named Skins. Within the Skins folder, there is a subfolder for each Genie skin. We have been using the My Company Skin in our examples, so the custom.js we are looking for is inside the My Company Skin subfolder.

50

Inside custom.js, past the end of any other existing code, insert a small function as shown below. Then save the file.

Note: JavaScript is case sensitive. Note the case of the doMyClick() function. The convention is to use a descriptive name for all objects or functions. If the name is made up of more than one word, you should capitalize the first letter of all words except the first.

Change the buttons onclick property to doMyClick() as shown below. Save and turn off design mode. When you click the button, the doMyClick() function will run and display the alert box.

Note: Whenever you edit and save a JavaScript file, you may need to refresh your browser so it picks up the latest version of the file.

If you get an error message similar to this, use the browser' refresh button. or . (On rare occasions you may have to close down your sessions and open a new browser window.)

51

Now that you have a function running with a button click, you have the power of JavaScript in your hand. The function can be modified to perform a more realistic task. For example, the function below will change the 6th select boxes on the page to Display, reveal a chart (previously added but hidden) and then hide the button that actually fired the function.

The value of the button has been changed to View Chart.

52

When the button is clicked.

53

3-3: Genie Administrator

In addition to the Designer which operates inside the Genie Window, there is also a separate interface called the Genie Administrator, which allows global design and configuration changes.

To start the Genie Administrator, enter the following URL into your browser http://SystemiHostName:460/genie/admin.pgm.

The Administrator page consists of a menu on the left and multiple options in three tabs on the remainder of the page. These options change slightly depending on which menu item is chosen (Global configuration or a particular skin configuration). Skin configurations will override global configurations.

Global and Skin Configuration Settings

Configurations are grouped into three tabs called General Settings, Subfile Settingsand Rendering Settings.

An important General Setting is the Enable Designer select box. The designer is enabled by default but should be disabled for test and production environments. You can also use the Administrator to change the default skin.

http://systemihostname:460/genie/admin.pgm

54

The Copy Skin and Delete Skin buttons allow you to maintain your skins. A good skin to copy for customizing is the Gradient skin. It is here that you can add your company logo or change the color scheme or layout. For more information, see 3-5: Genie Skins.

Any changes made must be saved with the Save Configuration button. There is also a convenient genie Launch button so you can see the effect of your changes.

55

3-4: HTTP configuration

Starting and Stopping GenieNormally the Genie web instance will be started during the installation process. If you find that Genie does not work or you get a Failed to Connect message in your browser, it may be that the Genie instance is not running

One way to verify if Genie is running is to look for the web server jobs. To see all the web server jobs, use the command:WRKACTJOB SBS(QHTTPSVR)

The Genie jobs are usually named GENIE.

The start and stop commands for the web server instance named GENIE are:STRTCPSVR SERVER(*HTTP) HTTPSVR(GENIE)ENDTCPSVR SERVER(*HTTP) HTTPSVR(GENIE)

If you have multiple installations of Genie (eg GenieDev, GenieTest or GenieProd) , the instance names and job names will vary accordingly.

56

3-5: Genie Skins

What is a Skin?A Genie skin is a collection of HTML, JavaScript and style sheet files which control how all 5250 screens are displayed. Each skin is comprised of:

Header HTML file (header.html)

Footer HTML file (footer.html)

Style Sheet (.css e.g. gradient.css)

These files are located on the IFS in /skins/. In most installations, the Gradient Skin files are located in /genie/skins/gradient/

The header is a static HTML file that can be used to design the page header of all screens. This can include a company logo, text, and color schemes. Likewise, the footer can be used to add a common footer to all pages. This can include a terms of use link or a privacy policy.

The css file contains styling for all components on a page. This can include such things as color, size, location, alignment and font style plus much more. It also determines how each 5250 display attribute will be rendered by Genie.

Customizing a SkinI most cases a new skin will be created by copying a default skin provided with Genie (see 3-5: Genie Skins), so you will start with a working skin from which you can modify. Changes to a skin will affect all screens running under that skin. Some knowledge of HTML and css is required for customization but this is the only time Genie requires knowledge of these languages. In most cases, minor changes to a skin copied from a default skin can be successfully completed by personnel with a basic understanding of these technologies. Profound Logic Software can provide these services if required.

3-6: Mapping a Network Drive

It may be useful to map a network drive to your IFS for so you can easily access the file system

57

On the server: Connect to your system using System i Navigator In the navigation tree, select Network, then Servers, then TCP/IP Find System i Netserver and ensure that it is started. If not started, right-click

and select Start. Now, select File Systems in the navigation tree. Then select Integrated Files

System, and then Root. Right-click the root or a particular folder under the root and select Share -> New Share.

In the resulting dialog, provide a share name.

58

On your personal computer: In Windows, open My Computer. From the Tools menu, select Map Network

Drive. Select an unused drive and under the Folder field, specify: \\SystemiIPorHostName\ShareName If you have a different windows user name to your System i sign on Id, you may

need to click connect using a different user name. Check the Reconnect at Login box and click Ok.

\\SystemiIPorHostName\ShareName

59

Chapter 4: Working With Genie

4-1: Buttons

Buttons can initiate function keys, bring pop-up dialogs, or execute code (client-side or server-side).

Creating a New Button

A new Button can be created by clicking the Add Element button on the Design Toolbar and selecting Button from the list. Make sure Design Mode is On in order to add the Button.

A new button will be created with the default text Click Here

The text (value) of the button could be changed using the Properties Panel.

60

Changing the Text on a Button

In the value field property, add the text Exit. Your changes should appear instantly.

Changing the Font Color on a Button

You can also change the color of the text displayed on the button. In the color property, select the color you like from the color picker that appears and see your changes take effect instantly.

61

Changing a Button to a Graphic Button

The Button element can be changed to a Graphic Button in which the combination of icons and/or text can be placed within the button.

Select the button and then choose graphic button from the field type property in the Properties Panel.

62

Now you are ready to add an icon/image to the button.

You can select one of the icons provided with your default Genie installation. The example in this figure selects a cancel image to the Exit button as shown below.

In addition to the icons that come with your default Genie Installation, you can select a different icon provided that you type in the proper path of the image or icon to use.

To select a different image source, select Other in the image source dropdown list of the Properties Panel, and type in the source of the image to display on the button. The source of the image should be a valid relative or absolute http path to the image. The image could be stored on the IBM i IFS or on another system.

63

Handling Click Events

All of the browsers native events are supported in Genie and can be accessed through the Properties Panel by selecting the element and finding the Events tree. The onclick event is a native JavaScript event that fires when an object is clicked.

You can initiate a client-side script once the button is clicked to do something interesting around the interface. For instance, you may need an alert box to pop-up when a user clicks on the Exit button saying Good Bye.

In this case, the alert function is an event handler that fires once the button is clicked. Thus, when you click on the Exit button, you should see this pop-up window:

Moreover, you may want to have a confirmation pop-up box when the user clicks the Exit button. You may want to display a message like Are you sure you want to Exit?

64

In this case, a little bit of JavaScript code can do the trick. Inside custom.js, past the end of any other existing code, insert a small function (confirmLogOut()) as shown below. Then save the file.

Refer to the Getting Started sections for more information on custom.js.

In the onclick property, type in the name of the custom function.

Here, we are calling confirmLogOut() once the Exit button is clicked. As shown in the code, if the user clicks OK (result = = true), a function key is initiated to quit the application. Otherwise, the pop-up window is closed and no action is taken.

Note: Quit is a special value passed to the pressKey() api to disconnect the user from the session. Similarly, a keyboard function key, such as F3 can be used.

65

This is the confirmation box that should appear when the user clicks on the Exit button.

66

4-2: Graphic Button

Graphic buttons act just like regular buttons, but allow the combination of icons and/or text to be placed within the button. All the regular Buttons properties are also available for the Graphic Button in addition to adding an image or icon to display on the button.

Creating a New Graphic Button

A new Graphic Button can be created by clicking the Add Element button on the Design Toolbar and selecting Graphic Button from the list. Make sure Design Mode is On in order to add the Graphic Button.

Please refer to the Button section for other properties and scripting examples.

67

4-3: Charts

Genie is packaged with many different types of flash charts, and they are extremely easy to integrate with your applications. Simply pick the chart type and point at any DB2 table on the IBM i for chart data. Alternatively, if you want to generate chart data on the fly, this can be done in any Web capable language that can produce XML. Languages such as RPG, PHP, and Java may be used. For RPG developers, Profound Logics RPGsp Development Environment provides comprehensive wizards for creating RPG programs that generate the appropriate XML on-the-fly.

Additionally, you can generate charts from data displayed on the screen rather than using data from a database table.

Shown below is a Display System Status screen in which the data displayed on the screen is used to generate a pie chart for System Storage.

68

Creating a New Chart

A new Chart can be created by clicking the Add Element button on the Design Toolbar and selecting Chart from the list. Make sure Design Mode is On in order to add the Chart.

A new resizable chart placeholder will be created with the text Chart will appear here. However, nothing will be displayed until the chart settings and data source are provided and the screen is saved.

69

Chart Settings

Select the chart placeholder created in the previous step. In the Chart Settings section of the Chart Properties Window, select the chart type. The chart type selected maps to a .swf flash file in the iChart folder on your IFS. The files in this folder identify the type of chart to display.

You can also control the chart overlay from the Chart Settings expander. When the chart overlay is set to true, the Chart panel will overlay any other content on the screen, regardless of z-index settings. When set to false, the Chart panel will behave according to normal layering rules, based on z-index. The default value is true.

The next step is to identify the data source of the chart. The data could be provided through three different methods:

(1) Chart Data From Screen(2) Database-Driven Chart Data. (3) Dynamic Chart Data.

In the next sections, we will demonstrate each one of the data sources for the Chart.

70

Chart Data from Screen

In this section, we will chart the data from the screen through the help of the designer.

This could actually be accomplished in three different ways:

(1) Manual data entry through the Chart Properties Window.(2) Manual data entry of element names/IDs on the screen to chart.(3) JavaScript expression that generates comma separated data.

Chart Properties Window Data Entry:

Step 1:

You can manually enter the names by which the chart values will be represented using the names property separated by commas.

71

Alternatively, you can add the names through the Edit Names dialog. Type in the name in the textbox and press the Add button (highlighted in red).

Click the OK button and proceed to add the corresponding values.

Step 2:

You can also manually enter the values corresponding to the names entered in the previous step through the values field separated by commas.

72

Alternatively, you can add the values through the Edit Values dialog, as shown below:

Step 3:

Right-click on the screen to get the main context menu and then select the Save and Exit Design.

You should be able to see the chart generated from the data created in the previous steps.

73

Chart Properties Using data from screen elements:

Step 1:

Instead of entering hard-coded names, you can also enter IDs, which represent elements that contain the appropriate names.

Step 2:

Similarly, you can enter the IDs of the elements that contain the chart values field separated by commas. The values property specifies a list of numerical values used to build the chart or a list of screen element IDs from which the values could be retrieved.

Note: You can combine manually entered names and values along with element IDs in the names or values fields in the Charts Properties Dialog.

74

Step 3:

Right-click on the screen to get the main context menu and then select the Save and Exit Design.

In this example, we are charting the Billing History data displayed on the Billing History screen. The Date is displayed on the X-Axis, while the Balance is displayed as the value criteria for the chart, or the Y-Axis.

You should see the chart generated from the data on the screen as shown below:

75

Chart Properties Using JavaScript expressions to generate chart data

You can use JavaScript to populate your chart. This allows you to retrieve screen data as well perform various calculations on that data. In the example below, we will build a 3D Pie Chart on the Display System Status (DSPSYSSTS) screen. This chart will display the total system storage available versus the storage in use.

Step 1:

Select Pie3D in the chart type property and then manually enter: Storage Available, Storage Used in the names property as shown below:

76

Step 2:

Type in the following expression in the values property:

js: (100 - parseFloat(get("D_6_64"))) + "," + parseFloat(get("D_6_64"))

The expression must return a comma separated list of values. In this pie chart, there are only two pie pieces. Once evaluated, the above expression will produce the following result: 36.89, 63.11.

Note: D_6_64 is the ID of the output field that contains the system storage used (63.11%). parseFloat() is a native JavaScript function that parses a string and returns a floating point number. In our case, it will parse 63.11% and return 63.11 as a value rather than string with the percent sign.

Step 3:

Right-click on the screen to get the main context menu and then select the Save and Exit Design.

77

You should see something like this screen when youre done.

78

Database-driven Charts

In this section, we will chart the data using a database file. In the illustration below, we are using an item master file named ITM001P for the database file property. The file name can be qualified with a library; however, if the library is omitted, the sessions library list will be used to find the database file.

Next, you must specify the name field property, which will be used to determine the names by which records would be represented in the chart. You can type the field name or choose it from a dialog. Click on the button circled in green to display the database fields dialog for the database file you specified.

Note: Make sure that the library in which the database file exists is included within your sessions library list. If the library does not exist, you will get a message that looks like this:

79

Otherwise, you will get a dialog with the available database field names to pick from. We will select the Description from the field list:

Perform the same steps to select the appropriate value field. This time, we will select the Quantity Available to be displayed as the value.

80

Once we save design and exit, the following chart appears:

You can also provide different summary options for your chart. The summary option determines how values are used when creating the chart.

81

Here is a list of the different summary options that could be used:

none: No summarization will be done. When no summary option is selected, none is assumed.

average: Finds the average dependent value corresponding to each name field value.

count: Counts the number of duplicate name field values within your data (ignores the value field).

sum: Shows the sum of the dependent values for each name field value.

maximum: Compares maximum dependent values among name field values.

minimum: Compares minimum dependent values among name field values.

82

Dynamic Chart via URL

In Genie, charts can also be populated using an external program. This program or web service can be written in any web capable language and hosted on either the IBM i or on any other platform.

Since the chart expects XML as its data source, the program or web service needs to send the data to the chart in that format. This can be accomplished by calling the program that generates the XML data from within Genie through a URL.

From the properties dialog window, find the charts URL property and type in the URL of the program that you wish to call to send the XML data as shown in the screenshot below:

The chart URL property sets the URL to a program or web service that returns the chart definition and data in XML format. The definition of the chart includes the chart type, width, height, caption, sub-caption, x-axis caption, y-axis caption, etc.

Note: If a charts URL is used, the database file, name field, value field, summary option, and record limit properties are all ignored.

Here is a sample of the XML data that is sent to the chart through the program/web service to build and populate the chart.

83

4-4: Checkbox

Checkboxes are typical in modern web applications to permit the user to activate or deactivate a number of options. In Genie, any existing application field can be turned into a checkbox. You simply specify which values represent a checked state and an unchecked state.

Creating a New Checkbox

A new Checkbox can be created by clicking the Add Element button on the Design Toolbar and selecting Checkbox from the list. Make sure Design Mode is On in order to add the Checkbox.

A new checkbox will be created as shown above. You can change the label, which is the caption text that is associated with the checkbox to something meaningful. See Below.

Like all other controls in Genie, you can also control other properties like the color and the font style of the checkbox label through the Properties Dialog.

84

Change a Textbox to a Checkbox

It is typical in green-screen applications to see input fields holding either a Y or an N (or sometimes a 1 or a 0) for Yes/No values. However, this is neither intuitive nor web friendly. Below is an example of a product maintenance application that includes an input field where the user is required to enter Y or N to indicate whether an item is on special pricing.

Now, here is the same application after it has been web-enabled. Some customizations will be required to make the interface more intuitive.

In a web application, this input field would typically be replaced by a checkbox.

85

Right-click on the input field right next to the Special? label and select Change to Checkbox as shown below.

Next, we need to set the checked value property which specifies the value to send to the application when the checkbox is checked. Select the checkbox and in the checked value property, type in Y.

You can also control the unchecked value property in the same manner by placing an N inside of it.

86

Now here is the final output of the application.

87

Executing subfile options with a checkbox

The example below demonstrates changing subfile option textboxes to checkboxes. Since a checkbox can only hold one value, this is best suited for a subfile where you can predetermine a default option. For example, in the following screen, 5=Display can be our default option.

The first thing you will need to do is switch to design mode and drag a selection around all of the text boxes in the option column. Once you have all of the text boxes selected, you will want to change the field type property to checkbox.

88

Next, set the checked value property. This should be the option you wish to execute or specify to send to the application when the checkbox is checked. In this example, we want a product to be displayed when we check the box (option 5).

You can also assign an onclick event to the checkboxes. For example, to automatically send the Enter key when a checkbox is clicked, use pressKey(Enter). This tells the application that you wish to go to the next screen, just as if you were to type in an option and press the enter key.

Your last step is to save your screen and turn off design mode. You should then have a screen that performs an option when you check the box next to the row you wish to display.

89

4-5: Ajax Container

The AJAX container brings in content from other Web applications. It integrates with RPGsp (Profound Logics Rapid Web Development Environment for the IBM i), Java, PHP, .NET, and other Web technologies or platforms. The content is typically dynamic and can accept information from the screen as parameters. You can place the container anywhere on the screen, size it in any way, and specify properties to control borders, backgrounds, vertical and horizontal scrolling, etc.

Creating a New Ajax Container

A new Ajax Container can be created by clicking the Add Element button on the Design Toolbar and selecting Ajax Container from the list. Make sure Design Mode is On in order to add the Ajax Container.

90

Scrolling Properties

You can allow horizontal and vertical scrolling in an Ajax Container. To accomplish this, select the Ajax Container and from the Properties Dialog, find the properties: overflow x and overflow y

Overflow x: Determines whether a horizontal scrollbar is displayed for this element.

Overflow y: Determines whether a vertical scrollbar is displayed for this element.

Valid Options:

Visible: Lets the content flow beyond the dimensions of the element without a scrollbar.

Hidden: Does not display a scrollbar and hides overflowing content.

Scroll: Always displays the scrollbar.

Auto: Displays the scrollbar only when the element's content goes beyond the elements dimensions.

Note: auto is the default option.

91

Background Colors and Borders

You can define a background color for the Ajax Container or you may choose to add a background image. Furthermore, you can define border colors and border styles for each border of the Ajax Container.

To define a background color for the Ajax Container, find the background color property as shown below. Then select a color from the color palette.

The Ajax Container should look something like the screenshot below (depending on which color you pick):

92

To define border styles, select the Ajax Container and then from the Properties Dialog, find the border bottom style property as shown below. Select the dashed option from the select box as shown below.

Repeat the previous step for: border top style, border left style, border right style. Here is the dash-bordered Ajax Container.

93

Passing Parameters to the URL

You can set the ajax url property to the dynamic program from which the data is going to be retrieved. Additionally, you can pass parameters to this url or program to retrieve a subset of data.

In this example, we are calling the getData.pgm program and passing a customer number to get information about a specific customer. The customer number is grabbed from the screen using the get() api and is passed as a parameter on the url. The id of the screens customer number field must be provided to the get() api.

Make sure Design Mode is On. Select the Ajax Container and in the ajax url property, type in the url (full path) along with the parameter from the screen as shown below:

js: /genie/getData.pgm?custid= + get(I_5_6);

The expression above will initiate an AJAX request to getData.pgm from which the response will be generated and sent back to the browser to be placed in the container. The prefix js: indicates that the url is a dynamic property built with a JavaScript expression.

94

After saving your work and exiting Design Mode, you should see the appropriate content included in the Ajax Container component on your screen.

Note: Make sure the proper path (url) to the program is provided. If an incorrect url is provided, you will get a 404 File Not Found HTTP error message in a pop-up dialog box. See below.

95

Ajax Container Vs. HTML Container

There are some differences between an Ajax Container and the HTML Container. Below is a list of the key differences:

(1) The Ajax Container is designed to bring dynamic content or data to the screen via a url property. The HTML Container allows you to create your own custom elements using HTML code. The HTML code can be static or dynamic. Dynamic HTML can utilize values from other fields on the screen.

(2) Because an Ajax Container can retrieve information or dynamic content through a url property, it is very flexible in terms of integration. It integrates with languages such as RPG, Java, and PHP. An HTML Container does not have a url property. Thus, it cannot integrate with any back-end technology or language since it is only meant to display front-end HTML content and controls.

For more information about HTML Containers, click here.

Note: By default, Ajax Containers do not work across multiple domains. This means that the ajax url property can only provide programs within the same domain where Genie is installed. However, with the use of some Apache HTTP configuration directives, Ajax Containers can be enabled to access a specific set of other domains. Please refer to the HTTP Configuration section.

96

4-6: IFrame

The IFrame (inline frame) is an element used to include external HTML documents and Web applications within Genie. When an IFrame is present on a Genie page, that page will load another Web page within the IFrame component.

Creating a New IFrame

A new IFrame can be created by clicking the Add Element button on the Design Toolbar and selecting IFrame from the list.

97

Setting the URL property

Next, set the iframe url property of the IFrame to load any external web page or application into the existing screen.

For example, type in http://www.google.com as shown in the figure below.

98

Additionally, you can control whether the IFrame should have a border. In this example, we want to make it explicit that this is an external page. Thus, we set the frame border property to true (circled in green). Save your changes and exit the designer to see the changes.

You have now embedded Googles homepage into your existing screen. You are ready to search the web without leaving your current screen.

99

Passing Parameters to a URL UPS Tracking Example

Here is a real time example of a product maintenance application that passes a tracking number to the United Parcel Service of America (UPS) web site. In this example, we are loading the UPS website into an IFrame on a product maintenance screen in Genie. We are also passing a tracking number from our product maintenance application to the UPS website to track the shipment.

100

Lets explore what it takes to grab data from the screen and pass it to a website such as ups.com. First, make sure Design Mode is On.

Select the IFrame on the screen and in the iframe url property, type in the following:

js: "http://www.ups.com/tracking/tracking.html?trackNums=" + get("I_6_20")

Note: The keywords script and js allow you to concatenate strings and evaluate values using a JavaScript expression. In this case, the expression concatenates the ups tracking url with the evaluated value from the screen element with the ID I_6_20, which holds the tracking number for our shipment.

101

The get() api will retrieve the value from an element on the screen in real time. If the element is a textbox, the api will return the value entered in the textbox. If the element is an output field, it will return the value (or text) inside the output field. More information about the get() api could be found under Genie API Client Side Scripting.

To see the IFrame in action, right-click on the screen to get the main context menu and then select Save and Exit Design.

IFrame Vs. Ajax Container

There are a number of differences between an IFrame and an Ajax Container. Below is a list of the key differences:

(1) The IFrame component is an element that embeds entire web pages or web applications into other HTML content. The Ajax Container is designed to bring dynamic data or a subset of HTML content into the screen, rather than full applications or web sites.

(2) An IFrame cannot easily access information within other elements on the screen where the IFrame is placed. Although, some of the information on the screen can be passed to the IFrame as a parameter on the url, it cannot fully interact with the data and elements via scripting. An Ajax Container, however, has access to all of the screen data and elements that exist on the screen through the use of JavaScript.

(3) The IFrame component works across domains, while the Ajax Container is, by default, limited to the current domain.

For more information about Ajax Containers, click here.

102

4- 7: Text Area

A text area is a multi-line input control. You can create a text area from the designer toolbar or join multiple textboxes on the green-screen into one multi-line text area.

Scrolling Properties

You can allow horizontal and vertical scrolling in a multi-line text area. To accomplish this, make sure Design Mode is On. Then select the text area and from the Properties Dialog, find the properties: overflow x and overflow y.

Overflow x: Determines whether a horizontal scrollbar is displayed for this element.

Overflow y: Determines whether a vertical scrollbar is displayed for this element.

Valid Options:

Visible: Lets the content flow beyond the dimensions of the element without a scrollbar.

Hidden: Does not display a scrollbar and hides overflowing content.

Scroll: Always displays the scrollbar.

Auto: Displays the scrollbar only when the element's content goes beyond the elements dimensions.

Note: auto is the default option.

103

Combining multiple Textboxes into a Text Area

You can also join multiple textboxes from the original green-screen application into one multi-line text area. To do this, make sure Design Mode is On. Then, select the textboxes that you would like to combine.

To select multiple elements on the screen, you can either:(1) Hold down your Ctrl key and click on the elements.

(2) Use the rubber band by clicking on a blank area of the screen and dragging the mouse around the elements as shown below.

Next, right-click on one of the selected textboxes to get to the following context menu:

Select the option Combine into Text Area. The textboxes you selected will be combined into one resizable text area as shown below:

104

Note: The text area is created by associating a group of textboxes together. This is managed through the related field property of a text area. This property can associate a text area with a group of textboxes by specifying a comma separated list of textbox IDs as shown below:

Note: A text area created from combined textboxes maintains the same number of maximum lines as the number of textboxes used. In addition, each lines maximum length will be equivalent to the maximum length of the corresponding textbox. In our case, the text area will maintain 4 lines for the 4 textboxes that we selected before. The user will not be able to enter any text beyond the 4th line.

105

Handling Events

As with all elements in Genie, you can initiate client-side scripts on text areas, such as a script to clear the content of a text area using JavaScript. In this example, we will assume that a clear button already exists on the screen. For more information about buttons, click here.

We can add an onclick event to the button that clears the content of a text area on the screen. The onclick event is a native JavaScript event that fires when an object is clicked.

Select the clear button. In the properties dialog, find the onclick event and type in the following:

getObj(TextArea1).value = ;

In this case, we are setting the value of the text area to an empty string (blank).

Note: TextArea1 is the ID of the text area. To find the ID of any element, simply select the element in the designer and its ID will appear in the title of the Properties Window.

Note: getObj() is a Genie api that retrieves an element by its ID. It is equivalent to using JavaScripts document.getElementById() function. For more information on JavaScript apis in Genie, see the Genie API Client Side Scripting.

106

4-8: Spinner

A spinner is a textbox control equipped with an up and down arrow buttons known as spin buttons. The spin buttons allow the user to scroll through a range of numerical values using a predefined increment.

Creating a New Spinner

A new Spinner can be created by clicking the Add Element button on the Design Toolbar and selecting Spinner from the list.

A new Spinner element should be displayed on the screen as shown below.

107

Spinner Field Settings Properties

Since the Spinner field allows the user to scroll through a range of numerical values using a predefined increment, users have access to the following properties:

min value: Defines the minimum value for a spinner field.

max value: Defines the maximum value for a spinner field.

increment value: Specifies how much the value in a spinner field increases or decreases when you click the up or down arrow. The default value is 1.

108

Changing a Textbox to a Spinner

An existing Textbox can be changed into a Spinner field in Genie. In the example below, we will change the Height Textbox into a Spinner field where we can edit the Height field into Feet and Inches in increments of 1.

In Design Mode, we will right-click on the Height Textbox and select the Change to Spinner option as shown below.

109

In the Properties Dialog, we will find the min and max value properties and type in 3 as the min value and 9 as the max value for Height in Feet.

Additionally, we will repeat the previous step with the adjacent textbox for Height in Inches to change it to a Spinner element. We will add 0 as the min value and 12 as the max value for Height in Inches.

After you save your changes, the screen will look like the screenshot below.

110

4-9: Image

The image element creates a placeholder in your web page to contain a graphic file (.gif, .jpg, .png, etc.) from your IFS, database or elsewhere on the web into a web page. The image source (path and name) is required, and can be input as a static value or a dynamically scripted value.

Adding a static image

Select Add Element -> Image from the design toolbar.

Position the image by dragging it with the mouse or arrow keys. You can also input the left and top measurements into the Position section of the image properties window.

111

In the image properties window, under the Field Settings section, enter the path and name of the image (either static: http://mysite...etc or relative to Genie on the server: /images/myimage.gifetc).

http://mysite...etc/

112

Adding a dynamic image

To add a dynamic image with Genie Designer, simply add the new image element from the design toolbar as above.

Select your image element, and look at the properties window.

Select Other to enter your script. The image source property might be entered like this:script: '/images/' + get('element ID') + '.gif'

(where /images/ is the IFS directory containing your images and element ID is the on-screen element containing the name of the image.)

113

Adjusting Image Size and Borders

To adjust these image parameters, simply use the Image Properties window.

114

4-10: Output Field

By default, everything output by Genie will appear as output fields.

An output field element is a container for text or objects returned from JavaScript or a program.

Font colors, borders, labels.

Adding a Heading

If you need to add a heading label to a program, section, column or anything else on a screen, an output field is the ideal candidate.

Select Add Element -> Output Field from the design toolbar.

115

Then, you can simply edit the value in the Output Field Properties window to display whatever text you like.

All of the font, color and other appearance settings can be adjusted with the Properties window, as with any other element.

116

Adjusting Abbreviations

It is very likely that there are some space saving abbreviations in headings and labels on your system (qty - quantity, csz city, state, zip). Now that Genie has given your system some new layout options, you may want to expand these abbreviations to their full values. In this example, we will change script:value (Qty) to Quantity.

117

4-11: Genie Designer

The Genie Designer starts with the Design Toolbar, which will be floating on all Genie screens. If you do not see the toolbar, go to 3-2: Genie Designer.

The toolbar can be moved to any convenient place on the screen by dragging the blue title bar with the mouse. Design mode is turned on by clicking the button. In Design Mode, you are able to add and remove elements using the toolbar and do countless changes to your screens using the properties dialog box that also appears in design mode.

118

The properties dialog can also be moved to a convenient place on the screen, or minimized by clicking the minimize icon on the right side of the title bar.

The properties dialog is dynamic in the sense that it will display the properties of the element(s) that you have selected. An element is selected by clicking on it. See page 124 for details on how multiple elements can be selected.

The majority of this chapter describes how to use the toolbar and the properties dialog to customize all of the available screen elements.

After you have completed a series of changes to a screen, you must save the configuration and turn off design mode so you can view the result of your changes. You would typically use the and buttons on the toolbar to accomplish this, but there is also a shortcut method available that can be accessed by right-clicking on any blank part of the screen and selecting Save and Exit Design. If you want to discard the changes you have made while in design mode, simply select Exit Design on this shortcut menu or click the button on the toolbar.

Note: You must specify at least one screen identifier element and a screen name before the screen can be saved. See 4-12: Screen Name and Identifier for more details.

119

4-12: Screen Name and Identifier

In order to save a screen, you must have a unique name for the screen, and one or more unique identifiers. An identifier can be any element that is unique because of its value (usually the text) and its id (usually the row & column location). In many cases, this would be a heading, a record format name, or a program name on the screen. If necessary, multiple identifiers can be selected for a screen. This would be required if two or more screens had the same heading. In this case, a second or a third identifier might be needed so Genie can uniquely identify each of the similar screens. Each time a new screen is displayed by Genie, it checks the list of identifiers to see if it can recognize the screen. If a screen is recognized, Genie will then perform all of the customizations on the fly.

To mark an element as a screen identifier in design mode, right click on the element (e.g. heading) and select Mark as Identifier on the shortcut menu. This will mark the element as an identifier and also, if the screen name has not yet been entered, name the screen using the value (e.g. heading text) of the element. If necessary, multiple elements can be marked as an identifier using this method.

Alternatively, you can click on a blank part of the screen and manually enter the screen name into the properties dialog. Then, you can click on any element to set the Screen Identifier property.

120

Screen Identifier is a property that can be viewed or changed in the properties dialog. To unmark an element as an identifier, change the screen identifier property to false.

121

4- 13: Moving and resizing screen elements.

In Design mode, any element on the screen can be moved or resized. The width or height of any element can be changed by dragging the side or top handles as shown.

Figure 0-1 Change Element Width

Figure 0-2 Change Element Height

Dragging any of the corner handles allows you to resize the width and height in one action.

Figure 0-3 Change Height and width of an Element

122

To move an element, simply click on it and drag it with the mouse. You can also click on an element and then move it using the arrow keys on your keyboard. This is slower but allows very precise movement.

Figure 0-4 Moving an Element

Empty ElementsFor simplicity of use, not all elements on a screen can be selected (or moved) by default. One example is the background stripe element of a subfile row. In most cases, you would want to select the text in the rows of a subfile (for example to change the font), not the colored stripe element sitting behind it. There are occasions where you do want to select these empty elements. An example would be if you want to move an entire subfile to a different location on the screen. Unless you select all the elements, including the empty colored stripes, only part of the subfile will move.

To enable selection of empty elements, right click on a blank part of the screen and select Enable Empty Elements on the shortcut menu.

123

Snap to GridThe genie designer has a Snap to Grid feature which can be turned on or off. When turned on, this feature will snap an element that you are moving to the nearest row and column allowing easy alignment with other elements on the page. Turning this feature off will allow an element to be moved to any location in one pixel increments.

The design toolbar indicates the on/off status of the snap to grid feature.

It can be toggled on or off by clicking the button on the toolbar or right clicking on a blank part of the screen and selecting Snap to Grid on the shortcut menu.

124

4- 14: Multiple Selection

Multiple elements can be selected by dragging a rubber band around the elements using the mouse. The dotted rubber band occurs if you click on a blank part of the screen and drag the mouse diagonally over the elements you want to select.

Alternatively, you can select multiple elements by holding down the CTRL key on your keyboard and then clicking on the required elements one by one.

There are a number of useful features that are available for multiple selected elements.

Multiple MoveIt is possible to move all selected elements on the screen. Simply click and drag one of the selected elements with the mouse.

Note: If you select and move a complex structure such an entire subfile, you may find that some components of the subfile were not actually selected and are therefore not movable. See Empty Elements on page 122 to enable selection of all page elements.

125

Alignment

If you right click a set of selected elements, there are several useful alignment options as shown below. These options allow you to quickly align and tidy up a series of elements on the page. The element that you actually right click will be used as the standard that the other selected elements will be altered to. For example, if you select Make Same Width, all selected elements will become the