Cú phâp trang WML

Một phần của tài liệu Xây dựng ứng dụng cho thiết bị di động (Trang 31)

3. NGÔN NGỮ ĐỊNH DẠNG KHÔNG DĐY(WML)

3.3Cú phâp trang WML

3.3.1 Canh lề vă hiển thị

Phần tử <p> cung cấp thuộc tính align cho phĩp canh lề văn bản với giâ trị như “left”, “right”, “center”. Ví dụ sau sẽ hiển thị một số vị trí canh lề cho văn bản trong tăi liệu WML

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Card1" title="Text Alignment">

<p align= “center”><b>Text Alignment”</b></p> <p align= “left”>Left- Alignment”</p>

<p align= “right”>Right- Alignment”</p> </card>

</wml>

Kết quả hiển thị như sau:

KHOA CÔNG NGHỆ THÔNG TIN

3.3.2 Câc kiểu định dạng cơ bản

Không như trình duyệt trín mây PC với nhiều khả năng hiển thị mău sắc vă font chữ khâc nhau. Văn bản trín măn hình điện thoại di động chỉ cho phĩp định dạng một số kiểu văn bản đơn giản như in đậm, in nghiíng, gạch chđn với câc thẻ như <b> , <i> ,<u>. Dưới đđy cho thấy câch định dạng văn bản trong tăi liệu WML

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Card1" title="Text Formating">

<p align= “center”><b>Text Formating”</b></p> <p>

WML suports these text styles <b>bold</b> <big>big</big> <em>empasis</em> <i>italic</i> <small>small</small> <strong>strong</strong> <u>underline</u> </p> </card> </wml>

3.3.3 Tạo nút nhấn tương tâc

Có thể dùng phần tử <do>với thuộc tính type=”accept” để tạo nút nhấn hiển thi trong trang tăi liệu. Phần tử <go> cho phĩp nhảy đến một trang khâc theo địa chỉ URL hoặc nhảy đến một <card> năo đó.

Như đê níu, mỗi măn hình tương đương với một thẻ <card>. Ta có thể xđy dựng nhiều phần tử card vă cho xem mỗi lúc một măn hình như sau

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Card1" title="Buttons">

<p align= “center”><b>Bottons”</b></p> <do type=“accept” label=“Go to a new page”> <go

href= http://localhost/hello. wml/>

</do>

<do type= “accept” label= “Go to card 2”> <go

href= “#Card2”/> </do> (adsbygoogle = window.adsbygoogle || []).push({});

</card>

KHOA CÔNG NGHỆ THÔNG TIN

<card id= “Card2” title= “Card2”> <p> this is card 2 </p> </card> </wml>

Trong ví dụ trín, chúng ta tạo ra một nút nhấn với nhên mang tín “Go to a

new page” vă một nút nhấn mang tín “Go to card 2” . Khi người dùng kích hoạt

nút nhấn “Go to a new page”năy thì trang tăi liệu mới hello.wml sẽ hiển thị, còn nếu nhấn nút “Go to card 2” thì nội dung “This is card 2” sẽ được hiển thị. Điều năy cho thấy ta có thể sử dụng nhiều phần tử card cùng lúc trong tăi liệu những chỉ xem mỗi lần một phần tử card để tiết kiím không gian hiển thị

3.3.4 Tạo bảng

WML cung cấp cho bạn phần tử <table>, <td>, <tr> để tạo bảng vă câc dòng, cột tương tự HTML

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Card1" title="Tables">

<p align= “center”> <table columns= “3”> <tr> <td>TIC</td> <td>TAC</td> <td>TOE</td> </tr> <tr> <td>x</td> <td>o</td> <td>x</td> </tr> </table> </p> </card> </wml> 3.3.5 Nhập dữ liệu

Ngoăi việc hiển thị thông tin, WML còn cho phĩp người dùng nhập dữ liệu chẵng hạn như số điện thoại, tín đăng nhập…Ta dùng phần tử <input> để thực hiện chức năng năy. Thuộc tính name của phần tử <input> được dùng như một tín biến.

