Customizing_Web_Page

Customizing Web Page Layout

You can modify the web pages generated by Iron Speed Designer, the design themes that are used to create your application’s web pages, and the style sheets that provide a common style to the web pages. The ASPX web pages generated by Iron Speed Designer are CSS 2.0 and XHTML 1.0 compliant.

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. As with many things in Iron Speed Designer, there are several ways to change the stylistic and layout elements of web pages generated by Iron Speed Designer, depending on what you are attempting to do.

Approach	Uses
Toolbox controls and components	Best for: Creating sophisticated page layouts with database-connected components, such as tables, records, fields, and filters. Not good for: Changing any aspect of the application-wide look-and-feel, such as colors, fonts, or styles.
Style sheets	Best for: Changing application-wide stylistic elements, such as colors and fonts. Not good for: Creating database-connected components, such as tables, records, fields and filters.
ASPX pages ASCX controls	Cosmetic and behavioral changes are made in a web page editor, such as Microsoft Visual Studio .NET, one page at a time. Iron Speed Designer generates ASPX pages and ASCX controls. Both of these can be changed to give you the desired customized look and feel. Note, however, that these pages and controls are completely generated each time the application is built. So, you will want to save your changes in a separate folder so you can reapply them to your application. You can edit the HTML page and add any ASPX, JavaScript, Visual Basic, C# or other code within the HTML page. The HTML page is used as the basis for generating the ASPX page and all code is passed through unchanged except the GEN: code generation tags. Best for: Any layout and style modification where it is acceptable that the page be overwritten each time the application is built. Not good for: If changes are made to the actual ASPX or ASCX pages, any modification where regenerating the application and overwriting the modifications made to the page would cause difficulties.
Design Themes	Best for: Changing the application-wide HTML generated for each database-connected control, such as tables, records, fields and filters. Not good for: Laying out individual pages, except at the “page theme” level.

It’s easy to customize web pages, regardless of whether they were initially created by the Application Wizard or whether you added them by hand.

Use Iron Speed Designer to change web page layout

Use the Design tab for editing your application’s HTML layout pages.

Click the Design tab to edit a layout page in Iron Speed Designer. Go to the Preview tab after editing the HTML text to see a preview of the page with your changes.

Iron Speed Designer gives you the ability to quickly edit an HTML layout page:

Drag and drop controls within a page to change their position.
Drag new components from the tool box onto the web page.
Right-click any component to see a list of available editing options and other commands.
Click “Configure…” to edit more complex panels.

Once editing is complete, click the Preview tab to see the result.

Tips for page editing in Iron Speed Designer

At heart, the Design tab in Iron Speed Designer is an HTML table editor. Understanding this makes it easier to understand how to use the editor and will make your experience much more pleasant.

Tip #1: Dragging into an existing cell is easy. If you want to drag a label or field into an existing cell, just click it with your mouse and drag it to the new cell and release the mouse. The editor will place the control in its new location and redraw the page. It’s that easy!

Tip #2: Create a new row or column first. In many cases, you’ll want to add or move a control to a place on the page that doesn’t have an HTML cell. Before adding or moving controls, add the HTML cell first by right-clicking and adjacent cell and selecting “Insert HTML à Insert column…” or “Insert HTML à Insert row…”.

For example, to create a two column layout for a record panel, click the panel’s existing single cell to select it. Then, right-click and select “Insert HTML->Column at right”. This adds a column to the right. Next, Ctrl-Click the various fields and labels you wish to move to the newly created column at the right. Finally, drag them to the new column or click the right-arrow button to move them right.

Tip #3: Move several controls at once. You can Ctrl-Click and Shift-Click to select groups of controls. Once selected, you can drag them en masse to a new location. This is much quicker than dragging each control one-by-one.

Edit layout page HTML in Iron Speed Designer

For localized HTML editing, select the HTML Quick View window in the View pull-down menu to display the HTML Quick View window on the Design tab. As you select individual components and panels in the Design tab, the associated HTML will be displayed in the HTML Quick View window. You can change the localized HTML using the HTML Quick View window.

For page-level HTML editing, click the Edit tab at the top of the screen to display the HTML editor. The entire page’s HTML will be displayed. You have full access to the page’s HTML and can edit as you would normally.

Use your favorite HTML editor to further customize the generated layout page

This option offers significant potential to make the page your own, allowing you to reposition the generated HTML and code generation tags at the HTML level. You can add additional code generation tags, remove tags, and reposition tags.

Make Localized Style Changes in HTML Layout Pages

If you want to change the font or color properties of just one aspect of a web page in Iron Speed Designer, select it in the Design tab. Then, edit the HTML in the Quick View window (typically displayed at the bottom of the screen) to add any font or color properties you desire. You can also make these edits by clicking the HTML tab if you wish to edit the HTML for the full page.

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 Using and Modifying Style Sheets for details.

Make Global Layout Changes for Newly Created Applications in Design Themes

Use design themes to change the functionality, look and feel for newly created applications. Design themes provide the underlying look-and-feel for components generated by Iron Speed Designer, including the colors, fonts, positioning, and other stylistic elements. Each design theme is composed of a set of design theme 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 design themes is a very advanced capability and you should only attempt this if you’re a very experience and confident Iron Speed Designer user.