minicurso phonegap parte 3

Tema Empreendedorismo e Inovao na Sociedade da InformaoPalestra ou Minicurso

Desenvolvendo paraAndroid com PhoneGapPalestrante ou Professor (Profissional)Petterson Ferreira de PaulaKaio Cezar Miranda G. AraujoAnderson Malagutti

quarta-feira, 23 de janeiro de 13

+quarta-feira, 23 de janeiro de 13

+Exemplo de Layouts


+Criando um novo projeto


+Configurando o projeto



...phonegap-phonegap-2dbbdab\lib\android\cordova-2.2.0.jar

...workspace\JqueryMobile_PhoneGap\libsCopie para



...phonegap-phonegap-2dbbdab\lib\android\cordova-2.2.0.js

...workspace\JqueryMobile_PhoneGap\assets\wwwCopie para




...phonegap-phonegap-2dbbdab\lib\android\cordova-2.2.0.jar




...jquery-1.8.3.min.js



...workspace\JqueryMobile_PhoneGap\resCopie para

...phonegap-phonegap-2dbbdab\lib\android\xml



package com.example.jquerymobile_phonegap;

import org.apache.cordova.DroidGap;import android.os.Bundle;

public class MainActivity extends DroidGap {

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/hello.html"); }}

MainActivity.java


+Exemplo 1 - Hello World - JqueryMobile

jQuery Mobile Demo

hello.html



Page Title

Hello World!

Page Footer

hello.html


+package com.example.jquerymobile_phonegap;



@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/NavAndDialog.html"); }}

MainActivity.java

Exemplo 2 - Page Nav and Dialog Example - JqueryMobile


+Exemplo 2 - Page Nav and Dialog Example - JqueryMobile



jQuery Mobile Demo

Main Page

Page Nav and Dialog Example

NavAndDialog.html



Page Navigation Open Dialog

Main Page Footer

Second Page

Second Page

NavAndDialog.html



Click back to go back to main page

Dialog Title

Dialog body

Click close button to go back to main page

NavAndDialog.html


+Exemplo 2 - Page Nav and Dialog Example - JqueryMobile


+Exemplo 3 - Toolbars and Buttons- JqueryMobile




@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/ToolbarsAndButtons.html"); }}

MainActivity.java


Exemplo 3 - Toolbars and Buttons- JqueryMobile

jQuery Mobile Demo

CancelEdit ContactSave

ToolbarsAndButtons.html



ToolbarsAndButtons.html

Header Footer Toolbar Example

RemoveAdd Up Down






@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/FormElement.html"); }}

MainActivity.java



FormElement.html

jQuery Mobile Demo

CancelEdit ContactSave



FormElement.html

Simple Form Elements

Text Input:

Textarea:

Search Input:



FormElement.html

RemoveAdd Up Down


+Exemplo 4 - Read and Write Text File- JqueryMobile




@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/ReadWriteFileJQueryMobile.html"); }}

MainActivity.java


Exemplo 4 - Read and Write Text File- JqueryMobile

ReadWriteFileJQueryMobile.html

jQuery Mobile Demo

Read Write File



ReadWriteFileJQueryMobile.html

/sdcard/read-write.txt

Textarea:

ReadWrite



ReadWriteFile.js

document.addEventListener("deviceready", onDeviceReady, false);var filename = "read-write.txt";var filePath = "file:///sdcard/read-write.txt";var textarea = document.getElementById("#textarea");

function onDeviceReady() {

$(document).ready(function() {var readButton = document.getElementById("read");var writeButton = document.getElementById("write");readButton.addEventListener("click", readFile, false);writeButton.addEventListener("click", saveFile, false);

});}


+Exemplo 4 - Read and Write Text File- JqueryMobile


FIM.

51+


minicurso phonegap parte 3

Documents