0

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
15

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 :

	<desktop-config> 
	  	<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 -->		  	
	</desktop-config> 

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.

<language-addon>
  <addon-name>my-theme</addon-name>
  <language-name>xul/html</language-name>
  
  <component>
    <extends>button</extends>
    <component-name>myButton</component-name>
    <property>
      <property-name>sclass</property-name>
      <property-value>myButtonSClass</property-value>
     </property>
  </component>  
</language-addon>

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

<window>
  <myButton label="foo"/>
</window>

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 :

  <language-config>
    <addon-uri>/WEB-INF/lang-addon.xml</addon-uri>
  </language-config>

link publish delete flag offensive edit

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

Senthilchettyin gravatar image Senthilchettyin flag of India
2611 3 8
http://emrpms.blogspot.in...

Hi ansancle

Thank you very much of this guide. Using your guide, i have done small excercise
Here is the thread
http://www.zkoss.org/forum/listComment/19205-Look-and-Feel-ZK-is-Great-Enjoy

Regards
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

Follow

RSS

Stats

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