/
Genie Introduction

Genie Introduction

Owned by Brian May
Last updated: Oct 06, 2023 by Jessica Tomkins
9 min read

 

Introduction

Welcome to Genie. Genie is Profound Logic Software’s 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 IBM 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 system’s 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.

Figure 1.1: System i Main Menu presented with Genie Designer

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 system’s 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 to existing screens. The Genie Visual Designer has a simple point-and-click, drag-and-drop interface.

 

Figure 1.2: Cluttered green-screens become intuitive web interfaces



Figure 1.3: The Genie Designer’s Toolbar

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.


Figure 1.4: The Genie Administrator

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

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.

  • Cross-Browser - All major browsers as as well as mobile devices are supported, including Internet Explorer, FireFox, Opera, Safari, Chrome, and iPad.

  • 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.

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

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

  • Dynamic Architecture - Genie’s 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. Genie applications also give you the ability to integrate with any other modernization approaches, such as automated conversions and redevelopment. Additionally, Genie can integrate with web services and offers a Simple Object Access Protocol (SOAP) client for web services.

  • 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.

  • No Programming 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 - 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. For example, you can define one or more rules such as the following: 

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

    • Whenever there is a Y/N displayed on the screen as Yes or No options, turn them into a checkbox or a dropdown box. 

      • 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. 

  • 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.

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 PHP, RPG/CGI, 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.

 
HTML5 Charts - Genie is packaged with many different types of charts, and they are extremely easy to integrate with your applications. Simply pick the chart type and point at the DB2 table on the IBM i for chart data. Chart data can also be retrieved from an existing 5250 screen.  Or, if you want to generate chart data on the fly, this can be done in any Web capable language that can produce XML.  

 
Checkboxes - Any existing application field can be turned into a checkbox. You simply specify which values represent a checked 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.

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

 
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.

 
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.

 
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. 

 
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.

 
 
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.



Spinners - A spinner is a textbox control equipped with two spin buttons that display an arrow. The spinner allows the user to navigate through a range of value using the arrow buttons to increase or decrease the value held by the field.
 

 

With each of the elements, you have complete control over the look and feel, as well as functionality. The elements have hundreds of properties that you can modify, and all of these changes can be made with the designer’s user-friendly properties panel.

Figure 1.5 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 from your system. With Genie, you can go from starting your modernization efforts to having a partially modernized system in less than a day. You have all the tools necessary, however, to take it as far as you need. You will be able to reap the benefits of modernization without investing a lot of time, effort, and money into the process.

 

Related Videos