Building Android Apps with HTML, CSS, and JavaScript, 2nd Edition

Adding the New Entry Panel

Example 4-5 shows the source code for the New Entry panel. Add this code to the end of index.html, before the closing </body>.

Example 4-5. The HTML for the New Entry panel

<div id="createEntry">
    <div class="toolbar">
        <h1>New Entry</h1>
        <a class="button cancel" href="#">Cancel</a>
    </div>
    <form method="post">
        <ul class="rounded">
            <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>

The first thing to point out about the New Entry panel is that rather than having a Back button, it has a Cancel button.

Note

Cancel buttons in jQTouch behave just like back buttons: they remove the current page from view with the reverse animation that it came into view. However, cancel buttons are not shaped like a left arrow as back buttons are.

I used a Cancel button here for the New Entry panel because it slides up on the way in, and will therefore slide down on the way out. It would be counterintuitive to click a left-pointing Back button and then have the panel slide down.

This HTML form contains an unordered (bulleted) list of three items: two text fields and a submit button. Embedding form controls in an li allows the jqt theme to style the form as shown in Figure 4-6.

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

Each of the text inputs has quite a few attributes defined:

type="text"

Defines the form control to be a single line text entry field.

placeholder

A string of text to display in the form input when the input is empty.

name

The name that will be associated with the value provided by the user when the form is submitted.

id

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.

The class attribute of the submit input button needs explanation. The 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-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.

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