Smalltalk-draft"

From Documentation
(draft)
 
Line 7: Line 7:
 
= Overview =
 
= Overview =
  
 +
= React =
  
−
= Designers Involved =
+
[https://reactjs.org/ React] is a JavaScript library for building user interfaces. We can use React as a front-end UI and use ZK as a pure backend. In this small talk, I will show you how to integrate React with ZK using the [https://books.zkoss.org/zk-mvvm-book/8.0/data_binding/client_binding_api.html client binding API] step by step.
  
 +
For convenience, I use an open-source React demo project [https://github.com/jeffersonRibeiro/react-shopping-cart/ react-shopping-cart] to demonstrate.
  
−
= Navigation =
+
= Load data from ZK =
  
 +
We need to create a View Model to use the client binding feature in React.
  
−
= Responsive Design Layout (RWD) with Bootstrap=
+
== Create a ViewModel (VM) in ZK ==
  
−
== Padding & Margin ==
+
We created an <code>IndexVM.java</code> and defined a property "products". The <code>products</code> property is loaded from a database.
  
 +
'''IndexVM.java'''
 +
<source lang="java" high="11,14">
 +
@VariableResolver(DelegatingVariableResolver.class)
 +
public class IndexVM {
 +
// omitted
 +
@WireVariable
 +
private ProductService productService;
  
−
== Reusing ZUL Snippet ==
+
private List<ProductDto> products;
 +
// omitted
 +
@Init
 +
public void init() {
 +
products = productService.getProducts();
 +
}
  
 +
public List<ProductDto> getProducts() {
 +
return products;
 +
}
 +
// omitted
 +
</source>
 +
* Line 11: We use Spring + Hibernate to communicate with the database. A service instance is needed to be injected in the VM by adding a <code>@WireVariable</code> annotation.
 +
* Line 14: Declare getter only here so ZK knows <code>products</code> is a readonly property of a VM.
  
−
=== Declare a Custom Component ===
+
== Set Client Binding Annotations ==
  
  
−
== Divide a Page ==
+
The react-shopping-cart loads JSON data a server. A method <code>fetchProducts</code> initiates <code>axios.get</code> to make an AJAX request.
  
−
== Nested Rows ==
+
'''react-shopping-cart/src/services/shelf/actions.js'''
 +
<source lang="js">
 +
export const fetchProducts = (filters, sortBy, callback) => dispatch => {
 +
  return axios
 +
    .get(productsAPI)
 +
    .then(res => {
 +
      let { products } = res.data;
 +
// omitted
 +
</source>
  
 +
We can use client binding API to request with ZK instead.
  
−
= Responsive Design (RWD) with ZK =
 
  
  
−
==Switching Sidebar ==
+
= Submit data to ZK =
  
 +
= Download the Source=
 +
You can access the complete source at [https://github.com/zkoss-demo/zkangular2 github].
  
−
= Create Your Custom Component =
+
= Other Front-End Frameworks Integrations =
−
 
+
* Angular
−
== state-box ==
+
* Vue.js
−
 
 
−
===Implement Layout ===
 
−
 
 
−
===Declare as a Custom Component ===
 
−
 
 
−
=== Use state-box ===
 
−
 
 
−
=== Pass Data Into state-box ===
 
−
 
 
−
= Download & Online Demo=
 
−
I hope you enjoyed reading this article, and have learned how you can use ZK with Bootstrap's Grid and Utility CSS Classes to create responsive and impressive Web applications. You can download the project from:
 
−
* [https://github.com/zkoss-demo/admin-template a runnable project at github]
 
−
* [https://www.zkoss.org/admin-template/ online demo]
 
−
 
 
−
= Other Responsive Design Tips =
 
−
 
 
  
 
{{Template:CommentedSmalltalk_Footer_new|
 
{{Template:CommentedSmalltalk_Footer_new|

Revision as of 10:48, 6 January 2020

Documentationudyhuang
udyhuang
Author
Rudy Huang, Engineer, Potix Corporation
Date
January, 2020
Version
ZK 9.0.0

Overview

React

React is a JavaScript library for building user interfaces. We can use React as a front-end UI and use ZK as a pure backend. In this small talk, I will show you how to integrate React with ZK using the client binding API step by step.

For convenience, I use an open-source React demo project react-shopping-cart to demonstrate.

Load data from ZK

We need to create a View Model to use the client binding feature in React.

Create a ViewModel (VM) in ZK

We created an IndexVM.java and defined a property "products". The products property is loaded from a database.

IndexVM.java 

@VariableResolver(DelegatingVariableResolver.class)
public class IndexVM {
	// omitted
	@WireVariable
	private ProductService productService;

	private List<ProductDto> products;
	// omitted
	@Init
	public void init() {
		products = productService.getProducts();
	}

	public List<ProductDto> getProducts() {
		return products;
	}
	// omitted
  • Line 11: We use Spring + Hibernate to communicate with the database. A service instance is needed to be injected in the VM by adding a @WireVariable annotation.
  • Line 14: Declare getter only here so ZK knows products is a readonly property of a VM.

Set Client Binding Annotations

The react-shopping-cart loads JSON data a server. A method fetchProducts initiates axios.get to make an AJAX request.

react-shopping-cart/src/services/shelf/actions.js 

export const fetchProducts = (filters, sortBy, callback) => dispatch => {
  return axios
    .get(productsAPI)
    .then(res => {
      let { products } = res.data;
// omitted

We can use client binding API to request with ZK instead.


Submit data to ZK

Download the Source

You can access the complete source at github.

Other Front-End Frameworks Integrations

  • Angular
  • Vue.js


Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
Retrieved from "https://www.zkoss.org/_w/index.php?title=User:Rudyhuang/Smalltalk-draft&oldid=49655"