CN111240661A - 编程页面展示方法、装置、存储介质和计算机设备 - Google Patents

Abstract

本申请涉及一种页面展示方法、装置、计算机可读存储介质和计算机设备，所述方法包括：获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；当发生对所述内容区域中子功能组件的第一目标操作时，确定所述目标操作所指向的第一目标位置；当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处显示与所述子功能组件对应的子功能窗口。本申请提供的方案可以提高用户操作的便利性。

Description

编程页面展示方法、装置、存储介质和计算机设备

技术领域

本申请涉及计算机技术领域，特别是涉及一种编程页面展示方法、装置、计算机可读存储介质和计算机设备。

背景技术

随着计算机技术的发展，出现了越来越多的面向青少年的图形化编程工具，比如麻省理工学院研发的Scratch(一种编程工具)和编程猫研发的源码编辑器等。这些现有的图形编程工具通常包括固定分布的积木区、编辑区、舞台区和素材区，不同的区域提供不同的功能。

然而，目前的这些图形化编程工具的界面布局，功能分区固定，当用户有新的需求，比如需要为调试摄像头或撰写笔记等新功能进行展开展示时，但页面布局已经确定，只能采用弹窗或者新开页面的方式解决。这样，容易造成工具界面的混乱，导致用户操作效率低的问题。

发明内容

基于此，有必要针对现有的图形化编程工具界面易混乱而导致用户操作效率低的技术问题，提供一种编程页面展示方法、装置、计算机可读存储介质和计算机设备。

一种编程页面展示方法，包括：

获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；

当发生对所述内容区域中子功能组件的第一目标操作时，确定所述第一目标操作所指向的第一目标位置；

当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处显示与所述子功能组件对应的子功能窗口。

一种编程页面展示装置，所述装置包括：

获得模块，用于获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；

确定模块，用于当发生对所述内容区域中子功能组件的第一目标操作时，确定所述第一目标操作所指向的第一目标位置；

显示模块，用于当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处展示与所述子功能组件对应的子功能窗口。

一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行以下步骤：

获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；

当发生对所述内容区域中子功能组件的第一目标操作时，确定所述目标操作所指向的第一目标位置；

当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处显示与所述子功能组件对应的子功能窗口。

一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行以下步骤：

获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；

当发生对所述内容区域中子功能组件的第一目标操作时，确定所述目标操作所指向的第一目标位置；

当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处显示与所述子功能组件对应的子功能窗口。

上述编程页面展示方法、装置、计算机可读存储介质和计算机设备，在目标编程页面中设置有内容区域和编程区域，该内容区域中显示有内容容器，内容容器中显示有至少一个的子功能组件，这样，当有新功能上线时，无需考虑在界面中开辟新的空间进行放置，将每个子功能都形成组件灵活搭配并聚合至内容区域中，不侵占原有界面的空间。当发生对子功能组件的第一目标操作时，可将该子功能组件展开为相应的子功能窗口展示。这样，用户可将暂不需要的子功能收起至内容区域中，将需要实时关注的子功能进行拖出成常驻的子功能窗口,可以节省当前展示界面的空间，从而实现用户的个性化布局定制，便于用户灵活操作，大大提高了用户操作的便利性。

附图说明

图1为一个实施例中编程页面展示方法的应用环境图；

图2为一个实施例中编程页面展示方法的流程示意图；

图3为一个实施例中传统的编程页面的结构示意图；

图4为本申请一个实施例中目标编程页面的界面示意图；

图5为一个实施例中容器和子功能组件的不同显示状态的扭转示意图；

图6为一个实施例中在目标编程页面中进行组件化交互的界面示意图；

图7为一个实施例中对目标编程页面进行组件化布局的界面示意图；

图8为一个实施例中重绘制目标编程页面的步骤的流程示意图；

图9为一个实施例中编程页面展示装置的结构框图；

图10为另一个实施例中编程页面展示装置的结构框图；

图11为一个实施例中计算机设备的结构框图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

图1为一个实施例中编程页面展示方法的应用环境图。参照图1，该编程页面展示方法应用于编程页面展示系统。该编程页面展示系统包括终端110和服务器120。终端110和服务器120通过网络连接。终端110具体可以是台式终端或移动终端，移动终端具体可以手机、平板电脑、笔记本电脑等中的至少一种。服务器120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。具体地，用户可通过终端110获得目标编程页面，该目标编程页面包括内容区域和编程区域，该内容区域中显示有内容容器，该内容容器中显示有至少一个子功能组件。当发生对内容区域中子功能组件的第一目标操作时，终端110确定第一目标操作所指向的第一目标位置；当该第一目标位置处于编程区域中时，终端110在第一目标位置处展示与子功能组件对应的子功能窗口。终端110在检测到关闭目标编程页面时，记录目标编程页面中的各容器、以及各子功能组件对应的布局数据并存储；布局数据包括显示状态和位置信息。终端110确定当前登录目标编程页面的用户标识。终端110将用户标识、以及目标编程页面对应的布局数据发送至对应的服务器120，发送的用户标识和布局数据用于指示服务器120进行关联存储。

如图2所示，在一个实施例中，提供了一种编程页面展示方法。本实施例主要以该方法应用于上述图1中的终端110来举例说明。参照图2，该编程页面展示方法具体包括如下步骤：

S202，获得目标编程页面；目标编程页面包括内容区域和编程区域，内容区域中显示有内容容器，内容容器中显示有多于一个子功能组件。

其中，目标编程页面是用于执行编程操作的页面。在该目标编程页面中，用户可编辑代码并通过终端执行该代码，并在该目标编程页面中或其他的页面中展示执行结果。在本申请实施例中，该目标编程页面具体可以是图形化编程工具所提供的编程页面。可以理解，终端所提供的目标编程页面可集成有IDE(Integrated Development Environment，集成开发环境)功能，具体可集成有代码编写功能、分析功能、编译功能和调试功能等。目标编程页面可实现对编辑区域中的代码进行编译调试等操作。

