Share
In deel 1 van deze tutorialserie hebben we onze voorbeeldtoepassing geïntroduceerd, de paginastroom beschreven en besproken hoe de pagina's in de toepassing via jQuery Mobile kunnen worden geconstrueerd. In deel 2 hebben we de implementatie van onze webtoepassing voltooid. In dit laatste deel migreren we de webtoepassing naar een native Android-applicatie.
De webtoepassing die in Deel 2 is voltooid, wordt nu geconverteerd naar een native Android-applicatie. De onderstaande discussie is van toepassing op Android OS 2.2 en 2.3.
De Android-applicatie zal gebruiken index.html als UI-component. We zullen een schrijven android.app.Activity klasse om het integratiepunt tussen te definiëren index.html en de native applicatie. We zullen ook een schrijven android.webkit.WebViewClient klasse om ervoor te zorgen dat de pagina Nieuwsdetail binnen het origineel wordt weergegeven android.webkit.WebView bijvoorbeeld wanneer de toepassing Nieuws wordt gestart.
Accentsconagua
index.html We zullen het updaten NEWS_URI variabele als volgt:
var NEWS_URI = 'http://rss.news.yahoo.com/rss/';
We hebben niet nodig bridge.php in de native Android-applicatie om AJAX-oproepen door te sturen naar Yahoo! Nieuws. Dit komt omdat dezelfde oorsprongsbeperking hier niet van toepassing is. Wanneer verpakt als onderdeel van de native applicatie, de index.html bestand wordt niet gedownload van een webserver. Als zodanig kan het AJAX-oproepen maken naar externe URL's.
Daarnaast voegen we de volgende functie toe:
var EMPTY = ";? function changeLocation (varURI) showProgress (); $ .get (LEEG, functie (gegevens) window.location = varURI;);
De verander de locatie() functie wordt gebeld vanuit de android.webkit.WebViewClient, die even zal worden getoond. Het doel van de functie is om de voortgangspagina te tonen tijdens de overgang van de pagina Nieuws naar de pagina Nieuwsdetail.
verander de locatie() is om de voortgangspagina weer te geven.krijgen() functie is een gespecialiseerd jQuery Ajax() functie. Wij bellen krijgen() het doorgeven van een lege URL en een callback-handler, die de window.location variabele naar het invoerargument. Het invoerargument is de URL in de een tag voor een nieuwsitem, zoals besproken in Deel 2, "Naar de nieuwsdetailpagina gaan vanaf de nieuwspagina". Wanneer de URL wordt geladen, wordt de voortgangspagina vervangen door de inhoud van die URL.verander de locatie() is geen essentieel onderdeel van het migreren van de webtoepassing naar een native native app. Het is alleen nodig om een voortgangspagina weer te geven bij het overschakelen van de pagina Nieuws naar de pagina Nieuwsdetail in de oorspronkelijke toepassing. Het eerste deel van onze Activiteit klas, genoemd NewsActivity wordt hieronder getoond:
pakket com.news; import android.app.Activity; importeer android.webkit.WebView; import android.os.Bundle ;? public class NewsActivity breidt activiteit uit WebView mWebView; public void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.main); mWebView = (WebView) findViewById (R.id.webview); mWebView.setWebViewClient (nieuwe NewsClient ()); mWebView.getSettings () setJavaScriptEnabled (true).; mWebView.getSettings () setDomStorageEnabled (true).; mWebView.loadUrl ( "android_asset / www / index.html"); ?
onCreate () methode, noemen we eerst de standaardimplementatie uit de superklasse en roepen vervolgens aan setContentView () om het lay-outbestand voor deze activiteit te laden. Het invoerargument voor setContentView () is R.layout.main wat een verwijzing is naar main.xml in de res / layout map.WebView via findViewById (R.id.webview). We hebben een gebruik ingesteld WebViewClient op de WebView, genaamd NewsClient (binnenkort te bekijken). Vervolgens configureren we de WebView om JavaScript-uitvoering en de DOM-opslag-API toe te staan (dit laatste is nodig om HTML5 te gebruiken lokale opslag).WebView om de te laden index.html pagina met de UI-code.Als u op de pagina Nieuwsdetail op de knop Terug drukt, gaat de gebruiker terug naar de pagina Categorieën. Om hiervan verzekerd te zijn, moeten we eerst de onKeyDown evenement in onze NewsActivity. Dit wordt hieronder getoond:
public class NewsActivity breidt activiteit uit WebView mWebView; public void onCreate (Bundle savedInstanceState) ? public boolean onKeyDown (int keyCode, KeyEvent event) if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack ()) mWebView.goBack (); geef waar terug; retourneer super.onKeyDown (keyCode, event); ?
Als de toetsgebeurtenis overeenkomt met de terugknop van het apparaat en de WebView heeft de geschiedenis om terug te gaan naar, dan vragen we het WebView om een stap terug te gaan in zijn geschiedenis. Op de pagina Nieuwsdetail komt dit overeen met index.html. Wanneer de geschiedenis een stap teruggaat, wordt de pagina Categorieën weergegeven volgens de stappen die worden beschreven in Deel 2, "Toepassing opstarten".
Laten we ten slotte de gewoonte bekijken WebViewClient die is geïmplementeerd als een innerlijke klasse van NewsActivity.
public class NewsActivity breidt activiteit uit WebView mWebView; public void onCreate (Bundle savedInstanceState) ? mWebView.setWebViewClient (nieuwe NewsClient ()) ;? public boolean onKeyDown (int keyCode, KeyEvent event) ? private class NewsClient breidt WebViewClient uit public boolean shouldOverrideUrlLoading (WebView-weergave, String-URL) view.loadUrl ("javascript: changeLocation ('" + url + "')"); geef waar terug; ? De enige bewerking die we uit de bovenliggende klasse overschrijven is shouldOverrideUrlLoading () waar we de WebView om de JavaScript-functie te bellen verander de locatie() in index.html.
WebViewClient, de pagina Nieuwsdetail wordt weergegeven in een aparte browsertoepassing, buiten de toepassing Nieuws. Daarom een gebruik definiëren WebViewClient is essentieel om de pagina Nieuwsdetail weer te geven als onderdeel van de toepassing Nieuws (dus in dezelfde WebView die de host is index.html).shouldOverrideUrlLoading () op een meer vereenvoudigde manier, als volgt: public boolean shouldOverrideUrlLoading (WebView-weergave, String-URL) view.loadUrl (url); geef waar terug;
Dat zou voldoende zijn om de Nieuws Detail-pagina er in hetzelfde weer te geven WebView die gastheren index.html. De overgang van de pagina Nieuws naar de pagina Nieuwsoverzicht bevat echter geen weergave van de voortgangspagina.
Na de Activiteit klasse, laten we eens kijken naar andere componenten van onze applicatie.
AndroidManifest.xmlVoor een algemene discussie over de AndroidManifest.xml bestand verwijzen naar de officiële referentie. In dat bestand zijn er twee specifieke items die het waard zijn om commentaar te leveren.
android.app.Activity documentatie, standaard een configuratiewijziging, inclusief een verandering in oriëntatie of toetsenbordtoegankelijkheid, resulteert in de vernietiging van de huidige activiteit. Om het standaardgedrag te voorkomen, configureren we onze applicatie door de configuratiewijzigingen op te geven die door de toepassing zelf worden afgehandeld. Dit wordt gedefinieerd in de configChanges attribuut waar oriëntering komt overeen met oriëntatiewijziging en keyboardHidden correspondeert met een toetsenbordtoegankelijkheidswijziging (bijvoorbeeld opent een gebruiker het toetsenbord van het apparaat). We zijn bezig met het configureren van de applicatie zodat, als een van die wijzigingen optreedt, de huidige activiteit niet wordt vernietigd.strings.xmlNieuws
Dit bestand definieert de constante met de naam applicatie naam die wordt gebruikt om de toepassing Nieuws te identificeren. De waarde van dat kenmerk wordt op verschillende plaatsen op ons Android-apparaat weergegeven, zoals hieronder wordt weergegeven. Van links naar rechts: onder het startpictogram van de toepassing, de titelbalk van de toepassing, Instellingen - Toepassingen beheren.
android.app.Activity We implementeren de gebruikersinterface in onze native Android-applicatie met index.html en het ondersteunende JavaScript en css bibliotheken. Een integratiepunt tussen index.html en de gewoonte android.app.Activity klasse is de volgende regel:
mWebView.loadUrl ( "android_asset / www / index.html");
Bekijk bovendien in "De activiteitsklasse" dat we JavaScript en DOMStorage inschakelen in de android.webkit.WebView object als index.html moet JavaScript uitvoeren en HTML5 openen lokale opslag.
mWebView.getSettings () setJavaScriptEnabled (true).; mWebView.getSettings () setDomStorageEnabled (true).;
Eindelijk, in de AndroidManifest.xml we staan internetverbindingen toe vanuit onze applicatie via:
De eerder getoonde figuren 1 - 4 in deel 1 van deze reeks zijn de schermafbeeldingen van de oorspronkelijke Android-applicatie.
Om het startpictogram voor de toepassing Nieuws te maken, volgden we de richtlijnen voor pictogramontwerp voor Android-apps. In die bron zijn verschillende sjablonen in Adobe PSD-formaat beschikbaar om te downloaden. We hebben gedownload icon_templates-v2.0.zip en geëxtraheerd Launcher-icon-template.psd. In dat bestand hebben we twee sjablonen geselecteerd om ons startpictogram te maken:
We plaatsten die sjablonen in twee afzonderlijke lagen in Adobe Photoshop en voegden een grafische tekst toe, Nieuws, op een extra laag bovenaan om het startpictogram samen te stellen. Per de richtlijn hebben we drie versies van het pictogram gemaakt voor schermen met een lage, gemiddelde en hoge dichtheid met respectievelijk 36 x 36, 48 x 48 en 72 x 72 pixelformaten. Elk van deze pictogrammen heeft een naam icon.png en ze worden geplaatst in de Android-projectmappen volgens de volgende tabel:
| Naam van de map | Bestandsnaam | Pixelgrootte |
res \ betekenbare-LDPI | icon.png | 36 x 36 |
res \ betekenbare-mdpi | icon.png | 48 x 48 |
res \ betekenbare-hdpi | icon.png | 72 x 72 |
Dit is bijvoorbeeld het startpictogram van 36 x 36:
Als onderdeel van deze zelfstudie hebben we de benodigde projectbestanden geleverd om de oorspronkelijke Android News-toepassing te importeren in de Eclipse-ontwikkelomgeving. De projectvereisten zijn:
Het project is met succes getest op zowel Android-platform 2.2 API niveau 8 als platform 2.3 API-niveau 9.
Voordat u het project in uw Eclipse-omgeving importeert, moet u ervoor zorgen dat de Eclipse ADT-plugin naar de juiste locatie van Android SDK in uw lokale systeem wijst. Om dit te controleren, gaat u in het Eclipse-menu naar Venster -> Voorkeuren -> Android. De SDK-locatie venster moet worden ingesteld op de locatie van de Android SDK. Als je het goed hebt ingesteld, zou je iets moeten zien dat lijkt op de afbeelding hieronder:
De projectbestanden worden geleverd in een archiefbestand met de naam news.zip. Om het project in het Eclipse-menu te importeren, gaat u naar Bestand -> Importeren en selecteer vervolgens in de wizard voor het importeren van bestanden Algemeen -> Bestaande projecten in werkruimte (zie hieronder).
Kies op de volgende pagina van de wizard de Selecteer een archiefbestand keuzerondje en blader naar waar news.zip bevindt zich in uw bestandssysteem. De projecten venster wordt automatisch ingevuld waar de Nieuws project is al geselecteerd. Dit wordt hieronder getoond. druk de Af hebben om het importeren te voltooien.
Eclipse bouwt de applicatie automatisch na het importeren. Nu zou u het nieuwsproject in de projectverkenner moeten zien, zoals hieronder getoond:
Voor het bouwen / debuggen van uw project kunt u kiezen tussen Android OS 2.3- en 2.2-platforms als het builddoel. Hiertoe selecteert u de Nieuws project in de projectverkenner en kies met de rechtermuisknopmenu eigenschappen. Klik op de lijst met eigenschappen aan de linkerkant Android als het eigendom. De beschikbare builddoelen worden rechts weergegeven, zoals hieronder weergegeven:
Hieronder vindt u een lijst van bestanden in het project.
We hebben al een aantal van die bestanden besproken. Hieronder volgt een korte beoordeling / samenvatting:
src map bevat de broncode voor de NewsActivity klasse.gen map bevat de bestanden die automatisch worden gegenereerd door Eclipse ADT.activa \ www map en de submappen bevatten alle bestanden die nodig zijn voor de gebruikersinterface, inclusief index.html; activa \ www \ css-js heeft de css en JavaScript-bestanden gebruikt door index.html. Met name: jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css zijn de jQuery Mobile-framework-bibliotheken.jquery.ba-dotimeout.js is de jQuery-dotimeout-plugin-bibliotheek.jquery.dst.js is de DST.js plug-inbibliotheek.activa \ www \ css-js \ images \ icons-18-white.png is een afbeeldingsbestand waarnaar wordt verwezen door de jQuery Mobile-framework-bibliotheken.activa \ www \ img \ wait.gif is het draaiende pictogram dat wordt gebruikt op de voortgangspagina.res \ betekenbare * mappen slaan de lanceringspictogrammen op, zoals besproken in het gedeelte "Pictogram introductie starten" van deze zelfstudie.res \ layout \ main.xml bestand is het XML-lay-outbestand van Android. Omdat de UI in onze applicatie is gedefinieerd in index.html met behulp van jQuery Mobile framework, dit bestand is heel eenvoudig en behoeft geen verdere uitleg.res \ waarden \ strings.xml en AndroidManifest.xml.default.properties definieert het builddoel en maakt er deel van uit news.zip. Het wordt overschreven door Eclipse ADT, afhankelijk van uw selectie van het builddoel.Naast de ontwikkeling van platformonafhankelijke mobiele webapps, kan het jQuery Mobile-framework worden gebruikt om native Android-applicaties te implementeren. In deze tutorialserie hebben we een webtoepassing ontwikkeld met behulp van jQuery Mobile en vervolgens gemigreerd naar een native Android-applicatie met slechts kleine wijzigingen. Het belangrijkste idee is om de android.webkit.WebView object als een container om het html-bestand van de webtoepassing uit te voeren en de jQuery Mobile JavaScript-code die het bevat. Enkele slotopmerkingen worden hieronder gegeven.
android.webkit.WebView is niet onderworpen aan beperkingen van dezelfde oorsprong bij het voeren van AJAX-oproepen.