(按：
web領(lǐng)域，GUI編程有著學(xué)習(xí)曲線浪腐，
瑣碎脊岳，平凡的GUI逝段，為什么需要復(fù)雜的學(xué)習(xí)呢筛璧，
我希望可以設(shè)計(jì)實(shí)現(xiàn)一個簡單，能立即上手的GUI框架）
我曾經(jīng)在預(yù)研工作中實(shí)現(xiàn)過一版IMGUI惹恃，作為用戶擴(kuò)展的GUI，
模擬器 API文檔
IMGUI明顯的好處是棺牧，用戶不需要熟悉GUI的概念巫糙，比如html / xml / css或其它的 GUI 領(lǐng)域特定語言（DSL），只需要有一般腳本編程技能就可以了颊乘，
const button = Button.create({text: 'click me'});
if (button.click) {
console.log(’i am clicked, dont stop‘)
}
一目了然参淹，是吧
IMGUI的問題
問題來了，那為什么大多數(shù)GUI框架乏悄，未選擇IMGUI?
首先浙值，這問題不成立，在早期C編程時代檩小，大家寫的GUI都是IMGUI开呐，因?yàn)槟菚r，大家寫UI本來就是即時繪制规求，
// 每禎循環(huán)筐付，所以叫做“即時”模式
void onUpdate() {
// 繪制 button
drawButton("click me", "thisButtonID");
Event clickEvent;
// 過濾是否有點(diǎn)擊消息
filterEvent(&clickEvent);
if(clickEvent.valid) {
// 是否點(diǎn)擊在button區(qū)域中
if( getRec("thisButtonID").include(clickEvent.point) ) {
printf("i am clicked")
}
}
}
然后，這問題很有價值阻肿，
GUI思想一直在發(fā)展瓦戚，從早期繪制，到GUI編程成為一個相對獨(dú)立的編程丛塌，出現(xiàn)了面向?qū)ο?/strong>編程较解，將
GUI關(guān)注于 對象和事件，Button作為控件對象
const btClickMe = new Button(...)
btClickMe.on('click', ()=>{
console.log('i am clicked')
})
更近一步地赴邻，因?yàn)镚UI相當(dāng)關(guān)心排版問題印衔，即需要組織一顆GUI樹，出現(xiàn)了GUI排版描述語言乍楚， 即一般的XML/HTML/JSON表示
const GUIDesc = {
type: "layout", // 是排版容器節(jié)點(diǎn)
direction: "vertical", // 豎直排版
align : {
longtitude: "begin", // 徑度對齊当编，begin即向上對齊
latitude: "begin", // 緯度對齊，begin即向左對齊
},
children : [
{
type: 'button', // 一個button組件
text: 'click me',
onClick: ()=>{ // 點(diǎn)擊回調(diào)
console.log('i am clicked');
}徒溪，
children: [...]
}
]
}
const gui = createGUI(GUIDesc);
這看起來有點(diǎn)像HTML了忿偷，是不？
這種方式對于良好組織復(fù)雜GUI有好處臊泌，但對于制作鲤桥，比如說一個面板，簡單的工具界面渠概，反而顯得復(fù)雜茶凳。
另外,
IMGUI一般被人認(rèn)為影響效率嫂拴， 它的實(shí)現(xiàn)經(jīng)常每次事件都會有兩次執(zhí)行，一遍邏輯贮喧，再一遍layout輸出筒狠，但也許有巧妙的設(shè)計(jì)可以避免效率上的開銷；
IMGUI 混合邏輯和渲染箱沦，—— 有時是缺點(diǎn)辩恼，它影響大型GUI的整體設(shè)計(jì)，但在用戶擴(kuò)展里谓形，經(jīng)常是優(yōu)點(diǎn)灶伊，而且，運(yùn)用組件化實(shí)踐寒跳，它可以做到通用化的GUI編程聘萨；
IMGUI的需求
需求來自兩方面，
GUI編程的學(xué)習(xí)成本開始變高（你需要學(xué)習(xí)一個描述型語言童太，學(xué)習(xí)框架用法才能產(chǎn)生一個簡單GUI）米辐，不能滿足立即上手的需求（很多人不需要成為專家），這塊先不表康愤，
另一方面儡循，現(xiàn)代的GUI越來越有動態(tài)性，傳統(tǒng)上征冷，XML/HTML擅長表達(dá)靜態(tài)頁面择膝，如果兼容做動態(tài)頁面，則需要和代碼結(jié)合的一種表示方法检激，比如說 react 的 jsx文件肴捉，vue的 嵌入表達(dá)式。
如果有這樣一個需求叔收，如果上有一個按鈕（打開/收起)齿穗，下面是一張圖，隨著按鈕點(diǎn)擊饺律，圖會展開和收起窃页，
IMGUI是這樣做的
const button = Button.create({text: 'click me'});
if(button.click){
isPicShown = !isPicShown; // toggle state
}
let pic = null;
if(isPicShown) {
pic = Image.create('xxx.jpg')
}
可以看到， 做高交互性的GUI复濒，是 排版和邏輯的混合脖卖，很適合直接用代碼表達(dá)，這里IMGUI是相當(dāng)有價值的
IMGUI的改進(jìn)
之前說過巧颈，GUI的思想在發(fā)展畦木，而我想的是，大大加強(qiáng)IMGUI砸泛，讓之能適應(yīng)大多數(shù)情況的GUI設(shè)計(jì)十籍，
關(guān)鍵的幾個設(shè)計(jì)點(diǎn)蛆封，
- 每個GUI對象有構(gòu)造，內(nèi)部狀態(tài)勾栗，外部屬性
- 在渲染更新函數(shù)里惨篱，渲染，事件围俘，生命周期都寫在一起
GUIDefine("Button") {
arguments:{ // 這里構(gòu)造屬性妒蛇，比如 Button.create(...arguments) 這里的表示
...
},
states: { // 這里是內(nèi)部持久狀態(tài)
...
},
export: { // 這里是外部屬性， 比如說 button.isClick == true
...
}
onUpdate: (event) => {
if(event.afterAttach) { // 生命周期事件
} else if (event.beforeDetach) {
}
rect = Rect.create(...)
clickEvt = event.system.click
if(rect.include(clickEvt.position) ) { // 比如這里處理系統(tǒng)點(diǎn)擊事件楷拳，但真實(shí)并不會這樣做，請思考為什么吏奸？
triggerEvent(this.isClick, true) // 這樣就可以if(button.isClick) 了
}
}
}
- 用樣式模板+屬性覆蓋欢揖，做為theme方案
// theme 是UI模板
GUI.setTheme('defaultTheme');
// ...
Button.create({Theme="xxx", text:"click me", color:0x000}); // color 已經(jīng)包含在
- 如何定義UI模板(theme)
// 對所有組件，給予一個默認(rèn)的屬性
UITemplate("defaultTheme") {
Button = {
color:0xbbb;
...
};
panel = {
background:...,
}
}
// 第二種方式可以在組件里奋蔚，加入幾種theme的本組件屬性
GUIDefine("Button") {
// ...
ThemeOf("defaultTheme", {
color:"xxx";
},
ThemeOf("deepinTheme", {
color:"xxx";
}
}
// 第一種適合實(shí)現(xiàn)在UI庫她混，整體的theme定義
// 第二種特別適合用在 用戶自定義組件里
