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) (click on video below)
  4. Demonstration: List Menu Basics (7:36)
  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: Search Patterns

Zen and the Art of Mobile Development: Search Patterns

 

[music]

 

>> Dan:  Before we continue with the navigation patterns, I think this is a good time to talk about search patterns. Obviously, search is really big these days. Google is doing it, sure. But so are a lot of people inside their own applications. I showed you just a moment ago that in the demo app, they’ve actually added the search capability. 

 

[pause]

 

There are patterns for search as you might have assumed. On the left here we have explicit search. This is the most common type of search. You just put in what you’re looking for, you hit “Go” and it takes you to a page with the search results, and hopefully find what you were after. 

 

[pause]

 

On the right is something a lot more complex. Obviously, this was created out of necessity, to make it easy for people to find certain flights, they had to create a search form that worked well in mobile. And I can tell you just by looking at this that it took a lot of effort to create this particular page. But as you can see, it’s very useful and easy to work with, so cost-benefit. 

 

[pause]

 

Here’s some more. We have auto-complete on the left. And TripAdvisor is doing something neat here. They’re actually grouping the auto-complete results into two different groups, which is something I had not seen before. 

 

[pause]

 

Obviously, this works – as you start to type, you almost look ahead on the bottom. 

 

[pause]

 

Here we have dynamic search. This is the type of search that you have in your mobile phone when you go to your contacts and you have this giant list of contacts, and then you start to search. Each letter that you type in reduces the list to match the search. That’s dynamic search and it worked well as long as you don’t have too much to start with, too many items. 

 

[pause]

 

Finally, we have scope search over here. If you’re as big as Google and/or you just want to allow customers or users to search specific parts of you app then you can add the ability to select or set the scope before doing the search. 

[pause]

 

That’s nice. What about adding search to our application? Let’s do it. 

 

[pause]

 

What I did for this, I actually went in and I stole some of the code from the sample application because it already had search implemented, I went and I saw how they did it and that brought me to this PL/SQL. I’ll show you that in the moment. Here it is. 

 

[pause]

 

What they were doing is declaring a variable – a set of them – and then executing some codes. And perhaps the most important part of this is this portion right here. 

 

[pause]

 

What they’re basically doing is creating a custom region page here and they’re using sys.htp.p to dynamically put together some html content, a really neat technique in capability in APEX. It allows you to do pretty much anything you might need to do. Htp.p works a lot like DBMS output.put line in that it adds content to a buffer. Only this particular buffer is read by the listener, used by APEX so we can generate dynamic content. 

 

[pause]

 

So that’s how they did it. I just modified their code a little bit to work better in the mobile world. 

 

[pause]

 

We want to add search. The first thing I need to do is create a new item for this. So “Create a new item.” Of course, it’ll be a simple text field and we’ll call it P1_SEARCH. 

 

[pause]

 

I’m not going to use a label for this, even though it might be a good idea to. I want to show you a better tool we have now in APEX 4.2. I do want to submit when “Enter” is pressed. I’ll set that to “Yes” and we’ll create this item. 

 

[pause]

 

First, I’m going to move the item so that it’s at the top of the springboard and I’ll drill in. I’m going to show you something neat. You’ll find this inside the element attributes. You see this value placeholder. I can say, “Search here,” and you’ll see that when we run the page it’ll be in the element and when the user starts to use it will clear itself out. 

 

[pause]

 

We can take a look at our new search ability. 

 

[pause]

 

There it is. And as soon as I start to type, you’ll see the search go away. 

 

[pause]

 

All right, it works good. What I don’t like about it is the styling. Again, on the left, it’s not centered, cutting off some of the highlighting and so on. 

 

[pause]

 

What I have here is some modified CSS to improve upon. Of course, now I’m targeting search and just improving a few things here. So, I’ll copy this. 

 

[pause]

 

And I’m going to go back into the CSS for the page. 

 

[pause]

 

I’ll update what we have. 

 

[pause]

 

Apply the change, we come back to our example. That looks better and you can see it will adjust like we need it to. Perfect. 

 

[pause]

 

Now what we need is a search results page. So, I’ll go ahead and create a new page. 

 

[pause]

 

This is going to be another blank page, but it will be page 6. 

 

[pause]

 

We’ll call it “search results.” 

 

[pause]

 

Now I can edit this page and go onto this really basic html region that it had created for me and change the type from standard html text to PL/SQL anonymous block, which allows me to then have all of these PL/SQL here which is generating our search results. 

 

[pause]

 

Copy that, paste it in, apply the changes and we’re almost ready. The only thing I need now is to return to page 1 and create a means to go from this page when we’re searching over to page 6. So for that, I’m going to create a branch. That item is the only way to submit the page so I’ll go ahead and just make it unconditional. 

 

[pause]

 

Another neat thing in 4.2 is we can name our branches, so I can call this one “go to search results” and of course it’s taken us to a page in the app and that page is 6. So, create that branch. 

 

[pause]

 

Now when we run our demo, I’ll type in a search – we searched for “Logan” before, I’ll try it again. 

 

[pause]

 

There we go. Now we can find Logan. 

 

[pause]

 

So, search is not terribly hard to add to even a mobile application.

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
×