Phần I:Cách include Dojo vào trang web


Cũng như các đoạn code JavaScript khác khi sử dụng dojo cũng cần phải include nó vào trang web.
Có hai cách include code dojo vào trang web:
·Cách 1: Include online, bạn chỉ cần đưa đường dẩn của dojo trên mạng vào trang web

<script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.1.0/dojo/dojo.xd.js&#8221;
djConfig=”parseOnLoad: true”>
</script>

·Cách 2: Bạn download gói dojo vê sử dụng offline theo địa chỉ http://dojotoolkit.org sau đó bạn cũng cần inlcude các thư viện này vào bên trong trang web của bạn bằng đoạn mã sau:
Chú ý: Sau khi bạn download dojo về giải nén vào thư mục rootdojo và đặt nó vào thư mục Helloworld và trang web chính nằm cùng cấp với thư mục rootdojo
Bạn cần phải include dojo vào trang web bằng đoạn mã sau:

<script type=”text/javascript” src=”dojoroot/dojo/dojo.js” djConfig=”parseOnLoad: true”>
</script>

Trong đó src là địa chỉ trực tiếp chứa gói Dojo của bạn. Và chú ý là bạn cũng nên để thẻ <script> này trên phần <head> để đảm bảo là các thư viện hàm của dojo được load đầu tiên.
Thuộc tính djConfig = “parseOnLoad: true” để báo cho dojo load toàn bộ các đối tượng HTML trong trang web.
Sau đó bạn include thêm đoạn code sau

<script type=”text/javascript”>
dojo.require(“dojo.parser”);
</script>

Trong phần này, tuỳ theo yêu cầu mà bạn cần phải include thêm các thuộc tính khác, đây là thuộc tính cơ bản nhât.

Chú ý: là bạn nên đặt đoạn code này sau khi đã viết đoạn ở trên.
Ngoài ra bạn cũng phải dùng các gói CSS có sẵn của dojo để định dạng cho trang web của bạn trở nên sinh động hơn

Data grid là một công cụ tương tự như tag <table> trong HTML ở một số thuộc tính, nhưng data gird sẽ lấy toàn bộ dữ liệu trongwishStore (lưu trữ dữ liệu). Data gird cho phép sortingfiltering dữ liệu lưu trử bởi hai thuộc tính clientSort= và query=
Ví dụ:
Trước khi sử dụng cần phải thêm file định dạng của dojo

<style type=”text/css”>
@import=”dojoroot/dojox/grid/_grid/tundraGrid.css”;
</style>

Import thêm các hàm sau:

<script type=”text/javascript”>
dojo.require(“dojo.parser”);
dojo.require(“dojo.data.ItemFileReadStore”);
dojo.require(“dojox.grid.Grid”);
</script>

Tạo một đoạn css để định dạng cho div id = “grid”.

<style type=”text/css”>
#grid{
border:1pxsolid#333;
width:550px;
margin:10px;
height:200px;
font-size:0.9em;
font-family:Geneva,Arial,Helvetica,sans-serif;
}
</style>

Viết đoạn code sau vào phần body.

<body>
<h1>JustaCigarCorporation</h1>
<h3>”SometimesacigarisaJustaCigar!”</h3>
<div dojoType=”dojo.data.ItemFileReadStore” jsId=”wishStore”
url=”cigar_wish_list_abbrv.json”>

Ta dùng dojo.data.ItemFileReadStore để khai báo một đối tượng đọc dữ liệu nguồn, isld là thuộc tính dùng để lấy dữ liệu trong “wishStore”, nội dung của dữ liệu nguồn được qui định trong file cigar_wish_list_abbrv.json bằng lệnh “url =”.

<table id=”grid” dojoType=”dojox.grid.Grid” store=”wishStore” query=”{wishId:’*’}” clientSort=”true”>
<thead>
<tr>
<th field=”description”width=”15em”>Cigar</th>
<th field=”size”>Length/Ring</th>
<th field=”origin”>Origin</th>
<th field=”wrapper”>Wrapper</th>
<th field=”shape”>Shape</th>
</tr>s
</thead>
</table>
</div>
</body>

Trước khi sử dụng data grid ta phải khai báo dojoType=”dojox.grid.Grid”, query=”{wishId:’*’}” nghĩa là lấy toàn bộ các thuộc tínhwishId

Nội dung của “cigar_wish_list_abbrv.json”>

{
“identifier”: “wishId”,
“label”: “description”,
“items”:
/* Bắt đầu mãng */
[
/* Bắt đầu item*/
{
“wishId”: 4455, “description”: “Don Pepin Garcia Delicias”,
“size”: “7-50”, “origin”: “Nicaragua”, “wrapper”: “Corojo”,
“shape”: “Straight”
},
/* Kết thúc: item */
{
“wishId”: 4456, “description”: “601 Habano Robusto”,
“size”: “5-50”, “origin”: “Nicaragua”, “wrapper”: “Natural”,
“shape”: “Straight”
},
{
“wishId”: 4457, “description”: “Black Pearl Rojo Robusto”,
“size”: “4 3/4-52”, “origin”: “Nicaragua”, “wrapper”: “Natural”,
“shape”: “Straight”
},
/* … */
]
/* Kết thúc mãng */
}

Theo agitclub.net

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s