topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
mobile-js-sample-chapter-6-6-3.htm / htm

  <!DOCTYPE html>
  <html>
    <head>
      <title>jQuery Mobile Application</title>
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
          <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
          <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
          <script src="json2.js"></script>
          <style>
  .ui-li .ui-btn-text a.ui-link-inherit { 
    white-space: normal;
    padding-left: 60px;
  }
  .ui-li-thumb {
          margin-top: 10px;
          margin-left: 10px;
  }
          </style>
    </head>
    <body>
            
          
            <!-- Begin: Main tweet list view -->
          <section id="pageTweetList" data-role="page">
            <header data-role="header" data-position="fixed">
              <h1>jqmTweet</h1>
                  <a href="#pageSettings" 
             data-transition="flip" 
             data-role="button" 
             data-icon="gear" 
             data-iconpos="notext" 
             class="ui-btn-right">Options</a>
        </header>
            <div class="content" data-role="content">
          <ul></ul>
            </div>
            <footer data-role="footer" data-position="fixed"><h1>O'Reilly <i>jQuery Mobile</i></h1></footer>
          </section>
          <!-- End: Main tweet list view -->
          
          <!-- Begin: Tweet detail view -->
          <section id="pageTweetDetail" data-role="page">
            <header data-role="header"><h1>jqmTweet</h1></header>
            <div class="content" data-role="content">
                  <div class="container-tweet">
                          
                  </div>
            </div>
            <footer data-role="footer"><h1>O'Reilly <i>jQuery Mobile</i></h1></footer>
          </section>
          <!-- End: Tweet detail view -->
          
          <!-- Begin: Settings page -->
          <section id="pageSettings" data-role="page">
            <header data-role="header"><h1>jqmTweet</h1></header>
            <div class="content" data-role="content">
                  <h3>Settings</h3>
                  <div data-role="fieldcontain">
            <label for="username">Twitter User Name:</label>
            <input type="text" id="username" value="">
          </div>
          <div data-role="fieldcontain">
            <label for="slider">Number of tweets to display:</label>
            <input type="range" id="slider" name="slider" min="5" max="50" value="">
          </div>
  
            </div>
            <footer data-role="footer"><h1>O'Reilly <i>jQuery Mobile</i></h1></footer>
          </section>
          <!-- End: Preferences page -->
          
          <a href="#pageError" id="show-error-page" data-role="button" data-rel="dialog" data-transition="pop" style="display: none">Show error page</a>
  
          <!-- Begin: Error page -->
          <section id="pageError" data-role="page" data-theme="e">
            <header data-role="header"><h1>jqmTweet</h1></header>
            <div class="content" data-role="content">
            </div>
            <footer data-role="footer"><h1>O'Reilly <i>jQuery Mobile</i></h1></footer>
          </section>
          <!-- End: Error page -->
          
    </body>
    
    <script>
  (function() {
    var methods = {
      initMainPage : function(options) {
        var settings = {
          callback: function() {}
        };
        if ( options ) {
          .extend( settings, options );
        }
            
            var page = $("#pageTweetList");
            var list = page.find(".content ul");
            
            // Set some defaults
            page.data("rpp", 20);
            page.data("twitterUser", "jreid01");
            page.data("boolUpdate", false);
            
            // Update the twitter feed for the first time
            updateTwitterFeed();
            
            // Every time we show this page we need to check to see if we need to update.
            page.bind("pageshow", function(event, ui) {
              if (page.data("boolUpdate")) {
                    updateTwitterFeed();
                    page.data("boolUpdate", false);
                  }
            })
      },
          
          
      initDetailPage : function(options) {
        var settings = {
          callback: function() {}
        };
        if ( options ) {
          .extend( settings, options );
        }
            
            var page = $("#pageTweetDetail");
            
            // Every time this page shows, we need to display a tweet detail
            page.bind("pageshow", function(event, ui) {
                    var objTweet = JSON.parse(page.data("tweetJSON"));
                  var strHtml = '<p><img src="'+objTweet.profile_image_url+'">' + objTweet.text + '</p>';
                  page.find(".container-tweet").html(strHtml);
            });
          },
          
          initSettingsPage : function(options) {
        var settings = {
          callback: function() {}
        };
        if ( options ) {
          .extend( settings, options );
        }
            
            // Current page
            var page = $("#pageSettings");
        // Page where data is stored
        var datapage = $("#pageTweetList");
            
            // If the user changes the username we need
            // to update the data stored in datapage
            page.find("#username").change(function() {
                    var newVal = this.val();
                  datapage.data("twitterUser", newVal);
                  // Set the refresh boolean
                  datapage.data("boolUpdate", true);
            });
            
            // jQuery Mobile doesn't have a change() event 
            // for the slider yet, so we need to check it
            // when the user leaves this page
            page.bind("pagebeforehide", function(event, ui) {
          var sliderValue = page.find("#slider").val();
                  if (parseInt(sliderValue, 10) != parseInt(datapage.data("rpp"), 10)) {
            // Update the data and set for refresh
            datapage.data("rpp", sliderValue);
                    datapage.data("boolUpdate", true);
                  }
            })
            
            // On page show we need to update the elements on
            // this page to reflect current data
            page.bind("pageshow", function(event, ui) {
          page.find("#slider").val(datapage.data("rpp")).slider("refresh");
                  page.find("#username").val(datapage.data("twitterUser"));
            })
            
          },
          
          
      initAll : function(options) {
        var settings = {
          callback: function() {}
        };
        if ( options ) {
          .extend( settings, options );
        }
            
            $().initApp("initMainPage");
            $().initApp("initDetailPage");
            $().initApp("initSettingsPage");
  
          }
    }
    
    
          
    .fn.initApp = function(method) {
      // Method calling logic
      if ( methods[method] ) {
        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
      } else if ( typeof method === 'object' || ! method ) {
        return methods.initAll.apply( this, arguments );
      } else {
        .error( 'Method ' +  method + ' does not exist' );
      } 
    }
  })(jQuery);
  
  document.ready(function() {
          $().initApp();
  })
  
  var updateTwitterFeed = function() {
    // First, call the page loading dialog
    .mobile.pageLoading();
    
    // Get the page and list we need to work with
    var page = $("#pageTweetList");
          
    // Build the URL we need
    var strUrl = "http://search.twitter.com/search.json?callback=?&rpp=";
    strUrl += page.data("rpp");
    strUrl += "&q=from:" + page.data("twitterUser");
    
    // Get the tweets and append them to the list
    .ajax({
      url: strUrl,
      dataType: 'json',
      success: function(data) {
  
            // Delete the existing list, if any
        page.find(".content").empty();
  
        // Are there even any tweets to display?
            if (data.results.length === 0) {
                    
                    // display an error message in the error dialog
                    var strHtml = "<h3>No Tweets Found</h3>";
                  strHtml += "<p>No tweets found for the Twitter user name " + page.data("twitterUser") + ".</p>";
                  $("#pageError .content").html(strHtml);
                  $("show-error-page").click();
                  
                  // Update the list page to reflect that no tweets were found
                  page.find(".content").html("<h3>No Tweets Found</h3>");
                  
                  // Hide the page loading dialog
                  .mobile.pageLoading(true);
                  
                  // and we're done.
                  return;
            }
  
        // Create a new list
            page.find(".content").html("<ul></ul>");
            list = page.find(".content ul");
            
        for (var i = 0; i < data.results.length; i++) {
                    
          // Build HTML that contains the desired information
          var strHtml = '<li><a href="#pageTweetDetail">';
          strHtml += '<img src="'+data.results[i].profile_image_url+'">';
          strHtml += data.results[i].text;
          strHtml += '</a></li>\n';
                    
          // Make it into a jQuery object...
          var tweet = strHtml;
                  
          // ...so we can append it to our list.
          list.append(tweet);
                    
          // Store the JSON data for this tweet
          list.find("a:last").data("tweetJSON", JSON.stringify(data.results[i]));
        }
            
            // Call the listview widget.
            list.listview();
            
            // Now that it's all done, hide the page loading dialog
            .mobile.pageLoading(true);
            
        // When the user taps on a tweet, it will go to the detail page.
        list.find("a").click(function() {
          var this = this;
                  // Pass the tweetJSON object over to the detail page so that it
                  // has the information it needs
                  $("#pageTweetDetail").data("tweetJSON", this.data("tweetJSON"));
            })
      },
          error: function() { 
          
            // Get the page
        var page = $("#pageError .content");
            
            // Build an error message
            var strHtml = "<h3>Update failed</h3>";
            strHtml += "<p>We were unable to update the twitter feed.  Please try again.</p>"
            
            // append it to the error dialog
            page.html(strHtml);
            
            // Show the dialog
        $("show-error-page").click();
            
            // Hide the page loading dialog
            .mobile.pageLoading(true);
      }
    });
  }
  
    </script>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.