1 / 30

Optimizing WebView for Android Apps: Lifecycle, Intents, and UI Design

Explore the essential components of developing Android applications using WebView. This guide covers fundamental concepts such as managing the Android lifecycle, implementing intents for smooth navigation between activities, and leveraging HTML, CSS, and JavaScript for rich user interfaces. Learn how to create responsive designs with WYSIWYG tools, handle events effectively, and ensure optimal performance. With practical code snippets and detailed explanations, this resource is perfect for both beginners and experienced developers looking to refine their app development skills.

tanaya
Télécharger la présentation

Optimizing WebView for Android Apps: Lifecycle, Intents, and UI Design

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. Social Web Design & Research社群網站設計&研究 Social Web Design & Research

  2. App Programming手機程式設計 Social Web Design & Research

  3. Again, we have only two hours Social Web Design & Research

  4. Social Web Design & Research http://www.pastposters.com/details.php?prodId=1030&category=&secondary=&keywords

  5. 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 Social Web Design & Research

  6. 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 Social Web Design & Research

  7. Demo Social Web Design & Research

  8. WYSIWYG form design http://www.techotopia.com/index.php/Designing_Forms_in_Visual_Studio

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

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

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

  12. 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

  13. about the life cycle Social Web Design & Research

  14. What actions cause onPause()? Social Web Design & Research

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

  16. 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 Social Web Design & Research

  17. 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 Social Web Design & Research

  18. WebView code snippet • wv = (WebView) findViewById(R.id.wv);wv.getSettings().setJavaScriptEnabled(true); // enable JavaScriptwv.setScrollBarStyle(0); // hide scroll barwv.setWebChromeClient(new WebChromeClient(){ public booleanonJsAlert(…) { return super.onJsAlert(…);} // when JS alert() public void onProgressChanged(…){ if ( 100 == progress ) { … }super.onProgressChanged(…); } // when progress changed}); // WebChromeClient handles dialogs, progress… Social Web Design & Research

  19. about the code snippet Social Web Design & Research

  20. What is “R.id.wv” wv = (WebView) findViewById(R.id.wv); Social Web Design & Research

  21. Layout • Arrange widgets/controls/components • FrameLayout, LinearLayout, RelativeLayout, AbsoluteLayoutand TableLayout • Layout classes are also widgets • Android的Layout整理 • [新手完全手冊] Hello Android Layout • User Interface | Android Developers Social Web Design & Research

  22. It was specified in the res/layout/xxx.xml http://www.holisticware.com/HolisticWare/Know-How/development/integrated-development-environments-ides/eclipse.aspx

  23. 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 Social Web Design & Research

  24. Reminders • Make sure all the required SDKs were installed • Android 2.1 (API 7), 2.3.3 (API 10) or 4.2 (API 17) • Google APIs, if you used the map widget • Set up a suitable virtual device and make sure you selected it • SD Card, screen resolution, GPS support, Keyboard support • Check the run configuration • Project, target (virtual device), Command Line Options • some settings are in the AndroidManifest.xml • Make sure your server program is correct • 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. Social Web Design & Research

  25. One more thing Social Web Design & Research

  26. Launch/發佈 • Find the file at bin/xxx.apk, upload it to a web server and share the url • Of course you can launch to the market (Google Play), which is beyond the scope of this slide • Once again, you will see the power of web technology in launching. You can launch new version immediately and cross-platform (web, Android and iOS). Social Web Design & Research

  27. Today’s assignment今天的任務 Social Web Design & Research

  28. 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/) will be checked not before 23:59 5/29 (Tue). You may send a report (such as some important modifications) to me in case I did not notice your features. Social Web Design & Research

  29. Appendix附錄 Social Web Design & Research

  30. 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 Social Web Design & Research

More Related