nk4um

Greetings,
Step 5 should read as follows :

Step 5. Usage
If you now want to use the ExtJS framework in another application, you import it in the relevant space, just like this :

<space>   <import>     <private />     <uri>urn:org:colruytit:servsupp:extjs:application</uri>   </import> </space>

You need to import the relevant rootspace uri, not the module uri ...
Regards,
Tom

Thanks Tom.  Useful stuff.

As regards this...

P.S. Serving your own Javascript Framework is often considered ''not done'' and ''only for testing purposes''. I just want to remark that NetKernel caches extremely well ... and further rest my case.

With your default configuration the browser will currently re-request the javascript sources each time and NetKernel will respond with a 304 Not Modified.  As you say, this is pretty efficient, but you can do even better.  Add this NetKernel response header...

<endpoint>   <grammar>     <!-- grammar to cover ExtJS source directories, for example -->     <!-- /ExtJS/ext-3.0.0/... -->     <groupname="path">res:/ExtJS/       <regex>ext-[0-9].[0-9].[0-9]/</regex>       <regextype="anything" />     </group>   </grammar>   <request>     <identifier>arg:path</identifier>   </request>   <headername="HTTP_CACHE_EXPIRES_DELTA_SECONDS">86400</header> </endpoint>

HTTP_CACHE_EXPIRES_DELTA_SECONDS is read by the HTTP Bridge - which sets the HTTP Cache-Control header to tell the browser to cache the resource for that many seconds.

You can also set the HTTP headers directly with a NetKernel header like

<header name="httpResponse:/header/Cache-Control">public, max-age=86400</header>

Your choice.

Peter

Step 4. Showing Off
It is perfectly OK to remove the line

<scripttype="text/javascript" src="/ExtJS/ext-3.0.0/plugins/uxmedia.js">   <!-- comment --></script>

from the file test.html. It refers to a plugin that I always use but is not relevant to this example.

Regards,
Tom

Greetings all,

Now that NK4 is available for us all, we can now start converting. I figured I might as well give the kick-off with a simple HOWTO. How to serve a javascript framework in NK4. I chose ExtJS to create the example, but I''ve tested it for other frameworks as well.

Here we go ...

Step 1. Setting up
My modules are in the projectmodules subdirectory which is on the same level in the directory structure as the modules subdirectory. Underneath it I created my application directory : urn.org.colruytit.servsupp.extjs

Step 2. module.xml
Since this does basically all of the work I provide it verbatim. Please change according to your own naming conventions where necessary :

<moduleversion="2.0">   <meta>     <identity>       <uri>urn:org:colruytit:servsupp:extjs</uri>       <version>3.0.0</version>     </identity>     <info>       <name>ExtJS</name>       <description>ExtJS Javascript Library</description>     </info>   </meta>   <system>     <dynamic />   </system>   <rootspaceuri="urn:org:colruytit:servsupp:extjs:application" name="ExtJS Javascript Library Public Space" public="true">     <import>       <uri>urn:org:colruytit:servsupp:extjs:dynamic-import</uri>     </import>     <mapper>       <config>         <endpoint>           <grammar>             <!-- grammar to cover ExtJS source directories, for example -->             <!-- /ExtJS/ext-3.0.0/... -->             <groupname="path">res:/ExtJS/               <regex>ext-[0-9].[0-9].[0-9]/</regex>               <regextype="anything" />             </group>           </grammar>           <request>             <identifier>arg:path</identifier>           </request>         </endpoint>       </config>       <space>         <fileset>           <regex>res:/ExtJS/.*</regex>         </fileset>       </space>     </mapper>   </rootspace>   <rootspaceuri="urn:org:colruytit:servsupp:extjs:test" name="ExtJS Javascript Library Test" public="true">     <import>       <uri>urn:org:colruytit:servsupp:extjs:dynamic-import</uri>     </import>     <mapper>       <config>         <endpoint>           <!-- the grammar in the above rootspace allows us to provide a -->           <!-- test application /ExtJS/test, without interfering with -->           <!-- the ExtJS javascript library sources themselves -->           <grammar>res:/ExtJS/test</grammar>           <request>             <identifier>res:/resources/test.html</identifier>           </request>         </endpoint>         <endpoint>           <grammar>res:/ExtJS/             <groupname="jsfile">               <regex>test_.*.js$</regex>             </group>           </grammar>           <request>             <identifier>res:/resources/[[arg:jsfile]]</identifier>           </request>         </endpoint>       </config>       <space>         <fileset>           <regex>res:/resources/.*</regex>         </fileset>         <import>           <private />           <uri>urn:org:netkernel:lang:xrl</uri>         </import>       </space>     </mapper>   </rootspace>   <rootspaceuri="urn:org:colruytit:servsupp:extjs:dynamic-import">     <fileset>       <glob>etc/system/SimpleDynamicImportHook.xml</glob>     </fileset>   </rootspace> </module>

