Pages are a vital part of the BUE portal architecture. Depending on the type of a page, the BUE portal allows different levels of versatility in the way you organize, share, and interact with this page.
There are three types of pages in a portal. These include:
Note: To avoid unwanted behaviors, you should not edit pages in the Page Designer, or move or hide pages in the repository, while users are running these pages in the BUE portal.
The Page Designer allows you to create domain pages inside domains and folders of your choice. This section explains how to use the Page Designer to create a domain page. It also describes the different components of the Page Designer interface.
The Page Designer opens, and the Add Page dialog box opens inside the Page Designer.
The page displays in the Page Designer.
If left blank, panels behave like Easy Selector containers at run time. To learn more about the Easy Selector, see Using the Easy Selector.
Note: The Lock Page option is enabled, by default.
A new domain page is created and now displays inside the selected domain or folder. It is ready to be added to the BUE portal.
The following image shows the Page Designer.
The Page Designer contains the following components, located from the top of the interface to the bottom:
The components are described in the following topics.
Page templates provide a quick way of creating page layouts . When you create a new domain page, the Add Page window opens and displays layout presets from which you can choose before adding any content.
Note: Page templates are only available for domain pages.
The Add Page window is shown in the following image.
The Add Page window contains the following options:
You can access the Application menu through the BIP icon at the upper-left corner of the Page Designer window.
The menu contains options to:
The Quick Access toolbar allows you to save your changes to the current page.
The ribbon is a rectangular area of distinct groups of buttons that spans the top of the Page Designer window and provides access to commonly used tools.
The ribbon contains three tabs:
Note: You can hide the ribbon by clicking the arrow in the upper right corner of your page.
The following image shows the Layout tab.
The layout tab has two groups, Preview and Page.
The Preview group has a single Theme button. The Theme menu consists of two parts:
The default theme is Neutral.
The Page group has a single Layout button. You can use the Layout option to change to a column-based layout or to a fluid layout. In a column-based layout, dragging a panel results in a drop indicator, showing where the panel goes. In a fluid layout, the content automatically fills the page area in equal proportions. You can manually rearrange and nest these elements on the page. The display area changes its size depending on your browser dimensions.
The Layout menu has the following options:
When you choose any option other than Single Area, items snap to place within the area.
The following image shows the Style tab.
The Style tab is used to configure styling of objects, options for the background and borders, as well as fonts and colors of the text. This tab functions in the same way as does the Style tab in the Portal Designer.
From the State group, you choose which of the available states you are styling for an object. The state options are:
You can use an image, a color, or a combination of options when styling the background of an object.
The Image button is a split button. Clicking the left side of the button launches an Open dialog box. Clicking the right side of the button displays the Background Image Options. The Background Image Options allow you to change or remove an image.
Click Change Image to launch the Open dialog box. From this dialog box, select an existing image in the Repository to use as the background, and click Open.
To add a new image, use the Resources tree, and right-click the folder that you wish to place the new image in. Point to Upload and click Image.
The Select Background Repeat menu enables you to choose whether or not to repeat the background. The options are:
If you do not choose to repeat the image everywhere, you can select a background position using a visual menu. For example, you can position the background image at the bottom of the window, on the right. This feature is similar to Menu Bar positioning.
The default background position is top left.
The Background Color icon launches the color selection dialog box for setting a page background color. The same icon is used in the Border and Font groups to set the border and font colors, respectively.
The Reset Background icon in the Background group resets the background styling to the theme settings for the currently selected state. The same icon is used in the Border and Font groups to reset those groups.
In addition to color and reset, the Border group has style and width controls.
The Select Border Style menu is a visual menu that enables you to choose one of nine border styles. In the order of left to right (by row), the styles are:
The Width control sets the border thickness in pixels (px). If the style is set to none (the default for most objects), the Width control has no effect.
The Border Color icon launches the color selection dialog box for setting the Border color.
The Reset Border icon in the Border group resets the border styling to the theme settings for the currently selected state.
The Font group enables you to set:
In addition, the Font group contains:
The Font Color icon launches the color selection dialog box for setting the font color.
The Reset Font icon in the Font group resets the font styling to the theme settings for the currently selected state.
The following image shows the canvas of the Page Designer.
The canvas is the design area of your page.
The Properties panel appears near the bottom of the window, below the canvas. It shows properties that apply specifically to the currently selected item.
The breadcrumb trail appears at the bottom of the Page Designer window. It serves two purposes:
Click any portion of the breadcrumb trail to change the currently selected item on the page canvas. This feature is another way to select an item, in addition to selecting it through the canvas. This feature is especially useful when you are working with hidden or layered content.
The page is made up of different components, such as columns, containers, and resources. This section describes the different components of a page and their properties.
The Page, while not a component itself, does have properties that you can set.
The following are the properties of a page.
Note: The Lock Page check box is selected by default. Clear it to grant permission to end users from moving and adding content.
Columns have the following properties:
There are five types of containers:
The panel container holds a single piece of content, as shown in the following image.
The panel consists of three sections:
When you hover over a panel in Page Designer, the Change Panel Type button is illuminated. When you then hover over this button, you are presented with a menu where you can change the type of the panel.
To change the title of the panel, right-click the title bar and click Change Title, as shown in the following image.
The properties for all panel types are:
The accordion container can hold more than one piece of content, as shown in the following image.
In the preceding image, notice how the chart fits perfectly in the container. WebFOCUS InfoAssist+ has an option to AutoFit charts. When enabled, it accepts the sizing from the portal. This prevents the person who develops the chart and the person who uses it from having to coordinate sizing. Additionally, you can easily resize the container and see the entire chart.
The title bar and content area properties are the same. The overall properties have an additional section labeled Area.
In the Area section, you can use the icons in the order in which they appear to add, rename, delete, and reorder the areas. You can also create a new area using the new area bar in the container or delete containers using the menus. You must use the Properties panel to rename or reorder the areas.
There is also an additional Properties panel, the Pane Title Bars, which is accessible only through the breadcrumb trail. This feature lets you style the title bars of the areas. They are all styled together, but you can style the different states to distinguish the currently active one from the one on which the mouse pointer is resting.
The tabbed container can hold more than one piece of content, as shown in the following image.
The tabbed container has all the same properties as the accordion container. Instead of the Pane Title Bars properties, it has a property panel called Tab Bar. You can access this property panel by clicking it.
Unlike the Pane Title Bars, it is not blank. You can choose to style the buttons or the bar.
The responsive container is designed to help you build a responsive portal that automatically adapts to different screen sizes and mobile devices, providing an optimal viewing experience for users everywhere. You can build your responsive portal on your desktop, and make it available to users on different platforms. The following image shows an example of a responsive portal displayed on a desktop, tablet, and smartphone.
The responsive container intuitively changes its layout when you change the size of your browser. The default width and height of the container, and the inserted items, are pre-configured to offer the best positioning of the elements on the screen. You can manually change the dimensions of the items in the Responsive Item Properties dialog box. You can also change the layout options in the Responsive Panel Properties dialog box.
The Responsive Item Properties dialog box provides options to change the dimensions of an individual item within the responsive container. You can access the Advanced Responsive Item Properties dialog box at design time by clicking the Responsive Properties button in the property sheet.
The properties for a responsive item are:
Note: In a responsive layout, setting fixed dimensions for items is not recommended, because the viewport width and height continually change from device to device. Responsive layouts need to adapt to this change, whereas fixed dimensions create too many constraints. For this reason, you must only set a range between minimum and maximum width and height, defining an amplitude with which the item can vary in size.
The easy selector container provides a simple way to add content to a portal at run time, without opening the Resources tree. It also gives you the option to control which items users can access. When you insert an easy selector container into a page at design time, the Browse For Folders dialog box opens, as shown in the following image. Here you can select a folder that users can access at run time.
To change a target folder, click the Change Folder button in the Properties panel.
You can add content to a page in a few ways. The first way is to use the ribbon. Navigate to the Insert tab and choose a type of content in the Content group. The second way is to insert a blank panel, area, or tab container, and use the WebFOCUS Resources option to populate it. The Resources tree opens, allowing you to drag content into the page.
Note: When you click and drag one or multiple resources or folders from a tree to a blank page, a tabbed container is created, showing each resource.
The other three options (Image, Resource Tree, and Text) place their content in the content area that is selected, if applicable. Alternatively, they create a new panel with the content on the page.
The WebFOCUS Resource option opens the Resources tree on the right-hand side of the window. The tree shows you the content stored in the WebFOCUS Repository. You can access this content in the Domains section of the tree. Alternatively, you can find a resource that you marked as a Favorite.
The Resources tree is docked on the right. When it is docked, you can keep it open, close it, or unpin it so that it collapses to the side. The Resources tree is shown in the following image.
The last type of content is text. The text area is simple to use. All styling is applied to all the text. You cannot style individual words or characters.
The text area has no properties other than the content type and the Area ID.