CN112306481A - 图形化编程场景的代码展示方法、***、装置及存储介质 - Google Patents

Abstract

本申请公开了一种图形化编程场景的代码展示方法、***、装置及存储介质。本申请方法包括：提供图形化编程界面，所述图形化编程界面中包含第一操作区域和第二操作区域，所述第一操作区域中容置有功能块集合，每个所述功能块分别被配置有一组功能代码，所述功能代码与所述功能块之间存在映射关系；接收用户发送的拖拽指令，所述拖拽指令用于请求将所述功能块集合中目标功能块从所述第一操作区域拖拽至所述第二操作区域的目标位置；在所述目标位置显示所述目标功能块；接收用户发送的切换指令，获取与所述目标功能块对应的目标代码；生成第三操作区域，并在所述第三操作区域显示所述目标代码。

Description

图形化编程场景的代码展示方法、***、装置及存储介质

技术领域

本申请涉及编程技术领域，尤其涉及一种图形化编程场景的代码展示方法、***、装置及存储介质。

背景技术

图形化编程是指设计人员通过操作图形元素来创建程序的编程方法，其与传统编程方式相比，设计人员在编程时无需键入文本命令，只需通过拖拽预设的图形化功能块，并将之按照规则拼接在一起就能够实现程序的设计，每一个图形化功能块都由一个或者多个功能函数构成功能代码从而实现模块编程功能。在图形化编程场景下，编程过程操作灵活、可读性强并且易于查错。

目前，在实现图形化编程的相关方案中，用户在进行图形化编程的过程中，图形化功能块的所代表的实际功能代码对用户而言是不可见的，用户无法了解图形化功能块实际功能代码的编程原理，影响用户体验。

发明内容

为了解决上述技术问题，本申请提供了一种图形化编程场景的代码展示方法、***、装置及存储介质，使用户在图形化编程过程中可以阅览到图形化功能块背后的实际功能代码，提升用户体验。

本申请第一方面提供了一种图形化编程场景的代码展示方法，包括：

提供图形化编程界面，所述图形化编程界面中包含第一操作区域和第二操作区域，所述第一操作区域中容置有功能块集合，每个所述功能块分别被配置有一组功能代码，所述功能代码与所述功能块之间存在映射关系；

接收用户发送的拖拽指令，所述拖拽指令用于请求将所述功能块集合中的目标功能块从所述第一操作区域拖拽至所述第二操作区域的目标位置；

在所述目标位置显示所述目标功能块；

接收用户发送的切换指令，获取与所述目标功能块对应的目标代码；

生成第三操作区域，并在所述第三操作区域显示所述目标代码。

可选的，若所述目标功能块的数量为若干个，则所述在所述第三操作区域中显示所述目标代码包括：

确定所述若干个目标功能块在所述第二操作区域中的拼接关系；

根据所述拼接关系确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序；

在所述第三操作区域中根据所述执行顺序显示所述若干个目标代码。

可选的，所述根据所述拼接关系确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序包括：

当所述拼接关系为纵向拼接时，确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序为顺序执行；

当所述拼接关系为横向拼接时，确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序为选择执行或循环执行。

可选的，所述方法还包括：

预先设定所述第三操作区域的属性为可编辑属性；

接收用户对所述目标代码的编辑指令，根据所述编辑指令修改所述目标代码；

根据修改后的目标代码更新所述目标功能块所配置的功能代码。

可选的，所述根据修改后的目标代码更新所述目标功能块所配置的功能代码包括：

判断修改后的目标代码是否合法；

若是，则根据修改后的目标代码更新所述目标功能块所配置的功能代码；

若否，则生成提示信息，所述提示信息用于提示用户所述目标代码不合法。

可选的，所述图形化编程界面中还包含演示界面，所述演示界面中包含有至少一个操作对象，在所述在所述第三操作区域显示所述目标代码之后，所述方法还包括：

接收用户发送的动态展示指令，编译并执行所述目标代码；

在所述演示界面中控制所述操作对象执行与所述目标代码对应的操作，并在所述第三操作区域中突出显示所述目标代码。

可选的，所述方法还包括：

接收用户发送的预览指令，获取与所述目标功能块对应的目标代码；

生成独立于所述图形化编程界面的临时显示区域，并在所述临时显示区域中显示所述目标代码；

接收用户发送的取消预览指令，隐藏所述临时显示区域。