KHOA CÔNG NGHỆ THÔNG TIN

Bạn truy xuất dữ liệu do người dùng nhập ở ô textbox của phần tử <input> thông qua tín của thuộc tính name như sau:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Card1" title="Text input">

<p align= “center”><b>Textinput”</b></p> <p>

Navigate to:

<input type= “text” name= “uri”/> <do type= “accept” label= “Go”> <go href= “$(uri)”/>

</do> </p>

</card> </wml>

Khi kích chuột văo nút “Go” nội dung dữ liệu nhập văo được xem lă địa chỉ để đi đến một trang wml mới. Ta đê đặt tín cho <input> lă name= “uri” vă truy xuất nội dung của phần tử bằng câch thím ký tự $ văo phía trước lă $uri

3.3.6 Tạo danh sâch lựa chọn

WML cung cấp phần tử <select> tạo danh sâch lựa chọn tương tự phần tử <select> của HTML. Dưới đđy lă ví dụ cho thấy sử dụng phần tử <select> tạo một danh sâch sổ xuống trong trang WML:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> (adsbygoogle = window.adsbygoogle || []).push({});

<wml>

<card id="Card1" title="Select">

<p align="center"><b>Select</b></p> <select name="selection"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>

<do type="accept" label="Read selection"> <go href="#Card2"/>

</do> </card>

<card id="Card2"title="Card2"> <p>

You selected $selection </p>

</card> </wml>

KHOA CÔNG NGHỆ THÔNG TIN

Nếu chọn một mục vă nhấn nút “Read selection” thì nội dung Card2 sẽ hiển thị phần tử được chọn thông qua tín biến $selection

3.7 Định thời(timer)

Trong trang tăi liệu WML ta có thể quy định thời gian bằng bộ định thời timer. Ví dụ khi bộ định thời hết hạn quy định, trình duyệt sẽ thực hiện một tâc vụ năo đó. Trong trang tăi liệu dưới đđy, ta quy định thời gian cho timer lă 10 giđy, nếu thời gian năy hết hạn thì hiển thị nội dung Card2, ta tạo timer bằng phần tử <timer>

Thuộc tính value của <timer> sẽ cho biết thời gian chờ (tính bằng 1/10 giđy). Thuộc tính ontimer của phần tử <card> cho biết lệnh thực hiện khi timer có hiệu lực

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Card1" ontimer="#Card2" title="Select"> <p align="center"><b>Timer</b></p>

<timer value="100"> <p>

In ten seconds, you'll be redirected to the second card </p>

<card id="Card2"title="Welcome"> <p> Welcome to Card2 </p> </card> </wml>

Khởi đầu Card1 sẽ được hiển thịvă đợi 10 giđy sẽ hiển thị tiếp nội dung Card2

3.3.8 Kết nối dữ liệu về mây chủ

Trong tăi liệu HTML, ta sử dụng thẻ <FORM> để chuyển dữ liệu về trình chủ xử lý theo phương thức POST. Với WML ta cũng có thể thực hiện điều năy nhưng chúng ta không sữ dụng thẻ <FORM> thay văo đó ta dùng thẻ <go> với tham chiếu đến câc trang xử lý cử trình chủ như sau:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="card1" title="Uploading"> <p>

Please enter password

<input type="password" name="password"/> </p>

<p align="center"><b>Login page</b></p> <do type="accept" label="Enter"> (adsbygoogle = window.adsbygoogle || []).push({});

<go methol="post"

href="http://localhost/login.wml"/>

<postfied name=comments" value="$(password)"> </go>

KHOA CÔNG NGHỆ THÔNG TIN

</do> </card> </wml>

