6 Replies Latest reply on Oct 3, 2007 8:27 PM by Sergey Smirnov

    Scriptaculous issues with 3.1.0

    Bradley Smith Master

      Hello,

      I was manually including Prototype and Scriptaculous JS libraries in my Facelets templates with Richfaces and Ajax4JSF in my application - it all worked fine. Now, after upgrading to Richfaces 3.1.0, the browser appears to be ignoring my calls to the Scriptaculous libraries.

      Can you discuss the whole topic of using Scriptaculous calls directly along with using Richfaces 3.1.0? I'm happy to use Scriptaculous included with Richfaces but it seems like only the Prototype library is being imported to my browser.

      Thanks,
      Brad Smith

        • 1. Re: Scriptaculous issues with 3.1.0
          Sergey Smirnov Master

          RichFaces included the libraries on demand. I.e. if there are referenced at least once. For example, if page has as Ajax, the prototype is there. If any effects, the Scriptaculous effects.js is included.

          As you know, Scriptaculous consists of several files. For the performance reason, we does not combine them together, but require to declare the one developer want to use.

          It is not a problem, if you reference to the library explicitly. The resource is cached if RichFaces references to it for its own purpose.

          To load the Scriptaculous library shipped with RichFaces, use <a4j:loadScript> tag.

          This is an example:

          <a4j:loadScriptsrc="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/controls.js" />
          <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/dragdrop.js" />
          


          Loading the prototype.js is much shorter because it has an alias:

          <a4j:loadScript src="resource://prototype.js" />
          


          P.S.
          * In the next releases we will create shortcuts for the Scriptaculous files, so the paths will be shorter
          * the special alias "scriptaculous.js" will load the whole bunch.
          * do not use you own copies of js file. In case they have different versions, the conflict inside the library is possible.
          * RichFaces 3.1.0 has been accomplished with the latest versions of prototype and scriptaculous
          prototype: 1.5.1.1
          scriptaculous: 1.7.1_beta3

          • 2. Re: Scriptaculous issues with 3.1.0
            Bradley Smith Master

            On first try, simply using loadScript isn't working.

            Possibly ordering of the loads is important. As you are aware, Scriptaculous includes code for automatically loading it's dependencies (controls.js, etc...). It will be nice when the alias for scriptaculous is available in a release.

            Thanks,
            Brad

            • 3. Re: Scriptaculous issues with 3.1.0
              Bradley Smith Master

              This ordering of loads seems to work (i.e., restore my javascript functions to working state):

               <a4j:loadScript src="resource://prototype.js"/>
               <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js" />
               <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/builder.js" />
               <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js" />
               <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/dragdrop.js" />
               <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/controls.js" />
               <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/slider.js" />
              
              


              • 4. Re: Scriptaculous issues with 3.1.0
                Bradley Smith Master

                One additional comment about doing this:

                <a4j:loadScript src="resource://prototype.js"/>
                 <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js" />
                 <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/builder.js" />
                 <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js" />
                 <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/dragdrop.js" />
                 <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/controls.js" />
                 <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/slider.js" />
                


                I'm noticing in practice that this results in 7 server-side requests to obtain what (arguably) should be static resources. The net effect is a slow-down in request-response time in the browser-user experience. I think offering an approach where these libraries are packaged as static resources in Richfaces web apps would simplify this and increase response time.

                Thoughts?

                Thanks,
                Brad Smith


                • 6. Re: Scriptaculous issues with 3.1.0
                  Sergey Smirnov Master

                  The aliases have been added to the trunk and upcoming 3.1.1

                  If you want to point to the scriptaculous as a whole library, you can say:

                  <a4j:loadScript src="resource://scriptaculous.js" />


                  No more lines are required. This command loads the integrated version of the library (i.e. all existing scriptaculous files except unittest.js are concatenated).

                  If you do not want to load the whole library, but only the particular file, for example, effect.js, you can use the following:

                  <a4j:loadScript src="resource://scriptaculous/effect.js" />



                  Some notes:

                  #1 loading the particular file does not make sense if you already load the whole version. It is just waisting time.

                  #2 the full path to the script rests the same. So, you can say:
                  <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js" />

                  or
                  <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js" />

                  #3 if you use #2, the notes #1 still makes sense.