Working with Ajax Components

From Documentation
Jump to: navigation, search

Working with Ajax Components

Multi Layout Regions components offer you the possibility to add Ajax functionality to your Web pages. By using the Multi Layout Regions components, you increase the speed and usability of your Web pages by updating only a part of the page at a time, rather than requiring the entire page to be reloaded after a user initiated change. Through the power of Ajax, the Multi Layout Region components are containers for the layout regions that you place on your pages. By using Multi Layout Regions, you avoid a complete refresh of a page. You may add multiple Layout Regions to a Multi Layout Region and you can change their content by refreshing only that part of the page using the navigation elements. You can place far more Layout Regions on the Multi Layout Regions because the Layout Regions are placed on sets of overlapped Layout Regions.

Understanding Multi Layout Regions

The Multi Layout Regions component is based on the Ajax programming style. This means that extra data is requested from the server and loaded in the background without interfering with the display and behavior of the existing page. Entire Web pages do not have to be reloaded each time there is a need to fetch data from the server.

A Multi Layout Region is a container you use to group Layout Regions in a defined area on the page. Multi Layout Regions are page segments that you can place, size, and control independently from the rest of the page.

There are five key aspects to using Multi Layout Regions:

  • When you move a Multi Layout Region on the page, its embedded Layout Regions move with it, and maintain their positions relative to each other and the Multi Layout Region.
  • You can send cascading action messages to the Multi Layout Region, and it will pass the message to all layout regions embedded within it. See Building Dynamic Pages.
  • You can embed a Layout Region within a text box. This gives you position based placement of the layout regions within the Multi Layout Region, while the rest of the page is arranged in a text-based layout.
  • You can assign an HTML output method to a Multi Layout Region independent of the method used for its parent Layout. See Setting the HTML Output Method for a Multi Layout Region.
  • You can position content with pixel level precision by dragging it into place in the container.

To create dynamic pages and make them richer and more interactive for the users, you can display the Layout Regions of a Multi Layout Region navigating with different types of tab controls. Tab Controls are page elements, such as accordions and tabbed panels that make your page more interesting and interactive. There are several types of navigation structure among Layout Regions of the Multi Layout Regions.

A Multi Layout Region can be placed either on the Page Layout or on the MasterBorder. You can add as many Multi Layout Regions to a page as you want.

Creating Multi Layout Regions

In NetObjects Fusion , you can display the Multi Layout Regions in six ways: TabTop, TabBottom, Accordion, Wizard, Toggle Pane and a default Multi Layout Region to which you can manually create its navigation elements. All these types of Multi Layout Regions can be accessed from the Standard toolbar.

The Multi Layout Regions tool allows you to create a set of overlapped Layout Regions.

To create a Multi Layout Region:

  1. In Page View, display the page on which you want to create a Multi Layout Region.
  2. In Page view, select a Multi Layout Region tool from the Standard toolbar.
  3. Draw a box where you want to position the Multi Layout Region.

Note: You may position and size the Multi Layout Region, just as you would when positioning any other object.

  1. Add Layout Regions to the Multi Layout Region.

Adding Layout Regions to Multi Layout Regions

In Page View, the Layout Regions of the Multi Layout Regions will be visible only one at a time. Therefore, you must edit them one by one.

By default, when you create a MultiLayout Region, NetObjects Fusion adds a Layout Region.

To add Layout Regions to the Multi Layout Region:

  1. Select the Multi Layout Region.
  2. The Multi Layout Regions Properties Panel appears.
  3. Click the "+" button on the Multi Layout section.
  4. A new Layout Region will be displayed within the Multi Layout Region. The name of each Layout Region is by default LayoutRegion#.

Renaming a Layout Region

Changing the name of the Layout Region will not change the Layout Region ID (object ID). Object ID, or object identification, means that every layout region has a unique, unchanging identity. In NetObjects Fusion, each object has a unique ID, although you can have the same name for two or more Layout Regions.

