用于适配表单的方法和系统与流程

本公开涉及用于适配表单的方法和系统。

背景技术：

在一站式web研发平台中，中后台产品通常存在大量表单编辑和信息浏览的场景。当这些编辑/信息对其父页面存在强依赖性(即，从属于其父页面)时，通常采用模态弹框来呈现。模态弹框一般用来做一项或多项任务。例如，当在第一页面中需要选择你的学校时，由于学校数量众多而不适宜直接放在其父页面中，同时也因为它从属于这个父页面而不适宜设计成单独的新页面，所以一般使用模态弹框来呈现这些学校。

技术实现要素：

根据本公开的第一方面，提供了一种适配表单的方法，包括：显示第一页面；接收在所述第一页面上的用于激活第一表单的输入，其中所述输入是用户对所述第一页面上的控件的激活；以及响应于接收到所述输入，在显示器上显示包括所述第一表单的第一模态弹框，其中所述第一模态弹框是动态地唤出的并且与所述第一页面的宽度和/或高度相同。

根据本公开的一实施例，所述第一模态弹框从所述显示器的一边缘处拉出，从而显示在所述显示器上。

根据本公开的另一实施例，在所述边缘是显示器的左侧或右侧边缘时，所述第一模态弹框与所述第一页面的高度相同且其宽度小于或等于所述第一页面的宽度；或者在所述边缘是显示器的顶侧或底侧边缘时，所述第一模态弹框与所述第一页面的宽度相同且其高度小于或等于所述第一页面的高度。

根据本公开的又一实施例，在所述第一模态弹框与所述第一页面的宽度或高度不同的情况下，这样宽度差或高度差用于为所述第一页面的侧边栏菜单腾出显示空间。

根据本公开的又一实施例，所述第一页面的未被所述第一模态弹框覆盖的部分以与所述第一模态弹框不同的方式来显示。

根据本公开的又一实施例，以灰色来显示所述第一页面的未被所述第一模态弹框覆盖的部分，从而示出所述第一页面不是当前可交互的。

根据本公开的又一实施例，在所述第一模态弹框上接收到用于激活第二表单的输入之后，在所述显示器上显示包括所述第二表单的第二模态弹框，所述第二模态弹框以所述第一模态弹框为其父页面。

根据本公开的又一实施例，在接收到所述用户在所述第一模态弹框上的确认输入后，取消所述第一模态弹框的显示并返回且刷新所述第一页面，以在所述第一页面上反映对所述第一表单的编辑。

根据本公开的又一实施例，在接收到所述用户在所述第一模态弹框上的取消或关闭输入后，确定所述用户是否对所述第一表单作出了编辑，并且如果所述用户对所述第一表单作出编辑，则弹出第三弹框以供所述用户确认是否保存所述编辑；以及如果所述用户没有对所述第一表单作出编辑，则直接返回所述第一页面。

根据本公开的第二方面，提供了一种适配表单的系统，包括：接收组件，其被配置成接收在第一页面上的用于激活第一表单的输入；以及显示组件，其被配置成在显示器上显示所述第一页面以及包括所述第一表单的第一模态弹框，其中所述第一模态弹框与所述第一页面的宽度和/或高度相同。

根据本公开的一实施例，所述第一模态弹框从所述显示器的一边缘处拉出，从而显示在所述显示器上。

根据本公开的另一实施例，在所述边缘是显示器的左侧或右侧边缘时，所述第一模态弹框与所述第一页面的高度相同且其宽度小于或等于所述第一页面的宽度；或者在所述边缘是显示器的顶侧或底侧边缘时，所述第一模态弹框与所述第一页面的宽度相同且其高度小于或等于所述第一页面的高度。

根据本公开的又一实施例，在所述第一模态弹框与所述第一页面的宽度或高度不同的情况下，这样宽度差或高度差用于为所述第一页面的侧边栏菜单腾出显示空间。

根据本公开的又一实施例，所述第一页面的未被所述第一模态弹框覆盖的部分以与所述第一模态弹框不同的方式来显示。

根据本公开的又一实施例，以灰色来显示所述第一页面的未被所述第一模态弹框覆盖的部分，从而示出所述第一页面不是当前可交互的。

