Subscribe

Share

Application Development

Good Design Avoids the Virtual Keyboard

 

When you’re designing application user interfaces for mobile devices, the user experience matters.

By Frank Nimphius

May/June 2016

Did you ever wish for a mouse and a physical keyboard when working on a tablet or mobile phone? If so, it’s very likely that you were working with an application that wasn’t optimized for use on mobile devices. The best mobile user interfaces are clutter-free and simple—users don’t have problems finding the information they need and editing the data they need to edit. Given the painful user experience provided by mobile device virtual keyboards, mobile user interfaces should be designed so that users select data instead of typing it in.

Giving users a filtered choice of options in mobile applications, displaying a list of values—with the values being dependent on the previous selection—appears to be a good idea. However, it is not easy to work with selection-dependent lists of values, especially on Android devices. Although Apple iOS mobile devices do a better job in this area, the user experience still is not optimal.

In this article, I am thinking outside the box when it comes to designing selection-dependent lists of values. Of course, seldom is there a one-size-fits-all solution to a problem; thus, the implementation outlined in this article is best suited for small lists that have a static, or at least an infrequently changing, list of values.

Overview of Sample Application

The use case for the sample application covered in this article is a form that service technicians would use to report the status of a service request after visiting a customer (see Figure 1).


o36maf-f1
Figure 1. Oracle Mobile Application Framework sample application

To edit the status of a service request, the technician navigates to the customer service request and selects a new status, which could be “open,” “completed,” “cancelled,” or “rescheduled.” Each status has a predefined list of values, from which the technician selects one value. For example, the reason for selecting the “completed” status could be that the technician was able to fix the reported problem, the product was replaced, or product parts were replaced.

Selecting the “cancelled” status displays a different list of reasons. Again, there are many ways to implement this use case, such as using list views.

The sample application, which you can implement by following the hands-on steps provided in this article, uses a static list of dependent values. However, it should not be difficult to change the application to make it possible to read values from a dynamic datasource.

About the amx:deck Component

The application mobile XML (AMX) deck component of Oracle Mobile Application Framework, amx:deck, is at the center of this article. It’s a layout container that holds one or many child layout components, only one of which is displayed at a time. The transition between child layout components can be animated to please the mobile user’s eyes. In this article, to change the displayed component, a managed bean is used that exposes different values based on the user’s selection for the service request’s status.

Getting Ready

Ensure that you’re using the Studio Edition of Oracle JDeveloper 12c Release 12.1.3 with the Oracle Mobile Application Framework 2.2 extension, available as a free download from Oracle Technology Network.

Follow the setup instructions in the Oracle Mobile Application Framework installation documentation to configure an Apple Mac with the Xcode developer toolset or a Microsoft Windows PC with the Android SDK for deployment and testing during application development.

The Oracle JDeveloper 12c Release 12.1.3 workspace used for the hands-on instructions in this article is contained in the starter app zip file. Download the zip file, and unzip it into a directory whose name does not contain blank spaces. Note that the download also contains a folder with the completed hands-on sample for use as a reference.

Start Oracle JDeveloper, and choose File -> Open from the menu. Browse to the directory that contains the unzipped contents of the downloaded sample file, and then open the starter folder. Select the oramag03042016.jws workspace file, and click the Open button.

Implementing the Technician Form

