Including external css and javascript

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Including external css and javascript

bwallis42
I know about oxf.fr.js.custom.uri.*.* and oxf.fr.css.custom.uri.*.* that lets me specify some assets (css and javascript) that is included in my custom orbeon war to be inserted into the form reader and builder generated html. I've been using this up until now.

The CSS and Javascript I'm including is shared by a number of war files and I would like to move to serving it up from its own war file that efficiently serves static content, i.e. images, css and common javascript.

Is there a way I can add these paths to the form builder and runner pages in a way similar to above

So instead of ending up with a path like "/orbeon/3.1415/forms/CPF/assets/scripts/jquery.min.js" I instead have "/imStatic/scripts.jquery.min.js"

thanks,
brian...
Reply | Threaded
Open this post in threaded view
|

Re: Including external css and javascript

bwallis42
I found a way to do this that seems to work OK with some caveats on when the javascript might need to be available. I have a single javascript file included in my custom orbeon war file and it has the following in it

var head= document.getElementsByTagName('head')[0];

var jsfiles = ["/imStatic/scripts/jquery.min.js",
               "/imStatic/scripts/jquery-ui.min.js",
               "/imStatic/scripts/log4javascript.js",
               "/imStatic/scripts/util.js",
               "/imStatic/scripts/docview/logger-1.0.js",
               "/imStatic/scripts/docview/jquery.ui.eventbus.js"
    ];

var index;
for(index=0; index<jsfiles.length; ++index)
{
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.src= jsfiles[index];
    head.appendChild(script);
}

This seems to work ok in the simple tests I have done so far.

It would be better if I could just add these to the property file but this will do for now if it works in all cases.
Reply | Threaded
Open this post in threaded view
|

Re: Including external css and javascript

Alessandro  Vernet
Administrator
Hi Brian,

Indeed, paths starting with "/" are taken to be still relative to the Orbeon Forms web app, so the path is rewritten to add the context, and in some case a version so the resources can be aggressively cached by the browser.

Would adding a server name, as in https://myserver/path/to/my.css, work for you? Or we could understand a URI starting with "//" in a special way, but in general it is meant to mean "using the same scheme that was used for the page", so what follows is also a server name, as in //myserver/path/to/my.css. Or would you have some other suggestion on how this could be handled in a better way?

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
Reply | Threaded
Open this post in threaded view
|

Re: Including external css and javascript

bwallis42
Hi Alex,
  My requirement is quite simple as the scripts would always be accessible via the same server URL. So in that case for a form url like http://server:2727/orbeon/fr/...
//imScripts/js/script.js in oxf.fr.js.custom.uri becomes http://server:2727/imScripts/js/script.js
and
/imScripts/js/script.js  in oxf.fr.js.custom.uri becomes http://server:2727/orbeon/3.1415/forms/imScripts/js/script.js
(as it does now)

That would be neat and simple to understand I think. But if you are in there changing the code, allowing a third format with a full URL such as http://otherhost:4545/asite/somejs.js that just goes through untouched might be more generally useful in the long term (but of course XSS restrictions will come into play here).

thanks
brian...
Reply | Threaded
Open this post in threaded view
|

Re: Including external css and javascript

Alessandro  Vernet
Administrator
Hi Brian,

Got it. In the meantime, I've created this RFE:

https://github.com/orbeon/orbeon-forms/issues/3069

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet