Building cross platform mobile applications with PhoneGap Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

1. Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Móviles
Building Cross-Platform Mobile Applications
M.S.C. Raquel Vásquez Ramírez
M.S.C. Cristian A. Rodríguez Enríquez

2. Contenido
• Config XML
• Essential Properties: Config XML
• Uso de Config XML
• Preferences: Multi-Platform
• Preferences: iOS
• Preferences: BlackBerry
• Preferences: Android
• Storage
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 02 of 18

3. Config XML
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 03 of 18
Apps built using Adobe® PhoneGap™ Build can be set up
either through PhoneGap Build Web Interface or by using a
config.xml
The config.xml file, as specified in the W3C widget
specification, allows developers to easily specify metadata
about their applications.

4. Essen%al
Proper%es
(config.xml)
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 04 of 18
<widget>: The widget element must be the root of your
XML document - it lets us know that you are following
the W3C specification.
• id: the unique identifier for your application
• version: for best results, use a major/minor/patch style version,
with three numbers, such as 0.0.1
• versionCode: (optional) when building for Android, you can set the versionCode
by specifying it in your config.xml.

5. Notes:
BlackBerry only supports latin characters inthe <name> attribute.
BlackBerry should keep the <description> element at a reasonable length
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 05 of 18
Essen%al
Proper%es
(config.xml)
<name>: The name of the application.
<description>: A description for your application.

6. <?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"
id = "com.phonegap.example" versionCode = "10” version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>PhoneGap Example</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://build.phonegap.com" email="support@phonegap.com">
Hardeep Shoker
</author>
</widget>
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 06 of 18
Uso de Config XML

7. Preferences
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 07 of 18
<preference>: You can have zero or more of these elements
present in your config.xml. If you specify none, default
properties maybe applied.
• name: required
• value: required

8. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 08 of 18
Preferences: Multi-Platform
<preference name="phonegap-version" value="2.9.0" />
<preference name="orientation" value="landscape" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="true" />

9. More: https://build.phonegap.com/docs/config-xml
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 09 of 18
Preferences: iOS
<preference name="webviewbounce" value="false" />
Controls whether the screen "bounces" when scrolled beyond
the top or bottom on iOS. By default, the bounce is on.
<preference name="prerendered-icon" value="true" />
if icon is prerendered, iOS will not apply it's gloss to the app's
icon on the user's home screen. Default is false.
<preference name="prerendered-icon" value="true" />
if icon is prerendered, iOS will not apply it's gloss to the app's
icon on the user's home screen. Default is false.

10. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 10 of 18
Preferences: BlackBerry
<preference name="disable-cursor" value="true" />
Prevents a mouse-icon/cursor from being displayed on the
app

11. More: https://build.phonegap.com/docs/config-xml
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 11 of 18
Preferences: Android
<preference name="android-minSdkVersion" value="10" />
<preference name="android-maxSdkVersion" value="15" />
Android-minSdkVersion and/or android-maxSdkVersion, with
integer values
<preference name="splash-screen-duration" value="10000" />
splash-screen-duration with a value in milliseconds

12. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 12 of 18
Storage
PhoneGap provides access to the device's storage options. This
API offers storage options based on two different W3C
specifications:
• The Web Storage API Specification allows you to access
data via simple key/value pairs.
• The Web SQL Database Specification offers more full-
featured database tables accessed via SQL queries.

13. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 13 of 18
Storage: localStorage
var permanentStorage = window.localStorage;
var tempStorage = window.sessionStorage;
Plataformas Soportadas:
• Android
• BlackBerry WebWorkss (OS 6.0 and higher)
• iOS
• Tizen
• Windows Phone 7 and 8

14. var value = window.localStorage.getItem("key");
// value is now equal to "value”
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 14 of 18
Storage: localStorage
var keyName = window.localStorage.key(0);
Key Quick Example - Returns the name of the key at the specified
position
window.localStorage.setItem("key", "value");
Set Item Quick Example - Assigns a keyed item's value
Get Item Quick Example - Returns the item identified by the
specified key

15. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 15 of 18
Storage: localStorage
window.localStorage.removeItem("key");
Remove Item Quick Example - Removes the item identified by the
specified key.
window.localStorage.clear();
Clear
Quick
Example
-­‐
Removes all of the key/value pairs.

16. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 16 of 18
Storage: Database
var db = window.openDatabase("test", "1.0", "Test DB", 1000000);
openDatabase: Returns a new Database object.
var dbShell = window.openDatabase(database_name,
database_version, database_displayname, database_size);
Plataformas Soportadas:
• Android
• BlackBerry WebWorkss (OS 6.0 and higher)
• iOS
• Tizen

17. Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 17 of 18
Storage: Database
Objects:
• Database
• SQLTransaction
• SQLResultSet
• SQLResultSetRowList
• SQLError

18. Conclusiones
• PhoneGap permite configurar la aplicación a través
de un archivo de configuración XML
• Existen configuraciones especificas para cada
plataforma
• PhoneGap permite utilizar almacenamiento local
(Web y de base de datos)
• Hydra permite actualizar sin reinstalar utilizando
push, inclusive cuando se actualiza el esquema de
almacenamiento
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 18 of 18