本申请第二方面提供了一种图形化编程场景的代码展示***，包括：

第一显示单元，用于提供图形化编程界面，所述图形化编程界面中包含第一操作区域和第二操作区域，所述第一操作区域中容置有功能块集合，每个所述功能块分别被配置有一组功能代码，所述功能代码与所述功能块之间存在映射关系；

第一接收单元，用于接收用户发送的拖拽指令，所述拖拽指令用于请求将所述功能块集合中目标功能块从所述第一操作区域拖拽至所述第二操作区域的目标位置；

第二显示单元，用于在所述目标位置显示所述目标功能块；

第二接收单元，用于接收用户发送的切换指令；

获取单元，用于在所述第二接收单元接收到用户发送的切换指令后获取与所述目标功能块对应的目标代码；

第一生成单元，用于生成第三操作区域；

第三显示单元，用于在所述第三操作区域显示所述目标代码。

本申请第三方面提供了一种图形化编程场景的代码展示装置，包括：

处理器、存储器、输入输出设备以及总线；

所述处理器与所述存储器、输入输出设备以及总线相连；

所述存储器保存有程序，所述处理器调用所述程序以执行如第一方面中任一项所述的代码展示方法。

本申请第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质上保存有程序，所述程序在计算机上执行时执行如第一方面中任一项所述的代码展示方法。

从以上技术方案可以看出，本申请具有以下优点：

通过增加代码展示功能，使得用户在图形化编程过程中可以阅览到图形化功能块背后的实际代码，由此用户可以通过图形化功能块以及代码的对比来了解图形化功能块实际功能代码的编程原理，明晰编程思路，提升用户体验，提高实用性。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请提供的图形化编程场景的代码展示方法一个实施例流程示意图；

图2为本申请提供的图形化编程场景的代码展示方法另一个实施例流程示意图；

图3为本申请提供的图形化编程场景的代码展示方法另一个实施例流程示意图；

图4为本申请提供的图形化编程场景的代码展示***一个实施例结构示意图；

图5为本申请提供的图形化编程场景的代码展示***另一个实施例结构示意图；

图6为本申请提供的图形化编程场景的代码展示装置一个实施例结构示意图。

具体实施方式

本申请提供了一种图形化编程场景的代码展示方法、***、装置及存储介质，使用户在图形化编程过程中可以阅览到图形化编程函数背后的实际代码，提升用户体验。

需要说明的是，本申请提供的图形化编程场景的代码展示方法，可以应用于终端、***，还可以应用于服务器上，例如终端可以是智能手机或电脑、平板电脑、智能电视、智能手表、便携计算机终端，也可以是台式计算机等固定终端，具体应用于各图形化编程工具中。为方便阐述，下面以终端为执行主体进行举例说明。

请参阅图1，图1为本申请提供的图形化编程场景的代码展示方法一个实施例，该方法包括：

101、提供图形化编程界面，该图形化编程界面中包含第一操作区域和第二操作区域，该第一操作区域中容置有功能块集合，每个该功能块分别被配置有一组功能代码，该功能代码与该功能块之间存在映射关系；

在图形化编程场景下用户不需要编写源代码，只需要通过拖动图形化编程的图形化功能块(即本申请中的功能块)进行拼接组合，从而针对目标对象实现编程。在游戏场景中，目标对象可以是一个卡通人物，也可以是一架飞机，或者其他虚拟对象。

在本实施例中，终端提供的图形化编程界面即为图形化编程应用程序的交互界面，该图形化编程界面包含第一操作区域和第二操作区域。其中，第一操作区域中包含多种不同的功能块，即在该第一操作区域中显示多个预先编写好功能代码的图形化功能块，用户可以将第一操作区域中的功能块拖拽至第二操作区域以进行功能块的组合。

每一个功能块对应有一组功能代码，终端通过预先定义好的功能块与功能代码之间的映射关系，完成图形化编程程序到计算机可执行代码序列的转换。例如，某一功能块实现的功能为“旋转15度”，其对应的功能代码为“turn(15)”；另一功能块实现的功能为“在0.5秒内前进1格”，其对应的功能代码为“moveForward(1,0.5)”，这些功能块与功能代码两者之间建立有映射关系，在调用该功能块时终端将进行图形到语句的转换，即根据映射关系把该功能块转换为代码，然后再根据相应指令执行该代码，输出结果。