图形化编程工具主要是面向青少儿的一种寓学于乐的编程工具，该图形化编程工具将编程语言封装在图形化的积木块中，用户可拖动积木块进行搭建即可完成编程，一般应用于青少年或初学者群体的编程学习。在传统的图形化编程工具中，通常会根据功能设置固定的四个分区，以展示不同的内容。参考图3，图3为一个实施例中传统的编程页面的结构示意图，如图3所示，这四个分区包括舞台区301、积木区302、编辑区303和素材区304。这四个分区互相配合显示，以给用户提供便捷的图形化编程操作。比如用户可从积木区拖取积木至编辑区，从素材区选择素材。图形化编程工具可根据用户拖取的积木和选取的素材在编辑区进行代码编译，从而在舞台区展示编译效果。采用这种固定的分区方式，可使得用户在进行编程操作时，根据用户习惯，从左侧拖取积木至中间的编辑区，再在右侧观看编译效果，可一边编译一边调试，便于用户操作。在这种场景下，传统的编程页面基本可展示用户所需要的元素，且易于用户操作。但随着计算机技术的发展，编程语言也在不断的发展，随之而来，可进行的各种编程操作也是花样百出，虽然传统的固定分区便于用户进行编辑和输出查看，但当有新功能开发上线时，比如，在编程领域，常常会需要使用关于撰写笔记、调用摄像头、输出文本等功能，当这些新功能上线时，传统的图形化编程工具中固定的分区模式，就无法灵活地适应，导致用户操作不便。

可以理解，本申请实施例所提及的编程页面展示方法，在目标编程页面中展示内容区域和编程区域。该内容区域是专门开发出的用于聚合至少一个的子功能组件的区域。参考图4，在目标编程页面的左侧展示有内容区域401，该内容区域401是传统的编程页面中所没有的。本申请实施例所提及的编程页面展示方法，具有专门开发的内容区域，这样，当有新功能需要上线时，可将新功能集成在子功能组件中，该子功能组件显示在该内容区域中，提供了用于进入不同子功能的入口。编程区域是用于实现编程操作的区域，编程区域具体可以包括编辑区域和输入输出区域。其中，编辑区域是用于编辑代码的区域，输入输出区域具体可以是一个独立的区域，也可以是由一个以上的子区域构成的一个区域。比如，输入输出区域具体可包括文本输出子区域和图像输出子区域，该文本输出子区域用于输出代码结构，该图像输出子区域用于输出图像、图表或动画等。还比如，该输入输出区域包括输入子区域和输出子区域，该输入子区域是用于获取在进行编程操作时所需要的输入数据的区域，可用于添加用于进行摄像头调用的子功能组件或用于进行手写板调用的子功能组件等，以通过添加的子功能组件实现相应的数据输入。该输出子区域具体可以是文本输出子区域或图像输出子区域。对于该输入子区域的相关操作，现采用举例的方式进行说明，比如，在输入子区域中添加用于进行摄像头调用的子功能组件后，用户可点击该子功能组件，以调用摄像头采集视频数据，进而将采集的视频数据作为此次编程操作的输入数据。在一个具体的编程应用中，比如，人脸识别的编程应用场景中，用户点击输入子区域中的该子功能组件后，可调用摄像头采集人脸图像，并将采集的人脸图像作为输入数据进行人脸识别操作。

其中，内容容器是显示在内容区域中的容器。容器是一种可用来承载并显示数据对象的页面元素。数据对象是计算机设备可操作的对象，具体可以是文字、图片、视频、表格、子功能组件或其他的控件等。内容容器的大小具体可以与内容区域的大小相匹配，或者小于内容区域的大小。子功能组件也可以认为是子功能控件，是对实现某个子功能的封装组件，封装组件里对于数据和方法进行了简单封装。在对该目标编程页面进行功能开发时，可将某些子功能封装在一个组件中，当发生作用于该子功能组件的触发操作时，则可实现相应的功能操作。子功能组件比如用于调用摄像头的组件、用于调起手写板的组件、用于显示图表的组件、或用于记录笔记的组件等。可以理解，对于任何新开发的功能，均可通过该子功能组件进行上线更新，本申请实施例对子功能组件的实现功能不做限定。其中，触发操作具体可以是触摸操作、光标操作、按键操作或者语音操作。触摸操作可以是触摸点击操作、触摸按压操作或者触摸滑动操作，触摸操作可以是单点触摸操作或者多点触摸操作；光标操作可以是控制光标进行点击的操作或者控制光标进行按压的操作；按键操作可以是虚拟按键操作或者实体按键操作等。

具体地，终端上运行有编程应用程序或浏览器应用等。用户可通过点击该编程应用程序从而进入目标编程页面，或者，用户还可通过浏览器加载服务器提供的目标网址，通过浏览器应用进入与该目标网址对应的目标编程页面。在用户首次以用户标识登录或者访客模式浏览并进入该目标编程页面时，目标编程页面可按照预先设置的布局数据进行渲染展示。其中，用户标识用于唯一标识一个用户，可以是包括数字、字母和符号中至少一种字符的字符串，用户标识具体可以是用户账号。可以理解，该目标编程页面包括内容区域和编程区域，内容区域中显示有内容容器，终端可将各种子功能组件聚合在该内容容器中进行显示，在用户需要时再进行相应的展开显示。具体地，终端可在内容容器中显示至少一个子功能组件的图标。当检测到作用该子功能组件的图标的第一目标操作时，确定该第一目标操作所指向的第一目标位置。

在一个实施例中，终端在进入目标编程页面后，可从本地或服务器获取上次记录的布局数据，并基于上次记录的布局数据绘制目标编程页面展示。其中，布局数据是目标编程页面中的各容器和各子功能组件各自对应的显示状态信息和位置信息。其中，显示状态信息具体包括固定状态、浮动状态、展开状态或收起状态等；位置信息是容器或子功能组件在目标编程页面中的显示位置坐标。其中，固定状态是处于固定位置显示的状态，浮动状态是处于可移动显示的状态，展开状态是呈现为子窗口显示的状态，收起状态是呈现为组件/控件显示的状态。当容器或组件被标记为不同的显示状态时，它们在目标编程页面中会被绘制为与该显示状态对应的形态。通过给每个容器或子功能组件设置一些显示状态对应的标记来记录它们在经过一系列交互操作后所处的状态，进而可根据对应的显示状态绘制这些容器和子功能组件的不同显示形态。这样，根据用户的实际需求，可通过对各容器和各子功能组件不同显示状态的切换，使得该目标编程页面的显示符合用户需求，大大提高了用户操作的便利性。

