Back

Oracle APEX Mobile Application Development

How do you code a mobile application? In this free tutorial you will learn about the most common patterns in mobile UI design as well as how such designs can be constructed in Oracle Application Express.  Don’t miss out on the free APEX Mobile App download (below).

Focus on the essential. Eliminate the superfluous. Less is more. Is this a Zen class or a session on mobile User Interface (UI) design? Actually, the two have more in common than you would think. The high demand for mobile Web applications is forcing Web developers to rethink UI design. After years of working with an abundance of pixels, this can be a difficult process and the actual implementation even more so. But it can also be very Zen like. In this session, attendees will learn about the most common patterns in mobile UI design as well as how such designs can be constructed in Oracle Application Express.

Download the Application

This free tutorial is segmented into several separate lessons. Be sure to select the best (usually highest) resolution for your connection (while playing the video, see the arrow in the lower right corner).

  1. Introduction (6:04)
  2. Demonstration: Create the Mobile Application (6:06)
  3. Demonstration: Search Patterns (7:18)
  4. Demonstration: List Menu Basics (7:36) (click on video below)
  5. Demonstration: Tab Basics (8:16)
  6. Mobile Application Development Next Steps (5:09)
  7. Demonstration: Navigation with Springboards (8:00)

Date: Dec 5, 2012

NOTE: Some corporate firewalls will not allow videos hosted by YouTube.


Transcript

Demonstration: List Menu Basics

Zen and the Art of Mobile Development: List Menu Basics

 

[music]

 

>> Dan:  Right now, you’re probably getting all kinds of errors if you’re trying to load these pages that don’t yet exist, so let’s fix that. Let’s add some new pages. And to do this we’ll explore what are called list menus in the mobile world. These are sort of the reports that we’re used to in the desktop world. They’re called list menus in the mobile world. 

 

[pause]

 

Now, some basics. Like a springboard, the list menu can serve as jump into hot points. So, it’s not uncommon to find these on the home page of an application. Also, like the springboard, they’re always neutral. So it doesn’t matter. The operating systems, the concepts are rather similar in all of them. 

 

[pause]

 

What’s neat about the list menu, however, is that we have some formatting options. We can use longer text. Here we see darker, larger text. Under that some smaller, longer text and even icons in such as well. So, lots of options with these. 

 

[pause]

 

Here we have a few variations. On the left we see grouped, which is just when we take more than one list menu, place it on the same page, and of course the options within each should be related. 

 

[pause]

 

There’s a personalized list menu, and in this case the options that one sees when they’re logged in are custom to them. So if I login, I’ll see my classes. If you login, you’d see your classes. 

 

[pause]

 

Then we have enhanced. What Amazon has done here is they started with a really simple list menu and then got really complex here. This list menu, in addition formatting, has the ability to buy and also play which is really complex. So you can take these to really great lengths if needed. 

 

[pause]

 

Let’s add some list menus to our app and we’ll see exactly how easy it can be. 

 

[pause]

 

For this, I’m going to create some new pages. I’m going to select the form option because I actually want both a form and a list view combined. 

 

[pause]

 

So I’m going to create page 2 now and page 2 the page name will be CUSTOMERS. 

 

[pause]

 

This will be on top of the DEMO_CUSTOMERS table.

 

[pause]

 

And for the display column, we have to choose from the list here but we’re going to modify this later. For now, I’m just going to display the last name. 

 

[pause]

 

For the form page, I’ll make this page 3. We’ll call it CUSTOMER DETAILS. 

 

[pause]

 

For the primary key, I am going to use the primary key column because this is how I have on the link setup so far. 

 

[pause]

 

We do have an existing trigger to maintain the value of the primary key column. And for the form, I’ll just go ahead and throw all the items in for customers. 

 

[pause]

 

We’ll allow all DML operations and complete the wizard. 

 

[pause]

 

All right, let’s see what we got. So I’ll return to the home page, go to customers. Excellent. This is our list menu, really basic for now. Let’s see if we can make it a bit more attractive, a bit more useful. I’m going to return to our page, this is the list view region in page 2. 

 

[pause]

The first part looks like a standard report region. We have our query here, but when we move over to region attributes, things look very different than the standard report region. 

 

[pause]

 

There’s an option here for advanced formatting. I’m going to check that which exposes text formatting here. I have a really simple example of how this could be used here. All I have is a basic html header, which of course makes larger text followed by a paragraph which would make smaller text. You can see that I can include the columns or aliases from my query to make this formatting even work. 

 

[pause]

 

Something else I want to show you is the search type here. Right now it’s doing server based search. If I move it to client side search, what do we have? Explicit search. Neat. So we’ll leave that, apply the change, return to the demo, refresh. So now we see some basic formatting in our search and we can drill in and see the form and so on, make any changes. Excellent. 

 

[pause]

 

Let’s finish by making the last two pages we need for products. 

 

[pause]

 

Again, it will be a form page. We’re going to use the form on a table with list view. I’m creating page 4 for product.

 

[pause]

 

And this will be on DEMO_PRODUCT_INFO. I have to select this. We’ll do the PRODUCT_NAME to start and we’ll change it up after. 

 

[pause]

 

The details page is going to be page 5.

 

[pause]

 

Again, I need to use PRODUCT_ID because of the links I’ve made already. We do have a trigger. 

 

[pause]

 

For the columns, I’m going to move them all over but then I’m going to move back columns that are related to the image because it’s really not a good thing to do on the mobile apps right now. 

[pause]

 

So, we continue. We will allow DML operations and we’ll create those pages. 

 

[pause]

 

Excellent. 

 

[pause]

 

So if I go back to my demo, go to home, go to products, we see like we saw them before, a very basic list view. Now, in the actual application that we’re creating the mobile version for, when we are here we can actually see the product, the image of the product. 

 

[pause]

 

Let’s see if we can do the same here. I’m going to edit this page and we’ll go into our product region, move over to the region attributes, and like before we’re going to do some advanced formatting. But believe it or not, it’s simpler than the previous option. 

 

[pause]

 

So, we’ll paste that in and we’re just showing the product name and the category. There’s another option here for “Show image” and when you check that, some other attributes are displayed. So, we can display an image. Now you could, for example, display one in a BLOB or you could reference URL. We’re going to leave it on the BLOB since we do have the image in the database. I just need to change the primary key column to PRODUCT_ID. 

 

[pause]

 

Like before, I’m going to change the search to client side, so we get our explicit search. We’ll apply those changes and return to the demo and see what we get. 

 

[pause]

 

Nice. It’s really easy provided that you have the column available. Excellent.

Copyright SkillBuilders.com 2017

×
Free Online Registration Required

The tutorial session you want to view requires your registering with us.

It’s fast and easy, and totally FREE.

And best of all, once you are registered, you’ll also have access to all the other 100’s of FREE Video Tutorials we offer!

 

×
Podcast
×