Embed Size (px)
DESCRIPTION
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!
Citation preview
www.gbs.com
Webinar
Using JavaScript and CSS Frameworks in IBM XPages Applications
www.gbs.com
GBS - An Overview
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
www.gbs.com
Customer Snapshot
www.gbs.com
Over 50 IBM Awards
www.gbs.com
2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Growth via Key Acquisitions
www.gbs.com
Key Offerings
Environment Analysis
Mobility Optimization & Consolidation
Domino Administration Email Management,Security & Productivity
Application Modernization
www.gbs.com
Webinar
Using JavaScript and CSS Frameworks in IBM XPages Applications
Chris TooheyGBS Modernization and Mobilization
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
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
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
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
www.gbs.com
Demo: UI Frameworks
Demonstration
www.gbs.com
Development “Deep Dive”
www.gbs.com
What is Adaptive User Interface Design?
Typically “hardware” based… Leveraging the capabilities of the target platform. “Graceful Degradation”
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>
www.gbs.com
Q & A
www.gbs.com
Contact Us
https://www.facebook.com/joingbs
@GBSKnows
http://www.youtube.com/user/GBSKnows
https://www.facebook.com/christoohey
@christoohey
Chris Toohey
