User:Christopherszu

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.