To change the default name of a Layout Region:

  1. From the Layout Region list, select the Layout Region you want to rename.
  2. Double-click its name.
  3. In the Edit dialog, type the new name of the Layout.
  4. Click on the OK button.

The changed name appears in the Layout Regions list. You can use any character including spaces and non- alphanumeric characters.

Adding Content to a Layout Region from a Multi Layout Region

To add content to a Layout Region that is place already in a Multi Layout Region:

  1. From Page View, select the Multi Layout Region.
  2. From the Multi Layout Region Properties panel, select the Layout Region you want to edit.
  3. After you have selected a Layout Region from the Layout Regions list, click on the Layout Region that is visible within the Multi Layout Region. The Layout Regions Properties panel appears.
  4. Add objects to the selected Layout Region. For additional information on adding objects or enabling data source context to Layout Regions, see Adding Objects to a Layout Region and Enabling Data Source Context.

A Multi Layout Region may contain as many Layout Regions as you want or even other Multi Layout Regions.

After adding content to one of the Layout Regions of a Multi Layout Region, select the next Layout Region from the list and add content to it.

Removing Layout Regions from the Multi Layout Regions

To remove a Layout Region from the Multi Layout Region:

  1. Click on the Multi Layout Regions to display the Multi Layout Regions Properties Panel.
  2. On the Multi Layout section, select the Layout Region that you want to delete from the Layout Regions list.
  3. Click on the "-" button.

Using the MultiLayout Properties panel, you cannot delete the default Layout Region that is added by default when creating a Multi Layout Region.

If the Multi Layout Region displays the default Layout Region, you cannot delete it using the "-" button. To delete this Layout Region, select the default Layout Region and press Delete.

Setting the Active Layout Region of a Multi Layout Region

The active layout region is the Layout Region that is visible when the page loads. You can set as an active layout region any of the layout regions that you have added to the Multi Layout Region.

To set an active Layout Region:

  1. In Page View, select the Multi Layout Region.
  2. From the Multi Layout Region Properties panel, select the Layout Region you want to set as active.
  3. Enable the checkbox that precedes the selected Layout Region.

If you prefer to have only the tab controls displayed on the published page, then make sure that the checkboxes that precede the Layout Regions names are unselected.

Setting Transitions Effects between the Layout Regions of a Multi Layout Region

You may apply transition effects for the following types of Multi Layout Regions: TabTop, TabBottom, TogglePane, Accordion, and Wizard.

To apply an effect:

  1. In Page View, select the Multi Layout Region.
  2. In the Multi Layout Region Properties panel, select one of the available effects from the Effects drop-down list.

For the Tab Top, TabBottom, and Toggle Pane Multi Layout Regions, you may choose:

  • Fast: To increase the speed of the transition between the Layout Regions.
  • Normal: To maintain the default speed of transition between the Layout Regions.
  • Slow: To decrease the speed of the transition between the Layout Regions.

For the Accordion and Wizard Multi Layout Regions, you may choose one of the following effects: Slide, Easeslide, Bounceslide, and False.

Click the Preview icon to test how they work.

Note: You cannot apply transition effects for the default Multi Layout Region.

Adding Multi Layout Regions to Existing Ones

Adding Multi Layout Regions to existing ones will create an arborescent structure of the Multi Layout Regions. You can view this structure on the Object Tree Panel. To add new Multi Layout Regions to existing ones:

  1. Select the Layout Region to which you want to add other Multi Layout Region.
  2. In Page view, select the Multi Layout Region tool from the Standard toolbar.
  3. Draw a box inside the selected Layout Region.

You can add as many Multi Layout Regions to the existing ones as you wish.

You can add to the secondary Multi Layout Region as many Layout Regions as you wish.

Choosing the Tab Control

The Tab Control options refer to the way in which the navigation takes place among the Layout Regions of the Multi Layout Regions.

