Customizing Web Page Layout and Style

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 Style.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.