Anda di halaman 1dari 84

手機程式開發-

手機程式開發-
以J2ME
J2ME和和XHTML為例
XHTML為例
報告人:陳志華
2007/01/29
大綱
 概論
 應用程式開發概論
 XHTML
 CSS
概論--大綱
概論
 手機應用
 手機限制
 手機作業系統
◦ Symbian
◦ Linux
◦ Windows Mobile
◦ Palm
概論--手機應用
概論
 移動瀏覽互聯網
 多媒體資訊
 內容下載
 大量的個人信息處理
 電話應用功能
概論--手機限制
概論
 價格高
 電池使用時間短
 安全方面
 開發實作功能稀少
◦ 不支援HTML (以XHTML格式為主)
◦ 不支援Script (如Java Script、VB Script、
Action Script)
概論--手機作業系統
概論
 Symbian
 Linux
 Windows Mobile
 Palm

中國大陸智慧型手機操作系統平台市場
(Source:易觀國際2004/07)
概論--Symbain
概論
 Panasonic、Nokia、Simens AG、Sony
Ericsson等公司所共同開發並擁用的專
為手機硬體而設計的作業系統
 開發程式語言
◦ Java (MIDP)
 模擬器
◦ Symbina OS Crystal版(主要支援Nokia)
◦ Symbina OS Quartz版(主要支援Sony
Ericsson)
概論--Linux
概論
 IBM、SUN等計算機巨頭的支持
 完全開放嵌入式OS系統、軟件授權費
用低、應用開發人才資源豐富等優點
 主要廠商Motorola、Samsung
 開發程式語言
◦ Java (MIDP)
 模擬器
◦ 無專屬模擬器,由各家廠商提供
概論--Windows Mobile
概論
 微軟已經獲得下列廠商的支持
 Motorola、Samsung、Orange、T-Mobile
 神達、多普達、聯想和TCL (中國市場)
 開發程式語言
◦ Java (Personal Java、Jeode)
◦ EVC、EVB
 模擬器
◦ Pocket PC Emulator
◦ Smart Phone Emulator
概論--Palm
概論
 Palm專屬作業系統
 近年來改用Windows Mobile
 開發程式語言
◦ Java (MIDP for Palm OS)
◦ EVC、EVB
 模擬器
◦ POSE (Palm OS Emulator)
◦ Smart Phone Emulator
應用程式開發概論--大綱
應用程式開發概論
 Java平台
 J2ME Platform
◦ Configuration
◦ Profile
◦ Optional Packages
 整合式開發環境安裝
AP開發概論--Java
AP開發概論 平台
Java平台

J2EE

J2SE

J2ME
Java
Card

Java 平台
AP開發概論--J2ME Platform
AP開發概論

Optional Packages

Profile

Configuration

JVM / OS

J2ME Platform(JSR68)
AP開發概論--K600i規格
AP開發概論 600i規格
 Sony Ericsson K600i規格:
http://developer.sonyericsson.com/site/global
/products/phonegallery/k600/p_k600.jsp

K600i規格 (Source: Sony Ericsson)


AP開發概論--Configuration
AP開發概論
 定義了硬體所必須具備的能力
 分為兩類
◦ Connected Limited Device Configuration
(CLDC)
 是個最適合小型、行動網路設備的Configuration
 如PDAs、smart phones以及行動電話的設備
◦ Connected Device Configuration (CDC)
 鎖定在一些較大型的設備
 如資訊家電
AP開發概論-- Configuration (cont.)
AP開發概論

名稱 內容
JSR30 J2ME Connected, Limited Device
Configuration (CLDC 1.0)
JSR139 J2ME Connected, Limited Device
Configuration 1.1 (CLDC 1.1)
JSR36 J2ME Connected Device Configuration
(CDC 1.0)
JSR218 J2ME Connected Device Configuration 1.1
(CDC 1.1)
AP開發概論--Profile
AP開發概論
 針對各種不同機器的特性定義高階的
API
 主要用意就是在確保設備間之互通性
AP開發概論--CLDC Profile
AP開發概論

名稱 內容

JSR37 Mobile Information Device Profile 1.0


(MIDP 1.0)
JSR118 Mobile Information Device Profile 2.0
(MIDP 2.0)
JSR195 Information Module Profile

JSR228 Information Module Profile 2.0


AP開發概論--CDC Profile
AP開發概論

