CN112241265A - 可视化的页面处理方法和设备 - Google Patents

Abstract

本发明提供了一种可视化的页面配置方法，包括：在页面编辑状态下，展示用户界面，所述用户界面的第一区域展示页面组件，在所述用户界面的第二区域展示待编辑页面；接收用户对页面组件区域中第一组件的拖拽；响应于第一组件被拖拽到第二区域的预定位置，在待编辑页面中预定位置生成所述第一组件对应的第一图形化元素，在待编辑页面上展示第一图形化元素以生成第一编辑页面，确定第一编辑页面对应的JSON文件，保存到数据库。本发明通过拖拽组装工具即可实现页面编辑和生成，无需代码编写和测试等操作，实现了页面编辑和生成的可视化，降低了页面开发对技术人员的技术要求。

Description

可视化的页面处理方法和设备

技术领域

本发明涉及计算机领域，更为具体而言，涉及一种可视化的页面处理方法和设备。

背景技术

网页页面配置的需求越来越多样化，特别是在保险保单等处理领域。不同的保单产品，需要对应的网页完成。传统的保单网页，对于不同的保单单品，也就是，页面中的配置项目不同的网页页面，需要单独的开发项目进行开发，这样的带来的问题，需要的软件开发成本较高，需要开发的代码量也较高，对开发人员的技术要求较高；而且不同的开发项目通常需要不同的软件开发的技术人员进行，对于类似的功能模块，代码复用的程度也较小；此外，传统的网页开发，在网页的全部功能模块在不同技术人员完成开发之后，才能实现页面的展示，如果页面的展示不尽如人意，需要调整的代码工作较高，导致效率较低。因此，亟需一种页面配置对用户可见，对开发人员的要求较低且功能模块复用程度较高的页面生成方案。

发明内容

本发明提供了一种可视化的页面处理方法，通过拖动用户界面的页面工具组件即可实现页面的组装和配置，页面的配置过程对用户可见，非专业技术人员即可实现页面的组装和配置，降低了对开发人员的技术要求；各个组件可以在不同的页面配置中重复使用，组件的复用程度较高。

本发明实施方式第一方面，提供了一种可视化的页面配置方法，，所述方法包括：在页面编辑状态下，展示用户界面，所述用户界面的第一区域展示页面组件，在所述用户界面的第二区域展示待编辑页面，其中，所述页面组件包括下述的一种或多种组件：容器组件、输入框组件、按钮组件和数据组件；接收用户对所述页面组件区域中第一组件的拖拽；响应于所述第一组件被拖拽到所述第二区域的预定位置，在所述待编辑页面中所述预定位置生成所述第一组件对应的第一图形化元素，在所述待编辑页面上展示所述第一图形化元素以生成第一编辑页面，确定第一编辑页面对应的JSON文件，保存到数据库。

在本发明的一些实施方式中，所述方法还包括：接收用户对所述页面组件区域中第二组件的拖拽；响应所述用户对所述第二组件的拖拽，在所述第一编辑页面中拖拽的结束位置生成所述第二组件对应的第二图形化元素，配置所述第一编辑页面中所述第一图形化元素和第二图形化元素的元素关系，运行得到第二编辑页面对应的JSON文件，将所述JSON文件以预定名称保存到数据库。

在本发明的一些实施方式中，所述配置所述第一编辑页面中所述第一图形化元素和第二图形化元素的元素关系包括：将所述第一编辑页面中的所述第一图形化元素和所述第二图形化元素配置为并列节点关系。

在本发明的一些实施方式中，所述配置所述第一编辑页面中所述第一图形化元素和第二图形化元素的元素关系包括： 将所述第一编辑页面中的所述第一图形化元素和所述第二图形化元素配置为父节点和子节点关系。

在本发明的一些实施方式中，所述第一组件为输入框时，所述输入框的类型包括下述的一种或多种：字符、数字、电子邮箱、日期、时钟和百分数，所述第二组件包括与所述第一组件的类型匹配的数据组件。

在本发明的一些实施方式中，，所述方法还包括：从所述数据库中读取所述JSON文件，运行所述JSON文件生成所述第二编辑页面的图形用户界面，接收第二用户对所述第一图形化元素的输入请求，在第二编辑页面上展示所述第二图形化元素配置的多个备选数据，接收所述第二用户对所述多个备选数据中第一备选数据的选定，将所述第一备选数据展示在所述第一图形化元素的指定区域。

