Implementing the user interface

The user interface will be quite similar to the audio note edit view, with a couple crucial differences. Let's get started.

Getting on with it

First, we need to create the template in www/html/imageNoteEditView.html. I've marked the differences between the templates used for the audio note edit view and the image note edit view. Let's start by using the following code:

<html> <body> <div class="ui-navigation-bar"> <div class="ui-title"contenteditable="true">%NOTE_NAME%</div> <div class="ui-bar-button-group ui-align-left"> <div class="ui-bar-button ui-tint-color ui-back-button">%BACK%</div> </div> <div class="ui-bar-button-group ui-align-right"> <div class="ui-bar-button ui-destructive-color">%DELETE_NOTE%</div> </div> ...

Get PhoneGap 3.x Mobile Application Development HOTSHOT now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.