根据本公开的又一实施例，所述接收组件还被配置成在所述第一模态弹框上接收用于激活第二表单的输入，并且所述显示组件还被配置成响应于这一输入在所述显示器上显示包括所述第二表单的第二模态弹框，所述第二模态弹框以所述第一模态弹框为其第一页面。

根据本公开的又一实施例，所述接收组件还被配置成在接收所述用户在所述第一模态弹框上的确认输入，并且所述显示组件还被配置成响应于这一输入来取消所述第一模态弹框的显示并返回且刷新所述第一页面，以在所述第一页面上反映对所述第一表单的编辑。

根据本公开的又一实施例，所述系统还包括确定组件，所述接收组件还被配置成接收所述用户在所述第一模态弹框上的取消或关闭输入，并且所述确定组件被配置成响应于这一输入来确定所述用户是否对所述第一表单作出了编辑，并且如果所述确定组件确定所述用户对所述第一表单作出编辑，则所述显示组件还被配置成弹出第三弹框以供所述用户确认是否保存所述编辑；以及如果所述确定组件确定所述用户没有对所述第一表单作出编辑，则所述显示组件还被配置成直接返回所述第一页面。

根据本公开的第三方面，提供了一种适配表单的系统，包括：处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行如根据本公开的第一方面所述的方法。

各方面一般包括如基本上在本文参照附图所描述并且如通过附图所解说的方法、装备、系统、计算机程序产品和处理系统。

前述内容已较宽泛地勾勒出根据本公开的示例的特征和技术优势以使下面的详细描述可以被更好地理解。附加的特征和优势将在此后描述。所公开的概念和具体示例可容易地被用作修改或设计用于实施与本公开相同的目的的其他结构的基础。此类等效构造并不背离所附权利要求书的范围。本文所公开的概念的特性在其组织和操作方法两方面以及相关联的优势将因结合附图来考虑以下描述而被更好地理解。每一附图是出于解说和描述目的来提供的，且并不定义对权利要求的限定。

附图说明

为了能详细理解本公开的以上陈述的特征所用的方式，可参照各方面来对以上简要概述的内容进行更具体的描述，其中一些方面在附图中解说。然而应该注意，附图仅解说了本公开的某些典型方面，故不应被认为限定其范围，因为本描述可允许有其他等同有效的方面。不同附图中的相同附图标记可标识相同或相似的元素。

图1是解说根据本公开的各方面的适配表单的示例方法的流程图。

图2是解说根据本公开的各方面的适配表单的进一步示例方法的流程图。

图3是解说根据本公开的各方面的适配表单的示例系统的组件框图。

图4是解说根据本公开的各方面的适配表单的另一示例系统的示图。

图5-8是解说根据本公开的各方面的示例用户界面截图。

具体实施方式

常规模态弹框容量很小，只能承载较少的表单项或信息量。当需要承载的信息量较多时，模态弹框窗口会出现横纵滚动条，这没有充分利用屏幕的可用显示空间，影响了用户的阅读和操作体验，并降低了效率。本公开的各实施例针对但不限于这些缺陷作出了改进方法和系统。

以下结合附图1-5阐述的详细描述旨在作为各种配置的描述，而无意表示可实践本文中所描述的概念的仅有的配置。本详细描述包括具体细节以提供对各种概念的透彻理解。然而，对于本领域技术人员将显而易见的是，没有这些具体细节也可实践这些概念。

现在参考图1-8来解说根据本公开的各方面的适配表单的方法和系统的示例。

如图1所示，其示出了根据本公开的各方面的适配表单的示例方法100的流程图。在框110处，方法100包括显示第一页面。在一示例中，当在开发平台上开发业务时，可以显示与相关的第一页面。在该示例中，第一页面上具有用于供用户激活以显示第一表单的控件。例如，图3的显示组件304可以被配置成显示第一页面。

在框120处，方法100包括接收在第一页面上的用于激活第一表单的输入。在一实施例中，所述输入是用户对所述第一页面上的控件的激活。在该实施例中，所述第一表单从属于所述第一页面以使得所述第一页面是所述第一表单的父页面。例如，参考图3，其示出了根据本公开的各方面的包括接收组件302和显示组件304的示例适配表单系统300的组件框图。在该示例中，接收组件302可以被配置成接收在第一页面上的用于激活第一表单的输入。

