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.
- 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.
- 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;
Now Lets get into the details of Jonathan’s tutorial on how to add image buttons to a DdsSubfile.
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
Example of replacing standard selection option with images
How to implement changes
- Add jQuery to the project
- Add image to the DdsSubfile
- Hide display file selection option from the screen
- 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
- Under the body tag of the master page add
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.
- Add the images to the DdsSubfile
XHTML1<input type="image" value="submit" src="../Themes/Current/Images/change.jpg" onclick="pushKeySubFile($(this),2,'select');" style=" POSITION: absolute; LEFT: 0px; TOP: 2px; height :16px; width: 16px;" title="Change" />
Here is breakdown of the attributes inside the input tag above;
Src : where the required image is held
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.
- 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”
XHTML1style=" POSITION: absolute; LEFT: 37px; TOP: 0px; visibility :hidden ;"