Making It Look Good

Marty: “Wait a minute, Doc. Ah... Are you telling me that you built a time machine...out of a DeLorean?”
Doc: “The way I see it, if you’re gonna build a time machine into a car, why not do it with some style? ”
    From Back to the Future

jQuery.Mobile Sections

jQuery.Mobile uses a fairly simple structure for defining its page elements. By using data-role tags on a <div>, they define these basic areas: page, header, content, footer, and navbar. There are other areas that are defined and we’ll talk about them in Chapter 9, but these are the basic ones that you will use often.

The Page Section

<div data-role="page" data-theme="b">

This is the main section of the document that jQuery.Mobile uses to wrap around all of the following sections. Typically it will include a header, content, and footer section, but only the content section is required. The page element itself is not actually required. However, if you do not supply one the framework will add one, so it is a best practice to go ahead and define it.

The Header Section

<div data-role="header" data-position="fixed" data-theme="b">

  <h1>@ViewBag.Title</h1>

</div>

This section contains the information that should be shown in the header of the page. The optional data-position element can make this element stick to the top when the user scrolls the page. You can see here that I’ve shown the typical MVC Title tag so it will automatically display the page title in the header. Space is limited, so the title will be cropped if it doesn’t fit. We can insert any HTML we want here, but best practice is to use an <h1> for the title (You can also replace this with an image if you want something fancier). If you add one button in the header div, it will automatically move to the left side. If you add a second button, it will move to the right side automatically. You probably don’t want more than two buttons as any others will move to the second line and make the header bigger (use a navbar instead).

The Content Section

<div data-role="content" data-theme="d">

  @RenderBody()

</div>

This is the section where you will put most of your content. In the code sample I’ve shown the typical MVC tag that will render your view content.

The Footer Section

<div data-role="footer" data-position="fixed" data-theme="b">

The footer is very similar to the header, except maybe a little more flexible. We can put more than two buttons here, and they will be added inline, one after the other (not left aligned and right aligned like the header). By default, the footer isn’t formatted much, so you may have to add some other tags to make it look nice.

The Navbar Section

<div data-role="navbar">

This is a great place to put your navigation items. If you think about the normal desktop or Windows application design, we tended to use a lot of tab controls to group together related tab pages. This section provides you with a similar way of linking those pages together easily. If you put this into a partial view file, you can easily include it on any page that needs it. We’ll discuss this in more detail in the next section.

Putting Your Menu into a Tab Bar

Let’s convert the menu we started with into a fixed tab bar like you see at the bottom of most mobile applications, complete with icons. Currently, we have the following code on the home page of the mobile application for our menu items:

<ul data-role="listview" data-inset="true">

  <li data-role="list-divider">Menu Items</li>

  <li>@Html.ActionLink("Home", "Index", "Home")</li>

  <li>@Html.ActionLink("About", "About", "Home")</li>

  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

</ul>

Copy that code into a new file in our Shared folder and name it _NavBar.cshtml. Remove the fancy <ul> tag attributes and the list-divider row, and then wrap that in a div with the navbar tag we just looked at.

<div data-role="navbar" data-theme="b">

  <ul>

    <li>@Html.ActionLink("Home", "Index", "Home")</li>

    <li>@Html.ActionLink("About", "About", "Home")</li>

    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>

  </ul>

</div>

Remove the original menu code from the _Layout.Phone.cshtml and _Layout.Tablet.cshtml and add in your new partial view to insert the new navbar we just created in the header.

<div data-role="header" data-position="fixed" data-theme="b">

  <h1>@ViewBag.Title</h1>

  @Html.Partial("_NavBar")

</div>

Since we already have the data-position=fixed on the header tag, this header and navigation bar will always remain at the top of the page.

If you want to add icons to your navigation, simply add a data-icon tag to each of the links. jQuery.Mobile contains several built-in icons that you can use: arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, home, or search. You can add a data-iconpos tag on the navbar div to determine where to show the icons. Valid values for the iconpos tag include top, bottom, left, or right.

To make this example a little easier to read when putting this extra tag into our links, we’ll change them from @Html.ActionLinks to hrefs with @URL.Action tags, like this:

<div data-role="navbar" data-theme="b" data-iconpos="top">

  <ul>

    <li><a href="@Url.Action("Index", "Home")"

      data-icon="home">Home</a></li>

    <li><a href="@Url.Action("About", "Home")"

      data-icon="info">About Us</a></li>

    <li><a href="@Url.Action("Contact", "Home")"

      data-icon="check">Contact Us</a></li>

  </ul>

</div>

And that’s it—we’re all set to run the app and see how it works.

Menu Added in a Tab Bar

If you’d prefer to put your tab bar at the bottom of the page, you can put it in a footer section as shown in the following code sample:

<div data-role="footer" data-position="fixed" data-theme="b">

  @Html.Partial("_NavBar")

</div>

Either way works just fine—it’s more of a style preference for your website.

Other Tab Bar Considerations

There are a few limitations for the tab bar that you need to know about. If you specify up to five buttons, you should be fine (although your text may be cut off on a phone, so keep the text short). If you have more than six buttons, the navbar will switch to a mode where it has multiple lines with two buttons on each line. It is usually a good idea to keep a tab bar to five buttons or less.

If you want to use your own custom icons that are not in the standard jQuery.Mobile set, that’s actually fairly easy to do. We’ll talk about how to do that in Chapter 9.

If you want to have one of the icons light up when you are on that page, you can use the tag class="ui-btn-active" on that link.

If you are using a shared partial view navbar, this gets a little more difficult but can be done by querying the Model.GetType() attribute. Using that, you can determine what type of model is being passed to the page and therefore what page you are on and which button should be highlighted.

Alternate Syntax for the Navbar Links

