0

Share css files between pages

asked 2021-11-18 20:09:12 +0800

jballesteralejo gravatar image jballesteralejo
3 2

updated 2021-11-18 20:12:56 +0800

Hi.

I'm making a site with the aproach of Paged based Navigation as is mentioned in this chapter: www.zkoss.org/wiki/ZKEssentials/Chapter7:Navigationand_Templating.

I would like to share css between pages, but the only way to do this is adding at the begining of the *.zul the line and others like js, favicon, etc.

The thing is that I don't want to repeat all of this lines in all files. I try to make an <include src=""> with this lines inside but it's not possible.

Could anyone inspire me?

Thanks a lot.

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2021-11-22 16:40:12 +0800

MDuchemin gravatar image MDuchemin
2031 1 5
ZK Team

Hi there,

Assuming you want to declare the same JS / CSS / etc resources on every page of your project, I'd recommend making them into a lang-addon: https://www.zkoss.org/wiki/ZKClient-sideReference/Language_Definition

you can create a lang-addon xml file, declare it in zk.xml with the langage-config element https://www.zkoss.org/wiki/ZKConfigurationReference/zk.xml/Thelanguage-configElement and the content of the lang-addon will modify all zul pages loaded in this website.

You can globally declare JS with the javascript element, styles using stylesheet, etc. I recommend making all of these resources into separate files under a /resources folder, for easy management, then your lang-addon will look like:

<language>
<addon-name>myAwesomeAddon</addon-name>
<depends>zk</depends>
<language-name>xul/html</language-name>

    <!--VERSION IS OPTIONAL, JUST HERE IF YOU NEED TO KEEP YOUR OWN LANG-DEF TIDY BETWEEN VERSIONS-->

<version> 
    <version-class>org.zkoss.zul.Version</version-class>
    <version-uid>5.0.6</version-uid>
</version>

<javascript src="ressources/js/myScript.js"/>
    <javascript src="ressources/js/myOtherScript.js"/>
<stylesheet href="/ressources/css/mySheet.css" type="text/css"/>
<stylesheet href="/ressources/css/myOtherSheet.css" type="text/css"/>
</language?
link publish delete flag offensive edit

Comments

Note: content of the lang-addon are applied globally, but you can still have "page specific" resources that you load on a page by page basis the "normal" way

MDuchemin ( 2021-11-22 16:41:06 +0800 )edit
0

answered 2021-11-23 20:04:31 +0800

Bobzk gravatar image Bobzk
444 1 8

updated 2021-11-23 20:05:30 +0800

Can I ask why you don't want to create a separate CSS file and put something like :

<?link rel="stylesheet" type="text/css" href="css/mystyles.css"?>

at the start of each ZUL?

You (as you said) do it for JS and FAVICON.

Just interested in your reason.

link publish delete flag offensive edit

Comments

can't answer for OP specifically, but I can think of a number of good reasons: Not wanting to update all of the pages when you need to change your global resources imports, having a lot of pages, using lang-addon as a packaged module (to still include the resources when added into a project, etc)

MDuchemin ( 2021-11-24 18:12:16 +0800 )edit

Long story short, if you can achieve the same effect with a few line in lang-addon, or "one line times as many resources times as many pages" as exist in your website, lang-addon is just plain easier

MDuchemin ( 2021-11-24 18:13:52 +0800 )edit

Not want to update all of the pages and not repeat in all pages the same making the code cleaner.

jballesteralejo ( 2021-11-30 23:53:51 +0800 )edit
Your answer
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
1 follower

RSS

Stats

Asked: 2021-11-18 20:09:12 +0800

Seen: 13 times

Last updated: Nov 30

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