Vous obtenez une arborescence de projet
Vous devez sélectionner un simulateur, iPhone ou Ipad
En choisissant le simulateur iPhone, vous obtenez la création du répertoire www
qui vous affiche la page index.html
par défaut
En choisissant le simulateur iPhone, vous obtenez la création du répertoire www
qui vous affiche la page index.html
par défaut
Il existe deux erreurs assez fréquentes qui interdisent souvent le lancement de l’émulateur. Elles sont les suivantes :
File XXX.app depends on itself. This target might include its own product.
.app
.app
n’est pas cochéeDécocher le fichier .app
Décocher le fichier .app
Détail 1
Détail 2
On va tenter d’injecter des données au format JSON
issu directement d’un serveur web. Pour se faire, on va se servir d’un serveur en local qui tourne sur MAMP
ne creant une base de données, en générant un flux json
puis en la manipulant à l’aide de de jQuery Mobile
Pour compiler, il suffit de cliquer sur le bouton “Click abd Run”
Pour permettre l’appel à des données externes dans PhoneGap
. Il suffit d’ajouter une entrée générique *
(wildcard) à la liste blanche hôtes externe dans Cordova.plist / ExternalHosts
. Cela autoriserq tous les serveurs à communiquer avec votre émulateur.
Détail du changement de Cordova.plist / ExternalHosts
Le code source du fichier getemployees.php
appelé en local de puis http://127.0.0.1/employeedirectory/getemployees.php
<?php header('Content-type: application/json'); $server = "localhost"; $username = "root"; $password = "root"; $database = "directory"; $con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error()); mysql_select_db($database, $con); $sql = "SELECT id, firstName AS firstname, lastName AS lastname, managerId, title AS title, department AS department FROM employee"; $result = mysql_query($sql) or die ("Query error: " . mysql_error()); $records = array(); while($row = mysql_fetch_assoc($result)) { $records[] = $row; } mysql_close($con); echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');'; ?> |
Le fichier index.html
à placer dans le répertoire www
de votre projet PhoneGap
<!DOCTYPE HTML> <html lang="en"> <head> <title>Employee Directory</title> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" /> <link rel="stylesheet" href="css/styles.css" /> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/load-json.js"></script> </head> <body> <div id="employeeListPage" data-role="page" > <div data-role="header" data-position="fixed"> <h1>Employee Directory</h1> </div> <div data-role="content"> <ul id="employeeList" data-role="listview" data-filter="true"></ul> </div> </div> </body> </html> |
Le code source du fichier load-json.js
$(document).ready(function(){ $(document).bind('deviceready', function(){ //Phonegap ready onDeviceReady(); }); // var output = $('#output'); var output = $('#employeeListPage'); $.ajax({ /* URL vers le fichier JSON */ url: 'http://127.0.0.1/employeedirectory/getemployees.php', dataType: 'jsonp', jsonp: 'jsoncallback', timeout: 5000, success: function(data, status){ $.each(data, function(i,item){ var person = '<li>' + '<h4>' + item.firstname + ' ' + item.lastname + '</h4>' + '<p>' + item.title + '</p>' + '<p>' + item.department + '</p>' + '</li>'; output.append(person); }); }, error: function(){ output.text('There was an error loading the data.'); } }); }); |
le code de la BDD directory
-- -- BDD: `directory` -- -- -------------------------------------------------------- -- -- Structure de la table `employee` -- CREATE TABLE `employee` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `firstName` VARCHAR(30) NOT NULL, `lastName` VARCHAR(30) NOT NULL, `managerId` INT(11) NOT NULL, `title` VARCHAR(45) NOT NULL, `department` VARCHAR(45) NOT NULL, `officePhone` VARCHAR(45) NOT NULL, `cellPhone` VARCHAR(45) NOT NULL, `email` VARCHAR(45) NOT NULL, `city` VARCHAR(45) NOT NULL, `picture` VARCHAR(250) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ; -- -- Contenu de la table `employee` -- INSERT INTO `employee` VALUES(12, 'Steven', 'Wells', 4, 'Software Architect', 'Engineering', '617-000-0012', '781-000-0012', 'swells@fakemail.com', 'Boston, MA', 'steven_wells.jpg'); INSERT INTO `employee` VALUES(11, 'Amy', 'Jones', 5, 'Sales Representative', 'Sales', '617-000-0011', '781-000-0011', 'ajones@fakemail.com', 'Boston, MA', 'amy_jones.jpg'); INSERT INTO `employee` VALUES(10, 'Kathleen', 'Byrne', 5, 'Sales Representative', 'Sales', '617-000-0010', '781-000-0010', 'kbyrne@fakemail.com', 'Boston, MA', 'kathleen_byrne.jpg'); INSERT INTO `employee` VALUES(9, 'Gary', 'Donovan', 2, 'Marketing', 'Marketing', '617-000-0009', '781-000-0009', 'gdonovan@fakemail.com', 'Boston, MA', 'gary_donovan.jpg'); INSERT INTO `employee` VALUES(8, 'Lisa', 'Wong', 2, 'Marketing Manager', 'Marketing', '617-000-0008', '781-000-0008', 'lwong@fakemail.com', 'Boston, MA', 'lisa_wong.jpg'); INSERT INTO `employee` VALUES(7, 'Paula', 'Gates', 4, 'Software Architect', 'Engineering', '617-000-0007', '781-000-0007', 'pgates@fakemail.com', 'Boston, MA', 'paula_gates.jpg'); INSERT INTO `employee` VALUES(5, 'Ray', 'Moore', 1, 'VP of Sales', 'Sales', '617-000-0005', '781-000-0005', 'rmoore@fakemail.com', 'Boston, MA', 'ray_moore.jpg'); INSERT INTO `employee` VALUES(6, 'Paul', 'Jones', 4, 'QA Manager', 'Engineering', '617-000-0006', '781-000-0006', 'pjones@fakemail.com', 'Boston, MA', 'paul_jones.jpg'); INSERT INTO `employee` VALUES(3, 'Eugene', 'Lee', 1, 'CFO', 'Accounting', '617-000-0003', '781-000-0003', 'elee@fakemail.com', 'Boston, MA', 'eugene_lee.jpg'); INSERT INTO `employee` VALUES(4, 'John', 'Williams', 1, 'VP of Engineering', 'Engineering', '617-000-0004', '781-000-0004', 'jwilliams@fakemail.com', 'Boston, MA', 'john_williams.jpg'); INSERT INTO `employee` VALUES(2, 'Julie', 'Taylor', 1, 'VP of Marketing', 'Marketing', '617-000-0002', '781-000-0002', 'jtaylor@fakemail.com', 'Boston, MA', 'julie_taylor.jpg'); INSERT INTO `employee` VALUES(1, 'James', 'King', 0, 'President and CEO', 'Corporate', '617-000-0001', '781-000-0001', 'jking@fakemail.com', 'Boston, MA', 'james_king.jpg'); |