08 Membuat WebView Pada Fragment

1| Membuat WebView pada Fragment Android

MEMBUAT WEBVIEW PADA FRAGMENT ANDROID

1. Pada Modul Latihan ini kita akan membuat sebuah WebView yang menampilkan halaman web dengan URL tertentu pada fragment Android. Fragment frg_welcome yang telah kita buat akan ditampilkan pertama kali dan langsung menampilkan halaman web http://aflowz.com http://aflowz.com..  Jika hubungan internet terputus akan ada pesan gambar pada webview berupa image disconnected. 2. Open file layout xml frg_welcome di folder app

res

layout

fragment_frg_welcome.xml.

Delete komponen layout TextView sehingga bersih tersisa FrameLayout saja. Drag and drop Palette

Layouts

Drop Palette

Component Tree dibawah FrameLayout. Drag and RelativeLayout ke Panel Component

Widgets

Button  ke Panel Component Tree dibawah RelativeLayout dan

terakhir Drag and drop Palette

Containers

WebView ke bawah Button.

3. Beri nama id untuk Button btnRefresh dan Text nya “Refresh”, WebView wvAflowz. Tambahkan properties wvAflowz relative dibawah android  :layout_below="@id/btnRefresh" :layout_below="@id/btnRefresh"

button

dengan

properties

android

4. Untuk Button buat width nya match_parent agar penuh melebar kesamping. Dan height nya wrap_content sesuai tingga default sebuah button. Untuk WebView wvAflowz buat width dan height nya match_parent sehingga memenuhi sisa space layout karena akan menampilkan halaman web.

[email protected] [email protected]  - IndonesiaKu Cemerlang (IKC)

2| Membuat WebView pada Fragment Android

5. File layout fragment frg_welcome secara lengkap ditampilkan dibawah ini. Untuk Text Button dan komponen lain yang memiliki Text sebaiknya dibuat di variable string, bukan diseting langsung di layout. Hal tersebut diperlukan ketika kita membuat aplikasi android multi language dengan banyak bahasa. Dengan membuatnya di variable string.xml maka akan dibuat grup-grup elemen xml untuk setiap bahasa yang berbeda tanpa mengganggu file layout xml.



 WebView < android  :layout_width="match_parent" android  :layout_height="match_parent" android  :layout_below="@id/btnRefresh" android  :id="@+id/wvAflowz" />

6. Sekarang kita akan menambah kode program java di frg_welcome. Buka file java app  java

com

fragment

frg_welcome.java. Tambahkan class AsyncTask myikc() di Public

View onCreateVeiew agar memiliki proses thread yang berbeda dengan MainAcitivity yang menjalankan drawer sehingga keduanya dapat berjalan bersama. @Override  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment

new myikc().execute();

return inflater.inflate(R.layout.fragment_frg_welcome, container, false); }

7. Tambahkan class myikc() dan kita akan menambahkan proses inisiasi komponen layout di fungsi OnPostExecute di bagian akhir badan program frg_welcome.

[email protected] - IndonesiaKu Cemerlang (IKC)

3| Membuat WebView pada Fragment Android

class myikc extends AsyncTask { @Override  protected void onPreExecute() { super.onPreExecute(); }

 protected String doInBackground(String... args) { return null ; }

 protected void onPostExecute(String file_url) {

Button btnHome=(Button) getView().findViewById(R.id. btnRefresh ); btnHome.setText( "Selamat Datang di Home" ); btnHome.setOnClickListener( new View.OnClickListener() { @Override  public void onClick(View v) { // do something

Toast. makeText (getActivity(), "Loading Home" , Toast.LENGTH_LONG  ).show(); new myikc().execute(); } });

WebView wv =(WebView) getView().findViewById(R.id. wvAflowz  ); wv.getSettings().setJavaScriptEnabled( true ); wv.getSettings().setDefaultZoom(WebSettings.ZoomDensity. FAR  ); String url="http://aflowz.com" ; wv.loadUrl(url); wv.setWebViewClient( new WebViewClient() { @Override  public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true ; } });

wv.setWebViewClient( new WebViewClient() {  public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { Toast. makeText (getActivity(), "Mohon periksa koneksi data internet anda ).show(); ...", Toast.LENGTH_SHORT  WebView wv =(WebView) getView().findViewById(R.id. wvAflowz  ); wv.loadDataWithBaseURL( "file:///android_asset/" , "", "text/html" , "utf-8" , null); } }); } }

[email protected] - IndonesiaKu Cemerlang (IKC)

4| Membuat WebView pada Fragment Android

8. Ketika fragment frg_welcome diload kita akan merubah Text pada Button btnRefresh dengan text “Selamat Datang di Home” dengan methode setText(“text”) sbb : Button btnWf=(Button) getView().findViewById(R.id. btnRefresh ); btnWf.setText( "Selamat Datang di Home" );

9. Selanjutnya kita akan menambahkan event onClick btnHome untuk menjalankan execute() kembali class myikc() sehingga fragment akan diload ulang dengan menampilkan informasi TOAST “Loading Home” sbb: btnHome.setOnClickListener( new View.OnClickListener() { @Override  public void onClick(View v) { // do something

Toast. makeText (getActivity(), "Loading Home" , Toast.LENGTH_LONG  ).show(); new myikc().execute(); } });

10. WebView wvAflowz akan kita setting untuk menampilkan URL sebuah Web dengan address http://aflowz.com dencan code sbb : WebView wv =(WebView) getView().findViewById(R.id. wvAflowz  ); wv.getSettings().setJavaScriptEnabled( true ); wv.getSettings().setDefaultZoom(WebSettings.ZoomDensity. FAR  ); String url="http://aflowz.com" ; wv.loadUrl(url); wv.setWebViewClient( new WebViewClient() { @Override  public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true ; } });

11. Karena kita mengakses sebuah web di internet maka perlu ditambahkan setting internet di file app

manifests

AndroidManifest.xml dengan code :

Sehingga code file xml AndroidManifest.xml menjadi :

:name="android.permission.INTERNET" />