How to access resources file (css, js files from theme folder) and get link from FTL?

Question

I have "Neon - Bootstrap Admin Theme" (https://themeforest.net/item/neon-bootstrap-admin-theme/6434477 ). My duty is integrating this bootstrap theme into Ofbiz 16.11.02. I tried 3 days, but I stucked.

This is my full source code: https://gitlab.com/Donhu/ofbiz I have been create a new theme, named it is "BOOTSTRAP", based on theme "TOMAHAWK".

I don't know how to access static resource files (css, js, image)

I have add more information to https://gitlab.com/Donhu/ofbiz/blob/master/framework/common/config/CommonEntityLabels.xml https://gitlab.com/Donhu/ofbiz/tree/master/themes/bootstrap (first step, I cloned from TOMAHAWK).

These files (https://gitlab.com/Donhu/ofbiz/tree/master/themes/bootstrap/webapp/bootstrap/assets) come from "Neon - Bootstrap Admin Theme". I don't know how to access, how to get its relative links, and put inside FTL file (for example: https://gitlab.com/Donhu/ofbiz/blob/master/themes/bootstrap/template/Header.ftl#L47 Current, it doesn't work)

<#if layoutSettings.VT_HDR_JAVASCRIPT?has_content>
    <#list layoutSettings.VT_HDR_JAVASCRIPT as javaScript>
        <script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>" type="text/javascript"></script>
    </#list>
</#if>

My question: How to access static files from customize theme folder, put it to FTL file?

Michael Brohl · Accepted Answer · 2017-06-15T09:21:12.597

The file paths to the theme ressources are stored in the theme data, for example:

<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.js" sequenceId="05"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" sequenceId="07"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/fjTimer/jquerytimer-min.js" sequenceId="09"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/jquery.maskedinput-1.3.1.min.js" sequenceId="10"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/jeditable/jquery.jeditable.js" sequenceId="11"/>
<VisualThemeResource visualThemeId="TOMAHAWK" resourceTypeEnumId="VT_HDR_JAVASCRIPT" resourceValue="/images/jquery/plugins/validate/jquery.validate.min.js" sequenceId="12"/>

In this case, all Javascript ressources for the header are stored under the same resourceTypeEnumId with different sequenceId's to control the load sequence.

You can then access these ressources in your ftl templates, for example the Header.ftl in the Tomahawk theme:

<#if layoutSettings.VT_HDR_JAVASCRIPT?has_content>
    <#list layoutSettings.VT_HDR_JAVASCRIPT as javaScript>
        <script src="<@ofbizContentUrl>${StringUtil.wrapString(javaScript)}</@ofbizContentUrl>" type="text/javascript"></script>
    </#list>
</#if>

They are rendered in the header like this:

<script src="/images/jquery/plugins/asmselect/jquery.asmselect-1.0.4a-beta.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/fjTimer/jquerytimer-min.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/jquery.maskedinput-1.3.1.min.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/jeditable/jquery.jeditable.js" type="text/javascript"></script>
<script src="/images/jquery/plugins/validate/jquery.validate.min.js" type="text/javascript"></script>

The ressources must be stored in the /themes/theme-name/webapp/theme-name/ subfolders like /images, /css etc.. Of course you can specify a different subfolder layout and change the VisualThemeResource entries accordingly.

If there is no VISUAL_THEME UserPreference record for the current user, the default theme is taken from the general.properties file. Here you can set your new default theme:

VISUAL_THEME=TOMAHAWK

Thank you. But my webapp still load TOMAHAWK as selected theme in session, therefore, all of my effort is nothing. How to make webapp set BOOTSTRAP as selected theme in session? — Vy Do, Jun 15 '17 at 09:09
I added the default theme entry part in my answer, thanks Deepak :-) — Michael Brohl, Jun 15 '17 at 09:21

How to access resources file (css, js files from theme folder) and get link from FTL?

1 Answers1