https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&feed=atom&action=history
Small Talks/2009/June/Integrate ZK Calendar With A Database - Revision history
2024-03-28T21:27:52Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=13976&oldid=prev
Tmillsclare: /* Creating the database */
2010-12-03T10:01:38Z
<p><span dir="auto"><span class="autocomment">Creating the database</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 10:01, 3 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l38" >Line 38:</td>
<td colspan="2" class="diff-lineno">Line 38:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Here is the SQL statement to create the above table:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Here is the SQL statement to create the above table:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><source lang="<del class="diffchange diffchange-inline">SQL</del>"></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><source lang="<ins class="diffchange diffchange-inline">sql</ins>"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>CREATE TABLE tblnews ( news_item int NOT NULL AUTO_INCREMENT, </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>CREATE TABLE tblnews ( news_item int NOT NULL AUTO_INCREMENT, </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> date_begin bigint NOT NULL, </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> date_begin bigint NOT NULL, </div></td></tr>
</table>
Tmillsclare
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=7477&oldid=prev
Elton776: moved Small Talks/Integrate ZK Calendar With A Database to Small Talks/2009/June/Integrate ZK Calendar With A Database
2010-09-20T08:24:39Z
<p>moved <a href="/wiki/Small_Talks/Integrate_ZK_Calendar_With_A_Database" class="mw-redirect" title="Small Talks/Integrate ZK Calendar With A Database">Small Talks/Integrate ZK Calendar With A Database</a> to <a href="/wiki/Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database" title="Small Talks/2009/June/Integrate ZK Calendar With A Database">Small Talks/2009/June/Integrate ZK Calendar With A Database</a></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:24, 20 September 2010</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=6881&oldid=prev
Elton776: /* Demo */
2010-09-15T04:17:39Z
<p><span dir="auto"><span class="autocomment">Demo</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:17, 15 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17" >Line 17:</td>
<td colspan="2" class="diff-lineno">Line 17:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Demo ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Demo ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">[[file:</del>qoCcsr0rpTQ.swf<del class="diffchange diffchange-inline">]]</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline"><gflash width="800" height="475"></ins>qoCcsr0rpTQ.swf<ins class="diffchange diffchange-inline"></gflash></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=6880&oldid=prev
Elton776: /* Demo */
2010-09-15T04:16:04Z
<p><span dir="auto"><span class="autocomment">Demo</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:16, 15 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17" >Line 17:</td>
<td colspan="2" class="diff-lineno">Line 17:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Demo ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Demo ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline">{{#ev</del>:<del class="diffchange diffchange-inline">youtube|</del>qoCcsr0rpTQ<del class="diffchange diffchange-inline">|800}}</del></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">[[file</ins>:qoCcsr0rpTQ.<ins class="diffchange diffchange-inline">swf]]</ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del class="diffchange diffchange-inline"><flash src="http://www</del>.<del class="diffchange diffchange-inline">youtube.com/v/qoCcsr0rpTQ?fs=1&amp;hl=zh_TW&amp;rel=0" height="800" width="475"></flash></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=6878&oldid=prev
Elton776: /* Demo */
2010-09-15T04:14:21Z
<p><span dir="auto"><span class="autocomment">Demo</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:14, 15 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18" >Line 18:</td>
<td colspan="2" class="diff-lineno">Line 18:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{#ev:youtube|qoCcsr0rpTQ|800}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{#ev:youtube|qoCcsr0rpTQ|800}}</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><flash src="http://www.youtube.com/v/qoCcsr0rpTQ?fs=1&amp;hl=zh_TW&amp;rel=0" height="800" width="475"></flash></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=6877&oldid=prev
Elton776: /* Demo */
2010-09-15T04:09:44Z
<p><span dir="auto"><span class="autocomment">Demo</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:09, 15 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18" >Line 18:</td>
<td colspan="2" class="diff-lineno">Line 18:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{#ev:youtube|qoCcsr0rpTQ|800}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{#ev:youtube|qoCcsr0rpTQ|800}}</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"><object width="800" height="475"><param name="movie" value="http://www.youtube.com/v/qoCcsr0rpTQ?fs=1&amp;hl=zh_TW&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qoCcsr0rpTQ?fs=1&amp;hl=zh_TW&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="475"></embed></object></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=6876&oldid=prev
Elton776: /* Demo */
2010-09-15T04:08:49Z
<p><span dir="auto"><span class="autocomment">Demo</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:08, 15 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l18" >Line 18:</td>
<td colspan="2" class="diff-lineno">Line 18:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{#ev:youtube|qoCcsr0rpTQ|800}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{#ev:youtube|qoCcsr0rpTQ|800}}</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><object width="800" height="475"><param name="movie" value="http://www.youtube.com/v/qoCcsr0rpTQ?fs=1&amp;hl=zh_TW&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qoCcsr0rpTQ?fs=1&amp;hl=zh_TW&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="475"></embed></object></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Creating the database ==</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=5687&oldid=prev
Elton776 at 08:37, 10 September 2010
2010-09-10T08:37:13Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:37, 10 September 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2"> </td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Template:Smalltalk_Author|</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Template:Smalltalk_Author|</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|author=Timothy Clare, Technology Evangelist, Potix Corporation</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|author=Timothy Clare, Technology Evangelist, Potix Corporation</div></td></tr>
</table>
Elton776
https://www.zkoss.org/_w/index.php?title=Small_Talks/2009/June/Integrate_ZK_Calendar_With_A_Database&diff=5685&oldid=prev
Elton776: Created page with ' {{Template:Smalltalk_Author| |author=Timothy Clare, Technology Evangelist, Potix Corporation |date=June 26, 2009 |version=ZK Calendar 1.0.0 RC }} == Introducing ZK Calendar ==…'
2010-09-10T08:36:20Z
<p>Created page with ' {{Template:Smalltalk_Author| |author=Timothy Clare, Technology Evangelist, Potix Corporation |date=June 26, 2009 |version=ZK Calendar 1.0.0 RC }} == Introducing ZK Calendar ==…'</p>
<p><b>New page</b></p><div><br />
{{Template:Smalltalk_Author|<br />
|author=Timothy Clare, Technology Evangelist, Potix Corporation<br />
|date=June 26, 2009<br />
|version=ZK Calendar 1.0.0 RC<br />
}}<br />
<br />
<br />
== Introducing ZK Calendar ==<br />
<br />
<br />
<br />
ZK Calendar is an Ajax component that integrates rich and intuitive scheduling functionality into existing enterprise applications using pure Java. The calendar facilitates interaction with other Ajax components and the ability to customize functionality and styling.<br />
<br />
The aim of the article is to build a web application using ZK Calendar and a database backend.<br />
<br />
<br />
== Demo ==<br />
<br />
{{#ev:youtube|qoCcsr0rpTQ|800}}<br />
<br />
== Creating the database ==<br />
<br />
<br />
The database structure is simple and mirrors the event object defined by ZK Calendar. The model object is named SimpleCalendarEvent and stores such things as the color of the news item. In addition to the properties within the SimpleCalendarEvent we will need an id for each news item which will be the primary key and an auto incrementing field.<br />
We are using the MySQL server, however, this is just for an example you can use any server type, just make sure to change the data types accordingly.<br />
The table below shows the entire database structure:<br />
<br />
News_item INTEGER<br />
Date_begin BIGINT<br />
Date_end BIGINT<br />
Title VARCHAR<br />
Content VARCHAR<br />
Header_color VARCHAR<br />
Content_color VARCHAR<br />
Zclass VARCHAR<br />
isLocked BIT<br />
<br />
Here is the SQL statement to create the above table:<br />
<br />
<source lang="SQL"><br />
CREATE TABLE tblnews ( news_item int NOT NULL AUTO_INCREMENT, <br />
date_begin bigint NOT NULL, <br />
date_end bigint NOT NULL, <br />
title varchar(200) NOT NULL, <br />
content varchar(200) NOT NULL, <br />
header_color varchar(10) NOT NULL, <br />
content_color varchar(10) NOT NULL, <br />
isLocked tinyint(1) NOT NULL, <br />
PRIMARY KEY (news_item) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;<br />
</source><br />
<br />
== Interacting with the database ==<br />
<br />
Linking the application with the database is the easy part and involves creating a DAO to handle the interaction. The DAO consists of functions to insert, update, delete and retrieve news items from the database. For more details please refer to the NewsDAO in the source. <br />
<br />
<br />
These functions are the basic essentials for any application. The connection is handled via the MySQL J/Connector with a new connection being made for each operation. Please note that a new connection for each operation is NOT the best method of implementation, a connection pool would be far more efficient so please do not use the code for production level software.<br />
<br />
== Building the model ==<br />
<br />
<br />
The model is based off the above datatable and implementing getters and setters for each field. The only interest choices of field type are the BIGINTs for each date. The choice was made to remove the need to format the date to put it into the database and do the same to take it out. The BIGINT is the time since epoc.<br />
Below is a sample extract from the NewsItem class which is used to represent an item object. This object extends SimpleCalendarModel and hence inherits all its’ fields.<br />
<br />
<source lang="java"><br />
public class NewsItem extends SimpleCalendarEvent {<br />
<br />
private int news_item;<br />
<br />
public int getNews_item() {<br />
return news_item;<br />
}<br />
<br />
public void setNews_item(int id) {<br />
news_item = id;<br />
}<br />
<br />
public NewsItem() {<br />
<br />
}<br />
}</source> <br />
<br />
<br />
== Building the UI ==<br />
<br />
<br />
<br />
=== Creating ZK Calendar dialogs ===<br />
<br />
<br />
We need two dialogs to handle the inserting, updating and deleting of items from the calendar. The createDialog will handle the creation of the items and the update dialog will handle the item updating and deletion.<br />
Calendar.zul<br />
<br />
The zul file is very simple, only containing the calendar and a window. The window is then wired to the controller, NewsController, using the MVC pattern. In addition to this the CreateDialog and UpdateDialog macro components are declared at the top of the file and included in the Window. The code is shown below.<br />
<br />
<source lang="xml"><br />
<?page title="News Calendar" contentType="text/html;charset=UTF-8"?><br />
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?><br />
<?component name="CreateDialog" macroURI="createEntry.zul"?><br />
<?component name="UpdateDialog" macroURI="updateEntry.zul"?><br />
<zk><br />
<window id="win" title="news" border="none" apply="org.zkoss.zknewsfeed.controllers.NewsController" height="100%" width="100%"><br />
<CreateDialog id="creationDialog" /><br />
<UpdateDialog id="updateDialog" /><br />
<br />
<calendars firstDayOfWeek="Sunday" timeZone="Taiwan=GMT+8" model="@{win$composer.getCalendarModel}" <br />
mold="default" id="cal"><br />
<br />
</calendars><br />
</window><br />
</zk></source><br />
<br />
<br />
=== Create Dialog ===<br />
<br />
<br />
The creation dialog is implemented using the MVC design patter and hence uses the controller EventCreationController. <br />
<br />
Firstly, we need to display the dialog and this is again handled using the MVC pattern. We implement the function <br />
<br />
<source lang="java"><br />
public void onEventCreate$cal(ForwardEvent event)</source><br />
<br />
within the NewsController the handle the creation of the creation dialog. The creation dialog in itself is simple and just consists of the minimal required fields. For the sake of simplicity we have cut down on the number of fields that the user can edit.<br />
<br />
<source lang="xml"><br />
<zk><br />
<window id="create_my_entry" title="Create Entry" border="normal" mode="popup" apply="org.zkoss.zknewsfeed.controllers.EventCreationController" visible="false"><br />
<grid><br />
<rows><br />
<row><br />
Item: <textbox id="tbText" cols="40" value="" /><br />
</row><br />
<row><br />
Type: <combobox id="cmbType"><br />
<comboitem label="Release" /><br />
<comboitem label="Small talk" /><br />
<comboitem label="Event" /><br />
</combobox><br />
</row><br />
<row><br />
Submit:<br />
<button id="btnAddNews" label="Create" width="36px" height="24px"/><br />
<button id="btnCancel" label="Cancel" width="36px" height="24px" /><br />
</row> <br />
</rows><br />
</grid><br />
</window><br />
</zk></source><br />
<br />
Upon creation of the dialog we need to provide it with some information, this is handled in the NewsController just after the creation of the dialog. Using setAttribute calls we can provide the dialog with the required event and calendar information as well as setting the fields within the dialog as shown below:<br />
<br />
<source lang="java"><br />
creationDialog.setAttribute("calendars", cal);<br />
creationDialog.setAttribute("calevent", evt);</source><br />
<br />
When creating the item, the dialog needs to add it to the database and the model, this is achieved using the DAO and the authors extra abstraction in the form of a class to handle the model.<br />
<br />
<source lang="java"><br />
DatabaseCalendarModel.dao.insertNewsItem(ni);<br />
DatabaseCalendarModel.cm.add(ni);</source><br />
<br />
<br />
=== Update Dialog ===<br />
<br />
<br />
The Update dialog is very similar to the Creation except it also contains a deletion method. In addition to this the Update dialog is passed the news item (which contains an id) so that it knows which item in the database to update.<br />
<br />
<source lang="xml"><br />
<zk><br />
<window id="update_my_entry" title="Update Entry" border="normal" mode="popup" apply="org.zkoss.zknewsfeed.controllers.EventUpdateController" visible="false"><br />
<grid><br />
<rows><br />
<row><br />
Item: <textbox id="tbText" cols="40" value="" /><br />
</row><br />
<row><br />
Type: <combobox id="cmbType"><br />
<comboitem label="Release" /><br />
<comboitem label="Small talk" /><br />
<comboitem label="Event" /><br />
</combobox><br />
</row><br />
<row><br />
Submit:<br />
<button id="btnUpdateNews" label="Create" width="36px" height="24px"/><br />
<button id="btnDeleteNews" label="Delete" width="36px" height="24px"/><br />
<button id="btnCancel" label="Cancel" width="36px" height="24px" /><br />
</row> <br />
</rows><br />
</grid><br />
</window><br />
</zk></source><br />
<br />
Apart from the use of a news item when setting the attribute there is no other real difference between the creation and update dialog in the way they work. Please explore the source code for more information on the dialog.<br />
<br />
<br />
== Loading the Calendar model from the Calendar ==<br />
<br />
<br />
<br />
=== The NewsController ===<br />
<br />
<br />
The retrieval of the model from the database is the most important part. The Window in calendar.zul is linked with the NewsController and hence we are able to set the calendar to retrieve its’ model from the same class. This is done by creating the function<br />
<br />
<source lang="java"><br />
public SimpleCalendarModel getCalendarModel() {<br />
DatabaseCalendarModel dcm = new DatabaseCalendarModel();<br />
piechart.setModel(dcm.getSimplePieModel());<br />
return dcm.getSimpleCalendarModel();<br />
}</source><br />
<br />
The constructor of the DatabaseCalendarModel reloads the model from the database. It really is this simple to implement the interaction between the calendar and the database.<br />
<br />
<br />
<br />
= Adding extra functionality =<br />
<br />
== Interacting with other ZK Components ==<br />
<br />
<br />
<br />
The power of ZK Calendar lies in the fact that it can be used to interact with other controls, in this example we are going to use a pie chart to display the types of news items and how many of each news items there are.<br />
<br />
<br />
<br />
=== Implementing a charting system ===<br />
<br />
The implementation is very easy, upon resetting the calendar’s model we need to also update the chart’s mode. This is not as complex as it seems, the most complex part is counting the types available. The code below demonstrates the creation of both models:<br />
<br />
<br />
<source lang="java"><br />
public DatabaseCalendarModel() {<br />
_simpleCalendarModel = new SimpleCalendarModel();<br />
_simplePieModel = new SimplePieModel();<br />
<br />
int counts[] = {0, 0, 0};<br />
<br />
java.util.List lst = dao.selectAll();<br />
<br />
for(int i=0; i<lst.size(); i++) {<br />
NewsItem ni = (NewsItem) lst.get(i);<br />
_simpleCalendarModel.add(ni);<br />
<br />
int colorPos = NewsColors.getColorPosition(ni.getContentColor());<br />
<br />
if(colorPos >-1) {<br />
counts[colorPos]++;<br />
}<br />
}<br />
<br />
for(int j=0; j<3; j++) {<br />
Integer count = new Integer(counts[j]);<br />
_simplePieModel.setValue(NewsColors._type[j], count);<br />
}<br />
}</source><br />
<br />
While looping through all the news items, the types are counted and then we construct the pie model for each color. Once this is implemented all we need is to give the pie chart the model. This is achieved by setting the pie charts model upon retrieval of the calendar’s model, as demonstrated below:<br />
<br />
<source lang="java"><br />
public SimpleCalendarModel getCalendarModel() {<br />
DatabaseCalendarModel dcm = new DatabaseCalendarModel();<br />
piechart.setModel(dcm.getSimplePieModel());<br />
return dcm.getSimpleCalendarModel();<br />
}</source><br />
<br />
== Source Code ==<br />
<br />
To obtain the source code please download the WAR file below and then extract it to a place of your choosing.<br />
<br />
[https://sourceforge.net/project/downloading.php?group_id=156140&filename=ZKNewsExamp.war&a=96720434 ZKNewsExamp.war]<br />
<br />
<br />
<comment>/smalltalks/zkcalendar/index.dsp</comment><br />
<br />
[[Category:ZK Calendar]]<br />
[[Category:JDBC]]<br />
{{Template:Smalltalk_Footer|<br />
|name=Potix Corporation<br />
}}</div>
Elton776