在一个实施例中，目标编程页面中的子功能组件可显示对应的组件名称或该子功能的内容简介。当然，也可不显示，当终端检测到鼠标悬停在该子功能组件上时，可在该子功能组件的周边区域显示该子功能组件的名称或相应的内容简介。这样，在目标编程页面中可通过较少的显示空间，显示子功能组件的名称或内容简介，既能为该目标编程页面中其他的页面元素提供更多的显示空间，也在一定程度上方便了用户识别该子功能组件。可以理解，关于该子功能组件的显示方式，不局限于上述的举例说明，也可以是其他的显示方式，本申请实施例对此不做限定。

参考图4，图4为一个实施例中本申请实施例所提及的目标编程页面的界面示意图。如图4所示，该目标编程页面包括内容区域401和编程区域，该编程区域具体可包括编辑区域403和输入输出区域404，还可包括积木区域402。如图4所示的，在该内容区域401中，可聚合有多于一个的子功能控件，比如显示为4011“课程”内容的子功能组件和显示为4012“笔记”内容的子功能组件等。其中，显示为图4中4011“课程”内容的子功能组件用于记录和查看用户的关于编程方面的课程内容；显示为4012“笔记”内容的子功能组件用于记录和查看用户在使用该目标编程工具时所撰写的笔记。这样，可将具有不同功能的子功能组件集中在内容区域的内容容器中显示，使得该目标编程页面的显示更加清爽和整洁，便于用户进行操作。

S204，当发生对内容区域中子功能组件的第一目标操作时，确定第一目标操作所指向的第一目标位置。

其中，目标操作是作用于不同的页面元素的操作，可对所作用的页面元素在该目标编程页面中执行相应的交互动作。页面元素包括目标编程页面中的各容器和各子功能组件。第一目标操作是作用于子功能组件的交互操作，用于将子功能组件转换成对应的子功能控件进行显示。第一目标操作具体可以是与子功能组件对应的点击操作、拖拽操作、触摸操作或语音操作等。其中，拖拽操作是将目标对象从原有位置拖拽至目标位置的一种触发操作。可以理解，第一目标操作、以及后文提到的第二目标操作至第五目标操作等，由于其作用的对象和作用的方向等的不同，可用于区分不同的目标操作，在不引起歧义的前提下均可称作目标操作。

具体地，用户可通过终端的输入装置选中内容区域中的某个子功能组件，并对选中的子功能组件进行第一目标操作。其中，输入装置具体可以是外接的输入设备，比如鼠标或键盘等，还可以是内置的触控屏等。

在一个实施例中，当用户意图将内容容器中的某个子功能组件展开为子功能窗口时，可点击或双击该子功能组件，还通过语音指令唤起该子功能组件对应的子功能窗口。进而计算机设备可将编程区域中的某个预设位置或用户指定的位置作为第一目标位置。

在一个实施例中，第一目标操作包括第一拖拽操作，可以理解，该第一拖拽操作是将子功能控件从内容区域中拖拽出来的操作。进而，终端可确定第一拖拽操作意图将该子功能组件从初始位置移动至的第一目标位置，该第一目标位置具体可处于编程区域中。这样可通过拖拽操作这样具有物理意义的操作，达成将子功能组件从内容容器中拖出来，并显示为对应的子功能窗口的效果，方便快捷。可以理解，第一拖拽操作、以及后文提到的第二拖拽操作至第五拖拽操作等用于区分不同的拖拽操作，在不引起歧义的前提下均可称作拖拽操作。

举例说明，终端可展示目标编程页面，该目标编程页面包括内容区域和编程区域，该内容区域中聚合有多于一个的子功能组件。用户可通过鼠标选中其中一个子功能组件后，将其往编程区域拖拽，拖拽的终点位置也就是第一目标位置。

S206，当第一目标位置处于编程区域中时，在第一目标位置处显示与子功能组件对应的子功能窗口。

其中，子功能窗口是与子功能组件对应的子窗口，具体可以是一个显示面板，可用来显示内容或提供可编辑区域，比如子功能窗口中可显示图片、文字或表格等，还可提供可编辑区域，用户可在该子功能窗口中输入内容或编辑内容等。具体地，计算机设备可确定该第一目标位置具体处于哪个区域中。当该第一目标位置仍然处于内容区域中时，计算机设备仍在内容容器中显示该子功能组件。当该第一目标位置处于编程区域中时，计算机设备可判定用户意图将该子功能组件拉出并使用相应的功能。因而终端在将内容区域中的子功能组件拖出后，可将该子功能组件展开成相应的子功能窗口在第一目标位置处进行显示，也就是将子功能组件拖出成常驻弹窗显示。

在一个实施例中，对于内容区域中的每个子功能组件，终端均可进行单个的拖拽操作，从而将该子功能组件拖出成常驻弹窗后展示。并且，终端可检测作用于该子功能窗口的移动操作，根据该移动操作移动子功能窗口，这样可以任意改变该子功能窗口的摆放位置。在一个实施例中，该子功能窗口包括还原控件，当终端检测到作用于该还原控件的触发操作时，将子功能窗口转换为子功能控件，并还原至初始位置。其中，还原控件是用户触发还原操作的控件。这样，可增加每个子功能组件的布局灵活性，用户可根据实际情况进行布局。

在一个实施例中，终端可为各个子功能组件设置一些显示状态信息来记录它们在经过一系列交互操作后所处的状态，终端可根据各子功能组件对应的显示状态信息来绘制相应的显示形态。比如，子功能组件具体可具有以下四种状态：“固定”、“浮动”、“折叠”、以及“展开”。其中，“固定”代表该子功能组件处于图形化编程工具预先设置的初始位置，是子功能组件的初始状态。“浮动”代表该子功能组件已不在初始位置，处于自由浮动状态，也就是可移动状态。此状态下还可对该子功能组件进行额外的缩放等操作，比如放大或缩小该子功能组件对应的显示区域。“折叠”代表该子功能组件的内容已被隐藏，也就是显示为初始的组件状态。“展开”代表该子功能组件被展开为对应的子功能窗口展示，该组件的简介内容和组件名称都可见。可以理解，对于目标编程页面中的各容器，比如内容区域中的内容容器、以及输入输出区中的输入容器和/或输出容器，其相应的显示状态也包括“固定”、“浮动”、“展开”和“折叠”的状态。这样，根据用户的实际需求，可对各容器和各子功能组件进行不同显示状态的切换，使得该目标编程页面的显示符合用户需求，大大提高了用户操作的便利性。

