Pickup Soccer with jQuery Mobile - Exercise

Contact Us or call 1-877-932-8228
Pickup Soccer with jQuery Mobile - Exercise

Pickup Soccer with jQuery Mobile

Duration: 25 to 35 minutes.

Let's use the Rapid Interface Builder to create a mobile-optimized page for the Pickup Soccer site. We'll add a simple header and footer, style with the page with one of the stock jQuery themes, and use some collapsible elements to let the user pick from a few different content choices:

  1. Visit the Rapid Interface Builder from a Chrome browser;
  2. If prompted, click OK to allow 01.org to "store large data on your computer" - the prototyping tool uses local storage to save your work on your browser;
  3. Edit the "Header" and "Footer" titles (by double-clicking on them) to present appropriate content;
  4. Drag three "Collapsible Section" elements to the center portion of the layout window - select "jQuery Mobile" from the "Widget Sets" category in the "Widget Categories" at upper right, if needed;
  5. Change the title of each "Collapsible Area" (again, by double-clicking) to an appropriate word or phrase;
  6. Add content to each collapsible area: add plain text, add an image (you can upload an image from your computer/network), or try out some of the other jQuery Mobile-specific elements like button groups, grids, or accordions.
  7. Optionally, change the "theme" property of any element (or all elements) to see how using the stock jQuery Mobile themes - lettered from "a" to "e" - to change the appearance of your page;
  8. When you are satisfied with your page, click Preview at upper left to view your design - you can switch between "Layout" and "Preview" mode to make and view changes;
  9. Click Code at upper left to view the code that rendered your final design;
  10. Click Export at upper right to export (choose "zip" format) a copy of the finished project; if possible, save the project files to a web-accessible server and view on a smartphone to test it out with an actual mobile device;
  11. Open the file in an editor to check the code.

Solution:

jQueryMobile/Solutions/soccer/index.html
<!DOCTYPE html>
<html>
    
    <head>
        <title>title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="lib/jquery-1.6.4.js"></script>
        <script src="lib/jquery.mobile-1.1.0.js"></script>
        <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
        <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
    </head>
    
    <body>
        <div data-role="page" id="page1">
            <div data-role="header" data-theme="e">
                <h1>Pickup Soccer</h1>
            </div>
            <div data-role="content">
                <div data-role="collapsible" data-theme="e" data-content-theme="e">
                    <h1>Schedule</h1>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <span>Sat 1/25</span>
                        </div>
                        <div class="ui-block-b">
                            <span>Barry Park - 1 pm</span>
                        </div>
                        <div class="ui-block-a">
                            <span>Sun 1/26</span>
                        </div>
                        <div class="ui-block-b">
                            <span>PS 122 - 2 pm</span>
                        </div>
                        <div class="ui-block-a">
                            <span>Mon 1/27</span>
                        </div>
                        <div class="ui-block-b">
                            <span>PS 122 - 7 pm</span>
                        </div>
                    </div>
                </div>
                <div data-role="collapsible" data-theme="e" data-content-theme="e">
                    <h1>About Us</h1>
                    <span>Perfect for any ability, Pickup Soccer offers informal games at set times across
                        our community.</span>
                    <img src="images/twolegsball.jpg">
                </div>
                <div data-role="collapsible" data-theme="e" data-content-theme="e">
                    <h1>Contact</h1>
                    <span>123 Fake Street, Anywhere, USA</span>
                </div>
            </div>
            <div data-role="footer" data-theme="e">
                <h1>Find a Game. Now.</h1>
            </div>
        </div>
    </body>

</html>

Code Explanation:

Not much coding to do here - none, really! The Rapid Interface Builder has done all the work for us. Of course, the WYSIWYG builder has its limitations - more advanced behaviors would require some custom coding. In addition, the tool renders code from an older (but certainly still viable) version of jQuery Mobile. But a nice way to start!

As you dig through the code from our solution, note that we used a jQuery Mobile "grid" element for the "schedule" content and that we used theme "e" for all elements, giving the header, footer, and various widgets a yellow color scheme.

Note, too, that the Rapid Interface Builder gathers together all of the files we need for our mobile-optimized page into directories: source for the jQuery and jQuery Mobile libraries, images for any images, etc.

Next