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
Using npm:
$ npm -i taminahx
Using haxelib:
$ haxelib install taminahx
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.
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.
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.
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();
}
}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 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;
}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);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 {
}
Browsers don’t support Custom Elements very well. But it'll be native soonly.
You can use Saas style in your web components
You can manage your translation using the LocalizationManager.
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);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>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>Full documentation is available here : http://tamina.io/doc/modules/Tamina.html