My Presentation from AUSLUG 2016 in which I demonstrate the different parts of a UI Control and where you can find them in the XPages extension library source code
Anatomy of a UI Control - Extension Library Case Study
1. Anatomy of an XPages UI
Control
Cameron Gregor | Systems Developer
Jord International
www.jord.com.au
Blog: camerongregor.com
Twitter: @gregorbyte
2. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
3. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Goals of this Session
• Spark some curiosity in Control Development + ExtLib
• Provide a ‘Signpost’ for navigating Extension Library Code
• Demonstrate how to develop / debug / deploy controls
4. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Understanding
• Recognising
common patterns
• Gain Familiarity
• Diagnose own
Problems
Modifying
• Bug fixes
• New Behaviour to
Existing
• Finishing Incomplete
features
Creating
• New Controls
• New Services
• New Utilities
• New Themes
5. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Agenda
● Identify the ‘Elements’ of a UI Control from the Extension Library
● Getting set up to explore the Source Code of Extension Library
● Techniques on Exploring Source Code within Eclipse
● Demonstrate how we locate the Source Code of our ‘Elements’
● Some Examples of Extending / Modifying / Creating UI Controls
6. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Terminology I might used Interchangeably
Component = Control = UI Control = UI Component
Plugin = Project
Control != Custom Control
7. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Anatomy – Identifying the Moving Parts
• Design Time
– Palette Entry
– Mark-up Tag Details
– Visualisation
– Component Metadata
• Class Name
• Properties
– Property Panels
– Drop Action
• Runtime
– Component Behaviour
– Renderers
• Default Renderer
• Renderers for Other themes
– One UI 2
– One UI 3
– bootstrap
8. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Design Time Properties
• MOSTLY specified in xsp-config
• SOME can be specified through Extension Points
9. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Palette Entry
• Should Show in Palette?
• Category
• Description
• Icon
10. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Markup Tag Details
11. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Visualisation
• What should it look like in Design Tab?
12. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Properties
• What Properties can be set?
• How can they be set?
– “” – Literal?
– “${}” – Page Load?
– “#{}” – Compute Dynamically?
– Is it a list of things?
• Drop down Nodes
– What Type?
13. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Property Panels
• Make a big difference in usability
• If well designed, reduce
the need for Documentation
14. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Drop Action
15. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Behaviour
• How does it operate?
• Any special behaviour? E.g. dialog.show();
• For Input Controls, does it have default Validators, Converters?
• Is it an AJAX Component?
• Is it Themeable?
16. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Runtime - Renderers
ONE UI V2 ONE UI V3 BOOTSTRAP
17. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
PREPARATION
18. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Setting Up To Explore
• Download Eclipse
• Download XPages SDK
• Download Extension Library Source Code
• Import Extension Library Projects to Eclipse
• Configure Eclipse with XPages SDK
• Slides covering this setup are in the Appendix! Download from Auslug after the
conference
– I will also put them up on my blog / slideshare
20. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
41 Projects?
Where to Start?
Let’s narrow our focus
• 3rd Party Library Projects
• Feature Projects
• Test Projects
• Domino Access Services
projects
Make some more
Working Sets
21. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Identifying 3rd Party Library
• In normal Java, JARs are just added
to the classpath
• For OSGi development, a plugin
‘wraps’ the jar and provides classes
via the plugin framework
• These ‘wrapper’ plugins can usually
be identified as only having one or
more jar files in them
22. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Feature Projects
• Contain feature.xml
• Often Project name ends in ‘feature’
• Only used when ‘packaging up’ the plugins
• These are BORING let’s get them out of the way
– We didn’t even need to import them in the first place, I just wanted to keep that step
simple
• We can Delete from our eclipse ‘workspace’
23. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Delete the feature projects
• Select all the feature projects
– The one’s on the left are the ones I did
• Press ‘delete’
• No Need to ‘delete contents on disk’
24. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Test Plugins
• Used by developers during development to run ‘unit tests’ and what not
• We don’t really care at this point
• Let’s get them out of the way
25. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Domino Access Service Projects / REST
• Used for DAS
• Look at them if you are interested!
• We are focussing on Xpages Controls, so we don’t care
• Lets put them in a Working set of their own
26. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
These ones have all the ‘smarts’
and used during actual Xpages
runtime
These ones have extra
‘tooling’ information
For Domino Designer to use
These ones aren’t of too
much interest to us
9 Main Plugins
5 Designer Only Plugins
27. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Main Control Library Plugins
com.ibm.xsp Description
.bluemix.util New classes for use of Xpages in ‘Bluemix’
.extlib Contains the ‘XspLibrary’ that you enable for your NSF, all other
plugins exposed through this one, not too much to look at though.
.extlib.controls The main Controls project with Components, default
renderers, xsp-config files, and faces-config.xml files.
*We are mainly interested in this one*
.extlib.core Contains Utility functions that are used by all other extlib plugins
.extlib.domino Any Controls SPECIFIC to domino go in here.
E.g. DynamicView, DominoNAB Value Picker etc.
.extlib.mobile All the mobile controls. Not sure if many ppl use these?
.extlib.oneui All the OneUI themes, resources, renderers, app layouts
.extlib.relational Code related to the Relational Database Access functionality
.theme.bootstrap All the Bootstrap themes, resources, renderers, app layouts
28. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Designer Tooling Plugins
com.ibm.xsp.extlib Description
.designer Just some utility classes used by the tooling
.designer.bluemix All the new bluemix configuration and deployment tooling. Might
be interesting to look into but not for our purpose here
.designer.relational Tooling for JDBC Plugin Generator (Can be used to wrap JDBC
Drivers into a plugin for relational db access)
.designer.tooling Additional Tooling information for the Extension Library
controls
.designer.xspprops The ‘xsp.properties’ editor comes from here. Interesting to look at
but not for our purpose
29. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Interesting to us for our ‘WidgetContainer’ Investigation
3 ‘Normal’ Projects
• com.ibm.xsp.extlib.controls
• com.ibm.xsp.extlib.oneui
• com.ibm.xsp.theme.bootstrap
1 Designer Tooling Project
• com.ibm.xsp.extlib.designer.tooling
Much simpler than 41 Projects!
30. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
DISCOVERING THE SOURCE
31. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Eclipse Shortcuts and Tips
Ctrl + Shift + T Find a Java Class by Name
Ctrl + Shift + R Find a Resource by name (XML file, image, text file etc.)
Search -> File Search Contents of files
Search -> Java Search Java types fields etc
Right Click -> References Find out where else that thing is used
Ctrl + Click Click through to the Definition of that thing
F4 Open Type Hierarchy – Navigable Help on that Hierarchy
Ctrl + T Quick Type Hierarchy (Tooltip help)
Ctrl + O Quick Outline of current class (jump to method / field)
32. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Where to Start?
• Thought Process:
– Let’s find the Design Time Properties first
– Design time Properties will be in an .xsp-config file somewhere
– Those Properties should include the tag name
– We know it’s tagname is ‘widgetContainer’
– Let’s search for text ‘widgetContainer’ in *.xsp-config files
33. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Eclipse Shortcuts and Tips
Ctrl + Shift + T Find a Java Class by Name
Ctrl + Shift + R Find a Resource by name (XML file, image, text file etc.)
Search -> File Search Contents of files
Search -> Java Search Java types fields etc
Right Click -> References Find out where else that thing is used
Ctrl + Click Click through to the Definition of that thing
F4 Open Type Hierarchy – Navigable Help on that Hierarchy
Ctrl + T Quick Type Hierarchy (Tooltip help)
35. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Scope Searches
Workspace All projects in the workspace
Selected Resources Whatever is selected in the Package Explorer (and children)
Enclosing Projects Search within the projects of the selected things
Working Set Just search within a Working Set (ExtLib, ExtLib Designer etc.)
36. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
2 Files? Which one is correct
• Domino Designer actually uses the one without ‘raw’ prefix
• IBM Use the ‘raw’ one to generate the real one + localised properties
37. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Difference between raw- and normal
Raw file has English descriptions, easier to read for source code browsing
Generated file has English descriptions replaced with localisation placeholders to
allow for other languages
38. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Find extlib-containers.xsp-config file
Jumps to
39. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Commonly seen together
English Localisation Properties
Runtime Configuration
Design Time Configuration
raw-extlib-containers.xsp-config down with the R’s
40. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Looking for the Design Time Elements
Things we can find in xsp-config
• Design Time
– Palette Entry
– Mark-up Tag Details
– Visualisation
– Component Class
– Component Properties
– Property Panels
– Drop Action
41. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Other Details we look for in <component-extension> tag
• Find the <component> that relates to the widgetContainer
• Look for <component-extension> tag within that
Default Namespace and Prefix
• Usually at the Top of the
xsp-config file
42. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
<component-extension>
Tag Name
Palette Details
No mention of Icon though?
Visualization
BUT this one is commented out,
so where is it coming from?
43. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Java Class
• Find the <component> tag for the WidgetContainer
• Find the <component-class> tag underneath that
44. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Properties
• Find <component> tag for WidgetContainer
• Look at all the <property> tags beneath that
45. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Properties – Group Type Reference
• Component may refer to previously defined groups of properties that are
common amongst many Components
46. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
How are we going?
• Design Time
– Palette Entry - Found but no Icon?
– Mark-up Tag Details - FOUND
– Visualisation – Found but commented out?
– Component Class - FOUND
– Component Properties - FOUND
– Property Panels
– Drop Action
Where is the Remaining info? Let’s expand our search to all file types
47. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Search all files for widgetContainer
48. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Lots of matches
After some digging amongst results…
49. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Visualizer
• Visualization can be from xsp-config OR from a special Visualizer class
• Most of the Extension Library controls use a Visualizer class
50. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Visualizer Markup example
51. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
What is in plugin.xml in the designer.tooling project?
52. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Entry in tooling plugin.xml
Palette Details
Where are these icons?
Let’s use Find Resource
53. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Eclipse Shortcuts and Tips
Ctrl + Shift + T Find a Java Class by Name
Ctrl + Shift + R Find a Resource by name (XML file, image, text file etc.)
Search -> File Search Contents of files
Search -> Java Search Java types fields etc
Right Click -> References Find out where else that thing is used
Ctrl + Click Click through to the Definition of that thing
F4 Open Type Hierarchy – Navigable Help on that Hierarchy
Ctrl + T Quick Type Hierarchy (Tooltip help)
54. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Finding a Resource
• Ctrl + Shift + R
55. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Drop Action
• If the Component has a ‘Drop Action’ then this will be under the paletteItem
56. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Entry in tooling plugin.xml
Panel Details
57. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Custom Panel Example
58. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
How are we tracking
• Design Time
– Palette Entry - FOUND
– Mark-up Tag Details - FOUND
– Visualisation – FOUND
– Component Class - FOUND
– Component Properties - FOUND
– Property Panels - FOUND
– Drop Action - FOUND
59. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Discovering Runtime Elements
• Runtime
– Component Behaviour
– Renderers
• Default Renderer
• Renderers for Other themes
– One UI 2
– One UI 3
– bootstrap
60. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Eclipse Shortcuts and Tips
Ctrl + Shift + T Find a Java Class by Name
Ctrl + Shift + R Find a Resource by name (XML file, image, text file etc.)
Search -> File Search Contents of files
Search -> Java Search Java types fields etc
Right Click -> References Find out where else that thing is used
Ctrl + Click Click through to the Definition of that thing
F4 Open Type Hierarchy – Navigable Help on that Hierarchy
Ctrl + T Quick Type Hierarchy (Tooltip help)
61. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Ctrl + Shift + T
• Launches the ‘Open Type’ dialog
• Search for part of the class name it prompts with some matches
62. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
UIWidgetContainer Class
• Most Component
class names start
with UI, e.g
UIWidgetContainer
UIDialog
• This is the real
‘brains’ of how the
control works and
the options it can
have
• Clues on how the control
interacts with the Xpages
system and page lifecycle
63. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component - Property Getter Setter pattern
• Common pattern used to enable ‘dynamically computed’ properties
If property was set with literal value e.g. “3”,
or on page load “${some.value}”,
return that value
Otherwise if it was specified as
Dynamically computed value
“#{some.value}”,
Compute it, and return that value
Setter is used to set the property when it was specified as literal value e.g. “3”
or a computed on page load “${some.value}” once and then stores it
64. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component - State Saving Pattern
• Between requests, the Xpages runtime MAY need to save the control’s state
• It asks the control for a state ‘object’ using the saveState function
• Function should return some object which contains all the properties to save
• Usually uses an Object array [] so it can contain mixed types
65. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component - Restore State Pattern
• When Xpages runtime re-creates a component tree, will ask the component to
‘restore itself’
• Xpages runtime gives the component the same state ‘object’ back that the
saveState function gave to it to save
• Component can then place
all the properties back in
there fields, ready to use
during the execution of the
Xpage
66. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Does our Component inherit properties/behaviour?
• We can investigate with some shortcut keys
Ctrl + Shift + T Find a Java Class by Name
Ctrl + Shift + R Find a Resource by name (XML file, image, text file etc.)
Search -> File Search Contents of files
Search -> Java Search Java types fields etc
Right Click -> References Find out where else that thing is used
Ctrl + Click Click through to the Definition of that thing
F4 Open Type Hierarchy – Navigable Help on that Hierarchy
Ctrl + T Quick Type Hierarchy (Tooltip help)
67. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Ctrl + T
• Quick Tooltip overview of the currently selected Java Type’s hierarchy
68. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
F4
• More Interactive Hierarchy
• Navigate through the hierarchy
• Filter / sort fields methods etc.
69. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Source not Found
• Just a class that is part of the core platform
– you don’t have Source code for – yet
70. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Renderers!
• Most likely the first thing you might Dabble in
– Oliver Busse NotesIn9
• http://www.notesin9.com/2015/04/20/notesin9-174-getting-started-with-custom-
renderers/
• What do we want to know?
– What is the Default Renderer?
– What are the Renderers for other Themes?
71. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
How are Renderers Chosen?
Component
Family
Renderer
Type
Renderer
Themes are used to change the components renderer type
Resulting in selecting a different renderer
72. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Finding the Component Family
• Look for getFamily() method in the Component
– Might be in one of the Superclasses
Ctrl + Click
73. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Finding Component Family
• Our Widget Container’s Component Family
– javax.faces.Panel
74. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Family
javax.faces.Panel
Renderer
Type
Renderer
Themes are used to change the components renderer type
Resulting in selecting a different renderer
75. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Finding the Default Renderer Type
• Usually is set in the Constructor using setRendererType
Ctrl + Click
76. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Finding the Default Renderer Type
• Widget Container Default Renderer Type is
– com.ibm.extlib.containers.WidgetContainer
77. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Component Family
javax.faces.Panel
Renderer Type
com.ibm.xsp.extlib.containers.WidgetContainer
Renderer
78. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Find the Default Renderer
• “RendererType” is our clue
• Renderer will be registered in a faces config *.xml file
• Let’s Search –> File for the renderer type within *.xml
79. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
1 Result that’s easy
• Double click the result
80. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Registration of Renderer in faces-
config.xml
81. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Found our Renderer!
82. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Family + Renderer Type
• If you still couldn’t Determine them from the source
83. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Which Renderers for other themes?
• Theme will change the ‘rendererType’ via properties
using Control ID
• What is the ‘Control ID’ for theming ?
– Lets look for getStyleKitFamily() in the Component;
Ctrl + Click
84. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
WidgetContainer Control ThemeId
• Turns out most of these themeId’s are in this
StyleKitExtLibDefault class
85. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Finding Themes that Modify WidgetContainer Properties
• Should be in *.theme files
• Will reference our ‘Container.Widget’ theme id
86. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Found theme
• Lets just look at the
bootstrap one
Double Click the search result
87. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Bootstrap WidgetContainer Renderer
Search for the
Renderer type
In faces-config xml files
88. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Found 1 Result
Double Click
89. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Found Renderer Faces Config
• Use the ‘renderer-class’ to find the actual Renderer
90. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Found our Bootstrap Renderer
91. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
About Renderers
• Basic Concept is to Output HTML
Markup
• ‘Encode’ means generate output
– encodeBegin() output before children
– encodeChildren() output the child controls
– encodeEnd() generate output after children
• ‘Decode’ means interpret the response
– User may have input a value that needs to
be given back to the component
93. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
How did we go?
• Runtime
– Component Behaviour - FOUND
– Renderers
• Default Renderer - FOUND
• Renderers for Other themes
– Bootstrap - FOUND
– One UI 2– Could find using same method
– One UI 3 – Could find using same method
94. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
SOME EXAMPLES
95. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
InPlaceForm Action
• Looked at the DynamicContent action
• Copied elements and modified to suit InPlaceForm
• Shared back to the ExtensionLibrary!
96. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Markdown Control
• Borrowed some logic from Martin Rolph’s (OvalUK) Markdown Custom Control
– With permission!
Edit mode
Read only
97. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Extended InputRichText Control
HTML only (no images)
• Removes CKEditor plugins that allow image uploads
• Prevents Pasting of images (custom CKEditor plugin)
98. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
JqGrid Control
• Inspired by Sumit Tayal’s AUSLUG 2015 presentation
– Unmask the True Potential of xGrid
– http://www.slideshare.net/sumittayal78/xgrid-true-potential
• Dynamically generated columns from Notes View Definition
– Learnt and Copied technique from the Dynamic View Control
• Automatically Creates a ‘REST Service’
– Learnt and Copied technique from Extlib Rest service controls;
• Visualizers, Panels
– Looked at other Ext Lib controls for examples
• Automatically add Jquery resources
– Techniques discovered through extlib and also Xpages Community
99. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
JqGrid Control
100. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
106. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Download Eclipse
Eclipse is an IDE “Integrated Development Environment”
which is usually used for Xpages plugin development
107. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
108. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
109. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Extract Downloaded Zip
I usually put it in a “c:eclipse-versioneclipse” folder so that I can keep separate
versions available
e.g.
C:eclipse-keplereclipse
C:eclipse-lunaeclipse
C:eclipse-marseclipse
110. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Download Xpages SDK
• Search for it on OpenNTF
111. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Download the Xpages SDK
112. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Start Up Eclipse
Decide where to put your ‘workspace’ (basically a folder for settings and new projects)
I keep separate workspaces for separate versions and so usually name it
V:eclipse-versionworkspace-shortdesc
e.g.
v:eclipse-marsworkspace-extlib
113. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Install the Xpages SDK
114. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
119. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Download this link, and then Extract the Zip to anywhere you prefer
120. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Unzip Source Folders
Unzip the src archives
121. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Import into Eclipse
122. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Choose Existing Projects into Workspace
126. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Show Working Sets
127. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
ERRORS!
• Don’t Panic!
• You can still browse the code
Just fine
134. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Clean
135. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
Delete pom.xml files from all projects
136. March 10th & 11th, Sydney, AustraliaMeet.Share.Learn.Connect @AusLUG #@Inform2016
No more errors!
Don’t worry about warnings, there is always warnings