参考图5，图5为一个实施例中容器和子功能组件的不同显示状态的扭转示意图。对于各容器和子功能组件而言，其默认的显示状态均可设置为“固定”状态，用户可通过对该容器或子功能组件进行整体拖出，则该容器或子功能组件的显示状态由“固定”变为“浮动”，则该容器或子功能组件不再处于默认位置，显示形态也变成“浮动”形态；当用户点击“恢复”按钮，或者直接拖拽“浮动”状态的该容器或子功能组件到固定位置时，该容器或子功能组件的状态再次变为“固定”，对应的显示形态也变成“固定”形态。此外，该容器或子功能组件还有“展开”和“折叠”这两种显示形态，对于显示形态为容器的，其对应的显示状态为“展开”状态，当用户点击该容器的“折叠”按钮时，该容器的显示状态调整为控件形态，相应地，当用户点击该控件的“展开”按钮时，该控件的显示形态调整为容器形态。对于显示形态为子功能窗口的，其对应的显示状态为“展开”状态，当用户点击该子功能窗口的“折叠”按钮时，该子功能窗口的显示状态调整为组件形态，相应地，当用户点击该子功能组件的“展开”按钮时，该子功能组件的显示形态调整为子功能窗口的形态。可以理解，上述实施例中所提及的“展开”按钮、“折叠”按钮、以及“恢复”按钮的体现形式具体可以在目标编程页面中体现为一个按钮的形式，也可以是无形态提醒的，通过终端检测到相应的触发操作来执行相应的显示状态的切换，本申请实施例对此不做限定。

上述编程页面展示方法，在目标编程页面中设置有内容区域和编程区域，该内容区域中显示有内容容器，内容容器中显示有至少一个的子功能组件，这样，当有新功能上线时，无需考虑在界面中开辟新的空间进行放置，将每个子功能都形成组件灵活搭配并聚合至内容区域中，不侵占原有界面的空间。当发生对子功能组件的第一目标操作时，可将该子功能组件展开为相应的子功能窗口展示。这样，用户可将暂不需要的子功能收起至内容区域中，将需要实时关注的子功能进行拖出成常驻的子功能窗口,可以节省当前展示界面的空间，从而实现用户的个性化布局定制，便于用户灵活操作，大大提高了用户操作的便利性。

在一个实施例中，该编程页面展示方法还包括取消内容区域的步骤，该步骤具体包括：当发生对内容区域中的内容容器的收起指令时，取消内容区域的显示，并将内容容器收起为内容控件进行显示。

具体地，终端可检测在内容区域中是否发生对于内容容器的收起指令，当发生收起指令时，终端可取消目标编程页面中内容区域的展示，并将内容容器收起为内容控件进行展示。

在一个实施例中，内容区域中包括有收起控件，当终端检测到作用于该收起控件的触发操作时，终端可取消内容区域的展示，并将内容容器收起为内容控件进行展示。其中，收起控件是用于触发收起操作的控件。

在一个实施例中，当发生对内容区域中内容容器的第四目标操作、且第四目标操作所指向的第四目标位置处于编程区域时，取消内容区域的显示，并将内容容器收起为内容控件进行显示。

具体地，当终端检测到作用于内容容器的第四目标操作时，确定该第四目标操作所对应的第四目标位置是否处于编程区域中。当处于时可判定用户意图收起该内容容器，进而终端可取消内容区域的显示，并将内容容器收起为内容控件进行显示。其中，第四目标操作具体可以是用于触发收起内容容器的点击操作、拖拽操作、触摸操作或语音操作等。

在一个实施例中，该第四目标操作具体可以是第四拖拽操作，终端可根据该第四拖拽操作的拖向方向，确定该拖拽操作所指向的第四目标位置。当该第四目标位置处于编程区域中时，可判定此时用户意图将内容容器整体拖出，以减小内容区域所占的面积。这时，参考图7，图7为一个实施例中对目标编程页面进行组件化布局的界面示意图。终端可取消内容区域的展示，并将内容容器收起为内容控件4013进行展示。在一个实施例中，终端在取消内容区域后可扩大编程区域的展示面积。

在一个实施例中，终端在收起内容区域后，可在第四目标位置处展示内容控件，也可在预设的固定位置处展示内容控件等，本申请实施例对此不做限定。其中，预设位置具体可以是目标编程页面的左上角或左下角等位置。

在一个实施例中，当发生对内容容器的第四拖拽操作时，该第四拖拽操作所指向的第四目标位置与该内容容器的初始位置之间的距离超过预设距离时，终端将内容容器收起为内容控件进行显示。其中，内容容器的初始位置是图像化编程工具预先设置的一个初始化的位置。

在一个实施例中，内容容器的初始的显示状态为固定状态，当终端检测到第四目标位置与该内容容器的初始位置之间的距离超过预设距离时，可将将内容容器的显示状态信息由固定状态调整为浮动状态，并按照浮动状态在第四目标位置处显示与内容容器对应的内容控件。

举例说明，内容区域的初始位置在目标编程页面的左侧，当把该内容容器整体拖出距初始位置一定距离，如10px(10像素)，终端则可将该内容容器的显示状态信息由固定状态更新为浮动状态，则该内容容器不再处于初始位置，显示形态也变成“浮动”的形态。也就是说终端会在第四拖拽操作所指向的目标位置处显示与内容容器对应的内容控件。

在一个实施例中，该编程页面展示方法还包括对内容容器进行还原展示的步骤，该步骤具体包括：当发生对内容控件的第五目标操作、且第五目标操作的拖拽方向趋向于原有的内容区域的展示区域时，还原内容区域，并在还原后的内容区域中将内容控件展开为内容容器进行显示。

具体地，终端可检测作用于内容控件的第五目标操作，确定该第五目标操作的趋向方向是否趋向于原有的内容区域。若是，则终端可判定用户意图还原该内容容器。其中，第四目标操作具体可以是用户触发的用于还原内容容器的点击操作、拖拽操作、触摸操作或语音操作等。

在一个实施例中，该第五目标操作具体可以是第五拖拽操作，当发生第五拖拽操作、且该第五拖拽操作的拖拽方向朝向原有的内容区域时，终端可判定此时用户意图将内容容器进行还原展示。这时，终端可还原内容区域，并在还原后的内容区域中将内容控件展开为内容容器进行展示。

