So you want to get started with the XPages Extension Library but don't know how or that you have already downloaded the ExtLib and you want to take your first baby steps. What do you do?

Well, firstly you should take the Extension Library Demo App (XPagesExt.nsf which is included in the download from OpenNTF) for a spin. This will give you an idea of what the ExtLib can do and how powerful it is. Open this app in Designer, select a control you're interested and then drill down through the app to see how the particular contol is configured and used. This is a valueable excercise to go through.

If you're starting from the beginning and you've some XPages experience why not try these 16 steps that will help you get your feet wet with the ExtLiB (the screenshots for the steps below are shown on slide #17 to #32 on the AD116 deck )?

Step 0.
Download your copy of Designer and then the latest release of the XPages Extension Library

Step 1.
Take any existing application, open it in Designer and create a Custom Control called ccLayout (or anything you like). Then drag and drop the 'Application Layout' control from the Extension Library folder on the palette to the Design pane of the Custom Control. You're likely to be prompted at this stage with a message box telling you that there is a dependence attached to this control you are about to use. Select Continue on the prompt.

Step 2.
Open the Application Properties and go to the Advanced tab. Here, verify that the 'com.ibm.xsp.extlib.library' is checked. Now that you've add this dependency you will need to also verify that the Extension Library is available on the runtime. Documentation attached to the ExtLib download (XPages Extension Library Documentation.pdf) will show you how this is done. And as you have installed the ExtLib to your Designer Client you will be able to run your ExtLib app in XPiNC.

Step 3.
Set the Theme on your app to use the 'oneuiv2' theme. This will pull in all of the styling resources you'll need, which are already part of the runtime, to run on your app.

Step 4.
Go back to the Application Layout control on the Custom Control created on Step 1. Go to the All Properties tab for the control and select from 'configuration' then 'xe:applicationConfiguration'.

Step 5.
Expand 'configuration' object and fill in any properties you need. In this case we're just going to use the 'placeBarName' property and compute its value. Use what ever you like, here we've computing the database title with @DbTitle() @Function.

Step 6.
Create a new XPage, home.xsp, and drop the ccLayout custom control on to it. Save, and preview the app running in a browser or on XPiNC. There you should be able to see the basic layout displayed on your XPage with the name of the app. Looks good?

Step 7.
Go back to the ccLayout Custom Control. We need to add some callbacks, Editable Areas, to the Layout Custom Control (see AD116_DemoB_CallBackforLAYOUT.txt ). This is needed as what you see on the Design Pane when you add in the Layout Control is but a picture representation of what the layout control might look like - this will change in the future, but for now we need to do this step. Copy snippet from the text file and nest this into the tag.

Step 8. 
And we need to add a design definition to the ccLayout custom control (852 – get markup from AD116_DemoB_LayoutDesignDefinition.txt ). This is so that we can better use the custom control in the XPage.

Step 9.
Back to the XPage. Now that we have the drop zones, let's add some containers and a combobox on the home XPage. Add Panels to the Editable Areas, and a regular combobox XPages control to the leftColumn panel.

Step 10.
Drop in the Dynamic View Panel control, from the Extension Library palette, to the main content area. We're going to use this control to display any view in the database dynamically.

Step 11.
Go to the All Properties panel and select to add view data source on the Dynamic View Panel

Step 12.
For the view data source add a var and a scoped variable for the view name. In this case we are going to use this variable to compute which view to load into the Dynamic View Panel and to do this we are going to use a scope variable - viewScope.v01.

Step 13.
That's your Dynamic View done. Now let's configure that combo box to drive that view - to allow us to change the view name dynamically. Bind the combo box to that same scoped variable – viewScope.v01

Step 14.
Set the selection items formula on combobox to get the names of all the views in the database (see AD116_DemoB_ComboBoxSelections.txt )
This formula gets all the views in the database, then gets their names. These are put these into an array and then returns that array sorted.

Step 15.
To the onchange event on the combobox set it to refresh the Dynamic View.
You're done. Run the XPage in the runtime, and there you should see all the views from the database listed in the combobox. Selecting any item in that combobox will drive the dynamic view panel.

Go on, have a go. It's easier than you think.

Hope this helps.
p.




* ...to quote Tim Tripcony