Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Connect 2013

BP205 Custom Controls:
Powerful, But Not Rocket Science
Martin Meijer | Developer

© 2013 IBM Corporation

Legal disclaimer
© IBM Corporation 2013. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication,
it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice.
IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have
the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced
in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any
way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other
results.
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary
depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed.
Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance
characteristics may vary by customer.
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.
Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.
UNIX is a registered trademark of The Open Group in the United States and other countries.
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others.
All references to [insert fictitious company name] refer to a fictitious company and are used for illustration purposes only.

2 © 2013 IBM Corporation

About me
 Martin Meijer
 Developer for Saxion (University in the Netherlands)
 Developer for Yellow 2010
 Speaker (NLLUG, DNUG, Lotusphere Idol 2010)
 Big Fan of XPages
 Big Fan of OpenNTF



Agenda

 XPages and Custom Controls
 Example 1: YouTube
 Example 2: Google Maps
 Example 3: Bootstrap
 OpenNTF
 Q&A
─


What are Custom Controls?

 Reusable piece of functionality
 Like a subform in Classic Domino, but better!
 Can contain the same elements as an XPage
 Powerful because of the custom properties


─


Design Patterns

 Use an XPage as a Container for your custom Controls
 Use a Custom Control as a container for a piece of
functionality (Tagcloud, Search Control etc. etc)
 Use a Custom Control for your GUI (think of a Layout
Custom Control with Editable Area's for nesting Custom
Controls)


─


Custom Properties


Example 2: Google Maps



 Start with the documentation!
 Copy & Past example, make it work.
 Look for elements you can make variable, they will become custom properties.
─


https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld


Step 1: We declare the application as HTML5 using the <!DOCTYPE html> declaration


Step 2: We include the Maps API JavaScript using a script tag.



key=YOUR_API_KEY

Conclusion:
for this simple example we don't need this



sensor=SET_TOTRUE_OR_FALSE

Conclusion:

It is used to determine the user's location/
It is a required value, in this example we will use
sensor=false


Step 3: We create a div element named "map_canvas" to hold the Map.


Step 4: We create a JavaScript object literal to hold a number of map properties.
Step 5: We write a JavaScript function to create a "map" object.


Step 4: We create a JavaScript object literal to hold a number of map properties.
Step 5: We write a JavaScript function to create a "map" object.

Step 6: We initialize the map object from the body tag's onload event.


So far ...


What not to forget
Style: See Hello World example ...


What not to forget


What not to forget
Meta tag: See Hello World example ...


What not to forget

Conclusion:

In this example we don't use it


We are ready, let's try!


Now we can make use of Custom Properties to make things Configurable!



var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP



Use #(javascript:compositeData.yourproperty) to replace the 'old' value in your
source code



This is what you can configure with
the Custom Properties when you use
the custom control on your XPage


 This was only a small piece of the Google Maps API
 The Google Maps API is big!
 You can download my version (not the complete API implemented) on OpenNTF
 http://www.openntf.org/internal/home.nsf/project.xsp?
action=openDocument&name=Google%20Maps%20Custom%20Control
─


Example 3: Bootstrap



 Start with the documentation!
 Copy & Past example, make it work.
 Look for elements you can make variable, they will become custom properties.
─



http://twitter.github.com/bootstrap/index.html



 Unzip the downloaded bootstrap file
 Drag & Drop the files (css, img and js) to your WebContent directory in the
Package Explorer
─


Example 3: Bootstrap 7-10


Example 3: Bootstrap Create the new Custom Control


Example 3: Bootstrap <head> – Source code from Bootstrap starter template


Example 3: Bootstrap You can add the header info in your Custom Control


Example 3: Bootstrap <body> – Source code from Bootstrap starter template


Example 3: Bootstrap You can add the body info in your Custom Control


Example 3: Bootstrap The result ...


Example 3: Bootstrap make the brand configurable ...


Example 3: Bootstrap make the menu configurable ...


Example 3: Bootstrap make the content configurable ...


OpenNTF


OpenNTF Import and Export for Designer


Q&A


Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Connect 2013

More Related Content

Similar to Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Connect 2013

Recently uploaded

Presentation BP205 "Custom Controls: Powerful, But Not Rocket Science!" Connect 2013