Intro to Business Catalyst jQuery Mobile

This video is an introduction to jQuery Mobile and using it to create mobile apps for smart phones and touch devices with Adobe Business Catalyst.

Thursday, June 23, 2011 - Posted by Brian Lowry to Technical How-tos

Video Transcript

This video is an introduction to jQuery Mobile and using it to create mobile apps with Adobe Business Catalyst. JQuery Mobile is going to allow you to easily go beyond just making a smaller version of your website, and help you to create an experience that is designed for smart phones and touch devices.

So what we're going to do is we are going to set up BC to automatically recognize if somebody is using a phone. And if they do, we're going to serve them this alternate content, that we're going to create in BC. It's going to be optimized for their touch devices. So here, you can see this is just my install of Chrome on my desktop. I just have made it smaller so it kind of resembles a mobile screen. All we have here is we have the header. We have a nav bar. We have two web pages, home and about us. All they are is static pages. These content areas are editable, in BC, by the client. We have a contact us button. If we click on one of these links, the content slides to show the other page and it automatically generates a back button.

Now all these nav bars and buttons are set up to be easy to use by people who are using their fingers on their screen. So if you just take your regular website and make it display on a mobile device, a lot of those links are really hard to get to. Another nice feature we're going to set up in this video is we're going to fix our header area, so that if you're on a page with a lot of content, like this one right here, when someone scrolls, the header area disappears. But if they stop, it comes back so they can still use that nav bar wherever they are on the page.

First thing you're going to want to do is go to BusinessCatalyst.com. Go to their blog and look for the blog post, "Introducing Tablet and Phone Support for Sites." Scroll down to where you see redirect visitors to mobile site version. This code right here is going to need to be put into any of your regular site wide templates. You're going to create a new site wide template for your mobile site. This doesn't need to be in that one, but your other site wide templates, you're going to need to put this snippet into it. You're going to change this URL, right here, to the URL where your mobile site is going to be.

For me, what I'm going to show you today, I set it up just exactly like this with the domain, and then I did slash, M, slash. That's exactly how I set it up. So all you have to do to make this work is create a folder called M, and you're going to put your new web pages in there. Those web pages are going to use your mobile template.

Now if we jump over to Business Catalyst and look at web pages, you can see that I created the folder called M, and inside that folder I just have two web pages. Each of these pages is using the mobile site wide template that I created. In the content in this, all I did was put loren ipsum in there. You saw it when I was showing you the site we're creating. So it's nothing big right now, just static content. If we jump over to site wide templates, you can see that we have the mobile template. Here it's not a lot of code, and we will switch over to Dreamweaver to cover that.

So here's the code we used for our mobile template. It is a HTML5 document. The lines of code you need to call in the jQuery Mobile framework are these right here. They are all available from jQuerymobile.com. This file will be available as a download under this video. So the first line right here is just the style sheet, and that's the jQuery Mobile style sheet. This second one right here, all that is, is jQuery. Just like you would install it anytime on your site, that's just calling in the regular jQuery framework. Then this third one is the actual jQuery Mobile framework that layers on top of that jQuery framework. So all three of these are required to use the mobile framework.

Whenever you set up your page structure, jQuery is going to look for these data-role attributes to know how to treat different parts of your page. So when you set it up, you're going to have an outer div, that's going to be data-role of page, and within that div, the div that's your header is going to be data-role header. Then you're going to have data-role nav bar, and that's within the header. Or you can put it within the footer, if you want your nav at the bottom. You're going to have data-role content. I don't have a footer on here, but below data-role content, I could put another div and call it data-role footer. If I wanted to put my nav bar in that, I can do that. It's fine.

So if we look at our site, you see this right here is data-role header. This is data-role nav bar. This is data-role content, and then this here is just a link that I have, at the bottom of the page, right here and it is data-role button. Data-role button is what gives it this style right here. Another thing you'll notice is these data theme. I have this one set to data theme A. Then down here I have the button set to data theme E.

If we jump over here, this is the jQuery Mobile framework demo site. If we go to theme framework, you can see exactly how that works. There are multiple themes in the framework, and whatever letter you set it as is going to determine the look of that element. Of course, you can override these with CSS, and you can even download the CSS and edit it. You can change anything you want, but this gives you a good base for creating basically anything you need to.

So each option, each item has a theme option of A through E, and it affects each of them a little differently depending on what kind of element you're using on your page. Here's our button.

So you want to look at the jQuery Mobile demo, or just experiment by using the A through E and just seeing which one you like best.

Another attribute we're going to look at is buttons icons. I'm going to see if I can find a good one. I didn't put one on the contact button yet, so we're going to go ahead and just pick one out. We'll just use this check. So here in our code we're going to type "data-icon check." Let me go ahead and stick that into the BC. Sorry about that. Now our contact button has a check icon.

It's the same way I applied these icons to the navigation. If you look right here, we have data-icon home, and data-icon info, and that is what designated these two icons. If we jump back over to jQuery, you can see that there's a bunch for you to choose from. Then if you scroll all the way to the bottom, there are options for positioning and for doing custom icons.

If you look right here on the header, we also have data-position equals fixed, and that is what causes the header to stay fixed to the top and as I scroll down, it comes back.

So hopefully that will help you get started doing some mobile development in BC and give you a quick look at jQuery Mobile. I think what I'm going to do is do a follow-up video to this one, now that we've got a good look at it. I'm going to do something with a web app and a list of something dynamic and something that our clients could edit, maybe like a store locator, something like that. If you have any ideas about what you'd like to see done as a follow-up to this, go ahead and let me know. Thanks for watching.

comments powered by Disqus