Customizing Web Page Layout

Go to:

Application Explorer, select a page, click Design Mode

You can modify many aspects of the web pages generated by Iron Speed Designer, including page layout, the controls used on a page, and the style sheets that provide a common style to your application’s web pages. You may wish to change your application’s look – the color scheme, fonts – or you may wish to change the layout of entire pages or the components generated by Iron Speed Designer on those pages, tables, fields, etc.

A quick tour of Design Mode

Change page layout and other configuration options in the Design Mode screen. The live preview at the right reflects your changes.

In the Application Explorer:

Select a page to edit.

In the Breadcrumb Navigation area:

Select a section of the page to edit, such as table control or button bar within the panel.

In the Quick Layout Spreadsheet to:

Customize page layout within the selected page section
Drag and drop new controls from the Toolbox into the Quick Layout Spreadsheet

In the Quick Layout Spreadsheet, right-click either individual cells or controls to:

Change cell and row styles
Set control properties

In the Cell Editor area below the Quick Layout Spreadsheet:

Make localized style changes, such as font and color properties
Add custom HTML and other tags. (Note: Iron Speed Designer replaces Code Generation tags with ASP.NET controls when the page is generated.)

In the Toolbox:

Drag databound fields, panels and other objects from the Toolbox onto the Quick Layout Spreadsheet.

At heart, the Design Mode screen in Iron Speed Designer is a code generator. When you save your layout, the application generator automatically regenerates the associated web page.

Familiar spreadsheet interface

The Quick Layout Spreadsheet’s row/column interface is very familiar to almost everyone. Use it like Microsoft Excel.

Add rows and columns. Easily add multiple rows and columns and customize your look-and-feel as you like.
Merge and split cells. You can merge cells horizontally or vertically.
Drag and drop controls to combine multiple controls into a single cell.

Use the Quick Layout Spreadsheet to lay out your pages. Modify record and table panel layout (row and column positioning), filter layout, and button bar layout. Drag individual fields, labels, panels and controls from the Toolbox onto the Quick Layout Spreadsheet. Then rearrange them to achieve your desired configuration. Finally, switch to the Live Preview mode to see how your page looks.

Easily move entire panels

Drag and drop panels into different cells or move the panel outside the current panel by cutting and pasting

Cut, copy and paste

Quckly move an entire group of cells and controls to another location on the same page or to another page.

No HTML necessary

Don’t remember your HTML <table>, <tr> and <td> tags? Don’t worry; you do not need to know HTML! Just drag and drop controls within the Quick Layout Spreadsheet and you’ll get a great looking page. Iron Speed Designer generates all the HTML so you don’t have to.

Use the Cell Editor to make localized layout and style changes

Highlight any cell and look at the Cell Editor below to see the code generation tags. (Iron Speed Designer replaces Code Generation tags with ASP.NET controls in the generated page.) Combine multiple fields together, and lay them out just as you want them to look. Put <br> tags, non-breaking spaces ( ) or any other HTML command.

You can add HTML within any area of your page as well as add any ASPX, JavaScript, Visual Basic, C# or other code within the Cell Editor. The Cell Editor contents are passed through unchanged to your generated ASPX pages, except for code generation tags which Iron Speed Designer converts into ASP.NET controls. You can even put a <td> tag around any code generation tag to customize any aspect of the table cell, and Iron Speed Designer will generate the ASPX page with your <td> tags instead of its own.

Pre-bound Toolbox controls and panels

Controls are now pre-bound to available fields (e.g., First Name). Simply drag and drop them from the Toolbox –no need to worry about hooking them up. Drag complete panels – parent or child, record or table – onto your page. Then switch to Live Preview to see them in action.

Of course you can change the properties – just double click the control or use the right-click menu to open the Properties dialog.

Easily add tabbed panel sections

Select a cell, right-click, and select Insert, Tabs. You can put panels, fields, or other controls within the tab panel.

To remove tabs, select a cell, right-click and select Remove, Tabs.

Live Preview shows your actual application

Quickly switch to live preview the see the actual page. No need to run the application and open another browser. Switch back and forth between Live Preview and Design Mode. Switch to another page in Application Explorer and see the actual page. No more having to enter or remember long URL’s.

Complete cell attribute control

Customize cells with any cell attribute (e.g., style or width) of your choosing. Select the cell, open the Tag Attributes dialog (right-click, Styles, Cell…) and enter any table cell (<td>) attributes such as Class and Style. The attributes are used when generating your ASPX web page.

See Configuring Cell, Row and Table Styles for details.

Easy access to code customizations

Select a control in the Quick Layout Spreadsheet and immediately see the relevant code tabs below. No hunting around for which function to change! All relevant methods are shown. Click the Docs button to see code documentation.

Make application-wide style changes in your application’s style sheet

You can quickly and easily make application-wide changes to color, font, and other style information. In Iron Speed Designer’s Application Explorer, select your application’s style sheet (typically Styles.css). Modify any of the font, color, and other properties you wish.

See Customizing Style Sheets and Page Styles for details.

Make global layout changes for newly created applications in page styles

Use page styles to change the functionality, look and feel for newly created applications. Page styles provide the underlying look-and-feel for components generated by Iron Speed Designer, including the colors, fonts, positioning, and other stylistic elements. Each page style is composed of a set of XSL template files that provide the HTML for individual data-bound components, as well as certain elements of your application's web pages. Note, however, that changing page styles is a very advanced capability and you should only attempt this if you’re a very experience and confident Iron Speed Designer user.

See Customizing Style Sheets and Page Styles for details.

Use your favorite ASPX editor to further customize the generated ASPX page

This option offers significant potential to make the page your own, allowing you to reposition the generated HTML / ASPX. You can add additional HTML, remove tags, and reposition tags. You can add any layout and style modification directly to the generated ASPX pages and ASCX controls in situations where it is acceptable that the page be overwritten each time the application is built. Cosmetic and behavioral changes can be made in any web page editor, such as Microsoft Visual Studio .NET, one page at a time.

Note: Changes made directly to the actual ASPX or ASCX pages will be lost when Iron Speed Designer regenerates these pages. For example, you will lose your page customizations if you subsequently modify the page in Design Mode or otherwise regenerate the customized portion of the page. You may want to save your changes in a separate folder so you can reapply them to your application.