Share
I del 1 i denne opplæringsserien introduserte vi vår prøveapplikasjon, beskrev sidestrømmen, og diskutert hvordan du konstruerer sidene i programmet via jQuery Mobile. I del 2 fullførte vi gjennomføringen av vårt webprogram. I denne siste delen vil vi overføre webapplikasjonen til et innfødt Android-program.
Nettapplikasjonen som er fullført i del 2, vil nå bli konvertert til et innfødt Android-program. Diskusjonen nedenfor gjelder for Android OS 2.2 og 2.3.
Android-applikasjonen vil bruke index.html som brukergrensesnitt. Vi vil skrive en android.app.Activity klasse for å definere integrasjonspunktet mellom index.html og den opprinnelige applikasjonen. Vi vil også skrive en android.webkit.WebViewClient klassen for å sikre at nyhetsdetaljsiden vises i originalen android.webkit.WebView eksempel hvor nyhetsprogrammet lanseres.
Accentsconagua
index.html Vi vil oppdatere NEWS_URI variabel som følger:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
Vi trenger ikke bridge.php i den innfødte Android-applikasjonen for å videresende AJAX-anrop til Yahoo! Nyheter. Dette skyldes at begrensning med samme opprinnelse ikke gjelder her. Når pakket som en del av den opprinnelige applikasjonen, index.html filen lastes ikke ned fra en webserver. Som sådan kan det gjøre AJAX-anrop til eksterne nettadresser.
I tillegg legger vi til følgende funksjon:
var EMPTY = ";? funksjon changeLocation (varURI) showProgress (); $ .get (Tøm, funksjon (data) window.location = varURI;);
De Bytt sted() funksjonen vil bli ringt fra android.webkit.WebViewClient, som vil bli vist øyeblikkelig. Formålet med funksjonen er å vise fremdriftssiden under overgang fra Nyhetssiden til Nyhetsdetalj-siden.
Bytt sted() er å vise fremdriftssiden.få() funksjonen er en spesialisert jQuery Ajax () funksjon. Vi ringer få() sender den en tom nettadresse og en tilbakekallingshåndterer, som setter inn window.location variabel til inngangsargumentet. Inngangsargumentet er URL-adressen i en tag for et nyhetsart, som omtalt i del 2, "Gå til nyhetsdetaljsiden fra nyhetssiden". Når nettadressen lastes, blir fremdriftssiden erstattet med innhold fra den nettadressen.Bytt sted() er ikke en viktig del av å migrere webapplikasjonen til en innfødt. Det er bare nødvendig å vise en fremgangsside når overgangen fra Nyhetssiden til Nyhetsdetaljer-siden i det opprinnelige programmet. Den første delen av vår Aktivitet klassen, navngitt NewsActivity er vist nedenfor:
pakke com.news; importer android.app.Activity; importer android.webkit.WebView; importere android.os.Bundle ;? offentlig klasse NewsActivity utvider Aktivitet WebView mWebView; Offentlig tomgang onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); mWebView = (WebView) findViewById (R.id.webview); mWebView.setWebViewClient (new NewsClient ()); mWebView.getSettings () setJavaScriptEnabled (sann).; mWebView.getSettings () setDomStorageEnabled (sann).; mWebView.loadUrl ( "android_asset / www / indeks.html"); ?
onCreate () Metode, vi kaller først standard implementering fra superklassen og påkaller deretter setContentView () for å laste opp layoutfilen for denne aktiviteten. Inngangsargumentet til setContentView () er R.layout.main som er en referanse til main.xml i res / layout mappe.WebView via findViewById (R.id.webview). Vi setter en skikk WebViewClient på WebView, oppkalt NewsClient (bli vurdert snart). Da konfigurerer vi WebView for å tillate JavaScript-kjøring og DOM-lagrings-API (sistnevnte er nødvendig for å bruke HTML5 lokal lagring).WebView å laste inn index.html side med UI-koden.På siden Nyhetsdetaljer, ved å trykke på tilbakeknappen på enheten, kommer brukeren tilbake til kategorisiden. For å være trygg på det, må vi først håndtere onkeydown arrangement i vår NewsActivity. Dette er vist nedenfor:
offentlig klasse NewsActivity utvider Aktivitet WebView mWebView; Offentlig tomgang onCreate (Bundle savedInstanceState) ? offentlig boolean onKeyDown (int keyCode, KeyEvent-hendelse) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); returnere sant; returnere super.onKeyDown (keyCode, event); ?
Hvis nøkkelhendelsen tilsvarer tilbakeknappen på enheten og WebView har historie å gå tilbake til, da spør vi WebView å gå tilbake et enkelt trinn i sin historie. På siden Nyhetsdetalj vil dette svare til index.html. Når historien går ett skritt tilbake, vises siden Kategorien etter trinnene som er beskrevet i del 2, "Programoppstart".
Til slutt, la oss se på skikken WebViewClient som er implementert som en indre klasse av NewsActivity.
offentlig klasse NewsActivity utvider Aktivitet WebView mWebView; Offentlig tomgang onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (new NewsClient ()) ;? offentlig boolean onKeyDown (int keyCode, KeyEvent-hendelse) ? privat klasse NewsClient utvider WebViewClient offentlig boolean shouldOverrideUrlLading (WebView view, String url) view.loadUrl ("javascript: changeLocation ('" + url + "')"); returnere sant; ? Den eneste operasjonen vi overstyrer fra foreldreklassen er shouldOverrideUrlLoading () hvor vi instruerer WebView å ringe til JavaScript-funksjonen Bytt sted() i index.html.
WebViewClient, Nyhetsdetaljsiden vil bli vist i et eget nettleserprogram, utenfor nyhetsprogrammet. Derfor definerer en egendefinert WebViewClient er viktig for å vise News Detail-siden som en del av nyhetsprogrammet (dvs. i det samme WebView som er vert for index.html).shouldOverrideUrlLoading () på en mer forenklet måte, som følger: offentlig boolean shouldOverrideUrlLading (WebView visning, String url) view.loadUrl (url); returnere sant;
Det ville være tilstrekkelig til å vise News Detail-siden i det samme WebView det vertene index.html. Overgangen fra News-siden til News Detail-siden vil imidlertid ikke inkludere visning av fremdriftssiden.
Etter å ha gjennomgått Aktivitet klasse, la oss se på andre komponenter i vår søknad.
AndroidManifest.xmlFor en generell diskusjon om AndroidManifest.xml fil henvises til den offisielle referansen. I den filen er det to spesielle elementer verdig til å kommentere.
android.app.Activity dokumentasjon, som standard, en konfigurasjonsendring, inkludert en endring i orientering eller tastaturtilgjengelighet, resulterer i at den nåværende aktiviteten blir ødelagt. For å forhindre standardadferdigheten konfigurerer vi vårt program ved å spesifisere konfigurasjonsendringene som skal håndteres av selve applikasjonen. Dette er definert i configChanges Tilskrive hvor orientering tilsvarer orienteringsendring og keyboardHidden tilsvarer en tastaturtilgjengelighet endring (for eksempel en bruker legger opp tastaturet til enheten). Vi konfigurerer programmet slik at hvis noen av disse endringene skjer, er den nåværende aktiviteten ikke ødelagt.strings.xmlNyheter
Denne filen definerer den konstante navngitte app_name som brukes til å identifisere nyhetsprogrammet. Verdien av det attributtet vises på forskjellige steder i vår Android-enhet, som vist nedenfor. Fra venstre til høyre: under programstartikonet, programtittelinjen, Innstillinger - Administrer applikasjoner.
android.app.Activity Vi implementerer brukergrensesnittet i vårt innfødte Android-program ved hjelp av index.html og støttende JavaScript og css biblioteker. Et integrasjonspunkt mellom index.html og skikken android.app.Activity klassen er følgende linje:
mWebView.loadUrl ( "android_asset / www / indeks.html");
I tillegg observere i "Aktivitetsklassen" at vi aktiverer JavaScript og DOMStorage i android.webkit.WebView objekt som index.html må kjøre JavaScript og få tilgang til HTML5 lokal lagring.
mWebView.getSettings () setJavaScriptEnabled (sann).; mWebView.getSettings () setDomStorageEnabled (sann).;
Til slutt, i AndroidManifest.xml Vi tillater Internett-tilkoblinger fra vår søknad via:
De tidligere vist figurene 1-4 i del 1 i denne serien er skjermbilder av den innfødte Android-applikasjonen.
For å opprette lanseringsikonet for nyhetsprogrammet fulgte vi retningslinjer for ikondesign for Android-applikasjoner. I den ressursen er ulike maler i Adobe PSD-format tilgjengelig for nedlasting. Vi lastet ned icon_templates-v2.0.zip og ekstrahert Launcher-icon-template.psd. I den filen valgte vi to maler for å lage vår lanseringsikon:
Vi plasserte disse malene i to separate lag i Adobe Photoshop og la til en grafisk tekst, Nyheter, på et ekstra lag øverst for å komponere lanseringsikonet. Per retningslinjen opprettet vi tre versjoner av ikonet for skjermbilder med lav, middels og høy tetthet med henholdsvis 36 x 36, 48 x 48 og 72 x 72 piksler. Hver av disse ikonene heter icon.png og de blir plassert i Android-prosjektmappene i henhold til følgende tabell:
| Mappenavn | Filnavn | Pixel størrelse |
res \ teikne-ldpi | icon.png | 36 x 36 |
res \ teikne-mdpi | icon.png | 48 x 48 |
res \ teikne-HDPI | icon.png | 72 x 72 |
Som et eksempel er dette 36 x 36 lanseringsikonet:
Som en del av denne opplæringen ga vi de nødvendige prosjektfilene for å importere den innfødte Android News-applikasjonen til Eclipse utviklingsmiljø. Prosjektets forutsetninger er:
Prosjektet har blitt testet med tanke på både Android-plattform 2.2 API nivå 8 og plattform 2.3 API nivå 9.
Før du importerer prosjektet til Eclipse-miljøet, må du kontrollere at Eclipse ADT-plugin peker på riktig sted for Android SDK i ditt lokale system. For å sjekke dette, gå til Eclipse-menyen Vinduet -> Innstillinger -> Android. De SDK-plassering Vinduet må settes til plasseringen av Android SDK. Når du er satt opp riktig, bør du se noe som ligner på bildet nedenfor:
Prosjektfilene leveres i en arkivfil som heter news.zip. For å importere prosjektet i Eclipse-menyen, gå til Fil -> Importer og velg deretter fil importveiviseren Generelt -> Eksisterende prosjekter i arbeidsområdet (se nedenfor).
På neste side av veiviseren velger du Velg arkivfil knappen og bla til hvor news.zip ligger i filsystemet ditt. De prosjekter vinduet vil automatisk bli fylt der hvor Nyheter prosjektet er allerede valgt. Dette er vist nedenfor. trykk Bli ferdig knappen for å fullføre importen.
Eclipse vil bygge applikasjonen automatisk etter import. Nå bør du se nyhetsprosjektet i prosjektutforskeren, som vist nedenfor:
For å bygge / feilsøke prosjektet ditt, kan du velge mellom Android OS 2.3 og 2.2 plattformer som byggemålet. For å gjøre dette, velg Nyheter prosjekt i prosjektutforskeren og fra høyreklikkmenyen velg Eiendommer. Til venstre på listen over egenskaper, velg Android som eiendommen. De tilgjengelige byggmålene vises til høyre, som vist nedenfor:
En liste over filer i prosjektet er gitt nedenfor.
Vi har allerede diskutert noen av disse filene. Nedenfor er en rask anmeldelse / omtale:
src mappen inneholder kildekoden for NewsActivity klasse.gen mappen inneholder filene som automatisk genereres av Eclipse ADT.eiendeler \ www mappe og undermapper inneholder alle filene som trengs for brukergrensesnittet, inkludert index.html; eiendeler \ www \ css-js har css og JavaScript-filer som brukes av index.html. Spesielt: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css er jQuery Mobile-rammeverkbiblioteker.jquery.ba-dotimeout.js er jquery-dotimeout-plugin-biblioteket.jquery.dst.js er DST.js plugin biblioteket.eiendeler \ www \ css-js \ images \ ikoner-18-white.png er en bildefil referert av jQuery Mobile Framework-bibliotekene.eiendeler \ www \ img \ wait.gif er spinnikonet som brukes på siden.res \ teikne * mapper lagrer lanseringsikonene, som omtalt i avsnittet "Programstartsikon" i denne opplæringen.res \ layout \ main.xml filen er Android XML-layoutfilen. Siden brukergrensesnittet i vår søknad er definert i index.html bruker jQuery Mobile rammeverk, er denne filen veldig enkel og trenger ingen videre forklaring.res \ verdier \ strings.xml og AndroidManifest.xml.default.properties definerer byggemålet og er en del av news.zip. Det vil bli overskrevet av Eclipse ADT, avhengig av ditt valg av byggemål.I tillegg til å utvikle mobile mobilprogrammer på tversplattform, kan jQuery Mobile-rammen brukes til å implementere innfødte Android-applikasjoner. I denne opplæringsserien utviklet vi et webprogram ved hjelp av jQuery Mobile og deretter migrert det til et innfødt Android-program med bare små endringer. Hovedideen er å bruke android.webkit.WebView objekt som en container for å kjøre HTML-filen til webapplikasjonen og jQuery Mobile JavaScript-koden den inneholder. Noen avsluttende bemerkninger er gitt nedenfor.
android.webkit.WebView er ikke underkastet restriksjoner med samme opprinnelse når AJAX-samtaler gjøres.