In our previous example, we used the @Url.Action verb instead of @HTML.ActionLink because it makes it a little simpler to understand the example at first glance. It is possible to use either verb, but the ActionLink ends up being a little more complicated. Let’s see an example of it in action:

<div data-role="navbar" data-theme="b" data-iconpos="top">

  <ul>

    <li>@Html.ActionLink("Home", "Index", "Home", null,

      new Dictionary<string, object> {{ "data-icon", "home" }})</li>

    <li>@Html.ActionLink("About Us", "About", "Home", null,

      new Dictionary<string, object> {{ "data-icon", "info" }})</li>

    <li>@Html.ActionLink("Contact Us", "Contact", "Home", null,

      new Dictionary<string, object> {{ "data-icon", "check" }})</li>

  </ul>

</div>

If you’ve used MVC before, you’re probably wondering why we don’t use the simpler notation shown in the following code sample:

<li>@Html.ActionLink("About", "Home", null,
    new { data-icon = "home" })</li>

This is the notation MVC programmers frequently use to pass an ID value into an action. However, if you try to do this with a name like data-icon, you get the error “Invalid anonymous type member declarator.” If you translate that into English, that means, “You can’t use a name with hyphens.” Behind the scenes, our shortcut "new {}" code actually creates a dictionary for the ActionLink method. So in this case we can just go ahead and create a dictionary ourselves and then everything works just fine. Either method creates the same end product so it’s really a matter of personal preference.

Yet Another Alternate Navbar Syntax

There is one other possibility worth considering in this discussion of how to format these links.

<div data-role="navbar" data-theme="b" data-iconpos="top">

  <ul>

    <li>@Html.ActionLink("Home", "Index", "Home", null,

      new { data_icon = "home" })</li>

    <li>@Html.ActionLink("About Us", "About", "Home", null,

      new { data_icon = "info" })</li>

    <li>@Html.ActionLink("Contact Us", "Contact", "Home", null,

      new { data_icon = "check" })</li>

  </ul>

</div>

In MVC 3 and MVC 4, there is a feature that will automatically convert underscore characters (_) to hyphen characters (-) when they are specified in HTML attribute properties, since underscores are not legal in HTML attributes. Therefore, in this example, it would change our data_icon to data-icon in the final HTML. As with the last example, either method creates the same end product so it’s a matter of personal preference.

My personal opinion is that the trick with the underscore works but is a bit misleading. When using it, you are assuming that other programmers know this little tidbit of knowledge; otherwise they would be a bit confused looking at this code. In reality they all generate the exact same HTML, so it comes down to personal preference.

Creating Custom Themes and Colors

One of the really nice features in jQuery.Mobile is the support for themes. You can theme almost any section of your page by adding in the tag data-theme="x", where x is the style that you want to use, from A-E. The default themes are shown in the following figure.

Default jQuery.Mobile Themes

These themes use a cascading system. If you specify a theme for a container, the items within that container will use the color scheme specified unless another theme is chosen for them.

Even if you only use the default theme set, you have a nice-looking set of options and several choices you can make. But what if you want to use your own colors to match with your graphics or your company logo? Fortunately, jQuery.Mobile has teamed up with Adobe to create the jQuery.Mobile ThemeRoller site. If you want to see some good examples of what you can do, check out http://jqmgallery.com.

To get started with the ThemeRoller, navigate your browser to http://jquerymobile.com/themeroller/ and you will see the theme editor, but with a very bland gray palette. However, it’s easy to fix that. Click the Import button in the toolbar, click on the Import Default Theme link in the resulting pop-up, and then click the Import button, and voila—now you have the standard jQuery.Mobile themes to work with.

Now you can start customizing your palette of colors to match your perfect website. Make sure you have the appropriate swatch selected in the panel on the left, and then use the color pickers to adjust and fine-tune them. If you don’t make sure you have the correct swatch selected in the panel, you may end up changing the global colors and have to start all over again.

Here is my tribute to the good old “Hot Dog Stand“ theme (those of you old enough to remember Windows 3.1 may understand that reference, and you youngsters can Google it!):

Re-creation of the “Hot Dog Stand” Theme

If you are reading this on a Kindle e Ink device, it won’t be obvious, but this is a hideous red and yellow color.

When you are happy with your color choices, you’re ready to download it to your computer to use. Click the Download Theme link at the top and give it a name—in this case we’ll use HotDogStand. The download will give you a zip file that contains the style sheets plus some extra files, but we’re really just interested in two files: HotDogStand.css and HotDogStand.min.css. Extract those two files to your Content folder and then include them in your project.

If you were following along earlier, we created a custom bundle that would be minimized for our mobile pages in the BundleConfig.cs file. Go back into that code and comment out the existing jquery.mobile-1.1.0.css file and replace it with the file you just downloaded while keeping the jquery.mobile.structure file in the bundle:

public static void RegisterBundles(BundleCollection bundles)

{

  [… existing bundle code goes here… ]

  bundles.Add(new StyleBundle("~/Content/MobileCSS").Include(

    "~/Content/HotDogStand.css",

    "~/Content/jquery.mobile.structure-1.1.0.min.css",

    //"~/Content/jquery.mobile-1.1.0.css"

  ));

With these minor changes, you should be ready to go.

If you didn’t do a custom bundle, then you’ll have to edit the mobile layout files and put a reference in there to your new file.

If you’re still using the standard bundle that came as the project default, you’ll have to remove the jquery.mobile-1.1.0.css file from the directory (or rename it to end in something other than .css.)

As with any sharp tool, the ThemeRoller can be dangerous in the untrained hand, so make sure you consult with your graphic designer. Show your graphic designer how to use this tool and you can simply import the style sheet he or she produces directly.