Difference between revisions of "User:Christopherszu"

From Documentation
(Blanked the page)
Line 1: Line 1:
 +
{{Template:Smalltalk_Author|
 +
|author=Christopher Szu, Engineer, Potix Corporation
 +
|date=Jun 21, 2016
 +
|version=ZK 8.0.2
 +
}}
 +
= Introduction =
 +
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
 +
 +
hard/impossible to upgrade
 +
 +
with the help of git easy upgrade
 +
 +
we will show how to upgrade from older version of zk to newer version and the steps in between
 +
 +
limitation: merge conflict might not always popup
 +
 +
= Steps to Upgrading Your Custom Theme =
 +
Follow these steps to upgrade your own custom theme based on ZK's new theme template.
 +
<br/>
 +
We will assume you have already cloned ZK Theme Template and ran the init script. Please refer to the [https://www.zkoss.org/wiki/Small_Talks/2016/May/New_Approach_for_Building_Custom_ZK_Theme previous smalltalk] for more detail.
 +
<ol style="list-style-type: lower-alpha;">
 +
<li>
 +
At this stage, you should have a custom theme based on the master (newest) branch of ZK Theme Template.
 +
</li>
 +
<li>
 +
theme version should match zk version
 +
</li>
 +
<li>
 +
in this demo, let's make two changes, one of them will cause git merge conflict when we perform the upgrade later
 +
</li>
 +
<li>
 +
We'll edit '''src/archive/web/zul/less/_zkvariables.less''', the file where all the colors are defined.
 +
</li>
 +
<li>
 +
Change the background color of the ZK window component <br/>
 +
from
 +
<source lang="text">
 +
@windowBackgroundColor: #D9E5EF;
 +
</source>
 +
to
 +
<source lang="text">
 +
@windowBackgroundColor: #FF8888;
 +
</source>
 +
</li>
 +
<li>
 +
We'll edit '''src/archive/web/zul/less/_zkvariables.less''', the file where all the colors are defined.
 +
</li>
 +
<li>
 +
Change the background color of the ZK window component <br/>
 +
from
 +
<source lang="text">
 +
@windowBackgroundColor: #D9E5EF;
 +
</source>
 +
to
 +
<source lang="text">
 +
@windowBackgroundColor: #FF8888;
 +
</source>
 +
</li>
 +
<li>
 +
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.
 +
<source lang="text">
 +
➜ git add -u
 +
➜ git commit -m "some changes"
 +
</source>
 +
</li>
 +
<li>
 +
Let's upgrade from current version to ZK xxx.
 +
<source lang="text">
 +
➜ git tag -l
 +
➜ git fetch vxxxx
 +
➜ git merge vxxxx
 +
</source>
 +
</li>
 +
<li>
 +
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.
 +
</li>
 +
</ol>
 +
 +
= Known Difficulties =
 +
Although this new approach gives ZK developers more freedom to create their own theme, there is still one inconvenience.
 +
<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.
 +
 +
{{Template:CommentedSmalltalk_Footer_new|
 +
|name=Potix Corporation
 +
}}
 +
 +
[[Category:Small Talk]]

Revision as of 06:27, 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.

One situation we often face with custom theme is

hard/impossible to upgrade

with the help of git easy upgrade

we will show how to upgrade from older version of zk to newer version and the steps in between

limitation: merge conflict might not always popup

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. theme version should match zk version
  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 is still one inconvenience.
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.


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=45000"