在框130处，方法100包括响应于接收到所述输入，在显示器上显示包括所述第一表单的第一模态弹框，其中所述第一模态弹框是动态地唤出的并且与所述第一页面的宽度和/或高度相同。例如，图3的显示组件304可以被配置成在显示器上显示包括所述第一表单的第一模态弹框。

在一实施例中，所述第一模态弹框是从所述显示器的一边缘处拉出的，从而显示在所述显示器上。在该实施例中，第一模态弹框可以如同“抽屉”一样从显示器的顶侧、底侧、左侧或右侧边缘拉出，以便显示在显示器上。例如，参考图3，显示组件304可被配置成使所述第一模态弹框从显示器的一边缘处拉出，从而显示在所述显示器上。

在进一步的实施例中，当所述第一模态弹框从显示器的左侧或右侧边缘拉出时，所述第一模态弹框与所述第一页面的高度相同且其宽度小于或等于所述第一页面的宽度；当所述第一模态弹框从显示器的顶侧或底侧边缘拉出时，所述第一模态弹框与所述第一页面的宽度相同且其高度小于或等于所述第一页面的高度。

此外，在更进一步的实施例中，在所述第一模态弹框与所述第一页面的宽度或高度不同的情况下，这样宽度差或高度差用于为所述第一页面的侧边栏菜单(诸如左边栏菜单、右边栏菜单、顶边栏菜单、底边栏菜单，等等)腾出显示空间。

在又一实施例中，所述第一页面的未被所述第一模态弹框覆盖的部分以与所述第一模态弹框不同的方式来显示。例如，可以用灰色来显示所述第一页面的未被所述第一模态弹框覆盖的部分，从而示出所述第一页面不是当前可交互的。

图2示出了根据本公开的各方面的适配表单的进一步示例方法200的流程图。

如图2所示，方法200可包括在框210，在第一模态弹框上接收输入。当所述输入是用于激活第二表单的输入时，方法200包括在框220处，在显示器上显示包括所述第二表单的第二模态弹框。在一实施例中，所述第二模态弹框以所述第一模态弹框为其父页面。

当所述输入是确认输入时，方法200可包括在框230，取消所述第一模态弹框的显示并返回且刷新所述第一页面，以在所述第一页面上反映对所述第一表单的编辑。例如，参考图3，在接收组件302接收到所述用户在所述第一模态弹框上的确认输入后，显示组件304取消所述第一模态弹框的显示并返回且刷新所述第一页面，以在所述第一页面上反映对所述第一表单的编辑。

当所述输入是取消或关闭输入时，方法200还可包括在框240，确定第一表单是否已被用户编辑。如果所述用户对所述第一表单作出了编辑，则方法200可包括在框250处，弹出第三弹框以供所述用户确认是否保存所述编辑。如果所述用户没有对所述第一表单作出编辑，则方法200可包括在框260处直接返回所述第一页面。例如，参考图3，适配表单系统300还可任选地包括确定组件306。在该示例中，在接收组件302接收到所述用户在所述第一模态弹框上的取消或关闭输入后，确定组件306可以确定所述用户是否对所述第一表单作出了编辑，并且如果所述用户对所述第一表单作出编辑，则显示组件304可以弹出第三弹框以供所述用户确认是否保存所述编辑，以及如果所述用户没有对所述第一表单作出编辑，则显示组件304可以直接返回来显示所述第一页面。

图4是解说根据本公开的各方面的示例适配表单系统400的示意图。如图所示，适配表单系统400包括处理器405和存储器410。存储器410存储有计算机可执行指令，这些指令可由处理器405执行来实现以上结合图1、2、3描述的方法和流程。

下面结合图5-8更详细地解说本公开的一个实施例。图5示出了在第一页面501的截图500。如图5所示，其以示例的方式示出了在开发平台上开发“芝麻信用”相关业务时的第一页面501。如第一页面501所示，“开发阶段”和“测试阶段”已完成，现在正处于“预发阶段”。在该示例中，如控件502所提示的，在第一次发布时，需要填写应用配置信息。为此，用户可以点击第一页面501上的“填写应用配置信息”控件502，以使得弹出第一表单(如图6所示)。

