En este artículo, quiero compartir mi experiencia de deshacerme del terrible dolor de cabeza que surgió al desarrollar una aplicación web para un dispositivo pequeño pero muy poderoso. Pero primero, unas palabras sobre el origen de este dolor: el diseño.
El diseño actual es uno de los componentes esenciales de cualquier producto, y para los sitios web y las aplicaciones web es la parte más importante. Todo lo que hay debajo del capó está oculto a los ojos del cliente. Al usuario no le interesa la genialidad de la ejecución del motor o la singularidad de la arquitectura: no hace falta decir que el programa debe funcionar de forma fiable y segura. El usuario moderno necesita una interfaz gráfica elegante.
Anteriormente, la creación de una interfaz de este tipo causaba un serio dolor de cabeza a los programadores, pero ahora se han lanzado una gran cantidad de marcos y bibliotecas diferentes para deshacerse de ella. Parecería - ¡hurra, el problema está resuelto! Sin embargo, ahora nos enfrentamos a otra pregunta: ¿qué medicamento elegir: pentalgin o panadol?
La pregunta no es fácil y, al final, tú decides. Te contaré mi cura: la biblioteca EasyUI para crear aplicaciones web de una sola página (SPA) completas y basadas en jQuery, Angular, Vue y React.
Mi relación con EasyUI comenzó hace aproximadamente dos años, cuando nuestro equipo comenzó a desarrollar software para un sistema de administración de energía y su distribución inteligente entre los consumidores. El dispositivo de control tenía Linux a bordo y, además de la distribución de energía, tenía que intercambiar datos con varios dispositivos periféricos, poder controlarlos y también recibir lecturas de una gran cantidad (hasta varios cientos) de sensores. Las reglas de control podrían cambiarse, permitiendo al usuario personalizar el funcionamiento de todo el complejo para realizar las tareas necesarias.
: ssh, snmp, redfish, BACnet, http, -. , . , .
- , . (« Excel'», — ), (, ..) , . .
, - , , . . Bootstrap , . , . , , .
, EasyUI . , , , .
, EasyUI?
, EasyUI , jQuery, Angular, Vue React. , jQuery.
javascript. EasyUI jQuery , HTML- . HTML- , .
, : 100 , . 100 , . , , . EasyUI .
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true"
style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true"
style="height:100px;"></div>
<div data-options="region:'east',title:'East',split:true"
style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true"
style="width:100px;"></div>
<div data-options="region:'center',title:'center title'"
style="padding:5px;background:#eee;"></div>
</body>
, EasyUI javascript:
$('body').layout({fit: true}).layout('add', {
region: 'north', title: 'North Title', split: true, height: 100
}).layout('add', {
region: 'south', title: 'South Title', split: true, height: 100
}).layout('add', {
region: 'east', title: 'East Title', split: true, width: 100
}).layout('add', {
region: 'west', title: 'West Title', split: true, width: 100
}).layout('add', {
region: 'center', title: 'enter Title', split: true, widht:100,
style: {padding: 5, background: '#eee'}
});
EasyUI :
easy, ? javascript , .
?
EasyUI, : (layout), (panel), (menu, menubutton), (tab), (accordion), (calendar), (datagrid), (propertygrid), (datalist), (tree), (dialog), (form) (validatebox, textbox, passwordbox, maskedbox, combobox, tagbox, numberbox, datetimebox, spinner, slider, filebox, checkbox, radiobutton) — . , . Extention, , , (Ribbon):
EasyUI . . , . , , , . . , , themes . , , , UI .
EasyUI
( ) HTTP. , , .
HTTP
(function($) {
$.fn.httpConfDlg = function(icon) {
var title = _("HTTP Configuration"), me;
var succ = _(
"HTTP properties have been changed. " +
"You need to re-connect your browser " +
"according to the new properties."
);
var errcode = "System returned error code %1."
var errset = _(
"Can't set HTTP configuration. " + errcode
);
var errget = _(
"Can't get HTTP configuration. " + errcode
);
var allowed = $.SMR_PRIVILEGE.CHECK(
$.SMR_PRIVILEGE.CHANGE_NETWORK_CONFIGURATION
);
var buttons = [];
if (allowed) {
buttons.push({
okButton: true,
handler: function() {
var ho = $(this.parentElement).api({
fn: $.WAPI.FN_SET_HTTP_PROPERTIES,
param: {
httpPort: parseInt($('#httpPort').textbox('getValue')),
httpsPort: parseInt($('#httpsPort').textbox('getValue')),
forceHttps: $.HpiBool($('#forceHttp')[0].checked)
},
before: function() {
$('body').css('cursor', 'wait');
},
done: function() {
$('body').css('cursor', 'default');
me.dialog('close');
},
error: function(err) {
if (err.RC == $.WAPI.RC_BAD_RESPONSE) {
$.messager.alert(
title,
$.fstr(errset, err.IC),
'error'
);
return false;
} else if (err.RC == 1003) {
ho.api('drop');
$.messager.alert(title, succ, 'info', function() {
$('#sinfo').session('logout');
});
return false;
}
return true;
}
});
}
});
}
buttons.push({cancelButton: true});
return this.each(function() {
document.body.appendChild(this);
me = $(this).append(
'<div id="httpSetting" style="padding: 10px 30px">' +
$.fitem('httpPort', _("HTTP port")) +
$.fitem('httpsPort', _("HTTPS port")) +
$.fcheck('forceHttp', _("Force HTTPS for Web Access")) +
'</div>'
);
$('#httpPort').textbox({
type: 'text', width: 60, disabled: !allowed
});
$('#httpsPort').textbox({
type: 'text', width: 60, disabled: !allowed
});
if (!allowed) $('#forceHttp').attr('disabled', 'disabled');
me.mdialog({
title: title,
iconCls: icon,
width: 320,
height: 180,
modal: true,
buttons: buttons,
onOpen: function() {
var ho = $(this).api({
fn: $.WAPI.FN_GET_HTTP_PROPERTIES,
receive: function(res) {
$('#httpPort').textbox('setValue', res.httpPort);
$('#httpsPort').textbox('setValue', res.httpsPort);
if (res.forceHttps == 1) {
$('#forceHttp').attr('checked', 'checked')
} else {
$('#forceHttp').removeAttr('checked')}
},
error: function(err) {
if (err.RC == $.WAPI.RC_BAD_RESPONSE) {
$.messager.alert(
_("HTTP"),
$.fstr(
errget,
err.IC
),
'error'
);
me.dialog('close');
return false;
}
me.dialog('close');
return true;
}
});
}
});
});
};
})(jQuery);
EasyUI jQuery ( $('div').httpConfDlg(http_icon)), this.each().
: OK Cancel. , OK . , , HTTP , Cancel (, EasyUI , — . , , ). Cancel . OK , AJAX-. JSON , , (callback).
, this, : , . EasyUI textbox . , .
, : , , , , ( ). , AJAX HTTP. , . , .
OK -, , AJAX- . ( done). , , . , , . .
, .
$.fitem('httpPort', _("HTTP port")) HTML , httpPort (label) HTTP port. _() , . EasyUI $('#httpPort').textbox({type: 'text', width: 60, disabled: !allowed}); EasyUI textbox. $('#httpPort').textbox('setValue', res.httpPort); AJAX . , parseInt($('#httpPort').textbox('getValue')) OK- .
mdialog() EasyUI dialog() , . Cancel, buttons.push({cancelButton: true});
$.messager , EasyUI, Dialog.
:
, . (, ) «» .
, EasyUI , - . , , EasyUI, , .
-, EasyUI?
, — , EasyUI.
, . EasyUI . : tree datagrid.
EasyUI tree . , , , , .
datagrid , . , , — . , datagrid : datagrid-scrollview, , DOM- ( ), datagrid-filter .
tree, datagrid , , .
, , DOM- CSS .
, EasyUI , . , -, . , , Bootstrap-. , .