[發明專利]一種MX框架頁面設計器以及設計方法

在審

• 申請號: 201611220056.3
• 申請日: 2016-12-26
• 公開（公告）號: CN106843846A
• 公開（公告）日: 2017-06-13
• 發明（設計）人: 張士林;劉迪;崔蔚;李鄭;李曉珍;丁學英;李春陽;李春岐;程華沈;邱鎮
• 申請（專利權）人: 國網信息通信產業集團有限公司;南京南瑞集團公司;南京南瑞信息通信科技有限公司;國家電網公司
• 主分類號: G06F9/44
• 分類號: G06F9/44;G06F17/30
• 代理公司: 北京集佳知識產權代理有限公司11227
• 代理人: 羅滿

技術領域

本發明涉及應用開發前端技術領域，特別是涉及一種MX框架頁面設計器以及設計方法。

背景技術

MX(matrix矩陣)框架，是國家電網公司統一應用開發平臺的前端框架，是一個WEB應用程序的前臺構建框架，也是一個應用前臺構建語言，通過對JAVASCRIPT腳本語言進行封裝，擴展出一套快速構建豐富前臺頁面的腳本語法體系，這個體系既保持了JavaScript語言的簡潔性，同時衍生出更加復雜的展現控件，并支持面向對象的開發規約。另外，為了保證這個框架具備“兼容并包”的特性，在這個框架中加入了目前業界比較流行的JQuery庫，同時支持業務研發用戶對展現框架進行動態的擴展。

MX框架控件是MX框架根據網頁的具體交互功能，抽象出一系列的控件，此控件不僅包含HTML展示，同時包含了控件內部之間的邏輯操作。每個控件擁有眾多的屬性和API，便于初始化設置和外部調用。

MX框架是國家電網統一應用開發平臺前端的框架。該框架包含豐富的控件，能滿足于業務系統70％左右的界面交互功能。但是每個控件擁有大量的API，且包含固定的邏輯，前端開發人員需要較強的JavaScript開發經驗，入門困難。

因此，提供一種MX框架頁面設計器以及設計方法，以實現對網頁的在線設計與修改是非常有必要的。

發明內容

本發明的目的是提供一種MX框架頁面設計器以及設計方法，以便于快速實現對網頁的在線設計與修改。

為解決上述技術問題，本發明提供一種MX框架頁面設計器，包括：

MX框架控件展示模塊、頁面設計模塊以及控件屬性編輯模塊；

其中，所述MX框架控件展示模塊用于對MX框架中的各個控件進行展示；

所述頁面設計模塊用于接收用戶從所述控件中選擇所需的控件，在預設設計區域內對所選的控件進行實時顯示；

所述控件屬性編輯模塊用于接收用戶對所選的控件的屬性信息進行修改的指令，在所述預設設計區域內對修改屬性后的控件進行顯示更新。

可選地，還包括：頁面預覽模塊，用于根據控件的屬性信息，在預覽界面對設計的框架頁面進行顯示。

可選地，還包括：

根據各組件之間的從屬邏輯以及控件的自身屬性，生成符合MX框架的網頁源代碼。

可選地，還包括：接收用戶輸入的下載指令，對生成的所述網頁源代碼進行下載。

可選地，所述控件包括基礎控件、編輯器控件、容器控件、數據控件。

可選地，所述控件屬性編輯模塊包括：

操作單元，用于接收用戶對所選的控件執行位置拖動、刪除的操作；

顯示屬性編輯單元，用于接收用戶對所選的控件的屬性信息進行編輯的操作。

本發明還提供了一種MX框架頁面設計方法，包括：

接收用戶從MX框架控件展示模塊的各個控件中選擇所需的控件，在預設設計區域內對所選的控件進行實時顯示；

接收用戶對所選的控件的屬性信息進行修改的指令，在所述預設設計區域內對修改屬性后的控件進行顯示更新。

可選地，還包括：根據控件的屬性信息，在預覽界面對設計的框架頁面進行顯示。

可選地，還包括：根據各組件之間的從屬邏輯以及控件的自身屬性，生成符合MX框架的網頁源代碼。

可選地，還包括：接收用戶輸入的下載指令，對生成的所述網頁源代碼進行下載。

本發明所提供的MX框架頁面設計器，包括MX框架控件展示模塊、頁面設計模塊以及控件屬性編輯模塊；通過MX框架控件展示模塊對MX框架中的各個控件進行展示；采用頁面設計模塊接收用戶從控件中選擇所需的控件，在預設設計區域內對所選的控件進行實時顯示；控件屬性編輯模塊接收用戶對所選的控件的屬性信息進行修改的指令，在預設設計區域內對修改屬性后的控件進行顯示更新。本申請通過展示MX框架的所有控件，能讓開發者對MX框架的控件有整體的認知；用戶拖拽MX控件即可實現對網頁的設計，按需修改網頁中控件的屬性對網頁進行修改，實時展現修改效果，實現網頁的所見所得，方便了用戶的查看、輔助開發。此外，本發明還提供了一種具有上述技術優點的MX框架頁面設計方法。

附圖說明

為了更清楚的說明本發明實施例或現有技術的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單的介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。

圖1為本發明所提供的MX框架頁面設計器的一種具體實施方式的結構框圖；