Xây dựng ứng dụng cho Android với HTML, CSS và javascript - part 9 potx

backSelector '.back, .cancel, .goback' Any valid CSS selector; separate multiple values with a comma Defines elements that will trigger the “back” behavior of jQTouch when tapped.. cubeS

Trang 1

A unique identifier for the element in the context of the entire page.

autocapitalize

Allows you to control the autocapitalization feature in Mobile Safari on the iPhone Has no effect on Android.

autocorrect

Allows you to control the spelling correction feature in Mobile Safari on the iPhone Has no effect on Android.

autocomplete

Allows you to control the autocomplete feature in Mobile Safari on the iPhone Has no effect on Android.

phone will display a keyboard whenever the user’s cursor is in a field The keyboard has a Go button in the bottom right-hand corner that submits the form when clicked When you are hijacking the submit function as we are doing here, submitting from the Go button on the keyboard does not remove the cursor from the active field and therefore, the keyboard does not slide out of view To remedy this, jQTouch offers

a convenience method that automatically removes the cursor from the active field when a form is submitted To take advantage of this feature, add the submit class to the submit element of the form.

Figure 4-6 The jqt theme does a nice job styling form elements

Figure 4-7 shows the New Entry form in action At this point, we’ve done nothing to actually save the entry when the user clicks Save Entry We’ll cover that in Chapter 5

Trang 2

Adding the Settings Panel

We haven’t yet created a button that will allow users to navigate to a Settings panel, so let’s add one to the toolbar on the Home panel All it takes is a single line of HTML, shown in bold:

<a class="button flip" href="#settings">Settings</a>

</div>

<li class="arrow"><a href="#dates">Dates</a></li>

<li class="arrow"><a href="#about">About</a></li>

</ul>

</div>

remaining HTML not shown

This is the line of HTML that adds the button ( Figure 4-8 ) Notice that we’ve as-signed the flip class to the link The flip class instructs jQTouch to transition from the Home panel to the Settings panel by rotating the page on its vertical axis To give an added dimension to the process, the page actually zooms out a bit during the animation Fancy, no?

Unfortunately, support for 3D animations is spotty across mobile platforms, including Android Therefore flip, swap, cube, and any other 3D animations will failover to 2D animations when 3D is not supported.

Figure 4-7 Keyboard data entry with the New Entry form

64 | Chapter 4: Animation

Download from www.eBookTM.com

Trang 3

Figure 4-8 The Settings button added to the toolbar on the Home panel

After working on the New Entry panel, the HTML for the Settings panel is going to look pretty similar ( Example 4-6 ) There is one more text input and some of the attributes have been omitted or have different values, but conceptually they are iden-tical Add this to your HTML document just as you’ve done with the HTML for the other panels.

As with the New Entry form, the Settings form does not currently save any of the information associated with it (see Figure 4-9 ) Its submission handler will be described

in the next chapter.

Example 4-6 The HTML for the Settings Panel

<h1>Settings</h1>

<a class="button cancel" href="#">Cancel</a>

</div>

<li><input placeholder="Weight" type="text" name="weight" id="weight" /></li> <li><input placeholder="Budget" type="text" name="budget" id="budget" /></li> <li><input type="submit" class="submit" name="action"

value="Save Changes" /></li>

</ul>

</form>

</div>

Trang 4

Putting It All Together

So, there you have it With fewer than 100 lines of code, we’ve created a native-style

UI for a five-panel application complete with three different page transition animations See Example 4-7 for a complete listing of the final HTML Not too shabby, right?

Example 4-7 The complete HTML listing for the five-panel UI

<html>

<head>

href="themes/jqt/theme.css">

var jQT = $.jQTouch({

icon: 'kilo.png'

});

</script>

</head>

<body>

<a class="button flip" href="#settings">Settings</a>

</div>

<li class="arrow"><a href="#dates">Dates</a></li>

<li class="arrow"><a href="#about">About</a></li>

</ul>

</div>

Figure 4-9 The Settings panel

Trang 5

<h1>About</h1>

</div>

<div>

<p>Kilo gives you easy access to your food diary.</p>

</div>

<h1>Dates</h1>

</div>

<li class="arrow"><a id="0" href="#date">Today</a></li>

<li class="arrow"><a id="1" href="#date">Yesterday</a></li>

</ul>

</div>

</div>

<span class="label">Label</span>

<span class="delete">Delete</span>

</li>

</ul>

</div>

<h1>New Entry</h1>

</div>

<li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li> <li><input type="text" placeholder="Calories" name="calories" id="calories" autocapitalize="off" autocorrect="off"

autocomplete="off" /></li>

<li><input type="submit" class="submit" name="action"

value="Save Entry" /></li>

</ul>

</form>

</div>

Trang 6

<h1>Settings</h1>

</div>

<li><input placeholder="Age" type="text" name="age" id="age" /></li> <li><input placeholder="Weight" type="text" name="weight"

id="weight" /></li>

<li><input placeholder="Budget" type="text" name="budget"

id="budget" /></li>

<li><input type="submit" class="submit" name="action"

value="Save Changes" /></li>

</ul>

</form>

</div>

</body>

</html>

Customizing jQTouch

You can customize the jQTouch default behavior by sending a variety of property set-tings into the constructor You saw this previously with the icon property, but there are several others that you should be aware of ( Table 4-1 ).

Table 4-1 jQTouch customization options

addGlossToIcon true true or false If set to true, gloss will be added to the

home screen icon on iPhone Has no ef-fect on Android.

backSelector '.back, cancel,

.goback'

Any valid CSS selector;