需要说明的是，图形化编程界面还可以包括除第一操作区域和第二操作区域外的其他区域，各区域在图形化编程界面中所提供的界面功能不同。另外，各区域在该图形化编程界面中的相对位置、区域大小以及各功能块样式都可以根据具体场景灵活设定，此处不做限定。

102、接收用户发送的拖拽指令，该拖拽指令用于请求将该功能块集合中的目标功能块从该第一操作区域拖拽至该第二操作区域的目标位置；

需要说明的是，目标功能块是指用户在图形化编程过程中所调用的功能块。在实际应用中，用户在第一操作区域中选中需要调用的功能块，并通过拖拽操作将该功能块拖拽并放置在第二区域中的合适位置。第二操作区域是指编程区，在该编程区中用户可以完成对目标对象的编程。

103、在该目标位置显示该目标功能块；

在通过拖拽将目标功能块放置在第二操作区域时，即视为将该被拖拽的功能块确定为当前待编辑对象，终端在目标位置显示该目标功能块，表示当前已成功调用该目标功能块，终端通过执行该目标功能块对应的目标代码即可对目标对象进行控制。例如，用户通过拖拽操作将“旋转15度”功能块从第一操作区域拖拽至第二操作区域后，终端在第二操作区域显示该功能块，此时在用户发起执行指令时，终端会根据映射关系获取并编译执行“turn(15)”代码，即控制目标对象旋转15度。

104、接收用户发送的切换指令，获取与该目标功能块对应的目标代码；

需要说明的是，目标代码是指与用户所调用的功能块相对应的功能代码。

在本实施例中，用户可以通过切换指令开启代码展示功能，即显示目标功能块对应的功能代码。具体的，终端可以通过检测在预设区域内的点击操作获取该切换指令，例如，用户按下特定按钮即可开启该代码展示功能。

在接收到切换指令后，终端根据预定义的功能块与功能代码的映射关系找到图形化编程程序中每个功能块对应的功能代码。

105、生成第三操作区域，并在该第三操作区域显示该目标代码。

在接收到切换指令后，终端生成第三操作区域，即代码展示区，终端在该代码展示区中显示获取到的目标代码。例如，在第二操作区域中显示有功能块“在0.5秒内前进1格”，终端当接收到用户发起的切换指令，根据映射关系获取到功能代码“moveForward(1,0.5)”，然后生成第三操作区域并展示该代码。需要说明的是，在图形化编程场景下，代码中的相关参数可以在功能块中直接进行修改，例如“moveForward(1,0.5)”中表示时间的参数，如果用户在功能块中修改了该参数值为1，在切换为代码展示时，代码也会更新为相应的“moveForward(1,1)”。

在本实施例中，通过增加代码展示功能，使得用户在图形化编程过程中可以阅览到图形化功能块背后的实际代码，由此用户可以通过图形化编程以及代码的对比来了解图形化功能块实际功能代码的编程原理，明晰编程思路，提升用户体验，提高实用性。

结合上述实施例，以下将对图形化编程场景的代码展示方法的相关机制以及代码修改功能进行具体介绍。

请参阅图2，图2为本申请提供的图形化编程场景的代码展示方法另一实施例，该方法包括：

201、提供图形化编程界面，该图形化编程界面中包含第一操作区域和第二操作区域，该第一操作区域中容置有功能块集合，每个该功能块分别被配置有一组功能代码，该功能代码与该功能块之间存在映射关系；

202、接收用户发送的拖拽指令，该拖拽指令用于请求将该功能块集合中的目标功能块从该第一操作区域拖拽至该第二操作区域的目标位置；

203、在该目标位置显示该目标功能块；

204、接收用户发送的切换指令，获取与该目标功能块对应的目标代码；

205、生成第三操作区域；

在本实施例中，步骤201至步骤205与图一实施例中步骤101至步骤105类似，此处不再赘述。

206、确定该若干个目标功能块在该第二操作区域中的拼接关系；

因为在图形化编程场景下，终端是通过图形化功能块的拼接过程来决定具体可执行的代码序列，因此当第二操作区域中的目标功能块有若干个时，在显示目标代码之前，还需要确定这些功能块的拼接关系，才能显示出正确的代码序列。

207、根据该拼接关系确定该若干个目标功能块对应的该若干个目标代码之间的执行顺序；

