tamina library for haxe
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
doc
haxe
org/tamina
test
.gitignore
CustomElements.min.js
Main.hx
README.md
build.hxml
haxelib.json
main.js
package.json
test.html
yuidoc.json

README.md

TAMINA NPM version

TAMINA IS A FAST, SMALL, AND FEATURE-RICH HAXE LIBRARY

It makes things like Web Components, Custom Elements, Event handling, Proxy, Assets Loading, i18n, and XHR much simpler.

Inspired by AngularJS and Flex frameworks, Tamina is a low level toolset for building large scaled web applications. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs

Installation

Using npm:

$ npm -i taminahx

Using haxelib:

$ haxelib install taminahx

Features

Html Applications and web components

Tamina defines a default, or Application, container that lets you start adding content to your application without explicitly defining another container.

package ;
 
import org.tamina.html.component.HTMLApplication;
 
class Main extends HTMLApplication{
 
    private static var _instance:Main;
 
    public function new():Void {
        super();
        loadComponents();
    }
 
    public static function main():Void {
 
        _instance = new Main();
    }
 
}

HTMLApplication has a loadComponents() function that registers ALL components used by the application. Thanks to macros, components are automatically registered while compiling. So there’s no need to do it manually or with the Reflexion API at runtime.

HTMLComponent

x-tag

Since the last article about HTMLComponent, some things changed. HTMLComponent now extends HTMLElement. That means we can deal with components in an easier way (like DOM elements).

The other change is it officially supports Custom Elements. It’s now possible to instantiate HTMLComponent in their view.

<div>
    Hello
</div>
 <button onclick="this.host.displaySomething()">go</button>
<html-view-othertestcomponent data-id="_otherComponent"></html-view-othertestcomponent>

You can access to the component host using "this.host" on your node element.

Life cycle

Our component life cycle is the same as Custom Elements.

  • public function createdCallback() // Called after the element is created.

  • public function attachedCallback() // Called when the element is attached to the document.

  • public function detachedCallback() // Called when the element is detached from the document.

  • public function attributeChangedCallback(attrName:String, oldVal:String, newVal:String) // Called when one of attributes of the element is changed.

You can override them if you need it.

Skin Parts

Another usefull feature is Skin Part support. This metadata is used to reference an element from his view. You don’t need to do it yourself anymore, A macro will automatically do it while compiling. This technique was inspired by Flex4 Spark components architecture.

@view('html/view/TestComponent.html')
class TestComponent extends HTMLComponent {
 
    @skinpart("")
    private var _otherComponent:OtherTestComponent;
 
    override public function attachedCallback() {
        _otherComponent.displayHellWorld();
    }
 
}

Host reference

You can access your host component from your view with "this.host" on your node element. In this example a click on the button will call the host's displaySomething function.

<div>
    Hello
</div>
 <button onclick="this.host.displaySomething()">go</button>
<html-view-othertestcomponent data-id="_otherComponent"></html-view-othertestcomponent>

Data Binding

Data Binding is now only available from your Haxe code. In this example, every change on _data.message will update 1000 SpanElement innerHTML property.

class TestComponent extends HTMLComponent {

    @skinpart("") private var _otherComponent:OtherTestComponent;
    @skinpart("") private var _messageSpan:SpanElement;

    private var _rand:Float;
    private var _data:TestData;
    private var _index:Int;

    override public function attachedCallback() {
        _otherComponent.displaySomething();
        _rand = Math.random();
        _index = 0;
        _data = {
            message: "click to update",
            name:"me"
        };

        var watcher = BindingUtils.bindProperty(_data, "message", _messageSpan, "innerHTML");
        for (i in 0...1000) {
            var element = Browser.document.createSpanElement();
            BindingUtils.bindProperty(_data, "message", element, "innerHTML");
            this.appendChild(element);
        }

        BindingUtils.remove(watcher);

    }

    private function toto():Void {
        trace("clicked " + _rand);
        _index++;
        _data.message = "clicked " + _index + " times";
    }

}

typedef TestData = {
    var message:String;
    var name:String;
}

Instance Factory

To instantiate dynamically a component from your application, like an itemRenderer for example, you can use a Factory available in HTMLComponent.

