狠狠撸

Android vs EPUB
Cd Chen
http://www.cdchen.idv.tw/

12年12月21?日星期五

陳永昇 (Cd Chen) A
http://www.cdchen.idv.tw/ b
o
學歷：國?立台中科技?大學 u
經歷：
t
聯成電腦講師
恆逸資訊講師
現職：
乃師實業技術總監
證照：
RHCE / LPIC / NCLP
MCSA / MCSE
OCPJP / OCPJWCD
TCSE / NSPA


?大纲

? ?行動 App 的基礎觀念
? EPUB 的介紹
? WebView 元件
? 實作 EPUB Reader


我假设您已经...

? 熟悉 Java 程式語?言
? 具備 Android 開發的經驗


?行動 App 的基礎觀念


什麼是?行動 App??


http://www.appleoutsider.de/2012/04/27/q12012-pc-vendor-marketshare/


http://mrpogson.com/tag/market-share/


http://wpcdn3.padgadget.com/wp-content/uploads/2012/07/evercore-120716-550x283.jpeg


?行動 App 類型


Web-Page App Native App
? Web 2.0 ? Web Service
? HTML 5 ? JSON-RPC
? CSS 3 ? XML-RPC
? JavaScript ? SOAP
? ... ? Streaming
? ...

HTML / HTTP


MVC 設計模式


EPUB


淺談電?子書格式


优点缺點

市佔率?高無中?文?支援
azw ?支援語?音僅?支援 Kindle

mobi / prc ?支援度廣無中?文?支援

檔案輕巧無精密排版
lrf 翻?頁快速中?文?支援差
精確排版檔案?大
pdf 中?文?支援佳翻?頁慢


什麼是 EPUB??


? Electronic
Publication

? 國際數位出版論壇
(IDPF, International
Digital Publishing
Forum)


EPUB 优点
? 免費且開放
? 可重新排版與可重新縮放的字型
? ?支援?行列圖?片
? 嵌?入式 Metadata
? ?支援 DRM
? ?支援 CSS
? ?支援影?音內容

EPUB 的版本

? 2007/09 - EPUB Release
? 2009/08 - Start EPUB Working
? 2010/07 - EPUB 2.0.1 Draft
? 2010/09 - EPUB 2.0.1 Release
? 2011/10 - EPUB 3.0 Release (Current)


EPUB 2 vs EPUB 3
功能技術

??支援多媒體格式 ?增加對 HTML5/CSS3
??支援數學格式的?支援
??支援複雜本?文內容 ??支援嵌?入字型
??支援?文字朗讀 ??支援 SVG 圖檔
??支援?非羅?馬?文字 ??支援 MathML
??支援 DAISY 有聲書


EPUB 格式


? ZIP 壓縮檔
? 附檔名可使?用 .epub 或 .zip


EPUB 三種層級

? XHTML ?文件 (XHTML Document)
? 套件档 (Package Files)
? 容器档 (Container Files)


XHTML ?文件

? EPUB 的內容
? 類似 (幾乎相同) HTML
? EPUB3 可使?用 HTML5


http://slides.html5rocks.com/


套件档
? /mimetype
? ?一定為 application/epub+zip
? /DIR/NAME.opf
? 作者、發?行者、...
? /DIR/NAME.ncx
? 電?子書的組織架構 (章節、段落、...)

容器档

? META-INF/container.xml
? 儲存電?子書檔案的架構
? 檔案路徑、DRM 宣告、...


EPUB 製作?工具


商业软体

? Adobe InDesign
? IGP: Digital Publisher
? Apple Pages
? QuarkXPress
? oXygen XML Editor


OpenSource

? Sigil
? Booktype
? calibre


转换程式

? Word2EPUB
? ePub Maker
? DocBook


WebView


WebView 的介紹


? Android 內建的簡易版瀏覽器

? ?支援 HTML5 / CSS3 / JavaScript

? 可?自定瀏覽器的使?用介?面

? 可定義內容處理的?方式

? 可組態執?行時期的设定

? 可與 Server 端的 JavaScript 互動


使?用?方法

? 设定 AndroidManifest.xml
? 配置 layout 檔
? 撰寫程式
? 執?行與測試


设定
? 需開啟下列權限：
? android.permission.INTERNET
<manifest ... >
<uses-permission
android:name="android.permission.INTERNET" />
...
</manifest>