在图形化编程场景下，终端根据预先设定的拼接规则来处理图形化编程程序的构建和解析。具体的，终端根据功能块之间的拼接顺序来确定各代码的执行顺序，当功能块之间的拼接关系为纵向拼接时，终端确定对应的目标代码之间的执行顺序为顺序执行。例如，将“旋转15度”和“在0.5秒内前进1格”功能块按顺序纵向拼接在一起，此时根据拼接顺序终端将先执行“turn(15)”，然后再执行“moveForward(1,0.5)”，所以在代码展示时也应按照该执行顺序进行展示。

而当该拼接关系为横向拼接时，终端确定对应的目标代码之间的执行顺序为选择执行或循环执行。例如，要实现“重复十次旋转15度”就需要将“重复10次”功能块与“旋转15度”功能块进行横向拼接，实现循环执行，此时应按照该循环执行顺序显示代码为“for i_＝1,10；do turn(15)；end”

208、在该第三操作区域中根据该执行顺序显示该若干个目标代码；

终端根据目标代码之间的执行顺序依次显示目标代码，由此最后展示出的代码序列才能和功能块组合所编译的程序对应起来，符合最终程序执行的结果。

209、预先设定该第三操作区域的属性为可编辑属性；

进一步的，对于某些特定用户，还可以为其开放代码修改功能，通过代码修改功能使得用户能够自由的修改展示出来的代码。通过预先设定该用户的图形化编程界面中的第三操作区域为可编辑属性给予该特定用户修改权限。

210、接收用户对该目标代码的编辑指令，根据该编辑指令修改该目标代码；

用户在具有对第三操作区域中所展示的代码的修改权限时，用户即可对目标代码进行修改，从而实现用户期望的功能。例如，功能块“在0.5秒内前进1格”的代码为“moveForward(1,0.5)”，用户可以修改其代码为“turn(60)；moveForward(1,0.5)”，在修改后调用该功能块就能够实现旋转60度并在0.5秒内前进1格的功能，由此实现功能块的个性化定制以满足用户的不同需求。

211、判断修改后的目标代码是否合法，若是则执行步骤212，若否则执行步骤213；

在用户修改代码后，终端需要判断修改后的目标代码是否符合所使用的编程语言的预先设定好的语法规则。当符合时，终端执行步骤212，更新功能块对应的功能代码；而当不符合时，终端无法编译执行该代码，此时执行步骤213生成提示信息。

212、根据修改后的目标代码更新该目标功能块所配置的功能代码；

当用户修改后的目标代码符合预设的语法规则时，终端根据该修改后的目标代码更新与该目标代码对应的功能块所配置的功能代码，即按照修改后的目标代码重新建立该目标功能块与功能代码之间的映射关系并储存，在之后调用该功能块时就可以实现用户所更改后的目标代码的功能。

213、生成提示信息，该提示信息用于提示用户该目标代码不合法。

而当用户修改的代码不符合预设的语法规则时，此时生成提示信息提示用户该修改不合法，无法修改。例如，用户修改功能块“在0.5秒内前进1格”的代码为“tnrn(60)；moveForward(1,0.5)”此时代码具有拼写错误，终端无法编译并执行该代码，此时终端可以提示用户找不到“tnrn”函数，请检查拼写问题。

在本实施例中，代码的修改功能可以为高阶用户提供更加便利的程序编写方式，使得图形化编程与传统编程方式相结合，以满足不同用户的需求。

除代码修改功能外，本申请还提供了代码动态展示功能以及代码预览功能，下面进行具体描述。

请参阅图3，图3是本申请提供的图形化编程场景的代码展示方法另一实施例，该方法包括：

301、提供图形化编程界面，该图形化编程界面中包含第一操作区域和第二操作区域，该第一操作区域中容置有功能块集合，每个该功能块分别被配置有一组功能代码，该功能代码与该功能块之间存在映射关系；

302、接收用户发送的拖拽指令，该拖拽指令用于请求将该功能块集合中的目标功能块从该第一操作区域拖拽至该第二操作区域的目标位置；

303、在该目标位置显示该目标功能块；

304、接收用户发送的切换指令，获取与该目标功能块对应的目标代码；

305、生成第三操作区域，并在该第三操作区域显示该目标代码；

在本实施例中，步骤301至步骤305与图一实施例中步骤101至步骤105类似，此处不再赘述。

