10月27日，活字格開發團隊負責人雷學斌代表葡萄城做客掘金稀土開發者大會，在低代碼探索專題分享中首次揭秘活字格最受專業開發者歡迎的三個特色功能及其實現原理，讓我們一起看看低代碼如何赢得程序員的“芳心”。本文将重點為大家介紹特色功能三：自由設計頁面布局和樣式。

低代碼是覆蓋軟件開發全生命周期的可視化解決方案。在用戶界面設計階段，低代碼開發平台應該提供怎樣的設計模式，在确保高度定制化的基礎上，盡可能提升開發效率呢？為了解開這一難題，活字格的開發團隊決定從“可視化開發”的源頭尋找思路。

作為微軟最早期的合作夥伴，葡萄城在為微軟平台開發者提供大量控件的同時，對該平台的技術特性和背後的實現原理也有深刻理解。在開發WinForm程序的時代，Visual Studio的使用者将控件拖入窗體，IDE根據控件的位置和層次關系，自動生成包含這些信息的代碼。運行時，這些代碼被順次執行，還原抽出與設計時一緻的樣式，達到所見即所得的效果。這種開發方式很快就成為了Windows程序開發的标準模式，程序員不需要将程序運行起來，就能在設計器上看到頁面布局的效果。時至今日，市面上用戶群體最大的ERP軟件——用友U8 就是基于微軟的技術棧，用這種可視化的方式完成開發的，在用戶體驗層面得到了企業用戶的廣泛認可。

（使用Visual Studio開發WinForm程序的體驗）

于是，活字格将這種設計思想，結合Excel的操作體驗，應用在Web頁面開發中，最終提供了以絕對坐标為基準的頁面設計方案。針對不同的應用場景，該方案有“固定布局”和“網格布局”兩種模式。

固定布局

固定布局是活字格的默認做法。開發者在設計器中像操作Excel一樣在網格中完成頁面元素的布置和樣式設置；設計器會在發布時将包含有絕對坐标的頁面設計存儲為模型文件，并上傳到服務器；在最終用戶浏覽器中運行的解析引擎會把元數據還原為與設計器中一緻的Web界面。

（固定布局可實現嚴格意義上的所見即所得）

除了所見即所得帶來的高開發效率，這種設計體驗有以下三個顯而易見的優勢：

1. 布局靈活：開發者可以在頁面的任意位置放置任意元素，并設置為任意樣式，而不必拘泥于平台内置的模闆。
2. 門檻更低：頁面布局和樣式設置的方式高度類似Excel，全程可視化；開發者不需要具備CSS知識即可完成頁面設計；對于熟悉CSS的開發者，活字格還提供了對樣式進行進一步調整的能力。
3. 兼容性好：活字格的元數據解析引擎不依賴任何第三方JS框架或CSS樣式庫，可以确保頁面在不同浏覽器和設備上的表現一緻。

此外，如果開發的目标是代替現有的Excel模闆，或者需求方提供的設計方案是用Excel描述的，開發者還可以直接将Excel文件導入活字格。活字格将根據Excel自動生成頁面，還原其中的内容和大部分樣式，進一步減少頁面開發工作量。

（使用活字格開發的“仿紙質單據”頁面）

網格布局

固定布局可以确保最終頁面的布局和預期完全一緻，通常用于開發對界面布局要求非常嚴格的場景，比如，那些需要延續現有體驗、降低使用人員培訓成本的内部應用。但是，對于面向外部用戶的應用，開發者通常需要提供更加“現代化”的界面，以提升用戶滿意度。此時，活字格提供的“網格布局”将會派上用場。

與固定布局參考了WinForm的設計思路類似，網格布局的設計思想則源于WPF。為了實現頁面布局根據屏幕尺寸自動調整，WPF提供了Grid布局控件，并允許開發者通過在Grid.ColumnDefinition中設置Width=”25*”的形式控制各元素的尺寸占比。簡單地說，在固定布局的基礎上，将頁面元素所在位置的絕對定位坐标，轉換為可根據設定規則計算得出的動态坐标，就實現了網格布局（Grid Layout）。

在活字格的頁面設計界面中，元素的絕對定位坐标是通過其所在的單元格來确定的，而單元格的位置則以行和列的方式進行描述。當我們将這些行和列設置成“根據内容自适應”或者“在指定的範圍内按照比例進行分配”後，絕對定位的坐标就變成了根據規則計算得出的動态坐标。這種做法一方面提供了更具彈性的頁面布局方式，另一方面因為延續了固定布局的使用體驗，而不是将其割裂，最終使得活字格頁面布局的學習曲線更平滑，開發者上手更容易。

（使用網格布局開發出的頁面效果）

不同的應用場景和最終用戶群體，對頁面布局和樣式有着完全不同的要求。作為開發工具，低代碼平台理應允許開發者自由開發各種風格的頁面，但是很多低代碼平台卻沒有這一點。所以，“用固定布局和網格布局的方式，自由設計頁面”入選程序員最喜愛的活字格功能，也就很容易理解了。

在低代碼領域，葡萄城具有得天獨厚的自身條件。在2012年啟動低代碼預研前，葡萄城已經專注于軟件開發工具領域32年，先後基于VBX、COM、.NET和純前端等技術平台推出各類開發控件産品，并根據技術環境和用戶需求的變化，積極進行産品和技術疊代，不斷降低軟件開發所需的代碼量，提升軟件開發生産力，積累了豐厚的技術實力和領先的研發經驗。經過4年的研發，活字格低代碼開發平台于2016年正式推出。為了與更多開發者共創共建，葡萄城采取了面向開發者免費的商業模式，迄今為止已有超過6萬名開發者通過活字格走上低代碼開發之旅，其中不乏來自軟件公司和大企業信息化部門的專業開發者。

如果你是一名對低代碼技術持觀望态度的開發者，不妨搜索“活字格”，免費下載這款被數萬名開發者選擇的企業級低代碼開發平台，和葡萄城一道，開啟您的低代碼之旅！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!