Cum scriem o aplicaţie HTML5 pentru Android (III)


Acum e acum… După prima şi a doua parte introductivă, acum ajungem într-adevăr la scrierea unei aplicaţii HTML5 pentru Android. Dacă aţi urmat cele descrise în primele două articole nu ar trebui să vi se pară chineză ce voi scrie mai departe. Să pornim creând un nou proiect pentru Android (2.2 în testele mele). I-am spus proiectului “Proba HTML”, iar primul loc unde am mers este în subfolderul res, subfolderul layout, unde avem un fişier main.xml. Deschideţi-l (comutaţi din Graphical layout dacă aşa vă apare în modul text) şi veţi vedea ceva ca mai jos.

imagine

Primul pas este să schimbăm liniile selectate cu … vedeţi primul cod de la finalul articolului, prin care facem trecerea spre aplicaţie HTML5. Să pregătim acum terenul pentru HTML5. Click dreapta pe folderul assets şi alegeţi New, apoi Folder şi creaţi un folder www. Pe aceeaşi cale creaţi un fişier acum (deci File în loc de Folder) şi botezaţi-l index.html.

imagine

Acum aveţi deci în folderul assets un folder html cu un fişier denumit index.html. Pun o captură ca să fim siguri că totul e OK.

imagine

Deci aplicaţia Android e pregătită pentru web (folosim WebView) şi are ce să arate (index.html). Acum trebuie să îi spunem ca WebView să arate index.html. Pentru aceasta în arbore mergem pe altă cale: în src, apoi în ce o fi acolo (numele l-aţi dat Dvs într-un pas anterior, când aţi ales un package name), şi în fine ajungem la fişierul ce se termină în Activity.java. Aici facem conexiunea. Am pus jos tot codul, dar import-urile se autocompletează singur deci teoretic ar trebui să adăugaţi WebView webView înainte de linia @Override, şi apoi liniile ce se văd marcate.

imagine

Ultimul pas nu e necesar acum, dar dacă îl spun este pentru că sunt dese cazurile în care vom avea nevoie de intervenţii în AndroidManifest.xml. Noi acum doar vom adăuga ce e marcat mai jos, pentru a câştiga spaţiu în aplicaţie, eliminând bara de titlu.

imagine

Şi cu aceasta am terminat! Putem lansa aplicaţia şi vom obţine ceea ce vedeţi mai jos. Nu vă lăsaţi înşelaţi de aparenţe. Este o aplicaţie pentru Android! Scrisă minimal tocmai ca lucrurile să fie clare. Şi de aici încolo să ştiţi că nu se complică foarte mult.

imagine

Pentru siguranţă pun toate cele trei fişiere ce au fost modificate faţă de proiectul de start (ar fi patru, dar index.html e chiar irelevant, doar să fie HTML5).

MAIN.XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView" />

</LinearLayout>

…ACTIVITY.JAVA

package proba.html.namespace;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class ProbaHTMLActivity extends Activity {
    /** Called when the activity is first created. */
	WebView webView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webView = (WebView) findViewById(R.id.webView);
        webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient());
        webView.loadUrl("file:///android_asset/www/index.html");
    }
}

ANDROIDMANIFEST.XML

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="proba.html.namespace"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:label="@string/app_name"
            android:name=".ProbaHTMLActivity" 
            android:theme="@android:style/Theme.NoTitleBar" >
            <intent-filter >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (4 evaluări, media: 5,00 din 5)
Loading...Loading...

1 comentariu

  1. Ady spune:

    Si alte tutoriale mai apar? :D… Sunt cam varza la capitolul programare, dar as vrea sa invat sa fac app pt Android.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *