Using responsive design controls, properties, and layouts

Responsive controls and properties

For creating applications that support a responsive design, Domino Designer provides controls (with related properties) and a new configuration for the Application Layout control. These features are found in the Bootstrap plugin and serve to enhance the Responsive tool set available to XPages application developers. Responsive means that they will display differently on different screen sizes, for optimal usability on any screen size. For example, they will appear differently on mobile devices as opposed to a desktop web browser.

The three new responsive controls are:

• Carousel - a control that adds a slideshow to your application
• Dashboard - a control for displaying important information to users at a glance
• Navigation bar - a control that adds a responsive navigation bar to your application

The Carousel control is a slideshow component that can be added to your application. It allows automatic and/or manual cycling through a number of slides in the Carousel. This control would typically be used at the top of a web page, often on the landing page or homepage of an application, although it can be adapted and used in a number of situations.

The Carousel is designed to span the full width of the page and the backgrounds are designed to fill the entire Carousel area. The control is responsive and customizable, letting you build visually appealing controls to enhance the user experience of their applications.

Each of the slides in the Carousel is represented by a slide node that can be customized to display different backgrounds and different textual information to the end user. The Carousel provides arrow buttons on the left and right to manually navigate through the slides. It also provides a set of indicator circles towards the bottom, one of which indicates the currently active slide. The indicator circles can also be clicked to jump directly to that particular slide.

The Dashboard control is a component that can be used to highlight important information to users at a glance in an application. The Dashboard is made up of a number of "dash nodes" - up to 12 of them. Each node can then be further be customized. For example, this control could be used as an administration dashboard that displays the status of a number of services. As another example, the dashboard could display the different status types for tasks and the number of tasks currently under each status type in a task tracking application.

The Navigation Bar control is a navigation bar that can be added to an XPage. Previously, navigation bar functionality was built into the ApplicationLayout control when using the Bootstrap themes. With this release of the ExtLib, you can add Navigation Bars to any XPage without needing to rely on the Application Layout control.

Navigation Bars are typically used at the top and/or bottom of a page and provide links and dropdown menus to navigate around your application, as can be seen with the two black Navigation Bars in the image above. However, the Navigation Bar can also be added anywhere in the page contents, such as with the grey Navigation Bar in the example image above. You also have the ability to add other controls to the content of the Navigation Bar, such as the search field in a bottom Navigation Bar, for example.

All of these controls appear in a new section of the control palette in Domino Designer, the Responsive palette. From there, they can be dragged onto an XPage. Each control then has a set of properties that let you tailor the controls and their responsive behaviour.

For complete information on these controls and their properties, refer to the Control reference (Extension Library) section of this guide.

Simple Responsive Layout Configuration

The Simple Responsive Application Layout Configuration is a new configuration for the Application Layout control. It is a simplified configuration, reducing the number of available properties and rendered elements in the Application Layout. This configuration has more of a focus on responsive capabilities, and is designed to be quick and easy to configure whilst still providing plenty of functionality.

For more complete information on this configuration options, refer to the Application Layout control and the Application Configuration property topics in this guide.