界面模拟方法、装置及集成开发环境系统制造方法及图纸

本申请实施例公开了界面模拟方法、装置及集成开发环境系统，所述系统包括：代码编辑器模块以及模拟器模块；代码编辑器模块被配置为：将目标界面关联的多个界面元素的元素标识，以及对应的素材图像提供给所述模拟器模块；模拟器模块被配置为：创建界面模拟区域，并在所述界面模拟区域中对所述多个界面元素的素材图像进行展示，响应于在所述界面模拟区域范围内对所述多个界面元素的素材图像执行的位置拖动和/或图层上下移动操作，确定所述多个界面元素在所述编辑区域中的坐标信息和/或图层关系信息，并返回给所述代码编辑器模块。通过本申请实施例，可以提升界面开发效率，降低设计师与代码开发人员之间的沟通成本。低设计师与代码开发人员之间的沟通成本。低设计师与代码开发人员之间的沟通成本。

【技术实现步骤摘要】
界面模拟方法、装置及集成开发环境系统


[0001]本申请涉及界面开发
，特别是涉及界面模拟方法、装置及集成开发环境系统。

技术介绍

[0002]在界面设计到开发的过程中，通常需要设计师与代码开发人员进行配合。具体的，首先可以由设计师输出设计稿，具体可以利用界面设计工具进行界面元素的绘制以及布局等设计。生成的设计稿可以以文件的形式提供给代码开发人员，代码开发人员则可以将具体设计稿中的界面元素素材导出，并导入到IDE(Integrated Development Environment，集成开发环境)中与当前界面开发对应的工程包中。之后，代码开发人员可以对设计稿中具体界面元素所在的位置进行测量等操作，确定出界面元素在界面中的坐标等位置信息，然后可以在IDE工具中输入这种坐标信息，并进行界面代码的生成。
[0003]但是，在通过上述方式进行界面开发的过程中，经常会存在以下问题：代码开发人员是按照自己对设计稿的理解，来生成界面代码，但是，最终生成的界面效果可能并不完全符合设计师的预期，于是在设计师对界面开发结果进行验收的过程中，可能需要代本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种集成开发环境IDE系统，其特征在于，所述系统包括代码编辑器模块以及模拟器模块；所述代码编辑器模块被配置为：响应于对处于开发中状态的目标界面的模拟请求，将所述目标界面关联的多个界面元素的元素标识，以及对应的素材图像提供给所述模拟器模块；所述模拟器模块被配置为：创建界面模拟区域，并在所述界面模拟区域中对所述多个界面元素的素材图像进行展示，响应于在所述界面模拟区域范围内对所述多个界面元素的素材图像执行的位置拖动和/或图层上下移动操作，确定所述多个界面元素在所述编辑区域中的坐标信息和/或图层关系信息，并返回给所述代码编辑器模块；所述代码编辑器模块还被配置为：根据所述界面元素的元素标识，以及对应的坐标信息和/或图层关系信息，生成所述目标界面的位置排版代码。2.根据权利要求1所述的系统，其特征在于，所述代码编辑器模块运行于第一终端设备中，或者通过第一终端设备进行访问；所述模拟器模块运行于第二终端设备中，所述第二终端设备为移动终端设备。3.根据权利要去2所述的系统，其特征在于，所述模拟器模块具体被配置为：根据所述移动终端设备的屏幕参数信息，创建与所述屏幕参数信息适配的界面模拟区域，以便所述代码编辑器模块生成与当前移动终端设备的机型适配的位置排版代码。4.根据权利要去2所述的系统，其特征在于，所述模拟器模块具体被配置为：提供多种可选的移动终端设备机型信息，根据被选中的目标机型对应的屏幕参数信息，创建与该所述屏幕参数信息适配的界面模拟区域，以便所述代码编辑器模块生成与所述目标机型适配的位置排版代码。5.根据权利要去2所述的系统，其特征在于，所述第二终端设备通过有线或者无线的方式与所述第一终端设备建立连接。6.根据权利要求5所述的系统，其特征在于，所述代码编辑器模块具体被配置为：检测到第二终端设备连接到所述第一终端设备，且所述模拟器模块处于运行中状态后，触发所述对处于开发中状态的目标界面的模拟请求。7.根据权利要求1所述的系统，其特征在于，所述代码编辑器模块以及模拟器模块运行于同一终端设备中，或者，通过同一终端设备访问。8.根据权利要去7所述的系统，其特征在于，所述代码编辑器模块具体被配置为：提供多种可选的移动终端设备机型信息，并将被选中的目标机型信息、所述目标界面关联的多个界面元素的元素标识，以及对应的素材图像提供给所述模拟器模块；所述模拟器模块具体被配置为：根据所述目标机型信息对应的屏幕参数信息，创建与该所述屏幕参数信息适配的界面模拟区域，以便所述代码编辑器模块生成与所述目标机型适配的位置排版代码。9.根据权利要去1至8任一项所述的系统，其特征...

【专利技术属性】
技术研发人员：伍先飞，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：