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.

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 theme 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. Remember your theme version should match the ZK version of your application. For this demo, we will assume ZK version is 7.0.2 initially and upgraded to 7.0.8 afterwards.
3. We will 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.