306、接收用户发送的动态展示指令，编译并执行该目标代码；

在本实施例中，对于一些目标代码，其包括一些比较复杂的代码函数，可以通过动态展示功能表现出代码函数的原理。在实际应用中，用户可以通过特定按键发起动态展示指令，终端在接收到该动态展示指令后编译并执行对应的目标代码，从而演示出目标代码所实现的功能。

307、在演示界面中控制操作对象执行与所述目标代码对应的操作，并在该第三操作区域中突出显示该目标代码；

在本实施例中，该图形化编程界面中还包含有演示界面，演示界面中包含有操作对象，终端根据目标代码控制操作对象，令其执行与目标代码对应的操作。与此同时在代码展示区域中对应突出显示该目标代码。例如，在控制操作对象“绕圈”的函数中，实际上由每一刻操作对象在至少两个方向的运动组成，终端可以在显示出的目标代码中对应标注出哪一段代码对应的是A方向的动作、哪一段代码对应的是B方向的动作，并通过该动态展示功能编译并执行该代码，在操作对象运动的同时实时高亮滚动展示对应的代码。

通过该动态展示功能可以使用户了解到复杂函数的实现原理，具有教学意义。

308、接收用户发送的预览指令，获取与该目标功能块对应的目标代码；

在本实施例中，除了将目标功能块拖拽至第二操作区域后进行切换操作展示代码外，还可以通过预览功能展示目标功能块对应的功能代码。具体的，用户可以通过将鼠标悬停在第一操作区域中的目标功能块上以开启预览功能，也可以通过鼠标右键点击的方式开启预览功能，具体开启方式此处不做限定。

终端在接收到预览指令后根据预定义的功能块与功能代码的映射关系获取目标功能块对应的目标代码。

309、生成独立于该图形化编程界面的临时显示区域，并在该临时显示区域中显示该目标代码；

终端在获取到目标代码后，生成一个临时显示区域用于显示该目标代码，该临时显示区域可以依附在目标功能块的一侧，具***置此处不做限定。该临时显示区域具体可以为一个悬浮窗的形式，独立于图形化编程界面外，覆盖于界面上。

另外，除了在该临时显示区域显示目标代码，以实现预览功能外，还可以在区域中显示一些代码使用示例，并对代码中的相关参数进行说明，以帮助用户快速了解该功能块所实现的功能以及该功能块的用法。例如，当用户鼠标悬停在第一操作区域中的“在0.5秒内前进1格”功能块上时，终端生成一个悬浮窗口，在悬浮窗口中显示代码“moveForward(1,0.5)”和示例1:“turn(30)；for i＝1,20do；moveForward(1,0.5)；end”，由此使得用户能够了解到该功能块的实现原理以及可以将该功能块嵌套在循环功能块中使用。

310、接收用户发送的取消预览指令，隐藏该临时显示区域。

用户可以通过在鼠标悬停后移动鼠标以取消该预览功能，也可以通过再次点击鼠标取消预览功能，终端在接收到用户发送的取消预览指令后隐藏临时显示区域，即取消预览。

在本实施例中，还提供了代码动态展示功能以及代码预览功能，为用户提供了更加便利的代码展示方式，以满足用户的不同需求，提高实用性。

以上是对本申请提供的图形化编程场景的代码展示方法进行的描述，下面对本申请中图形化编程场景的代码展示***进行描述。

请参阅图4，图4为本申请提供的图形化编程场景的代码展示***一个实施例，该***包括：

第一显示单元401，用于提供图形化编程界面，该图形化编程界面中包含第一操作区域和第二操作区域，该第一操作区域中容置有功能块集合，每个该功能块分别被配置有一组功能代码，该功能代码与该功能块之间存在映射关系；

第一接收单元402，用于接收用户发送的拖拽指令，该拖拽指令用于请求将该功能块集合中的目标功能块从该第一操作区域拖拽至该第二操作区域的目标位置；

第二显示单元403，用于在该目标位置显示该目标功能块；

第二接收单元404，用于接收用户发送的切换指令；

获取单元405，用于在该第二接收单元接收到用户发送的切换指令后获取与该目标功能块对应的目标代码；

第一生成单元406，用于生成第三操作区域；

第三显示单元407，用于在该第三操作区域显示该目标代码。