在一个实施例中，当终端用户点击了“恢复”按钮，或者直接拖拽“浮动”状态的该内容控件到预设距离内时，比如距之前的默认位置10px内时，终端可将该内容容器的显示状态再次变为“固定”，对应的显示形态也变成还原成原有的内容容器的形态，同时会有一个磁铁吸附磁石的效果。

在一个实施例中，内容容器在“固定”或“浮动”状态时，对于内容容器内的各子功能组件的内容简介及组件名称，可以设置显示，也可以设置隐藏不显示，对应的状态分别是“展开”和“折叠”状态。内容容器的不同显示状态间的扭转状态如图5所示。可以理解，对于目标编程页面中的其他的容器，比如输入输出区中的输入容器和/或输出容器，其相应的显示状态也包括“固定”、“浮动”、“展开”和“折叠”的状态。

上述实施例中，可通过目标操作灵活地切换内容容器的展示形态，这样，用户可根据自己的需求和喜好对目标编程页面进行个性化布局设计，大大提高了用户操作便利性。

在一个实施例中，参考图6，图6为一个实施例中在目标编程页面中进行组件化交互的界面示意图。如图6所示，输入输出区域601中可展示有两个子区域，分别为输入子区域6011和文本输出子区域6012。当终端检测到对输入输出区域中601的收起指令时，可将该输入输出区域收起成对应的控件602进行展示。当终端检测到对输入输出区域601的浮起指令时，可将该输入输出区域收起成另一种形态的控件603进行展示。对于该输入子区域6011中的子功能控件，用户可将一组子功能控件同时拖出该输入子区域中，展示成子功能窗口进行展示。将输入子区域6011中的一组子功能组件均拖拽出来后，该输入输出区域就只展示有文本输出子区域6012了。用户还可从折叠的多个子功能窗口中拖出单个的子功能窗口60111展示。参考图6，当该输入输出区域601中仅包括有文本输出子区域，用户可将一组子功能窗口同时拖拽至输入输出区域601中，该输入输出区域601就可包括两个子区域6011和6012，子功能窗口可被嵌入至子区域6011中进行叠加展示。

这样，用户可根据个人习惯，通过拖拽式的交互方式，针对各个子功能组件和不同的容器进行布局排布，提升操作工具的便捷性和高效性。让用户自行选择每个功能的摆放位置，可以针对暂不需要的功能进行收起或关闭操作，也针对需要实时关注的功能进行拖出成常驻弹窗等操作，提升工具的易用性和高效性。

参考图4和图7，图7为一个实施例中对目标编程页面进行组件化布局的界面示意图。如图7所示，当用户根据个人习惯和需求进行个性化布局设置后，即可进行编程学习或者创作作品。举例说明，如图7所示，可以将所需要的摄像头子功能组件拖出成常驻弹窗，如图7中所示的4031子功能窗口。参考图7，终端可将图4左侧内容区域401取消展示，仅展示对应的内容控件4013，并在该目标编程页面中展示有积木区域402、编辑区域403和输入输出区域404。右侧输入输出区域404显示按钮功能和输出区内容。在创作使用到摄像头和按钮功能的编程作品时，同时可以通过图7中的用于记录笔记的子功能组件4032来记录笔记并观察输入输出区域404中的输出内容来进行调试，大大提升了操作的便捷性和高效性，也最大程度利用了整个界面的空间。

在一个实施例中，该编程页面展示方法还包括将子功能窗口折叠成子功能组件的步骤，该步骤具体包括：当发生对子功能窗口的第二目标操作、且第二目标操作所指向的第二目标位置处于内容区域时，将子功能窗口折叠成子功能组件，并聚合至内容区域显示。

具体地，当终端展示有子功能窗口时，可检测作用于该子功能窗口的第二目标操作，当该第二目标操作所指向的第二目标位置处于内容区域时，终端可将子功能窗口折叠成子功能组件进行显示。其中，第二目标操作具体可以是用户触发的用于折叠子功能窗口的点击操作、拖拽操作、触摸操作或语音操作等。

在一个实施例中，该第二目标操作具体可以是第二拖拽操作，当终端在目标编程页面中对子功能控件进行展开展示时，也就是展示了某个子功能对应的子功能窗口，用户可选中该子功能窗口并进行拖拽操作，终端可将该子功能窗口放置在编程区域中任何用户选中的位置处，可实现自由移动。当终端检测到对该子功能窗口的第二拖拽操作、且该第二拖拽操作所指向的第二目标位置处于内容区域时，终端可判断此时用户意图将该子功能窗口收回至原来的内容区域中。此时，终端可将该子功能窗口折叠成子功能组件，并聚合至内容区域展示。

上述实施例中，用户可自行选择每个子功能组件的摆放位置，可以针对暂不需要的子功能组件进行收起或关闭操作，也可将需要实时关注的子功能组件进行拖出成常驻弹窗，大大提升了工具的易用性和高效性。

在一个实施例中，编程区域包括编辑区域和输入输出区域；当第一目标位置处于编程区域中时，在第一目标位置处展示子功能窗口具体包括：当第一目标位置处于编辑区域中时，在第一目标位置处浮动显示与子功能组件对应的子功能窗口；当第一目标位置处于输入输出区域中时，将与子功能组件对应的子功能窗口嵌入输入输出区域中进行显示。

具体地，编程区域可包括编辑区域和输入输出区域。用户可通过输入装置在编辑区域输入相应的代码，或者，用户可将其他区域的数据对象拖拽至编辑区域，以便执行代码编译。其他区域比如积木区域或素材区域。终端可根据拖拽至编辑区域的数据对象，获取与该数据对象对应的代码，并在检测到编译指令时，对由编辑区域中的代码所构成的程序进行编译。可以理解，该编辑区域用于进行代码编辑，是一个必不可少的、且为目标编程页面的核心区域。在展开子功能窗口、该子功能窗口被拖拽至编辑区域中时，终端可在编辑区域中浮动显示该子功能窗口，也就是将该子功能窗口覆盖在相应的第一位置处进行显示。

在一个实施例中，当第一目标位置处于输入输出区域中时，终端可将该子功能窗口嵌入相应的输入输出区域中进行显示。在一个实施例中，该输入输出区域包括两个子区域，当该第一目标位置处于任何一个子区域中时，均可将该子功能窗口嵌入至相应的子区域进行显示。

