[opencms-dev] How to include Javascript and CSS files in DynamicFunction OpenCms 8.5.2 once?

[cms_questioner]

Paul-Inge Flakstad <flakstad <at> npolar.no> writes:

> 
> 
> Hi Thomas,
>  
> I’m sure you’ve read the Wiki article, which explains this for OpenCms 8
and up, using containerpages?
http://www.opencms-wiki.org/wiki/The_OpenCms_8_Demo_Template_Modules_in_Detail#Headinclude_tag_demo
(Not implying that it solves your issue, I’m simply referring you to the
only resource I know of regarding this.)
>  
> For anyone interested, I’d like to share how I went about this in OpenCms
7 at the time. This solution does not double-include anything, by the way,
and does not require containerpage: 
>  
> ·         Define two new properties, “js“ and “css” (each acting as a
propertyList, allowing for multiple values).
> ·         Make sure my template checks these properties and includes the
scripts/styles as needed. I did this by writing a class that extends
CmsJspActionElement so I can just call getCss() and getJavascript() methods.
> ·         Add necessary javascript and stylesheets “manually” by setting
these properties’ values on folders/files in the OpenCms workplace... AND/OR
...do it “automatically” by defining default property values in the module
definition in opencms-modules.xml.
>  
> I’ve been using this solution for a few years now, and my experience is
it’s working very well. 
>  
> For example, I use a custom “image gallery” module, which requires some
extra javascript. I added it as a default “js” property value in the
module’s section in opencms-modules.xml, so it’s included for all new “image
gallery” files. They also get a default CSS. This makes the editor’s job a
piece of cake: No need for her/him to even think, or even know about
javascript and styles – just create the gallery file and publish it!
>  
> Oh, and I also added another property, “js.blacklist”, for cases where I
need to avoid dynamic inclusion of a javascript that’s inherited from a
parent folder. (For example “image gallery” pages, which require a more
comprehensive version of a script that I’m using site-wide.)
>  
> An important aspect of this is that you get default styles, connected to
your module / resource type. AND these styles can easily be overridden
(which is great because you often just want to tweak a few specific style
definitions). For example, let’s say you’ve created a module with a default
stylesheet for your new resource type. Cool – it should look good straight
out of the box! Still, you might want to fine-tune some styles to integrate
the module seamlessly on specific sites. Well, provided your template
includes the CSS files in appropriate order, your site-specific stylesheet
can override particular styles in the default stylesheet (typically colors
and maybe fonts), while keeping the majority of the default styles
(typically stuff like dimensions, layout etc.).
>  
> Perhaps not an answer to your question per se, but a real-world example at
least. :)
>  
> Cheers,
> Paul
>  
> From: opencms-dev-bounces <at> opencms.org [mailto:opencms-dev-bounces
<at> opencms.org] On Behalf Of Hans MeierSent: 25. februar 2014 11:20To:
opencms-dev <at> opencms.orgSubject: [opencms-dev] How to include Javascript
and CSS files in DynamicFunction OpenCms 8.5.2 once?
>  
> 
> Hi everyone,
>  
> does OpenCms 8.5.2 provide a possibility to include Javascript or CSS
files(only once) in a DynamicFunction
> e.g. in the head like this in a schema file over the headincludes:
>  
> <xsd:annotation>        <xsd:appinfo>            <preview
uri="${previewtempfile}" />            <relations>
>                ...            </relations>           
<formatters>                ...            </formatters>           
<settings>            </settings>            <headincludes>
>                  ...            </headincludes>        </xsd:appinfo>   
</xsd:annotation>
>  
> What is the best way to solve this problem?
>  
> Greetings
> Thomas
> 
> 
> 
> _______________________________________________
> This mail is sent to you from the opencms-dev mailing list
> To change your list options, or to unsubscribe from the list, please visit
> http://lists.opencms.org/cgi-bin/mailman/listinfo/opencms-dev
> 
>

Hi Paul,

thanks for sharing your approach to solve the problem.

But anyway.

I want to post a short description what I did:

I wrote a Taglib, which gets a comma separated string as attribute 
(e.g. toInClude="script1.js,script2.js")

Then I split the string and store the entries (e.g. in a list).

These entries will be wrapped around a (<script> or <link>) tag and printed
out with a JSPWriter and stored in a HashMap.

Then I check if a script is already in the HashMap. If that is the case then
do nothing. Otherwise print out the entry with the JSPWriter.

e.g. for the case if I have more than one DynamicFucntion on a ContainerPage:
I have bound the HashMap to the ServletRequest to avoid that the scripts
will be included more than once.
 
req.setAttribute("SCRIPTS", scripts); 
scripts = (HashMap) req.getAttribute("SCRIPTS");

I just check with the bounded HashMap if a file is already included.

But I like your solution also. It's more flexible.

Greetings
Thomas