You may choose one of the five Tab Control options that appear on the Multi Layout Region tool:

  • Tab Top. The navigation buttons of the Layout Regions are positioned at the top of the currently displayed Layout Region. The Layout Regions will be visible only one at a time. When the page loads, only the active Layout Region will be displayed. If you haven't previously selected an active Layout Region, then only the Tab Top controls will be visible on the page.
  • Tab Bottom. The navigation buttons of the Layout Regions are positioned at the bottom of the currently displayed Layout Region. The Layout Regions are visible only one at a time. When the page loads, only the active Layout Region will be displayed. If you haven t previously selected an active Layout Region, then only the Tab Bottom controls will be visible on the page.
  • Accordion. The navigation buttons of the Layout Regions are positioned one on top of the other. Only one Layout Region is visible at a time. When the page loads, only the active Layout Region will be displayed. If you haven t previously selected an active Layout Region, then only the Tab Top controls will be visible on the page.
  • Wizard. This Tab Control option resembles the Accordion option, but it has two additional navigation buttons: Previous and Next, which allow the navigation among the Layout Regions. When the page loads, only the first Layout Region will be displayed. If you have previously selected an active Layout Region, it will not take this setting into consideration.
  • Toggle Pane. The navigation buttons of the Layout Regions are positioned one on top of the other. This option allows you to view more Layout Regions simultaneously. When the page loads, only the active Layout Region will be displayed. If you haven t previously selected an active Layout Region, then only the Toggle Pane controls will be visible on the page.
  • The default Multi Layout Region does not offer the Tab Control option and you cannot set Transition effects between its Layout Regions.

In this case, to navigate between the Layout Regions, you need to create the navigation buttons manually. These navigation buttons should be created using actions. For more information, see Setting Navigation Elements.

Customizing a Multi Layout Region

To change the general settings of a Multi Layout Region:

  1. Select the Multi Layout Region you want to edit.

The Multi Layout Regions Properties Panel appears.

  1. Click on the General button of the Properties panel.
  2. Select the Grid option to grid the Multi Layout Regions.
  3. Set the values for the width and height of the Multi Layout Regions.
  4. Configure the HTML output.
  5. Select the Form option to create a form in the Multi Layout Region using the Form tools.

Resizing the Multi Layout Region

You can resize Multi Layout Region by dragging the Multi Layout Region.

  1. Move the pointer into the selected Multi Layout Region and hold down the mouse button.
  2. Without releasing the mouse button, move the pointer until you get the desired size.
  3. Release the mouse button to complete resizing the Multi Layout Region.

If you add an object with a size that exceeds the Layout Region size, the Layout Region automatically adjusts to the object's size. As a result, all the other Layout Regions that are part of the same Multi Layout Region will modify their sizes accordingly.

Note: You cannot make a Multi Layout Region smaller than the objects it contains. Two or more Layout Regions contained by the same Multi Layout Region cannot have different sizes.

Setting Navigation Elements

The default Multi Layout Region does not offer the Tab Control option. The navigation elements need to be created manually using actions. This type of Multi Layout Region is especially used if you don't want to have navigation elements on the Multi Layout Region.

To create navigation elements for the default Multi Layout Region:

  1. In Page View, select the default Multi Layout Region tool from the Standard toolbar.
  2. Draw a box where you want to position the Multi Layout Region.
  3. On the Multi Layout Region Properties Panel, click the "+" button on the Multi Layout section to add new Layout Regions.
  4. Next, add objects to serve as navigation elements.

You can place text, draw a button using the Draw tool, or import an image using the Picture tool. For example, you can create the navigation elements using the Rectangle tool.

If you have set four Layout Regions in the default Multi Layout Region, you need to create four rectangles. You can name them: First, Previous, Next and Last.

  1. Select one rectangle, for example Next.
  2. On the Rectangle Properties panel, select the Actions tab.
  3. Click the button "+" to add a new action. The Set Action dialog appears.
  4. In the When field, select the Mouse > Clicked option.
  5. In the Target field, select MultiLayoutRegion1 from the Object Tree window.
  6. In the Message field, select Object > Switch To option.
  7. In the Parameter(s) field, select the Values option. The Parameter Values dialog appears.
  8. Select the Layer Id field to enable the Layout Regions combo box.
  9. The Layout Regions combo box displays all the layout regions that have been added to the Multi Layout Region that is selected as target.
  10. From the Combo box, select LayoutRegion2.
  11. Click the Validate button.
  12. Click the OK button to close the Parameter Values dialog.
  13. Click the OK button to close the Set Action dialog.

