README

HALCON UI 框架

Halcon 是一个专为 JavaScript 设计的 UI 网络框架，用于简化问题的编写和快速解决。

关于 Halcon

Halcon 使用 JavaScript 编写，以支持 Webix 7+

Halcon 的工作任务

• 管理 JS、CSS、JSON、ICO、JPG、PNG、GIF、SVG 等资源的顺序加载。
• 充当类似 RequireJS 的资源 "模块加载器"。
• 在加载资源时生成预加载。
• 通过添加额外的参数 "refresh=hash()" 来避免缓存。
• 检测设备以调整显示。
• 生成 URL 辅助方法，如 base_url、req、GET、POST 等。
• 以 Java "sdk.my_dir.my_other_dir" 风格显示路径。

将 Halcon 与 Tero 集成

$App->get('index', function ()
{
    $this->data->set("rand",rand(111,999) );
    $this->parser->parse(BASEPATH."sdk/index.html", $this->data->get());
});

配置源

编辑文件 sdk/config/sources.json

[
    { "tag" : "json"   , "cache": true, "url": "config/app.json"          }, 
    { "tag" : "icon"   , "cache": true, "url": "ui/img/favicon.ico"       },
    { "tag" : "link"   , "cache": true, "url": "sys/core/webix/webix.css" },
    { "tag" : "link"   , "cache": true, "url": "ui/css/font_awesome/css/font-awesome.min.css"   },  
    { "tag" : "link"   , "cache": true, "url": "ui/css/sidebar.css"       }, 
    { "tag" : "link"   , "cache": true, "url": "ui/css/waves.css"         },  
    { "tag" : "link"   , "cache": true, "url": "ui/css/admin.css"         }, 
    { "tag" : "script" , "cache": true, "url": "sys/core/webix/webix.js"  }, 
    { "tag" : "script" , "cache": true, "url": "sys/core/b64.js"          },
    { "tag" : "script" , "cache": true, "url": "sys/core/helper.js"       },
    { "tag" : "script" , "cache": true, "url": "sys/core/noback.js"       },  
    { "tag" : "script" , "cache": true, "url": "sys/core/waves.js"        },   
    { "tag" : "script" , "cache": true, "url": "sys/plugins/sidebar.js"   },   
    { "tag" : "script" , "cache": true, "url": "sys/plugins/mainbar.js"   },   
    { "tag" : "script" , "cache": true, "url": "sys/plugins/datalist.js"  },   
    { "tag" : "script" , "cache": true, "url": "sys/plugins/formview.js"  },    
    { "tag" : "script" , "cache": true, "url": "sys/plugins/cards.js"     },  
    { "tag" : "script" , "cache": true, "url": "app/main.js"              }  
]

定义模块

//defino un modulo javascript en la ruta sdk/app/settings/main.js
app.define("app.settings.main", function()
{ 
	//mi codigo javascript

});

调用模块

app.require("app.settings.main", function()
{ 
	//cuando sdk/app/settings/main.js este cargada se invocara esta funcion

});

定义返回值的模块

//defino un modulo javascript en la ruta sdk/app/settings/main.js
app.define("app.settings.main", function()
{ 
	var persona = {
		nombre:"John Doe",
		edad: 35
	};
	
	return persona;
});

调用返回值的模块

 
app.require("app.settings.main", function(persona)
{ 
	//cuando sdk/app/settings/main.js este cargada se invocara esta funcion
	
	console.log(persona); // { "nombre": "John Doe", "edad":35 }

});

配置应用程序

编辑文件 sdk/config/app.json

{
	"name"    : "El nombre de la aplicacion",
	"jsonp"   : false, 
	"domain"  : "el servidor donde esta alojada la aplicacion",  
	"session" :
	{
		"enable" : false, //si es true se habilita la session
		"login"  : "la url de autenticacion"  ,
		"check"  : "la url que checquea si esta con session activa" ,
		"logout" : "la url de deslogueo" ,
		"key"    : "la clave de localstorage" 
	} 
}

如何配置会话

• 必须在 sdk/config/app.json 中设置 session.enable = true;
• 要自定义登录小部件，请编辑 "sys.widget.login"
• 要自定义注销小部件，请编辑 "sys.widget.logout"
• 要获取会话对象，请使用辅助函数 "__.userInfo();"

如何用两步创建 ABMS

要使用此功能，您必须已安装并配置 Tero

• 数据库
• Telepatia
• 模式
• ABM.php 控制器（*-update，*-row）

并创建 "databot" 控制器

if($App->session->recv() !=FALSE )
{ 
    $App->schema->load();

    $App->get("databot", function($rid="")
    {   
        $this->schema->start_server(); 
    });
}

配置表格列表

创建文件 sdk/app/abm/personas_view.js。必须有一个名为 personas 的表格

app.define("app.abm.personas_view",function()
{  
    webix.ui
    ({
        id     : 'content'  ,
        view   : "datalist" ,
        title  : "TITULO DEL ABM" ,
        form   : "app.abm.personas_form", //vinculo para cuando seleccione un registro o cuando agregue uno nuevo
        store  : "objeto_interno_con_el_nombre_de_tabla" ,
        columns: [ 
            {id:"nombre"  , header:"Nombre" , sort: 'string' , fillspace: true }, 
            {id:"edad"    , header:"Edad"   , sort: 'string' , adjust: true }                
        ],
        query : { 
            select:
            {
                from:"clientes", 
                field: [ "id","nombre","edad" ]  
            } 
        } 
    },
    $$('content'));
});

配置表格表单

创建文件 sdk/app/abm/personas_form.js

app.define("app.abm.personas_form",function()
{  
    webix.ui
    ({
        id       : 'content',
        view     : "formview",
        dataview : "app.abm.personas_view",
        update   : "personas-update",
        source   : {"action": "personas-row","id": __.defAttr("personas", 0, "id" ) }, 
        store    : "personas",
        title_set: __.defAttr("personas", "", "nombre" ),
        title_add: "NUEVA PERSONA",
        elements :
        {
            padding:25,
            rows:
            [ 
                {
                    cols:
                    [
                        {
                            "name": "nombre",
                            "view": "text",
                            "label": "Nombre",
                            "labelPosition": "top"
                        },
                        { width: 25 },
                        {
                            "name": "edad",
                            "view": "text",
                            "label": "Edad",
                            "labelPosition":"top"
                        }    
                    ] 
                },
		{}  
            ]
        } 
    },
    $$('content'));

});