HƯỚNG DẪN DESIGN TRANG ZK  Các loại thẻ zul o Các thẻ trình bày bố cục trang.  Thẻ window.  Thẻ layout.  Thẻ Panel (container ).  Thẻ Tab. o Các thẻ input và output  Các Thẻ Input. • textbox, combox, selectbox, bandbox, datebox, timebox, calendar, checkbox, radio,intbox, longbox, doublebox.  Các thẻ Output • label, listbox, grid, tree…  Sử dụng Layout để thiết kế trang o Thẻ window : Được sử dụng sau thẻ zk. Dùng để tạo một trang (không nhất thết phải dùng thẻ này để tạo trang) đây chỉ là một quy tắc quy ước trong main framework. o Thẻ layout gồm có các thẻ sau.  Portal Layout:  Border Layout : Chia trang thành các vùng khác nhau như. West, Center, East, South  Group Box : Nhóm các nhiều các component vào một nhóm theo một chức năng hay một tiêu chí nào đó.  Column Layout : Chia trang thành các cột.  Splitter : Chia thành các vùng khác nhau như và có thể resize được các vùng.  Table Layout: Chia trang hay một phần nào đó của trang thành các ô.  Một số thuộc tính. o Một số thuộc tính cơ bản dùng để thiết kế trang.  Width: xác định chiểu rộng  Height : xác định chiều cao Hflex và Vflex dùng để chia chiều rộng và chiều cáo theo tỉ lệ. Ví dụ sau. <div width="200px" height="50px"> <div style="background: blue" vflex="1" hflex="1"/> <div style="background: yellow" vflex="2" hflex="1"/> </div>  Các nguyên tắc và bỗ cục thế kế trang. o Sau thẻ zk phải là thẻ window và có thuộc tính id phải xác định và không trùng với bất kỳ trang khác. o Sau thẻ window ta có thể sử dụng bất cứ thành phần component nào để triển khai trang. o Tất cả các thẻ trên giao diện design mà cẩn xử lý hiển thị hay render lại thì phải có id xác định. o Nếu chia trang theo chiều dài từ trên xuống thì sử dụng thẻ vlayout. o Nếu chia các component theo chiều ngang thì dùng thẻ hlayout.  Hướng dẫn một số component trình bày dữ liệu quan trọng. o Grid : Là một component trình bày dữ liệu dưới dạng lưới. Model là list Object hiển muốn hiển thị trên lưới. Template là định hình các thức hiển thị của dữ liệu. <grid id="gridDinhkhoan" model="@load(vm.dinhKhoanList)" height="160px" sclass="editer"> <columns> <column label="STT" width="50px" align="center" /> <column label="Diễn giải" width="300px" /> <column label="Tài khoản nợ" width="130px" /> <column label="Tài khoản có" width="130px" /> <column label="Số tiền" width="180px" /> <column label="VAT" width="80px" /> <column label="Nguyên tệ" width="80px" /> <column label="N.Tệ" width="80px" /> <column label="Tỉ giá" width="80px" /> <column label="DTNợC1" width="80px" /> <column label="DTNợC2" width="80px" /> <column label="DTNợC3" width="80px" /> <column label="DTCóC1" width="80px" /> <column label="DTCóC2" width="80px" /> <column label="DTCóC3" width="80px" /> <column label="NVNợ" width="80px" /> <column label="NVCó" width="80px" /> <column label="ĐVNợ" width="80px" /> </columns> <template name="model"> <row> <label value="${forEachStatus.index+1}" hflex="1" /> <textbox value="@bind(each.diengiai)" hflex="1" inplace="true" onFocus="@command('onNextTab',evt=event)" /> <textbox value="@bind(each.taikhoanno)" hflex="1" inplace="true" onFocus="@command('onNextTab',evt=event)" onBlur="@command('onChonTaiKhoan')" /> <textbox value="@bind(each.taikhoanco)" hflex="1" inplace="true" onFocus="@command('onNextTab',evt=event)" /> <textbox value="@bind(each.sotien)" hflex="1" inplace="true" onFocus="@command('onNextRow',evt=event)" /> <textbox value="@bind(each.vat)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.nguyente)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.nte)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.tigia)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dtno1)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dtno2)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dtno3)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dtco1)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dtco2)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dtco3)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.nvno)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.nvco)" hflex="1" inplace="true" readonly="true" /> <textbox value="@bind(each.dovino)" hflex="1" inplace="true" readonly="true" /> </row> </template> </grid> HƯỚNG DẪN LẬP TRÌNH TẦNG PRESENTATION  Giới Thiệu về zkoss (zk) o ZK là một khung giao diện người dùng dựa trên thành phần cho phép bạn xây dựng các ứng dụng Internet (RIA) và các ứng dụng điện thoại di động mà không cần phải tìm hiểu JavaScript hoặc AJAX. Bạn có thể xây dựng các ứng dụng web AJAX. ZK cung cấp hàng trăm thành phần được thiết kế cho mục đích khác nhau, một số để hiển thị số lượng lớn các dữ liệu và một số cho người sử dụng làm đầu vào. Chúng ta có thể dễ dàng tạo ra các thành phần trong một ngôn ngữ định dạng XML, Zul. o Tất cả hành động của người dùng trên một trang như cách nhấn vào và gõ có thể dễ dàng xử lý trong một điều khiển. Bạn có thể thao tác các thành phần để đáp ứng cho người sử dụng hành động trong một điều khiển và những thay đổi bạn thực hiện sẽ phản ánh để trình duyệt tự động. Bạn không cần phải quan tâm đến chi tiết thông tin liên lạc giữa các trình duyệt và máy chủ, ZK sẽ xử lý nó cho bạn. Ngoài ra zk hỗ trợ mộ hình phát triển MVC (Model-View-Controller) , ZK cũng hỗ trợ mô hình MVVM (Model-View-ViewModel).  RIA (Rich Internet Application) là những dịch vụ web có khả năng hoạt động tương tự như ứng dụng desktop truyền thống. Các công nghệ hỗ trợ cho RIA, trong đó có AJAX, Silverlight, Flex, đang cạnh tranh khẳng định vị thế số một.  Mô hình lập trình MVVM o MVVM là viết tắt của một mẫu thiết kế có tên Model-View-ViewModel có nguồn gốc từ Microsoft. Đây là một mô hình lập trình được giới thiệu bởi Martin Fowler, một biến thể của mô hình MVC nổi tiếng. Mô hình này có 3 vai trò: View, Model, và ViewModel. View và Model đóng vai trò giống như trong MVC.  Model : bao gồm các dữ liệu của ứng dụng và các quy tắc, luật của dữ liệu.  View : có nghĩa là giao diện người dùng. Trang Zul, trong đó có các thành phần ZK đại diện cho phần này. Sự tương tác của một người sử dụng với các thành phần gây nên các sự kiện được gửi đến bộ điều khiển.  ViewModel : là class định nghĩa cách dữ liệu tương tác với người dùng thông qua view. Nói cách khác ViewModel là model của View. Một lưu ý quan trọng đó là ViewModel không mô tả giao diện sẽ trông như thế nào. Nó chỉ mô tả cách mà view hoạt động và thông tin nào sẽ được cung cấp cho người dùng.  Binder : Là thành phần kết nối trong ZK. Đồng bộ hóa dữ liệu giữa các ViewModel và View và xử lý sự kiện tự động theo dữ liệu theo một cách thức ràng buộc nào đó.  Lập trình presentation với mô hình mvvm trong zk o Model : là các entity, java bean, các đối tượng dữ liệu. o View : là một trang .zul có cấu trúc của một file xml. Ví dụ <window id="windowConfigData" border="normal" closable="true" title="Cấu hình kết nối" apply="org.zkoss.bind.BindComposer" width="730px" height="510px" viewModel="@id('vm') @init('com.evnit.fmis.viewmodel.conversion.ConfigDataVM')"> <div sclass="z-toolbar"> <hlayout id="ctlhlayout"> <button id="btnNew" image="/images/icons/btn_new2_16x16.gif" onClick="@command('create')" tabindex="0" /> <button id="btnEdit" image="/images/icons/btn_edit2_16x16.gif" onClick="@command('edit')" disabled="@load(empty vm.bufConfig)" /> <button id="btnDelete" image="/images/icons/btn_delete2_16x16.gif" onClick="@command('delete')" disabled="@load(empty vm.bufConfig)" /> <button id="btnSave" image="/images/icons/btn_save2_16x16.gif" onClick="@command('save')" ctrlKeys="^s" /> <button id="btnCancel" image="/images/icons/btn_cancel2_16x16.gif" onClick="@command('cancel')" /> <button id="btnConnect" image="/images/icons/connections.png" onClick="@command('testConnnect')" disabled="@load(empty vm.bufConfig)" /> <hbox style="padding-left:10px;color:#df9a10;padding- top:5px;"> <label id="messages" value="@bind(vm.messages)" /> </hbox> </hlayout> </div> <div> <vlayout> <groupbox width="100%" mold="3d"> <caption label="${c:l('group.label.config.info') }" /> <grid sclass="myform" form="@id('config') @load(vm.bufConfig) @load(vm.bufConfig, after={'create','delete','cancel','save'}) @save(vm.bufConfig, before={'save','edit'})"> <columns> <column align="right" width="80px" /> <column width="50%" /> <column align="right" width="80px" /> <column width="50%" /> </columns> <rows> <row> <label value="Mã đơn vị" /> <hbox> <textbox id="madonvi" hflex="1" disabled="true" value="@bind(config.unit)" /> <textbox id="branch" hflex="1" value="@bind(config.branch)" /> </hbox> <hbox> <label value="Database" /> <label value="*" style="color:red;font-size:10px" /> </hbox> <textbox id="database" value="@bind(config.databaseName)" hflex="1" tabindex="3" /> </row> <row> <hbox> <label value="Module" /> <label value="*" style="color:red;font-size:10px" /> </hbox> <listbox id="module" mold="select" tabindex="1" rows="1" hflex="1"> <listitem id="KTSXKD"> <listcell label="KTSXKD" /> </listitem> <listitem id="KTXDCB"> <listcell label="KTXDCB" /> </listitem> <listitem id="DCHN"> <listcell label="DCHN" /> </listitem> <listitem id="VTSXKD"> <listcell label="VTSXKD" /> </listitem> <listitem id="VTXDCB"> <listcell label="VTXDCB" /> </listitem> <listitem id="TSCD"> <listcell label="TSCD" /> </listitem> </listbox> <hbox> <label value="User" /> <label value="*" style="color:red;font-size:10px" /> </hbox> <textbox id="user" hflex="1" [...]... thuộc tính quan trọng của view • Border : giá trị none nếu form hiện thị trong một tab, là normal nêu form hiển thị ở dạng dialog • Closable : có hiển thị nút close • Apply : chỉ định đến lớp binder org.zkoss.bind.BindComposer • ViewModel: @id([định danh của viewmodel]) , @init([ chỉ đến lớp viewmodel của view]) • Biểu thức so sánh trong file zul Character = != && < >= Replacement eq ne and lt le... @template : trình bày dữ liệu theo một khuân mẫu Các thành phần khác của framework  RegisterRule.register(this, windowConfigData): this chính là viewmodel còn windowConfigData là id của thẻ window của trang Hàm này có tác dụng đăng ký các xử lý về giao diện bao gồm Enter nextTab, validate dữ liệu… giống như trên swing có file xml để cấu hình  Quan hệ ảnh hưởng giữa các Tab trên main framework • Event . HƯỚNG DẪN DESIGN TRANG ZK  Các loại thẻ zul o Các thẻ trình bày bố cục trang.  Thẻ window.  Thẻ layout. . thể sử dụng bất cứ thành phần component nào để triển khai trang. o Tất cả các thẻ trên giao diện design mà cẩn xử lý hiển thị hay render lại thì phải có id xác định. o Nếu chia trang theo chiều. /> </row> </template> </grid> HƯỚNG DẪN LẬP TRÌNH TẦNG PRESENTATION  Giới Thiệu về zkoss (zk) o ZK là một khung giao diện người dùng dựa trên thành phần cho phép bạn xây dựng các