יום שבת, 10 במאי 2014

WebView Interfaces




כשניגשים לפתח אפליקציה נשאלת השאלה מה הפלטפורמה המתאימה ביותר?, חלק יגידו שכתיבה מסורתית בקוד Native היא הפתרון המתאים ויש כאלה שחולקים על זה ומעדיפים לכתוב ב HTML 5  במעטפת Webkit ותוספות נוספות כמו PhoneGap, האמת שככל שעובר זמן יש יתרון בולט ל Html 5 כי אינו מצריך התייחסות מיוחדת כלפי מערכת ההפעלה והופך את האפליקציה ל Cross Platform אבל ברגע שצריכים לבצע פעולות מיוחדות בחומרה כל העסק מתחיל להתפרק כמו מגדל קלפים ברוח.

אופי האפליקציה חשוב מאוד לבחירת הפלטפורמה למשל אם זו תוכנית לתצוגת נתונים מ Database שמזכירה בהתנהגות שלה אתר אינטרנט מומלץ להשתמש ב Html 5, זו הדרך הפשוטה והמהירה ביותר, אבל אם רוצים להשתמש במצלמה או בכל רכיב חומרתי אחר Native Code חזק יותר אז מה עושים עם אפליקציות שקשה להגדיר? נקודת המוצא היא להשתמש ב Native אבל אם ניתן להגדיר תחומי אחריות ברורים ניתן לשלב גם Html וכך להקטין את התלות במערכות ההפעלה.

סביבות משולבות

ההתממשקות הראשונה היא בסיסית ביותר ונעשת בעזרת האזנה מאחורי הקלעים ל Redirects שקורים ב WebKit ומאפשרת לשנות את ההתנהגות של האפליקציה, הדוגמה מתחילה מ Activity שמכיל בתוכו כפתור, לחיצה עליו מעבירה ל Activity אחר עם Webview שטוען דף Html עם מספר קישורים שמובילים לאיזורים שונים באפליקציה:



BrowserActivity

כשמתמקדים בקוד של ה Activity ניתן לראות כיצד אפשר לדרוס את הפונקציה המקורית של ה WebKit בפונקציה חדשה דרכה ניתן לנתח את הבקשות של המשתמש.

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class BrowserActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_browser);
WebView _view = (WebView)findViewById(R.id.webView1);
class MainScreenActivity extends WebViewClient {

//every redirect active this function
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//checking the url and change behavior
if(url.toLowerCase().contains("back:mainactivity"))
{
finish();
return true;
}
else if(url.toLowerCase().contains("goto:otheractivity"))
{
Intent intent = new Intent(BrowserActivity.this,OtherActivity.class);
startActivity(intent);
return true;
}
else
{
//send back to the original call
return super.shouldOverrideUrlLoading(view, url);
}
}
}
//overwrite the WebViewClient class with new implementation 
_view.setWebViewClient(new MainScreenActivity());
//make the first call
_view.loadUrl("file:///android_asset/www/index.html"); 
}

}


JavaScript Interface

ההתממשקות הבאה יותר מורכבת ומאפשרת לקרוא לפונקציות Native בעזרת פונקציות JavaScript , יוצרים מחלקה ייעודית שדרכה נוצר גשר שמחבר בין 2 הפלטפורמות.

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.webkit.WebView;

public class BrowserActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_browser);
WebView _view = (WebView)findViewById(R.id.webView1);
//add javascript support to webview
_view.getSettings().setJavaScriptEnabled(true);
//interface implementation
        class jsInterface{
        Context mContext;
        String mMsg;
     
          public jsInterface(Context m) {
          mContext = m;
        }
   
         //@JavascriptInterface
         //add in higher sdk version  4.0.1 +
         public void SetInterface(String Msg)
         {
            mMsg = Msg;
         }
   
            //@JavascriptInterface
          //add in higher sdk version  4.0.1 +
          public String GetInterface()
         {
            return mMsg;
          }
   
}
//add interface to webview, with bridge name
_view.addJavascriptInterface(new jsInterface(this), "Android");
//make the first call
_view.loadUrl("file:///android_asset/www/index.html"); 
}

}

קובץ ה JavaScript קורא לפונקציות החשופות בעזרת השם של הממשק:

function setMessage()
{
Android.SetInterface(document.getElementById('txt_msg').value);
}

function getMessage()
{
document.getElementById('lbl_msg').innerHTML = Android.GetInterface();
}



סיכום

אני לא יודע מה יקרה בעתיד אבל הדילמה אם להשתמש ב Native או ב Html 5 עדיין קיימת ומצריכה חשיבה מחוץ לקופסה,המון חברות לקחו את הרעיון של ה HTML5 ויצרו סביבות פיתוח שלמות שמבוססות על הרעיון, אם זו השיטה הטובה ביותר, לא תמיד ולפעמים אין ברירה ולדבר עם המכשיר בשפה שהוא מכיר.

מידע נוסף

בהצלחה...

אין תגובות:

הוסף רשומת תגובה