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>

Related Content you might be interested in

Current Title:

Small book image
PhoneGap 3.x Mobile Application Development HOTSHOT
Kerri Shotts
May, 2014 | 450 pages
No titles found
Table of Contents (21 chapters)
PhoneGap 3.x Mobile Application Development HOTSHOT
PhoneGap 3.x Mobile Application Development HOTSHOT
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Your First Project
Your First Project
What do we build?
Installing Node.js and configuring SDKs
Installing Cordova/PhoneGap
Creating your first project
Managing your project's platforms
Managing your project's plugins
Building your project
Deploying your project to a simulator/device
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
2
Localization and Globalization
Localization and Globalization
What do we build?
Creating the template
Creating a new project based on an existing template
Introducing the YASMF v0.4 framework
Determining the user's locale
Formatting numbers and dates
Translating text
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
3
Mobile Application Design
Mobile Application Design
What do we build?
Designing the user interface
Designing the data model
Implementing the Base Note data model
Implementing the Note Storage model
Implementing the note list view
Implementing the text note edit view
Implementing the CSS
Putting it all together
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
4
The File API
The File API
What do we build?
Covering the File API
Covering Promises and Q.js
Covering YASMF's FileManager file
Changing the Note Storage model
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
5
Working with Audio
Working with Audio
What do we build?
Covering the Media API
Designing the user interface
Designing the data model
Implementing the data model
Covering Hammer.js
Covering the view stack
Implementing the user interface
Putting it all together
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
6
Working with Still Images
Working with Still Images
What do we build?
Designing the user interface
Defining the data model
Covering the Camera API
Implementing the data model
Implementing the user interface
Putting it all together
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
7
Capturing Video
Capturing Video
What do we build?
Designing the user interface
Covering the Capture API
Covering native, native-like, and non-native alerts
Implementing the data model
Implementing the user interface
Putting it all together
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
8
Sharing Content
Sharing Content
What do we build?
Handling device events
Working with the sharing plugin
Modifying the text note edit view
Modifying the image note edit view
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
9
Devices of Different Sizes
Devices of Different Sizes
What do we build?
What is responsive design?
Response 1 – scaling up
Response 2 – changing the layout
Response 3 – split view
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
10
Maps and GPS
Maps and GPS
What do we build?
Designing our app's UI and its look and feel
Exploring geolocation
Designing our data models
Loading the Google Maps API
Implementing our data models
Implementing our path edit view
Putting it all together
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
11
Canvas Games and the Accelerometer
Canvas Games and the Accelerometer
What do we build?
Designing the game
Implementing the Start view
Implementing the Options view
Implementing the Game view
Generating levels
Drawing on the canvas
Performing updates
Touched-based input
Accelerometer-based input
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
12
Building a Backend – Working with Parse
Building a Backend – Working with Parse
What do we build?
Configuring Parse
Modifying the Options view
Submitting scores
Displaying scores
Modifying the Start view
Game Over..... Wrapping it up
Can you take the HEAT? The Hotshot Challenge
User Interface Resources
User Interface Resources
Flat versus skeuomorphic
Human Interface/Design Guidelines
Mobile pattern references
User interface frameworks/libraries
User interface tips
Tips, Tricks, and Quirks
Tips, Tricks, and Quirks
Tips
Android quirks
The Android Emulator is slow
iOS quirks
Index
Index

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>
    </div>
    <div class="ui-scroll-container ui-avoid-navigation-bar">
      <div class="image-container...
Previous Section
End of Section 7
Next Section