public static function createInstance<T>(type:Class<T>):T;
var myComponent = HTMLComponent.createInstance(TestComponent);
Browser.document.body.appendChild(myComponent);

Intellij Code Template

You can configure your favorite IDE to use a HTMLComponent Code Template and increase your productivity.

package ${PACKAGE_NAME};

import org.tamina.html.component.HTMLComponent;

#set($path = $PACKAGE_NAME.replace(".", "/"))
/**
* @class ${NAME}
**/
@view("$path/${NAME}.html")
class ${NAME} extends HTMLComponent {
    
}

Polyfills

Browsers don’t support Custom Elements very well. But it'll be native soonly. caniuse To make them compatible we used webcomponent.js. polyfill An optimized and minified version of 15Kb is available on our CDN here.

JS Typing enhancement

Tamina give a set of new class and abstract to enhance javascript types, like Url, Scheme, Event, HTTPMethod, and MimeType

Saas support

You can use Saas style in your web components

i18n

You can manage your translation using the LocalizationManager.

Initialization

You can initialize the LocalizationManager using an array of ITranslation.

interface ITranslation {
    public var fieldName:String;
    public var locale:Locale;
    public var value:String;
 
}

The Json data :

{
    "translations": [{
 
        "fieldName": "title",
        "value": "Mon Application",
        "locale": "fr_FR"
 
    }, {
 
        "fieldName": "sub_title",
        "value": "Haxe power",
        "locale": "fr_FR"
 
    }]
}

And an example of initialization :

LocalizationManager.instance.setTranslations(translations);

Usage

To use a translation from your application, you just have to call the LocalizationManager.

var myTitle = LocalizationManager.instance.getString("title");

Or from the view :

<div>
     <a href="#" class="btn btn-prev">
     {{ title }}
     </a>
</div>

Full Example

The main page : main.html

<body>
 
<script src="main.js"></script>
<html-view-testcomponent id="_myComponent"></html-view-testcomponent>
<script>
    var translations = [{
 
        fieldName: 'title',
        value: 'Hello',
        locale: 'fr_FR'
 
    }]
 
    Main.init(translations);
</script>
</body>

The main application, Main.hx, compiles main.js

package;
 
import org.tamina.i18n.LocalizationManager;
import org.tamina.i18n.ITranslation;
import html.view.TestComponent;
import org.tamina.html.component.HTMLApplication;
 
@:expose class Main extends HTMLApplication{
 
    private static var _instance:Main;
 
    private var _myComponent:TestComponent;
 
    public function new():Void {
        super();
    }
 
    public static function init(translations:Array<ITranslation>):Void{
        LocalizationManager.instance.setTranslations(translations);
        _instance.loadComponents();
    }
 
    public static function main():Void {
        _instance = new Main();
    }
}

TestComponent.hx with a typed SkinPart , and an override of attachedCallback.

package html.view;
import org.tamina.html.component.HTMLComponent;
 
@view('html/view/TestComponent.html')
class TestComponent extends HTMLComponent {
 
    @skinpart("")
    private var _otherComponent:OtherTestComponent;
 
    override public function attachedCallback() {
        _otherComponent.displaySomething();
    }
 
}

TestComponent.html

<div>
    {{title}}
</div>
 
<html-view-othertestcomponent data-id="_otherComponent"></html-view-othertestcomponent>

OtherTestComponent.hx and OtherTestComponent.html

<div>
    Happy
</div>
package html.view;
import org.tamina.html.component.HTMLComponent;
 
@view('html/view/OtherTestComponent.html')
class OtherTestComponent  extends HTMLComponent {
    public function displaySomething():Void{
        trace("yarglaaaa");
    }
}

The Result :

<body>
 
<script src="release/tamina.js"></script>
 
<html-view-testcomponent>
 
<div>
    Hello
</div>
 
<html-view-othertestcomponent data-id="_otherComponent">
 
<div>
    Happy
</div>
 
</html-view-othertestcomponent>
</html-view-testcomponent>
 
</body>

Documentation

Full documentation is available here : http://tamina.io/doc/modules/Tamina.html