GiỚI THIỆU ZK FRAMEWORK
RIKKEISOFT
05/31/2016
TichNV
© Copyright 2016 Rikkeisoft
Outline
1. Giới thiệu về ZK FrameWork
2. Mô hình kiến trúc ZK FrameWork
3. Tại sao nên dùng ZK FrameWork
4. Cài đặt môi trường phát triển ZK FrameWork
5. Cấu trúc 1 project ZK
6. Tạo Demo sử dụng ZK framework
© Copyright 2016 Rikkeisoft
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).
© Copyright 2016 Rikkeisoft
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 .
© Copyright 2016 Rikkeisoft
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.
© Copyright 2016 Rikkeisoft
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.
© Copyright 2016 Rikkeisoft
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_Y
our_First_ZK_Application_with_Eclipse_and_Maven
© Copyright 2016 Rikkeisoft
Cấu trúc 1 project ZK
© Copyright 2016 Rikkeisoft
Tạo Demo sử dụng ZK framework
© Copyright 2016 Rikkeisoft
1. Tạo project DemoZK
2. 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.java
5. Tạo CarService.java và CarServiceImpl.java
6. 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_Projec
t/Create_a_New_ZK_Maven_Project
• Sau khi tạo xong project có cấu trúc sau.
© Copyright 2016 Rikkeisoft
Tạo layout cho DemoZK carLayout.zull
• Cấu trúc một layout của ZK
© Copyright 2016 Rikkeisoft
Tạo layout(tt)
• Tạo trang index.zul
© Copyright 2016 Rikkeisoft
Tạo layout(tt)
• Tạo trang banner.zul
© Copyright 2016 Rikkeisoft
Tạo layout(tt)
• Tạo trang sidebar.zul
© Copyright 2016 Rikkeisoft
Tạo layout(tt)
• Tạo trang footer.zul
© Copyright 2016 Rikkeisoft
Tạo layout(tt)
• index.zul
© Copyright 2016 Rikkeisoft
Tạo trang tìm kiếm searchCar.zul
© Copyright 2016 Rikkeisoft
• 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)
© Copyright 2016 Rikkeisoft
Ai cũng biết khỏi nói nhỉ ,xem code vậy.
Tạo Entity ,Service,ServiceImpl
© Copyright 2016 Rikkeisoft
• 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
© Copyright 2016 Rikkeisoft
• 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)
© Copyright 2016 Rikkeisoft
• Sơ đồ hoạt động theo mô hình MVC
Tạo SearchCarController.java
© Copyright 2016 Rikkeisoft
Demo source
© Copyright 2016 Rikkeisoft
Thank you
RIKKEISOFT
© Copyright 2016 Rikkeisoft

Giới thiệu zk framework

  • 1.
    GiỚI THIỆU ZKFRAMEWORK RIKKEISOFT 05/31/2016 TichNV © Copyright 2016 Rikkeisoft
  • 2.
    Outline 1. Giới thiệuvề ZK FrameWork 2. Mô hình kiến trúc ZK FrameWork 3. Tại sao nên dùng ZK FrameWork 4. Cài đặt môi trường phát triển ZK FrameWork 5. Cấu trúc 1 project ZK 6. Tạo Demo sử dụng ZK framework © Copyright 2016 Rikkeisoft
  • 3.
    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). © Copyright 2016 Rikkeisoft
  • 4.
    Mô hình kiếntrú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 . © Copyright 2016 Rikkeisoft
  • 5.
    Mô hình kiếntrú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. © Copyright 2016 Rikkeisoft
  • 6.
    Tại sao nêndù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. © Copyright 2016 Rikkeisoft
  • 7.
    Môi trường pháttriể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_Y our_First_ZK_Application_with_Eclipse_and_Maven © Copyright 2016 Rikkeisoft
  • 8.
    Cấu trúc 1project ZK © Copyright 2016 Rikkeisoft
  • 9.
    Tạo Demo sửdụng ZK framework © Copyright 2016 Rikkeisoft 1. Tạo project DemoZK 2. 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.java 5. Tạo CarService.java và CarServiceImpl.java 6. Tạo SearchCarController.java
  • 10.
    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_Projec t/Create_a_New_ZK_Maven_Project • Sau khi tạo xong project có cấu trúc sau. © Copyright 2016 Rikkeisoft
  • 11.
    Tạo layout choDemoZK carLayout.zull • Cấu trúc một layout của ZK © Copyright 2016 Rikkeisoft
  • 12.
    Tạo layout(tt) • Tạotrang index.zul © Copyright 2016 Rikkeisoft
  • 13.
    Tạo layout(tt) • Tạotrang banner.zul © Copyright 2016 Rikkeisoft
  • 14.
    Tạo layout(tt) • Tạotrang sidebar.zul © Copyright 2016 Rikkeisoft
  • 15.
    Tạo layout(tt) • Tạotrang footer.zul © Copyright 2016 Rikkeisoft
  • 16.
    Tạo layout(tt) • index.zul ©Copyright 2016 Rikkeisoft
  • 17.
    Tạo trang tìmkiếm searchCar.zul © Copyright 2016 Rikkeisoft
  • 18.
    • Xác địnhcontroller 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) © Copyright 2016 Rikkeisoft
  • 19.
    Ai cũng biếtkhỏi nói nhỉ ,xem code vậy. Tạo Entity ,Service,ServiceImpl © Copyright 2016 Rikkeisoft
  • 20.
    • Tạo classSearchCarController 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 © Copyright 2016 Rikkeisoft
  • 21.
    • Listen toComponent 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) © Copyright 2016 Rikkeisoft
  • 22.
    • Sơ đồhoạt động theo mô hình MVC Tạo SearchCarController.java © Copyright 2016 Rikkeisoft
  • 23.
    Demo source © Copyright2016 Rikkeisoft
  • 24.