在本发明的一些实施方式中，所述方法还包括：根据所述第一图形化元素和第二图形化元素的元素关系，确定所述第一图形化元素的位置关系。

在本发明的一些实施方式中，所述方法还包括：在所述第一图形化元素和第二图形化元素为父节点和子节点时，将所述第二图形化元素展示在所述第一图形化元素圈定的展示区域内。

本发明实施方式的第二方面，提供一种计算机设备，包括存储器和处理器，其中，存储器，配置为存储有计算机程序；处理器，配置为执行所述所述计算机程序以实现上述的方法。

本发明实施方式的第三方面，提供了一种计算机可读的存储介质，其上存储有计算机指令，所述计算机指令被处理器执行时实现上述的方法。

附图说明

图1示出了根据本发明实施方式的页面配置方法的流程示意图。

图2示出了根据本发明实施方式的用户界面的工具展示截图。

图3示出了根据本发明实施方式的用户界面的工具展示截图。

图4示出了根据本发明实施方式的用户界面的配置页面的截图。

图5示出了根据本发明实施方式的页面组件配置的流程示意图。

图6示出了根据本发明实施方式的页面组件配置的页面截图。

图7示出了根据本发明实施方式的页面组件配置的页面截图。

图8示出了根据本发明实施方式的页面组件配置的页面截图。

图9示出了根据本发明实施方式的页面组件配置的页面截图。

图10示出了根据本发明实施方式的页面组件配置的页面截图。

图11示出了根据本发明实施方式的页面组件配置的页面截图。

图12示出了根据本发明实施方式的对话框的配置方法流程示意图。

图13示出了根据本发明实施方式的对话框组件配置的页面截图。

图14示出了根据本发明实施方式的计算机设备的结构示意图。

具体实施方式

现参考示例性的实施方式详细描述本发明，一些实施例图示在附图中。以下描述参考附图进行，除非另有表示，否则在不同附图中的相同数字代表相同或类似的元件。以下示例性实施方式中描述的方案不代表本发明的所有方案。相反，这些方案仅是所附权利要求中涉及的本发明的各个方面的系统和方法的例子。

参见图1，示出了根据本发明实施方式的一种可视化的页面配置方法的流程示意图。所述方法包括：步骤S110、步骤S120和步骤S130。下面将结合具体的例子对上述步骤进行说明。

S110，在页面编辑状态下，展示用户界面，所述用户界面的第一区域展示页面组件，所述用户界面的第二区域展示待编辑页面，其中，所述页面组件包括下述的一种或多种组件：容器组件、输入框组件、按钮组件和数据组件。

在本发明的实施方式中，页面的配置是可视化的。页面的配置可封装在软件中，例如，图2所示的UI studio。 软件可以在个人电脑或者移动设备等设备上运行。在页面编辑状态，展示如图2和图3所示的用户界面。在如图2所示的用户界面中，第一区域，即用户界面左侧的区域，展示页面的各个配置组件，例如，可包括下述的一类或类工具组件：容器组件、输入框组件、按钮组件和数据组件。在另外一些实施例中，组件还可包括对话框组件。在一些具体的实施例中，待编辑页面为保单产品页面。

在第一区域所展示的组件中，输入框组件、按钮组件和数据组件可以认为是页面配置组件中的基本组件，在这些基本组件中，不可以再包含其他的组件。与输入框等基本组件不同，在容器组件之中，还可以配置其他容器组件，例如，可以在容器组件中设置输入框组件和数据组件或者按钮组件等。容器组件可包括不同种类，如图2所示，组件容器可包括update panel， cell， smart， card， card group， tab， buttonbox。其中，updatepancel容器组件，可以在其中配置有关刷新所需的基本组件。Cell容器组件，可以在其中配置有关表格输入的组件。smart容器组件，可以在其中配置参数，将多个输入框进行智能布局，例如，向smart容器中传入参数2行和3列，可以将原本1行1个输入框共6个输入框的布局，转换为2行输入框，每行3个输入框的布局。card和card group容器参数，可以在其中配置输入框组件和数据组件等基本组件。tab容器组件，可以用于页面的标签配置的基本组件。buttonbox容器组件，可以在其中配置按钮组件等。