名稱 內容
JSR46 J2ME Foundation Profile
JSR129 Personal Basis Profile
JSR62 Personal Profile Specification
JSR219 J2ME Foundation Profile 1.1
JSR217 Personal Basis Profile 1.1
JSR216 Persional Profile Specification 1.1
AP開發概論--Optional Package
AP開發概論

 廠商選擇性實作套件
名稱 內容
JSR66 RMI Optional Packages
JSR80 USB API
JSR113 Speech API
JSR169 JDBC Optional Package
Advanced Graphics an d User Interface Optional
JSR209 Package for the J2ME TM Platform
AP 開發概論--CLDC Optional Package
AP開發概論

名稱 內容
JSR75 PDA Optional Package
JSR82 Java API for Bluetooth
JSR120 Wireless Messaging API(支援SMS)
API SMS
JSR135 Mobile Multimedia API
JSR172 J2ME Web Services
JSR177 Security and Trust Services API for J2ME
JSR179 Location API
JSR180 SIP API for J2ME
AP 開發概論--CLDC Optional Package
AP開發概論

名稱 內容
JSR184 Mobile 3D Graphic API
JSR190 Event Tracking API for J2ME
JSR205 Wireless Messaging API 2.0(支援MMS)
JSR211 Content Handler API
Scalable 2D Vector Graphics API for
JSR226
J2METM
JSR229 Payment API
JSR230 Data Sync API
AP開發概論--整合開發環境
AP開發概論

 安裝流程
◦ 安裝Java標準開發環境
◦ 安裝J2ME Wireless Tookit開發工具
◦ 安裝手機模擬器(可自行選擇欲安裝廠牌之手
機,以Sony Ericsson為例)
◦ 安裝開發工具(以NetBeans 5.5為例)
◦ 安裝NetBeans Mobility
◦ 將模擬器加入NetBeans環境
◦ 專案實作開發
AP開發概論--IDE(JDK
AP開發概論 安裝) (cont.)
JDK安裝
 連結至Java或Sun之網站免費下載JDK1.5
http://www.java.com/zh_TW/

連結Java網站下載JDK
AP開發概論--IDE(JDK
AP開發概論 安裝) (cont.)
JDK安裝
 進行JDK1.5之安裝

JDK安裝畫面
AP開發概論--IDE(JDK
AP開發概論 安裝) (cont.)
JDK安裝
 開啟「控制臺\系統」,新增環境變數,
變數名稱為「JAVA_HOME」,變數值
為JDK安裝路徑

JAVA_HOME環境變數設定
AP開發概論--IDE(JDK
AP開發概論 安裝) (cont.)
JDK安裝
 於環境變數「PATH」和
「CLASSPATH」,分別加入變數值「;
%JAVA_HOME%\bin」

CLASSPATH環境變數設定
AP開發概論--IDE(JWT
AP開發概論 安裝) (cont.)
JWT安裝
 連結至Java或Sun之網站免費下載Java
Wireless Tookit
http://java.sun.com/products/sjwtoolkit/do
wnload-2_3.html

下載Java Wireless Tookit畫面


AP開發概論--IDE(JWT
AP開發概論 安裝) (cont.)
JWT安裝
 安裝Java Wireless Tookit畫面,點選下一
步即可進行安裝

安裝Java Wireless Tookit畫面


AP開發概論--IDE(模擬器安裝)
AP開發概論
(cont.)
 連結至Sony Ericsson網站,免費下載手
機模擬器安裝程式
http://developer.sonyericsson.com/site/glo
bal/docstools/java/p_java.jsp

下載Sony手機模擬器畫面
AP開發概論--IDE(模擬器安裝)
AP開發概論
(cont.)

安裝Sony Ericsson SDK畫面


AP開發概論--IDE(NetBean
AP開發概論 安裝)
NetBean安裝
(cont.)
 連結至NetBeans網站免費下載NetBeans
之整合開發環境
http://www.netbeans.org/

下載NetBeans畫面
AP開發概論--IDE(NetBean
AP開發概論 安裝)
NetBean安裝
(cont.)

NetBeans安裝畫面
AP開發概論--IDE(NetBean
AP開發概論 安裝)
NetBean安裝
(cont.)
 免費下載NetBeans Mobility以建立開發
行動通信應用程式之環境
http://www.netbeans.org/products/mobility/

下載NetBeans Mobility畫面
AP開發概論--IDE(NetBean
AP開發概論 安裝)
NetBean安裝
(cont.)

安裝NetBeans Mobility畫面
AP開發概論--IDE(NetBean
AP開發概論 安裝)
NetBean安裝
(cont.)

