Selasa, 12 Februari 2013

Android Webkit untuk Menjalankan Javascript Dinamis Auto Submit Form

Ternyata kemampuan Webkit lebih hebat lagi, tidak terbatas seperti yang telah dibahas pada artikel sebelumnya yaitu Menampilkan Custom HTML Dinamis pada Webkit Android dan Web Browser tidak FullScreen pada Android. Webkit Android juga mampu menampilkan suatu halaman Web HTML baik Custom maupun Web di internet kemudian menjalankan Javascript secara dinamis, custom, atau programmatically.

Kegunaan yang disukai para pengguna web adalah Auto Submit Form, yaitu ketika kita menampilkan halaman Web yang menampilkan suatu input atau login form, maka aplikasi Android mampu mengisi input form tersebut secara otomatis dan mensubmit atau mengkik tombol Submit atau Login secara otomatis, sangat menyenangkan.

Pertama kita buat project baru, kemudian letakkan kode program berikut di Activity utama.

MainActivity :




package com.amijaya.androidwebkitjavascriptsubmit;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

// http://cariprogram.blogspot.com
// nuramijaya@gmail.com

public class MainActivity extends Activity {
Button Button01;
Button Button02;
WebView webView;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        webView = (WebView)findViewById(R.id.WebView01);
        
        String customHtml = "<html>"+
        "<head>"+
        "</head>"+
        "<body>"+
        "<form action='http://google.com/submit.php' method='post' id='loginForm' name='loginForm'>"+
        "<input id='username' name='username' type='text' />"+    
        "<input id='password'  type='password' name='password' />"+                           
        "<input id='SubmitCreds' type='submit' value='Log On' name='SubmitCreds' />"+                             
        "</form>"+
        "</body>"+
        "</html>";
        
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadData(customHtml, "text/html", "UTF-8");
        
        // agar web browser tidak fullscreen ketika menampilkan web 
        webView.setWebViewClient(new WebViewClient() 
        {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
            {
                view.loadUrl(url);
                return false;
            }

            @Override
            public void onPageFinished(WebView view, String url) 
            {
                //jalankan javascript setelah selesai loading disini
            }
        });
        
        Button01 = (Button) findViewById(R.id.Button01);
        Button01.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
String username = "hobbit"; String password = "galadriel";
webView.loadUrl("javascript:document.getElementById('username').value = '"+username+"';");
webView.loadUrl("javascript:document.getElementById('password').value = '"+password+"';");
}
});

Button02 = (Button) findViewById(R.id.Button02);
        Button02.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
webView.loadUrl("javascript: {" +
           "document.getElementById('username').value = 'hobbit';" +
           "document.getElementById('password').value = 'galadriel';"  +
           "var frms = document.getElementsByName('loginForm');" +
           "frms[0].submit(); }"); 
}
});
    }
}


Kemudian desain tampilannya di xml sebagai berikut :

main.xml :


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Android WebKit"
    />
<Button android:text="Isi Form" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<Button android:text="Submit" android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<WebView android:id="@+id/WebView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></WebView>

</LinearLayout>


Jangan lupa untuk mengeset permission AndroidManifest.xml jika ingin agar aplikasi mampu mengakses web online di internet :

AndroidManifest.xml :


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.amijaya.androidwebkitjavascriptsubmit"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MainActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-sdk android:minSdkVersion="8" />

</manifest> 


Hasilnya :



Project selengkapnya dapat didownload disini :

https://docs.google.com/file/d/0B4i1FYc_4RXzVDlvd3lrVVJVekE/edit

Pada Google Drive klik File-Download :

Semoga berguna, selamat coding..