dromero86 / halcon
Backend for tero
Installs: 10
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 0
Language:JavaScript
Type:project
Requires
- composer/installers: ~1.0
This package is not auto-updated.
Last update: 2025-04-03 01:58:52 UTC
README
HALCON UI FRAMEWORK
Halcon is a ui web framework for Javascript thought for the simple writing and fast resolution of problems.
About Halcon
Halcon esta escrito en javascript para soportar Webix 7+
Tareas de Halcon
- Gestionar la carga secuencial de recursos js, css, json, ico, jpg, png, gif, svg.
- Actuar como "Module loader" de recursos js simil RequireJS
- Generar un preloading mientras se cargan los recursos
- Evitar el cache agregando el parametro extra "refresh=hash()"
- Detectar el dispositivo para ajustarse a la visualizacion
- Generar metodos helper de url como base_url, req, GET, POST entre otros.
- Mostrar path con el stilo de java "sdk.my_dir.my_other_dir"
Vincular Halcon con Tero
$App->get('index', function () { $this->data->set("rand",rand(111,999) ); $this->parser->parse(BASEPATH."sdk/index.html", $this->data->get()); });
Configurar los sources
Editar el archivo 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" } ]
Definir un modulo
//defino un modulo javascript en la ruta sdk/app/settings/main.js app.define("app.settings.main", function() { //mi codigo javascript });
Invocar un modulo
app.require("app.settings.main", function() { //cuando sdk/app/settings/main.js este cargada se invocara esta funcion });
Definir un modulo que retorne un valor
//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; });
Invocar un modulo que retorna un valor
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 } });
Configurar la aplicacion
Editar el archivo 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" } }
Como configurar la session
- Debe establecer en sdk/config/app.json session.enable = true;
- Para customizar el widget del login debe editar "sys.widget.login"
- Para customizar el widget del logout debe editar "sys.widget.logout"
- Para obtener el objeto session utlice el helper "__.userInfo();"
Como crear abms en 2 pasos
Para utilizar esta caracteristica debe tener instalado y configurado en Tero
- Database
- Telepatia
- Schema
- Controladores de abm.php (*-update, *-row)
y tener creado el controlador "databot"
if($App->session->recv() !=FALSE ) { $App->schema->load(); $App->get("databot", function($rid="") { $this->schema->start_server(); }); }
Configurar el table list
Crear el archivo sdk/app/abm/personas_view.js Debe tener una tabla llamada 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')); });
Configurar el table form
Crear el archivo 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')); });