Introduction to Mobile Applications

 

m-Power allows developers to create applications specifically for PC browser, Tablet, and Smartphone devices. For the user, this means that they can access the same report on their PC, tablet, and smartphone and see a completely different output on each that has been tailor-made for their device. For the developer, it means that they can create and maintain one single application that will create the proper output formats automatically.

Benefits of this feature include:

  • Fully supports PC, Tablet, and Smartphone devices
  • Is customizable at the Data Dictionary level. This means that a developer can globally control which devices they would like to support
  • At compile time, developers have the ability to control which Presentation (HTML) Layers are overwritten
  • At run time, users have the ability to switch between different presentation layers
  • No device installation — Simply provide your user with the link to the application. Applications are smart enough to know, based on the browser, the best display to load
  • Templates support Touch-Scroll Pagination
  • One application has multiple presentation layers. For the developer this means future maintenance on an application is as easy as ever!

How do I implement this feature?

By default, the ability to create mobile presentation layers is turned off. To turn this feature on, navigate to the following screens:

"Admin Menu" –> "Edit Dictionary Files" –> "Dictionary Configuration."

You should now see a screen that resembles this:

To begin creating mobile applications, change the "devices_to_support" from "PC Browser Only" to the combination that will best suit your needs.

Next, specify with the "devices_options_" options which devices users should be able to toggle "to and from" on any device. For instance, let's say I want m-Power to create presentation layers for the PC, the tablet, and the smartphone. On the PC, I want the user to be able to toggle back and forth to each of the three outputs. However, on their tablet or smartphone, they should only see that device's presentation layer. In this case, I would specify my configuration file as the following:

When completed, be sure to save!

While we are in the "Edit Dictionary Files" screen, we need to make a small addition to your Dictionary header file. We need to add an option to the header that will allow your users to change between different output formats. Open the Header file. Directly before the </div></div>, enter the following code:

<span style="margin: 10px 10px;color: white;float: right;display: inline;">${device_select}</span>

Be sure to save.

Creating and Viewing Mobile Applications

Now comes the fun part! Build your application like you normally would. Run your application! If you don't have a Tablet or a Smartphone handy, you can use the drop-down in the header to show you how each device type will render in each device.

Notice that either of the mobile devices have a unique options bar that can be accessed by clicking on the "Gear" icon in the top-right hand corner of the device. This option allows users to return to their home screen, control Searching/Sorting, and even allows them to view how this page would look in other devices.

The screen shot below shows my Application as it would appear on a Smartphone. Click on the Gear –> Options to switch views to another device.

In contrast, the screen shot below shows how my application would appear on a Tablet.

Because your application now shares multiple presentation layers, there may be times when you want to simply overwrite one of the outputs, but leave the others untouched. To accomplish this, simply select which files you would like to overwrite at compile time.

Notice that by deselecting a particular output skeleton, you are telling m-Power to retain that layer. Any output formats that are checked will be overwritten.

Once you have compiled your application, you may choose to paint the generated presentation layer. As usual, this is accomplished within m-Painter. Since each presentation layer is stored in a different file, you will have to select the output layer you would like to modify.

Notice that in m-Painter, if I select the "Page" drop-down list, I can navigate between any of my generated output pages.

Note: Be sure to save changes before navigating to a new page. If you fail to do so, you will lose any of the changes you've made.

Author's Note: In this example, I've explained the process when creating each of the three output files. For a contrasting example, if you choose to only create two output formats within the Data Dictionary configuration (PC and Mobile, for example), you would simply not see Tablet as a valid output choice. This would be noticeable when:

  • Recompiling an application, the developer would not be able to overwrite an output that has not been created. In this example, Tablet would not appear.
  • In m-Painter, the developer would only be able to navigate between outputs that have been created. In this example, only the PC and Mobile would appear in the list.
  • At run time, the user would not be able to select any output that has not been created. In this example, Tablet would not appear in the list.