在一个实施例中，当第一目标位置处于输入输出区域中时，将与子功能组件对应的子功能窗口嵌入输入输出区域中进行展示具体包括：当第一目标位置处于输入输出区域中、且输入输出区中已存在至少一个的子功能窗口时，将与子功能组件对应的子功能窗口以卡片形式叠加嵌入至输入输出区域进行显示。

在一个实施例中，当第一目标位置处于输入输出区域中，也就是用户试图将该子功能区域拉取至输入输出区域中，此时，终端可将子功能窗口以卡片形式叠加嵌入至该输入输出区域进行显示。这样，可在有限的空间中叠加展示多个子功能窗口，有效地节省输入输出区域的显示位置。

在一个实施例中，该编程页面展示方法还包括将子功能窗口从输入输出区域中拖出展示的步骤，该步骤具体包括：当发生对输入输出区域中的子功能窗口的第三目标操作、且第三目标操作所指向的第三目标位置处于编辑区域时，将与子功能组件对应的子功能窗口拖出至第三目标位置处进行显示。

在一个实施例中，该第三目标操作具体可以是第三拖拽操作，当发生对输入输出区域中的子功能窗口的第三拖拽操作、且第三拖拽操作所指向的第三目标位置处于编辑区域时，终端可将子功能窗口拖出至第三目标位置处进行展示。也就是，用户可实现对该子功能窗口的拖出操作，灵活方法。

在一个实施例中，该子功能窗口包括还原控件，当终端检测到作用于该还原控件的触发操作时，可将该子功能窗口还原至原来的位置和显示状态。比如，将该子功能窗口还原至输入输出区域中进行展示，如以卡片形式叠加展示等。

上述实施例中，根据第一目标位置所在的不同区域，采用浮动展示或嵌入展示的方式来展示子功能窗口，便于用户及时调整布局，方便快捷。

在一个实施例中，该编程页面展示方法还包括存储布局数据的步骤，该步骤包括：在检测到关闭目标编程页面时，记录目标编程页面中的各容器、以及各子功能组件对应的布局数据并存储；布局数据包括显示状态信息和位置信息；确定当前登录目标编程页面的用户标识；将用户标识、以及目标编程页面对应的布局数据发送至对应的服务器，发送的用户标识和布局数据用于指示服务器进行关联存储。

具体地，当终端检测到用于关闭该目标编程页面的关闭指令时，可触发记录当前目标编程页面中各容器和各子功能组件分别对应的布局数据，其中，该布局数据具体可包括各容器和各子功能组件各自对应的显示状态信息和位置信息。进而终端可将记录的布局数据存储在本地的存储介质中。终端还可确定当前登录该目标编程页面的用户标识，将该用户标识和相应的布局数据进行关联，并发送至服务器，服务器在接收到用户标识和布局数据后进行关联存储。

在一个实施例中，终端可定时或在检测到用户触发的存储指令时，记录当前目标编程页面中各容器和各子功能组件分别对应的布局数据并存储。在检测到关闭指令时，可根据目标编程页面关闭前的状态更新记录的布局数据。

在一个实施例中，当用户处于游客访问模式访问该目标编程页面，终端无法获取当前登录的用户标识时，终端可获取对应的终端标识，并将终端标识和对应的布局数据关联存储。并且，终端还可将终端标识和布局数据发送至服务器，服务器在接收到终端标识和布局数据后进行关联存储。其中，终端标识用于唯一标识终端，可以是终端的MAC(MediaAccess Control，媒体访问控制)地址或者IMEI(International Mobile EquipmentIdentity，国际移动设备身份码)。

在一个实施例中，用户在浏览IDE或者通过IDE编程的过程中，如果重新设置了页面布局，终端可将新的布局数据发送到服务器保存，同时在本地存储中也保存一份，在用户下次进入目标编程页面时可恢复用户的自定义布局。

上述实施例中，在检测到关闭目标编程页面时，可将用户标识和该目标编程页面对应的布局数据进行关联存储，且发送至服务器存储，便于用户再次打开目标编程页面时，可根据相应的布局数据重绘页面，恢复用户的自定义布局。

在一个实施例中，步骤S202，也就是获得目标编程页面的步骤具体包括：在进入目标编程页面时，确定当前登录的用户标识；获取通过用户标识上次登录所记录的、且与目标编程页面中的各容器和各子功能组件分别对应的布局数据；根据布局数据重新绘制目标编程页面并展示。

在一个实施例中，用户可通过用户标识登录相应的应用程序，终端在进入目标编程页面时，可从本地或服务器处获取通过该用户标识上次登录所记录的、且与该目标编程页面中的各容器和各子功能组件分别对应的布局数据。从而根据上次记录的布局数据重新绘制目标编程页面并展示，以恢复用户的自定义布局。

在一个实施例中，获取通过用户标识上次登录所记录的、且与目标编程页面中的各容器和各子功能组件分别对应的布局数据的步骤具体包括：从本地存储中读取通过用户标识上次登录所记录的、且与目标编程页面中的各容器和各子功能组件分别对应的布局数据；当从本地存储读取失败时，根据用户标识生成布局数据拉取指令并发送至服务器；发送的布局数据拉取指令用于指示服务器查找与用户标识对应的布局数据并反馈；接收服务器反馈的布局数据并更新本地存储。

具体地，当终端进行目标编程页面时，终端可优先从本地存储中读取该用户标识对应的、预先记录的各容器和各子功能组件对应的布局数据，进而终端可根据布局数据重新绘制目标编程页面，以恢复用户的自定义布局。如果本地存储中没有读取到用户标识对应的布局数据，可能是用户没有设置自定义布局，也可能是本地存储的布局数据失效了。这时，终端可从服务器处获取该用户标识对应的布局数据，将该布局数据更新到本地存储中，并且根据拉取的布局数据重新绘制目标编程页面，以恢复用户的自定义布局。

上述实施例中，可通过本地存储和服务器存储用户前次登录所设置的布局数据，在当次登录时，可恢复用户的自定义布局，方便快捷，便于用户进行后续的操作。

