Giới thiệu zk framework

GiỚI THIỆU ZK FRAMEWORK

RIKKEISOFT

05/31/2016TichNV

© 　 Copyright 2016 Rikkeisoft

Outline1. Giới thiệu về ZK FrameWork2. Mô hình kiến trúc ZK FrameWork3. Tại sao nên dùng ZK FrameWork4. Cài đặt môi trường phát triển ZK FrameWork5. Cấu trúc 1 project ZK6. Tạo Demo sử dụng ZK framework


Giới thiệu về ZK FrameWork• ZK là một event-driven, component-based framework Hỗ

trợ tạo nhiều giao diện cho ứng dụng Web. ZK bao gồm AJAX-based và event-driven engine(điều khiển sự kiện), là sự thiết lập của một bộ các thành phần XUL, XHTML, và một ngôn ngữ ZUML (ZK User Interface Markup Language).


Mô hình kiến trúc ZK FrameWork

• Khi truy cập một trang ứng dụng ZK ,ZK sẽ tạo ra các components trong ZUL và hiển thị trên trình duyệt.

• Khi thao tác với các components thì sẽ được gọi đến các xử lý của controller được khai báo trong ZUL sau đó tất cả những thay đổi sẽ được trả về trình duyệt .


Mô hình kiến trúc ZK FrameWork• ZK không đòi hỏi hay yêu cầu bất kỳ kĩ thuật nào là nền

tảng(back-end) cả. Nó có thể được sử dụng chung với các midleware JDBC, Hibernate, EJB or JMS.


Tại sao nên dùng ZK FrameWork• Với ZK bạn có thể trình bày những ứng dụng sử dụng những

chức năng của các thành phần XUL và XHTML. Hỗ trợ tạo một giao diện như một desktop application, sự vận dụng này giúp tránh lỗi cho người sử dụng.

• ZK hỗ trợ ngôn ngữ markup languages là ZUML, ZUML giống như XHTML cho phép người phát triển thiết kế giao diện người dùng mà không cần biết nhiều kiến thức về lập trình giao diện.

• ZK framework là một framework mã nguồn mở Java mạnh mẽ chuyên dùng để phát triển các ứng dụng web và ứng dụng mobile. Java Web Framework này rất thích hợp để phát triển các ứng dụng web hiện đại cần xử lý Ajax nhiều, hỗ trợ công nghệ responsive và hỗ trợ cả nền tảng mobile. Ngoài Java, ZK Framework còn được xây dựng trên các công nghệ mở khác như jQuery và Bootstrap rất quen thuộc với giới lập trình viên.


Môi trường phát triển ZK FrameWork cần có

• JDK • Eclipse IDE for Java EE Developer• Web Server Apache Tomcat • Cài đặt ZK Studio • Tham khảo tại cài đặt môi trường và tạo project sử

dụng ZK framework tại : https://www.zkoss.org/wiki/ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_with_Eclipse_and_Maven


Cấu trúc 1 project ZK


Tạo Demo sử dụng ZK framework


1. Tạo project DemoZK2. Tạo layout cho DemoZK carLayout.zull”3. Tạo trang tìm kiếm và hiển thị danh sách “searchCar.zul”4. Tạo Entity Car.java5. Tạo CarService.java và CarServiceImpl.java6. Tạo SearchCarController.java

Tạo project DemoZK• Tham khảo cách tạo project tại https://

www.zkoss.org/wiki/ZK_Studio_Essentials/Begin_Your_First_ZK_Project/Create_a_New_ZK_Maven_Project

• Sau khi tạo xong project có cấu trúc sau.


https://www.zkoss.org/wiki/ZK_Studio_Essentials/Begin_Your_First_ZK_Project/Create_a_New_ZK_Maven_Project




Tạo layout cho DemoZK carLayout.zull

• Cấu trúc một layout của ZK


Tạo layout(tt)• Tạo trang index.zul


Tạo layout(tt)• Tạo trang banner.zul


Tạo layout(tt)• Tạo trang sidebar.zul


Tạo layout(tt)• Tạo trang footer.zul


Tạo layout(tt)• index.zul


Tạo trang tìm kiếm searchCar.zul


• Xác định controller xử lý• <window title="Search" width="1000px" border="normal" apply="demo.controller.SearchCarController">• Textbox• Listbox• Button• Label

Tạo trang tìm kiếm searchCar.zul(tt)


Ai cũng biết khỏi nói nhỉ ,xem code vậy.

Tạo Entity ,Service,ServiceImpl


• Tạo class SearchCarController kế thừa SelectorComposer<Component>

public class SearchCarController extends SelectorComposer<Component> {…}

• Wire Components:• @Wire• private Textbox keywordBox;• @Wire• private Listbox carListbox;• @Wire• private Label modelLabel;

Tạo SearchCarController.java


• Listen to Component Events: @Listen("onClick = #searchButton") public void search(){ ... }

@Listen("onSelect = #carListbox")public void showDetail(){

…}

• Cú pháp chung:@Listen( [EVENT_NAME] = #[COMPONENT_ID])public void hamXuLY(){ … }

Tạo SearchCarController.java(tt)


• Sơ đồ hoạt động theo mô hình MVC

Tạo SearchCarController.java


Demo source


Thank you

RIKKEISOFT


Giới thiệu zk framework

Technology

Transcript of Giới thiệu zk framework