Ta sử dụng phần tử <input> để nhận dữ liệu do người dùng nhập văo. Câc trang xử lý dữ liệu phía trình chủ như CGI , ASP hay JSP đón nhận dữ liệu theo câch thông thường như khi xử lý bởi phần tử <FORM> của HTML. Tuy nhiín khi trả dữ liệu về cho trình khâch(lă thiết bị di động hay câc trình duyệt hiển thị WML) trình chủ đặt nội dung content-type của trang tăi liệu lă “text/vnd.wap.wml” thay cho “text/html”

3.3.9 Hình ảnh trong tăi liệu WML

WML không hiển thị câc loại hình như .gif hay.jpg thông dụng như trong tăi liệu Web hay HTML. Những khuôn dạng hình năy chiếm kích thước rất lớn(do lưu trữ mău sắc) vă do đó ảnh hưởng đến băng thông truyền dữ liệu vă hiển thị phía đầu cuối. Câc điện thoại di động thường chỉ hỗ trợ hình trắng đen. Ta có thể sử dụng hình theo khuôn dạng WBMP. Đđy lă khuôn dạng hình đen trắng chỉ có 1 bit mău. Để hiển thị WBMP trong trang tăi liệu WML bạn sử dụng thẻ <img>

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="card1" title="Images">

<p align="center"> <img alt="WML image"

src="image.wbmp" width="217" height="164"/> </p>

</card> </wml>

KHOA CÔNG NGHỆ THÔNG TIN

Phần 3:

XĐY DỰNG ỨNG DỤNG

Giới thiệu tổng quan về ứng dụng

Mô hình vă kiến trúc của hệ thống

Lựa chọn môi trường vă công cụ căi đặt

Thiết kế chương trình

1 Giới thiệu tổng quan về ứng dụng

Hiện nay câc thiết bị di động có hỗ trợ truy cập WAP trở nín phổ biến dẫn đếnsố lượng người dùng sử dụng Dịch vụ WAP ngăy căng tăng

Ứng dụng tra cứu thông tin trín mạng di dộng năy âp dụng công nghệ WAP để cung cấp cho người sử dụng thiết bị di động câc thông tin được cập nhật hăng ngăy. Giúp cho họ có thể theo dõi, nắm bắt một câch nhanh nhất : mọi lúc vă mọi nơi câc sự kiện diển ra để phục vụ trong việc kinh doanh vă câ nhđn một câch hiệu quả nhất.

Câc dịch vụ đó lă: Xem thông tin về tin thể thao, kết quả trận đấu của câc giải đấu trong nước vă quốc tế, câc thông tin về thị trường chứng khoân,….

2 Mô hình vă kiến trúc của hệ thống

Mô hình ứng dụng tra cứu thông tin trín mạng được xđy dựng dựa trín mô hình lập trình WAP đó lă khi có một yíu cầu từ người sử dụng thiết bị di động ,yíu cầu được tiếp nhận theo giao thức WAP bởi mây tính của của nhă cung cấp dịch vụ. Mây tính ấy diễn dịch yíu cầu theo giao thức HTTP rồi gửi đến địa chỉ đê níu trong yíu cầu. Như vậy, mây tính đóng vai trò cửa ngõ WAP (WAP gateway). Khi nhận được nội dung trang WAP (tập tin WML năo đó chẳng hạn), cửa ngõ WAP sẽ biín dịch (mê hoâ) nội dung ấy theo quy câch của WAP vă gửi cho điện thoại di động.

Điện thoại di động liín lạc với internet thông qua cửa ngõ WAP (WAP Gateway). Cửa ngõ WAP lă đầu mối liín lạc giữa một bín dùng giao thức WAP, bín kia dùng giao thức HTTP.

3 Lựa chọn môi trường vă công cụ căi đặt (adsbygoogle = window.adsbygoogle || []).push({});

Một ứng dụng thương mại di động hiện nay được nhiều môi trường vă công cụ hỗ trợ ta có thể xđy dựng ứng dụng dựa trín nền tảng J2ME(Java 2 Platform Micro Edition) bằng công cụ Java2 Platform Micro Edition Wireless Toolkit để xđy

