Skip to content

Namespaces

Thomas Di Grégorio edited this page Jul 30, 2016 · 2 revisions

Namespaces

XML namespaces are entry point for tags <> classes linking. It defines in the same time a group for tags, a global object to put the classes into to be organised and an url entry point to load files from.

There are 2 type of namespaces, external and local. It depends of the notation, url or class path (package):

The local notation is a point syntax tree, that is replaced by folder tree when resolving: ./data/ the asterisk (*) means all package in the namespace, it's FLex legacy and ignored here. The current folder (and window global object) can be assigned to a namespace, here named "local" with just an asterisk.

If this namespace entry point has some grouped code to load, like compiled package, or namespace globals, Jilex try to load a package.js file at this urls:

Either the package.js defines all the component classes of the namespace's component, either Jilex will try to load a component later if don't exist yet based on node's namespace and localName.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jx="http://ns.devingfx.com/jxml/2015"
      xmlns:js="data.*"
      xmlns:theme="themes.*"
      xmlns:local="*">
    
    <theme:Chooser>
        <theme:Dark/>
    <theme:Chooser>
    
    <jx:Element/>
    <jx:Editor/>
    
    <local:MyComp text="Coucou"/>
    <local:MySuperComp/>
    <local:Button>Coucou</local:Button>
    
    <js:Array id="myData">
        <js:String>Coucou</js:String>
        <js:String>Monde</js:String>
        <js:Number>42</js:Number>
        <js:Boolean>false</js:Boolean>
        <js:Object>
            <js:String key="title">Coucou</js:String>
            <js:Number key="count">42</js:Number>
            <js:Boolean key="doAnything">false</js:Boolean>
        </js:Object>
        <js:json>{"go": { "ahead": "with", "your": "plain", "json": true} }</js:json>
        <js:RegExp modifier="g">(.*?)@(.*?).(.*?)</js:RegExp>
    </js:Array>
    
    <js:XML source="./datas/catalog.xml"></js:XML>
    
    
    default namespace :
    <Editor xmlns="http://ns.devingfx.com/jxml/2015">
        <Button label="Editor"/>
        <jx:TextInput value="monde"/>
    </Editor>
</html>

In the above exemple, 5 xmlns attribute are present, so are the 5 corresponding namespaces.

attribute entry point objects
xmlns="http://www.w3.org/1999/xhtml" dont load html.*
xmlns:jx="http://ns.devingfx.com/jxml/2015" http://ns.devingfx.com/jxml/2015/* jx.*
xmlns:js="data.*" ./data/* data.*
xmlns:theme="themes.*" ./themes/* theme.*
xmlns:local="*" ./* window.*

all jx components are included in package.js, so

jx.Element, jx.Editor, jx.Button, jx.TextInput

are used for

<jx:Element/> <jx:Editor/> <Editor xmlns="http://ns.devingfx.com/jxml/2015"> <Button/> <jx:TextInput/>

directly, and Jilex will try to load the rest:

  • ./themes/Chooser.xhtml
  • ./MyComp.xhtml > not found
  • ./MyComp.js
  • ./MySuperComp.xhtml
  • ./Button.js
  • ./js/package.js > set component list with urls,
  • ./js/Array.js
  • ./js/String.js
  • ./js/Number.js
  • ./js/Boolean.js
  • ./js/Object.js
  • ./js/json.js
  • ./js/RegExp.js
  • ./js/XML.js

With HTML5 documents you can't use self-closing tag you must close your tags <jx:Button></jx:Button>. And remember the browser will lowercase your tagnames so you have to be carefull of classes naming, as ns.Button and ns.ButtOn are correctly 2 javascript classes but the corresponding tags <ns:Button> and <ns:ButtOn> are the same lowercased html tag when parsed ...

@see Custom namespace