Share
I del 1 i denna handledningsserie introducerade vi vår programprogram, beskrivna sidflödet och diskuterade hur man konstruerar sidorna i programmet via jQuery Mobile. I del 2 genomförde vi genomförandet av vår webbapplikation. I den här sista delen kommer vi att migrera webbapplikationen till en inbyggd Android-applikation.
Webapplikationen som slutförts i del 2 kommer nu att konverteras till en inbyggd Android-applikation. Diskussionen nedan gäller för Android OS 2.2 och 2.3.
Android-applikationen kommer att använda index.html som dess UI-komponent. Vi skriver en android.app.Activity klass för att definiera integrationspunkten mellan index.html och den ursprungliga applikationen. Vi skriver också en android.webkit.WebViewClient klass för att se till att News Detail-sidan visas i originalet android.webkit.WebView exempel där nyhetsprogrammet lanseras.
Accentsconagua
index.html Vi uppdaterar NEWS_URI variabel enligt följande:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
Vi behöver inte bridge.php i den inbyggda Android-applikationen för att vidarebefordra AJAX-samtal till Yahoo! Nyheter. Detta beror på att samma ursprungsrestriktion inte gäller här. När den är packad som en del av den ursprungliga applikationen, index.html filen laddas inte ner från en webbserver. Som sådan kan det göra AJAX-samtal till fjärradresser.
Dessutom lägger vi till följande funktion:
var EMPTY = ";? funktion changeLocation (varURI) showProgress (); $ .get (Töm, funktion (data) window.location = varURI;);
De Byt plats() funktion kommer att hämtas från android.webkit.WebViewClient, som kommer att visas kortvarigt. Syftet med funktionen är att visa framstartsidan under övergången från nyhetssidan till sidan Nyhetsinformation.
Byt plats() är att visa framstartsidan.skaffa sig() funktionen är en specialiserad jQuery ajax () fungera. Vi ringer skaffa sig() skickar den till en tom webbadress och en återuppringningsbehandlare, som sätter in window.location variabel till ingångsargumentet. Inmatningsargumentet är URL: en i en tagg för en nyhet, som diskuteras i del 2, "Gå till nyhetsinformationssidan från nyhetssidan". När webbadressen laddas, ersätts framstartsidan med innehåll från den webbadressen.Byt plats() är inte en väsentlig del av att migrera webbapplikationen till en inbyggd. Det behövs bara för att visa en framstegssida när man övergår från sidan Nyheter till sidan Nyhetsinformation i den ursprungliga applikationen. Den första delen av vår Aktivitet klass, namngiven NewsActivity visas nedan:
paketet com.news; importera android.app.Activity; importera android.webkit.WebView; importera android.os.Bundle ;? public class NewsActivity utökar aktiviteten WebView mWebView; Offentligt ogiltigt onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); mWebView = (WebView) findViewById (R.id.webview); mWebView.setWebViewClient (nytt NewsClient ()); mWebView.getSettings () setJavaScriptEnabled (sant).; mWebView.getSettings () setDomStorageEnabled (sant).; mWebView.loadUrl ( "android_asset / www / index.html"); ?
onCreate () metod, vi kallar först standardinställningen från superklassen och uppmanar sedan setContentView () att ladda upp layoutfilen för den här aktiviteten. Inmatningsargumentet till setContentView () är R.layout.main vilket är en hänvisning till main.xml i res / layout mapp.WebView via findViewById (R.id.webview). Vi ställer in en anpassning WebViewClient på WebView, som heter NewsClient (ska ses över snart). Då konfigurerar vi WebView för att tillåta JavaScript-körning och DOM-lagrings API (den senare är nödvändig för att använda HTML5 lokalt utrymme).WebView att ladda index.html sida med UI-koden.På sidan Nyhetsdetaljer trycker du på bakåtknappen på enheten för att ta tillbaka användaren till kategorisidan. För att vara säker på det måste vi först hantera onKeyDown händelse i vår NewsActivity. Detta visas nedan:
public class NewsActivity utökar aktiviteten WebView mWebView; offentligt ogiltigt onCreate (Bundle savedInstanceState) ? offentliga booleanska onKeyDown (int keyCode, KeyEvent-händelse) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); återvänd sant; returnera super.onKeyDown (keyCode, event); ?
Om nyckelhändelsen motsvarar enhetens bakåtknapp och WebView har historia att gå tillbaka till, då frågar vi WebView att gå tillbaka ett steg i sin historia. På sidan Nyhetsdetalj motsvarar detta index.html. När historiken går ett steg tillbaka visas kategorisidan efter de steg som beskrivs i del 2, "start av program".
Slutligen, låt oss titta på anpassningen WebViewClient som genomförs som en inre klass av NewsActivity.
public class NewsActivity utökar aktiviteten WebView mWebView; offentligt ogiltigt onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (new NewsClient ()) ;? offentliga booleanska onKeyDown (int keyCode, KeyEvent-händelse) ? privatklass NewsClient utökar WebViewClient public boolean shouldOverrideUrlLading (WebView-visning, String url) view.loadUrl ("javascript: changeLocation ('" + url + "')"); återvänd sant; ? Den enda operation som vi åsidosätter från moderklassen är shouldOverrideUrlLoading () där vi instruerar WebView att ringa JavaScript-funktionen Byt plats() i index.html.
WebViewClient, Nyhetsinformationssidan skulle visas i en separat webbläsarprogram, utanför nyhetsprogrammet. Därför definierar du en anpassad WebViewClient är väsentlig för att visa News Detail-sidan som en del av nyhetsprogrammet (dvs i samma WebView som är värd för index.html).shouldOverrideUrlLoading () på ett mer förenklat sätt, enligt följande: offentliga booleanska shouldOverrideUrlLading (WebView-vy, String url) view.loadUrl (url); återvänd sant;
Det skulle vara tillräckligt för att visa News Detail-sidan i samma WebView det värdar index.html. Övergången från nyhetssidan till nyhetsdetalj-sidan skulle emellertid inte inkludera visningspåverkan.
Har granskat Aktivitet klass, låt oss titta på andra komponenter i vår ansökan.
AndroidManifest.xmlFör en allmän diskussion om AndroidManifest.xml fil hänvisas till den officiella referensen. I den filen finns det två specifika saker som är värd att kommentera.
android.app.Activity Dokumentation, som standard, en konfigurationsändring, inklusive ändring av orientering eller tangenttillgänglighet, resulterar i att den aktuella aktiviteten förstörs. För att förhindra standardbeteendet konfigurerar vi vår applikation genom att ange konfigurationsändringar som ska hanteras av själva appen. Detta definieras i configChanges attribut där orientering motsvarar orienteringsändring och keyboardHidden motsvarar en ändring av tangentbordets tillgänglighet (t ex en användare lägger upp enhetens tangentbord). Vi konfigurerar programmet så att om någon av dessa ändringar uppstår, är den nuvarande aktiviteten inte förstörd.strings.xmlNyheter
Den här filen definierar den konstanta namnet app-namn som används för att identifiera nyhetsprogrammet. Värdet på det attributet visas på olika ställen i vår Android-enhet, som visas nedan. Från vänster till höger: under programstartsikonen, namnlistan för programmen, Inställningar - Hantera program.
android.app.Activity Vi implementerar användargränssnittet i vår inbyggda Android-applikation med index.html och stödjande JavaScript och css bibliotek. En integrationspunkt mellan index.html och anpassningen android.app.Activity klassen är följande rad:
mWebView.loadUrl ( "android_asset / www / index.html");
Dessutom observera i "Aktivitetsklassen" att vi aktiverar JavaScript och DOMStorage i android.webkit.WebView objekt som index.html behöver köra JavaScript och få tillgång till HTML5 lokalt utrymme.
mWebView.getSettings () setJavaScriptEnabled (sant).; mWebView.getSettings () setDomStorageEnabled (sant).;
Slutligen, i AndroidManifest.xml Vi tillåter Internetanslutningar från vår ansökan via:
De tidigare visade figurerna 1-4 i del 1 i denna serie är skärmbilderna av den ursprungliga Android-applikationen.
För att skapa lanseringsikonen för nyhetsprogrammet följde vi riktlinjerna för design av ikoner för Android-applikationer. I den resursen finns olika mallar i Adobe PSD-format tillgängliga för nedladdning. Vi hämtade icon_templates-v2.0.zip och extraherades Launcher-icon-template.psd. I den filen har vi valt två mallar för att skapa vår lanseringsikon:
Vi lade dessa mallar i två separata lager i Adobe Photoshop och lade till en grafisk text, Nyheter, på ett extra lager överst för att komponera lanseringsikonen. Per riktlinjen skapade vi tre versioner av ikonen för skärmar med låg, medelhög och hög densitet med 36 x 36, 48 x 48 respektive 72 x 72 pixelstorlekar. Var och en av dessa ikoner heter icon.png och de placeras i Android-projektmapparna enligt följande tabell:
| Mapp namn | Filnamn | Pixelstorlek |
res \ dragbar-ldpi | icon.png | 36 x 36 |
res \ dragbar-MDPI | icon.png | 48 x 48 |
res \ dragbar-hdpi | icon.png | 72 x 72 |
Som ett exempel är det 36 x 36 lanseringsikonen:
Som en del av denna handledning tillhandahöll vi nödvändiga projektfiler för att importera den inbyggda Android News-applikationen till Eclipse-utvecklingsmiljön. Projektets förutsättningar är:
Projektet har testats framgångsrikt mot både Android-plattform 2.2 API-nivå 8 och plattform 2.3 API-nivå 9.
Innan du importerar projektet till din Eclipse-miljö, se till att Eclipse ADT-plugin pekar på rätt plats för Android SDK i ditt lokala system. För att kontrollera detta, gå till Eclipse-menyn Fönster -> Inställningar -> Android. De SDK Plats Fönstret måste ställas till platsen för Android SDK. När du har konfigurerat korrekt bör du se något som liknar bilden nedan:
Projektfilerna finns i en arkivfil som heter news.zip. För att importera projektet i Eclipse-menyn, gå till Fil -> Importera och välj sedan i importguiden Allmänt -> Befintliga projekt i arbetsytan (se nedan).
På nästa sida av guiden väljer du Välj arkivfil radioknapp och bläddra till var news.zip ligger i ditt filsystem. De projekt Fönstret kommer automatiskt att fyllas i där Nyheter projektet är redan valt. Detta visas nedan. tryck på Avsluta knappen för att slutföra importen.
Eclipse kommer automatiskt bygga applikationen efter import. Nu ska du se nyhetsprojektet i projektutforskaren, som visas nedan:
För att bygga / felsöka ditt projekt kan du välja mellan Android OS 2.3 och 2.2-plattformar som byggnadsmål. För att göra detta väljer du Nyheter projekt i projektutforskaren och från högerklick-menyn välj Egenskaper. På vänster sida lista av egenskaper, välj Android som egenskapen. De tillgängliga byggnadsmålen visas till höger, som visas nedan:
En lista över filer i projektet ges nedan.
Vi har redan diskuterat några av dessa filer. Nedan följer en snabb recension / recap:
src mappen innehåller källkoden för NewsActivity klass.gen mappen innehåller filerna som automatiskt genereras av Eclipse ADT.tillgångar \ www mappen och dess undermappar innehåller alla filer som behövs för användargränssnittet, inklusive index.html; tillgångar \ www \ css-js har css och JavaScript-filer som används av index.html. Särskilt: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css är jQuery Mobile rambibliotek.jquery.ba-dotimeout.js är jquery-dotimeout-plugin-biblioteket.jquery.dst.js är plugin biblioteket DST.js.tillgångar \ www \ css-js \ bilder \ icons-18-white.png är en bildfil som refereras av jQuery Mobile-rambiblioteken.tillgångar \ www \ img \ wait.gif är den spinnande ikonen som används på sidan.res \ dragbar * mappar lagra lanseringsikonen, som diskuteras i avsnittet "Programlanseringsikon" i denna handledning.res \ layout \ main.xml filen är Android XML-layoutfilen. Eftersom användargränssnittet i vår ansökan definieras i index.html Använda jQuery Mobile-ramverket, den här filen är väldigt enkel och behöver ingen ytterligare förklaring.res \ värden \ strings.xml och AndroidManifest.xml.default.properties definierar byggmål och ingår i news.zip. Det kommer att skrivas över av Eclipse ADT beroende på ditt val av byggmål.Förutom att utveckla mobila webbapplikationer på plattformen kan jQuery Mobile-ramen användas för att implementera inbyggda Android-applikationer. I denna handledningsserie utvecklade vi en webbapplikation med jQuery Mobile och migrerade sedan den till en inbyggd Android-applikation med endast små ändringar. Huvudidén är att använda android.webkit.WebView objekt som en behållare för att köra html-filen i webbapplikationen och jQuery Mobile JavaScript-koden den innehåller. Några avslutande kommentarer ges nedan.
android.webkit.WebView utsätts inte för restriktioner med samma ursprung när AJAX-samtal görs.