This document discusses using jQuery with XPages. It begins with an introduction to jQuery, explaining that it is a popular JavaScript library that simplifies document manipulation, events, animation, and AJAX. It then compares jQuery to Dojo and provides guidance on when each should be used. The document demonstrates how jQuery works via its API and methods. It also explains how to add jQuery to an XPages application either directly in code or via a theme. Finally, it discusses jQuery plugins and how they can provide ready-made functionality to solve requirements.
jQuery Conference Boston 2011 CouchAppsBradley Holt
CouchApps are web applications built using CouchDB, JavaScript, and HTML5. CouchDB is a document-oriented database that stores JSON documents, has a RESTful HTTP API, and is queried using MapReduce views. This talk will answer your fundamental questions about CouchDB and will cover the basics of building CouchApps using jQuery and various jQuery plugins.
This document discusses extending SharePoint 2010 with HTML 5 features. It provides a brief history of HTML and CSS standards. It then covers leveraging new HTML5 features in SharePoint 2010 like responsive design, adding support for newer browsers like IE9, and providing fallback support for older browsers like IE8 and IE7 through techniques like polyfills and Modernizr. The document demonstrates these concepts through examples and references additional resources for learning HTML5.
2012 - HTML5, CSS3 and jQuery with SharePoint 2010Chris O'Connor
This document provides an overview of HTML5, CSS3, jQuery, and REST and how they can be used with SharePoint 2010. It discusses the new elements, functions, and APIs in HTML5 and CSS3 and how they allow for richer user experiences. jQuery is presented as a way to select and manipulate page elements as well as call REST web services. REST services through ListData.svc and returning JSON data are demonstrated. jQuery templates are shown as a way to display data collections. The future of SharePoint development moving more to client-side technologies like these is also discussed.
A panel of XPages experts - Mike McGarel, David Leedy, and Nathan Freeman - each give a short presentation, then answer XPages questions from attendees. For the recording, please visit: https://youtu.be/jBaRSM9Ng_o
Develop a vanilla.js spa you and your customers will loveChris Love
Do you want to leverage HTML, CSS and JavaScripts APIs to deliver rich user experiences that outlive the framework du jour? Do You want to understand good front-end application architecture and performance principles. Then you want to build applications in Vanilla JS. Despite popular belief Vanilla JS is not as difficult to master and implement as you might think.
In this tutorial Chris Love will demonstrate how to apply many common web performance optimization, good architecture and tricks to build a fast, native-like application user experience customers desire without dependency on large, fast food frameworks.
This tutorial will demonstrate the following concepts:
- Applying the 14kb Rule for Instant Loading
- Markup Management
- Eliminating Excess AJAX Calls
- Working With and Around Application Cache
- Applying Service Workers and HTTP/2 For Even Better User Experiences
- Leveraging common browser APIs & good architecture
JavaScript front end performance optimizationsChris Love
No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them.
This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.
Angular or Backbone, which one you will use in your mobile app? How could you develop a mobile app across iOS, Android or windows devices? This talk will take an intimate look at two of today’s most popular frameworks, Angular and Backbone and explore their differences. We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, we will demonstrate a “To Do” app using Angular and Backbone, with access to native device capabilities. We’ll compare the frameworks when transported to the world of mobile app development. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.
HTML5 and CSS3: does now really mean now?Chris Mills
Code at http://people.opera.com/cmills/css3book/css3-html5-dnrmn.zip. The browser vendors love them! The browser fans and cutting edge designers are producing some really remarkable stuff, but what do HTML5 and CSS3 really mean for you, the pragmatic designer on the street? If you sidle up to one of those guys and whisper "but what about IE6 support", they are likely to slap you in the face, or run away with their hands clamped over their ears, yelling "la lala lala, I can't hear you." In this talk, Chris Mills will have a look at some of the new features of HTML5 and CSS3 - new semantics, video, media queries, rounded corners, web fonts, drop shadows and more. He will show real world examples, and then look at how they actually perform on those shady older browsers we are often called on to support. He will then look at strategies for providing support for those older browsers, including using JavaScript, fallbacks, and progressive enhancement.
What's this jQuery? Where it came from, and how it will drive innovationMarakana Inc.
In this talk jQuery Project Team member, Johnathan Sharp, sets out to answer four main questions: Where'd jQuery Come from?, Why is it so popular? How has it changed development? How will it drive innovation?
**see the video at http://marakana.com/f/211 **
In the scope of his talk Johnathan also touches on:
- What jQuery is not
- Core concepts to understand before jumping into jQuery (CSS & Selectors, DOM, Events, JavaScript patterns, etc)
- jQuery core, and jQuery project plugins
- The larger jQuery Project including the jQuery core, jQuery UI, and jQuery mobile
- jQuery going forward (HTML5, mobile browser support, official Plugins, growing corporate support services)
Finally, Johnathan will dig deep into a few code demos to illustrate some of the core concepts of jQuery, like events, JavaScript patterns, and making Ajax requests.
Overview of the new frontend architecture used for the New Profile at LinkedIn.
Blog version of this slidedeck: https://engineering.linkedin.com/profile/engineering-new-linkedin-profile
BP101: A Modernized Workflow w/ Domino/XPagesedm00se
Extending on some of the themes of front-end heavy application development, this session covered the higher order themes of development workflow automation, revolving around the concepts of modern web app development from a full stack perspective.
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.
In this presentation we'll take a look at building a full stack web application using Polymer and Web Components. After a quick introduction to Polymer, we’ll see how we can handle things like authentication, pagination of large data sets, and adapting our UI to different viewports. We’ll also review what’s needed for moving our app to production and optimizing our User Experience with quick load times and transition animations.
Webservices: connecting Joomla! with other programs.Herman Peeren
This document discusses connecting Joomla! to other applications and services via web services. It describes different types of web services including XML-RPC, SOAP, and REST. XML-RPC and SOAP use remote procedure calls to call methods on a server, while REST uses HTTP methods to manipulate resources. The document provides examples of using these services with Joomla! and other applications and frameworks. It emphasizes the importance of standardizing web service connections in Joomla! using its MVC framework.
Vector graphics allow shapes to be mathematically represented and scaled smoothly, while raster graphics use a grid of pixels. SVG is an XML format for describing vector shapes and is supported natively by modern browsers. DojoX GFX provides a normalized API for creating vector graphics across browsers using SVG, VML, Canvas, or Silverlight depending on browser support. It implements a procedural subset of SVG for creating shapes and text programmatically similar to the canvas API.
Building intranet applications with ASP.NET AJAX and jQueryAlek Davis
This document provides an overview of building intranet applications using ASP.NET AJAX and jQuery. It discusses the technologies used, including ASP.NET AJAX, jQuery, and Rich Internet Applications. It covers development topics such as common patterns, tools, and debugging. The document also provides references and resources for further learning about ASP.NET AJAX, jQuery, and their integration.
Building an E-commerce website in MEAN stackdivyapisces
This document provides an overview of building an eCommerce site using the MEAN stack. It begins with an introduction to JavaScript and then discusses the key components of the MEAN stack including Node.js, AngularJS, and MongoDB. It provides details on each component, their history, features, and how they work together. It emphasizes how MongoDB is well-suited for eCommerce applications due to its flexible schema and ability to store different product types within the same collection.
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In the session, you’ll learn the best practices and strategy to develop cross-browser web sites that will work with the existing and future browsers. Tools for interoperability tests, cross-browser fundamentals, and tips and tricks on HTML5, CSS, JavaScript development will be illustrated. Feature detection, CSS prefix, and fallbacks will all be examined in the session. A real life example will be used to demonstrate step by step how to build cross-browser and plug-in-Free experiences. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future. Expect a lot of demos and code in the session.
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
Abstract
In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer.
Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example.
You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.
WebSockets allow for bi-directional communication between a client and server that reduces overhead compared to traditional HTTP requests. This enables real-time updates and instant notifications. Common use cases include chat applications, data feeds that change frequently, and workflow notifications. While browser support is now widespread, adoption has been slowed by compatibility with older browsers, SEO concerns, and firewall configurations that expect HTTP. The Socket.io library makes it easy to use WebSockets with Node.js. Demonstrations show WebSockets enabling a hot potato game, updating app data in real-time, and powering a chat room.
This document discusses using Angular.js with XPages applications. It begins with an introduction to Angular.js and how it can integrate with XPages. A demonstration is then shown of a basic people application built with Angular.js that can run independently on Domino, within another application, and on different Domino servers. The document concludes by discussing how Angular.js allows writing applications once that can run anywhere, and more demonstrations are proposed of data binding and running XPages applications inside other platforms like Bluemix, Connections, and SharePoint.
The fork in the road - the Application Modernization Roadmap for Notes/Domin...John Head
For the past five years, PSC has presented at conferences all over the world sharing our vision of how applying a modernization methodology to Notes & Domino can lead to major improvements in user adoption and accessibility. The impact is felt by the user, the developer, and the ROI of the application. During this time, we have been successfully applying the same proven processes to other technologies outside of the ICS realm. It is now time to bring those worlds together. There are a lot of questions in the community about what to do with our applications given the change in Notes/Domino application development roadmap. This session will give you the PSC perspective on your options. It will include our vision for IBM XPages, including IBM Bluemix and will highlight our integration work with IBM Digital Experience. We will showcase our work with other technologies, including Microsoft (Office365, Azure, Addins, and more), Nintex, OutSystems, QuickBase, to name a few. This session is for Notes/Domino/XPages customers who want robust options to modernize their existing applications. We will show you other platforms as well as announce an exciting partnership that will allow IBM XPages apps to have life on other platforms as well. Come and see real world demos of how our strategy is working for our existing customers and will work for you. We can help you navigate the road ahead.
Introduction to using IBM XPages Mobile Controls.
Video versions of the presentation can (soon) be viewed on David Leedy's Notes in 9 (notesin9.com). Red Pill development (www.redpilldevelopment.com) also offers the presentation as an on-site (4hr) workshop.
This document provides an agenda for a masterclass on XPages scalability presented by Tony McGuckin and Martin Donnelly of IBM. The agenda includes understanding the "XPages machine", developing for performance, and architecting for scalability. It cautions that the session materials are based on an upcoming book and suggests further reading. The document also provides several disclaimers regarding statements about potential future products.
The fourth webinar in this mobile development series guides you through jQuery Mobile.
In Part 4, learn:
-jQuery Mobile
-Performance considerations
-Handling offline requirements
-Pros and cons vs. alternatives
Dieser Vortrag erklärt, was der PHP_CodeSniffer ist, was er kann, wozu er gut ist, wie man einen eigenen Standard mit eigenen Regeln erstellt und warum man Ihn nutzen sollte.
Er wurde am 22. September 2010 bei der PHP Usergroup Düsseldorf, Duisburg, Krefeld gehalten.
Show110 | Using the XPages Extension Library for the Real Worldpdhannan
This is a Show n' Tell session from Lotusphere 2012 on how the XPages Extension Library is used in the production ready TeamRoom XL and Discussion XL templates.
App.Next - The Future of Domino Application DevelopmentTeamstudio
The document discusses future developments for application development using IBM Domino and XPages. Key areas discussed include responsive design for XPages applications, integrating relational database data sources into XPages, adding encryption and signature support to XPages, open sourcing the XPages Extension Library on GitHub, and deploying Domino applications on the IBM Bluemix platform. Developing applications using these new capabilities will allow Domino developers to build modern, mobile-responsive applications that integrate various data sources and provide security, while deploying to the cloud on Bluemix.
Domino, Notes, and Verse - Where are We and Whats the Future?Teamstudio
Hear from IBM's product team and learn where Notes, Domino, and Verse are headed in this webinar for administrators, application developers, and managers. The product team from IBM cover the following topics:
-Domino and Notes Directions with Scott Vrusho
-Domino Security with Dave Kern and Kevin Lynch
-IBM Verse with Scott Souder
The skeleton has four main functions: providing shape, enabling movement, protecting organs, and producing blood cells. It gives the body its shape and allows for movement through joints and muscle attachment. The skeleton protects vital organs like the heart, lungs, and brain. Bone marrow inside bones produces red and white blood cells. There are over 200 bones in the adult body that can be categorized as flat, irregular, or long bones depending on their shape.
jQuery is a lightweight JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions easier. It takes common tasks that require many lines of JavaScript code and wraps them into methods that can be called with a single line of code. Originally created in 2006, jQuery simplifies HTML document navigation and manipulation, as well as event handling, CSS animation, and Ajax interactions for rapid web development. It has a simple syntax of $() selector and action() methods and is now one of the most popular JavaScript libraries.
jQuery is a lightweight JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions easier. It takes common tasks that require many lines of JavaScript code and wraps them into methods that can be called with a single line of code. Originally created in 2006, jQuery simplifies HTML document navigation and manipulation, as well as event handling, CSS animation, and Ajax interactions for rapid web development. It has a simple syntax of $() selector and action() to select and perform actions on HTML elements.
Next week, students will be required to hand in wireframes for their final projects. Wireframes can be created using tools like Balsamiq Mockups, Sketch, or pen and paper. Previous student projects from the FEWD program around the world can be found at a provided URL.
jQuery is a lightweight JavaScript library that simplifies HTML document traversal, event handling, animations, and Ajax interactions. It works across browsers and reduces the need for verbose JavaScript code. jQuery selects elements, handles events, performs animations and effects, and loads remote data via Ajax. It is widely used on major sites and its plug-in architecture allows developers to extend its functionality.
jQuery is a lightweight JavaScript library that simplifies HTML document traversal, event handling, animations, and Ajax interactions. It works across browsers and has a simple API that reduces code needed for common tasks. jQuery is used on over 65% of top websites and popular companies like Google use it. It allows selecting elements, modifying CSS styles and content, handling events, and developing Ajax applications through plugins.
- jQuery is a JavaScript library that simplifies JavaScript programming and makes it easier to use JavaScript on websites.
- To add jQuery, include the jQuery script in the <head> section of an HTML page by linking to the jQuery CDN or downloading the jQuery file.
- jQuery syntax uses the $ sign followed by a selector and an action. For example, $("p").hide() hides all <p> elements.
- Common jQuery methods include hide(), show(), fadeIn(), fadeOut(), and slideUp() to manipulate HTML elements with simple function calls.
This document provides an introduction to jQuery, covering its features, comparisons to other frameworks, selectors, and plugins. jQuery is an open-source JavaScript library that simplifies DOM manipulation, event handling, animations, and Ajax interactions. It uses CSS-style selectors to select and manipulate HTML elements. Some key features include DOM element selections, DOM traversal/modification, DOM manipulation based on CSS selectors, events, effects/animations, Ajax, and extensibility through plugins. The document also discusses jQuery versus other frameworks like Dojo and YUI, demonstrates basic selectors and methods, and encourages the use of plugins to add additional functionality.
Top 45 jQuery Interview Questions and Answers | EdurekaEdureka!
YouTube Link: https://youtu.be/nmX4ycVIXt8
** Full Stack Web Developer Masters Program: https://www.edureka.co/masters-program/full-stack-developer-training **
This Edureka PPT on "jQuery Interview Questions" will help you to prepare yourself for jQuery or web development interviews. Learn about the most important jQuery interview questions and answers and know what will set you apart in the interview process.
Follow us to never miss an update in the future.
YouTube: https://www.youtube.com/user/edurekaIN
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
Castbox: https://castbox.fm/networks/505?country=in
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)Doris Chen
Get frustrated by cross-browser incompatibility? Hate to develop application using JavaScript? jQuery is a powerful JavaScript library that can enhance your websites regardless of your background. jQuery is fast, lean, simple and hugely expandable, enabling you to build compelling web applications quickly and easily. In this session, we will start with a quick introduction of jQuery, illustrate what’s so good about jQuery, and demonstrate step by step how to develop jQuery Ajax application efficiently with database, web services, OData, NetFlix and ASP.NET MVC. Microsoft is now shipping, supporting, and contributing to jQuery, with ASP.NET and Visual Studio. New features which will be available in the next release of jQuery such as globalization, templating and data-linking will be introduced in the session as well.
This document provides an introduction to jQuery, including:
- A brief overview of what jQuery is and its key facts
- Details on learning jQuery through websites, tutorials, and books
- Explanations of jQuery syntax, selectors, animations, common operations, and events
- Descriptions of related tools like jQuery UI, plugins, and browser developer tools
This document introduces jQuery, including its environment, implementation, and use with jQuery UI. jQuery is a JavaScript library that simplifies client-side scripting by providing methods for selecting elements, handling events, performing animations and AJAX requests, and manipulating the DOM. The document provides examples of using jQuery for these tasks and binding jQuery UI widgets like tabs.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
The document discusses different approaches to using JavaScript libraries, including plug-and-play widgets, libraries that require some coding, and writing raw JavaScript from scratch. It then examines popular open-source JavaScript libraries like Prototype, jQuery, Yahoo UI, and Dojo, comparing their features, functionality, and widgets. The ideal library should have a robust core feature set along with user interface widgets, active development and support, and good documentation.
Introduction to using jQuery with SharePointRene Modery
This document provides an introduction to using jQuery with SharePoint. It discusses what jQuery is, some basic jQuery concepts like selection and modification, and how jQuery can be used to enhance SharePoint through demos of content modification, slideshows, column visibility toggling, and calling SharePoint web services. Requirements, development tools, and resources for learning more about jQuery with SharePoint are also outlined.
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
This document summarizes a presentation on jQuery from the ground up. It introduces jQuery as a JavaScript library for document traversal, event handling, animations and AJAX. It discusses how to get jQuery, set it up, use basic selectors and the ready method. It also provides an overview of jQuery UI and plugins, and invites questions.
This document provides an overview of jQuery, a popular JavaScript library. It discusses what jQuery is, why it's useful, and some basic ways to use it. Specifically, jQuery is a lightweight JavaScript library that simplifies tasks like DOM manipulation, event handling, Ajax interactions and animation. It supports cross-browser compatibility and has a simple, CSS-like syntax. The document provides examples of how jQuery can be used to select elements, add/remove classes, handle events, and create basic animations.
Similar to jQuery - the world's most popular java script library comes to XPages (20)
2. 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: mroden@psclistens.com
www.psclistens.com @pscgroup
– Twitter: @markyroden
– Skype: marky.roden
3. 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
4. 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
5. What is jQuery anyway?
A JavaScript library which simplifies the common
every day web development tasks of Document
Model manipulation, event handling, animation and
AJAX/JSON
Created: June 2006 by John Resig
Removes browser dependencies
Open Source (MIT License)
6. What is jQuery anyway?
60% of world‟s top 10,000 websites use jQuery
http://trends.builtwith.com/javascript (*Dec 2012)
Used by Microsoft .Net v4 as part of the ASP.NET AJAX
framework
Some websites you probably know using jQuery
Amazon Google
Twitter Dell
Wordpress Bank of America
Stackoverflow Drupal
BestBuy Wordpress
7. 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 for all
popular mobile device platforms, built on the rock-solid
jQuery and jQuery UI foundation.
8. 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
9. What about Dojo? When should I 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 as possible
10. 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 started
ripping out oldIE support for jQuery 2.0.”
17 Dec 2012 - Scott González (jQuery contributor)
11. 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 is not
necessary
When not to use jQuery :
– Simple DOM manipulation
– To provide functionality which is already provided by Dojo
Widgets
– To determine runtime events in the onLoad event
– If you are using OneUI (*not for beginners)
– Because you don‟t want to learn Dojo
12. 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 jQuery
solution
>>>>> The Plugin Community <<<<
13. 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
14. How does jQuery work - API References
API references Examples
Selectors (“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 properties
http://api.jquery.com
15. Select and conquer
1) Select the DOM elements you wish to affect
$(„.myClass‟) Select all elements with a class “myClass”
2) Concatenate the API reference to use
$(„.myClass‟).css(„display‟, „none‟) Set the display style to none
3) Execute
16. Chaining
All methods/properties return a jQuery object
– Allows for chaining of *all* other API references
$("p") Select All Paragraph nodes
Within each node find all words containing
.find(":contains('t')") the letter t
.css('color','red') Color those matches red
Advantages
– Object reuse: Lower memory consumption and faster
– Shorter more manageable code
– Easier syntax for beginners
– Easy plugin creation
17. 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
18. 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 files were added
as resources
19. Adding jQuery to the database
Download the jQuery library
– http://jquery.com
– Save in a “js” folder on your computer
20. 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 and
processes resources
– More time consuming (slows DDE)
Less maintainable
21. 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 much easier
22. Adding jQuery to the database
Drag and Drop the js folder into WebContent
23. 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>
24. 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>
25. Adding jQuery to your XPages - Example
Modernizing a notes view
26. Adding User interactivity
Add a basic viewPanel control to your XPage
An un-styled viewPanel
Functional but not aesthetically
pleasing
27. Adding User interactivity - demonstration
Using jQuery, user interactivity can be added to a viewPanel
to make it more functional and improve the user experience.
The following link has an example of the demonstration
http://bit.ly/MarkyIC13Demo
28. 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
29. jQuery plugins
Extensions of the jQuery API code base
The plugin is called in the same was as a normal
API reference
$(„.myClass‟).doSomething()
To achieve the desired functionality additional resources
are often necessary
– CSS
– Images
– Other JavaScript files
30. jQuery plugins
Additional JavaScript Libraries
– May also include
• Images
• CSS
– Added to your XPage database
through WebContent folder as
before
31. jQuery plugins - example
Joyride.js – Website feature tour
– Requirement:
• Provide a visual cue for website users
to the new features available
• Make it simple to use
• Make it one time only
31
32. jQuery plugins - example
Joyride – Website feature tour
By clicking a button
users are guided
around the new
website
32
33. jQuery plugins - example
Joyride – Website feature tour
All the properties available with the Joyride plugin
33
34. jQuery plugins
For more information on how to add a jQuery
plugin to your database:
Notes in 9 Episode 74
– Getting started with jQuery Plugins in XPages
http://bit.ly/Nin9Ep74
35. 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
36. Functionality in a box
Yesterday your boss could have said:
–“I need a slideshow adding to the website by tomorrow, needs
to allow users to see thumbnails and cycle through them
quickly…..”
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?”
37. Functionality in a box
Over 3000 jQuery plugins created and registered
Charting Modal Window
Form Validation Mobile
Responsive Layouts Web Typography
Sliders Animation
Galleries Tables
Carousels Form Select and Combo
Time and Date Pickers
And almost all of them are FREE
38. Demonstrations
Demonstrations of jQuery plugins in XPages can
be found at:
http://www.xomino.com/IBMConnect13Demo
http://demo.xomino.com
39. Questions and Answers
http://www.xomino.com
http://demo.xomino.com
twitter: @MarkyRoden
Please don‟t forget to do your evaluations