在本实施例中，在第二接收单元404接收到用户发送的切换指令后，第一获取单元405获取与目标功能块对应的目标代码，并通过第一生成单元406和第三显示单元407实现代码的展示，通过增加该代码展示功能，使得用户在图形化编程过程中可以阅览到图形化编程函数背后的实际代码，由此用户可以通过图形化编程函数以及代码的对比来了解函数实现的原理，明晰编程思路，提升用户体验。

以下对本申请中图形化编程场景的代码展示***进行详细描述，请参阅图5，本申请中图形化编程场景的代码展示***另一实施例包括：

第一显示单元501，用于提供图形化编程界面，该图形化编程界面中包含第一操作区域和第二操作区域，该第一操作区域中容置有功能块集合，每个该功能块分别被配置有一组功能代码，该功能代码与该功能块之间存在映射关系；

第一接收单元502，用于接收用户发送的拖拽指令，该拖拽指令用于请求将该功能块集合中的目标功能块从该第一操作区域拖拽至该第二操作区域的目标位置；

第二显示单元503，用于在该目标位置显示该目标功能块；

第二接收单元504，用于接收用户发送的切换指令；

获取单元505，用于在该第二接收单元接收到用户发送的切换指令后获取与该目标功能块对应的目标代码；

第一生成单元506，用于生成第三操作区域；

第三显示单元507，用于在该第三操作区域显示该目标代码。

可选的，若该目标功能块的数量为若干个，则该第三显示单元507包括：

第一确定模块5071，用于确定该若干个目标功能块在该第二操作区域中的拼接关系；

第二确定模块5072，用于根据该拼接关系确定该若干个目标功能块对应的该若干个目标代码之间的执行顺序；

显示模块5073，用于在该第三操作区域中根据该执行顺序显示该若干个目标代码。

可选的，该第二确定模块5072具体用于：

当该第一确定模块确定该拼接关系为纵向拼接时，确定该若干个目标功能块对应的该若干个目标代码之间的执行顺序为顺序执行；

当该第一确定模块确定该拼接关系为横向拼接时，确定该若干个目标功能块对应的该若干个目标代码之间的执行顺序为选择执行或循环执行。

可选的，该***还包括：

设定单元508，用于预先设定该第三操作区域的属性为可编辑属性；

第三接收单元509，用于接收用户对该目标代码的编辑指令；

修改单元510，用于根据该编辑指令修改该目标代码；

更新单元511，用于根据修改后的目标代码更新该目标功能块所配置的功能代码。

可选的，该更新单元511包括：

判断模块5111，用于判断修改后的目标代码是否合法；

更新模块5112，用于在该判断模块的判断结果为是时，根据修改后的目标代码更新该目标功能块所配置的功能代码；

提示模块5113，用于在该判断模块的判断结果为否时，则生成提示信息，该提示信息用于提示用户该目标代码不合法。

可选的，该图形化编程界面中还包含演示界面，该演示界面中包含有至少一个操作对象，该***还包括：

第四接收单元512，用于接收用户发送的动态展示指令；

执行单元513，用于在该第四接收单元接收到用户发送的动态展示指令后，编译并执行该目标代码；

控制单元514，用于在该演示界面中控制该操作对象执行与该目标代码对应的操作，并在该第三操作区域中突出显示所述目标代码。

可选的，该***还包括：

第五接收单元515，用于接收用户发送的预览指令；

该获取单元505还用于在该第五接收单元接收到用户发送的预览指令时，获取与该目标功能块对应的目标代码；

第二生成单元516，用于生成独立于该图形化编程界面的临时显示区域；

第四显示单元517，用于在该临时显示区域中显示该目标代码；

该第五接收单元515还用于接收用户发送的取消预览指令；

隐藏单元518，用于在该第五接收单元接收用户发送的取消预览指令时，隐藏该临时显示区域。

本实施例***中，各单元及模块的功能与前述图2、图3所示方法实施例中的步骤对应，此处不再赘述。

请参阅图6，图6为本申请中图形化编程场景的代码展示装置一个实施例，该装置包括：

处理器601、存储器602、输入输出设备603以及总线604；

该处理器601与该存储器602、输入输出设备602以及总线604相连；

存储器602保存有程序，处理器601调用所述程序以执行如上所述任意一项代码展示方法。

本实施例中，处理器601的功能与前述图1至图3所示实施例中的步骤对应，此处不再赘述。

