Click on any phrase to play the video from that point.
[CS6]
If you've ever played with JQuery Mobile, you'll know that
one of the most interesting facets of the JQuery Mobile framework
is the ability to actually skin or change the theme
of your mobile application.
Sadly, trying to do that with CSS is rather difficult,
but that's where Dreamweaver CS6 comes in yet again
because we've got a brand-new JQuery Mobile Swatches panel
that allows us to more easily, A, see what we are theming,
and B, actually apply the theme to the individual objects.
Let's take a look.
You'll remember in Dreamweaver CS5.5 we introduced
JQuery Mobile by giving you some starter layouts.
You'll notice we have a couple extra ones now,
the JQuery Mobile with theme option.
Now basically when you choose this, it's exactly the same
as choosing the JQuery Mobile Local version
except we've actually broken out the CSS,
the CSS for the theme, that is,
so it's actually a separate CSS file.
I'll go ahead and use that now.
Now you might be asking yourself why would I want to do that?
Well, if you're going to modify the theme,
it's nice to have it broken out into its own style sheet,
even more importantly, if you want to create your own styles,
in other words, your own theme, perhaps using Fireworks
and Fireworks CS6's new ability to actually export JQuery Mobile themes.
Then it's much easier to swap those in.
Here we have our JQuery Mobile page,
and I'll just go ahead and make it look more like a mobile phone,
so we'll just use our Window Size Manager to give it the proper size
and even turn on our live view so that we can see what that's going to look like.
But before we go any further, we'll need to save the document
so that Dreamweaver is prepared to let us modify our themes.
We'll go ahead and hit "Save," and we'll just call this "index.html."
And again, Dreamweaver, just like in the past in Dreamweaver CS5.5,
is going to offer to copy over all of our necessary JavaScript files,
CSS, images and so on that make up the theme.
But you'll notice that we, again, have broken out that CSS,
so there's that theme file right there.
We'll copy that over, and now we're ready to begin the process of theming.
Now again, in the past I would go into split view
in order to do this and perhaps scroll down on my page
to find the element, maybe just the page itself, that I wanted to theme.
Then I would begin typing.
I would say something like "data-theme"
and then be presented with a list of available themes.
Now JQuery Mobile comes with several themes
already built in, as I said, so let's just choose B.
I'll go ahead and choose that, but then I need to, again,
go back over to my page, refresh that
to see what I've actually got.
I didn't know that was going to turn blue because unless you're very, very
familiar with the individual themes, you don't know
what they look like, and that's the problem.
But let's see how we solve that with Dreamweaver CS6.
I'll just delete that theme that I've just created,
and I'm going to now open up the brand-new JQuery Mobile Swatches panel.
Now when I open this up, you'll notice, wow, look. Themes.
It says that we haven't applied any themes yet,
and so it's giving me the option of not only applying them
but seeing the individual themes themselves.
I can apply that overall theme just as you saw me do a moment ago,
and that's being applied to the entire page.
But let's say I want to get a little bit complicated.
Maybe I want to combine certain elements of themes.
As I begin to click around, you'll notice that the panel once again changes.
It says, "Oh, you want to change a theme for the header?"
Or perhaps, as I click into the footer, the theme for the footer.
I can actually mix and match the individual pieces themselves.
When this gets even more interesting is, again,
as you begin to build your own themes.
Again, perhaps using Fireworks CS6
to actually theme your JQuery Mobile application
and look completely different than a standard JQuery Mobile app might look like.
In fact, that's what I've done here for The Pluralist.
You'll notice this doesn't look like your typical JQuery Mobile
application or theme at all because, again,
I've gone in in Fireworks CS6 and created
my own complete theme.
In fact, I even threw away all of the themes that I wasn't using
and now have 3 options.
And you'll notice, again, as I begin to navigate into my application,
every aspect of my JQuery Mobile application can be themed.
Here we see the theme that I'm using for my list.
As I drill even further in, let's say maybe we wanted to
change something like this button.
I'll just inspect that to select it here,
and you can see here we even have our JQuery Mobile button.
I have all the available icons, so if I wanted to change that
from a dial pad--although I don't know why I would--
maybe to an information icon, there we go.
No, I think the dial pad looks a little better.
But maybe I want to experiment a little bit with placement.
Let's see what it would look like if the button was on--
no, that doesn't look good.
Let's go back to the way it was over there on the left.
So you can see that using the JQuery Mobile Swatches panel,
it really opens up a world of creative possibilities for me
here in Dreamweaver CS6.
[Adobe]