在一个实施例中，参考图8，图8为一个实施例中重绘制目标编程页面的步骤的流程示意图。如图8所示，用户可通过Web(World Wide Web，全球广域网)端进入目标编程页面，终端查找本地存储的用户前次设置的组件布局方案(也就是前述实施例所提及的布局数据)，当查找到组件布局方案后，根据用户设置的组件布局方案重新绘制目标编程页面。当未查找到组件布局方案后，可向服务器发送指令以获取对应的组件布局方案。终端可将获取到的组件布局方案存储到本地，并且根据用户设置的组件布局方案重新绘制目标编程页面。接下来，用户可通过目标编程页面编写代码，当用户通过拖拽或快捷键重新调整了组件布局情况时，可将调整后的组件布局方案存储至本地，并发送至服务器。服务器保存用户更新的组件布局方案。

在一个实施例中，进入目标编程页面之前，该编程页面展示方法还包括选择编程入口的步骤，该步骤具体包括：展示图形化编程工具的导航首页，并在导航首页中显示多于一个的、且对应不同编程类别的编程入口；当发生对于不同的编程入口的选中操作时，确定选中操作所指向的目标编程入口。获得目标编程页面包括：进入与目标编程入口对应的目标编程页面。

其中，选中操作是作用于编程入口的触发操作，用于选中所作用的编程入口对应的编程类别。具体地，终端上运行有编程应用程序或浏览器应用等。用户可通过点击该编程应用程序从而进入图形化编程工具对应的导航首页，或者，用户还可通过浏览器加载服务器提供的目标网址，通过浏览器应用进入对应的导航首页。其中，导航首页是图形化编程工具的初始页。在该导航首页中可提供多于一个的、且对应不同编程类别的编程入口，在该导航首页中还可提供其他的活动入口、以及内容简介等，本申请实施例对此不做限定。

进一步地，终端可检测是否存在作用于不同的编程入口的选中操作，当发生对于不同的编程入口的选中操作时，终端可确定该选中操作所指向的目标编程入口。从而终端可从当前的导航页面跳转至与该目标编程入口对应的目标编程页面。

上述实施例中，图形化编程工具可将不同编程类别对应的编程入口集中在导航页面中进行展示，这样用户可从该导航页面，根据编程入口跳转至想要进入的目标编程页面，方便快捷。

图2为一个实施例中编程页面展示方法的流程示意图。应该理解的是，虽然图2的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

如图9所示，在一个实施例中，提供了编程页面展示装置900，包括获得模块901、确定模块902和显示模块903。其中：

获得模块901，用于获得目标编程页面；目标编程页面包括内容区域和编程区域，内容区域中显示有内容容器，内容容器中显示有至少一个子功能组件。

确定模块902，用于当发生对内容区域中子功能组件的第一目标操作时，确定第一目标操作所指向的第一目标位置。

显示模块903，还用于当第一目标位置处于编程区域中时，在第一目标位置处显示与子功能组件对应的子功能窗口。

在一个实施例中，该显示模块903，还用于当发生对内容区域中的内容容器的收起指令时，取消内容区域的显示，并将内容容器收起为内容控件进行显示。

在一个实施例中，显示模块903，还用于当发生对子功能窗口的第二目标操作、且第二目标操作所指向的第二目标位置处于内容区域时，将子功能窗口折叠成子功能组件，并聚合至内容区域显示。

在一个实施例中，编程区域包括编辑区域和输入输出区域；显示模块903还用于当第一目标位置处于编辑区域中时，在第一目标位置处浮动展示与子功能组件对应的子功能窗口；当第一目标位置处于输入输出区域中时，将与子功能组件对应的子功能窗口嵌入输入输出区域中进行展示。

在一个实施例中，显示模块903还用于当第一目标位置处于输入输出区域中、且输入输出区中已存在至少一个的子功能窗口时，将与子功能组件对应的子功能窗口以卡片形式叠加嵌入至输入输出区域进行展示。

在一个实施例中，显示模块903还用于当发生对输入输出区域中的子功能窗口的第三目标操作、且第三目标操作所指向的第三目标位置处于编辑区域时，将与子功能组件对应的子功能窗口拖出至第三目标位置处进行显示。

在一个实施例中，显示模块903还用于当发生对内容区域中内容容器的第四目标操作、且第四目标操作所指向的第四目标位置处于编程区域时，取消内容区域的显示，并将内容容器收起为内容控件进行显示。

在一个实施例中，显示模块903还用于当发生对内容控件的第五目标操作、且第五目标操作的拖拽方向趋向于原有的内容区域时，还原内容区域，并在还原后的内容区域中将内容控件展开为内容容器进行显示。

参考图10，在一个实施例中，该编程页面展示装置900还包括记录模块904和发送模块905，其中：

记录模块904，用于在检测到关闭目标编程页面时，记录目标编程页面中的各容器、以及各子功能组件对应的布局数据并存储；布局数据包括显示状态信息和位置信息。

确定模块902，还用于确定当前登录目标编程页面的用户标识。

发送模块905，用于将用户标识、以及目标编程页面对应的布局数据发送至对应的服务器，发送的用户标识和布局数据用于指示服务器进行关联存储。

在一个实施例中，获得模块901还用于在进入目标编程页面时，确定当前登录的用户标识；获取通过用户标识上次登录所记录的、且与目标编程页面中的各容器和各子功能组件分别对应的布局数据；根据布局数据重新绘制目标编程页面并展示。

在一个实施例中，获得模块901还用于从本地存储中读取通过用户标识上次登录所记录的、且与目标编程页面中的各容器和各子功能组件分别对应的布局数据；当从本地存储读取失败时，根据用户标识生成布局数据拉取指令并发送至服务器；发送的布局数据拉取指令用于指示服务器查找与用户标识对应的布局数据并反馈；接收服务器反馈的布局数据并更新本地存储。

在一个实施例中，显示模块903还用于展示图形化编程工具的导航首页，并在导航首页中显示多于一个的、且对应不同编程类别的编程入口；确定模块902还用于当发生对于不同的编程入口的选中操作时，确定选中操作所指向的目标编程入口；获得模块901还用于进入与目标编程入口对应的目标编程页面。

上述编程页面展示装置，在目标编程页面中设置有内容区域和编程区域，该内容区域中可聚合至少一个的子功能组件，这样，当有新功能上线时，无需考虑在界面中开辟新的空间进行放置，将每个子功能都形成组件灵活搭配并聚合至内容区域中，不侵占原有界面的空间。当发生对子功能组件的第一目标操作时，可将该子功能组件展开为相应的子功能窗口展示。这样，用户可将暂不需要的子功能收起至内容区域中，将需要实时关注的子功能进行拖出成常驻的子功能窗口，可以节省当前展示界面的空间，从而实现用户的个性化布局定制，便于用户灵活操作，大大提高了用户操作的便利性。

