10月27日，活字格開(kāi)發(fā)團(tuán)隊(duì)負(fù)責(zé)人雷學(xué)斌代表葡萄城做客掘金稀土開(kāi)發(fā)者大會(huì)，在低代碼探索專題分享中首次揭秘活字格最受專業(yè)開(kāi)發(fā)者歡迎的三個(gè)特色功能及其實(shí)現(xiàn)原理，讓我們一起看看低代碼如何贏得程序員的“芳心”。本文將重點(diǎn)為大家介紹特色功能三：自由設(shè)計(jì)頁(yè)面布局和樣式。

可自由布局的解決方案

低代碼是覆蓋軟件開(kāi)發(fā)全生命周期的可視化解決方案。在用戶界面設(shè)計(jì)階段，低代碼開(kāi)發(fā)平臺(tái)應(yīng)該提供怎樣的設(shè)計(jì)模式，在確保高度定制化的基礎(chǔ)上，盡可能提升開(kāi)發(fā)效率呢？為了解開(kāi)這一難題，活字格的開(kāi)發(fā)團(tuán)隊(duì)決定從“可視化開(kāi)發(fā)”的源頭尋找思路。

作為微軟最早期的合作伙伴，葡萄城在為微軟平臺(tái)開(kāi)發(fā)者提供大量控件的同時(shí)，對(duì)該平臺(tái)的技術(shù)特性和背后的實(shí)現(xiàn)原理也有深刻理解。在開(kāi)發(fā)WinForm程序的時(shí)代，Visual Studio的使用者將控件拖入窗體，IDE根據(jù)控件的位置和層次關(guān)系，自動(dòng)生成包含這些信息的代碼。運(yùn)行時(shí)，這些代碼被順次執(zhí)行，還原抽出與設(shè)計(jì)時(shí)一致的樣式，達(dá)到所見(jiàn)即所得的效果。這種開(kāi)發(fā)方式很快就成為了Windows程序開(kāi)發(fā)的標(biāo)準(zhǔn)模式，程序員不需要將程序運(yùn)行起來(lái)，就能在設(shè)計(jì)器上看到頁(yè)面布局的效果。時(shí)至今日，市面上用戶群體最大的ERP軟件——用友U8 就是基于微軟的技術(shù)棧，用這種可視化的方式完成開(kāi)發(fā)的，在用戶體驗(yàn)層面得到了企業(yè)用戶的廣泛認(rèn)可。

（使用Visual Studio開(kāi)發(fā)WinForm程序的體驗(yàn)）

于是，活字格將這種設(shè)計(jì)思想，結(jié)合Excel的操作體驗(yàn)，應(yīng)用在Web頁(yè)面開(kāi)發(fā)中，最終提供了以絕對(duì)坐標(biāo)為基準(zhǔn)的頁(yè)面設(shè)計(jì)方案。針對(duì)不同的應(yīng)用場(chǎng)景，該方案有“固定布局”和“網(wǎng)格布局”兩種模式。

兩種布局模式

固定布局

固定布局是活字格的默認(rèn)做法。開(kāi)發(fā)者在設(shè)計(jì)器中像操作Excel一樣在網(wǎng)格中完成頁(yè)面元素的布置和樣式設(shè)置；設(shè)計(jì)器會(huì)在發(fā)布時(shí)將包含有絕對(duì)坐標(biāo)的頁(yè)面設(shè)計(jì)存儲(chǔ)為模型文件，并上傳到服務(wù)器；在最終用戶瀏覽器中運(yùn)行的解析引擎會(huì)把元數(shù)據(jù)還原為與設(shè)計(jì)器中一致的Web界面。

（固定布局可實(shí)現(xiàn)嚴(yán)格意義上的所見(jiàn)即所得）

除了所見(jiàn)即所得帶來(lái)的高開(kāi)發(fā)效率，這種設(shè)計(jì)體驗(yàn)有以下三個(gè)顯而易見(jiàn)的優(yōu)勢(shì)：

1. 布局靈活：開(kāi)發(fā)者可以在頁(yè)面的任意位置放置任意元素，并設(shè)置為任意樣式，而不必拘泥于平臺(tái)內(nèi)置的模板。
2. 門(mén)檻更低：頁(yè)面布局和樣式設(shè)置的方式高度類似Excel，全程可視化；開(kāi)發(fā)者不需要具備CSS知識(shí)即可完成頁(yè)面設(shè)計(jì)；對(duì)于熟悉CSS的開(kāi)發(fā)者，活字格還提供了對(duì)樣式進(jìn)行進(jìn)一步調(diào)整的能力。
3. 兼容性好：活字格的元數(shù)據(jù)解析引擎不依賴任何第三方JS框架或CSS樣式庫(kù)，可以確保頁(yè)面在不同瀏覽器和設(shè)備上的表現(xiàn)一致。

此外，如果開(kāi)發(fā)的目標(biāo)是代替現(xiàn)有的Excel模板，或者需求方提供的設(shè)計(jì)方案是用Excel描述的，開(kāi)發(fā)者還可以直接將Excel文件導(dǎo)入活字格?；钭指駥⒏鶕?jù)Excel自動(dòng)生成頁(yè)面，還原其中的內(nèi)容和大部分樣式，進(jìn)一步減少頁(yè)面開(kāi)發(fā)工作量。