输入框组件可包括UI search, search CT, 英文字符、阿拉伯数字、星号、邮件地址、小数点数字、日期、百分数、时钟、属性选定框（包括圆圈加点、矩形框内加对号以及矩形框内一半加黑形式）、文字输入区域和标签label。按钮组件可包括按钮形式的组件和link形式的按钮组件。数据组件可包括：阿拉伯数字、星号、邮箱、小数点数字、日期、百分数、时钟、选定、文字输入区域和label标签等类型。数据组件还可包括如图3所示的表格形式的数据。

S120，在所述第一区域接收用户对所述页面组件中第一组件的拖拽。

在本发明的实施方式中，用户界面的第一区域展示的页面组件是可选择的。例如，可以选择工具组件中的容器组件、输入框组件、按钮组件和数据组件中的一种类型，然后在该类型的组件中选择一种具体的工具组件。在一些具体的实施例中，可以采用鼠标点击并拖动的方式进行选定和拖拽。在另外一些具体的实施例中，对于触屏设备，可以采用用户的手部点击并拖动的方式进行选定和拖拽。

选定的工具组件可以被拖拽到用户界面的第二区域，也可以拖动到第一区域的其他位置，例如，可以拖到工具组件的其他位置。输入框组件区域的多个工具组件可以根据各个用户的使用习惯或者使用频率拖动，改变它们的摆放位置。

S130，响应于所述第一组件被拖拽到所述第二区域的预定位置，在所述待编辑页面中所述预定位置生成所述第一组件对应的第一图形化元素，在所述待编辑页面上展示所述第一图形化元素以生成第一编辑页面，确定第一编辑页面对应的JSON文件，保存到数据库。

在本发明的实施方式中，响应于第一组件被拖拽到第二区域的预定位置，在该待编辑页面中的该预定位置生成第一组件对应的第一图形化元素，第一图形化元素可以认为是该第一组件的实例。该第一组件所具有的功能以及其所配置的选项，在该待编辑页面上嵌入的第一图形化元素都有对应的功能以及配置选项。

在该待编辑的页面上展示该第一图形化元素，使得该待编辑的页面更新，生成第一编辑页面，然后确定第一编辑页面对应的JSON文件，保存到数据库。例如，拖拽阿拉伯数字的输入组件到第二区域的待编辑页面，在拖拽到预定位置后，在该预定位置生成阿拉伯数字对应的输入项，也就是说，在该待编辑页面中展示出该阿拉伯数字输入项，更新后的待编辑页面，为第一编辑页面，生成第一编辑页面对应的JSON文件，保存到数据库。

在一些具体的实施方式中，本发明实施方式提供的方法还包括：接收用户对所述页面组件中第二组件的拖拽；响应于第二组件被拖拽到所述第二区域，在第一编辑页面中所述第二组件拖拽的结束位置生成第二组件对应的第二图形化元素，在第一编辑页面中展示所述第二图形化元素形成第二编辑页面，配置第二编辑页面中第一图形化元素和第二图形化元素的元素关系， 确定所述第二编辑页面对应的JSON文件，将所述JSON文件以预定名称保存到数据库。需要说明的是，第二组件可以是页面组件中的任意一个组件，可以是与第一组件相同的工具组件，也可以是与第一组件不相同的工具组件，本发明实施方式对此不做限定。

本发明的实施方式，在页面的编辑状态中，实时的展示页面的各个配置组件，在页面的组件配置中，使得用户所见即所得，无需代码开发以及测试等流程，即可实现页面的配置，提高了页面开发的效率，同时也降低了页面配置中对开发人员的技术要求，特别是在需要开发的页面种类较多的场景下，能够大幅提高页面开发的效率；工具区域中展示的页面组件可重复利用，提高了页面配置中组件的复用效率，从而提高了页面配置的开发效率。

在本发明的一些实施方式中，配置第二编辑页面中所述第一图形化元素和第二图形化元素的元素关系包括：将第二编辑页面中的第一图形化元素和第二图形化元素配置为并列节点关系。并且，还可以根据第一图形化元素和第二图形化元素的元素关系，确定第一图形化元素和第二图形化元素在页面的展示位置。例如，第一图形化元素为输入框，第二图形化元素也为输入框的情况下，将第一图形化元素和第二图形化元素配置可为并列节点关系，也就是说，第一图形化元素和第二图形化元素为第二编辑页面对应的JSON文件中的并列节点，相应地，在第二编辑页面上，第一图形化元素和第二图形化元素展现为两个并列的输入框。在一种具体的实施例中，可以是图4所示的并列的输入框。

