HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage
Total Page:16
File Type:pdf, Size:1020Kb
Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript. We assume that you’re already familiar with the basics of web-app development, so we focus only on the key concepts for implementing the Android app as a web app. Even, if you’re not familiar with web-app development, there are still two key takeaways from reading this chapter: • It’s possible to develop apps that run on Android devices without using native Android/Java development. • The app in this chapter runs on most web browsers, so using HTML5, CSS3 and JavaScript, you can develop apps that run on a broad range of today’s popular smartphones and tablets. Note that, although HTML5, CSS3 and JavaScript are portable technologies, you often must tweak your code to get web apps to work correctly across a wide range of devices. Favorite Twitter Searches web app executes in the device’s browser, as shown for an Android phone and an iPhone in Fig. 19.1 and for an Android tablet and iPad in Fig. 19.2. a) Running on an Android Phone b) Running on an iPhone Fig. 19.1 | Favorite Twitter Searches web app running on an Android phone and an iPhone. DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 3 Friday, May 18, 2012 10:32 AM 19.1 Introduction 3 a) Running on an Android tablet b) Running on an iPad Fig. 19.2 | Favorite Twitter Searches web app running on an Android tablet and an iPad. With HTML5, CSS3 and JavaScript, you can write apps that are portable among a great variety of desktop and mobile platforms, including Android and iOS (iPhone/iPad). Running an HTML5 app on your smartphone or tablet is as simple as opening it in the device’s HTML5-compliant web browser. The user can even install a shortcut to your app on the device’s home screen. This chapter demonstrates that you can create a web app with similar functionality to a native Android app. As with Chapter 5’s version of Favorite Twitter Searches, the user’s favorite searches are saved on the device, so they’re immediately available each time the app launches. In this web-based version, we use HTML5’s Web Storage APIs to store key-value data pairs. Figure 19.1(a) shows the app with several saved searches—the user can save many searches and scroll through them in alphabetical order. HTML5 presents an interesting opportunity for developers. The range of devices that support HTML5 is enormous compared to those that support native Android. Virtually all smartphones, tablets and desktop computers have browsers that now support HTML5. Though HTML5 is still under development, it’s continuously improving, so you’ll be able DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 4 Friday, May 18, 2012 10:32 AM 4 Chapter 19 HTML5 Favorite Twitter Searches App to use it to create an increasing variety of powerful web apps. We’re now writing HTML5 for Programmers: A Mobile App-Driven Approach in which we’ll convert most of the apps in this book to HTML5 for use in mobile browsers. 19.2 Test-Driving the Favorite Twitter Searches App Opening and Running the App Open the web browser on your Android device or your AVD and navigate to http://test.deitel.com/androidfp/fts/favoritetwittersearches.html Adding a New Favorite Search Enter from:Google in the top HTML5 "text" input element specifying your search sub- ject. Enter Google in the bottom HTML5 "text" input element (Fig. 19.3(a)). This will be the short name displayed in the Previously Tagged Searches section. Touch the Save Search Button to save the search and hide the keyboard—a Google hyperlink appears un- der the Previously Tagged Searches heading (Fig. 19.3(b)) and the soft keyboard is auto- matically dismissed. a) Entering a Twitter search and search tag b) App after saving the search and search tag Fig. 19.3 | Entering a Twitter search. Editing a Search To the right of each search hyperlink is a pencil icon ( ). Touch this to reload your query and tag into the "text" input elements at the top of the app for editing. Let’s restrict our search to tweets since February 1, 2012. Add since:2012-02-01 to the end of the query (Fig. 19.4). Touching Save Search updates the saved search. [Note: If you change the tag name, a new search is created—this is useful if you want to base a new query on a previ- DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 5 Friday, May 18, 2012 10:32 AM 19.2 Test-Driving the Favorite Twitter Searches App 5 Fig. 19.4 | Editing a Twitter search. ously saved one.] You can delete a search by touching the trash can icon ( ) to the right of a search’s hyperlink. Touching Clear Saved Searches removes all the searches from the favorites list—a dialog asks you to confirm this first. Viewing Twitter Search Results To see the search results touch the Google search query link. This opens the web browser and accesses the Twitter website to obtain and display the search results (Fig. 19.5). Fig. 19.5 | Viewing search results. DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 6 Friday, May 18, 2012 10:32 AM 6 Chapter 19 HTML5 Favorite Twitter Searches App Adding a Shortcut to the Device’s Home Screen in an Android 2.3.x Device To add a shortcut to your device’s home screen, perform the following steps: 1. Touch the bookmark icon ( ) to the right of the address bar in the browser to view the list of bookmarks (Fig. 19.6(a)). The web page you’re currently viewing shows up in the upper-left corner of the screen with a star and the word Add dis- played on top of the page. a) List of bookmarks b) Add bookmark dialog Fig. 19.6 | Viewing the bookmarks list on an Android 2.3.x phone and adding a bookmark. 2. Touch the word Add to display the Add bookmark dialog (Fig. 19.6(b)). If you like, you can rename the bookmark. By default the bookmark name is the HTML document’s title. 3. Touch OK to add the bookmark. 4. Once the bookmark is added, long touch it to display the menu in Fig. 19.7(a), then select the Add shortcut to Home option. The shortcut now appears on your home screen (Fig.19.7(b)). You’ll see how to specify the shortcut icon in Section 19.5.1 Adding a Shortcut to the Device’s Home Screen in Android 3.0 and Higher The process of adding a shortcut to the home screen in Android 3.0 and higher is similar: 1. In the browser’s address bar, touch the star icon at the right side to display the Bookmark this page dialog. 2. Customize the bookmark’s Label if you wish, then select Home screen from the Add to menu and press OK. DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 7 Friday, May 18, 2012 10:32 AM 19.3 Technologies Overview 7 a) Adding the shortcut to the home screen b) Shortcut on the home screen Fig. 19.7 | Adding the shortcut to your home screen. 19.3 Technologies Overview HTML5, CSS3 and JavaScript In this web-based version of Favorite Twitter Searches app: • HTML5 is used to define the elements of the web app’s interface • CSS3 is used to style those elements • JavaScript is used to implement the logic of the app. CSS Resets Each web browser provides its own default formatting for HTML5 elements. To ensure that you get the same look-and-feel for your app across browsers and devices, it’s considered a good practice to perform a CSS reset to remove all the default browser formatting before ap- plying your own CSS to a page’s elements.