WebView (inApp and Chrome both) Using Native Android Code and Phonegap

TO OPEN URL IN APP ITSELF :

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;

public class WebViewActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

String url =”http://www.google.com”;
WebView wv=(WebView) findViewById(R.id.webView1);
wv.getSettings().setJavaScriptEnabled(true);
   wv.getSettings().setPluginState(PluginState.ON);
   wv.getSettings().setAllowFileAccess(true);
wv.loadUrl(url);

//String customHtml = “<html><body><h1>Hello, WebView</h1><body><script>var ref = window.open(‘http://www.google.com&#8217;, ‘_system’, ‘location=yes’);</script></body></html>”;
//webView.loadData(customHtml, “text/html”, “UTF-8”);

}

}

FANCY WAY

public class WebViewActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

WebSettings mWebSettings;

        WebView mWebView = (WebView)findViewById(R.id.webView1);
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
        mWebView.setBackgroundColor(Color.TRANSPARENT);
        mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_INSET);

        mWebView.loadUrl(“https://www.google.co.in/&#8221;);
        mWebView.setWebViewClient(new MyWebViewClient());
}


}

package com.mkyong.android;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MyWebViewClient extends WebViewClient { 
    @Override 
    //show the web page in webview but not in web browser
    public boolean shouldOverrideUrlLoading(WebView view, String url) { 
        view.loadUrl (url); 
        return true;
    } 
}

TO OPEN URL IN BROWSER : 

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;

public class WebViewActivity extends Activity {

private WebView webView;

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);

webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(“http://www.google.com&#8221;);

//String customHtml = “<html><body><h1>Hello, WebView</h1><body><script>var ref = window.open(‘http://www.google.com&#8217;, ‘_system’, ‘location=yes’);</script></body></html>”;
//webView.loadData(customHtml, “text/html”, “UTF-8”);

}

}

FINALLY GOT THE PHONEGAP THING WORK TOO …THE ISSUE WA THAT I WAS ONLY RUNNING THE PHONEGAP ANDROID EXAMPLE  FROM  : …\phonegap-2.7.0\phonegap-2.7.0\lib\android\example

BUT ACTUALLY  I ALSO HAD TO REPLACE THE INDEX.HTML CODE WITH FULL EG. CODE FROM http://docs.phonegap.com/en/2.7.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser.
But SADLY that also opens inAppBrowser….
OPEN FILE SYSTEM HTML

webView.loadUrl(“file:///android_asset/www/index.html”);

In both cases this is always opening in the App, but i need it to open in Browser…

Resources :

http://developer.android.com/guide/webapps/webview.html#AddingWebView

NEXT STEP :

1. how to load html from file system in browser using android code
2. how to package web apps into android

ANOTHER IDEAL WAY OF DOING THIS IN THIS CIRCUMSTANCE IS TO DEVELOP A HMTL5 WEB APP THAT USES OFFLINE STORAGE..NOW WHEN THE APP IS LAUNCHED, THE APP WILL TRY TO HIT THE URL AND IF IT IS OFFLINE, IT WILL LOAD THE LOCAL HTML FILE (STORED IN THE BROWSER LOCAL STORAGE)……

THAT REMINDS ME THAT I ALREADY HAVE A HOSTED APP FOR USERMEDIA : http://tkhemani.github.io/getusermedia_tk (IF THIS HAS ANY ISSUES USE  http://simpl.info/getusermedia/ )

WELL, ALL I HAD TO DO WAS OPEN IT USING ABOVE CODE :)))))))

FINAL STEP WOULD BE TO CACHE THIS PAGE LOCALLY AND I’M DONE….



Looked into the local storage feature and tried to see some egs.

Next step : understand and use   http://appcache-demo.s3-website-us-east-1.amazonaws.com/localstorage-cache/

Advertisements

Accessing Native Camera in Sencha App using Phonegap

Lessons : 


1. Native Camera API provides many features that Phonegap doesn’t expose yet (in 2.7), so native code has to be written for it.

2. In fact, WebRTC provide more photo editing features (using the HTML Canvas) than Phonegap does today.

>> The code is simple but i spent a day trying to make it complex..so as a rule always look for the eg. in the official source instead of banging your head with hit and try…

I used the example from the Phonegap Site as it is (tested) :

Basically this goes in the handler of the button tap of the button on the panel and then on success it shows the captured image on the current panel, so in the panel add HTML :

 xtype: ‘panel’,
                hidden: true,
                html: ‘<br/><img style=”display:none;margin-left: 20px;width:340px;height:185px;” id=”FrontImage” src=”” /><br/>’,
Code for handler :

var pictureSource;   // picture source
var destinationType; // sets the format of returned value 

pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;


navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, 
destinationType: destinationType.DATA_URL });

function onFail(message) {
    alert(‘Failed because: ‘ + message);
}

function onPhotoDataSuccess(imageData) {
    //Ext.getCmp(‘makeDeposit’).hide();
    //Ext.getCmp(‘FrontPicContainer’).show();


    Ext.getCmp(‘frontCheckBtnD’).setText(‘Image Captured’);

    if((Ext.getCmp(‘frontCheckBtnD’).getText()===’Image Captured’)&&(Ext.getCmp(‘toFieldLabelDnew’).getValue()!== ”)&&(Ext.getCmp(‘transferAmount’).getValue()!== ”))
    Ext.getCmp(‘continueBtnD’).enable();

    // Uncomment to view the base64 encoded image data
    // console.log(imageData);

    // Get image handle
    //
    var FrontImage = document.getElementById(‘FrontImage’);

    // Unhide image elements
    //
    FrontImage.style.display = ‘block’;

    // Show the captured photo
    // The inline CSS rules are used to resize the image
    //
    FrontImage.src = “data:image/jpeg;base64,” + imageData;

}