Developers Manual > Cocos Studio > UI Editor > UI Editor Workspace > UI Editor Object Structure Panel

UI Editor Object Structure Panel


The Object Structure Panel manages all widgets in the UI interface, including child-parent relationship management and hierarchy management. The root object of the Object Structure Panel is a panel.



  1. Select the Eye icon on the object tree to toggle visibility by showing or hiding the widget.
  2. Use this functionality to set the widget’s visible property.


  1. Select the Circle icon to lock or unlock the widget.
  2. When the widget is locked, all associated operations will be disabled.

Hierarchy Adjustment

# You can adjust the hierarchy of widgets by selecting the widget with your left mouse button, then dragging and dropping the widgets.
# After dragging the ImageView widget to the next panel, there will be a blue line between the two panels. When you release your mouse, the ImageView widget will be positioned between the two panels. If you drop the ImageView widget on top of a panel, then there will be a blue circle around the panel. When you release the mouse, the ImageView widget will be added as a subset of the panel.

Context Menu

Please go to the Render panel page :UI_Editor_Rendering_Panel.

3-2-3-img-01.png (6.8 kB), 2013-12-02 09:23

3-2-3-img-02.gif (44 kB), 2013-12-02 09:23

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.