图6示出了，在从用户接收到上述输入后的用户界面截图600。从图6中可以看到，在接收到用户点击“填写应用配置信息”控件502的输入之后，包括第一表单611的第一模态弹框616被弹出并显示在显示器上，并且第一模态弹框616的高度与第一页面501的高度相同。这使得第一模态弹框616能够更充分地利用显示器的可用显示面积，促进用户的阅读和操作体验。

在一些实施例中，第一模态弹框616在第一页面501上打开一个浮层以承载相应的操作，并且它可以允许用户在该弹框上操作，同时阻止页面跳转而打断操作流程。如此，在用户完成第一模态弹框616中的操作之前，用户在该弹框之外的区域的操作(诸如鼠标点击，等等)将是无效的。

在一替换实施例中，如果用户尚未完成第一模态弹框616中的操作并且在该弹框之外作出操作(例如，点击第一页面501，等等)，则可以向用户显示提示，诸如“请先完成第一模态弹框616中的操作”，等等。在一替换实施例中，这一提示需要用户采取关闭操作来关闭以便继续操作第一模态弹框616。在另一替换实施例中，这一提示可以在用户在弹框之外作出操作时显示并随后渐进地自动消失，以使用户无需采取操作来取消该提示。

另外，可以明白，在图6的示例中，第一模态弹框616是从显示器的右侧边缘拉出并向左延伸展开的。在该示例中，第一模态弹框616可以如同“抽屉”一样从显示器的右侧边缘拉出并进一步向左延伸，以显示在显示器上。此外，图6中所示的第一模态弹框616并未延伸显示器的左侧以完全覆盖第一页面501，而是留出一定的显示区域来为第一页面501的侧边栏菜单(诸如，“迭代”、“区块”)腾出显示空间。如可看到的，在图6的示例中，第一模态弹框616与第一页面601的宽度差(图6中的灰色部分)被用于为第一页面501的侧边栏菜单(诸如，“迭代”、“区块”等等)腾出显示空间。在该实施例中，第一页面501的这些侧边栏菜单是用于示出与第一模态弹框616相关联的部分信息，而非供用户点击以进行相关操作。

此外，本领域技术人员可以明白，在各替换实施例中，第一模态弹框616可以另选地从显示器的顶侧、底侧、左侧边缘拉出并相应地延伸。在这些替换实施例中，第一模态弹框616也可以完全覆盖或部分地覆盖第一页面501。

例如，如上所述，图6中所示的第一模态弹框616与第一页面501的高度相同且其宽度小于第一页面501的宽度。在另一示例中，第一模态弹框616的宽度可以与第一页面501的宽度相同。另外，本领域技术人员可以明白，当第一模态弹框616从显示器的顶侧或底侧边缘拉出时，第一模态弹框616与第一页面501的宽度可以相同且其高度可以小于或等于第一页面501的高度。

在另一示例中，当用户在第一模态弹框616上点击诸如按钮617、文字链接615之类的控件以用于激活第二表单之后，可以在显示器上显示包括该第二表单的第二模态弹框，其中该第二模态弹框以第一模态弹框616为其父页面。例如，第二模态弹框可以按第一模态弹框616重叠在第一页面501之上的相同方式(即，如上所述的方式)重叠在第一模态弹框616之上，从而以叠层方式显示页面501、第一模态弹框616以及第二模态弹框。

在另一示例中，当用户在第一模态弹框616上点击诸如按钮617之类的控件后，第一模态弹框616可以改为完全覆盖第一页面501，并且第二模态弹框可以再次按第一模态弹框616之前重叠在第一页面501之上的相同方式重叠在第一模态弹框616之上。

例如，图7示出了在用户点击第一模态弹框616中的按钮控件“查看质量报告”617之后，第二模态弹框701被重叠在第一模态弹框616之上。在图7的示例中，第二模态弹框701也是从显示器的右侧边缘拉出并向左延伸展开的。并且，图7中所示的第二模态弹框701并未延伸至显示器的左侧以完全覆盖第一模态弹框616，而是留出一定的显示区域来为第一模态弹框616的左侧部分腾出一定的显示空间。在该实施例中，所显示的第一模态弹框616部分(即，灰色部分)用于示出与第二模态弹框701相关联的页面(即，第一模态弹框616)，而非供用户点击以进行相关操作。

