Minicurso PhoneGap Parte 3

Tema
Empreendedorismo e
Inovao na Sociedade da
Informao
Palestra ou Minicurso
Desenvolvendo para
Android com
PhoneGap
Palestrante ou Professor
(Profissional)
Petterson Ferreira de Paula

Kaio Cezar Miranda G. Araujo
Anderson Malagutti
quarta-feira, 23 de janeiro de 13
+
+
Exemplo de Layouts
+
Exemplo de Layouts
+
Exemplo de Layouts
+
Criando um novo projeto
+
+
+
+
+
+
Configurando o projeto
+
+
...phonegap-phonegap-2dbbdab\lib\android\cordova-2.2.0.jar
Copie para
...workspace\JqueryMobile_PhoneGap\libs
+
...phonegap-phonegap-2dbbdab\lib\android\cordova-2.2.0.js
Copie para
...workspace\JqueryMobile_PhoneGap\assets\www
+
...phonegap-phonegap-2dbbdab\lib\android\cordova-2.2.0.jar
Copie para
+
...jquery-1.8.3.min.js
Copie para
+
...phonegap-phonegap-2dbbdab\lib\android\xml
Copie para
...workspace\JqueryMobile_PhoneGap\res
+
+
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission
android:name="android.permission.ACCESS_LOCATION_EXTRA_COMM
ANDS" />
<uses-permission
android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission
android:name="android.permission.RECEIVE_SMS" />
<uses-permission
android:name="android.permission.RECORD_AUDIO" />
<uses-permission
android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission
MainActivity.java
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");
}
}
+
+
+
Exemplo 1 - Hello World - JqueryMobile

hello.html
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery Mobile Demo</title>
<link rel="stylesheet" type="text/css"
href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript"
src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>
<body>

<div data-role="page">

+

hello.html
<div data-role="header">
<h1>Page Title</h1>
</div>


<div data-role="content">
<p>Hello World!</p>
</div>


<div data-role="footer">
<h4>Page Footer</h4>
</div>

</div>

</body>
</html>
+
+
Exemplo 2 - Page Nav and Dialog Example

- JqueryMobile
MainActivity.java
@Override
super.loadUrl("file:///android_asset/www/
NavAndDialog.html");
}
}
+

- JqueryMobile
+

- JqueryMobile
NavAndDialog.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<div data-role="page" id="main">
<h1>Main Page</h1>
</div>
<h1>Page Nav and Dialog Example</h1>

- JqueryMobile
NavAndDialog.html
<a data-role="button" href="#page2">Page Navigation</a> <a

data-role="button" href="#dialog1" data-rel="dialog"
datatransition="
pop">Open Dialog </a>
</div>
<h4>Main Page Footer</h4>
</div>
</div>


<div data-role="page" id="page2" data-add-back-btn=true>
<h1>Second Page</h1>
</div>
<h1>Second Page</h1>
</div>

- JqueryMobile
NavAndDialog.html
<h4>Click back to go back to main page</h4>
</div>
</div>


<div data-role="page" id="dialog1">
<h1>Dialog Title</h1>
</div>
<h1>Dialog body</h1>
</div>
<h4>Click close button to go back to main page</h4>
</div>
</div>

</body>
</html>

- JqueryMobile
+
Exemplo 3 - Toolbars and ButtonsJqueryMobile

MainActivity.java
@Override
ToolbarsAndButtons.html");
}
}
+
ToolbarsAndButtons.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>
ToolbarsAndButtons.html
<h1>Header Footer Toolbar Example</h1>
</div>
<div data-role="footer" class="ui-bar">
<a href="index.html" data-role="button" data- icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrowu"> Up</a>
<a href="index.html" data-role="button" data-icon="arrowd"> Down</a>
</div>
</div>
</body>
</html>
+

MainActivity.java
@Override
FormElement.html");
}
}
+
+
FormElement.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>
FormElement.html
<form action="#" method="get">
<h2>Simple Form Elements</h2>
<div data-role="fieldcontain">
<label for="name"> Text Input: </label> <input type="text"
name="name" id="name" value="" />
</div>
<label for="textarea"> Textarea: </label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
<label for="search"> Search Input: </label> <input type="search"
name="password" id="search" value="" />
</div>
</form>
</div>
FormElement.html
<div data-role="footer" class="ui-bar">

<a href="index.html" data-role="button" data- icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a> <a
href="index.html" data-role="button" data-icon="arrowu"> Up</a> <a
href="index.html" data-role="button" data-icon="arrowd"> Down</a>
</div>
</div>
</body>
</html>
+
Exemplo 4 - Read and Write Text File

- JqueryMobile
MainActivity.java
@Override
ReadWriteFileJQueryMobile.html");
}
}
+

- JqueryMobile
ReadWriteFileJQueryMobile.ht
ml
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"src="jquery.mobile-1.2.0/
jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="ReadWriterFile.js"></script>
</head>
<body>

<h1>Read Write File</h1>
</div>

- JqueryMobile
ReadWriteFileJQueryMobile.ht
ml
<form action="#" method="get">
<h2>/sdcard/read-write.txt</h2>
<label for="textarea"> Textarea: </label>
<textarea cols="40" rows="30" name="textarea" id="textarea"></textarea>
</div>
<a id="read" href="#" data-role="button" data-inline="true">Read</a>
<a id="write" href="#" data-role="button" data-inline="true" datatheme="b">Write</a>
</form>
</div>
</div>
</body>
</html>

- JqueryMobile
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);
});
}

- JqueryMobile
+
FIM.
+
51

Minicurso PhoneGap Parte 3

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Minicurso PhoneGap Parte 3

Enviado por

Direitos autorais:

Formatos disponíveis

Tema

Petterson Ferreira de Paula

Criando um novo projeto

Criando um novo projeto

Criando um novo projeto

Criando um novo projeto

Criando um novo projeto

Criando um novo projeto

Exemplo 1 - Hello World - JqueryMobile

Exemplo 1 - Hello World - JqueryMobile

Exemplo 1 - Hello World - JqueryMobile

Exemplo 2 - Page Nav and Dialog Example

Exemplo 2 - Page Nav and Dialog Example

Exemplo 2 - Page Nav and Dialog Example

Exemplo 2 - Page Nav and Dialog Example

<a data-role="button" href="#page2">Page Navigation</a> <a

Exemplo 2 - Page Nav and Dialog Example

Exemplo 2 - Page Nav and Dialog Example

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 3 - Toolbars and ButtonsJqueryMobile

<div data-role="footer" class="ui-bar">

Exemplo 3 - Toolbars and ButtonsJqueryMobile

Exemplo 4 - Read and Write Text File

Exemplo 4 - Read and Write Text File

Exemplo 4 - Read and Write Text File

Exemplo 4 - Read and Write Text File

document.addEventListener("deviceready", onDeviceReady, false);

Exemplo 4 - Read and Write Text File

Você também pode gostar