KHOA CÔNG NGHỆ THÔNG TIN Người dùng Wap WAP gateway WAP server Cơ sơ dữ liệu Cơ sơ dữ liệu WA P HTTP

dựng vă đóng gói ứng dụng hay sử dụng câc kịch bản phía mây chủ như ASP, JSP, hay CGI xử lý dữ liệu trả về trang WML cho thiết bị di động

Chương trình tra cứu thông tin trín mạng di dộng lă một ứng dụng thương mại di động được thiết kế trín kịch bản phía trình chủ đó lă ASP với câc cấu hình hợp lý trín trình chủ Web server IIS .

Chi tiết cấu hình trín IIS như sau

Cấu hình IIS thực hiện chức năng WAP Server

1. Từ menu Start, chọn Settings.Control Panel.Administrative tools.Internet Services Manager. Mở dấu '+' ở tín mây vă nhấn chuột phải văo Default Web Site.

2. Chọn Properties.

3. Chọn Tab HTTP Headers, ở mục MIME Map, chọn File Types 3. Nhấn New Type.

5. Gõ wml văo ô Extension

6. Gõ text/vnd.wap.wml văo ô Content MIME.

7. Lặp lại câc bước từ 4 đến 6 vă gõ văo câc thông số như sau:

Giống như xđy dựng trang Web động, ta có thể dùng công nghệ ASP (Active Server Pages) để xđy dựng câc ứng dụng WML cho phĩp tương tâc với người sử dụng. khi xđy dựng ứng dụng WML, để hiển thị được trang trả về trín WAP browser cần chỉ định ASP trả về mê WML,. Hiện tại cấu hình WML vẫn ở trạng thâi tĩnh, cần phải thím văo asp.dll để IIS có khả năng tạo ra văn bản wml. Trong Properties của Default Web Site, chọn tab Home Directory, Nhấn Configuration Chọn Add, sau đó điền nội dung văo hộp thoại Add/Edit Application Extension Mapping như hình sau vă muốn hiển thị trín wap browser ở trín đầu mỗi trang .wml phải thím đoạn lệnh sau: <% response.ContentType = 'text/vnd .wap.wml' %>

Type File extention Application/vnd.wap.wmlc .wmlc Text/vnd.wap.wmlscript .wmls Application/vnd.wap.wmlscript .wmlsc

4.Thiết kế chương trình

Chương trình được chia thănh câc nội dung sau:

Bóng đâ cung cấp câc thông tin về câc giải đấu trong nước vă quốc tế bao gồm: Giải V-League, ngoại hạng Anh, Euro,C1, UEFA, Italia,…Trong mỗi giải đấu có câc thông tin về Tin tức bóng đâ lă câc sự kiện thể thao diễn ra trong ngăy vă kết quả trận đấu của câc cặp đấu cùng với việc xếp hạng của câc đội bóng trong thời điểm gần nhất

Thời tiết lă diễn biến thời tiết trong ngăy của câc tỉnh trong cả nước như: Hă Nội, Thănh Phố Hồ Chí Minh, Hải Phòng, Đă Nẵng, Cần Thơ, Huế, Nha Trang, Đă Lạt,…

Điểm Tin Bao gồm tin trong nước vă tin quốc tế . Tin trong nước lă câc sự kiện về văn hoâ, kinh tế, chính trị, an ninh, quốc phòng,…

Xổ số được cập nhật hăng ngăy kết quả xổ số truyền thống với câc giải thưởng

Tỷ giâ lă tỷ giâ hối đoâi của câc loại ngoại tệ vă giâ văng so với Việt Nam đồng ở một số ngđn hăng lớn trong nước

Chứng khoân gồm câc chỉ số giao dịch chứng khoân Việt Nam diễn ra hăng ngăy

Lịch bay cung cấp lịch bay hăng ngăy của một số đường bay nội địa như: Nội Băi, Tđn Sơn Nhất, Đă Nẵng, Cât Bi, Phú Băi, Điện Biín, Nha Trang.

