1 / 13

Android vs. JavaScript

Learn how to integrate native Java code with JavaScript using the JavaScriptInterface in Android app development.

davisons
Download Presentation

Android vs. JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Android vs. JavaScript 建國科技大學資管系 饒瑞佶 2013/5

  2. JavaScript call Java • By JavascriptInterface • 將native code寫在JavascriptInterface內，例如取得方位的程式 • 透過WebView來串接JavascriptInterface與JavaScript • JavaScript端透過window.interface名稱.函數來呼叫程式

  3. 建立class JsInterface publicclassJsInterface { Context mcontext; publicJsInterface(Context c){ mcontext=c; } //Javascript call JAVA publicvoidgetSomeString(){ Toast.makeText(mcontext, "呼叫JAVA成功", Toast.LENGTH_LONG).show(); } // JAVA call Javascript publicString setValFromJava(){ return"資料從JAVA設定到HTML端"; } }

  4. 呼叫class JsInterface publicclass Main extends Activity { WebViewmWebView; @Override protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mWebView=newWebView(this); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.addJavascriptInterface(newJsInterface(this), "myjsinterface"); mWebView.loadUrl("file:///android_asset/www/index.html"); setContentView(mWebView); } }

  5. 建立index.html <html> <head> <title>PhoneGap</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script src="jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.3.0.min.css"> <script src="jquery.mobile-1.3.0.min.js"></script> <script> $(document).ready(function(){ $('#calljava').click(function(){ window.myjsinterface.getSomeString(); }); $('#sethtml').click(function(){ $('#showval').html(window.myjsinterface.setValFromJava()); }); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Android JAVA vs. Javascript</h1> </div> <div data-role="content"> <input type="button" id="calljava" value="call JAVA"> <input type="button" id="sethtml" value="Set HTML"> <div id="showval"></div> </div> <div data-role="footer"> <h1>2013/5/20</h1> </div> </div> </body> </html>

  6. 製作硬體呼叫jar檔

  7. classcompassjar publicclass compassjar { private SensorManager sm=null; // Sensor Manager private Sensor aSensor;//加速度計 private Sensor mSensor;//磁方位 float[] accelerometerValues=newfloat[3]; //加速度計值 float[] magneticFieldValues=newfloat[3];//磁方位值 float[] rotate=newfloat[16]; //原始值 float[] outrotate=newfloat[16]; float[] values=newfloat[3]; private compassjar.Callback cb=null; // constructor public compassjar(Context context, compassjar.Callback cb) { this.cb=cb; //返回呼叫 sm = (SensorManager)context.getSystemService(Context.SENSOR_SERVICE); aSensor=sm.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); mSensor=sm.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD); sm.registerListener(myListener, aSensor, SensorManager.SENSOR_DELAY_UI); sm.registerListener(myListener, mSensor, SensorManager.SENSOR_DELAY_UI); }

  8. // sensor關閉 publicvoid close() { sm.unregisterListener(myListener); } privatevoid outxyz(float x,float y,float z) { if (cb!=null) { cb.getxyz(x,y,z); } } publicinterface Callback { void getxyz(float x,float y,float z); }

  9. private SensorEventListener myListener=new SensorEventListener() { publicvoid onSensorChanged(SensorEvent e) { if(e.sensor.getType()==Sensor.TYPE_ACCELEROMETER){ accelerometerValues=e.values; } if(e.sensor.getType()==Sensor.TYPE_MAGNETIC_FIELD){ magneticFieldValues=e.values; } // 取得方位角 SensorManager.getRotationMatrix(rotate, null, accelerometerValues, magneticFieldValues); SensorManager.remapCoordinateSystem(rotate,SensorManager.AXIS_Z ,SensorManager.AXIS_MINUS_X, outrotate); SensorManager.getOrientation(outrotate, values); // 轉換成度 180~-180 values[0]=(float)Math.toDegrees(values[0]); //x values[1]=(float)Math.toDegrees(values[1]); //y values[2]=(float)Math.toDegrees(values[2]); //z //輸出 outxyz(values[0],values[1],values[2]); } publicvoid onAccuracyChanged(Sensor sensor, int accuracy) { // unused } }; }

  10. 輸出jar檔

  11. 輸出jar檔

  12. 使用jar檔 首先匯入jar檔 publicclassCallCompassJarextends Activity implementscompassjar.Callback { @Override protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } @Override publicvoidgetxyz(float arg0, floatarg1, float arg2) { // TODO自動產生的方法 Stub } }

  13. publicclassCallCompassJarextends Activity implementscompassjar.Callback { privatecompassjarshaker=null; //建立compassjar TextViewtv; //顯示資料 @Override protectedvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // 這裡來自於jar shaker=newcompassjar(this, this); tv=(TextView)findViewById(R.id.textview1); } @Override publicvoidgetxyz(float arg0, float arg1, float arg2) { // 呼叫jar tv.setText("X=" + arg0 + "\n Y=" + arg1 + "\n Y=" + arg2); } }

More Related