separate multiple values with a comma

Defines elements that will trigger the

“back” behavior of jQTouch when tapped When the back behavior is invoked, the current panel moves off screen with a reverse animation and is removed from history.

cacheGetRequests true true or false If set to true, automatically caches GET

requests, so subsequent clicks reference the already-loaded data.

cubeSelector '.cube' Any valid CSS selector;

Defines elements that will trigger a cube animation from the current panel to the target panel.

dissolveSelector '.dissolve' Any valid CSS selector;

Defines elements that will trigger a dis-solve animation from the current panel

to the target panel.

fadeSelector '.fade' Any valid CSS selector;

Defines elements that will trigger a fade animation from the current panel to the target panel.

Trang 7

Property Default Expects Notes

fixedViewport true true or false If set to true, prevents users from

being able to zoom in or out of the page. flipSelector '.flip' Any valid CSS selector;

Defines elements that will trigger a flip animation from the current panel to the target panel.

formSelector 'form' Any valid CSS selector;

Defines elements that should receive the onsubmit handler.

fullScreen true true or false iPhone only; has no effect on Android.

When set to true, your app will open in full-screen mode when launched from the user’s home screen Has no effect on the display if the app is running in Mobile Safari.

fullScreenClass 'fullscreen' String iPhone only; has no effect on Android.

Class name that will be applied to the body when the app is launched in full-screen mode Allows you to write custom CSS that only executes in full-screen mode.

absolute path to a png

image file

The home screen icon for your app This

is the image that will be displayed when

a user adds a bookmark for your app to his home screen.

Defines elements that will trigger a pop animation from the current panel to the target panel.

preloadImages false An array of image paths Defines images that will be loaded

be-fore the page loads For example: ['images/link_over.png', 'images/link_select.png'] slideInSelector 'ul li a' Any valid CSS selector;

Defines elements that will trigger a slide left animation from the current panel to the target panel.

slideupSelector '.slideup' Any valid CSS selector;

Defines elements that will cause the tar-get panel to slide up into view in front

of the current panel.

startupScreen null null or a relative or

ab-solute path to an image file

iPhone only; has no effect on Android Pass a relative or absolute path to a 320px × 460px startup screen for full-screen apps Use a 320px × 480px image if you set statusBar to black-translucent.

Trang 8

Property Default Expects Notes

black-translucent, black

iPhone only; has no effect on Android Defines the appearance of the 20-pixel status bar at the top of the window in an app launched in full-screen mode. submitSelector '.submit' Any valid CSS selector;

Selector that, when clicked, will submit its parent form (and close keyboard if open).

swapSelector '.swap' Any valid CSS selector;

Defines elements that will cause the tar-get panel to swap into view in front of the current panel.

useAnimations true true or false Set to false to disable all animations.

What You’ve Learned

In this chapter, you’ve learned how to add native-looking animations to a web app using jQTouch In the next chapter, you’ll learn how to use the new local storage and client-side database features of HTML5 to add persistent data storage to your app.

Trang 9

CHAPTER 5

Client-Side Data Storage

Most software applications need to store data in some sort of persistent fashion in order

to be useful When it comes to web apps, this task has traditionally been handled with either a server-side database or cookies set in the browser With the advent of HTML5, web developers now have a couple more options: Web Storage, and Web SQL Database.

Web Storage

Web Storage comes in two flavors— localStorage and sessionStorage —and are very similar to cookies in that they allow you to use JavaScript to set name/value pairs that you can retrieve across multiple page reloads.

Unlike cookies, however, Web Storage data is not sent across the wire with the browser request—it lives entirely in the client Therefore, it’s feasible to store much more data than you would want to with cookies.

At the time of this writing, browser size limits for Web Storage are still

in flux However, my most recent tests indicate that the limit is right

around 2.5 MB.

Functionally, localStorage and sessionStorage are the same They differ only in terms

of persistence and scope:

localStorage

Data is saved even after the window is closed and is available to all windows (or tabs) that are loaded from the same source (must be the same domain name, pro-tocol, and port) This is useful for things like application preferences.

Trang 10

Data is stored with the window object Other windows/tabs are not aware of the values, and the data is discarded when the window/tab is closed Useful for window-specific state like active tab highlight or the sort order of a table.

In any of the following examples, you can substitute sessionStorage

anywhere you see localStorage, but remember that sessionStorage goes

away when you close the window or tab.

Setting a value is as simple as the following:

localStorage.setItem('age', 40);

Accessing a stored value is equally simple:

var age = localStorage.getItem('age');

You can delete a specific key/value pair from storage like so:

localStorage.removeItem('age');

Or, you can delete all key/value pairs like so:

localStorage.clear();

Assuming your keys are valid JavaScript tokens (e.g., no spaces, no punctuation other than underscores) you can use this alternate syntax:

localStorage.age = 40 // Set the value of age

var age = localStorage.age; // Get the value of age

delete localStorage.age; // Remove age from storage

The localStorage and sessionStorage keys are stored separately If you

use the same key name for each, they will not conflict with each other.

Saving User Settings to Local Storage

On to a practical example Let’s update the Settings panel of the example app you started working on in Chapter 4 so that it stores the form values in localStorage

We are going to be writing a fair amount of JavaScript in this chapter, and I don’t want

to jam it all in the head section of our HTML document To keep our code organized,

create a file called kilo.js in the same directory as your HTML document, and update the head of your HTML document with a reference to kilo.js:

<head>

href="jqtouch/jqtouch.css">

72 | Chapter 5: Client-Side Data Storage

Định dạng
Số trang	10
Dung lượng	3,66 MB