Frontend Library on Haxe


Keywords
js, web
License
MIT
Install
haxelib install Mage 0.3.6

Documentation

Mage

Haxe MVW Frontend Framework

Install

install this command

haxelib install Mage

add build.hxml

-lib Mage

Example

sample/SampleView.hx

package ;

@:build(mage.CompileCSS.generate(
'package sample.view;

div > label { color : red; }'
))
@:build(mage.CompileHTML.generate(
'package sample.view;

<div>
    <label for="email">email</label>
    <input(email) id="email" type="text"><br>
    <label for="user_id">userid</label>
    <input(userId) id="user_id" type="text"><br>
    <label for="pass">passowrd</label>
    <input(loginForm) id="pass" type="text"><br>
    <label for="confirm">confirm</label>
    <input id="confirm" type="text" mage-var="confirm"><br>
    <input(submit) type="submit">
</div>'
))
class CreateAccountFormView{}


@:build(mage.CompileCSS.generate(
'package sample.view2;

p { color : blue; }'
))
@:build(mage.CompileHTML.generate(
'package sample.view2;

<div>
    <p>{message}</p>
    <p>{name}</p>
</div>'
))
class SampleView{}

@:build(mage.CompileHTML.generate(
'package sample.base;

<div></div> '
))
class BaseView{}

sample/Main.hx

package ;

import js.html.InputElement;
import SampleView.BaseView;
import SampleView.CreateAccountFormView;

class Main{
    public static function main(){
        js.Browser.window.addEventListener("load",function(e){
            var base = new BaseView();
            js.Browser.document.body.appendChild(base.root);

            var sampleView = new SampleView({message:"hello!", name:"@nobkz"});
            base.root.appendChild(sampleView.root);

            var accountView = new CreateAccountFormView();
            base.root.appendChild(accountView.root);
        });
    }
}

build.hxml

-lib Mage
-js main.js
-main Main

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> first Sample Mage </title>
    <link href="mage.css" rel="stylesheet" type="text/css">
</head>
<body>
    <script src="main.js"></script>
</body>
</html>