Blog: Posts from July, 2012

Blog

Posts from July, 2012

Thursday, July 5, 2012Print Subscribe

The Project Designer has a built-in Preview window to display the web application without opening a new window each time. It also offers instant inspection of page elements.

Start the Project Designer. On the Project Browser toolbar, select Generate option.

The Preview window will open when the generation has finished. If a page was selected in the Project Explorer, that page will be opened.

The Preview toolbar displays Back and Forward navigation buttons, the current URL, and a Refresh button.

The Designer button on the left side will bring forward the Project Designer window.

The Project Designer toolbar now has a button in the same location for rapid switching between Designer and Preview.

The Inspect button allows you to select a page element in the web application and have it synchronized in the Project Browser window.

For example, click on Inspect to activate inspect mode.

Click on an area of the web application.

The relevant project configuration element will be opened in the Project Browser and the corresponding node will be selected in the hierarchy of the Project Explorer.

The last button on the Preview toolbar, View in Browser, will open the current page in your default browser.

Labels: Designer, Web Application Generator

Thursday, July 5, 2012Print Subscribe

Working with Containers in the Project Designer

Containers define the layout of the page. Each container may start a new row or new column. The content of containers is rendered in the order of their appearance on the page. Containers host instances of data controllers (data views) and custom user controls (controls).

A list of containers can be viewed on the Containers tab of a page.

In the Project Explorer, the context menu option Show All Containers allows browsing the list of page containers.

The context menu option List allows viewing all containers of a page.

A container can be located by entering the Id of the container and the name of the page in the configuration navigator.

In the list of containers, directly clicking on the Id of the container or using context menu option Open will navigate to the container property page.

The Sync context menu option will select the container in the Project Explorer.

The Sync action on the action bar in the property page will select the container in the Project Explorer.

The container Id can be changed using the Rename context menu option.

Containers can be rearranged by dragging container nodes in the Project Explorer.

Labels: Designer, User Interface, Web Application Generator

Thursday, July 5, 2012Print Subscribe

Overview of Containers

Containers are placed on pages, and hold instances of data controllers (data views) and custom user controls (controls).

Container Properties:

Property	Description
CSS Class Name	Assigns a custom CSS class to the container.
CSS Style Properties	Assigns CSS styling rules to the container.
Flow	Determines how the container is rendered on the page. If Flow is “New Row”, then the container will be rendered in the next container row. If Flow is “New Column”, then the container will be rendered in a new column to the right of the previous container.
Id	The Id of the container is automatically assigned when the container is created. It can be changed using the Rename context menu option in the Project Explorer.
Page	Specifies which page the container belongs to.
Width	Specifies how much horizontal space the container will take up. It can use percentage of the page width, or an exact pixel width.

Learn to work with containers in the Project Designer.

Learn to drag and drop containers in the Project Explorer.

Common tasks:

Task	Description
Extending Pages	Learn to break down page layout into multiple containers.
Configuring Master-Detail Relationships	Learn to configure a master-detail page with multiple levels.
Grouping Data Views in the Same Container	Learn to hide child data views when the master data view becomes invisible.

Labels: Designer, User Interface, Web Application Generator