10月27日，活字格開發(fā)團(tuán)隊(duì)負(fù)責(zé)人雷學(xué)斌代表葡萄城做客掘金稀土開發(fā)者大會，在低代碼探索專題分享中首次揭秘活字格最受專業(yè)開發(fā)者歡迎的三個特色功能及其實(shí)現(xiàn)原理，讓我們一起看看低代碼如何贏得程序員的“芳心”。本文將重點(diǎn)為大家介紹特色功能三：自由設(shè)計頁面布局和樣式。
可自由布局的解決方案
低代碼是覆蓋軟件開發(fā)全生命周期的可視化解決方案。在用戶界面設(shè)計階段，低代碼開發(fā)平臺應(yīng)該提供怎樣的設(shè)計模式，在確保高度定制化的基礎(chǔ)上，盡可能提升開發(fā)效率呢？為了解開這一難題，活字格的開發(fā)團(tuán)隊(duì)決定從“可視化開發(fā)”的源頭尋找思路。
作為微軟最早期的合作伙伴，葡萄城在為微軟平臺開發(fā)者提供大量控件的同時，對該平臺的技術(shù)特性和背后的實(shí)現(xiàn)原理也有深刻理解。在開發(fā)WinForm程序的時代，Visual Studio的使用者將控件拖入窗體，IDE根據(jù)控件的位置和層次關(guān)系，自動生成包含這些信息的代碼。運(yùn)行時，這些代碼被順次執(zhí)行，還原抽出與設(shè)計時一致的樣式，達(dá)到所見即所得的效果。這種開發(fā)方式很快就成為了Windows程序開發(fā)的標(biāo)準(zhǔn)模式，程序員不需要將程序運(yùn)行起來，就能在設(shè)計器上看到頁面布局的效果。時至今日，市面上用戶群體最大的ERP軟件——用友U8 就是基于微軟的技術(shù)棧，用這種可視化的方式完成開發(fā)的，在用戶體驗(yàn)層面得到了企業(yè)用戶的廣泛認(rèn)可。
（使用Visual Studio開發(fā)WinForm程序的體驗(yàn)）
于是，活字格將這種設(shè)計思想，結(jié)合Excel的操作體驗(yàn)，應(yīng)用在Web頁面開發(fā)中，最終提供了以絕對坐標(biāo)為基準(zhǔn)的頁面設(shè)計方案。針對不同的應(yīng)用場景，該方案有“固定布局”和“網(wǎng)格布局”兩種模式。
兩種布局模式
固定布局
固定布局是活字格的默認(rèn)做法。開發(fā)者在設(shè)計器中像操作Excel一樣在網(wǎng)格中完成頁面元素的布置和樣式設(shè)置；設(shè)計器會在發(fā)布時將包含有絕對坐標(biāo)的頁面設(shè)計存儲為模型文件，并上傳到服務(wù)器；在最終用戶瀏覽器中運(yùn)行的解析引擎會把元數(shù)據(jù)還原為與設(shè)計器中一致的Web界面。
（固定布局可實(shí)現(xiàn)嚴(yán)格意義上的所見即所得）
除了所見即所得帶來的高開發(fā)效率，這種設(shè)計體驗(yàn)有以下三個顯而易見的優(yōu)勢：
- 布局靈活：開發(fā)者可以在頁面的任意位置放置任意元素，并設(shè)置為任意樣式，而不必拘泥于平臺內(nèi)置的模板。
- 門檻更低：頁面布局和樣式設(shè)置的方式高度類似Excel，全程可視化；開發(fā)者不需要具備CSS知識即可完成頁面設(shè)計；對于熟悉CSS的開發(fā)者，活字格還提供了對樣式進(jìn)行進(jìn)一步調(diào)整的能力。
- 兼容性好：活字格的元數(shù)據(jù)解析引擎不依賴任何第三方JS框架或CSS樣式庫，可以確保頁面在不同瀏覽器和設(shè)備上的表現(xiàn)一致。
此外，如果開發(fā)的目標(biāo)是代替現(xiàn)有的Excel模板，或者需求方提供的設(shè)計方案是用Excel描述的，開發(fā)者還可以直接將Excel文件導(dǎo)入活字格?；钭指駥⒏鶕?jù)Excel自動生成頁面，還原其中的內(nèi)容和大部分樣式，進(jìn)一步減少頁面開發(fā)工作量。
（使用活字格開發(fā)的“仿紙質(zhì)單據(jù)”頁面）
網(wǎng)格布局
固定布局可以確保最終頁面的布局和預(yù)期完全一致，通常用于開發(fā)對界面布局要求非常嚴(yán)格的場景，比如，那些需要延續(xù)現(xiàn)有體驗(yàn)、降低使用人員培訓(xùn)成本的內(nèi)部應(yīng)用。但是，對于面向外部用戶的應(yīng)用，開發(fā)者通常需要提供更加“現(xiàn)代化”的界面，以提升用戶滿意度。此時，活字格提供的“網(wǎng)格布局”將會派上用場。
與固定布局參考了WinForm的設(shè)計思路類似，網(wǎng)格布局的設(shè)計思想則源于WPF。為了實(shí)現(xiàn)頁面布局根據(jù)屏幕尺寸自動調(diào)整，WPF提供了Grid布局控件，并允許開發(fā)者通過在Grid.ColumnDefinition中設(shè)置Width=”25*”的形式控制各元素的尺寸占比。簡單地說，在固定布局的基礎(chǔ)上，將頁面元素所在位置的絕對定位坐標(biāo)，轉(zhuǎn)換為可根據(jù)設(shè)定規(guī)則計算得出的動態(tài)坐標(biāo)，就實(shí)現(xiàn)了網(wǎng)格布局（Grid Layout）。
在活字格的頁面設(shè)計界面中，元素的絕對定位坐標(biāo)是通過其所在的單元格來確定的，而單元格的位置則以行和列的方式進(jìn)行描述。當(dāng)我們將這些行和列設(shè)置成“根據(jù)內(nèi)容自適應(yīng)”或者“在指定的范圍內(nèi)按照比例進(jìn)行分配”后，絕對定位的坐標(biāo)就變成了根據(jù)規(guī)則計算得出的動態(tài)坐標(biāo)。這種做法一方面提供了更具彈性的頁面布局方式，另一方面因?yàn)檠永m(xù)了固定布局的使用體驗(yàn)，而不是將其割裂，最終使得活字格頁面布局的學(xué)習(xí)曲線更平滑，開發(fā)者上手更容易。
（使用網(wǎng)格布局開發(fā)出的頁面效果）
為開發(fā)者提供最大的自由度
不同的應(yīng)用場景和最終用戶群體，對頁面布局和樣式有著完全不同的要求。作為開發(fā)工具，低代碼平臺理應(yīng)允許開發(fā)者自由開發(fā)各種風(fēng)格的頁面，但是很多低代碼平臺卻沒有這一點(diǎn)。所以，“用固定布局和網(wǎng)格布局的方式，自由設(shè)計頁面”入選程序員最喜愛的活字格功能，也就很容易理解了。
活字格，出自專業(yè)控件廠商
在低代碼領(lǐng)域，葡萄城具有得天獨(dú)厚的自身?xiàng)l件。在2012年啟動低代碼預(yù)研前，葡萄城已經(jīng)專注于軟件開發(fā)工具領(lǐng)域32年，先后基于VBX、COM、.NET和純前端等技術(shù)平臺推出各類開發(fā)控件產(chǎn)品，并根據(jù)技術(shù)環(huán)境和用戶需求的變化，積極進(jìn)行產(chǎn)品和技術(shù)迭代，不斷降低軟件開發(fā)所需的代碼量，提升軟件開發(fā)生產(chǎn)力，積累了豐厚的技術(shù)實(shí)力和領(lǐng)先的研發(fā)經(jīng)驗(yàn)。經(jīng)過4年的研發(fā)，活字格低代碼開發(fā)平臺于2016年正式推出。為了與更多開發(fā)者共創(chuàng)共建，葡萄城采取了面向開發(fā)者免費(fèi)的商業(yè)模式，迄今為止已有超過6萬名開發(fā)者通過活字格走上低代碼開發(fā)之旅，其中不乏來自軟件公司和大企業(yè)信息化部門的專業(yè)開發(fā)者。
如果你是一名對低代碼技術(shù)持觀望態(tài)度的開發(fā)者，不妨搜索“活字格”，免費(fèi)下載這款被數(shù)萬名開發(fā)者選擇的企業(yè)級低代碼開發(fā)平臺，和葡萄城一道，開啟您的低代碼之旅！
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實(shí)，本站將立刻刪除。