1 / 35

Web Programming 網際網路程式設計

Learn how to create a web application using WebView and Android Intent. This tutorial covers basic app programming, WYSIWYG form design, and the Android activity lifecycle.

alogan
Download Presentation

Web Programming 網際網路程式設計

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. Web Programming網際網路程式設計 Web Programming 網際網路程式設計

  2. App Programming手機程式設計 Web Programming 網際網路程式設計

  3. Again, we have only two hours Web Programming 網際網路程式設計

  4. Basic idea • There is a browser component, WebView • you could imagine that every new platform will have such a component • When users open our app, we show them a full-screen browser and load our homepage immediately • remember to hide the address bar • The remaining things are HTML, CSS, JavaScript and, if needed, CGI Web Programming 網際網路程式設計

  5. Today we will show you • A Web App Generator, wag • A demo to introduce the development environment, Eclipse • Basic app (windows) programming • WYSIWYG form design, event driven… • Basic Android app programming • Activity (a page in an app), especially its life cycle • Intent (information from an Activity to another) • Techniques needed for our basic idea • WebView • bind JS code to Android code Web Programming 網際網路程式設計

  6. Demo Web Programming 網際網路程式設計

  7. WYSIWYG form design Web Programming 網際網路程式設計 http://www.techotopia.com/index.php/Designing_Forms_in_Visual_Studio

  8. Event driven http://www.techotopia.com/index.php/Understanding_Visual_Basic_Events

  9. Android life cycle • LifeCycle • 手機的特性是能隨時離開正在使用的程式，切換到接電話、接收簡訊模式，而且在回來時能看到一樣的內容 • 使用者已經習慣了多工(Multi-Task)的作業系統 • 同時執行多個程式需要更多記憶體，而手機裡的記憶體是相當有限的。當同時執行的程式過多，或是關閉的程式沒有正確釋放記憶體，系統就會越來越慢。為了解決這個問題，Android 引入了一個新的機制：生命週期 Web Programming 網際網路程式設計

  10. This is not new http://en.wikipedia.org/wiki/Process_state

  11. http://vardhan-justlikethat.blogspot.com/2012/03/developer-view-ios-view-controller.htmlhttp://vardhan-justlikethat.blogspot.com/2012/03/developer-view-ios-view-controller.html

  12. about the life cycle Web Programming 網際網路程式設計

  13. What actions cause onPause()? Web Programming 網際網路程式設計

  14. More detailed one http://rupaknepali.com.np/activity-life-cycle-in-the-android-application-development/1474.php

  15. Intent • AndroidIntent • Intent 是一個動作與內容的集合。Intent 像是一串網址，傳送「意圖」給其他 Activity 來處理網址中所指定的動作跟內容。Android 使用 Intent 來完成在螢幕間切換的動作 • 從另一個角度來說，Intent 包含 Activity 間切換所需的動作、分類、傳送資料等訊息，就像是 Activity 之間的宅急便一樣 • Intent intent = new Intent();intent.setClass(foo.this, bar.class); // from foo to bar// retrieve and pack variablesBundle bundle = new Bundle();bundle.putString("FOO_VAR1", foo_var1.getText().toString());bundle.putString("FOO_VAR2", foo_var2.getText().toString());intent.putExtras(bundle);startActivity(intent); // start another activity Web Programming 網際網路程式設計

  16. WebView • android开发中WebView的使用(附完整程序) • WebView相當於一個迷你的瀏覽器，採用 Webkit核心，因此完美支援 HTML, CSS 以及 JavaScript 等。有時可以把UI 甚至數據處理都交给 WebView，配合 PHP 等伺服器端程式，這樣 Android 開發就變成了網頁開發 • 上面網址中提供一個 WebView的簡單例子，如果把所有功能都交给伺服器端處理，你只要寫好網頁，把URL 填上，再編譯，就是一个新app。 • WebView | Android Developers • Building Web Apps in WebView | Android Developers Web Programming 網際網路程式設計

  17. WebView code snippet Get the view object. • wv = (WebView) findViewById(R.id.wv);wv.getSettings().setJavaScriptEnabled(true);wv.setScrollBarStyle(0);wv.setWebChromeClient(new WebChromeClient(){ public booleanonJsAlert(…) { return super.onJsAlert(…); } public void onProgressChanged(…){ if ( 100 == progress ) { … }super.onProgressChanged(…); }}); Web Programming 網際網路程式設計

  18. WebView code snippet Enable JavaScript and hide the scroll bar. • wv = (WebView) findViewById(R.id.wv);wv.getSettings().setJavaScriptEnabled(true);wv.setScrollBarStyle(0);wv.setWebChromeClient(new WebChromeClient(){ public booleanonJsAlert(…) { return super.onJsAlert(…); } public void onProgressChanged(…){ if ( 100 == progress ) { … }super.onProgressChanged(…); }}); Web Programming 網際網路程式設計

  19. WebView code snippet • wv = (WebView) findViewById(R.id.wv);wv.getSettings().setJavaScriptEnabled(true);wv.setScrollBarStyle(0);wv.setWebChromeClient(new WebChromeClient(){ public booleanonJsAlert(…) { return super.onJsAlert(…); } public void onProgressChanged(…){ if ( 100 == progress ) { … }super.onProgressChanged(…); }}); WebChromeClient handles dialogs, progress… Web Programming 網際網路程式設計

  20. about the code snippet Web Programming 網際網路程式設計

  21. What/why R.id.wv super call super.xx() return Web Programming 網際網路程式設計

  22. Layout • Arrange widgets/controls/components • FrameLayout, LinearLayout, RelativeLayout, AbsoluteLayoutand TableLayout • Layout classes are also widgets • Android的Layout整理 • [新手完全手冊] Hello Android Layout • User Interface | Android Developers Web Programming 網際網路程式設計

  23. It was specified in the res/layout/xxx.xml Web Programming 網際網路程式設計 http://www.holisticware.com/HolisticWare/Know-How/development/integrated-development-environments-ides/eclipse.aspx

  24. Activity-WebView communication • Building Web Apps in WebView • Activity can change the URL of WebView to pass data • The difficult part is how to retrieve data from WebView • call addJavascriptInterface() and pass it a class instance to bind an interface name that your JS can call to access the class • Once the communication between Activity and WebView is connected, you are actually developing an web app. App (Activity) A full-screen WebView Web server CGI programs Java HTML, CSS and JavaScript Perl, PHP or anything you like Web Programming 網際網路程式設計

  25. Communication code snippet • Java call JavaScript • function java_call_js() { … } • wv.loadUrl("javascript:java_call_js()"); • JavaScript call Java • wv.getSettings().setJavaScriptEnabled(true);public class WebAppInterface { public void js_call_java() { … }}wv.addJavascriptInterface( new WebAppInterface(), "android"); • window.android.js_call_java(); In JavaScript, declare a function. Web Programming 網際網路程式設計

  26. Communication code snippet • Java call JavaScript • function java_call_js() { … } • wv.loadUrl("javascript:java_call_js()"); • JavaScript call Java • wv.getSettings().setJavaScriptEnabled(true);public class WebAppInterface { public void js_call_java() { … }}wv.addJavascriptInterface( new WebAppInterface(), "android"); • window.android.js_call_java(); In Java, change the URL to execute any JS code. This is a common behavior for all browsers. So actually you don’t need to design new JS functions intentionally. Web Programming 網際網路程式設計

  27. Communication code snippet • Java call JavaScript • function java_call_js() { … } • wv.loadUrl("javascript:java_call_js()"); • JavaScript call Java • wv.getSettings().setJavaScriptEnabled(true);public class WebAppInterface { public void js_call_java() { … }}wv.addJavascriptInterface( new WebAppInterface(), "android"); • window.android.js_call_java(); In Java, always remember to enable JS. Web Programming 網際網路程式設計

  28. Communication code snippet • Java call JavaScript • function java_call_js() { … } • wv.loadUrl("javascript:java_call_js()"); • JavaScript call Java • wv.getSettings().setJavaScriptEnabled(true);public class WebAppInterface { public void js_call_java() { … }}wv.addJavascriptInterface( new WebAppInterface(), "android"); • window.android.js_call_java(); In Java, bind a new interface with addJavaScriptInterface(). Web Programming 網際網路程式設計

  29. Communication code snippet • Java call JavaScript • function java_call_js() { … } • wv.loadUrl("javascript:java_call_js()"); • JavaScript call Java • wv.getSettings().setJavaScriptEnabled(true);public class WebAppInterface { public void js_call_java() { … }}wv.addJavascriptInterface( new WebAppInterface(), "android"); • window.android.js_call_java(); In JavaScript, the bound interface is actually an object whose member variables/functions are accessible to JS. The object name corresponds to the second parameter of addJavascriptInterface(). Web Programming 網際網路程式設計

  30. Reminders of the environment • https://developer.android.com/sdk/index.html • download the SDK (including Eclipse, ADT plugin, Android SDK…), which needs no installation • http://www.oracle.com/technetwork/java/javase/archive-139210.html • download and install JDK (version 6 is suggested by Google) • Setup Android SDK Manager (API version, Google API…) • Setup Android Virtual Device Manager (resolution, SD Card…) • you can use real phones • This is usually the most painful stage (try and error) when learning a new platform. It can be largely eased if you have a good mentor, or at least a partner to discuss. That’s what this course tries to provide. Web Programming 網際網路程式設計

  31. Step-by-step of the demo • Create an Android Application Project with a Blank Activity or Fullscreen Activity • Add a WebView(in Composite) by editing res/layout/activity_main.xml • change its id (e.g. wv) make it full-screen (via property table or .xml) • Enable required permissions (e.g. internet permission) • AndroidManifest.xml Add Uses Permission  android.permission.INTERNET • Add a new event handler, onCreate(), by editing src/xxx/xxx.java • xxx/xxx is your main activity, which depends on the settings when creating the application • requestWindowFeature(Window.FEATURE_NO_TITLE); // hide the title barWebViewwv= (WebView) findViewById(R.id.wv); // get the WebViewwv.getSettings().setJavaScriptEnabled(true); // enable JavaScriptwv.loadUrl("http://www.google.com"); // load a URLwv.loadUrl("javascript:foo()"); // execute JavaScript • If you want to load a HTML file offline, store it (e.g. index.html) in assets/ • wv.loadUrl("file:///android_asset/index.html"); • Run your application • you will get bin/xxx.apk, put it to a public place to distribute your applicatoin Web Programming 網際網路程式設計

  32. Today’s assignment今天的任務 Web Programming 網際網路程式設計

  33. Create an app • Two options, you may create a very simple app. Another option is to make a mobile version (small screen version) for your site. So that mobile users feel good when browsing your site. • Reference • Android Developers • How To Build A Mobile Website • mobile web - Google 搜尋 • 開發手機版網頁 • Your web site (http://merry.ee.ncku.edu.tw/~xxx/cur/, ex12) will be checked not before 23:59 1/7 (Tue). You may send a report (such as some important modifications) to me in case I did not notice your features. Or, even better, just explain your modifications in the homepage. Web Programming 網際網路程式設計

  34. Appendix附錄 Web Programming 網際網路程式設計

  35. Thread • [Android] 多執行緒-Handler和Thread的關係 • 在 Android 當中，一件事如果做超過 5 秒被系統強制關閉(收到Application not Responsed, ANR)；在 onCreate() 中如果做超過 10 秒就會跳ANR • 所以繁重的事情不能在 onCreate() 裡頭做。解決的辦法就是 thread (執行緒) • Main thread for UI, worker threads for long-time work and use handers to find other threads • Thread | Android Developers • android裡的thread的朋友：Handler Web Programming 網際網路程式設計

More Related