Preview the page to test the results.

If you click the Next button, the Layout Region 2 will be displayed. Repeat the step above, setting new actions with the corresponding values for each layout region that is contained within the Multi Layout Region.

Creating Forms in the Layout Regions of a Multi Layout Region

You can only place form objects within a Layout Region of a Multi Layout Region.

You cannot place a form object directly on a Multi Layout Region.

By enabling the Forms check box from the Multi Layout Region Properties panel, you designate the Multi Layout Region as a form area. All the Layout Regions that it contains will inherit this attribute.

If you check the Form option from the Multi Layout Region Properties panel, you may add form objects on any Layout Region that is placed within the Multi Layout Region.

If you check the Form option from the Layout Region Properties panel, you may add form objects only on the selected Layout Region.

To designate a Multi Layout Region as a form area:

  1. Display the General section of the Multi Layout Region Properties panel.
  2. Check the Form option.

The Form Toolbar appears and the Multi Layout Region becomes a form area in which you may place multiple Layout Regions that also behave as form areas.

You can add any standard form objects to a form area, including single- and multiple- line text fields, check boxes, radio buttons, scrolling lists, and drop-down lists.

For more information, see Designing and Implementing Forms.

Setting DataSource Contexts (or Repetitive Region)

A Data Source Context is in fact an HTML tag that is repeated dynamically in order to display information from a defined recordset (XML or Data Base). The Data Source Context is a repetitive region that imports all the information from a database. If you are querying a database and want to return only one record that matches the condition FirstName = Joe, then you need a WHERE condition in the recordset, but you do not need to add a data source context. The query will return all the records meeting that condition, then terminate. However, if you want to return all records in which FirstName = Joe, you will need to add a repetitive region so that all records in the database are searched and those meeting the condition will be returned.

In NetObjects Fusion, you may define as many repetitive regions as you want, but there are only three object types that can be configured as repetitive regions:

  • Layout Region. If the Layout Region is placed within a Multi Layout Region, then only one Layout Region can be a repetitive region.
  • Row of a Table. In NetObjects Fusion, only a line from a table can be a repetitive region.
  • Multi Layout Region. Any Multi Layout Region can be configured as a data context, if you have previously defined a database or an XML recordset. All the actions targeting a repetitive region on a Multi Layout Region have to target the container containing the Multi Layout Region (not the Multi Layout Region itself). The Multi Layout Region can be configured as a data source context only with PHP.

Editing the CSS Code of a Multi Layout Region

You can customize the Multi Layout Regions by editing the CSS Code in Style View.

You can make general or particular modifications of the Multi Layout Regions style.

If you want to modify the general style of the Multi Layout Region, you may edit the MLR.css file.

The MLR.css file acts upon the entire site. If you want to modify the current style of a specific Multi Layout Region, then you modify the file that corresponds to it. The name of this file has the following structure: MultiLayoutRegion.number.type.css.

For example: MultiLayoutRegion1Tab_Top.css.

To identify the .css file, you need to know the name of the Multi Layout Region and its type. The identification of this file is made knowing the name of the MLR and its type (MultiLayoutRegion1Tab_Top.css).

If you change the Multi Layout Region ID, the CSS file that corresponds to it keeps its name, but the selectors' name is changed.

For example, if a Multi Layout Region has the Object ID: MultiLayoutRegion1, and you change its name to mlr1, then the CSS file name will be MultiLayourRegion1 and the selectors name mlr1.

Note: You can edit these files, but it is not recommended to delete them.

Before making changes to the CSS Code, make sure you have selected one of the Tab Control options for the Multi Layout Regions.

To edit the CSS Code of a Multi Layout Region:

  1. Go to Style View.
  2. Select the MLR.css file from the Styles Tree section.
  3. On the Selectors section, select the blue button on the left that corresponds with the Tab Control that you want to edit.

