The document discusses XPages scaffolding, which involves using customizable "layout" controls to create consistent user interfaces for applications. These layout controls can be modified via themes to implement different designs. Examples are given of layout controls generating HTML for the Dojo BorderContainer and Twitter Bootstrap frameworks. The approach allows applications to evolve their design over time by changing themes without modifying code. A demo then shows an application using different XPager themes to change its layout.

1. www.effichange.com
EffiChange
The EffiChange XPager Suite: Understanding XPages Scaffolding
Yuval Shimoni
yuval@effichange.com

2. EffiChange
www.effichange.com
What we’ll cover…
Why Scaffolding
What is Scaffolding
Examples of Scaffolding in XPages Controls
The Future of Scaffolding
Demo of Scaffolding in XPages Applications
Q&A

3. EffiChange
www.effichange.com
Why Scaffolding
User Interface (UI) and User Experience (UX) Design are constantly evolving.
However, in the enterprise, modifications made to existing applications are mainly the result of business requirements and only provide minor UI tweaks.
In IBM Domino XPages projects of dozens of applications, being able to create a consistent user interface can mean creating an application UI & UX Design that will be in-development for years.
With XPages, there are things that can be done to keep applications evolving with tomorrow's trends.
We call one of those methods "scaffolding“.

4. EffiChange
www.effichange.com
What is Scaffolding
Most "layout"-style Custom Controls in XPages are written to either match a specific UI Framework (OneUI) or a specific layout need. Both of these approaches have their negatives.
The Danger of Layout controls
Perception is Reality, where XPages is confused with OneUI
Potential negatives of OneUI Layouts
 It’s too much and has issues with mobile devices
Potential negatives of Custom (specific need) Layouts
Mainly the long term maintenance
A better way?
Let's examine a layout grid that could address the application layouts for 99% of our projects.

5. EffiChange
www.effichange.com
What is Scaffolding
We have a "top", "leading", "center", "trailing", and "bottom" grid layout.
These layout "sections" can house corporate branding information, navigation, content, links to other applications and required content, and even corporate legal disclaimers.
This "headline" layout will address the needs for the majority of your applications...

6. EffiChange
www.effichange.com
What is Scaffolding
but what if you wanted the "leading" and "trailing" sections to look more like this?
This "sidebar" layout has the "top and "bottom" sections inline with the "center" section, while the "leading" and "trailing" sections align with the top of the "top" and bottom of the "bottom" sections.

7. EffiChange
www.effichange.com
What is Scaffolding
What if we didn't want a "trailing" section?

8. EffiChange
www.effichange.com
What is Scaffolding
What if we wanted all of the sections, but we're using a responsive layout version of the Twitter Bootstrap JS & CSS UI Framework, and we want to make sure that the sections do not "bleed" into each other?

9. EffiChange
www.effichange.com
What is Scaffolding
All of these layout options can be done with a single XPages "layout"- style Custom Control, and that's where "scaffolding" comes in.
The XPager Suite generates "scaffolding" controls that are used to create "layout"-style Custom Control, which is further modified via Themes to get the exact layout we need for a given application.

10. EffiChange
www.effichange.com
What is Scaffolding
The resulting "scaffolding"-based "layout" Custom Control looks like this:
That is not to say that the application will use this exact layout. In fact, it is absolutely expected that an application-specific Theme. In the app.theme, we'll control exactly what is sent to the browser by setting rendered logic on specific sections and using the disableOutputTag property on others.

11. EffiChange
www.effichange.com
Examples of Scaffolding in XPager XPages Controls
The XPages XML for our generated "scaffolding"-based "layout"-style Custom Control:

12. EffiChange
www.effichange.com
Examples of Scaffolding in XPager XPages Controls
Note that the controls use the following standards:
.container > .content
These xp:panel controls use a container > content pairing for their setup. This is critical to control the markup being sent to the browser while accounting for future UI Framework structural/layout markup requirements.
layout.content.row > row content
The "top" section, combination of "leading", "center", and "trailing" sections, and "bottom" section are contained within their own xp:panel using a layout.content.row Theme ID. This is required for those UI Frameworks (Twitter Bootstrap, Foundation, etc.) that use Responsive Web Design (RWD) techniques and require that like-content be set on the same line. For example, responsive bootstrap could potentially merge the "top" and "leading" sections onto the same line on page resize, which would more than likely break the user interface and confuse the user experience.
borderContainer.theme
The borderContainer.theme uses the above "layout" controls to create a Dojo dijit.layout.BorderContainer-based layout.