本申请还涉及一种计算机可读存储介质，计算机可读存储介质上保存有程序，当所述程序在计算机上运行时，使得所述计算机执行如上所述任一代码展示方法。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的***，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，read-onlymemory)、随机存取存储器(RAM，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。

Claims (10)

1.一种图形化编程场景的代码展示方法，其特征在于，所述代码展示方法包括：

提供图形化编程界面，所述图形化编程界面中包含第一操作区域和第二操作区域，所述第一操作区域中容置有功能块集合，每个所述功能块分别被配置有一组功能代码，所述功能代码与所述功能块之间存在映射关系；

接收用户发送的拖拽指令，所述拖拽指令用于请求将所述功能块集合中的目标功能块从所述第一操作区域拖拽至所述第二操作区域的目标位置；

在所述目标位置显示所述目标功能块；

接收用户发送的切换指令，获取与所述目标功能块对应的目标代码；

生成第三操作区域，并在所述第三操作区域显示所述目标代码。

2.根据权利要求1所述的方法，其特征在于，若所述目标功能块的数量为若干个，则所述在所述第三操作区域中显示所述目标代码包括：

确定所述若干个目标功能块在所述第二操作区域中的拼接关系；

根据所述拼接关系确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序；

在所述第三操作区域中根据所述执行顺序显示所述若干个目标代码。

3.根据权利要求2所述的方法，其特征在于，所述根据所述拼接关系确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序包括：

当所述拼接关系为纵向拼接时，确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序为顺序执行；

当所述拼接关系为横向拼接时，确定所述若干个目标功能块对应的所述若干个目标代码之间的执行顺序为选择执行或循环执行。

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

预先设定所述第三操作区域的属性为可编辑属性；

接收用户对所述目标代码的编辑指令，根据所述编辑指令修改所述目标代码；

根据修改后的目标代码更新所述目标功能块所配置的功能代码。

5.根据权利要求4所述的方法，其特征在于，所述根据修改后的目标代码更新所述目标功能块所配置的功能代码包括：

判断修改后的目标代码是否合法；

若是，则根据修改后的目标代码更新所述目标功能块所配置的功能代码；

若否，则生成提示信息，所述提示信息用于提示用户所述目标代码不合法。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述图形化编程界面中还包含演示界面，所述演示界面中包含有至少一个操作对象，在所述在所述第三操作区域显示所述目标代码之后，所述方法还包括：

接收用户发送的动态展示指令，编译并执行所述目标代码；

在所述演示界面中控制所述操作对象执行与所述目标代码对应的操作，并在所述第三操作区域中突出显示所述目标代码。

7.根据权利要求1至5中任一项所述的方法，其特征在于，所述方法还包括：

接收用户发送的预览指令，获取与所述目标功能块对应的目标代码；

生成独立于所述图形化编程界面的临时显示区域，并在所述临时显示区域中显示所述目标代码；

接收用户发送的取消预览指令，隐藏所述临时显示区域。

8.一种图形化编程场景的代码展示***，其特征在于，包括：

第一显示单元，用于提供图形化编程界面，所述图形化编程界面中包含第一操作区域和第二操作区域，所述第一操作区域中容置有功能块集合，每个所述功能块分别被配置有一组功能代码，所述功能代码与所述功能块之间存在映射关系；

第一接收单元，用于接收用户发送的拖拽指令，所述拖拽指令用于请求将所述功能块集合中的目标功能块从所述第一操作区域拖拽至所述第二操作区域的目标位置；

第二显示单元，用于在所述目标位置显示所述目标功能块；

第二接收单元，用于接收用户发送的切换指令；

获取单元，用于在所述第二接收单元接收到用户发送的切换指令后获取与所述目标功能块对应的目标代码；

第一生成单元，用于生成第三操作区域；

第三显示单元，用于在所述第三操作区域显示所述目标代码。

9.一种图形化编程场景的代码展示装置，其特征在于，所述装置包括：

处理器、存储器、输入输出设备以及总线；

所述处理器与所述存储器、输入输出设备以及总线相连；

所述存储器保存有程序，所述处理器调用所述程序以执行如权利要求1至7中任一项所述的代码展示方法。

10.一种计算机可读存储介质，所述计算机可读存储介质上保存有程序，所述程序在计算机上执行时执行如权利要求1至7中任一项所述的代码展示方法。

Images