O'Reilly logo

PhoneGap 3.x Mobile Application Development HOTSHOT by Kerri Shotts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Implementing the user interface

Next, let's implement the user interface. We need to define the template HTML, and then define the code. Again, it's very similar to the previous project.

Before we start writing code, let's define the view's model. It should appear very familiar by now, as shown in the following diagram:

Implementing the user interface

Getting on with it

First, create a new template at www/html/videoNoteEditView.html. It's very similar to our image note edit view's template. I've highlighted the differences in 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required