[發(fā)明專利]界面模擬方法、裝置及集成開發(fā)環(huán)境系統(tǒng)

在審

• 申請?zhí)枺?/td>: 202210067417.4
• 申請日: 2022-01-20
• 公開（公告）號: CN114594949A
• 公開（公告）日: 2022-06-07
• 發(fā)明（設計）人: 伍先飛
• 申請（專利權）人: 阿里巴巴（中國）有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/451
• 代理公司: 北京眾達德權知識產(chǎn)權代理有限公司 11570
• 代理人: 南海燕

本申請實施例公開了界面模擬方法、裝置及集成開發(fā)環(huán)境系統(tǒng)，所述系統(tǒng)包括：代碼編輯器模塊以及模擬器模塊；代碼編輯器模塊被配置為：將目標界面關聯(lián)的多個界面元素的元素標識，以及對應的素材圖像提供給所述模擬器模塊；模擬器模塊被配置為：創(chuàng)建界面模擬區(qū)域，并在所述界面模擬區(qū)域中對所述多個界面元素的素材圖像進行展示，響應于在所述界面模擬區(qū)域范圍內對所述多個界面元素的素材圖像執(zhí)行的位置拖動和/或圖層上下移動操作，確定所述多個界面元素在所述編輯區(qū)域中的坐標信息和/或圖層關系信息，并返回給所述代碼編輯器模塊。通過本申請實施例，可以提升界面開發(fā)效率，降低設計師與代碼開發(fā)人員之間的溝通成本。

技術領域

本申請涉及界面開發(fā)技術領域，特別是涉及界面模擬方法、裝置及集成開發(fā)環(huán)境系統(tǒng)。

背景技術

在界面設計到開發(fā)的過程中，通常需要設計師與代碼開發(fā)人員進行配合。具體的，首先可以由設計師輸出設計稿，具體可以利用界面設計工具進行界面元素的繪制以及布局等設計。生成的設計稿可以以文件的形式提供給代碼開發(fā)人員，代碼開發(fā)人員則可以將具體設計稿中的界面元素素材導出，并導入到IDE(Integrated Development Environment，集成開發(fā)環(huán)境)中與當前界面開發(fā)對應的工程包中。之后，代碼開發(fā)人員可以對設計稿中具體界面元素所在的位置進行測量等操作，確定出界面元素在界面中的坐標等位置信息，然后可以在IDE工具中輸入這種坐標信息，并進行界面代碼的生成。

但是，在通過上述方式進行界面開發(fā)的過程中，經(jīng)常會存在以下問題：代碼開發(fā)人員是按照自己對設計稿的理解，來生成界面代碼，但是，最終生成的界面效果可能并不完全符合設計師的預期，于是在設計師對界面開發(fā)結果進行驗收的過程中，可能需要代碼開發(fā)人員反復修改具體界面元素的坐標，才能達到設計師想要的效果，以至于效率很低。例如，關于設計稿中的某個界面元素，代碼開發(fā)人員將其坐標設定為(x1，y1)，但是設計師在進行驗收時，可能認為該元素在界面中的位置太靠右了，于是讓代碼開發(fā)人員向左移動40像素。代碼開發(fā)人員通過修改代碼調整界面元素的坐標之后，在電腦模擬器上預覽效果時，設計師發(fā)現(xiàn)，向左移動了40像素后的效果仍然不符合預期，于是可能需要代碼開發(fā)人員繼續(xù)向左移動10像素，等等。以上代碼修改以及預覽的過程中可能需要重復執(zhí)行多次，才能使得生成的界面符合設計師的預期。

發(fā)明內容

本申請?zhí)峁┝私缑婺M方法、裝置及集成開發(fā)環(huán)境系統(tǒng)，可以提升界面開發(fā)效率，降低設計師與代碼開發(fā)人員之間的溝通成本。

本申請?zhí)峁┝巳缦路桨福?/p>

一種集成開發(fā)環(huán)境IDE系統(tǒng)，

所述系統(tǒng)包括代碼編輯器模塊以及模擬器模塊；

所述代碼編輯器模塊被配置為：響應于對處于開發(fā)中狀態(tài)的目標界面的模擬請求，將所述目標界面關聯(lián)的多個界面元素的元素標識，以及對應的素材圖像提供給所述模擬器模塊；

所述模擬器模塊被配置為：創(chuàng)建界面模擬區(qū)域，并在所述界面模擬區(qū)域中對所述多個界面元素的素材圖像進行展示，響應于在所述界面模擬區(qū)域范圍內對所述多個界面元素的素材圖像執(zhí)行的位置拖動和/或圖層上下移動操作，確定所述多個界面元素在所述編輯區(qū)域中的坐標信息和/或圖層關系信息，并返回給所述代碼編輯器模塊；

所述代碼編輯器模塊還被配置為：根據(jù)所述界面元素的元素標識，以及對應的坐標信息和/或圖層關系信息，生成所述目標界面的位置排版代碼。

一種界面模擬方法，通過集成開發(fā)環(huán)境IDE系統(tǒng)關聯(lián)的模擬器程序執(zhí)行以下處理：

接收所述IDE系統(tǒng)的代碼編輯器模塊提供的目標界面關聯(lián)的多個界面元素的元素標識，以及對應的素材圖像；

創(chuàng)建界面模擬區(qū)域，并在所述界面區(qū)域中對所述多個界面元素的素材圖像進行展示；