If you add multiple types of Tab Controls for the Multi Layout Regions, all types of controls will be displayed in the Selectors left pane.

  1. Select the graphic element of the Multi Layout Regions that you want to edit.
  2. Make the changes on the CSS-Common Panel.

For example, if you want to edit the style, the width and the color of the borders of the Accordion Multi Layout Region:

  1. Go to Style View.
  2. Select the MLR.css file from the Styles Tree section.
  3. On the Selectors section, select the blue button on the left that corresponds with the Accordion Tab Control.
  4. Select .basic.
  5. On the CSS-Common panel, select the Borders tab.
  6. There are four buttons for controlling the four borders: Top, Left, Right, Bottom.
  7. Set the style, the width and the color for the selected border.
  8. Place an Accordion Multi Layout Region on the page and preview it to see the results.

Each Multi Layout Region consists of navigation elements or tab controls and panels or layout regions. In Page Design, you can edit the background of each Multi Layout Region and of each Layout Region included in it. The Tab Controls cannot be edited in Page Design. You can edit the navigation elements in Style View by editing the CSS code.

Let's assume that you have a Multi Layout Region displayed as Tab Top with two Layout Regions and you want the entire component to have the same color. Even though you changed the background color for the Multi Layout Region and for its Layout Regions, the tab control background color doesn't change.

To edit the Tab Control style:

  1. Go to Style View.
  2. Select the MultiLayoutRegion1tab_top.css file from the Styles Tree section.
  3. On the Selectors section, select the blue button on the left that corresponds with the Tab Top Tab Control.
  4. Select #MultiLayoutRegion1LYR.ui-tabs-panel.
  5. On the CSS-Common panel, select the Background button and change its color.
  6. The changes will be visible for the element.
  7. Preview the page to see the results. The Tab Control has the same color as the background of the Multi Layout Region and its Layout Regions.

For more information, see Using the CSS Panels in the Selectors View.

Examples

Using a Multi Layout Region, you can create great effects on your site.

For example, if you have a photography site you can share your photo galleries with family, friends and other photographers in a fun, friendly and informative environment.

The Multi Layout Region tool offers an easier and a more intuitive way to view or manage your galleries.

You can quickly navigate from one photo gallery to the next. You can organize the galleries by topic, so that it's easy to locate a particular image or set of images.

In this example, we have several photo galleries that we want to organize by the following topics: family, travel and flowers. The Travel topic will contain two more topics.

First let's place the Multi Layout Region.

  1. In Page View, display the page on which you want to create a Multi Layout Region.
  2. Select the Tab Top Multi Layout Region tool from the Standard toolbar.
  3. Draw a box where you want to position the Multi Layout Region.
  4. Next, we will add three Layout Regions to the Multi Layout Region: for each photo gallery, we will add a Layout Region. So, each photo gallery will be placed on a Layout Region.
  5. On the Multi Layout Region Properties Panel, click the "+" button on the Multi Layout section.

A new Layout Region will be displayed within the Multi Layout Region. The name of each Layout Region is by default LayoutRegion#.

You can name it as you want. We will name each Layout Region:

  • Family: Here we will place the photo gallery that contains family pictures.
  • Travel: Here we will place the photo gallery that contains travel pictures.
  • Flowers: Here we will place the photo gallery that contains flower pictures.
  1. Double-click the Layout Region name.
  2. In the Edit dialog, type the new name of the Layout.

In this example, we will name the first layout region "Family" and here we will place the first photo gallery that will contain family pictures.

  1. Click again the "+" button on the Multi Layout section to create the next Layout Region.
  2. Double-click its name.
  3. In the Edit dialog, type Travel.

On this Layout Region, we will place another Multi Layout Region that will contain two Layout Regions. On each Layout Region, we will place a different photo gallery. These two galleries will be part of the same topic.

  1. Select again the Tab Top Multi Layout Region tool from the Standard toolbar.
  2. Draw a box on the Travel Layout Region to position the Multi Layout Region.
  3. On this Multi Layout Region, we will add two Layout Regions. We will name them: Places and World Travel. On each layout region, we will place a photo gallery.
  4. Select the first Multi Layout Region.
  5. Click the "+" button on the Multi Layout section to create the next Layout Region. Name it Flowers.

