Customizing the Panels

In this section:

How to:

Similar to the ribbon tabs, App Studio features open panels that provide additional options to assist in the development of your application. Not all panels open at the same time, nor do they provide the same options. When you launch WebFOCUS App Studio for the first time, only the Environments Tree panel appears docked to the edge of the canvas. The File/Folder Properties panel also appears, but is auto hidden.

All panels, except the Environments Tree panel, are auto hidden by default. You can control the visibility of the panels in the View group on the Home tab. You can also use the panel customization options, which are located in the upper-right corner of the panel, to change the appearance and location of the panels around the canvas.

Procedure: How to Rearrange Panels on the Canvas

To rearrange a panel on your canvas using the panel properties menu, follow these steps:

  1. Click the Window Position button .

    The panel properties menu opens.

  2. Select an option from the panel properties menu.

    The options available are:

    • Floating. Undocks the panel and allows you to move it freely around the canvas.

    • Docking. Docks the panel onto the edge of your canvas where it last appeared.

    • Tabbed Document. Opens the panel in the canvas area, as a tab. This option is unavailable in App Studio.

    • Auto Hide. Hides the panel as a tab on the edge of your canvas. When you pause over the tab, the panel reopens.

    • Hide. Closes the panel.

    Note: You can also open the panel properties menu if you right-click the top of the panel.

Procedure: How to Pin and Unpin Panels to the Canvas

You can pin a panel to the canvas to keep it open while you develop your application. When you unpin the panel, it becomes auto hidden again, and appears as a tab on the edge of the canvas. When you hover the mouse over this tab, the panel reopens.

  • To pin a panel to your canvas, click the Auto Hide horizontal pin button .
  • To unpin a panel to your canvas, click the Auto Hide vertical pin button .

Procedure: How to Close and Reopen Panels

  • To close a panel, click Close in the upper-right corner of the panel.
  • To reopen the panel, go to the Home tab, and in the View group, and select the appropriate .
  • To reopen a panel in the HTML canvas, go the Utilities tab, and in the View group, select the appropriate check box.

Using Handles

How to:

You can dock floating panels within the canvas to ease accessibility. When you drag a panel across the App Studio canvas, a set of handles appears. These handles guide the placement of the panel, and automatically dock the panel to the edge of the canvas upon which you rest the mouse.

The following image shows an example of the handles that appear when you drag the Environments Tree panel across the canvas.

Floating Environments Tree with anchoring handles

Procedure: How to Dock Panels Around the Canvas Using Handles

  1. From the panel customization toolbar, click the arrow, and then click Floating.
  2. Drag the panel across the canvas and rest the mouse on a handle.

    When you rest the mouse over a handle, a shaded area appears. This shaded area provides a preview of where the panel will dock if you release the mouse, as shown in the following image.

    Dock panels around the canvas using handles
  3. Release the mouse when you are satisfied with the previewed location of the panel.

    The panel automatically docks to the edge of the canvas.

Additional panels open as you develop applications throughout the product. To conserve space around the canvas, you can combine these panels. When you mouse over a docked panel, a tabbed handle option appears, as shown in the following image.

Environments Tree with tabbed handles

This handle option combines the panels into a single container with tabs. You can switch between the panels by clicking the appropriate tab at the bottom of the container. An example of the Environments Tree tab and File/Folder Properties tab, in a combined panel container, are shown in the following image.