HƯỚNG DẪN DESIGN TRANG ZK

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (324.45 KB, 17 trang )

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" />

<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ị" />

</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"
value="@bind(config.userName)" tabindex="4" />
</row>

</window>
 Các 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
> gt
>= ge
<bandbox id="rigComponent" autodrop="false"
hflex="1"
value="@bind(vm.secRightParent ne
null ? vm.secRightParent.rigDescription:'')"
onOpen="@command('findRightParent')">
</bandbox>
o ViewModel
public class ConfigDataVM extends BaseViewModel {
@Wire("#windowConfigData")
private Window windowConfigData;
@Wire("#configList")
private Listbox configList;
@Wire("#module")

private Listbox module;
private MaCompany company;
private CvConnectConfig bufConfig;
private List<CvConnectConfig> bufConfigList;
@WireVariable
private IConversionService iConversionService;
@Init
public void initVM() {
company = (MaCompany) Sessions.getCurrent()
.getAttribute("companylogin");
bufConfigList = iConversionService.getAllByUnit();
if (bufConfigList.size() > 0) {
bufConfig = bufConfigList.get(0);
}
}
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
Selectors.wireComponents(view, this, false);
RegisterRule.register(this, windowConfigData);
if (bufConfig != null)
module.setSelectedIndex(0);
}
@Command("create")
@NotifyChange({ "bufConfig", "messages" })
public void doNew() {
bufConfig = new CvConnectConfig();
bufConfig.setUnit(company.getCode());
bufConfig.setBranch(company.getCode());
super.doNew();
}

@Command("edit")
@NotifyChange({ "bufConfig", "messages" })
public void doEdit() {
super.doEdit();
}
@Command("delete")
@NotifyChange({ "bufConfig", "messages" })
public void doDelete() {
if (Messagebox.show(Labels.getLabel("common.deletedata"), "Question",
Messagebox.OK | Messagebox.NO, Messagebox.QUESTION) ==
Messagebox.NO) {
return;
}
iConversionService.delete(bufConfig);
removeElement(configList, bufConfig);
iConversionService.getAllDbConfig();
super.doDelete();
if (bufConfigList.size() > 0) {
bufConfig = bufConfigList.get(0);
} else
bufConfig = null;
}
@Command("cancel")
@NotifyChange({ "messages", "bufConfig" })
public void doCancel() {
super.doCancel();
}
@Command("save")
@NotifyChange({ "bufConfig", "messages" })
public void doSave() {

try {
bufConfig.setModule(module.getSelectedItem().getId());
bufConfig.setUnit(company.getCode());
if (acion == ACTION.CREATE) {
iConversionService.insert(bufConfig);
} else
iConversionService.update(bufConfig);
addElement(configList, bufConfig);
iConversionService.getAllDbConfig();
super.doSave();
} catch (Exception e) {
}
}
@NotifyChange({ "messages" })
@Command
public void testConnnect() {
boolean connect = iConversionService.testConnect(
bufConfig.getIpconnect(), bufConfig.getDatabaseName(),
bufConfig.getUserName(), bufConfig.getPassWord());
if (connect)
messages = "Kết nối thành công";
else
messages = "Kết nối không thành công";
}
@NotifyChange("bufConfig")
@Command
public void onSelect(@BindingParam("evt") Event event) {
if (acion != ACTION.NORMAL)
if (Messagebox.show(Labels.getLabel("common.working"),
"Question",

Messagebox.OK | Messagebox.NO, Messagebox.QUESTION)
== Messagebox.OK) {
event.stopPropagation();
} else {
configList.clearSelection();
}
}
public void disableListItem() {
for (Listitem listitem : configList.getItems()) {
listitem.setDisabled(true );
}
}
public MaCompany getCompany() {
return company;
}
public void setCompany(MaCompany company) {
this.company = company;
}
@NotifyChange({ "bufConfig" })
public CvConnectConfig getBufConfig() {
return bufConfig;
}
public void setBufConfig(CvConnectConfig bufConfig) {
this.bufConfig = bufConfig;
}
public List<CvConnectConfig> getBufConfigList() {
return bufConfigList;
}
public void setBufConfigList(List<CvConnectConfig> bufConfigList) {
this.bufConfigList = bufConfigList;

}
@Command
@Override
public void onClose(Event event) {
if (acion != ACTION.NORMAL)
if (Messagebox.show(Labels.getLabel("common.working"),
"Question",
Messagebox.OK | Messagebox.NO,
Messagebox.QUESTION) != Messagebox.OK) {
event.stopPropagation();
}
}
}
 @Init : Chỉ định đây là phương thức khởi tạo
 @AfterCompose : Chỉ định đây là phương thước biên soạn các thành phần