This Layout Region will contain a photo gallery with flower pictures.

Preview the page to test the results.

A Multi Layout Region can hold many different galleries under one page instead of holding a large number of child pages. Another advantage is that sets of related objects (photo galleries in this example) can be grouped within the same page.

Setting the HTML Output Method for a Multi Layout Region

You can select the HTML output method that determines the type of HTML code NetObjects Fusion produces for the current Multi Layout Region. This HTML method is independent of the method used to publish the parent container.

For example, if a Multi Layout Region is placed in a Layout area, you can set the Multi Layout Region to a different HTML output method than the one used for the Layout area. When you publish, the Layout area is published using its setting, and the Multi Layout Region is published using its setting. All Layout Regions contained in a Multi Layout Region will inherit its HTML output method, but you can also set a different HTML output method for each Layout Region that is contained in a Multi Layout Region.

  1. In Page view, click the Multi Layout Region. The Multi Layout Properties panel appears.
  2. In the HTML output section of the General tab, select the HTML output method you want from the drop-down list.
  • Site Setting generates the Multi Layout Region using the output method specified for the entire site. To change this setting, go to the Tools menu, choose Site Settings, and change the Browser compatibility setting.
  • Parent Setting generates the Multi Layout Region using the output method specified for the object that contains it. For example, if a Layout is set to HTML 4.01 with Tables, that is the parent setting for a Multi Layout Region contained in that Layout.
  • HTML5 uses CSS to generate less code and achieve a cleaner separation of content and styling by absorbing the benefits of HTML 4.01 and XHTML. This method of generation requires a modern browser.
  • HTML5 Dynamic uses XHTML, JavaScript, and CSS with the syntax of HTML5 to generate a clean separation of content and styling.
  • HTML 4.01 with Tables uses nested HTML tables to achieve the highest level of layout accuracy across browsers. If you select this option, you can set the table formatting preference. See Publishing with HTML 4.01 with Tables.
  • XHTML 1.0 uses XHTML, JavaScript, and CSS to generate less code and achieve a cleaner separation of content and styling. This method of generation solves some issues that your site visitors may encounter when displaying the pages that contain the Accordion or TogglePane components.
  • HTML 4.01 uses cascading style sheet positioning and layers to optimize your site. See Publishing with HTML 4.01.

The method you select for the Layout affects the entire page, including the MasterBorder and frames you assign to that MasterBorder.

Setting Multi Layout Region Background Properties

You can control the appearance of each Multi Layout Region by setting background properties. You can assign a background color and place an image in the background of a Multi Layout Region. To change the background settings of a Multi Layout Region:

  1. In Page View, select the Multi Layout Region you want to edit by clicking on it.
  2. The Multi Layout Region Properties Panel appears.
  3. Select the Background tab.
  4. In the Color field, select:
  • Automatic to set the background to the background color specified by the Layout's current SiteStyle or the Multi Layout Region's parent region.
  • Color to select a background color from the Color Picker. The selected color appears in the box to the right of the Color field. To change the color, click the box and select a new color from the Color Picker.
  1. In the Image field, select:
  • Automatic to set the background to the image specified by the Layout's current SiteStyle or the Layout Region's parent object.
  • Browse to select an image from the Open dialog. See Choosing an Image Format. If the picture is smaller than the Layout or Layout Region, the browser tiles the image. To change the image, click the Browse button to the right of the field.

Note: You can also change the background settings of a Layout Region that is contained within a Multi Layout Region by selecting the Layout Region and modifying its settings in the Background section of a Layout Region Properties panel. See Setting Layout and Layout Region Background Properties.

On the Actions section of the Multi Layout Regions Properties Panel, you can set actions to the Multi Layout Regions. See Building Dynamic Pages.