配置 Layout

<?xml version="1.0" encoding="utf-8"?>
<WebView
xmlns:android="http://schemas.android.com/apk/
res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>


撰寫程式


WebView

? android.webkit.WebView
? 重要 API
? loadData()
? loadUrl()
? zoomIn() / zoomOut()


WebView (cont)

? 導覽 (Navigation) API
? canGoBack() / goBack()
? canGoForward() / goForward()
? canGoBackOrForward() /
goBackOrForward()


? 取得 WebView 物件
? 指定網?頁瀏覽的设定 (Optional)
? 組態?頁?面處理的?方法 (Optional)
? ?自定使?用介?面 (Optional)
? 指定网址或本地资料


取得 WebView 物件

WebView webView = (WebView)
findViewById(R.id.webView)


變更瀏覽器的设定

WebSettings settings =
webView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltinZoomControls(true);
settings.setJavaScriptEnabled(true);


WebSettings

? android.webkit.WebSettings
? 存取 WebView 的組態資料
? 重要 API
? setJavaScriptEnabled()
? !! ALL !!


组态?页?面处理?方法

webView.setWebViewClient(
new WebViewClient() {
// ...
});


WebViewClient
? android.webkit.WebViewClient
? ?自定?頁?面的處理?方法
? 重要 API
? onPageXXX() / onFormResubmission()

? onLoadResource() / onReceivedError() /
onReceivedHttpAuthRequest()


?自定使?用介?面

webView.setWebChromeClient(
new WebChromeClient() {
// ...
});


WebChromeClient
? android.webkit.WebChromeClient
? 定義使?用介?面的事件處理
? 重要 API
? onProgressChanged()
? onReceivedXXX() / onjsXXX()
? onCloseWindow()

指定网址或本地资料
網址
webView.loadUrl(
“http://www.niceStudio.com.tw”);

本地資料
webView.loadData(
“<h1>Hello World!!</h1>”);


JavaScript 整合


? WebView 可與 JavaScript 整合
? ?方式
? WebChromeClient.onjsXXX()
? JavaScript ? WebView
? WebView ? JavaScript


JavaScript ?WebView

? WebView 可註冊 JavaScript 函數的處理
器 (Handler)
? 步驟
? 撰寫類別與?方法
? 在 WebView 註冊處理器


<a href=”#” onclick=”android.say(‘hi’)” />
HTML
Activity
public class WebViewActivity extends Activity {
class JavaScriptHandler {
public void say(String word) {
Toast.makeText(context, word, Toast.LENGTH_LONG).show();
}
}

public void onCreate(Bundle bundle) {
super.onCreate(bundle);
webView = (WebView) ?ndViewById(R.id.wv);
webView.addJavaScriptInterface(
new JavaScriptHandler(), “android”);
}
}


WebView?JavaScript
? WebView 可直接呼叫網?頁中的
JavaScript 函數

webView.loadUrl(“javascript:changeColor(‘red’)”);
Activity
<script type=”text/javascript”> HTML
function changeColor(c) {
...
}
</script>


實作 EPUB Reader


Why??

? 實作私有的 DRM
? 實作特殊的效果或功能


实作?方法

? Bottom-Up
? 利?用現成的 OpenSource Project


FBReader
? Free & OpenSource
? Android 平台著名的 Reader
? http://www.fbreader.org/
? ?支援的格式
? EPUB / HTML / FictionBook /
Plucker / PalmDoc / TCR / RTF / ...


取得原始程式码

? 從官網下載
? http://www.fbreader.org/FBReaderJ
? 使?用 Git 下載
? git://github.com/geometer/FBReaderJ.git


準备

? Android SDK >= 1.6
? Android NDK >= r4b
? Apache Ant >= 1.7.0
? Cygwin >= 1.7 (Windows Only)


编译
1. 在專案??目錄中建?立 local.properties 檔
sdk.dir=<DIR>
ndk.dir=<DIR>
2. Windows:
ndk-build -> ant release
Unix / MacOS X:
ant package


擴充 FBReaderJ

? <PROJECT>/src/org/geometerplus/
android/fbreader/


Q&A


狠狠撸

Android vs e pub

Recommended

More Related Content

What's hot (17)

Similar to Android vs e pub (20)

Android vs e pub