Show/Hide Toolbars

Navigation: Using ASPRunnerPro > Visual Editor

ASPrunnerPro32x32     ASPRunnerPro manual


About Visual Editor

Scroll Prev Next More

 

Visual Visual Editor built-in in ASPRunnerPro is an editor control that allows the user to edit HTML contents in a more user friendly way. The editor control is very flexible and enables the advanced user to change the appearance of the pages in design or html mode.

visual_editor_1

Adding custom pages to your application

You can add a new page to your application or import existing one. You can import the whole folder with HTML, images, CSS files and edit/preview them in Visual Editor.

editor_custom_files

Locking of custom pages

After you modified a page in Visual Editor, you can lock it from further automatic modifications. To lock a page, right click the page name and select Lock page. The lock icon will appear before the name of locked page. Note that you can modify locked pages manually. To unlock the page, right click the page name and select Unlock page.

lock_page

Also you can enable Lock pages modified in Visual Editor automatically option in Project -> Settings. After that all pages that you manually modify will be locked from further automatic modifications.

project_settings1

Editing field names

Now you can edit field names directly Page Designer. But if multiple project languages are selected on Miscellaneous page, you will not be able to do that. In this case double-click the field name and edit it in the opened Label Editor.

Setting landing page

You can set any page as landing page - the page to open when the user enters the site (if login is disabled or login and guest user login are enabled) or just after login. To do that right click the page name and select Set as Landing page.
 

The Visual Editor page allows you to modify the visual appearance of your pages and instantly preview the results.
You can see two sections on that page:

Tables list on the left. Moving across tables and their related pages, you can select a page to view/modify. To filter pages by the page name, use the text field above the events tree.

Editor on the right where you can alter certain aspects of your page, such as the project theme, fonts size and custom CSS,  and preview how the selected page will look like in a browser.

This page has custom settings is an option that allows you to select the appearance for pages that differ from the project ones.

style_editor_page

Definition of layout, style, color scheme and theme

Layout

A layout is a page template (for an Add page, Edit page etc). Each template defines corresponding page structure and stored in the .ly file in the folder C:\Program Files\ASPRunnerPro10.1\templates\layouts.

You can choose the layouts for all pages by selecting the project scheme, for all List/Add/Edit/etc. pages by selecting layout from the Layouts list and for the currently selected page by enabling This page has custom settings option and then selecting layout from the Layouts list.

Styles

Style is a set of parameters that includes font, font size, margins, borders, alignment and more. Styles are stored as the .style files in the folder C:\Program Files\ASPRunnerPro10.1\styles.

Color schemes

The color scheme describes the color palette of layout elements. Color schemes are stored as the .color files in the folder C:\Program Files\ASPRunnerPro10.1\styles\colors.

Themes

Themes combine the properties of the Styles and the Color schemes.