Code On Time: Web Application Generator

Thursday, July 5, 2012Print Subscribe

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

Tuesday, July 3, 2012Print Subscribe

External URL for Page

Web applications may need to integrate with external websites. An application navigation menu option pointing to an external URL will be created if a page has its External Url property set to the URL of the resource. Application generator will not create a physical application page when External Url property is not blank.

Start the Project Designer. On the Project Explorer toolbar, click the New Page icon.

Give this page the following settings:

Property	Value
Name	CodeOnTime
Index	1005
External Url	http://codeontime.com/
Path	Code On Time
Title	Code On Time

Press OK to save the page. On the toolbar, press Browse.

The new page will show up in the navigation menu and site map.

Clicking on the link will navigate to the External Url specified previously.

Go back to the Project Designer. Drag the Code On Time page node onto Customers page node.

Right-click on Customers / Code On Time page node, and select New Child Page.

Proceed to create three child pages with the following properties:

Name	Title	External Url
Download	Download	http://codeontime.com/download
Learn	Learn	http://codeontime.com/learn
Buy	Buy	http://codeontime.com/buy

The Project Explorer page configuration hierarchy should look like the picture below:

Exit the Designer, select Settings option, and select Layouts. Change the menu presentation style to Advanced Two-Level.

Press Finish, and then generate the web application.

Mouse over the Customers menu option. The advanced menu will open with the CodeOnTime and all child menu options visible.

If you want the links to open in a new browser window, then change the External Url to start with “_blank:”.

Name	External Url
Download	_blank:http://codeontime.com/download
Learn	_blank:http://codeontime.com/learn
Buy	_blank:http://codeontime.com/buy

Labels: Designer, Web Application Generator

Tuesday, July 3, 2012Print Subscribe

Overview of Pages

Pages are the building blocks of the application, and host instances of data controllers (Data Views) and custom user controls (Controls).

Page Properties:

Property	Description
About This Page	Defines the text displayed in the “About This Page” box on the page itself.
Custom Style	Specifies an optional list of space-separated custom CSS classes to be applied to the page.
Description	Specifies the tooltip on the navigation menu.
External Url	Defines an arbitrary uniform resource locater. If specified, then no physical application page is created. Optional.
Index	Specifies the order of the page in the application navigation hierarchy. The order of pages can be changed by using drag and drop in the Project Explorer.
Master Page	Specifies a custom master page.
Name	Specifies the name of the physical page created by the application generator.
Path	Specifies where the page is positioned in the hierarchy. The Path segment can be changed by using drag and drop in the Project Explorer. The page can be excluded from the menu by clearing the Path property.
Roles	Specifies which user roles are permitted to access the page.
Style	Specifies the standard CSS class applied to the page. The standard stylesheets are configured to change the icon displayed in the top left corner of the page.
Title	Specifies the title of the page displayed in the browser title bar or tab.

Learn to work with pages in the Project Designer.

Learn to drag and drop pages in the Project Explorer.

Common tasks:

Task	Description
Extending Pages	Learn to extend generated pages with custom content without losing changes after subsequent code generation.
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.
Custom Master Page	Learn how to replace the standard master page with a custom master page.
Creating a Form Template	Learn to add custom templates to pages to affect rendering of form views.
Creating a Grid Template	Learn to add custom templates to pages to affect rendering of grid views.

Labels: Designer, Web Application Generator