Engaging users with highly usable enterprise applications that match their changing expectations is like chasing a "moving target" for application developers. To give your users the "wow" experience, join GBS Expert and Domino Guru Chris Toohey for an informative and useful 60 minute session on "Using JS and CSS frameworks in XPages applications", followed by Q & A, where you will learn how to: - Create theme-friendly XPages apps that leverage new User Interface frameworks such as, Twitter Bootstrap, Dojo, and more - Deliver continuously self-adapting solutions to address evolving user demands - ...and create future-proof XPages applications!

1. www.gbs.com
Webinar
Using JavaScript and CSS Frameworks
in IBM XPages Applications

2. www.gbs.com
GBS - An Overview

3. www.gbs.com
Quick Facts
 Over 5,000 customers in 90 countries and 150 partners in 45 countries
 Offices in 12 locations in North America, Europe and Asia
 Offshore Delivery Center in Chennai, India

4. www.gbs.com
Customer Snapshot

5. www.gbs.com
Over 50 IBM Awards

6. www.gbs.com
2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Growth via Key Acquisitions

7. www.gbs.com
Key Offerings
Environment Analysis
Mobility Optimization & Consolidation
Domino Administration Email Management,
Security & Productivity
Application Modernization

8. www.gbs.com
Webinar
Using JavaScript and CSS Frameworks
in IBM XPages Applications
Chris Toohey
GBS Modernization and Mobilization

9. www.gbs.com
What we’ll cover…
 What are JavaScript & CSS Frameworks?
 Creating “layout” Custom Controls
 Using Themes in XPages development
 Demo: UI Frameworks
 Development “Deep Dive”
 Progressive Enhancement via User Agents
 Wrap-up & Open Q&A

10. www.gbs.com
What are JavaScript & CSS Frameworks?
 User Interface and User Experience Design
 Quickly leverage “common” design tactics
 Popular UI Frameworks
 Dojo
 Core XPages JavaScript & CSS Libraries
 jQuery
 Twitter Bootstrap
 Zepto
 Foundation

11. www.gbs.com
Creating “layout” Custom Controls
 Key points to successful “layout” Control creation:
 Dojo is an “option”
 Dojo Libraries can be customized, extended, or even disabled!
 “layout” Controls should be designed for general use
 There are a finite number of application layouts
 Get familiar with “Editable Areas” / xp:callback Controls
 Inspiration
 Social Networking Sites
 Device / Hardware User Interfaces &
Experiences
 In-house technology investments
 IBM Connections
 Microsoft Sharepoint
 Vendor Services & Solutions
 Custom in-house Applications

12. www.gbs.com
Creating “layout” Custom Controls
 Why should I?
 Code Maintenance
 Future-proofing your development projects
 UI / UX Design Trends
 Evolving Platform Capabilities
 Common Custom Control – “touching” all Design Elements

13. www.gbs.com
Demo: UI Frameworks
Demonstration

14. www.gbs.com
Development “Deep Dive”

15. www.gbs.com
What is Adaptive User Interface Design?
 Typically “hardware” based…
 Leveraging the capabilities of the target platform.
 “Graceful Degradation”

16. www.gbs.com
Progressive Enhancement via User Agent
 Evaluation of User Agent
function setTheme() {
var f = "/"+@RightBack(context.getUrl().getAddress(),"/");
var appTheme = context.getProperty('xsp.theme');
var currentTheme = context.getSessionProperty('xsp.theme');
if(!currentTheme) {
currentTheme = appTheme;
if(utilities.isMobile()) {
currentTheme = 'bootstrap';
};
context.setSessionProperty('xsp.theme', currentTheme);
context.redirectToPage(f);
}
}
 “layout” Custom Control
<xp:this.beforePageLoad>
<![CDATA[#{javascript:setTheme();}]]>
</xp:this.beforePageLoad>

17. www.gbs.com
Q & A

18. www.gbs.com
Contact Us
experts@gbs.com
https://www.facebook.com/joingbs
@GBSKnows
http://www.youtube.com/user/GBSKnows
Chris.Toohey@gbs.com
https://www.facebook.com/christoohey
@christoohey
Chris Toohey