13. EffiChange
www.effichange.com
Examples of Scaffolding in XPages Controls
Here is a table that shows which controls are rendered (disableOutputTag=true and/or rendered="false"), what HTML Element they generate, and which HTML Element Attributes they are given.
themeId
Rendered
HTML Element
HTML Attributes
layout.container
true
DIV
dojoType="dijit.layout.BorderContainer"
dojoAttributes=
design="headline"
gutters="true"
liveSplitters="true"
layout.content
false
layout.content.row
false
layout.content.top.container
true
DIV
dojoType="dijit.layout.ContentPane"
dojoAttributes=
region="top"
layout.content.top.content
false
layout.content.leading.container
true
DIV
dojoType="dijit.layout.ContentPane"
dojoAttributes=
region="leading"
layout.content.leading.content
false
layout.content.center.container
true
DIV
dojoType="dijit.layout.ContentPane"
dojoAttributes=
region="center"
layout.content.center.content
false
layout.content.trailing.container
true
DIV
dojoType="dijit.layout.ContentPane"
dojoAttributes=
region="trailing"
layout.content.trailing.content
false
layout.content.bottom.container
true
DIV
dojoType="dijit.layout.ContentPane"
dojoAttributes=
region="bottom"
layout.content.bottom.content
false

14. EffiChange
www.effichange.com
Examples of Scaffolding in XPager XPages Controls
When you use the specific "app.theme“ to customize the layout further, you can get this XPager example using the generated Border Container Theme:

15. EffiChange
www.effichange.com
Examples of Scaffolding in XPages Controls - bootstrap.theme
The bootstrap.theme uses the "layout" controls to create a simple HTML DIV and SPAN Element- based layout, that uses the Twitter Bootstrap UI Framework. Here is a table that shows which controls are rendered (disableOutputTag=true and/or rendered="false"), what HTML Element they generate, and which HTML Element Attributes they are given.
themeId
Rendered
HTML Element
HTML Attributes
layout.container
True
DIV
class="container-fluid"
layout.content
False
layout.content.row
True
DIV
class="row-fluid"
layout.content.top.container
False
layout.content.top.content
True
DIV
class="span12"
layout.content.leading.container
True
DIV
class="span3"
layout.content.leading.content
False
layout.content.center.container
True
DIV
class="span9"
layout.content.center.content
False
layout.content.trailing.container
False
layout.content.trailing.content
False
layout.content.bottom.container
True
DIV
class="span12"
layout.content.bottom.content
False

16. EffiChange
www.effichange.com
Examples of Scaffolding in XPages Controls
When you use the specific "app.theme“ to customize the layout even further, you can get the following XPager example using the generated Bootstrap 3 Theme:

17. EffiChange
www.effichange.com
The Future of Scaffolding
Use a Foundation Theme for XPages with the same exact "layout"-style Custom Control that will enable users to significantly change the user interface of an application without making a single change to the XPages markup .
Populate the Dojo dijit.layout.BorderContainer ContentPane sections by setting the "href" property (i.e. populating those sections of the application via AJAX), over-writing the XPages markup to evolve the applications, and more.
This enables users to install Themes on the Domino server and simply roll out updates to the frameworks that they are using or completely evolve the application without having to touch the XPages markup and rebuild the Notes database.

18. EffiChange
www.effichange.com
Understanding XPages Scaffolding
Demo of XPager Generated Applications Using Scaffolding

19. EffiChange
www.effichange.com
IBM Document Library using the XPager Border Container Theme

20. EffiChange
www.effichange.com
IBM Document Library using the XPager Border Container Extended Theme

21. EffiChange
www.effichange.com
IBM Document Library using the XPager Bootstrap 3 Theme

22. EffiChange
www.effichange.com
IBM Document Library using the XPager Bootstrap 3 Theme on iPhone 6

23. EffiChange
www.effichange.com
Understanding XPages Scaffolding
For more Information visit
www.effichange.com
Q&A