1. What will you learn
You will build the foundation for our sample application and learn about application structure that allows styling your application easily.
2. Task Description
You will create three XPages that will provide access to our sample application. You will prepare some structure for the subsequent exercises.
3. Detailed Steps
Resources for this exercise
1. Create a new database called xScrapbook.
Don't forget to change the default access for Anonymous in the access control list.
2. Create three XPages:
Repeat 2,3 & 4 for each subsequent Xpage.
3. Create one Custom Controls:
4. Add nested panels to your custom control. A panel translates into a DIV element using the HTML rendering but can contain additional logic. Panels are commonly used for styling or partial refresh operations.
Important: make sure to use the names below!
(You'll also notice that the outline below does not match the picture, the text below is correct.)
- Panel: frame
- Panel: header
- Panel: headerInner
- Panel: main
- Panel: tabBar
- Panel: content
5. Add a label control into the headerInner panel and give it a Label of Scrapbook.
6. Add your new container Custom Control to each of the XPages (home, results, profile).
7. Import the css stylesheet into stylesheet resources styles.css from the workshop resources media (depending on your class: a memory stick, a CD, a URL, a network location)
8. Import all of the images into image resources
9. Add the style resource styles.css to the container control.
10. On the styles tab of each panel (6 panels) map the class to the corresponding named style sheet class.
TIP- Use the outline to navigate the panels easily.
11. Go back to the label you added to the headerInner panel and map it to the class headerInnerTitle.
12. Set web launch option in Application Properties:
- Open designated XPage: home
4. The Result
Use the preview button from a page to see the results.
5. Things To Explore
- Can you create a custom control that shows the current user name (Anonymous if you are not logged in and add that to the newly created pages
- Create a style that puts that custom control in one corner (pick one) of the screen.
6. Further Readings