NetBeans執行畫面
AP開發概論--IDE(模擬器設定)
AP開發概論
(cont.)
 執行NetBeans,並點選NetBeans工具列
之「Tools\Java Platform Manager」,則
會出現設定視窗,點選視窗左下角之
「Add Platform...」以進行新增模擬器之
設定

Java Platform Manager設定畫面


AP開發概論--IDE(模擬器設定)
AP開發概論
(cont.)
 現在欲新增手機模擬器,故選擇第二個
選項「Java Micro Edition Platform
Emulator」,並點選「Next >」進行下
一個動作

Add Java Platform設定畫面


AP開發概論--IDE(模擬器設定)
AP開發概論
(cont.)
 NetBeans進行偵測,會自動判別是否已
加入開發整合環境,若未加入,則會自
動勾選

模擬器SDK偵測結果畫面
AP開發概論--IDE(模擬器設定)
AP開發概論
(cont.)
 現在欲新增手機模擬器,故選擇第二個
選項「Java Micro Edition Platform
Emulator」,並點選「Next >」進行下
一個動作

Add Java Platform設定畫面


AP開發概論--IDE(模擬器設定)
AP開發概論
(cont.)
 將自動將未加入者加入至環境中

模擬器加入至NetBeans完成畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 執行NetBeans,並點選左上角之「 」
圖示,進行新專案之開啟

NetBeans開啟新專案畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 出現「New Project」視窗時
◦ 請於「Categories」中選擇「Mobile」類型
◦ 於「Projects」中選擇「Mobile
Application」,以進行手機應用程式之開發

Project類型設定畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 設定專案名稱和儲存之位置,名稱預設
為「MobileApplication」,可自行於此
設定名稱和位置,完成後請點選「Next
>」進行下一步

Project名稱和位置設定畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 進行手機模擬器之選擇設定
◦ 於Emulator Platform中選擇「Sony Ericssion
SDK 2.2.3 for the Java(TM) ME
Platform(Emulator)」
◦ 於Device中選擇「SonyEricsson_K600_Emu」
於 中選擇「 」

模擬器選擇及設定畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 點選「Select All」,令專案可以使用目
前主機上所有模擬器來操作,完成後可
點選「Finish」,即完成新專案之設定

相關之模擬器設定畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 完成後於左上角「Projects」處會出現
一個新的專案

NetBeans開新專案完成畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 請於新專案點選滑鼠右鍵,在選項中選
擇「New\Java Class」,以新增Java Class
於專案中

於新專案中新增Java Class畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 設定Class名稱,本例中名稱設為
「VideoCanvas」,完成後請點選
「Finish」

Java Class相關屬性設定畫面
AP開發概論--IDE(專案開發) (cont.)
AP開發概論
 當新增完成後即可在右方編輯區,進行
程式撰寫

Java Class新增完成畫面
XHTML--大綱
XHTML
 相關網站
 XHTML 1.0分類
 標籤介紹
XHTML--相關網站
XHTML 相關網站((標準組織
標準組織))
 W3C:http://www.w3.org/

W3C組織
XHTML--相關網站
XHTML 相關網站((教學網站
教學網站))
 W3School:http://www.w3schools.com/

W3Schools
1.0分類
XHTML--XHTML 1.0分類
XHTML
 XHTML 1.0 Strict
◦ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 XHTML 1.0 Transitional
◦ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 XHTML 1.0 Frameset
◦ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
1.0分類 (cont.)
XHTML--XHTML 1.0分類
XHTML

 XHTML Mobile
◦ <?xml version="1.0" encoding=“big5"?>
◦ <!DOCTYPE html PUBLIC "-
//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-
mobile10.dtd">
1.0分類 (cont.)
XHTML--XHTML 1.0分類
XHTML
 Mobile版限制
◦ 需有起始標籤與結束標籤
◦ 標籤全部小寫
◦ 良好的巢狀結構
◦ 不可省略標籤
◦ 不支援<div> (圖層效果)
◦ 不支援<script> (VB Script、Java Script)
◦ 不支援<frame> (框架效果,以K600i為例)
1.0分類 (cont.)
XHTML--XHTML 1.0分類
XHTML
 沒有對應之結束標籤
◦ <area />
◦ <base />
◦ <br />
◦ <hr />
◦ <input />
◦ <link />
◦ <param />
XHTML--網頁基本組成要素
XHTML
 <html>
 <head>
 </head>
 <body>
 </body>
 </html>
