Book Image

PhoneGap 3.x Mobile Application Development HOTSHOT

By : Kerri Shotts
Book Image

PhoneGap 3.x Mobile Application Development HOTSHOT

By: Kerri Shotts

Overview of this book

<p>PhoneGap allows you to use your existing knowledge of HTML, CSS, and JavaScript to create useful and exciting mobile applications.<br /><br />This book will present you with 12 exciting projects that will introduce you to the dynamic world of app development in PhoneGap. Starting with their design and following through to their completion, you will develop real-world mobile applications. Each app uses a combination of core PhoneGap technologies, plugins, and various frameworks covering the necessary concepts you can use to create many more great apps for mobile devices.</p>
Table of Contents (21 chapters)
PhoneGap 3.x Mobile Application Development HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Designing the user interface


In a way, we already designed the user interface for this project when we designed the interface for the audio note edit view. Instead of a small control widget at the top that permits recording and playback, we'll display the image at the top of the view and have a button that permits image capture.

Getting on with it

Our project will have four views in it: the note list view, the text note edit view, the audio note edit view, and the image note edit view. The latter view is the only new view; everything else stays the same. As such, we only need to design the UI for one view!

Let's see what the UI design looks like for this view:

Our view is structured similarly to an audio note edit view, but instead of audio controls at the top, we have a picture at the top of the view in addition to a camera icon (which allows the user to take a new picture).

Note

The camera icon has an outline around it to help distinguish it from the surrounding image content. At the bottom...