Visual representations of code in application development environments

摘要

A device can implement a stage view depicting a visual element for each of a plurality of components of an application under development. The device implements a code overlay showing whether code can be applied to the components and, for components to which code can be applied, a code status indicator. The status indicator may relate to procedural code or to a data member, such as an object or other variable. Different indicators can be used to show that code can be applied, code is applied correctly, incomplete code is applied, or code is applied but contains an error. Different colors or other visual effects can be used to indicate status. The indicators may be selectable to provide a code viewing or editing interface. A status indicator for code associated with a component can be positioned near the visual representation of the component, but may be repositionable.

主权项

1. A computer-implemented method, comprising:
generating a stage view comprising a plurality of visual elements within a graphical interface of an application under development, wherein each of the plurality of visual elements is associated with a respective component of a plurality of components of the application under development, wherein the plurality of components provide functionality for the plurality of visual elements within the graphical interface of the application under development; presenting the stage view in a development interface of a development environment, wherein the development environment modifies the application under development; applying a code overlay to the stage view in response to the development environment receiving an input for activating the code overlay, the code overlay mapping visual indicators to the plurality of visual elements; determining, for at least some of the visual elements of the plurality of visual elements, that respective code can be applied to the respective component associated with the visual element of the graphical interface; and in response to each determination that the respective code can be applied to the respective component, updating a respective visual indicator that is rendered and overlaid on the stage view in the development interface, wherein the respective visual indicator is rendered adjacent to a respective visual element for a respective component associated with the visual indicator, and wherein the respective visual indicator is indicative of a respective status of the respective code applied to the respective component associated with the visual element.