Bootstrap has recently been integrated into the XPages core framework, allowing the creation of sleek, polished, responsive XPages applications. Using this new feature your apps will look great, with a consistent look and feel from the web browser to the mobile experience on phones & tablets. This session will demonstrate all of the tools now at your disposal, such as the Bootstrap-ized XPages controls, icons, fonts, CSS, new controls, themes and jQuery! We'll show you why this new feature is one that you can't ignore.
2. Agenda
§ Part 1 – Existing Content
– Bootstrap Intro
– Bootstrap in XPages
– Responsive Application Layout
– Extra Resources
§ Part 2 – Back to the future
– New Controls
– Future Work
–
§§ Part 3 – Wrap Up
– Best Practices
– Conclusions
2
5. Introducing Frank
§ Frank's New Task:
– Revamp application
– Update the UI
– Add Mobile Capability
– Enhance homepage
Frank Adams
XPages Developer
5
6. Solution Identified
§ Bootstrap
– UI framework
– Open Source
– Responsive!
§ Features
– Flexible grid-based layout
– CSS & iconography resources
– Javascript resources: jQuery
§ Very popular, which means
– Updated regularly
– Lots of documentation/online support
– Free & paid addons: themes, templates
getbootstrap.com
6
7. Solution Identified - Bootstrap
§ Responsive Web Design
– Optimised UX on any device
– Readability, navigation, less scrolling/panning/zooming
§ Benefits
– Code once for all devices
– Time & Cost saving
– Increased reach of application
– Consistent experience
7
14. Extra Resources - Glyphicons
§ 200 icons
§ Font format
§ Utilised via CSS classes
§ Customisable
§ How to use them?
– Built into many XPages controls
– Add them yourself
§
–
14
15. Extra Resources - jQuery
§ jQuery v2.1.1 is in XPages ExtLib
– Javascript library required by Bootstrap
§ Add jQuery to XPage application
1. Use bootstrap themes: “Bootstrapv3.2.0” or “Bootstrapv3.2.0_flat”
2. Extend bootstrap theme
3.
4. Create new theme, add jQuery resource
5.
6.
7. Add resource to XPage
–
<theme extends="Bootstrap3.2.0" ... >
...
<resource><content-type>application/x-javascript</content-type>
<href>/.ibmxspres/.extlib/responsive/jquery/jquery-2.1.1/jquery-2.1.1.js</href>
</resource>
15
16. Extra Resources - jQuery
§ Using jQuery in an XPage – CSJS
1)
2. Add in a script block
–
3. Add in eventHandler
–
1. Add to onClientLoad
16
35. Engage Online
§ SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
§ Social Business Insights blog ibm.com/blogs/socialbusiness
– Read and engage with our bloggers
§ Follow us on Twitter
– @IBMConnect and @IBMSocialBiz
§ LinkedIn http://bit.ly/SBComm
– Participate in the IBM Social Business group on LinkedIn
§ Facebook https://www.facebook.com/IBMConnected
– Like IBM Social Business on Facebook