include css file in zuml file?

asked 2008-07-18 17:58:33 +0800

irteza1 gravatar image irteza1
63 1

how to include/link an external css file in a zuml(zk) file. I've searched a lot on internet, but i was unable to get required result from any source ????

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2008-07-18 20:47:58 +0800

martosfre gravatar image martosfre

Hello irteza1, Zk manages two forms to includes javascript inside your page:

1. The first form is using the tag <link rel="stylesheet" href="/css/mystyles.css"/>
2. The second form is using the tag <style src="/my.css"/>

Later, you using the attribute sclass on a object, for example:

<button id='btnPrueba' sclass='styleName'/>

Greeting, god bless you

link publish delete flag offensive edit

answered 2008-07-19 19:24:20 +0800

irteza1 gravatar image irteza1
63 1

thanx for response, mean first i have to include cssfile <style src="/mycssfile.css"/> then
i have to include sclass for every component explicitly, like if i declare a "button" style,then i can give it in sclass="button" in each buuton for sae style.

link publish delete flag offensive edit

answered 2008-07-23 13:03:04 +0800

ansancle gravatar image ansancle
317 9

That is one way to do it another way to include stylesheets is in zk.xml add a theme-uri entry for each style sheet :

	  	<theme-uri>/stylesheets/DHCommonUIStyleSheet.css</theme-uri>  		<!--  common styles and images are setup in commonui -->
	  	<theme-uri>/stylesheets/DHCommonAudioStyleSheet.css</theme-uri>  		<!--  common styles and images are setup in commonui -->	  	
	  	<theme-uri>/stylesheets/DHDesktopUIStyleSheet.css</theme-uri>  	<!--  Specialized styles go in here for the desktop ui -->		  	

Also, if you want to have the same style for all buttons in your application you can create a lang-addon.xml file as described in the zk documentation and define your own button that uses the style you want.

Here is a sample entry from lang-addon.xml where I define a new button "myButton" that uses myButtonSClass as defined in one of my stylesheets.


Now, inside of your .zul code you can do the following :

  <myButton label="foo"/>

And it will use your sclass as defined in the lang-addon.xml file.

Note, after creating the lang-addon.xml you need to add the following to your zk.xml file :


link publish delete flag offensive edit

answered 2012-04-17 06:19:35 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8

Hi ansancle

Thank you very much of this guide. Using your guide, i have done small excercise
Here is the thread

Senthil M

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2008-07-18 17:58:33 +0800

Seen: 2,100 times

Last updated: Apr 17 '12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More