（使用活字格開(kāi)發(fā)的“仿紙質(zhì)單據(jù)”頁(yè)面）

網(wǎng)格布局

固定布局可以確保最終頁(yè)面的布局和預(yù)期完全一致，通常用于開(kāi)發(fā)對(duì)界面布局要求非常嚴(yán)格的場(chǎng)景，比如，那些需要延續(xù)現(xiàn)有體驗(yàn)、降低使用人員培訓(xùn)成本的內(nèi)部應(yīng)用。但是，對(duì)于面向外部用戶的應(yīng)用，開(kāi)發(fā)者通常需要提供更加“現(xiàn)代化”的界面，以提升用戶滿意度。此時(shí)，活字格提供的“網(wǎng)格布局”將會(huì)派上用場(chǎng)。

與固定布局參考了WinForm的設(shè)計(jì)思路類似，網(wǎng)格布局的設(shè)計(jì)思想則源于WPF。為了實(shí)現(xiàn)頁(yè)面布局根據(jù)屏幕尺寸自動(dòng)調(diào)整，WPF提供了Grid布局控件，并允許開(kāi)發(fā)者通過(guò)在Grid.ColumnDefinition中設(shè)置Width=”25*”的形式控制各元素的尺寸占比。簡(jiǎn)單地說(shuō)，在固定布局的基礎(chǔ)上，將頁(yè)面元素所在位置的絕對(duì)定位坐標(biāo)，轉(zhuǎn)換為可根據(jù)設(shè)定規(guī)則計(jì)算得出的動(dòng)態(tài)坐標(biāo)，就實(shí)現(xiàn)了網(wǎng)格布局（Grid Layout）。

在活字格的頁(yè)面設(shè)計(jì)界面中，元素的絕對(duì)定位坐標(biāo)是通過(guò)其所在的單元格來(lái)確定的，而單元格的位置則以行和列的方式進(jìn)行描述。當(dāng)我們將這些行和列設(shè)置成“根據(jù)內(nèi)容自適應(yīng)”或者“在指定的范圍內(nèi)按照比例進(jìn)行分配”后，絕對(duì)定位的坐標(biāo)就變成了根據(jù)規(guī)則計(jì)算得出的動(dòng)態(tài)坐標(biāo)。這種做法一方面提供了更具彈性的頁(yè)面布局方式，另一方面因?yàn)檠永m(xù)了固定布局的使用體驗(yàn)，而不是將其割裂，最終使得活字格頁(yè)面布局的學(xué)習(xí)曲線更平滑，開(kāi)發(fā)者上手更容易。

（使用網(wǎng)格布局開(kāi)發(fā)出的頁(yè)面效果）

為開(kāi)發(fā)者提供最大的自由度

不同的應(yīng)用場(chǎng)景和最終用戶群體，對(duì)頁(yè)面布局和樣式有著完全不同的要求。作為開(kāi)發(fā)工具，低代碼平臺(tái)理應(yīng)允許開(kāi)發(fā)者自由開(kāi)發(fā)各種風(fēng)格的頁(yè)面，但是很多低代碼平臺(tái)卻沒(méi)有這一點(diǎn)。所以，“用固定布局和網(wǎng)格布局的方式，自由設(shè)計(jì)頁(yè)面”入選程序員最喜愛(ài)的活字格功能，也就很容易理解了。

活字格，出自專業(yè)控件廠商

在低代碼領(lǐng)域，葡萄城具有得天獨(dú)厚的自身?xiàng)l件。在2012年啟動(dòng)低代碼預(yù)研前，葡萄城已經(jīng)專注于軟件開(kāi)發(fā)工具領(lǐng)域32年，先后基于VBX、COM、.NET和純前端等技術(shù)平臺(tái)推出各類開(kāi)發(fā)控件產(chǎn)品，并根據(jù)技術(shù)環(huán)境和用戶需求的變化，積極進(jìn)行產(chǎn)品和技術(shù)迭代，不斷降低軟件開(kāi)發(fā)所需的代碼量，提升軟件開(kāi)發(fā)生產(chǎn)力，積累了豐厚的技術(shù)實(shí)力和領(lǐng)先的研發(fā)經(jīng)驗(yàn)。經(jīng)過(guò)4年的研發(fā)，活字格低代碼開(kāi)發(fā)平臺(tái)于2016年正式推出。為了與更多開(kāi)發(fā)者共創(chuàng)共建，葡萄城采取了面向開(kāi)發(fā)者免費(fèi)的商業(yè)模式，迄今為止已有超過(guò)6萬(wàn)名開(kāi)發(fā)者通過(guò)活字格走上低代碼開(kāi)發(fā)之旅，其中不乏來(lái)自軟件公司和大企業(yè)信息化部門(mén)的專業(yè)開(kāi)發(fā)者。

如果你是一名對(duì)低代碼技術(shù)持觀望態(tài)度的開(kāi)發(fā)者，不妨搜索“活字格”，免費(fèi)下載這款被數(shù)萬(wàn)名開(kāi)發(fā)者選擇的企業(yè)級(jí)低代碼開(kāi)發(fā)平臺(tái)，和葡萄城一道，開(kāi)啟您的低代碼之旅！