この記事では、1 つの小さいが非常に強力なデバイス用の Web アプリケーションを開発するときに発生したひどい頭痛の種を取り除いた私の経験を共有したいと思います。しかし、最初に、この痛みの原因、つまりデザインについて一言。
今日のデザインは、あらゆる製品の重要なコンポーネントの 1 つであり、Web サイトや Web アプリケーションにとって最も重要な部分です。フードの下のすべてがクライアントの目から隠されています。ユーザーは、エンジンの実行の天才やアーキテクチャの独自性には関心がありません。プログラムが確実かつ安全に動作する必要があることは言うまでもありません。現代のユーザーは、スタイリッシュなグラフィカル インターフェイスを必要としています。
以前は、このようなインターフェイスの作成はプログラマーにとって深刻な頭痛の種でしたが、現在では、このインターフェイスを取り除くために多数の異なるフレームワークとライブラリがリリースされています。問題は解決したようです。しかし、今、私たちは別の問題に直面しています。ペンタルギンとパナドールのどちらの薬を選ぶべきですか?
この質問は簡単ではありません。最終的に決めるのはあなたです。私の治療法についてお話します。本格的なシングルページ Web アプリケーション (SPA) を構築するための、jQuery、Angular、Vue、React に基づくEasyUIライブラリです。
EasyUI との出会いは約 2 年前、私たちのチームが電力管理システムとそのインテリジェントな消費者への分配のためのソフトウェアの開発を開始したときに始まりました。制御デバイスには Linux が搭載されており、配電に加えて、さまざまな周辺機器とデータを交換してそれらを制御し、多数 (数百) のセンサーからの読み取り値を受信する必要がありました。制御ルールを変更して、ユーザーが複合施設全体の操作をカスタマイズして必要なタスクを実行できるようにすることができます。
: 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-. , .