XHTML--標籤介紹
XHTML 標籤介紹((共同屬性
共同屬性))
 dir屬性
◦ <dir=“rtl”> 由右向左顯示
◦ <dir=“ltr”> 由左向右顯示
 lang屬性
◦ 指定使用語言種類
◦ <lang=“zh”> 顯示繁體中文
XHTML--標籤介紹
XHTML 標籤介紹<head>
<head>
 屬性
◦ dir、lang
 相關標籤
◦ <base> 設定相對路徑
◦ <title> 設定標題
◦ <style> 設定CSS樣式表
XHTML--標籤介紹
XHTML 標籤介紹<base>
<base>
 href屬性
◦ <base href=“http://tw.yahoo.com”> 指定相
對路徑
 target屬性 目標框架位置
◦ _blank 佔滿一新開啟的瀏覽器視窗
◦ _parent 當成文件的上一個畫面
◦ _self 顯示於目前的框架中
◦ _top 佔滿原有的瀏覽器整個視窗而非單
一框架
XHTML--標籤介紹
XHTML 標籤介紹<body>
<body>
 align屬性
◦ right 靠右對齊
◦ center 置中對齊
◦ left 靠左對齊
 background屬性
◦ <body background=“ground.jpg”> 設定背
景圖片
 bgcolor屬性
◦ <body bgcolor=“#FF0000”> 依RGB編碼方

XHTML--標籤介紹
XHTML 標籤介紹<a>
<a>
 href屬性
◦ <a href=“http://tw.yahoo.com”>link</a>
◦ 以文字link超連結至http://tw.yahoo.com路徑
 target屬性 目標框架位置
◦ _blank 佔滿一新開啟的瀏覽器視窗
◦ _parent 當成文件的上一個畫面
◦ _self 顯示於目前的框架中
◦ _top 佔滿原有的瀏覽器整個視窗而非單
一框架
XHTML--標籤介紹
XHTML 標籤介紹<hr>
<hr>
 size屬性
◦ <hr size=“12”> 水平線寬度
 noshade屬性
◦ <hr noshade=“noshade”> 2D水平線
 width屬性
◦ <hr width=“320”> 水平線長度
 align屬性
 color屬性
XHTML--標籤介紹
XHTML 標籤介紹<ul>
<ul>
 無序清單
 type屬性
◦ disc:實心圓形符號●
◦ circle:空心圓形符號○
◦ square:實心方形符號■
 dir、lang屬性
 相關標籤
◦ <li> 清單項目
XHTML--標籤介紹
XHTML 標籤介紹<ol>
<ol>
 有序清單
 start屬性
◦ <ol start=“5”> 編號從5開始
 type屬性
◦ A:大寫字母符號 a:小寫字母符號
◦ I:大寫羅馬數字符號 i:小寫羅馬數字符

◦ 1:阿拉伯數字符號
 dir、lang屬性
XHTML--標籤介紹
XHTML 標籤介紹<img>
<img>
 scr屬性 圖片路徑,<img scr=“ground.jpg”>
 alt屬性 <img scr=“ground.jpg” alt=“背景圖”>
◦ 替代文字,瀏覽器無法顯示圖片時可以文字代替
 border屬性 邊框寬度,<img border=“1”>
 height屬性 圖片長度,可用百分比或像素
◦ <img scr=“ground.jpg” height=“100%”>
 width屬性 圖片寬度,可用百分比或像素
◦ <img scr=“ground.jpg” width=“100”>
XHTML--標籤介紹
XHTML 標籤介紹<table>
<table>
 屬性
◦ align (水平對齊)、bgcolor、background、
border、height、width
◦ valign ((垂直對齊))
 top、bottom、middle、baseline
 相關標籤
◦ <tr> 列
◦ <td> 欄
XHTML--標籤介紹
XHTML 標籤介紹<form>
<form>
 action屬性 接收與處理表單資料
 method屬性
◦ post 安全性高
◦ get 適用欄位較少的小型表單,傳輸效能

 target屬性
 name屬性 獨一無二的字串標示
XHTML--標籤介紹
XHTML 標籤介紹<input>
<input>
 type
◦ text 文字方塊
◦ checkbox 核取方塊
◦ radio 圓鈕
◦ submit 送出按鈕
◦ reset 重設按鈕
◦ image 圖片按鈕(需搭配src屬性)
 name、value屬性
XHTML--標籤介紹
XHTML 標籤介紹<select>
<select>
 屬性
