Difference between revisions of "User:Christopherszu"

From Documentation
Line 7: Line 7:
 
In the [https://www.zkoss.org/wiki/Small_Talks/2016/May/New_Approach_for_Building_Custom_ZK_Theme previous smalltalk], we've covered how to build ZK custom theme using the newly introduced ZK Theme Template. If you are not familiar with ZK Theme Template, we'd recommend a quick read through.
 
In the [https://www.zkoss.org/wiki/Small_Talks/2016/May/New_Approach_for_Building_Custom_ZK_Theme previous smalltalk], we've covered how to build ZK custom theme using the newly introduced ZK Theme Template. If you are not familiar with ZK Theme Template, we'd recommend a quick read through.
  
−
One situation we often face with custom theme is
+
Before ZK Theme Template came along, one sitution that often troubles ZK developers is trying to upgrade their ZK custom theme version to match the ZK version of the application.
  
−
hard/impossible to upgrade
+
There were no mechanism or tools provided officially, thus making it even harder.
  
−
with the help of git easy upgrade
+
But since we have built ZK Theme Temaplte with Git, switching versions becomes much easier as we leverage the versioning capabilities of Git.
  
−
we will show how to upgrade from older version of zk to newer version and the steps in between
+
In this smalltalk, we will show you how to build your custom based on any version of ZK, and how to switch to a different version.
−
 
 
−
limitation: merge conflict might not always popup
 
  
 
= Steps to Upgrading Your Custom Theme =
 
= Steps to Upgrading Your Custom Theme =
Line 26: Line 24:
 
</li>
 
</li>
 
<li>
 
<li>
−
theme version should match zk version
+
Since your theme version should match the ZK version of your application, we will assume ZK version is 7.0.2 initially and upgraded to 7.0.8 afterwards.
 
</li>
 
</li>
 
<li>
 
<li>
Line 80: Line 78:
  
 
= Known Difficulties =
 
= Known Difficulties =
−
Although this new approach gives ZK developers more freedom to create their own theme, there is still one inconvenience.
+
Although this new approach gives ZK developers more freedom to create their own theme, there are still some inconveniences.
 
<br/>
 
<br/>
−
Some ZK components have style attributes calculated by JavaScript and set directly on their corresponding DOM object, thus nullifying any conflicting styles defined in the CSS. We are currently still working on a better alternative than using the dreaded '''!important''' CSS syntax to override this issue.
+
ZK developers not familiar with Git might find all the Git commands intimidating, especially with pull and merge.
  
 
{{Template:CommentedSmalltalk_Footer_new|
 
{{Template:CommentedSmalltalk_Footer_new|

Revision as of 07:57, 14 June 2016

Documentationhristopherszu
hristopherszu
Author
Christopher Szu, Engineer, Potix Corporation
Date
Jun 21, 2016
Version
ZK 8.0.2

Introduction

In the previous smalltalk, we've covered how to build ZK custom theme using the newly introduced ZK Theme Template. If you are not familiar with ZK Theme Template, we'd recommend a quick read through.

Before ZK Theme Template came along, one sitution that often troubles ZK developers is trying to upgrade their ZK custom theme version to match the ZK version of the application.

There were no mechanism or tools provided officially, thus making it even harder.

But since we have built ZK Theme Temaplte with Git, switching versions becomes much easier as we leverage the versioning capabilities of Git.

In this smalltalk, we will show you how to build your custom based on any version of ZK, and how to switch to a different version.

Steps to Upgrading Your Custom Theme

Follow these steps to upgrade your own custom theme based on ZK's new theme template.
We will assume you have already cloned ZK Theme Template and ran the init script. Please refer to the previous smalltalk for more detail.

  1. At this stage, you should have a custom theme based on the master (newest) branch of ZK Theme Template.
  2. Since your theme version should match the ZK version of your application, we will assume ZK version is 7.0.2 initially and upgraded to 7.0.8 afterwards.
  3. in this demo, let's make two changes, one of them will cause git merge conflict when we perform the upgrade later
  4. We'll edit src/archive/web/zul/less/_zkvariables.less, the file where all the colors are defined.
  5. Change the background color of the ZK window component
    from 
    @windowBackgroundColor: #D9E5EF;

    to 

    @windowBackgroundColor: #FF8888;
  6. We'll edit src/archive/web/zul/less/_zkvariables.less, the file where all the colors are defined.
  7. Change the background color of the ZK window component
    from 
    @windowBackgroundColor: #D9E5EF;

    to 

    @windowBackgroundColor: #FF8888;
  8. If you build the theme right now, you'll get a ZK 7.0.2 custom theme. But since we want to upgrade to ZK xxx, let's just commit the changes for now. 
    ➜ git add -u
➜ git commit -m "some changes"
  9. Let's upgrade from current version to ZK xxx. 
    ➜ git tag -l
➜ git fetch vxxxx
➜ git merge vxxxx
  10. Run git pull upstream to receive the latest change in ZK template theme- for example CSS related bug fixes. This way, if your customization has any conflict with ZK's change, you will see git merge conflict messages.

Known Difficulties

Although this new approach gives ZK developers more freedom to create their own theme, there are still some inconveniences.
ZK developers not familiar with Git might find all the Git commands intimidating, especially with pull and merge.


Comments



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