Giâ cả Cung cấp giâ cả của một số mặt hăng thông dụng như : Điện thoại di động, Mây vi tính vă linh kiện, Xe mây, Hăng điện tử - gia dụng

Từ điển dữ liệu được thiết kế theo bảng

1. TABLE Danhsach: mads lăm khoâ chính, bảng năy chứa thông tin liín quan đến câc mục sẽ hiển thị trín măn hình chính như: Thể thao, Thời tiết, giâ cả, …..

KHOA CÔNG NGHỆ THÔNG TIN

Stt Tín trường Ý nghĩa

1 Mads Mê danh sâch 2 Danhmuc Danh mục

2. TABLE Bongda: idbd lăm khoâ chính, bảng năy chứa câc thông tin về câc giải đấu trong nước vă quốc tế (adsbygoogle = window.adsbygoogle || []).push({});

Stt Tín trường Ý nghĩa 1 Mabd Mê bóng đâ 2 Giaidau Giải đấu

3. TABLE Ctbongda: id lăm khoâ chính, bảng năy chứa câc thông tin chi tiết về câc giải đấu như tin tức vă kết quả của câc trận đấu

4. TABLE Tinbongda: matinbd lăm khoâ chính, bảng năy chứa câc thông tin về tin tức bóng đâ trong nước cũng như quốc tế

5 TABLE Vongdau: mavd lăm khoâ chính, bảng năy chứa câc thông tin về kết quả của câc cặp đấu trong từng giải đấu

4 Ngay Ngăy thi đấu của cặp đấu

5 Gio Giờ thi đấu

6 San Sđn thi đấu

7 Trandau Trận đấu của cặp đấu 8 Tiso Tỉ số của cặp đấu

KHOA CÔNG NGHỆ THÔNG TIN

Stt Tín trường Ý nghĩa

1 Id Mê chi tiết bóng đâ 2 Mabd Mê bóng đâ

3 Noidung Chứa câc thông tin về tin tức vă kết quả trận đấu

4 URL Đường dẫn của câc tập tin . wml tương ứng với từng nội dung

Stt Tín trường Ý nghĩa

1 Matinbd Mê tin bóng đâ 2 Mabd Mê bóng đâ

3 Tieude Tiíu đề của câc mẩu tin

6. TABLE Xephang: maxh lăm khoâ chính , bảng năy chứa câc thông tin về thứ tự xếp hạng của câc đội bóng sau mỗi vòng đấu

7. TABLE Thoitiet : matt lăm khoâ chính, bảng năy chứa thông tin về câc khu vực dự bâo thời tiết

Stt Tín trường Ý nghĩa

1 Maxh Mê xếp hạng

2 Mabd Mê bóng đâ

3 TT Thứ tự xếp hạng

4 Doi Đội bóng

5 Tran Số trận đê thi đấu 6 Thang Số trận thắng 7 Hoa Số trận hoă 8 Thua Số trận thua 9 Diem Điểm 10 Hieuso Hiệu số Stt Tín trường Ý nghĩa

1 Matt Mê thời tiết

8. TABLE Ctthoitiet: macttt lăm khoâ chính, bảng năy chứa câc thông tin về thời tiết bao gồm ngăy dự bâo, nhiệt độ, dự bâo

5 Căi đặt chương trình5.1 Yíu cầu phần cứng 5.1 Yíu cầu phần cứng

• Phía Client lă điện thoại di động có hỗ trợ chức năng truy cập WAP vă hỗ trợ mạng. Trong quâ trình xđy dựng ứng dụng, client có thể lă trình giả lập do nhă sản xuất cung cấp

• Server lă mây chủ có cấu hình mạnh ví dụ như Intel Pentium 733 MHz, 128

(adsbygoogle = window.adsbygoogle || []).push({});

Một phần của tài liệu Xây dựng ứng dụng cho thiết bị di động (Trang 31)