Click on any phrase to play the video from that point.
Hi, I'm Scott Fegette, Senior Product Manager for Dreamweaver.
We talked a little bit earlier about jQuery Mobile in general,
but I wanted to spend a little bit more time talking specifically about the jQuery Mobile page model
and what you'll find within it.
As I mentioned in one of the previous videos, jQuery Mobile is made to be very declarative.
You should be able to read it and work with it just like normal html.
In fact, that's all it is.
But let's take a look at what the special parts of the html are
and what makes that unique to a jQuery Mobile application.
You can see we've just got it in Design View right now, so we can edit all of these pages at once,
but, again, you'll notice jQuery Mobile pages aren't exactly pages,
as opposed to this one page we've created--actually has 4 pages in it.
And the pages themselves are just simply a div with a data-role of page.
Within that, there's usually 3 data-roles--divs and data-rolls--associated to them, that are always included.
Header--of course, the header of your page,
content area--that's your main content section; and your footer.
Footer and header are usually themed a little bit different; content is your area to work with.
That's really all there is; everything within it is just simply < h1 >s, unordered lists, list items--
markup that you're used to seeing.
Now, all you need to do to edit this is--we can come through very quickly and say, "Mobile App 2," "Mobile App 3."
You get the idea; we can very quickly mock-up the content around out application,
just by working in Dreamweaver's design view and seeing all these pages at once.
And we don't have to worry too much, because when we flip on Live View, we're going to get that application directly.
We can already see some things are happening; we have a little bit too long of a title here--to work with.
We can move that around a little bit.
Remember, you can always resize Dreamweaver's window to get a different view port.
And from here, we've got pages 2, 3, 4, and 5.
Unfortunately, I haven't created page 5 yet, so let's turn off Live View again--let's come down here.
Now, the best thing about jQuery Mobile, again, is that it's all declarative code, and it's all in one page,
as opposed to creating a new page, filling it with a bunch of information, and working,
all you really have to do is just copy an existing page, paste it on top, and let's change that to page 5.
Here, we can change the headline to Page 5, as well.
And maybe just make sure--page 5 content--
Save that, and when we flip back into Live View, now we can actually go right to that new page we created.
That's all there is at creating new pages within a jQuery Mobile application.
As you can see, it's very quick and simple to throw things together.
This navigation list that we have, I might also add, if you roll up to page 1,
you'll see it's nothing more than just a simple unordered list with a data-role of List View.
And that little data-role turns it into these nice little buttons with the icons that you see here,
to where your application has navigation pages--
everything all ready to go, all in one page.
So as you can see, working with jQuery Mobile is as easy as working with your existing markup
and just adding some content in.
All you need to do is start typing, and you can have a mobile application up super fast.
We like to think that Dreamweaver CS5.5 is going to really help you turbo-charge your mobile development workflow.
By all means, check it out, and keep posted to WTV Channel.
We'll be posting more tricks, tips, and little sneak peeks as we go.
Thanks for tuning in.