此外，从图7中可以看出，第一页面501已被完全覆盖，从而在图7中不可见。在替换实施例中，第一页面501也可以不被完全覆盖，而是如图6所示被第一模态弹框616部分地覆盖，从而第一页面501、第一模态弹框616、第二模态弹框701可以形成“阶梯式”布局。

本领域技术人员还可以明白，还可以存在任何数目的模态弹框来按上述方式或任何其他替换方式层叠在一起。例如，第二模态弹框701上也可以存在相应控件，用户点击这一控件可以唤出第三模态弹框，以此类推。

在另一示例中，当用户完成在第一模态弹框616中的操作并点击“提交审批”按钮614(即，确认输入)时，第一模态弹框616的显示被取消并且返回且刷新第一页面501，以在第一页面501上反映对第一表单611的编辑，例如对应用配置的设定。在该示例中，当用户点击第一模态弹框616上的“取消”按钮613或“关闭”按钮612(即，取消或关闭输入)后，可以确定用户是否对第一表单611作出了编辑。如果用户对第一表单611作出了编辑，则弹出第三弹框(附图中未示出)以供用户确认是否保存所述编辑。在一些实施例中，第三弹框可以是常规模态弹框或根据本公开的各方面的模态弹框。然而，如果用户没有对第一表单611作出编辑，则取消第一模态弹框616的显示并直接返回第一页面501。在一替换实施例中，当用户点击第一模态弹框616上的“取消”按钮613或“关闭”按钮612(即，取消或关闭输入)后，可以默认地保存用户对第一表单611作出的编辑并返回第一页面501，而不唤出第三弹框。

在又一替换实施例中，在图6所示的界面中，用户对第一页面501的点击(例如，对图5中左侧的灰色部分的点击)将被视为对第一模态弹框616的确认或取消操作(即，相当于用户点击“提交审批”按钮614或者“取消”按钮613或“关闭”按钮612)。

图8示出了在用户完成在第一模态弹框616中的操作并点击“提交审批”按钮614之后第一页面501的截图。可以看到，作为对第一表单611的编辑的结果，第一页面501中“填写应用配置信息”控件502已消失，且“完成预发”控件503已启用。

以上具体实施方式包括对附图的引用，附图形成具体实施方式的部分。附图通过说明来示出可实践的特定实施例。这些实施例在本文中也称为“示例”。此类示例可以包括除所示或所述的那些元件以外的元件。然而，还构想了包括所示或所述元件的示例。此外，还构想出的是使用所示或所述的那些元件的任何组合或排列的示例，或参照本文中示出或描述的特定示例(或其一个或多个方面)，或参照本文中示出或描述的其他示例(或其一个或多个方面)。

在所附权利要求书中，术语“包括”和“包含”是开放式的，也就是说，在权利要求中除此类术语之后列举的那些元件之外的元件的系统、设备、制品或过程仍被视为落在那项权利要求的范围内。此外，在所附权利要求书中，术语“第一”、“第二”和“第三”等仅被用作标记，并且不旨在表明对它们的对象的数字顺序。

另外，本说明书中所解说的各操作的次序是示例性的。在替换实施例中，各操作可以按与图1-2所示的不同次序执行，且各操作可以合并成单个操作或拆分成更多操作。

以上描述旨在是说明性的，而非限制性的。例如，可结合其他实施例来使用以上描述的示例(或者其一个或多个方面)。可诸如由本领域普通技术人员在审阅以上描述之后来使用其他实施例。摘要允许读者快速地确定本技术公开的性质。提交该摘要，并且理解该摘要将不用于解释或限制权利要求的范围或含义。此外，在以上具体实施方式中，各种特征可以共同成组以使本公开流畅。然而，权利要求可以不陈述本文中公开的每一特征，因为实施例可以表征所述特征的子集。此外，实施例可以包括比特定示例中公开的特征更少的特征。因此，所附权利要求书由此被结合到具体实施方式中，一项权利要求作为单独的实施例而独立存在。本文中公开的实施例的范围应当参照所附权利要求书以及此类权利要求所赋予权利的等价方案的完整范围来确定。