July/August 2016
Oracle Application Express is a no-cost feature of Oracle Database for building web applications. But in addition to building modern, responsive, and accessible web applications, Oracle Application Express enables you to easily build mobile applications.
Oracle Application Express mobile application pages use the open source jQuery Mobile framework. Using Oracle Application Express with the jQuery Mobile framework, you can quickly create jQuery Mobile–based web pages in applications for mobile devices such as smartphones and tablets.
In this issue of Oracle Magazine, you’re going to build a simple Oracle Application Express and jQuery Mobile–based application to manage events from your mobile device. You’ll also see how this application can be easily customized and extended from the declarative development interface of Oracle Application Express.
This article’s sample application is built in Oracle Application Express 5. If you’re not already running Oracle Application Express 5 or later locally, you can request a free workspace. You will also need to download and unzip the SQL script file for this article to build the sample data.
Creating the Database ObjectsBefore you begin building the application, you will first need to create the database objects that will support the mobile application. The supplied SQL script will drop these demonstration objects (if they exist) and re-create them, so be careful when rerunning this script.
The database objects for this sample application—including the EVENTS and EVENT_TYPES tables—should now be created.
Creating the ApplicationAnd voilà! In just a couple of minutes, you’ve created a fully functional mobile application in Oracle Database.
By selecting Mobile when you created the application, you elected to use a mobile user interface. User interfaces in Oracle Application Express specify a collection of HTML templates and user interface controls. The HTML templates for the mobile user interface are based on jQuery Mobile, which is designed to work with all popular smartphones and tablets. It is touch-optimized, it can be used in low-bandwidth network environments, and the look and feel approximates a native mobile application.
Click Run Application, and log in with your workspace credentials. You’ll initially be presented with a rather empty-looking home page. In the navigation menu in the upper left of the application, click Events. Your application should look similar to Figure 1.
Figure 1. First look at Events page
Experiment by using your newly created application. Enter interview in the search bar at the top of the page, and press Enter. Click the X in the search bar to clear the search bar text. Click one of the event names to edit the details of the event. Click the X in the upper corner of the edit window to close it. In the navigation menu, click Event Types to display the list of event types. Although this application is not quite complete, it’s easy to see how simple it was to create this foundation.
Customizing the FormWhen you explored your new application, you might have noticed that the edit form for events didn’t look quite right. Where the type of event should have been displayed, instead there was a big number. Also, no time was displayed for the start and end dates. Let’s enhance the application by making slight modifications to the form. To do this, use the Page Designer interface of Oracle Application Express.
Navigate to the tab in your web browser where you first ran the application to run the updated version. Note that Event Type is now rendered as a select list. Also note that the time component of the start and end dates is correctly shown. Although the actual value of the start and end dates may appear to be in a rather unfriendly format, these are, in fact, being rendered as HTML5 datetime-local input types. Web browsers on modern mobile devices will interpret this input type and present a corresponding mobile-appropriate input control for the date and time. For example, Figure 2 presents a customized form running on an iPhone. Note the mobile-friendly date control for editing a date field.
Figure 2. Events page after application updates, running on an iPhone
|
select e.name, e.start_date, e.end_date, e.description, t.name event_type from events e, event_types t where e.event_type_id = t.id order by e.start_date;
Navigate in your browser to the tab running your application, and refresh your browser. Navigate to the home page of your application by clicking the navigation menu and clicking Home. You should now be presented with a calendar view of your Events data, enabling you to quickly switch between the yearly, monthly, weekly, and daily views.
Using a tablet or smartphone, enter the URL (the one up to and including the Application ID) to run your application. You should be able to log in and navigate through your application just as easily as in a native application. Your application should look similar to what is shown in Figure 3.
Figure 3. Events page on a mobile device
It should now be apparent how easy it is to create mobile applications with Oracle Application Express. In just a few minutes, you were able to create a very elegant database application that looks and feels like a mobile application. To “distribute” this application, all you need to do is give someone the URL to your application. And other than writing one SQL statement, you accomplished this by writing no code.
In addition to mobile user interfaces, Oracle Application Express supports the creation of applications with a responsive user interface. Which type of user interface is better for mobile device users: responsive or jQuery Mobile? Each has its merit, but with Oracle Application Express, it’s entirely up to you. You can do both!
Oracle Application Express runs wherever Oracle Database runs, and Oracle Application Express is also available in Oracle Database Cloud. This is a powerful combination and part of the reason why Oracle Application Express is so compelling for Oracle Cloud: within minutes, you can begin building and deploying desktop and mobile applications on Oracle Cloud infrastructure, all managed by Oracle.
|
Photography by Meric Dagli, Unsplash