-
Notifications
You must be signed in to change notification settings - Fork 0
Quick start
Thomas Di Grégorio edited this page Jan 16, 2017
·
1 revision
First thing in you need to load Jilex core from your local copy or from github page. Jilex and though Flex XML syntax is more coherent with xHTML. You can, but it's not recomanded, use HTML(5) see Caveats.
(You can name the lib by specifying an id to the tag)
<script id="Jilex" src="https://devingfx.github.io/Jilex/dist/jilex-classes.src.js"></script>Then load packages by specifying xmlns attributes in the document, the root tag or any other else respecting xmlns specs.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jx="http://ns.devingfx.com/jxml/2015"
xmlns:my="my.*"
xmlns:local="*"
rest of attributes
>
<head>
<script id="Jilex" src="https://devingfx.github.io/Jilex/dist/jilex-classes.src.js"></script>
</head>
...Instanciate a component just with a tag with the package namespace and the class name:
<jx:Editor title="Coucou monde" onclick="do something" width="{ window.innerWidth / 2 }" />Create your own component extending HTML tags or existing components with es6 classes.
my.Button = class Button extends html.Button
{
get isMyButton(){return true} // pseudo constants
constructor() // with new my.Button()
{
return new Element( 'my:Button' ).extends( my.Button ); // return a brand new abstract tag well named
// and extended with this class.
}
Button() // called after node has been extended
{
... init stuff ...
}
// getters/setters
get label()
{
return super.innerText.replace( 'My super ', '' )
}
set label( v )
{
super.innerText = 'My super ' + v;
}
}and use it
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jx="http://ns.devingfx.com/jxml/2015"
xmlns:my="my.*"
xmlns:local="*"
rest of attributes
>
<head>
<script id="Jilex" src="https://devingfx.github.io/Jilex/dist/jilex-classes.src.js"></script>
</head>
<body>
<my:Button label="Coucou monde" onclick="do something" width="{ window.innerWidth / 2 }" />
</body>
</html>Because of XML namespace local declaration, the component is loaded automagically, the url come from namespace plus tag name: ./my/Button.js.