Transcript

Demonstration: Tab Basics

Zen and the Art of Mobile Development: Tab Basics

 

[music]

 

>> Dan:  Let’s talk about tabs. This is the last navigational component we’re going to cover. Unlike the previous two, the springboard and the list menu, guess what? These are not OS neutral. Let’s see what I mean here in a moment. 

 

[pause]

 

You have to decide where you want to put your tabs – the top or the bottom. For me, I prefer them at the bottom because that’s where my thumb is, you see when I’m holding my cellphone. 

 

[pause]

 

Another note, you can actually make this scrollable. Not immediately obvious to most users when this happens, but it’s fairly common in the mobile world and we’re seeing it more and more. We just need to figure out a good way to make it really obvious and make that consistent. 

 

[pause]

 

But here’s what I mean by these are not OS neutral. Apple’s telling developers, “Hey, put your tabs along the bottom.” In Blackberry, they don’t know what they’re doing so they just copy Apple, put them at the bottom. But Android says, “No, no, no. Put them at the top.” At the top this is actually a bit more common when compared to what we’re used to in the desktop world, so it may be easier for users to transition to, but again this is maybe easier to reach with your thumb. So, you will have to decide where you want to put them. And because we don’t target a particular OS, you can put them wherever you want, it’ll be fine. 

 

[pause]

 

Let’s add some tabs. 

 

[pause]

 

For this, I actually need to go to that global page, page 0. 

 

[pause]

 

Down here we see that there’s actually a footer region. What I’m going to do, I’m going to add a sub-region inside the footer which will be the tabs. But I’m going to do this using a list which we’ve not yet created. So, we’ll go to our shared components.

 

[pause]

 

We’ll create a list. 

 

[pause]

 

We’ll call this very simply, TABS. It’s a static list and we need three entries, just like our springboard we need one home – that will take you to page 1. Another for customers – that will take you to page 2. And finally, products – those are found on page 4. 

 

[pause]

 

So, create this list. We’ll return to page 0 and now I can right-click here and I can create a sub-region. We’ll see our list option. 

 

[pause]

 

I’m going to call this TABS. 

 

[pause]

 

Now, what’s important is the template that I select. We’re actually going to select two while creating this particular region. The first template is the region template and I need one of these footer options. I’m going to use footer toolbar full screen. 

 

[pause]

 

Here we have the list and of course we only have one, it’s the tabs list. But again, I have a template to select and for this I’m going to use navigation bar. 

 

[pause]

 

We’ll create this list region and when we return to the demo, let’s say we go to the home page, we now see some tabs along the bottom. But it would be nice if we could add some icons above them. 

 

[pause]

 

What if found in the new template and there was a question that came in earlier regarding templates. Let me show you a list template. 

 

[pause]

 

This is the navigation bar, this template. 

 

[pause]

 

There’s this data icon which refers to the image portion of your list entries. So if we go into the list entries for tabs, drill in to say home, and here the image you can put for example “home,” apply that change, refresh your app. 

 

[pause]

 

And you see the home icon. Now it’s neat to know about all the different icons you have, you have to explore the jQuery documentation, the jQuery mobile documentation. So here the icon sets, we have the left arrow, the right arrow and so on. Here’s the home you just saw me use. You just find the one you want, take this text, and put it in the image area. 

 

[pause]

 

But what if I want to use custom images? Well, that’s supported too. You’ll see how to do that down here. 

 

[pause]

 

I’ve just taken some of the concepts from there and cooked up some CSS to do exactly that. I’m going to copy this and hopefully this will work. 

 

[pause]

 

I’m going to return to page 0. I need to put some CSS on every page. Guess what you can’t do on the global page. I’m going to be a little sneaky here, I’m going to go into the tabs region and I’m going to drop this CSS inside the region header. 

 

[pause]

 

Now it’s starting with an element selected by ID for the footer tabs, so I need to drop this inside the static ID of my region. The question was, are these workspace images? In fact, they are. Again, I’m using Glyphish icons. You can find those in a Google search. I bought them, they’re cheap, and I like the look and feel a lot better than what’s available by default in jQuery mobile. 

 

[pause]

 

>> Dave:  There was a question I thought was great. If you wanted to build the desktop and a mobile app, would you have time for two versions of each page?

 

>> Dan:  No. Actually, you don’t. This is something that changed quite dramatically in APEX 4.2. 

 

[pause]

 

When you look at an app, there’s a new column here, user interface and this particular app is using two, desktop and jQuery mobile smartphone, whereas these are using only one. So it’s possible now in a single application to have multiple user interfaces and thus multiple themes within a single application. 

 

[pause]

 

Also recently announced in the APEX 5.0 release, the plan is to include another user interface for tablets in the next release.

 

>> Dave:  Cool. Let’s sneak in one more here, Dan. Is it possible to implement images by URL, not as a BLOB?

 

>> Dan:  Absolutely. 

 

[pause]

 

We’ll look at page 4, go into the attributes for the list view, and right here you’ll see that option. You can use an image stored as BLOB or you can read from a URL. 

 

[pause]

 

Yup. It exists. 

 

[pause]

 

Any other questions?

 

[pause]

 

>> Dave:  There’s actually a few. Can I have more than two user interfaces and how do I add them?

 

>> Dan:  If I return to one of the applications that currently only has one – maybe this bug tracking app only has a desktop UI. You can go to edit application properties. You’ll find your user interface at the top here. 

 

[pause]

 

And toward the bottom you’ll see the ability to add a new user interface. So if you wanted to add the jQuery mobile smartphone here, you could do that or if you have a jQuery mobile smartphone, you want to add the desktop, you could do that as well. 

 

[pause]

 

As I said before, we’ll probably be seeing a third option for tablets in the next release of APEX.

 

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
×