Contenu connexe Similaire à Devfest Lima2012 (20) Devfest Lima20121. Aplicaciones
multiplataforma con
PhoneGap y jQuery Mobile
Adrián Catalán
adriancatalan@elementalgeeks.com
@ykro
5. • Eclipse Classic 4.2.1
–http://www.eclipse.org/downloads
/
• Android SDK
–http://developer.android.com/sdk/
installing/index.html
• ADT Plugin
–http://developer.android.com/sdk/
installing/installing-adt.html
15. Dentro de la
estructura del
proyecto deben
existir 2 carpetas
21. De la carpeta
descargada de
Cordova buscamos
la carpeta
/lib/android
26. Y también para la
carpeta /xml con
destino a /res
dentro del
proyecto
30. En vez de heredar
de Activity se hará
de DroidGap
(requiere import)
47. En la parte que dice
<!-- agregar
permisos -->
agregar el siguiente
contenido
49. En el mismo archivo
modificar la actividad
creada y agregue una
nueva actividad como
se indica a continuación
54. <html>
<body>
<h1>Hello World</h1>
</body>
</html>
80. Aplicaciones
multiplataforma con
PhoneGap y jQuery Mobile
Adrián Catalán
adriancatalan@elementalgeeks.com
@ykro
Notes de l'éditeur package com.elementalgeeks.geophotos;import org.apache.cordova.DroidGap;import android.os.Bundle;import android.view.Menu;public class MainActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html"); } @Override public booleanonCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.activity_main, menu); return true; }} <supports-screensandroid: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_COMMANDS" /> <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 android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" /> <activity android:configChanges="orientation|keyboardHidden" android:label="@string/app_name"android:name=".HolaMundoActivity" > <intent-filter > <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> </activity> <!doctype html><html lang="en"> <head> </head> <body> </body></html> <div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div></div> <div id="gmap-3" data-role="page"> <div data-role="header"> <h1>GeoPhotos</h1> </div> <div data-role="content"> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px"></div> </div> </div></div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script type="text/javascript" src="ui/jquery.ui.map.js"></script><script type="text/javascript" src="ui/jquery.ui.map.services.js"></script><script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script> <script type="text/javascript"> $('#gmap-3').live("pageshow", function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( locationSuccess,function(){}, {enableHighAccuracy: true }); } }); </script> <script type="text/javascript"> function locationSuccess(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; $('#map_canvas').gmap({ 'center': new google.maps.LatLng(lat, lng), 'zoom': 15}); getPhotos(); }</script> var latlng = $('#map_canvas').gmap('get', 'map').getCenter(); $('#map_canvas').gmap('clear', 'markers'); var lat = latlng.lat(); var lng = latlng.lng(); var client_id = "fc8041d4af1544a2939c3f5a9a1ef8cf"; var url = "https://api.instagram.com/v1/media/search?lat=" + lat + "&lng=" + lng + "&client_id=" + client_id + "&callback=?"; $.getJSON(url, function(data){ var data_elements = data["data"]; var count = 0;}); var lat = current_element["location"]["latitude"]; var lng = current_element["location"]["longitude"]; var position = new google.maps.LatLng(lat,lng) var thumbnail = current_element["images"]["thumbnail"]["url"]; var caption = "ver"; if (current_element["caption"] != null) { caption = current_element["caption"]["text"]; } var link = current_element["link"]; var info_window = "<img src=\\"" + thumbnail + "\\"/><br/><a href=\\"" + link + "\\">" + caption + "</a>"; $('#map_canvas').gmap('addMarker', {'position': position}).click( function(){ $('#map_canvas').gmap('openInfoWindow', {'content': info_window}, this); $('#map_canvas').gmap('getMap').panTo(position);}); $.each(data_elements, function(index, current_element) { count++; var lat = current_element["location"]["latitude"]; var lng = current_element["location"]["longitude"]; var position = new google.maps.LatLng(lat,lng) var thumbnail = current_element["images"]["thumbnail"]["url"]; var caption = "ver"; if (current_element["caption"] != null) { caption = current_element["caption"]["text"]; } var link = current_element["link"]; var info_window = "<img src=\\"" + thumbnail + "\\"/><br/><a href=\\"" + link + "\\">" + caption + "</a>"; $('#map_canvas').gmap('addMarker', {'position': position}).click(function(){ $('#map_canvas').gmap('openInfoWindow', {'content': info_window}, this); $('#map_canvas').gmap('getMap').panTo(position); });}); <div id="gmap-3" data-role="page"> <div data-role="header"> <h1>GeoPhotos</h1> </div> <div data-role="content"> <a href="javascript:getPhotos();" data-role="button" data-icon="refresh" data-inline="true" id="refresh-button">Refresh data</a> <div id="result-count" style="display:inline"></div> <br/> <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> <div id="map_canvas" style="height:350px"></div> </div> </div></div> $("#refresh-button").addClass('ui-disabled'); $("#result-count").html("loading...");… $("#refresh-button").removeClass('ui-disabled'); $("#result-count").html("Showing " + count + " results");