Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating new HTML5 documents
- Using code hinting for CSS3, HTML5, DOM elements, and jQuery
- Configuring jQuery widgets with the Widget Browser
- Managing media queries
- Previewing web pages on multiple devices with the Multiscreen Preview panel
- Configuring mobile application frameworks
- Building and emulating mobile applications
Skill Level Intermediate
With the Dreamweaver CS5.5 release, Adobe is adding several mobile application development tools. In this chapter, I want to go over some of those tools and along the way discuss Adobe's strategy regarding Dreamweaver and mobile development. Now the first thing I want to discuss is jQuery Mobile. jQuery Mobile is one of the most popular mobile user interface open-source frameworks in use today. In the CS5.5 release, Adobe has integrated this framework into Dreamweaver, which makes it extremely easy to build interfaces for your mobile applications, even if you've never used jQuery or jQuery Mobile before.
So I went ahead and redefined my site so that the root folder for the local site is the 04_01 directory. We don't have any exercise files for this particular example because we're going to build it from scratch. So the first thing I'm going to do is go up to File and choose New, and one of the nice things that they've done to Dreamweaver that you might miss if you're not really paying attention is they've added some things to the Page from Sample. Now, most people that I know don't even go down there, because who needs a frameset, right? Well, now they have Mobile Starters in there as well, which is really cool.
So they give you a jump-start on developing a mobile application. So we have sample pages for jQuery Mobile, and we have three different mobile frameworks. And we're going to choose the PhoneGap framework, because we're going to be utilizing that a little bit later on. So I'm going to choose jQuery Mobile (PhoneGap), make show the DocType is HTML 5, and I'm going to go ahead and click Create. Now as soon as you do that, it creates a page for us, and it goes ahead and gives us some existing structure to the page. If I look at this in Design view, I can see that I have just some div tags with some existing structure in them for pages One, Two, Three, and Four.
Now if you don't understand jQuery Mobile, that might seem a little weird at first. But with jQuery Mobile, it uses div structures to create pages. So you could think of these pages as being screens that are animated into place, and each div tag can be a separate page, so you can literally have one HTML file and have multiple pages in it. All right! So what I want to do now is I want to go ahead and save this file, and I'm going to save this into 04_01, and I'm going to save this as index.html.
Now what it's going to do with these files, it's going to place them in a directory named jquery-mobile, and if you open that up, you can kind of see how that's structured. Now, if you have an existing scripts folder where you want to reorganize these files, you can do that. But one of the things that you need to be aware of is, if I switch over to the source code, these files are being linked to this page. So if you were to move those around, make sure that Dreamweaver is also updating those links, or your functionality is going to be negatively affected. Okay, so I'm going to stay in Code view because it's probably the easiest way to customize and change our jQuery Mobile interface.
So let's see what this looks like currently. I'm just going to go ahead and preview this in Chrome, and I recommend using a WebKit-based browser. It just seems that jQuery Mobile works better with those at the moment. Now I can see that the default structure of the page is to have a header up top, a footer on the bottom, and I have links to pages Two, Three, and Four. If I click on one of those, you can actually see it animate over, and the Back button takes me back. So it's a navigation scheme that's really designed for smaller screens, like mobile devices. I'm going to go ahead and close my browser and go back into my code.
Now if I scroll down and look at the code, the structure makes itself maybe a little bit more apparent. You can see that each one of those pages is just a div tag, and inside that, we have other data tags that are providing the rest of the page structure. What's really neat about jQuery Mobile is it uses this data-role attribute to describe what the contents of that div tag are. So in this case the data-role is a page, and in this case the data-role is a header, which is why it showed up as the header bar, and here we have our content. So you could go in and you could modify these.
So, for example, I could come in and instead of Page One, I can just go ahead and say 'Explore California.' And you're free to customize these any way that you want. Inside the div that has the role of content, for example, I'm going to put an h1 tag, and inside that, I'm going to type in Tour Finder, which is the app that we're going to be building. We're going to be building the Explore California Tour Finder. Now one thing that you do want to be careful about, however, is the divs that have a distinct data-role to them. You want to be very, very careful about modifying those, because they determine the structure of the page and their data-roles are what drives the user interface that jQuery builds, so be very careful about changing those up.
Now I did want to show off a lot of the integration features inside Dreamweaver, so one of the first things I want to do is I want to take the navigation list that's already there that's existed based on the sample that we created and I want to get rid of that. So this unordered list, go ahead and highlight that and delete it. It doesn't mean that I'm not going to use an unordered list from navigation; it's just that I want to use some of the other Dreamweaver integration to go ahead and put that in. So if I look at my Insert toolbar, I now have a setting for jQuery Mobile. Now I am in the Classic workspace, which docks the Insert panel up at the top as a toolbar.
You might see it over here on our panel dock, which is fine. You can access the same things here, or you can do what I like to do, which is to have it in Classic mode so that it appears up top. So for jQuery Mobile, we've got all these little different widgets that we can place on the page: flip toggle switches, sliders, radio buttons, dropdown menus, text areas-- so, a lot of user interface components. Now we also have things like collapsible blocks, which of course will either expand to show the content or collapse, much like an accordion widget. We have layout grids that will help you create two- or three-column layouts within your phone, and we also have what's known as the jQuery Mobile List view.
Mobile devices have totally different interface requirements, and so one of the things that really works well in mobile environments are lists, not only to display data but also to facilitate navigation. So I'm going to go right here and click the jQuery Mobile List View to insert one of those, and I made sure that my cursor was just after the Tour Finder where my navigation used to be. Now we can choose either an Ordered or Unordered List. So if you wanted numbers to your navigation or to your list, you could go ahead and select that. You can also choose the number of items. I'm going to leave that at 3 actually. And I can choose a different type of list.
Now unless you know a lot about jQuery Mobile and how these widgets are constructed, some of these choices really aren't going to make any sense to you. So obviously, if you're using this for the first time, you're probably going to want to consult the jQuery documentation. I'm going to show you that in just a moment when we're finished with this exercise. Out of all these choices, I'm going to choose Text Description, because what Text Description allows me to do is to not only have the link itself, but a description of the link underneath it, so that you can provide maybe a little bit of extra information. We also have things like Split buttons, which will have two clickable links on either side.
So if you, for example, had a list of songs, the button on the left could play the song and the button on the right could perhaps prompt somebody to purchase it. So we're going to do Text Description, click OK, and now I get a brand-new unordered list. Notice it's data-role still says listview. In addition to the links, I get headings that hold the links and then a paragraph. Now you might look at this and say, wow, that's really not valid HTML. But for jQuery Mobile it is, and it works quite well. So one of the first things I want to do is go ahead and insert all of the links that I need.
So the first link I want is to go to the all page, and that link is going to read 'All tours', and the descriptive text underneath it is going to read 'See all our tour packages'. So you can tell by the link here that jQuery Mobile is going to use IDs of elements to navigate from one place to the other. We're going to go down to the very next one, and we're going to type in 'activities', and we'll replace its link to 'Tours by Activity', and its descriptive text is going to read 'Looking for a specific activity'.
Let's scroll down a little bit more. We'll finish this up by linking the third and last page to region. The link name itself is going to read 'Tours by Region', and the descriptive text is going to read 'Want to go to a specific region'. Fantastic! Now, I want to do one more thing here. In the Page Footer, I want to replace that with a link to a 24-hour contact phone number, and in doing that, we're going to get to experience Dreamweaver's code hinting for jQuery Mobile as well.
So I'm going to go ahead and delete the placeholder content for the footer, and I'm going to go ahead and create a link. So I'm going to say 'a href' and inside that, I'm going to format a telephone number. So I'm just going to type in 'tel://' and then the number '866-555-4310', and what that's going to do for us is in a mobile device when somebody touches that link, it's actually going to switch over to the phone itself, and it's going to bring that phone number up so they can just hit call and dial it.
So that's pretty cool. All right! I'm going to give it a title for accessibility. I'm just going to type in 'Give us a call'. And then finally, I really want this to be not a clickable line of text. I'd like it to be a button, and so one of the things you can do with jQuery Mobile is go ahead and take something like a link, for example, and just make a button out of it by using data-role. So I'm going to type in 'data-role', and I want this data-role again to be a button. I also would love to have an icon on this button as well, so here I'm going to do a data-icon, and I get the list of all the available icons.
Now unfortunately, there is not a telephone. Now you can customize these and make your own, but for this example we're just going to use what they have, and I'll choose the grid, because I think that'll work just fine. All right! I'm going to go ahead and close my link. I'm going to type in 'Contact Us' as the text of the link and then close the link tag. I'm going to go ahead and save that. Now I would love this footer to be on every single page, so I'm just going to copy that link and then paste that inside the Page Footer content for all of my remaining pages.
I also want to go ahead and activate all those links, so again, just working from say the top down, I know that my first one is all the activities in a region. So the first page, page2 here, I'm going to change its ID to all, and I'm going to change its header to 'All Tours'. We'll worry about the content later. Same thing for page3; I'll change it to activities, and I'll just type in 'Tours by Activity'.
And finally, the last page, we'll go ahead and give it an ID of region, and we'll do 'Tours by Region'. Perfect! So we'll go ahead and save that, and again, I just want to test that in my browser, and I can see there is Explore California. There is the Contact Us button. Notice that it went ahead and just formatted that link as a button. There is the little grid icon that we asked for, and the link points to our telephone number. Our navigation takes us to all of the pages that we were looking for. So notice the page header changes to Tours by Region, All Tours.
So now all that we would really need to do is go into each of those individual pages and plug in the content. So the jQuery Mobile integration that Adobe has added to Dreamweaver CS5.5 really does make it extremely easy to build front-ends for your mobile apps; however, without understanding jQuery Mobile, it could be hard to customize UI elements or even know which ones to use. So before we move on, I wanted to show you a great online resource for learning more about jQuery Mobile. So this is jquerymobile.com, and here if you click on the Docs and Demos, it's going to take you to working examples of jQuery demos.
As a matter of fact, if you sort of shrink this down, you can see how well this resource works, even on your phone. So you can go into things like, for example, buttons, and it'll teach you not only how to do the buttons, but it'll show all the different button icons, how to work with those, and what those are going to do for you. So it's a really easy resource to use, and combined with Dreamweaver's code hinting and the widgets that are already integrated into Dreamweaver, it makes it really easy to place one on my page, go to this, and figure out exactly how to customize it.
So now that we've seen jQuery Mobile, we're going to take the next step in building a mobile application by using Dreamweaver to configure our mobile app.