在本发明的另外一些实施方式中，配置第二编辑页面中第一图形化元素和第二图形化元素的元素关系包括：将第二编辑页面中的所述第一图形化元素和所述第二图形化元素配置为父节点和子节点关系。在确定第一图形化元素和第二图形化元素的元素关系后，还可以根据二者的元素关系，确定二者在页面的展示位置，以及二者之间的相对位置关系。例如，在第一图形化元素对应Card容器组件（该容器组件可以包括多个基本组件，例如，多个输入框），第二图形化元素对应输入框组件的情况下，如果需要将输入框组件作为card容器组件中的一个组件，也就是说，可以将第一图形化组件和第二图形化组件配置为父节点和子节点关系，以使得第二图形化元素呈现在第一图形化元素所圈定的区域中。

在本发明的一些实施方式中，步骤S110中的第一组件可以为输入框，所述输入框的类型包括下述的一种或多种：字符、数字、电子邮箱、日期、时钟和百分数，所述第二组件包括与所述第一组件的类型匹配的数据组件。例如，第一组件的输入框的类型为日期组件，那么对应的数据组件为日期类型的组件。

在本发明的一些实施方式中，除了包含上述的页面编辑状态之外，还可包括页面的运行方法。具体而言，还包括：从所述数据库中读取第二编辑页面对应的JSON文件，运行所述JSON文件生成所述第二编辑页面的图形用户界面，接收第二用户对所述第一图形化元素的输入请求，在第二编辑页面上展示所述第二图形化元素提供的多个备选数据，接收所述第二用户对所述多个备选数据中第一备选数据的选定，将所述第一备选数据展示在所述第一图形化元素的指定区域。需要说明的是，第二用户可以是与第一用户不同的用户，也可以是与第一用户相同的用户。例如，通过使用本发明提供的页面组装方法，普通保险代理就可以在预设的权限范围内自由组合工具组件生成对应的保单产品。又例如，第一用户可以是组装页面的用户，第二用户可以是使用该组装页面的其他用户。在配置的页面为保单产品的情况下，第一用户可以是有权限配置保单产品的用户，而第二用户可以使用该已经配置好的保单产品的保险代理等。

本发明的实施方式还提供一种页面组件的配置方法。如图5所示，示出了根据本发明实施方式的页面组件的配置方法的流程示意图。该方法可包括：步骤S510到步骤S560，接下来结合具体的实施例对上述步骤进行说明。

S510，展示用户界面，所述用户界面的第一区域展示页面组件，所述用户界面的第二区域展示待编辑页面。

在本发明的实施方式中，用户界面是如图2和图3所示的用户界面，左侧的第一区域展示页面组件工具，右侧的第二区域展示待编辑页面。第一组件可以是第一区域展示的页面组件中的任意一个组件。在一些具体的实施例中，待编辑页面为保单产品页面。关于用户页面的第一区域和第二区域的描述，可以参考上述的S110的相关描述。

S520，在所述第一区域接收用户对所述页面组件中第一组件的拖拽。

在本发明的实施方式中，第一区域展示的页面组件，可以接收用户的拖拽，例如，可以是鼠标的拖拽等。关于步骤S520的相关描述，可以参考上面的步骤S120的相关描述。

S530，响应于所述第一组件被拖拽到所述第二区域的预定位置，在所述待编辑页面中所述预定位置生成所述第一组件对应的第一图形化元素。

在本发明的实施方式中，第一组件被拖拽到第二区域的预定位置后，在该预定位置生成第一组件对应的第一图形化元素，相应地，更新对应的编辑页面对应的JSON文件，更新JSON文件中第一图形化元素的布局信息。

S540，接收对所述第一图形化元素的配置请求。

在本发明的实施方式中，在第二区域的编辑页面展示第一图形化元素，该第一图形化元素是可编辑的。在一些实施例中，用户可以采用鼠标点击该第一图形化元素的方式，作为对该图形化元素的配置请求。在另外一些实施例中，采用其他其他方式产生对该第一图形化元素的配置请求，例如，双击或其他选定方式。