Implement the Technician Form view by following these instructions:

  1. In Oracle JDeveloper, expand the ViewController project node and then the Web Content -> amx node.
  2. Right-click the TechnicianForm.amx page, and choose Open from the menu.
  3. Ensure that Oracle JDeveloper’s Structure window is open, by selecting Window -> Structure from the Oracle JDeveloper menu.
  4. Also ensure that the AMX component window is open, by selecting Window -> Components.
  5. Navigate to the AMX page for the Structure window to show the page structure.
  6. In the Structure window, expand the View -> Panel Page -> Panel Group Layout -> Panel Group Layout node. The second Panel Group Layout component is where you will add the form content.
  7. In the Components window, expand the Layout accordion and select the Panel Label And Message component.
  8. Drag the Panel Label And Message component into the Structure window, and drop it on top of the Panel Form Layout component.
  9. If it is not already open, open the Properties window, by selecting Window -> Properties from the Oracle JDeveloper menu.
  10. Change the Label property of the Panel Label And Message component from label1 to SR#.
  11. Expand the Data Controls accordion in the Application Navigator. To see the data controls available for this application, click the double-arrow icon in the Data Controls accordion header.
  12. Navigate to the AMX page for the Structure window to show the page structure.
  13. In the Data Controls panel, expand the SRManagerDC and serviceOrders nodes. Select the serviceRequestId attribute, and drag and drop it onto the Panel Label And Message component you added before.
  14. Repeat step 7 through step 13, except this time for step 10, set the Label property of the Panel Label And Message component to Problem Statement.
    Note: The available service request status values are displayed in a Select One Radio (amx:selectOneRadio) component. However, because the sample application uses a static list of values, you can simplify the task by first creating an input text component and then changing that to an amx:selectOneRadio component. Doing that creates the AMX data binding.  
  15. In the Data Controls panel, select the serviceStatus attribute. Drag it onto the Panel Form Layout component in the Structure window.
  16. In the opened menu, choose Text -> MAF Input Text w/ Label.
  17. Click in the AMX source window, and change the <amx: inputText> tag created for the serviceStatus attribute to <amx:selectOneRadio> Change the component’s label property value to Status to replace the expression added by default.
  18. Save your work.
  19. In the Component window, expand the Text and Selection panel. Drag the Select Item (not Select Items) component into the Structure window, and drop it on top of the Radio Button component.
  20. Repeat step 19 three times.
  21. Select the first Select Item component in the Structure window, and edit its Label and Value properties in the Properties window. Set the Label property value to Open and the Value property value to open (case matters, so make sure you enter the value with lowercase letters).
  22. Repeat step 21 for the other three Select Item components, and set the Label and Value properties to the following values:
    Component Label Property Value Property
    Second Select Item Completed completed
    Third Select Item Rescheduled rescheduled
    Fourth Select Item Cancelled cancelled
  23. In the Structure window, select the Radio Button component.
  24. In the Properties window, navigate to and then expand the Behavior node.
  25. Place the cursor in the Value Change Listener property field, and click the blue cone icon on the right.
  26. In the opened Value Change Listener dialog box, click Edit.
  27. Select the technicianFormBean in the Managed Bean field. The technicianFormBean has been precreated for you in the starter workspace and resides in the view scope at runtime.
  28. Click the New button next to the Method field.
  29. For the name of the method, enter onStatusChange, and click OK twice.
  30. Save your work.
  31. In the Oracle JDeveloper Application Navigator, expand the Application Source -> oramag.maf.sample -> mobile -> beans nodes and right-click to select the TechnicianFormBean Java class. In the opened menu, choose Open.
  32. Add the following variable definition above the constructor method:

    private String srstatus = "open";
     
  33. Right-click under the constructor method in the code editor. In the opened menu, select Generate Accessors.
  34. Check all the checkboxes in the Methods field, and ensure that the Notify listeners when property changes box is checked too. Then click OK.
  35. Place the cursor in the onStatusChange method, and add the following Java code:

    this.setSrstatus(
         (String)valueChangeEvent.getNewsValue());
        
  36. Save your work. Don’t close the Java code editor yet.
    What you have done so far: Up to this point, you have added read-only form fields to the technician form as well as a Select One Radio component for selecting the status information for a repair. The Select One Radio component has four states: opened, completed, cancelled, and rescheduled. Later, these values will be matched by the ID properties of the Panel Group Layout components contained on the amx:deck component to set child values for the reason behind a specific status. The Value Change Listener on the Select One Radio component ensures that the dependent detail information is displayed on the screen.
  37. In Oracle JDeveloper, switch to the TechnicianForm.amx tab and click in the page source, so the Structure window shows the page structure.
  38. In the Structure window, expand the View -> Panel Page -> Panel Group Layout -> Panel Group Layout node.
  39. In the Component window, expand the Layout panel. Select the Deck component, drag it into the Structure window, and drop it between the two Spacer components located under the Reason Output Text component.
  40. Select the Deck component in the Structure window, and open the Properties window.
  41. Place the cursor in the Display Child property, and click the cone icon at the right. In the opened menu, click the Expression Builder entry.
  42. In the Expression Builder dialog box, expand the ADF Managed Beans -> viewScope -> technicianFormBean nodes and select the srstatus attribute. Then click OK.
  43. Select the Panel Form Layout component in the Components window, and drag and drop it on top of the Deck component in the Structure window.
  44. Repeat step 43 three more times, so you have four Panel Form Layout components added to the Deck component.
  45. In the Structure window, one at a time, select each of the Panel Form Layout components you just added and change the default component ID property values as follows:
    Component ID Property Value
    First Panel Form Layout open
    Second Panel Form Layout completed
    Third Panel Form Layout rescheduled
    Fourth Panel Form Layout Cancelled
  46. Select the first Panel Form Layout component in the Deck component, and use the Properties window to set the Label Position property to topStart and the Label Width property to 0%. Also set the Field Align property to Center.
  47. For the other three Panel Form Layout components, set the Label Position property to topStart and the Label Width property to 30%.
  48. From the Layout panel of the Components window, drag the Panel Label And Message component and drop it onto the first Panel Form Layout component.
  49. Expand the Text and Selection panel of the Components window, drag the Output Text component into the Structure window, and drop the component on top of the Panel Label and Message component you added before.
  50. Use the Properties window to clear the Label property of the Panel Label and Message component. Then set the Text property of the Output Text component to <Please select a status other than “Open”>.
  51. In the Data Controls window, expand the SRManagerDC -> serviceOrders nodes and drag the serviceStatusReason attribute onto the second Panel Forms Layout component in the Structure window.
  52. In the Create dialog box, choose the Text -> MAF Input Text /w Label entry.
  53. Use the Properties window to change the Label property to Reason.
  54. Switch to the page source editor, and change the amx:inputText tag to amx:selectOneRadio.
    Note: Creating the input text component from the data control attribute first and then renaming the tag amx:selectOneRadio is a shortcut for creating the binding for the Select One Radio component. It’s a lively example of thinking outside the box.
  55. In the Structure window, select the Radio Button component and copy it to the clipboard by pressing Ctrl+C.
  56. While still in the Structure window, paste the Radio Button definition into each of the other two Panel Form Layout components.
  57. Use the Properties window to change the Id property of the pasted Radio Button components to it3 and it4.
  58. Save your work.
  59. In the Structure window, select the first Radio Button component in the Deck -> Panel Form Layout component.
  60. In the Components window, expand the Text and Selection panel and then drag the Select Item component and drop it onto the Radio Button component. Repeat the drag-and-drop operation three times.
  61. Use the Properties window to change the Label and Value properties for each Select Item component, as shown below:
    Component Label Property Value Property
    First Select Item Repair Successful repair-success
    Second Select Item Product Replaced product-replacement
    Third Select Item Parts Replaced parts-replaced
  62. Repeat steps 60 and 61 for the other two Radio Button components, using the following settings. Radio Button component with ID it3:
    Component Label Property Value Property
    First Select Item Product OK Product-ok
    Second Select Item 3rd-Party Service Required third-party
    Third Select Item Repair Impossible repair-impossible

    Radio Button component with ID it4:
    Component Label Property Value Property
    First Select Item Customer not at home customer-unavailable
    Second Select Item Arrived too late at customer technician-late
    Third Select Item Spare part missing part-missing
  63. Save your work.
    ​What you just did: In the section above, you created the detail information to be displayed when a service request status is selected. The Value properties of the Select Item components specify imaginary service codes that could be used, for example, for analytics.
  64. In the Structure window, expand the View -> Panel Page nodes and then select the second Panel Group Layout component node.
  65. Select the first Button component. In the Properties window, locate the Behavior section and place the cursor in the Action property. Then click the cone icon on the right side of the field and choose Edit in the opened dialog box. Select technicianFormBean as the value for the Managed Bean field, and click the New button next to the Method field.
  66. In the Create Method dialog box, name the method onNextPrev and click OK twice.
  67. In Oracle JDeveloper, switch to the still-open TechnicianFormBean.java tab and add the following code line before the “return null;” string of the
    onNextPrev() method:

    this.setSrstatus("open");
     
  68. Repeat step 66 for the second Button component on the TechnicianForm.amx page. This time select the onNextPrev method you created earlier, instead of creating a new method.
  69. Save your work.
  70. Now run the application by right-clicking the View Controller project and selecting the Run menu item, or deploy the application to a device for testing.
  71. When the application launches, click the red burger icon to expand the Application menu.
  72. Click the Run Sample menu item to start the demo.
  73. When the Technician Form view is displayed, browse through the service requests and change the status information. You should see the detail information changing when you change the status information.

Click the View All button at the top right of the Technician Form view to see the status changes and selected details in a list of all service requests.

Conclusiion

For mobile application development, good user interface design aims to save users from having to input data by using the virtual keyboard. Instead, as much as possible, mobile user interfaces should work with selection-dependent components and clickable images. This article explained how to build selection-dependent value lists by using an amx:deck component and multiple amx:selectOneRadio components from Oracle Mobile Application Framework.

Next Steps

 READ more about Oracle Mobile Application Framework.

 SEE the Oracle Mobile Application Framework installation guide.

 DOWNLOAD the starter app for this article.

 

Photography by Simon Abrams, Unsplash