Build a Location-Based Mobile App With HTML5 and Javascript: Part 2

This entry is part 2 of 6 in the series Build a Location-Based Mobile App With HTML5 and Javascript

Build a Location-Based Mobile App With HTML5 and Javascript

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="http://www.sitepoint.com/author/aderosa/">SitePoint.com</a>,
                     <a href="http://www.sitepoint.com/author/aderosa/">JSPro.com</a> and
                     <a href="http://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.

Build a Location-Based Mobile App With HTML5 and Javascript

<< Build a Location-Based Mobile App With HTML5 and Javascript: Part 1Build a Location-Based Mobile App With HTML5 and Javascript: Part 3 >>

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

No Reader comments

Comments on this post are closed.