In the first article of this series, I showed the features of the mobile app “Where I parked my car” and outlined an overview of the technologies that will be used for its implementation. In this article I’ll show you the source of all the HTML pages that make up the application, highlighting the key points of each one. I’ll also explain the short stylesheet that’s included.
The Homepage
Unless you build explicit custom configurations, jQuery Mobile will load all of the pages using AJAX so, all the files needed by “Where I parked my car”, such as the CSS and the JavaScript files, have to be loaded by the entry point, that is index.html.
The index page will show the title in the header and the credits (actually my name) in the footer, with a button to see additional details about the author (again, me). As explained in the first part, the index has three buttons: one to see and save the current position (where you parked the car), one to see your current position (and to view the route to the car), one to look at the previously saved positions.
Having said that, the code of the homepage will result in the following source.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where I Parked my Car</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/cordova-2.0.0.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/functions.js"></script>
<script src="js/maps.js"></script>
<script src="js/positions.js"></script>
<script>
$(document).one('deviceready', initApplication);
</script>
</head>
<body>
<div id="welcome-page" data-role="page">
<header data-role="header">
<h1>Where I parked my car</h1>
</header>
<div id="content" data-role="content">
<p>
Where I parked my car lets you bookmark where you parked your car on a map
and then find a route when you want to return to it. The app will also
save a log of your saved positions (up to 50).
</p>
<a href="map.html?requestType=set" id="set-car-position" data-role="button">Set position</a>
<a href="map.html?requestType=get" id="find-car" data-role="button">Find car</a>
<a href="positions.html" id="positions-history" data-role="button">Positions history</a>
</div>
<footer data-role="footer">
<h3>Created by Aurelio De Rosa</h3>
<a href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
</footer>
</div>
</body>
</html>You might note that, for the header and the footer of the application, I’ve used the new HTML5 <header> and <footer> tags instead of the generic <div>. Moreover, all the buttons inside the <header> and the <footer> tags, use the attribute data-iconpos="notext" that tells to jQuery Mobile to hide the text of the link. This attribute is very useful for small screens. However, as you’ll see later, I’ll attach an handler to the pagebeforecreate and the orientationchange events, so programmatically I’ll test for the size of the screen and, if a larger screen is found, the attribute will be removed and the text will be shown in full.
The Map Page
The map page (map.html) is probably the most important page of the application and, quite surprisingly, it’s also the simplest one. In fact, apart from the header containing the app’s title, it’ll have a single empty <div> where the map will be shown. (The map will be generated on-the-fly by the Google Maps API so you won’t have to worry about the markup.)
In conclusion, the full code of the map page is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where I parked my car</title>
</head>
<body>
<div id="map-page" data-role="page">
<header data-role="header">
<a href="#" data-icon="back" data-rel="back" data-iconpos="notext" title="Go back">Back</a>
<h1>Where I parked my car</h1>
</header>
<div id="content" data-role="content">
<div id="map">
</div>
</div>
</div>
</body>
</html>In the <head> section of this page, I haven’t put in the CSS and the JavaDcript files. I’ll rely on the standard AJAX mechanism of jQuery Mobile, so there’s no need to add them into the pages manually other than the entry point of “Where I parked my car”. As you may have noticed, in the <header> of the page, I put a “go back” button. There are two reasons for this, one less obvious than the other. The first and more straightforward is to enhance the usability. Regarding the second reason, remember that an app developed using jQuery Mobile and Cordova can be deployed on many operating systems. However, while the Cordova APIs work in almost the same way across all platforms, there are some substantial differences among physical devices. For example, the Android devices have a physical “go back” button, so if you want to go to the previous page, you can use that. Conversely, the iPhone does not have a physical “go back” button (other than the “home screen” button, which would exit the app entirely), so if you don’t build one into your interface, your iPhone users will be highly penalized.
Position History
The position history page (positions.html) will show you the list of the previously-saved positions, giving you the ability to search for a specific location and even delete one or more items. The page has an empty list that will be filled programmatically, as you’ll see later. The list has two key attributes to analyze that are data-filter="true" to notify jQuery Mobile that you want a search filter above the list and data-split-icon="delete" to set the icon on the right of the text shown in the list item (the address). The latter is used in the split button lists, a type of list where each item has two links that (should) execute different actions: a main action activated when the user clicks on the list item text (the first link text), and a secondary one activated through the button that replaces the secondary link text, positioned after the item text.
The complete source of positions.html is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Positions' history</title>
</head>
<body>
<div id="positions-page" data-role="page">
<header data-role="header">
<a href="#" data-icon="back" data-rel="back" data-iconpos="notext" title="Go back">Back</a>
<h1>Positions' history</h1>
</header>
<div id="content" data-role="content">
<ul id="positions-list" data-role="listview" data-inset="true" data-split-icon="delete" data-filter="true">
</ul>
</div>
<footer data-role="footer">
<h3>Created by Aurelio De Rosa</h3>
<a href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
</footer>
</div>
</body>
</html>The Credits Page
The credit page (aurelio.html) is the simplest one, and there aren’t special attributes or elements to analyze. It simply contains some information about the author, including a photo. You can see the code of the page below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelio De Rosa</title>
</head>
<body>
<div data-role="page">
<header data-role="header">
<a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
<h1>Aurelio De Rosa</h1>
</header>
<div id="content" data-role="content">
<div class="person">
<img class="photo" src="images/aurelio-de-rosa.png" alt="Photo of Aurelio De Rosa" />
<dl class="informations">
<dt>Email:</dt>
<dd><a href="mailto:aurelioderosa@gmail.com">aurelioderosa@gmail.com</a></dd>
<dd><a href="mailto:a.derosa@audero.it">a.derosa@audero.it</a></dd>
<dt>Twitter:</dt>
<dd><a href="https://twitter.com/AurelioDeRosa" target="_blank">@AurelioDeRosa</a></dd>
<dt>Information:</dt>
<dd>
I've a Bachelor degree in Computer Science. I'm a self-employed web developer
who have been worked for more than 2 years at the University of Salerno.
I'm also a technical writer for the <a href="http://ug.audero.it/">Audero user group</a>
and for the SitePoint network on <a href="https://www.sitepoint.com/author/aderosa/">SitePoint.com</a>,
<a href="https://www.sitepoint.com/author/aderosa/">JSPro.com</a> and
<a href="https://www.sitepoint.com/author/aderosa/">PHPMaster.com</a>.
I'm a very IT addicted and my main fields are web technologies, especially HTML, CSS,
JavaScript, PHP, jQuery, jQuery Mobile, PhoneGap and Zend Framework.<br />
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>Style Tuning
jQuery Mobile does a very good job enhancing the pages’ interface, nonetheless there’s always room for some style tuning. By default, even if you don’t have buttons within the header or the footer of a page, the framework still reserves some space on both side of the elements. So, if the text inside the header or the footer—usually a title as you’ve seen in the sources listed—exceeds this space, jQuery Mobile cuts the text and appends an ellipsis. However, this happens to other elements as well, and I don’t always want it to happen. So, in the very short stylesheet that I mentioned in the previous article called style.css, I changed it by applying the rule white-space: normal !important;. Another relevant point to discuss involves the <div> having the id of map. As said before, it’ll be filled programmatically by the Google Maps API, so at the beginning it doesn’t have its own height (it’s just an empty <div>). This means that if you don’t set a height, you won’t see the map, even if the Google Maps API is working. I set the height to 600px, but you can change it to fit your taste.
The source of the discussed stylesheet is listed below:
.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner *
{
white-space: normal !important;
}
.photo
{
display: block;
margin: 0px auto;
}
dl.informations dt
{
font-weight: bold;
}
#map
{
width: 100%;
height: 600px;
}Conclusion
In this part of the series, I’ve shown all the HTML pages of “Where I parked my car”, so now you’re able to navigate across them. However, at the moment, the pages are missing the business logic that will govern the functionality and interaction. In the next article, I’ll start explaining some of the JavaScript files that power the application and I’ll be going into deep of the Cordova APIs.
Aurelio De RosaI'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.
