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

[Paul-Inge Flakstad]

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 Meier
Sent: 25. februar 2014 11:20
To: opencms-dev at opencms.org
Subject: [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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://webmail.opencms.org/pipermail/opencms-dev/attachments/20140225/3fde4e22/attachment.htm>