Neste artigo, quero compartilhar minha experiência de como me livrar da terrível dor de cabeça que surgiu ao desenvolver um aplicativo da web para um dispositivo pequeno, mas muito poderoso. Mas, primeiro, uma palavra sobre a origem dessa dor - o design.
Hoje, o design é um dos componentes essenciais de qualquer produto e, para sites e aplicativos da web, é a parte mais importante. Tudo sob o capô está escondido dos olhos do cliente. O usuário não está interessado na genialidade da execução do motor ou na singularidade da arquitetura: nem é preciso dizer que o programa deve funcionar de maneira confiável e segura. O usuário moderno precisa de uma interface gráfica elegante.
Anteriormente, a criação de tal interface causava uma séria dor de cabeça para os programadores, mas agora um grande número de estruturas e bibliotecas diferentes foram lançadas para eliminá-la. Ao que parece - viva, o problema está resolvido! No entanto, agora nos deparamos com outra questão: qual medicamento escolher - pentalgin ou panadol?
A questão não é fácil e, no final, cabe a você decidir. Vou lhe contar sobre minha cura: a biblioteca EasyUI para a construção de aplicativos da web completos de uma única página (SPA) e com base em jQuery, Angular, Vue e React.
Meu conhecimento da EasyUI começou há cerca de dois anos, quando nossa equipe começou a desenvolver um software para um sistema de gerenciamento de energia e sua distribuição inteligente entre os consumidores. O dispositivo de controle tinha Linux a bordo e, além da distribuição de energia, precisava trocar dados com vários dispositivos periféricos, ser capaz de controlá-los e também receber leituras de um grande número (até várias centenas) de sensores. As regras de controle podem ser alteradas, permitindo ao usuário customizar o funcionamento de todo o complexo para realizar as tarefas necessárias.
: 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-. , .