S550，在所述用户界面的第一编辑页面的上面叠加展示所述第一图形化元素的配置页面，所述配置页面位于第一视图，为可编辑状态，所述第一编辑页面位于所述第一视图之下的第二视图，为不可编辑状态。

在本发明的实施方式中，在接收到用户对编辑页面的图形化元素的配置请求之后，在该编辑页面的上面叠加展示该图形化元素的配置页面，该配置页面可包括配置项目，该配置页面覆盖该编辑页面的一部分。配置项目可包括：属性配置、字段配置、模型配置和事件配置中的一种或多种。在一些实施例中，配置项目可包括属性配置、字段配置和模型配置，例如，图6到图10所示。在另外一些实施例中，配置项目可包括属性配置、模型配置和事件配置，如图11所示。

如图6所示。图6所示的用户界面中，展示的是对标识符为SELECT_CODE_151392603676的图形化元素的的配置页面，配置项目包括属性配置、字段配置和事件配置，其展示的是对该元素组件的属性配置页面，主要展示的是其基本属性，例如，可包括code、default value、disabled、input class、input/output、isinitchange、key、label、required、style class、value和visible。需要说明的是，对于一个工具组件对应的图形化元素，其基本属性具有默认的属性，也就是说，无需配置页面的用户手动配置这些属性。在具体的应用场景下，可以根据需要对这些基本属性中的一些属性进行相应的配置。

在另外一些实施方式中，除了展示图6所示的基本属性配置之后，还可同时展示如图7所示的基本属性和高级属性。图7所示的高级属性可包括：Customization Field，AutoChoose First，Auto Complete，Codetable，Colspan, Condition Map, CustomizationObject relation, Event target code, Format, Help text, Ingorepagereadonly,layout, max length message, max length, min length message, min length, placeholder, process option, mask, required message, show blank option, show valuetooltip, style, validation group, value to string, width, width allocation。这些高级属性都有默认属性，可以根据具体的应用需求对属性进行配置。这些属性配置还可以与事件配置关联。例如，在将组件的事件配置为刷新事件时，该刷新事件可涉及关联的属性的刷新。

在图6和图7中，配置页面所在的第一视图展示在编辑页面所在的第二视图之上，配置页面覆盖部分编辑页面，焦点框位于第一视图的情况下，配置页面的项目处于可编辑状态，而编辑页面没有处于节点框，处于不可编辑状态。处于可编辑状态的配置页面可以接收用户的编辑操作。

在一些实施方式中，选择字段配置，可以展示如图8所示的界面。在字段配置的下方，展示有许多的候选项，可以从候选项中对图形化元素的字段进行配置。在图8所示的例子中，为该图形化元素选定的是Category Type类型的字段。在确定该字段属性后，编辑页面对应的JSON数据文件会相应地更新。

在一些实施方式中，选择事件配置，可以展示如图9和图10所示的配置页面。在图9所示的页面中，在右侧的展示区域，展示了事件的触发点的配置选项和事件的触发选项，点击事件的方框圈出的按钮，可以在右侧的区域中展示该事件对应的源代码。而且，该右侧的区域中展示的源代码是可以编辑的，也就是说，用户可以对源代码进行修改、保存和运行，从而改变事件的相关操作和结果。在一些实施例中，事件配置可包括该组件的点击、双击、左击和右击事件，还可包括在渲染前后的相应事件的配置。在一些实施例中，可以为该组件的配置如图9右侧代码所示的事件。在另外一些实施例中，也可以为该组件设置如图10右侧代码所示的事件。也就是说，在为组件对应的图形化元素配置事件后，在接收到触发点对应的操作后，执行事件对应的操作。在一些实施例中，还可以为组件同时配置图9和图10所示的动作事件。在接收到触发操作后，按顺序执行图9和图10所示的动作。

S560，接收用户对所述配置页面中展示的所述第一图形化元素的配置项目的选定，根据所述配置项目的选定，在所述配置页面的预定区域展示所述选定的配置项目的候选项，接收所述用户对所述候选项的输入，根据所述输入更新所述第一编辑页面中关于所述第一图形化元素的JSON数据文件。