trên view mapping với các thành phần tương ứng trên viewmodel
 @NotifyChange : Thông báo sự thay đổi của một biến, đối tượng…view
cập nhập lại trạng thái của dữ liệu.
 @NotifyChangeDisabled : Hủy thông báo thay đổi.
 @DependsOn: Tương tự như NotifyChange những có ý nghĩa ngược lại.
 @Command: là các event như click, doubleClick…
 @DefaultCommand tương tự như @command.
 @GlobalCommand tương tự như @command nhưng cho phép view khác
gọi đến.
 @DefaultGlobalCommand
 @Immutable
 Parameters
• @BindingParam : Lấy tham số từ view xuống viewmodel
• @QueryParam : Lấy query trên browse
• @HeaderParam : Lấy các tham số dạng user-agent

• @CookieParam :
• @ExecutionParam: Truyền tham số dựa trên session.
• @ExecutionArgParam: Truyền tham số giữa các form (component)
thông qua phương thức khởi tạo.
• @ScopeParam
• @SelectorParam
• @ContextParam : lấy thông tin theo các kiểu sau.
o enum ContextType {
BIND_CONTEXT,
BINDER,
TRIGGER_EVENT,
COMMAND_NAME,
EXECUTION,
COMPONENT,
SPACE_OWNER,
VIEW,
PAGE,
DESKTOP
SESSION,
APPLICATION }
• @Default
o Binder
 @id : Định danh Viewmodel trên view
 @init : xác định lớp viewmodel của view
 @load : gọi hàm get dữ liệu tương ứng
 @save : kết hợp với một số thành phần khác để xác định khi nào dữ liệu sẽ
được submit.
 @bind : lấy dữ liệu và submit dữ liệu bao gồm cả @load và @save
 @ref :
<div p="@ref(vm.selectedPerson)">

<label value="@load(p.id)" />
<label value="@load(p.name)" />
</div>
 @command : là event
 @global-command : là @command nhưng có thể triệu gọi ở các view khác
nhau
 @converter : fomat dữ liệu
 @validator : validate dữ liệu
 @template : trình bày dữ liệu theo một khuân mẫu.
o 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 gây ảnh hưởng :
CommonUtil.addTabInflucene("windowGroupRight");
• Event đón nhận ảnh hưởng : Trên tab đón nhận ảnh hưởng add thêm
event : được viết trong thân của hàm này :
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view)
{
windowGroupRight.addEventListener(Events.ON_SELECT,
new EventListener<Event>() {
@Override
public void onEvent(Event event)
throws Exception {
CommonUtil.showInfo(
Labels.getLabel("common.refresh.data"),
windowGroupRight);

// Viết các hàm reload lại view
}
});
}
 Các quy tắc lập trình
o Các ViewModel phải được extends BaseViewModel
o Tên các hàm event phải bắt đầu bằng chữ on[Tên gợi nhớ]
o Tên các hàm get dữ liệu phải bắt get[Tên gợi nhớ]
o Tên các hàm set dữ liệu phải bắt đầu bằng set[Tên gợi nhớ]
o Tên các hàm tính toán bắt đầu bằng fn[Tên gợi nhớ]
o Các hàm khác đặt theo tên gọi gợi nhớ.
o Các Event @Command phải được chỉ định tên rõ ràng. Vd
@Command(“onFind”).

HƯỚNG DẪN DESIGN TRANG ZK

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về