當ZK遇見Front-End
•
14 gefällt mir•1,800 views
ZK 是一套以Ajax/XUL/Java 為基礎的網頁應用程式開發框架，可以讓開發者在完全不撰寫Javascript 的情況之下，建構出適用於各種平台的互動式網站。 隨著前端技術的興起，出現了千百種CSS與Javascript Framework 讓開發者可以選擇，而ZK 是怎麼樣來面對這樣一股潮流呢? 在ZK 8 之中，我們將後端與前端整合，讓開發者建構網站時可以保有ZK 的優點(Powerful Ajax) 並享有更多前端的變化。 此次分享中，將介紹ZK 與 各種當紅前端技術的整合(Angular, React.js..)，UI Template Injection，以及在ZK 中將 Front-End library 元件化。
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie 當ZK遇見Front-End
Ähnlich wie 當ZK遇見Front-End (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (19)
當ZK遇見Front-End
- 1. #JCConf 當 ZK 遇⾒見 Front-End 朱祁源 (James Chu) marchuqq@gmail.com GitHub: DevChu Demo Code: DevChu/Jcconf2015-ZKDemo
- 2. About ZK
- 3. About ZK • Open source Java/AJAX framework
- 4. About ZK • Open source Java/AJAX framework • 200+ Components, Event driven
- 5. About ZK • Open source Java/AJAX framework • 200+ Components, Event driven • Multiple browsers/platforms support
- 6. Concept of ZK ?
- 17. Browser Server HTML Java ZK Component
- 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 <window border="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 <window border="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 <window border="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. MVC in ZK
- 35. MVC in ZK <window border="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 <window border="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 <window border="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 DemoComposer extends 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 DemoComposer extends 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 DemoComposer extends 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 DemoComposer extends 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. MVC in ZK
- 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 <window border="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 <window border="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 <window border="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 <window border="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 public class 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 public class 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 public class 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 public class DemoViewModel { //getter, setter.. @Command @NotifyChange("output") public void save() { output = input; } @Command @NotifyChange({"input", "output"}) public void clear() { input = ""; output = ""; } } Command
- 58. Why MVVM? MVC MVVM Component ID Data binding expression View
- 59. Why MVVM? MVC MVVM Component ID Data binding expression Extend Composer POJO CommandController View
- 63. Extensions of ZK • ZK Addons • ZK Charts • ZK SpreadSheet • …etc.
- 64. ZK Charts • Line Chart
- 65. ZK Charts • Bar Chart
- 66. ZK Charts • Pie Chart
- 67. ZK Charts • 3D Chart
- 68. ZK SpreadSheet
- 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. Nowadays..
- 72. ZK in Front-End • Responsive design (ZK6.5)
- 73. ZK in Front-End • Responsive design (ZK6.5) • CSS3, LESS, Flat Design (ZK7)
- 74. Flat Design in ZK
- 75. Flat Design in ZK
- 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 in ZK 8 • If • Choose/When/Otherwise • ForEach • Apply
- 88. Shadow Elements in ZK 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 in ZK 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 <apply templateURI="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. UI Template Injection • View?
- 101. UI Template Injection • View?
- 102. UI Template Injection • View?
- 103. UI Template Injection • View?
- 104. UI Template Injection • main.zul
- 105. UI Template Injection <apply templateURI="@load(vm.tmpURI)" catalog="@load(vm.catalog)"/> • main.zul
- 106. UI Template Injection <apply templateURI="@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. DEMO Catalog x ZK 8
- 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
- 113. Browser Server HTML ZK Widget Java ZK Component JS Composer / ViewModel AJAX
- 116. Browser Server binder.command @ToServerCommand JS Composer / ViewModel
- 118. Browser Server binder.command binder.after @ToServerCommand @ToClientCommand JS Composer / ViewModel
- 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 x React • Work with React
- 125. ZK 8 x React • A Simple Chat Room with React x ZK 8
- 126. ZK 8 x React • A Simple Chat Room with React x ZK 8 Comment
- 127. ZK 8 x React • A Simple Chat Room with React x ZK 8 Comment Author Text
- 128. ZK 8 x React • 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 class ReactVM { 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 class ReactVM { 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 class ReactVM { 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. DEMO React x ZK 8
- 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 in ZK 8 • Required 3 Parts:
- 144. Data-Attribute Handler in ZK 8 • Required 3 Parts: • Javascript library
- 145. Data-Attribute Handler in ZK 8 • Required 3 Parts: • Javascript library • ZK Component (Widget)
- 146. Data-Attribute Handler in ZK 8 • Required 3 Parts: • Javascript library • ZK Component (Widget) • Integration (in zk.xml)
- 147. Data-Attribute Handler in ZK 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> <link href="/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> <link href="/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> <link href="/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> <link href="/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. data-labelauty • Usage: <checkbox xmlns:ca="client/attribute" checked="@bind(vm.like)" ca:data-labelauty="{'class': 'icon',…}" />
- 153. data-labelauty • Usage: <checkbox xmlns:ca="client/attribute" checked="@bind(vm.like)" ca:data-labelauty="{'class': 'icon',…}" />
- 154. DEMO Labelauty x ZK 8
- 155. Data-Attribute Handler in ZK 8 • Another example: markdown converter var converter = new showdown.Converter(), text = '#hello, markdown!', html = converter.makeHtml(text);
- 156. Data-Attribute Handler in ZK 8 • Another example: markdown converter var converter = new showdown.Converter(), text = '#hello, markdown!', html = converter.makeHtml(text);
- 157. Data-Attribute Handler in ZK 8 • Another example: markdown converter var converter = new showdown.Converter(), text = '#hello, markdown!', html = converter.makeHtml(text); input outputconverter
- 158. Markdown editor by Data-handler
- 159. Markdown editor by Data-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. DEMO Markdown editor x ZK 8
- 165. #JCConf Thank you!