Click on any phrase to play the video from that point.
Hi. I'm Greg Rewis, principal evangelist at Adobe.
I'd like to talk to you about Creative Suite Web Premium 5.5
and specifically how Dreamweaver® CS5.5 can help you create content for mobile devices
using the jQuery Mobile framework.
Now, jQuery you may already be familiar with,
but the team at jQuery has expanded beyond simple desktop
JavaScript frameworks and is now offering a jQuery Mobile framework
that Adobe is happy to be a sponsor of and contributor back to the project.
As part of that, we've integrated jQuery Mobile directly here into
Dreamweaver® CS5.5.
Let's take a look. Now I'm going to start by just creating a brand-new
HTML document using my New Document command.
And instead of using one of my blank starter templates, as you might
be familiar with, I'm simply going to click on Page from Sample
and go to my Mobile Starters folder, where you can see that I have
three different starter layouts to begin with.
Now the first one is jQuery Mobile, and it has CDN beside it.
This is a mobile framework or a mobile page that is linking back to the
mobile framework stored out on a CDN, out on Google code repository,
if you will, that we can link to to always ensure
that we have the most current version of the jQuery Mobile framework.
Now, if you're building things and you want to have a little bit more control,
you want to have control over which version of jQuery that you're working with,
or perhaps you're going to package this up on your own, then you might want to
use the jQuery Mobile Local option.
Now this means that we're going to actually copy the jQuery files into your site
definition and have everything on your local computer.
I'm going to do that for the purposes of demonstration here.
I'm going to go ahead and create this, again, as an HTML5 document.
And you can see once we have created this we have what appears to be
page one, two, three, four--hmmm.
It looks very interesting, but I'm not sure what this is. If we look down through our code
on the left-hand side, you can see that this is simply a page that's been created
with a bunch of divs, each div having an ID of page and a role of page.
Now let me explain a little bit to you about the way that jQuery Mobile works.
A jQuery Mobile site, if you will, can be a collection of pages just as we're familiar with.
But it also can be a self-contained single page where divs represent the pages themselves.
Now, what does all this look like?
Well, I'm sure you've probably gone to a site on a mobile device,
on your iPhone or your Android phone, and it sort of looked not like a regular
web site but more like an application.
Well, this is what the jQuery Mobile framework offers for us.
Let's go ahead and save this page first so that you can see a couple of things happening.
We'll save this as jqmobile.html in my site definition.
Now, once I save this, Dreamweaver immediately says, "Hey!"
"Remember you chose that option of jQuery Mobile local?"
In other words, it says, "I'm going to offer to copy over all of the necessary
elements--" the CSS, the JavaScript, and perhaps any
images that might be needed in order to represent this particular page
for us into our local site definitions.
So let's go ahead and let it do that.
Now, again, no changes here beyond just the linking to those
JavaScript and CSS files.
But watch what happens now when we turn on our live view.
Clicking the live view, wow! We actually see the representation
as the JavaScript and the CSS has kicked in.
We see we have page one, okay, well, that's the one we're on.
Then page two, three, and four.
If we click on an individual page, we're actually, ooh, wow--animated.
Not just taken over there--we're animated over to that particular page.
Now, I didn't see a back here in my page.
If I look down through the code, nope. I'm on page three, looking down at page three.
I certainly do not see a back button in page three.
This is because the jQuery Mobile framework has actually created
that back button dynamically.
And it is attached to the browsing history of the viewer.
So when I click upon it, we go back to the page from which we came.
Now what if I wanted to customize this, make it my own?
Maybe add a page? What would I do?
Well, of course, I'm just going to scroll down here to the bottom
where we see the end of that page called page four, and I want to add a new page.
Of course, I could probably just copy and paste, but even better,
Dreamweaver® CS5.5 offers jQuery Mobile objects, or widgets, to drag and drop
onto our page. Now, I want to put a new page in there, as I said,
so here is the page element.
When I click to insert that, we're actually inserting it--oh, whoops.
That was actually click right before page five, so let me just cut that out
and go place my cursor in here after page four. There we go.
It doesn't really matter, the order, because we're going to link to these elements.
This one has, again, an ID of page five. Dreamweaver has intelligently
looked at the layout and assigned a unique ID for me.
Now I can go ahead and make changes here, so let's say, my header.
This is Greg's page.
And the content would be some content from me, so let's say [typing]
some content from Greg.
And this is where we want to see when we go to that page.
Looking back over here in our page one, however,
we don't even have the ability to get to page five. Why?
Because, of course, each one of those elements here--
page two, page three, page four--they are actually links.
And if we scroll back up here, in page one, we can see it's just an unordered list.
So I'm going to copy and then I'm going to paste another link,
and I'm going to link over to the ID of page five.
And we'll, of course, call that Greg's page.
So we'll change the text, and that's where I would like to go.
As I click back in my live view, we can see that Greg's page, of course, has been added.
As I click on Greg's page, we're taken over to that page that I just created for you,
Hitting the back button? Back to our home once again.
Now, this is really amazing, and it's just
CSS and JavaScript and some HTML markup.
Being that it's CSS means that we also could change the look
of the pieces on the page.
Now, of course, if you want, you can dive in and do this all by hand,
but one of the things that I'm most excited about with the jQuery Mobile framework,
is that I don't have to "hand code" my CSS if I don't want to
to make sweeping changes to my application.
Let's say, for example, that we want to change this.
We don't want it to have this dark color scheme,.
Well, one of the other great things that jQuery Mobile framework offers is theming,
Now if I just hit my spacebar in my code, you can see that I'm given hints
for attributes that are available to me for the div that I am currently in.
jQuery Mobile extends HTML5 using the data object.
You can see that I'll drill down to data, and as I type that dash,
we have a whole bunch of other things that we can do such as the data theme.
So I'm going to choose Data Theme here, and notice that now I have a list
of six different themes that I can use.
Let's try B. Because A is the default, it's the one that we're looking at.
When I click back over in my page to have it refresh,
you can see that I have a completely different look,
sort of an old-school iPhone look, if you will,.
If I want to make another change? Well, again, just simply change to, let's say, C,
and have our page refresh again, and there's a much lighter scheme.
I sort of was partial to that B, so let's go back to that.
So we'll go take a look at this on our mobile device.
Let's go ahead and hit our Go button here to connect,
and there we have our connection.
And, again, I can type--or tap, excuse me, to move between my pages
just as I would be experiencing on a mobile device.
So my site has been optimized for this mobile viewing experience
using the jQuery Mobile framework.
Again, I'm really excited about this and even more excited to have the
jQuery Mobile framework baked right into Dreamweaver® CS5.5.
[Adobe TV - tvadobe.com]