图11示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端110。如图11所示，该计算机设备包括该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、输入装置和显示屏。其中，存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作系统，还可存储有计算机程序，该计算机程序被处理器执行时，可使得处理器实现编程页面展示方法。该内存储器中也可储存有计算机程序，该计算机程序被处理器执行时，可使得处理器执行编程页面展示方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，本申请提供的编程页面展示装置可以实现为一种计算机程序的形式，计算机程序可在如图11所示的计算机设备上运行。计算机设备的存储器中可存储组成该编程页面展示装置的各个程序模块，比如，图9所示的获得模块、确定模块和显示模块。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的编程页面展示方法中的步骤。

例如，图11所示的计算机设备可以通过如图9所示的编程页面展示装置中的获得模块执行步骤S202。计算机设备可通过确定模块执行步骤S204。计算机设备可通过显示模块执行步骤S206。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，计算机程序被处理器执行时，使得处理器执行上述编程页面展示方法的步骤。此处编程页面展示方法的步骤可以是上述各个实施例的编程页面展示方法中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，计算机程序被处理器执行时，使得处理器执行上述编程页面展示方法的步骤。此处编程页面展示方法的步骤可以是上述各个实施例的编程页面展示方法中的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (15)

1.一种编程页面展示方法，包括：

获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；

当发生对所述内容区域中子功能组件的第一目标操作时，确定所述目标操作所指向的第一目标位置；

当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处显示与所述子功能组件对应的子功能窗口。

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

当发生对所述子功能窗口的第二目标操作、且所述第二目标操作所指向的第二目标位置处于所述内容区域时，将所述子功能窗口折叠成子功能组件，并聚合至所述内容区域显示。

3.根据权利要求1所述的方法，其特征在于，所述编程区域包括编辑区域和输入输出区域；所述当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处显示与所述子功能组件对应的子功能窗口，包括：

当所述第一目标位置处于所述编辑区域中时，在所述第一目标位置处浮动显示与所述子功能组件对应的子功能窗口；

当所述第一目标位置处于所述输入输出区域中时，将与所述子功能组件对应的子功能窗口嵌入所述输入输出区域中进行显示。

4.根据权利要求3所述的方法，其特征在于，所述当所述第一目标位置处于所述输入输出区域中时，将与所述子功能组件对应的子功能窗口嵌入所述输入输出区域中进行显示，包括：

所述当所述第一目标位置处于所述输入输出区域中、且所述输入输出区中已存在至少一个的子功能窗口时，将与所述子功能组件对应的子功能窗口以卡片形式叠加嵌入至所述输入输出区域进行显示。

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

当发生对所述输入输出区域中的子功能窗口的第三目标操作、且所述第三目标操作所指向的第三目标位置处于所述编辑区域时，将与所述子功能组件对应的子功能窗口拖出至所述第三目标位置处进行显示。

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

当发生对所述内容区域中的内容容器的收起指令时，取消所述内容区域的显示，并将所述内容容器收起为内容控件进行显示。

7.根据权利要求6所述的方法，其特征在于，所述当发生对所述内容区域中的内容容器的收起指令时，取消所述内容区域的显示，并将所述内容容器收起为内容控件进行显示，包括：

当发生对所述内容区域中内容容器的第四目标操作、且所述第四目标操作所指向的第四目标位置处于所述编程区域时，取消所述内容区域的显示，并将所述内容容器收起为内容控件进行显示。

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

当发生对所述内容控件的第五目标操作、且所述第五目标操作的拖拽方向趋向于原有的内容区域时，还原所述内容区域，并在还原后的内容区域中将所述内容控件展开为内容容器进行显示。

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

在检测到关闭所述目标编程页面时，记录所述目标编程页面中的各容器、以及各所述子功能组件对应的布局数据并存储；所述布局数据包括显示状态信息和位置信息；

确定当前登录所述目标编程页面的用户标识；

将所述用户标识、以及所述目标编程页面对应的布局数据发送至对应的服务器，发送的用户标识和布局数据用于指示所述服务器进行关联存储。

10.根据权利要求9所述的方法，其特征在于，所述获得目标编程页面，包括：

在进入目标编程页面时，确定当前登录的用户标识；

获取通过所述用户标识上次登录所记录的、且与所述目标编程页面中的各容器和各子功能组件分别对应的布局数据；

根据所述布局数据重新绘制所述目标编程页面并展示。

11.根据权利要求10所述的方法，其特征在于，所述获取通过所述用户标识上次登录所记录的、且与所述目标编程页面中的各容器和各子功能组件分别对应的布局数据，包括：

从本地存储中读取通过所述用户标识上次登录所记录的、且与所述目标编程页面中的各容器和各子功能组件分别对应的布局数据；

当从本地存储读取失败时，根据所述用户标识生成布局数据拉取指令并发送至服务器；发送的所述布局数据拉取指令用于指示所述服务器查找与所述用户标识对应的布局数据并反馈；

接收所述服务器反馈的所述布局数据并更新本地存储。

12.根据权利要求1至11任一项所述的方法，其特征在于，所述进入目标编程页面之前，所述方法还包括：

展示图形化编程工具的导航首页，并在所述导航首页中显示多于一个的、且对应不同编程类别的编程入口；

当发生对于不同的编程入口的选中操作时，确定所述选中操作所指向的目标编程入口；

所述获得目标编程页面包括：

进入与所述目标编程入口对应的目标编程页面。

13.一种编程页面展示装置，其特征在于，所述装置包括：

获得模块，用于获得目标编程页面；所述目标编程页面包括内容区域和编程区域，所述内容区域中显示有内容容器，所述内容容器中显示有至少一个子功能组件；

确定模块，用于当发生对所述内容区域中子功能组件的第一目标操作时，确定所述第一目标操作所指向的第一目标位置；

显示模块，用于当所述第一目标位置处于所述编程区域中时，在所述第一目标位置处展示与所述子功能组件对应的子功能窗口。

14.一种计算机可读存储介质，存储有计算机程序，所述计算机程序被处理器执行时，使得所述处理器执行如权利要求1至12中任一项所述方法的步骤。

15.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述计算机程序被所述处理器执行时，使得所述处理器执行如权利要求1至12中任一项所述方法的步骤。

Images