[發明專利]一種響應式界面實現方法及設備

在審

• 申請號: 202211053047.5
• 申請日: 2022-08-31
• 公開（公告）號: CN115454427A
• 公開（公告）日: 2022-12-09
• 發明（設計）人: 李穎
• 申請（專利權）人: 浪潮通用軟件有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/451;G06F9/445;G06F16/958;G06F8/65;G06F8/71;G06T1/20
• 代理公司: 北京君慧知識產權代理事務所(普通合伙) 11716
• 代理人: 肖鵬

1.一種響應式界面實現方法，其特征在于，所述方法包括：

確定響應式界面的界面描述；所述界面描述包括所述響應式界面的自定義模式判定規則與標準模式判定規則、所述標準模式對應的響應式界面實現規則；

確定所述響應式界面的組件描述；所述組件描述包括組件歸屬分組轉換規則、組件所占柵格數轉換規則以及組件在二維排布下的行轉換規則；

通過預先設置的轉換接口，根據所述界面描述與所述組件描述，對容器內的組件參數進行處理，以將所述組件參數轉換為可執行代碼；

根據所述可執行代碼，生成所述響應式界面的可視化操作界面；

接收用戶的配置請求，對所述可視化操作界面進行界面分辨率配置與界面布局配置，得到更新的可執行代碼；

根據所述更新的可執行代碼，生成html dom結構；

將所述html dom結構渲染至表單組件區域，以生成所述響應式界面。

2.根據權利要求1所述的方法，其特征在于，所述確定響應式界面的界面描述，具體包括：

根據預設柵格系統，將所述響應式界面按照分辨率寬度劃分為十二等份，在預設斷點規則表中，確定所述響應式界面的分辨率寬度對應的斷點，并將所述響應式界面的顯示列數確定為所述斷點對應的指定顯示列數，以確定所述標準模式對應的響應式界面實現規則；以及

確定表單設計器內容器的多個組件分別對應的組件所占柵格數；

判斷所述組件所占柵格數是否均滿足預設斷點規則；

若是，則確定所述響應式界面為標準模式；

若否，則確定所述響應式界面為自定義模式；在所述自定義模式下，所述多個組件在不同界面分辨下的顯示列數由用戶控制。

3.根據權利要求1所述的方法，其特征在于，所述確定所述響應式界面的組件描述，具體包括：

對所述表單設計器內容器的組件進行ID標記，確定分組節點與未分組節點；確定所述分組節點內的組件，在所述分組節點內部設置組件寬度以及組件位置，以確定所述響應式界面的組件歸屬分組轉換規則；以及

根據標準模式的組件class樣式與自定義模式的組件class樣式，以確定所述響應式界面的組件所占柵格數轉換規則；以及

根據所述表單設計器內容器的多個組件分別對應的所占柵格數，將一維數據轉換為二維數據，通過對剩余柵格數與組件所占柵格數進行相減，確定行分配算法，根據所述行分配算法確定多個組件分別所處于的行位置，以確定所述組件在二維排布下的行轉換規則。

4.根據權利要求1所述的方法，其特征在于，確定預先設置的轉換接口，具體包括：

確定所述容器內的接口標識；所述接口標識包括當前斷點、當前分組、當前組件名、斷點設置、組件值存儲；所述組件值存儲記錄了當前組件在不同界面分辨率下的配置值，所述組件值存儲包括超大屏幕所占柵格數、極大屏幕所占柵格數、中等屏幕所占柵格數、小屏幕所占柵格數、極小屏幕所占柵格數、超大屏幕上組件所占列數、極大屏幕上組件所占列數、中等屏幕上組件所占列數、小屏幕上組件所占列數、極小屏幕上組件所占列數；

通過所述接口標識，確定所述轉換接口。

5.根據權利要求1所述的方法，其特征在于，所述根據所述可執行代碼，生成所述響應式界面的可視化操作界面，具體包括：

根據所述可執行代碼，將所述可視化操作界面劃分為控制區、操作區以及視圖區；

其中，所述控制區用于配置所述響應式界面的組件；所述操作區用于確定所述響應式界面的組件布局方式及調整所述響應式界面的組件寬度；所述視圖區用于響應所述操作區的拖拽變更與數據變更，以渲染預覽界面。