jQuery: The World's Most Popular JavaScript Library Comes to XPages - 6/19/13
Upcoming SlideShare
Loading in...5
×
 

jQuery: The World's Most Popular JavaScript Library Comes to XPages - 6/19/13

on

  • 2,898 views

Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this ...

Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.

Statistics

Views

Total Views
2,898
Views on SlideShare
2,898
Embed Views
0

Actions

Likes
0
Downloads
59
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery: The World's Most Popular JavaScript Library Comes to XPages - 6/19/13 jQuery: The World's Most Popular JavaScript Library Comes to XPages - 6/19/13 Presentation Transcript

  • jQuery comes to XPagesTweet about this event: #xpagesand mention us: @teamstudio @TLCCLTD @markyrodenJune 20, 2013
  • @teamstudioteamstudio.com@TLCCLTD@markyroden#xpagesBen GreenVice President - APAC
  • Who we are• Our background is in creating tools for collaborativecomputing in mid-size and large enterprises, primarily forLotus Notes• Easy-to-use tools for developers and administrators• 2300+ active customers, 47 countries• Offices in US, UK and Japan• Entered mobile space in 2010 with Unplugged – easymobilization of Notes apps to Blackberry, Android and iOS
  • Teamstudio Unplugged• Your Mobile Domino Server – take your Notesapps with you!• End users access Notes applications frommobile devices whether online or offline• Leverages existing skills and technology –XPages – Replication model you already know• IBM Collaboration Solutions Award Winner 2013
  • Teamstudio Continuity• Mobile BCM application for smartphones and tablets– iOS, Android and BB• Offline access to all your BCM andDisaster Recovery data• Store plans, contacts, call trees, and more• Client available for download from app stores
  • Teamstudio• 30% off all TS tools and 15% off all Ytria tools• Visit us at SoftBank World – July 23-24 in Tokyo• Next webinar – June 27th – Dojo Grids in XPages
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCCHoward GreenbergTLCC@TLCCLtdjQuery: The Worlds Most PopularJavaScript Library Comes to XPagesYour Host Today:1#XPages
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC 2Upcoming and Recorded WebinarsNext Webinar on June 27thDojo DataGrid and XPages with Brad Balassaitiswww.tlcc.com/xpages-webinarSame web page has a link to previous webinars
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC• Seven XPages Courses!‒ FREE !! Introduction to XPages Development‒ JavaScript for XPages Development (8.5 and 9)‒ Developing XPages Using Domino Designer 8.5 / XPages Development 1 for 9‒ Rapid XPages Development using Application Layout and Dojo UI Controls (8.5 and 9)‒ XPages Development 2 for Notes and Domino 8.5‒ Mobile XPages for Domino 8.5 and 9‒ Java 1 for XPages Developers• Self Paced Training– Learn anywhere!– An Instructor is a click away• Instructor Led (Private)• TLCC Mentoring Services3TLCC XPages OfferingsSpring Sale!!!!
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCCYour Presenter Today:5#XPagesDr. Marky Roden@MarkyRodenhttp://xomino.com
  • About Marky• Over 15 years IBM Notes Domino® work• Senior Consultant at PSC Group• XPages Developer• Project Leader• jQuery Specialist• Contact Information• Blog: http://www.xomino.com• Email: marky@xomino.com• Twitter: @markyroden• Skype: marky.rodenwww.psclistens.com @pscgroup2
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements3
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements4
  • What is jQuery anyway?• A JavaScript library which simplifies thecommonevery day web development tasks of DocumentModel manipulation, event handling, animationandAJAX/JSONCreated: June 2006 by John ResigRemoves browser dependenciesOpen Source (MIT License)5
  • What is jQuery anyway?• 66% of world’s top 10,000 websites use jQueryhttp://trends.builtwith.com/javascript (*Apr 2013)Used by Microsoft .Net v4 as part of the ASP.NETAJAX frameworkSome websites you probably know using jQueryAmazon GoogleTwitter DellWordpress Bank of AmericaStackoverflow DrupalBestBuy Wordpress6
  • What is jQuery anyway?• Core• Document Model (DOM) Manipulation• Simple Animations• UI• Pre-packages functional capabilities• Analogous to Dojo Widgets• Mobile• A unified, HTML5-based user interface system forallpopular mobile device platforms, built on therock-solidjQuery and jQuery UI foundation. 7
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements8
  • Whatabout Dojo? WhenshouldI use jQuery?• Dojo and jQuery have the same basic premise:• Browser compatibility / Code simplification• Many similar capabilities.• DOM manipulation• Widgets (Date pickers, sliders etc)• Many differences• Dojo intended for larger client applications• jQuery intended to make coding as easy aspossible 9
  • Where’s the balance?• Many factors determine the balance• Network connectivity• Functional requirements• Developmental experience with Dojo/jQuery• Project timeline• Maintainability of the application• jQuery v2.0 (future) will not support IE<9• “The entire jQuery core team instantly became giddy as they startedripping out oldIE support for jQuery 2.0.”17 Dec 2012 - Scott González (jQuery contributor) 10
  • Don’t use jQuery when….• There isn’t a justifiable reason to use it• jQuery is an additional download (~94k)• Version 1.8 does allow for exclusion of code which isnotnecessary• When not to use jQuery :• Simple DOM manipulation• To provide functionality which is already provided byDojoWidgets• To determine runtime events in the onLoad event• If you are using OneUI (*not for beginners)• Because you don’t want to learn Dojo 11
  • Use jQuery when……• Enhanced functionality not provided by Dojo• Specific jQuery or jQuery UI functionality• Specific Animation requirements• Broader browser compatibility• The business plan supports jQuery usage• The requirements are best suited to a jQuerysolution>>>>> The Plugin Community <<<< 12
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements13
  • How does jQuery work - API ReferencesAPI references ExamplesSelectors (“ELEMENT”) (“.class”) (“#idTag”)Attributes .attr() .html() .toggleClass()Traversing .children() .closest() .find()Manipulation .appendTo() .css() .val()CSS .height() .position() .width()Events .blur() .bind() .keypress()Effects .animate() .fadeIn() .slideToggle()Ajax .get() .getJSON() .serialize()Utilities .grep() .each() .inArray()Internals .error() .pushStack() .context()Example API reference methods and propertieshttp://api.jquery.com14
  • Select and conquer• 1) Select the DOM elements you wish to affect$(‘.myClass’)• 2) Concatenate the API reference to use$(‘.myClass’).css(‘display’, ‘none’)• 3) ExecuteSelect all elements with a class “myClass”Set the display style to none15
  • Chaining• All methods/properties return a jQuery object• Allows for chaining of *all* other API references$("p").find(":contains(t)").css(color,red)• Advantages• Object reuse: Lower memory consumption andfaster• Shorter more manageable code• Easier syntax for beginners• Easy plugin creationSelect All Paragraph nodesWithin each node find all wordscontaining the letter tColor those matches red16
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements17
  • Adding jQuery to the application• jQuery is a Client Side JavaScript library• Can be added to the application• Can be referenced externally to the database• jQuery plugins contain images and style sheets• A complete miniaturized application• More than just JavaScript Code• Could be complicated to maintain if all fileswere addedas resources 18
  • Adding jQuery to the database• Download the jQuery library• http://jquery.com• Save in a “js” folder on your computer19
  • Adding jQuery to the database• Don’t add it to the database as a file resource• Don’t add it to the database as a js library• Domino Designer in Eclipse (DDE) reads andprocesses resources• More time consuming (slows DDE)• Less maintainable20
  • Adding jQuery to the database• The WebContent folder• Acts like the root folder within your database• All files referenced to the .nsf/ in the URL• Much easier to maintain files in one place• Makes jQuery plugin management mucheasier21
  • Adding jQuery to the database• Drag and Drop the js folder into WebContent22
  • Adding jQuery to the application• Directly added to the XPage source panel<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>23
  • Adding jQuery to the application• Through a Theme<resource><content-type>application/x-javascript</content-type><href>js/jquery-1.8.3.min.js</href></resource>24
  • Adding jQuery to your XPages - Example• Modernizing a notes view25
  • Adding User interactivity• Add a basic viewPanel control to your XPageAn un-styled viewPanelFunctional but not aestheticallypleasing26
  • Adding User interactivity - demonstration• Using jQuery, user interactivity can be added toa viewPanel to make it more functional andimprove the user experience.http://bit.ly/MarkyIC13DemoThe following link has an example of the demonstration27
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements28
  • jQuery plugins• Extensions of the jQuery API code base• The plugin is called in the same was as a normalAPI reference• $(‘.myClass’).doSomething()• To achieve the desired functionality additional resourcesare often necessary• CSS• Images• Other JavaScript files29
  • jQuery plugins• Additional JavaScript Libraries• May also include• Images• CSS• Added to your XPage databasethrough WebContent folder asbefore30
  • jQuery plugins - example• Joyride.js – Website feature tour• Requirement:• Provide a visual cue for website usersto the new features available• Make it simple to use• Make it one time only31
  • jQuery plugins - example• Joyride – Website feature tour32By clicking a buttonusers are guided aroundthe new website
  • jQuery plugins - example• Joyride – Website feature tour33All the properties available with the Joyride plugin
  • jQuery plugins• For more information on how to add a jQueryplugin to your database:• Notes in 9 Episode 74• Getting started with jQuery Plugins in XPageshttp://bit.ly/Nin9Ep74
  • Agenda• What is jQuery?• What about Dojo? When should I use jQuery?• How does jQuery work?• How do I add jQuery to my XPages?• What are jQuery plugins?• How can jQuery plugins solve my requirements
  • Functionality in a box• Yesterday your boss could have said:• “I need a slideshow adding to the website by tomorrow, needsto allow users to see thumbnails and cycle through themquickly…..”• You would have panicked• You could have remembered Google is your friend..and found a great reference on jQuery slideshows• http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/• You would then have responded: “Which one sir?” 
  • Functionality in a box• Over 3000 jQuery plugins created and registeredCharting Modal WindowForm Validation MobileResponsive Layouts Web TypographySliders AnimationGalleries TablesCarousels Form Select and ComboTime and Date PickersAnd almost all of them are FREE
  • Demonstrations• Demonstrations of jQuery plugins in XPages canbe found at:http://www.xomino.com/IBMConnect13Demohttp://demo.xomino.com
  • • Questions and Answershttp://www.xomino.comhttp://demo.xomino.comtwitter: @MarkyRoden
  • Resources• www.jquery.comDownload the latest versionReview the documentationLook through the Tutorialswww.jqueryui.comFantastic working examples/codeThemebuilderwww.jquerymobile.comDocumentationExample codeExample builderwww.stackoverflow.com (*April 2013)~305,000 questions/answers tagged jQuery !(~4,750 questions tagged Dojo)(~1250 questions tagged XPages)
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCCQuestions????7Use the Q&A pane inWebEx to ask questionsWe will answer yourquestions verbally
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCCQuestions????6Use the Q&A pane inWebEx to ask questionsWe will answer yourquestions verbally
  • © 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCCQuestion and Answer Time!7Teamstudio Questions?contactus@teamstudio.com877-228-6178TLCC Questions?howardg@tlcc.com paul@tlcc.com888-241-8522 or 561-953-0095Mark RodenHoward Greenberg Ben GreenUpcoming Events:TLCC Spring SaleICON UK in Brighton•TLCC TackItOn the day after30% off all Teamstudio tools and 15% off all Ytria toolsNext webinar June 27thSoftBank World 2013 July 23-24 in Japan#XPages@markyroden@TLCCLtd@Teamstudio