The Visual Designer in our Profound UI suite is the easiest way to quickly create browser-based interfaces for your IBM i desktop applications. But did you know that the same technology is available for mobile development?

Profound Mobile offers all of the features that make Profound UI great - including the Visual Designer and RPG Open Access Handler - but streamlined for mobile application development.

In this blog post, I'll walk you through a sample application that I created using Profound Mobile. Aside from a few design considerations for a mobile layout (vs. a desktop application), the development is very similar to what you would create with Profound UI. I've included the Rich Display File DDS, RPG, and CL source for this application at the bottom of this article. The application is driven by a standard RPG program, using the Open Access Handler.

The application displays a listing of product records, with an image for each product. Tapping on a subfile row brings up the mobile device's camera, allowing a picture to be taken which will be uploaded to the server and used as the new image for the record. This type of application may be useful in a warehouse setting, users may need to make a record of products that were received in damaged condition, or whatever the case may be.

To create this screen, a Mobile Application Layout was added to the canvas first. This provides a classic header/content/footer layout. The Mobile Application Layout can be set to 100% width/height of the device by clicking on the 'expand' icon:

The Canvas Size setting in the Design section of the Toolbar can be used to visualize how the screen will display on a mobile device of a given size, and the display can be rotated in the Designer.

The mobile application layout serves as a container that we can drop widgets into. Widget sizes and positions can be specified as proportions of the container size. This is the key to creating screens which will scale to different device sizes and react when the user rotates the device.

For example, a centered heading can be created by dropping a label widget into the mobile application layout header and setting the label width to 100% using the option in the Design section of the toolbar:

The Quit button on the lower right is "anchored" to the right side of the mobile application layout's footer bar using another option in the Design toolbar. This setting causes the "right" property of the widget to control its position, where normally the "left" property serves that purpose. The result is that the widget will be "attached" to the right side of the display, regardless of what size device the application is run on.

To complete the display, a subfile grid with the product details was added into the mobile application layout's center panel. The grid's "expand to layout" property is turned on, causing it to fill the container vertically and horizontally. The result is a screen which will scale and adapt if the device is rotated, or when viewed on a different size screen:

The application can be quickly deployed to mobile devices using the Profound Mobile Client. The Mobile Client is a simple pre-packaged client that installs onto mobile devices and launches Profound UI applications on your IBM i server.

Deploying the application in this way enables access to the device's hardware features. In the case of our example program, this enables us to take a picture for a product using the device's camera. This is accomplished by tapping on a grid row, the 'pui.capturePhoto()' API is called from the grid's "onrowclick" event.

The Mobile Client is available for free in the Google Play and iTunes (Apple) app stores.

When the user launches the Profound Mobile app on their device, they are asked to fill out a connection to your IBM i server:

When the user connects to the server, a pre-defined program will run. This program is configured using the 'Configure Profound UI Mobile' option under the Launch menu in the Designer:

To try the example application on your mobile device, transfer the source code at these links to your server and compile. To download the source, right-click on each link and select 'Save Link As...'.

mobiled_dds mobiler_rpgle mobilec_cl

Then setup the MOBILEC program under Configure Profound UI Mobile. Then download the Profound Mobile app from your device's app store and configure a connection to your server.

...and you're DONE!

Hopefully this example gives you an idea how quick, simple, and painless it can be to deploy RPG-driven mobile apps using Profound Mobile. Get started today by contacting our sales team.