1. What will you learn
You will learn how to create a custom control that has a customizable content area. You will use the control in the sample application.
2. Task Description
You will extend the existing container control to include a tabbed control and a content area. The content area allow you add individual content into it, effectively creating a new container control type.
3. Detailed Steps
1. Open the container custom control
2. Add a “Tabbed Panel” into the “tabBar” Panel control
Drag and drop from the “container controls pallet.
3. The Tabbed Panel needs to have 3 tabs:
- Home (name: homeTab)
- Results (name: resultsTab)
- Profile (name: profileTab)
Right click on tabbed panel to add another tab.
Use the outline to select the tabs and get to their properties.
4. Add an “Editable Area” control into the “content” area. Drop it where “facet_1” is in the picture
5. Create three more Custom controls:
Tip: add some temporary content to these controls to be able to see their proper operation.
6. Add each of the new custom controls to their owner XPage Editable Areas as follows:
- searchForm into home
- searchResults into results
- profileForm into profile
e.g. Drag and drop the searchForm custom control onto the green cirlce on the home XPage.
4. The Result
Change the URL to see each page. e.g. home.xsp, results.xsp & profile.xsp
We connect up the navigation tabs in Exercise 14.
5. Things To Explore
? Can you add “Editable Areas” to xPages?
? Can you add more than one “Editable Area to a custom control?