在本发明的实施方式中，配置页面展示的配置项目的是可编辑的，在配置的过程中，可以选定配置项目，例如，选定图6所示的属性配置，选定后，在配置页面的一部分展示属性配置的候选项，例如，图6所示的基本属性的候选项或者图7所示的高级属性的候选项。用户可以针对这些候选项输入相应的配置信息。然后，根据用户的针对候选项的输入，更新第一编辑页面中关于该第一图形化元素的JSON数据文件。

在一些实施例中，例如，在图8所示的例子中，为该图形化元素选定的是CategoryType类型的字段。在确定该字段属性后，编辑页面对应的JSON数据文件会相应地更新。

在一些实施例中，在图9和图10所示的例子中，可以对配置页面中展示的配置项目的候选项，例如触发点和定义事件等进行输入配置。在完成输入配置后，编辑页面对应的JSON数据文件会相应地更新。

在一些实施方式中，所述配置项目为事件配置时，所述在所述配置页面的预定区域展示所述选定的配置项目的候选项包括：在所述配置页面的预定区域展示所述事件配置的触发选项和事件动作，所述触发选项包括预设的触发点，所述事件动作包括预设的动作选择。例如，如图9所示的界面，触发点为onchange，定义事件为定制操作custom Action。

在一些实施方式中，本发明的方法还包括：在所述预定区域还展示所述事件动作对应的可编辑源代码，接收所述用户对所述可编辑源代码的编辑操作，更新所述可编辑源代码，将更新的可编辑源代码保存到所述事件动作。例如，如图9所示，通过点击定义事件的方框按钮，可以查看该事件的源代码，展示在右侧矩形框内的源代码。右侧的源代码为可编辑状态，用户可以手动修改其中的代码，保存修改后的代码。本发明实施方式提供的这种事件配置方式，用户了除了可以选择预设的代码之后，还可以灵活的对事件动作代码进行修改，这样的配置方式提高了事件动作配置的灵活性。

在本发明的实施方式中，所述第一编辑页面除了包括第一图形化元素之外，还可以包括第二图形化元素。在第一图形化元素的事件配置中，还可以涉及与第一图形化元素关联的第二图形化元素。第一图形化元素的更新的源代码与第二图形化元素关联，本发明的方法还可包括：根据所述更新的可编辑源代码，更新所述第一编辑页面中关于所述第二图形化元素的配置项目。

在一些实施例中，容器组件还可以包括模型配置，如图11所示。上面已经提到容器组件中可设置多个基本组件，这些基本组件可包括属性配置项目、字段配置项目和事件配置项目等。容器组件对应的图形化元素的模型配置项目为该容器组件中基本组件项目的字段配置项目。例如，容器card为保单的话，其中的输入框的字段配置为保单号，那么容器card的模型配置为该保单号。

本发明实施方式还提供一种页面中对话框的配置方法，如图12所示，示出了一种页面中对话框的配置方法的流程示意图。该方法可包括：步骤S1210、步骤S1220和步骤S1230，接下来结合具体的实施例对上述步骤进行说明。

S1210，在用户界面的第一区域展示页面配置的工具组件，在用户界面的第二区域展示待编辑页面，其中，所述工具组件包括对话框，所述待编辑页面占据所述第二区域的整个区域。

在本发明的实施方式中，用户界面的第一区域展示页面配置的工具组件，第二区域展示待编辑页面，如图2和图3所示。工具组件可包括对话框。如图2和图3所示，待编辑页面占据第二区域的整个区域，也就是说，待编辑页面平铺全面覆盖在第二区域。

S1220，在所述第一区域接收用户对所述对话框组件中第一对话框组件的拖拽。

在本发明的实施方式中，第一区域展示的对话框可以被选定和拖拽，例如，可以采用鼠标点击并拖动的方式实现。关于步骤1220的描述，可以参考上面S520和S120的相关描述。

S1230，在所述第一对话框组件拖拽到所述第二区域时，将所述第二区域中的待编辑页面所在的第一视图缩小，在所述第二区域中所述第一视图下面的的第二视图中展示所述第一对话框组件对应的第一图形化元素。

