Modernizing the User Interface with Image Buttons

The content for today’s post was contributed by Jonathan Greenstreet, ASNA Europe Regional Manager UK/Ireland/Netherlands/Scandinavia/South Africa.

As the leader in IBM i Modernization, ASNA offers two products that provide staged modernization of IBM i applications to the Microsoft .NET Framework.

  1. ASNA Wings lets you quickly and effectively give your RPG applications the user experience they deserve, with no disruptive changes to your RPG source code. The Wings UI is an alternative and your original green screen can still be made available for some users if necessary.
  2. ASNA Monarch transforms IBM i programs or applications originally written in ILE RPG or RPG/400®, into a native Microsoft .NET application. For a complete re-platforming, Monarch can even migrate your IBM i database to SQL Server™. The result is a browser-based, .NET version of your RPG application. Once migrated to .NET you can then extend and enhance the application in many ways.

Both products create a state-of-the-art, browser-based, user interface by transforming display file DDS into ASP.NET Web Forms. Microsoft ASP.NET Web Forms are an industry standard, so you can use standard Web techniques to further modernize and improve the user interface.

In this post, Jonathan offers a simple tutorial on how to add image buttons to a DdsSubfile.

A DdsSubfile is an ASNA user interface control that provides an ASP.NET equivalent to the DDS display file subfile. Mark up code for the DdsSubfile control, and a variety of other ASNA controls, is automatically generated when a DDS display file is transformed into an ASP.NET web form through Monarch or Wings. ASNA provides user interface controls, based on DDS display file constructs, to make it easier for RPG programmers to further modernize and improve the transformed user interface.

The ASNA user interface controls are drag and drop widgets that are fully integrated into the Microsoft Visual Studio development environment, as illustrated here;

ASNA user interface controls in the Visual Studio toolbox

ASNA user interface controls in the Visual Studio toolbox


Now Lets get into the details of Jonathan’s tutorial on how to add image buttons to a DdsSubfile.

Objective

To replace the selection field in a DdsSubfile by using images to give the end user the ability to point and click at the option required.

Example of a standard selection option in a subfile

Standard subfile with multiple option selections

Standard subfile with multiple option selections

Example of replacing standard selection option with images

Selection with Images

Selection with Images

How to implement changes

  1. Add jQuery to the project
  2. Create JavaScript file to hold the action to take when clicking on an image
  3. Create JavaScript method for when the images are selected
  4. Add jQuery and JavaScript to the master page
  5. Add image to the DdsSubfile
  6. Hide display file selection option from the screen
  1. jQuery can be added to your project in a number of ways, in this example we will outline the one which enables you to use it without having to connect to the internet
    • Download the lastest release of from jQuery
    • Add the download file to your project
      jQuery file download

      jQuery file download

  2. Create a JavaScript folder to hold the required JavaScript file using Visual Studio add item.
    JavaScript file folder in Visual Studio

    JavaScript file folder in Visual Studio

  3. Add the following JavaScript to the .js (JavaScript) file

  4. Under the body tag of the master page add

    This will allow jQuery and the JavaScript to be visible to all the pages that utilize the master page.
    Note : If you want this functionality to be enabled in the popup windows, please ensure that this is also added to the popup window master page.

  5. Add the images to the DdsSubfile

    Here is breakdown of the attributes inside the input tag above;

    Src : where the required image is held
    Onclick : the JavaScript method to be invoked
    Style : the position where the image is to display in the DdsSubfile and the height and width of the button. (If the height and width are standard throughout all the buttons this could be moved to a CSS file.)
    Title : The text to display if the mouse is hovered over the image.

  6. The original selection option is no longer required to be displayed. This option cannot be removed or set to visible = *False. The way to hide this is in the style option of the control, set “visibility : hidden”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">