Blog: Posts from July, 2012

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Posts from July, 2012
Thursday, July 5, 2012PrintSubscribe
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.

List of containers for Customers page.

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

Show All Containers context menu option for page node in Project Explorer.

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

List context menu option for container node in Project Explorer.

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

A container located 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.

Open context menu option for 'container1' in list of containers.     Edit Form of container in Project Browser.

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

Sync context menu option for container1 in list of containers of Project Browser.      Container1 synched in Project Explorer.

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

Sync action on the action bar in the Project Browser.

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

Rename context menu option for container1 in the Project Explorer.

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

Dropping container1 on the right side of container2 in the Project Explorer.      Container1 placed after container2 in the Project Explorer.

Thursday, July 5, 2012PrintSubscribe
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.
Tuesday, July 3, 2012PrintSubscribe
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.

New Page icon on the toolbar of Project Explorer.

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.

Code On Time navigation menu option is displayed.

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

Clicking on the menu item will navigate to the link.

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

Drag Code On Time page node onto Customers page node.     Code On Time page node placed at the end of Customers.

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

Create New Child Page for Code On Time page node

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:

Three new child pages added under Code On Time page node.

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

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.

Code On Time and child pages displayed in the advanced two level menu.

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
Continue to Overview of Pages