在本发明的实施方式中，拖拽的对话框组件在待编辑页面是不可见的，也就是说，拖拽到待编辑页面的对话框不会在待编辑页面上展示，而是在运行该待编辑页面时，在满足预定触发条件的情况下，才出现在页面上。在对话框的配置过程中，被拖拽的对话框被拖拽到第二区域之后，不是像诸如输入框组件、数据组件之类的工具组件那样，呈现在待编辑页面的视图之上，而是将第二区域中的待编辑页面所在的第一视图缩小，在第二区域中第一视图下面的的第二视图中展示第一对话框组件对应的第一图形化元素。例如，如图13所示的财产险费率试算页面下面视图中展示的DIALOG对话框。页面视图和对话框在第二区域中重叠展示，依次排开，在前的视图部分覆盖后面的视图，部分展示对话框的内容。

在本发明的一些实施方式中，所述方法还包括：在第一区域接收用户对所述对话框组件中第二对话框的拖拽；在所述第二对话框拖拽到所述第二区域时，在所述第二视图下面的第三视图中展示所述第二对话框对应的第二图形化元素。如图13所示，在拖拽第一对话框到第二区域之后，在页面之下展示第一对话框的图形化元素，在另拖拽第二对话框到第二区域之后，在该第一对话框图形化元素之下展示第二对话框对应的第二图形化元素。需要说明的是，除了可拖拽第二对话框到第二区域，还可以拖拽第三对话框到第二区域。在图13中，在页面之下展示了三个对话框界面。待编辑页面所在的第一视图、第一图形化元素所在的第二视图、第二图形化元素所在的第三视图可以切换，也就是说，可以通过输入设备选定第一视图、第二视图或第三视图，将第一视图、第二视图或第三视图中的一个视图作为焦点，进行编辑。也就是说，通过切换视图，实现对对话框和页面的配置。通过这种切换视图的可视化方式对不在页面直接展示的对话框进行配置，页面不可见元素仍然可以直观配置，让用户所见即所得，提升了用户的配置体验。

在本发明的一些实施方式中，所述方法还包括：接收所述用户对所述第二视图中第一图形化元素的选定，将所述第一图形化元素对应的第二视图作为焦点视图展示，在所述焦点视图上对所述第一图形化元素的触发条件进行配置，将所述第一视图和第三视图展示为所述第二视图的背景视图。如上所述，第二区域中的第一图形化元素所在的第二视图、页面所在的第一视图可以切换，切换后的视图作为焦点视图，另外的视图作为背景视图。在该焦点视图上可以对对话框对应的图形化元素的触发条件进行配置。

在一些实施方式中，第一图形化元素对应的第二视图以部分覆盖第二图形化元素对应的第三视图，保留所述第三视图对应的第二图形化元素的部分文字标识的形式展示。例如，如图13所示，保留第二图形化元素中的DIALOG文字字样。

在一些实施方式中，在同时对多个对话框进行配置的情况下，在第二区域存在多个对话框图形化元素，第二视图中的第一图形化元素和第三视图中的第二图形化元素以颜色区分展示。例如，如图13所示，页面之下的对话框图形化元素左上角的矩形条的颜色是不同的。在其他实施方式中，还可以采用其他方式的颜色区分，例如，将整个对话框边缘以不同颜色区分展示。

如上所示，第一区域展示的工具组件除了包括对话框组件之外，还包括：容器组件、输入框组件、按钮组件和数据组件中的一种或多种，所述工具组件配置有对应的模型和事件，还可以配置有属性和字段等。

如上所述，本发明实施方式不仅涉及对话框组件的配置，还涉及其他组件的配置。本发明的方法还包括：在第一区域接收所述用户对所述工具组件中容器组件、输入框组件、按钮组件和数据组件中第一组件的拖拽；在所述第二区域的待编辑页面中生成所述第一组件对应的第三图形化元素；接收所述用户对所述第三图形化元素的选定，展示所述第三图形化元素对应的配置项目，所述配置项目包括模型和事件。

在一些实施方式中，在所述焦点视图上对所述第一图形化元素的触发条件进行配置包括：将所述第一图形化元素的触发条件设置为与所述第三图形化元素的模型或事件关联。也就是说，对话框图形化元素的触发条件可以设置为与其他工具组件的模型或事件关联。例如，可以设置在输入框的模型为预定模型时，弹出对话框给用户提示。又例如，在某一工具组件的事件为预定事件时，弹出对话框，以便向用户提示。

在一些实施方式中，图13所示的3个对话框元素，可以是同一页面的三个并行的对话框。在另外一些实施方式中，图13所示的3个对话框元素，可以是递进的三个对话框，例如，第二对话框是第一对话框的选择为预定选择时弹出，第三对话框是在第二对话框的选择为预定选择时弹出。