◦ name 獨一無二的字串標示
◦ size 下拉式選單中顯示項目數
◦ multiple 可進行多選
 相關標籤
◦ <option> 選單項目
CSS--大綱
CSS
 介紹
 種類
 樣式表
 自訂類別
 自訂ID
 學習網址
CSS--介紹
CSS
 Cascading Style Sheets(串接樣式表)
 由許多樣式名稱和樣式指定值組成的字
串。
 被套用的HTML標籤,將會依據所套用
的CSS來顯式它的外觀。
 最大的功能是可以將資料與顯示格式分
開處理。
CSS--介紹(cont.)
CSS
 減少圖檔的使用,便可以達到文字變化
的需求,加快網頁傳輸的速度。
 集中管理樣式,當修改時只需針對樣式
修改即可。
 共享樣式設定,CSS可另外存檔,供每
一個網頁取用共享。
CSS--介紹(cont.)
CSS
 CSS的最大好處是提供了HTML所不支
援的屬性。
◦ <FONT>中只可設定文字前景顏色,但CSS
可指定背景顏色、背景圖形甚至幫它畫個
外框!
 用CSS將會使網頁設計速度增快。
◦ 可以指定一群的標籤都套用某個CSS。
 許多網頁用同一份CSS,可減少網頁體
積。
◦ CSS可獨立寫成一個檔案,再由瀏覽器於需
要時讀入。!
CSS--種類
CSS 種類<Inline>
<Inline>
 使用HTML標記的STYLE屬性,只於定
義的區段有效。
◦ <P STYLE=COLOR:RED>
CSS--種類
CSS 種類<Embedding>
<Embedding>
 使用 <STYLE>...</STYLE>標記 ( 置於BODY本
文區之前 ),定義HTML標記供整個網頁使用。
 可使用多個<STYLE>...</STYLE>標記。
◦ <HTML> 文件開始
◦ <STYLE TYPE=text/css> 排版樣式區開始
<!-- 排版樣式區內容 -->
</STYLE> 排版樣式區結束
◦ <BODY> 本文區開始
本文區內容
</BODY> 本文區結束
◦ </HTML> 文件結束
CSS--種類
CSS 種類<Linking>
<Linking>
 用於HEAD區使用 <LINK>標記 ,即將排版
樣式分開處理 (. CSS 檔 ) ,再連結使用。可
使用多個<LINK>標記。
◦ <HTML> 文件開始
◦ <HEAD> 標頭區開始
<LINK TYPE=text/css REL=stylesheet HREF=s1.css>
連結
CSS檔
</HEAD> 標頭區結束
◦ <BODY> 本文區開始
本文區內容
</BODY> 本文區結束
◦ </HTML> 文件結束
CSS--種類
CSS 種類<including>
<including>
 先建好CSS樣式檔
 在HTML檔中<STYLE>與</STYLE>之間
加入
◦ @import URL("樣式檔位址") ;
CSS--樣式表
CSS
 同時宣告數個樣式
 body {
background:green ;
color:blue ;
font:12 ;
font-family:新細明體 ;
}
CSS--樣式表(cont.)
CSS
 數個選擇器宣告
 P, H1, H2 {
color:red
}
CSS--自訂類別
CSS
 <HTML><HEAD>
 <STYLE TYPE="text/css">
 <!--
 .BlueCenter { color : BLUE;
 text-align:CENTER;
 }
 -->
 </STYLE></HEAD>
 <BODY>
 <H3 CLASS="BlueCenter"> 本段文字將設成藍色、居中 </H3>
 <H2 CLASS="BlueCenter"> 本段文字將設成藍色、居中 </H2>
 </BODY></HTML>
CSS--自訂
CSS 自訂ID
ID
 <HTML><HEAD>
 <STYLE TYPE="text/css">
 <!--
 #Red { color : RED }
 #Blue { color : BLUE }
 -->
 </STYLE></HEAD>
 <BODY>
 <H2 ID="Red"> 本段文字將設成紅色</H2>
 <H1 ID="Blue"> 本段文字將設成藍色 </H1>
 </BODY>
 </HTML>
CSS--學習網址
CSS
 http://www.csszengarden.com/tr/chinese/
 http://chinese-school.netfirms.com/css-
tutorial-T-Chinese-index.htm
 http://irw.ncit.edu.tw/peterju/css.html#she
ets
 http://dob.tnc.edu.tw/dir.php?t=2

Anda mungkin juga menyukai