Downloaded 42 times
Uploaded by祁源 朱
當ZK遇見Front-End
The document discusses ZK, an open-source Java/AJAX framework, highlighting its architecture, which employs MVC and MVVM designs. Key features include various UI components, responsive design, and data binding techniques, as well as upcoming enhancements in ZK 8. It also presents multiple code examples illustrating how to implement MVC and MVVM patterns within the ZK framework.
More Related Content
當ZK遇見Front-End
- 1. #JCConf 當 ZK 遇⾒見Front-End 朱祁源 (James Chu) marchuqq@gmail.com GitHub: DevChu Demo Code: DevChu/Jcconf2015-ZKDemo
- 2.
- 3. About ZK • Opensource Java/AJAX framework
- 4. About ZK • Opensource Java/AJAX framework • 200+ Components, Event driven
- 5. About ZK • Opensource Java/AJAX framework • 200+ Components, Event driven • Multiple browsers/platforms support
- 6.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. Browser Server HTML Java ZKComponent
- 18.
- 19.
- 20.
- 21. Start ZK • Manually •Download Jar (SourceForge, Github) • Maven Archetype (recommended!) • Setting and Choose an ZK archetype
- 22. Concepts of ZK •MVC and MVVM
- 23. Concepts of ZK •MVC and MVVM • MVC • Model - View - Controller
- 28. MVC in ZK •View -> ZUL (XML-Base), ZHTML (XHTML) • *.zul, *.zhtml
- 29. MVC in ZK •View -> ZUL (XML-Base), ZHTML (XHTML) • *.zul, *.zhtml • Controller -> Composer • *.java
- 30. MVC in ZK •View -> ZUL (XML-Base), ZHTML (XHTML) • *.zul, *.zhtml • Controller -> Composer • *.java • Model -> Business logic • Entity, DB Access…
- 31. MVC in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVC" apply="org.zkoss.DemoComposer"> <vbox> <div> Input: <textbox id="input" /> </div> <div> Output: <label id="output" /> </div> <div> <button id="ok" label="Submit" /> <button id="clear" label="Clear" /> </div> </vbox> </window>
- 32. MVC in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVC" apply="org.zkoss.DemoComposer"> <vbox> <div> Input: <textbox id="input" /> </div> <div> Output: <label id="output" /> </div> <div> <button id="ok" label="Submit" /> <button id="clear" label="Clear" /> </div> </vbox> </window>
- 33. MVC in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVC" apply="org.zkoss.DemoComposer"> <vbox> <div> Input: <textbox id="input" /> </div> <div> Output: <label id="output" /> </div> <div> <button id="ok" label="Submit" /> <button id="clear" label="Clear" /> </div> </vbox> </window>
- 34.
- 35. MVC in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVC" apply="org.zkoss.DemoComposer"> <vbox> <div> Input: <textbox id="input" /> </div> <div> Output: <label id="output" /> </div> <div> <button id="ok" label="Submit" /> <button id="clear" label="Clear" /> </div> </vbox> </window>
- 36. MVC in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVC" apply="org.zkoss.DemoComposer"> <vbox> <div> Input: <textbox id="input" /> </div> <div> Output: <label id="output" /> </div> <div> <button id="ok" label="Submit" /> <button id="clear" label="Clear" /> </div> </vbox> </window>
- 37. MVC in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVC" apply="org.zkoss.DemoComposer"> <vbox> <div> Input: <textbox id="input" /> </div> <div> Output: <label id="output" /> </div> <div> <button id="ok" label="Submit" /> <button id="clear" label="Clear" /> </div> </vbox> </window>
- 38. public class DemoComposerextends SelectorComposer<Window> { @Wire Textbox input; @Wire Label output; @Listen("onClick=#ok") public void submit() { output.setValue(input.getValue()); //Business logic, access DB… } @Listen("onClick=#clear") public void clear() { input.setValue(""); output.setValue(""); } } MVC in ZK
- 39. public class DemoComposerextends SelectorComposer<Window> { @Wire Textbox input; @Wire Label output; @Listen("onClick=#ok") public void submit() { output.setValue(input.getValue()); //Business logic, access DB… } @Listen("onClick=#clear") public void clear() { input.setValue(""); output.setValue(""); } } MVC in ZK
- 40. public class DemoComposerextends SelectorComposer<Window> { @Wire Textbox input; @Wire Label output; @Listen("onClick=#ok") public void submit() { output.setValue(input.getValue()); //Business logic, access DB… } @Listen("onClick=#clear") public void clear() { input.setValue(""); output.setValue(""); } } MVC in ZK
- 41. public class DemoComposerextends SelectorComposer<Window> { @Wire Textbox input; @Wire Label output; @Listen("onClick=#ok") public void submit() { output.setValue(input.getValue()); //Business logic, access DB… } @Listen("onClick=#clear") public void clear() { input.setValue(""); output.setValue(""); } } MVC in ZK
- 42.
- 43. Concepts of ZK •MVC and MVVM
- 44. Concepts of ZK •MVC and MVVM • MVVM • Model - View - ViewModel
- 47. MVVM in ZK •View -> ZUL (with state) • @init, @load, @save, @command…
- 48. MVVM in ZK •View -> ZUL (with state) • @init, @load, @save, @command… • ViewModel -> ViewModel Class • Java Bean • Command
- 49. MVVM in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVVM" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm')@init('org.zkoss.DemoViewModel')"> <vbox> <div> Input: <textbox value="@bind(vm.input)" /> </div> <div> Output: <label value="@load(vm.output)" /> </div> <div> <button label="Submit" onClick="@command('save')"/> <button label="Clear" onClick="@command('clear')"/> </div> </vbox> </window>
- 50. MVVM in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVVM" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm')@init('org.zkoss.DemoViewModel')"> <vbox> <div> Input: <textbox value="@bind(vm.input)" /> </div> <div> Output: <label value="@load(vm.output)" /> </div> <div> <button label="Submit" onClick="@command('save')"/> <button label="Clear" onClick="@command('clear')"/> </div> </vbox> </window>
- 51. MVVM in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVVM" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm')@init('org.zkoss.DemoViewModel')"> <vbox> <div> Input: <textbox value="@bind(vm.input)" /> </div> <div> Output: <label value="@load(vm.output)" /> </div> <div> <button label="Submit" onClick="@command('save')"/> <button label="Clear" onClick="@command('clear')"/> </div> </vbox> </window>
- 52. MVVM in ZK <windowborder="normal" width="300px" height="300px" title="ZK MVVM" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm')@init('org.zkoss.DemoViewModel')"> <vbox> <div> Input: <textbox value="@bind(vm.input)" /> </div> <div> Output: <label value="@load(vm.output)" /> </div> <div> <button label="Submit" onClick="@command('save')"/> <button label="Clear" onClick="@command('clear')"/> </div> </vbox> </window>
- 53. MVVM in ZK publicclass DemoViewModel { private String input; private String output; public String getInput() { return input; } public void setInput(String input) { this.input = input; } public String getOutput() { return output; } @Init public void init() { input = "init"; } //commands... } Bean
- 54. MVVM in ZK publicclass DemoViewModel { //getter, setter.. @Command @NotifyChange("output") public void save() { output = input; } @Command @NotifyChange({"input", "output"}) public void clear() { input = ""; output = ""; } } Command
- 55. MVVM in ZK publicclass DemoViewModel { //getter, setter.. @Command @NotifyChange("output") public void save() { output = input; } @Command @NotifyChange({"input", "output"}) public void clear() { input = ""; output = ""; } } Command
- 56. MVVM in ZK publicclass DemoViewModel { //getter, setter.. @Command @NotifyChange("output") public void save() { output = input; } @Command @NotifyChange({"input", "output"}) public void clear() { input = ""; output = ""; } } Command
- 57.
- 58. Why MVVM? MVC MVVM ComponentID Data binding expression View
- 59. Why MVVM? MVC MVVM ComponentID Data binding expression Extend Composer POJO CommandController View
- 60.
- 61.
- 62.
- 63. Extensions of ZK •ZK Addons • ZK Charts • ZK SpreadSheet • …etc.
- 64. ZK Charts • LineChart
- 65. ZK Charts • BarChart
- 66. ZK Charts • PieChart
- 67. ZK Charts • 3DChart
- 68.
- 69. Extensions of ZK •ZK Addons • ZK Charts, ZK SpreadSheet
- 70. Extensions of ZK •ZK Addons • ZK Charts, ZK SpreadSheet • ZK + Spring, Hibernate … • ZK x SpringMVC
- 71.
- 72. ZK in Front-End •Responsive design (ZK6.5)
- 73. ZK in Front-End •Responsive design (ZK6.5) • CSS3, LESS, Flat Design (ZK7)
- 74.
- 75.
- 76. ZK in Front-End •Responsive design (ZK6.5) • CSS3, LESS, Flat Design (ZK7) • More Components and Addons (All versions)
- 77. ZK in Front-End •Responsive design (ZK6.5) • CSS3, LESS, Flat Design (ZK7) • More Components and Addons (All versions) • ZK 8?
- 79. About ZK 8 •UI Template Injection
- 80. About ZK 8 •UI Template Injection • Shadow Elements
- 81. About ZK 8 •UI Template Injection • Shadow Elements • Concept -> Shadow DOM + JSTL Tag
- 82. About ZK 8 •UI Template Injection • Shadow Elements • Concept -> Shadow DOM + JSTL Tag <input type="range">
- 83. About ZK 8 •UI Template Injection • Shadow Elements • Concept -> Shadow DOM + JSTL Tag <input type="range">
- 84. About ZK 8 •UI Template Injection • Shadow Elements • Concept -> Shadow DOM + JSTL Tag <input type="range">
- 85. About ZK 8 •JSTL Tag <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title> Tag Example</title> </head> <body> <c:set var="salary" scope="session" value="${2000*2}"/> <c:if test="${salary > 2000}"> <p>My salary is: <c:out value="${salary}"/><p> </c:if> <c:forEach var="i" begin="1" end="5"> Item <c:out value="${i}"/><p> </c:forEach> </body> </html>
- 86. About ZK 8 •JSTL Tag <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title> Tag Example</title> </head> <body> <c:set var="salary" scope="session" value="${2000*2}"/> <c:if test="${salary > 2000}"> <p>My salary is: <c:out value="${salary}"/><p> </c:if> <c:forEach var="i" begin="1" end="5"> Item <c:out value="${i}"/><p> </c:forEach> </body> </html> c:set c:if c:forEach
- 87. Shadow Elements inZK 8 • If • Choose/When/Otherwise • ForEach • Apply
- 88. Shadow Elements inZK 8 <div> <if test="${user.editable}"> User Name: <textbox value="${user.name}"/> <forEach items="${user.phones}"> <label value="${each.number}"/> </forEach> </if> </div>
- 89. Shadow Elements inZK 8 <div> <if test="${user.editable}"> User Name: <textbox value="${user.name}"/> <forEach items="${user.phones}"> <label value="${each.number}"/> </forEach> </if> </div>
- 93. Apply + Template •with Template name
- 94. Apply + Template •with Template name <template name="default"> <div style="color:blue">Blue</div> </template> <template name="normal"> <div style="color:red">Red</div> </template> <apply template="default" />
- 95. Apply + Template •with Template name <template name="default"> <div style="color:blue">Blue</div> </template> <template name="normal"> <div style="color:red">Red</div> </template> <apply template="default" />
- 96. Apply + Template •with Template URI
- 97. Apply + Template <applytemplateURI="inc/apply.zul"/> • with Template URI
- 98. UI Template Injection •Pure Data (Catalog)
- 99. UI Template Injection •Pure Data (Catalog) Product Price Seller Briefcase 159.99 Buzzphilip BlueFolder 1.50 Buzzphilip USB 20.00 Olliejeffery …More
- 100.
- 101.
- 102.
- 103.
- 104. UI Template Injection •main.zul
- 105. UI Template Injection <applytemplateURI="@load(vm.tmpURI)" catalog="@load(vm.catalog)"/> • main.zul
- 106. UI Template Injection <applytemplateURI="@load(vm.tmpURI)" catalog="@load(vm.catalog)"/> • main.zul <button label="Change template" onClick="@command('changeTemplate')">
- 107. UI Template Injection •template_list.zul
- 108. UI Template Injection •template_list.zul <forEach items="@init(catalog.items)" var="item"> <label value="@load(item.title)" /> ... </forEach>
- 109.
- 110. About ZK 8 •Client-Side binding • Easier to work with 3rd JS library
- 111. About ZK 8 •Client-Side binding • Easier to work with 3rd JS library • Trigger Command in Javascript
- 112.
- 113. Browser Server HTML ZK Widget Java ZK Component JS Composer/ ViewModel AJAX
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120. Client-Side binding API •Client: var binder = zkbind.$('$id'); binder.command(commandName, data); binder.after(commandName, callback);
- 121. Client-Side binding API •Client: var binder = zkbind.$('$id'); binder.command(commandName, data); binder.after(commandName, callback); @ToServerCommand("commandName") @ToClientCommand("commandName") @NotifyCommand(value="commandName", onChange="_vm_.expression") • Server:
- 122. ZK 8 xReact • Work with React
- 123.
- 124.
- 125. ZK 8 xReact • A Simple Chat Room with React x ZK 8
- 126. ZK 8 xReact • A Simple Chat Room with React x ZK 8 Comment
- 127. ZK 8 xReact • A Simple Chat Room with React x ZK 8 Comment Author Text
- 128. ZK 8 xReact • A Simple Chat Room with React x ZK 8 Comment Author Text doAddComment doCommentsChange
- 129. var CommentBox =React.createClass({ handleCommentSubmit: function(comment) { var comments = this.state.data; comments.push(comment); this.setState({data: comments}, function() { zkbinder.command('doAddComment', comment); }); }, loadCommentsFromServer: function() { var self = this; zkbinder.after('doCommentsChange', function (evt) { self.setState({data: evt}); }); }, //other code, render… });
- 130. var CommentBox =React.createClass({ handleCommentSubmit: function(comment) { var comments = this.state.data; comments.push(comment); this.setState({data: comments}, function() { zkbinder.command('doAddComment', comment); }); }, loadCommentsFromServer: function() { var self = this; zkbinder.after('doCommentsChange', function (evt) { self.setState({data: evt}); }); }, //other code, render… }); handleCommentSubmit
- 131. var CommentBox =React.createClass({ handleCommentSubmit: function(comment) { var comments = this.state.data; comments.push(comment); this.setState({data: comments}, function() { zkbinder.command('doAddComment', comment); }); }, loadCommentsFromServer: function() { var self = this; zkbinder.after('doCommentsChange', function (evt) { self.setState({data: evt}); }); }, //other code, render… }); loadCommentsFromServer handleCommentSubmit
- 132. @ToServerCommand({"doAddComment"}) @NotifyCommand(value="doCommentsChange", onChange="_vm_.comments") @ToClientCommand({"doCommentsChange"}) public class ReactVM{ //event queue, other command… } doAddComment doCommentsChange
- 133. @ToServerCommand({"doAddComment"}) @NotifyCommand(value="doCommentsChange", onChange="_vm_.comments") @ToClientCommand({"doCommentsChange"}) public class ReactVM{ //event queue, other command… } doAddComment doCommentsChange
- 134. @ToServerCommand({"doAddComment"}) @NotifyCommand(value="doCommentsChange", onChange="_vm_.comments") @ToClientCommand({"doCommentsChange"}) public class ReactVM{ //event queue, other command… } doAddComment doCommentsChange
- 135. //@ToServerCommand, @NotifyCommand,@ToClientCommand public classReactVM { private Collection<Comment> comments; @Command @NotifyChange("comments") public void doAddComment( @BindingParam("author") String author, @BindingParam("text") String text) { Comment c = new Comment(author, text); comments.add(c); } //event queue, other command… }
- 136. //@ToServerCommand, @NotifyCommand,@ToClientCommand public classReactVM { private Collection<Comment> comments; @Command @NotifyChange("comments") public void doAddComment( @BindingParam("author") String author, @BindingParam("text") String text) { Comment c = new Comment(author, text); comments.add(c); } //event queue, other command… } comments
- 137. //@ToServerCommand, @NotifyCommand,@ToClientCommand public classReactVM { private Collection<Comment> comments; @Command @NotifyChange("comments") public void doAddComment( @BindingParam("author") String author, @BindingParam("text") String text) { Comment c = new Comment(author, text); comments.add(c); } //event queue, other command… } comments doAddComment
- 138.
- 139. About ZK 8 •Furthermore, wrapped into a Component
- 140. About ZK 8 •Furthermore, wrapped into a Component • Data-Attribute handler
- 141. About ZK 8 •Furthermore, wrapped into a Component • Data-Attribute handler • HTML5 Custom Data Attribute (data-*) <div id="test" data-content="something" />
- 142. About ZK 8 •Furthermore, wrapped into a Component • Data-Attribute handler • HTML5 Custom Data Attribute (data-*) <div id="test" data-content="something" /> var testDiv = document.getElementById('test'); var content = plant.getAttribute('data-content'); //Do something...
- 143. Data-Attribute Handler inZK 8 • Required 3 Parts:
- 144. Data-Attribute Handler inZK 8 • Required 3 Parts: • Javascript library
- 145. Data-Attribute Handler inZK 8 • Required 3 Parts: • Javascript library • ZK Component (Widget)
- 146. Data-Attribute Handler inZK 8 • Required 3 Parts: • Javascript library • ZK Component (Widget) • Integration (in zk.xml)
- 147. Data-Attribute Handler inZK 8 • Required 3 Parts: • Javascript library • ZK Component (Widget) • Integration (in zk.xml)
- 148. data-labelauty • in WEB-INF/zk.xml <client-config> <data-handler> <name>labelauty</name> <linkhref="/scripts/auty/jquery-labelauty.css" /> <script src="/scripts/auty/jquery-labelauty.js" /> <script> function (wgt, dataValue) { jq(wgt._subnodes.real).labelauty(dataValue); } </script> </data-handler> </client-config>
- 149. data-labelauty • in WEB-INF/zk.xml <client-config> <data-handler> <name>labelauty</name> <linkhref="/scripts/auty/jquery-labelauty.css" /> <script src="/scripts/auty/jquery-labelauty.js" /> <script> function (wgt, dataValue) { jq(wgt._subnodes.real).labelauty(dataValue); } </script> </data-handler> </client-config> name link script
- 150. data-labelauty • in WEB-INF/zk.xml <client-config> <data-handler> <name>labelauty</name> <linkhref="/scripts/auty/jquery-labelauty.css" /> <script src="/scripts/auty/jquery-labelauty.js" /> <script> function (wgt, dataValue) { jq(wgt._subnodes.real).labelauty(dataValue); } </script> </data-handler> </client-config> name link script
- 151. data-labelauty • in WEB-INF/zk.xml <client-config> <data-handler> <name>labelauty</name> <linkhref="/scripts/auty/jquery-labelauty.css" /> <script src="/scripts/auty/jquery-labelauty.js" /> <script> function (wgt, dataValue) { jq(wgt._subnodes.real).labelauty(dataValue); } </script> </data-handler> </client-config> name link script Widget Data
- 152.
- 153.
- 154.
- 155. Data-Attribute Handler inZK 8 • Another example: markdown converter var converter = new showdown.Converter(), text = '#hello, markdown!', html = converter.makeHtml(text);
- 156. Data-Attribute Handler inZK 8 • Another example: markdown converter var converter = new showdown.Converter(), text = '#hello, markdown!', html = converter.makeHtml(text);
- 157. Data-Attribute Handler inZK 8 • Another example: markdown converter var converter = new showdown.Converter(), text = '#hello, markdown!', html = converter.makeHtml(text); input outputconverter
- 158. Markdown editor byData-handler
- 159. Markdown editor byData-handler <textbox value="@bind(vm.markdown)" /> <label ca:data-markdown="true" value="@load(vm.markdown)" multiline="true" />
- 160. function (wgt, dataValue){ var converter = new showdown.Converter(); //Convert current value wgt.$n().innerHTML = converter.makeHtml(wgt.getValue()); //After value get updated, convert to markdown wgt.setOverride("setValue", function(value) { this.$setValue(value); this.$n().innerHTML = converter.makeHtml(value); }); } • data-markdown script Markdown editor by Data-handler
- 161. function (wgt, dataValue){ var converter = new showdown.Converter(); //Convert current value wgt.$n().innerHTML = converter.makeHtml(wgt.getValue()); //After value get updated, convert to markdown wgt.setOverride("setValue", function(value) { this.$setValue(value); this.$n().innerHTML = converter.makeHtml(value); }); } • data-markdown script Markdown editor by Data-handler Current
- 162. function (wgt, dataValue){ var converter = new showdown.Converter(); //Convert current value wgt.$n().innerHTML = converter.makeHtml(wgt.getValue()); //After value get updated, convert to markdown wgt.setOverride("setValue", function(value) { this.$setValue(value); this.$n().innerHTML = converter.makeHtml(value); }); } • data-markdown script Markdown editor by Data-handler Current Updated
- 163.
- 165.