本发明实施方式还提供一种计算机设备。如图14所示，该计算机设备1400可包括存储器1401和处理器1402，其中，存储器1401存储有计算机程序，处理器1402配置为执行这些计算机程序以实现上述的方法。所述计算机设备可以是个人电脑、膝上电脑或者其他便携式的计算机设备。

本发明实施方式还提供计算机可读的存储介质，其上存储有计算机程序，所述计算机程序被执行时实现上述的方法。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可借助软件结合硬件平台的方式来实现。基于这样的理解，本发明的技术方案对背景技术做出贡献的全部或者部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，智能手机或者网络设备等）执行本发明各个实施例或者实施例的某些部分所述的方法。

本发明说明书中使用的术语和措辞仅仅为了举例说明，并不意味构成限定。本领域技术人员应当理解，在不脱离所公开的实施方式的基本原理的前提下，对上述实施方式中的各细节可进行各种变化。因此，本发明的范围只由权利要求确定，在权利要求中，除非另有说明，所有的术语应按最宽泛合理的意思进行理解。

Claims (10)

1.一种可视化的页面配置方法，其特征在于，所述方法包括：

在页面编辑状态下，展示用户界面，所述用户界面的第一区域展示页面组件，在所述用户界面的第二区域展示待编辑页面，其中，所述页面组件包括下述的一种或多种组件：容器组件、输入框组件、按钮组件和数据组件；

接收用户对所述页面组件区域中第一组件的拖拽；

响应于所述第一组件被拖拽到所述第二区域的预定位置，在所述待编辑页面中所述预定位置生成所述第一组件对应的第一图形化元素，在所述待编辑页面上展示所述第一图形化元素以生成第一编辑页面，确定第一编辑页面对应的JSON文件，保存到数据库。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收用户对所述页面组件区域中第二组件的拖拽；

响应所述用户对所述第二组件的拖拽，在所述第一编辑页面中拖拽的结束位置生成所述第二组件对应的第二图形化元素，配置所述第一编辑页面中所述第一图形化元素和第二图形化元素的元素关系，运行得到第二编辑页面对应的JSON文件，将所述JSON文件以预定名称保存到数据库。

3.根据权利要求2所述的方法，其特征在于，所述配置所述第一编辑页面中所述第一图形化元素和第二图形化元素的元素关系包括：

将所述第一编辑页面中的所述第一图形化元素和所述第二图形化元素配置为并列节点关系。

4.根据权利要求2所述的方法，其特征在于，所述配置所述第一编辑页面中所述第一图形化元素和第二图形化元素的元素关系包括：

将所述第一编辑页面中的所述第一图形化元素和所述第二图形化元素配置为父节点和子节点关系。

5.根据权利要求2所述的方法，其特征在于，所述第一组件为输入框时，所述输入框的类型包括下述的一种或多种：字符、数字、电子邮箱、日期、时钟和百分数，所述第二组件包括与所述第一组件的类型匹配的数据组件。

6.根据权利要求5所述的方法，其特征在于，所述方法还包括：

从所述数据库中读取所述JSON文件，运行所述JSON文件生成所述第二编辑页面的图形用户界面，

接收第二用户对所述第一图形化元素的输入请求，在第二编辑页面上展示所述第二图形化元素配置的多个备选数据，接收所述第二用户对所述多个备选数据中第一备选数据的选定，将所述第一备选数据展示在所述第一图形化元素的指定区域。

7.根据权利要求2所述的方法，其特征在于，所述方法还包括：

根据所述第一图形化元素和第二图形化元素的元素关系，确定所述第一图形化元素的位置关系。

8.根据权利要求7所述的方法，其特征在于，所述方法还包括：

在所述第一图形化元素和第二图形化元素为父节点和子节点时，将所述第二图形化元素展示在所述第一图形化元素圈定的展示区域内。

9.一种计算机设备，包括存储器和处理器，其中，

存储器，配置为存储有计算机程序；

处理器，配置为执行所述所述计算机程序以实现权利要求1到8所述的方法。

10.一种计算机可读的存储介质，其上存储有计算机指令，所述计算机指令被处理器执行时实现权利要求1到8所述的方法。

Images