Page Designer

The Page Designer is the main DBACentral for MySQL tool for creating and modifying web pages. To design a new editable web form double-click the Create web form in design view item within the Profile Window | Web Pages page. To design a new web data grid double-click the Create web grid in design view item within the Profile Window | Web Pages page. To design the existing page select its name within the Profile Window | Web Pages page and click the Design button on the toolbar or in the popup menu.

The main area of the Page Designer is a WYSIWYG editor, allowing you to design your web pages by formatting text, adding controls, tables, hyperlinks, etc.

You can put a new control or element to the page in two ways. The first is to position a cursor at the required position and click at the appropriate control button on the Page Designer toolbar. Then define the control data source and other properties within the Page Inspector dialog. Other way is to click the Insert Field button and select the data field within the Page Field Control dialog for creating a control bound to the selected field. After the control or element is created, you can edit its properties within the Page Inspector floating window.

To change the position of the control, simply select it and drag to the new place. To resize the control capture one of the points on the control bounds and drag until control gets to the required size.

The popup menu of the Page Designer allows you to cut, copy, paste, and delete the form controls.

The Page Designer tool pallette provides a variety of controls and elements to put onto the form. Below are the descriptions of the controls.

Div - a simple control to group other controls, display optional text, or display text from the table column or SQL query without editing;
Text Edit - this control allows displaying and editing the table column or SQL query text;
Text Area - this control can display large multi-line texts; better to use with TEXT fields;
Dropdown Box - a drop-down list for displaying columns of ENUM type or a set of values, taken from some other table field; better to use it with ENUM fields or columns, which are parts of relationships;
Image - a control for displaying static images, fields, containing image URLs, or BLOB fields, which contain BMP, JPEG, GIF, or PNG images;
Table - this control allows you to insert simple tables or data grids to your page.

You can edit page HTML directly using the HTML View mode. Click the button on the Page Designer toolbar to switch to this mode.

Two pages are available in HTML View: HTML and CSS. The first one provides only HTML part of the page, and the CSS tab allows you to edit style classes for controls, tables, and links on your page. You can also set the external file name for your style sheet, so it will be saved into this file.

After you click the Apply button, the PHP part of the script is being generated, and the whole script is being saved into the specified page file. If you want to discard all changes and revert to the last saved page design, click Revert.