Three rootspaces. I''m not going to discuss the last one, check out the tutorials to find out about the SimpleDynamicImportHook. The first rootspace defines the framework directories. You can address them as res:/ExtJS/ext-<version>/*. The second rootspace defines a small test application that can be used as res:/ExtJS/test. It''s purpose is to test if the framework is up and running.

Step 3. The rest
So, here''s how my directory structure looks when everything is in place :
projectmodules
projectmodules/module.xml
projectmodules/etc/system/SimpleDynamicImportHook.xml
projectmodules/ExtJS
projectmodules/ExtJS/ext-3.0.0/  <-- dump the framework version 3.0.0 in here
projectmodules/resources
projectmodules/resources/test.html
projectmodules/resources/test_application.js
projectmodules/resources/test_initializer.js

You can imagine that if you want to have version 2.2.1 of ExtJS as well, you just create another directory
projectmodules/ExtJS/ext-2.2.1/
and dump the framework version 2.2.1 in there.

Step 4. Showing Off
Just so you can reproduce everything, here''s the code of the relevant files :
test.html

<html>   <head>     <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />     <linkhref="/ExtJS/ext-3.0.0/resources/css/ext-all-notheme.css" rel="stylesheet" type="text/css" />     <linkhref="/ExtJS/ext-3.0.0/resources/css/xtheme-blue.css" rel="stylesheet" type="text/css" />     <scripttype="text/javascript" src="/ExtJS/ext-3.0.0/adapter/ext/ext-base.js">       <!-- comment --></script>     <scripttype="text/javascript" src="/ExtJS/ext-3.0.0/ext-all-debug.js">       <!-- comment --></script>     <scripttype="text/javascript" src="/ExtJS/ext-3.0.0/plugins/uxmedia.js">       <!-- comment --></script>     <scripttype="text/javascript" src="/ExtJS/test_application.js">       <!-- comment --></script>     <scripttype="text/javascript" src="/ExtJS/test_initializer.js">       <!-- comment --></script>   </head>   <body /> </html>

test_initializer.js

Ext.onReady(test.app.init, test.app);

test_application.js

/*--- Application ---*/ Ext.BLANK_IMAGE_URL = ''/ExtJS/ext-3.0.0/resources/images/default/s.gif''; Ext.namespace(''test''); test.app = function() {   // private space   // public space   return {     init: function() {       Ext.Msg.alert(''ExtJS 3.0.0'', ''Framework has been installed correctly'');     }   }; }();

Step 5. Usage
If you now want to use the ExtJS framework in another application, you import it in the relevant space, just like this :

<space>   <import>     <private />     <uri>urn:org:colruytit:servsupp:extjs</uri>   </import> </space>

And you can then use the exact same specifications as in the test.html example above.

Enjoy,
Tom

P.S. Serving your own Javascript Framework is often considered ''not done'' and ''only for testing purposes''. I just want to remark that NetKernel caches extremely well ... and further rest my case.
[/b]