Javascript Hell

[Sylvain Vieujot <sv...@apache.org>]

Hello everybody,

Right now, some components require you to include some javascript
libraries in your app, and to reference those libraries in your page's
header.
Just for your example webapp, the header looks like that :

    <!-- JSCook Menu -->

  <script language="JavaScript" src="jscookmenu/JSCookMenu.js" type="text/javascript"></script>
  <script language="JavaScript" src="jscookmenu/ThemeOffice/theme.js"></script>
  <link rel="stylesheet" href="jscookmenu/ThemeOffice/theme.css" type="text/css">
  <script language="JavaScript" src="jscookmenu/ThemeMiniBlack/theme.js"></script>
  <link rel="stylesheet" href="jscookmenu/ThemeMiniBlack/theme.css" type="text/css">
  <script language="JavaScript" src="jscookmenu/ThemeIE/theme.js"></script>
  <link rel="stylesheet" href="jscookmenu/ThemeIE/theme.css" type="text/css">
  <script language="JavaScript" src="jscookmenu/ThemePanel/theme.js"></script>
  <link rel="stylesheet" href="jscookmenu/ThemePanel/theme.css" type="text/css">

  <!-- JSCalendar -->
  <script language="JavaScript" src="jscalendar/popcalendar.js" type="text/javascript"></script>
  <link rel="stylesheet" href="jscalendar/jscalendar-WH/theme.css" type="text/css">
  <link rel="stylesheet" href="jscalendar/jscalendar-DB/theme.css" type="text/css">

  <!-- JSPopup -->
  <script language="JavaScript" src="jspopup/JSPopup.js" type="text/javascript"></script>


I'm now working on a new component that is javascript intensive too, and
that would require the include of at least 5 other .js files.

I think we should make this transparent to the user by :

     1. Including the scripts/css/whatever required in the myfaces.jar
        file as resources. So, we are sure we always have the .js file's
        version that works, and the developer just needs to include the
        myfaces lib. (this will grow a bite the size of the jar though).
     2. Have the components load the script/css/whatever in a standard
        way so that the page's developer doesn't need to bother, and so
        that the script/css/... is only included once in the page.

So, starting to think about a solution for this, here is my first idea :

- Have all those scripts/css/... as resources

- Make an additional servlet that the webapp developper would include in
his web.xml declarations, and that would be invoqued like :
    http://my.webserver.com/webapp/myFacesRessource?name=jspopup.js

        This is the only thing the webapp developper would have to do
        (declare the servlet), but I don't see how we could avoid that
        without writing the scripts/css/... into the page.
        Writing the scripts/css/... into the page would be bad for
        caching, and wouldn't allow us to use standard images with this
        facility.

- Have a facility so that the component's renderer can call something
like includeRessourceScriptLibrary(facesContext,"jspopup/JSPopup.js")
(similar helper for css, ...), and the code calling the above servlet is
automatically included in the page.

Any thoughts on this ?

Sylvain.