Xpages Lab 02 Scrapbook

Domino's XPages Workshop

Lab Manual

Lab 2

XPages Lab Title

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 2 IBM ISV & DEVELOPER RELATIONS.

Page 1 of 25

Introduction:In this lab, you will build the foundation for our sample application and learn about application structure that allows styling your application easily. The sample will build a nice Profile application that you can use to create profiles for colleagues, etc. This XPages application will be built up from scratch, so you will learn how to put together a brand new XPages application. Later in the workshop, you will learn how to modernize an existing Domino application to become an XPages application.

Description:This lab introduces the XPages design elements for an application created from scratch. You will create three XPages that will provide access to our sample application. You will prepare some structure for the subsequent exercises.

Objective:At the end of the lab, you should be able to:

• Know how to create multiple XPages

• Know how to create custom controls and how to import resources like images

• Understand styling utilizing CSS and how to apply to XPages

Procedure:

SECTION 1: CREATE THE SCRAPBOOK XPAGES APPLICATION

In this section, you will create the new Scrapbook XPages application. You will create the three new XPages that will provide the UI for this application and prepare them for updates in other sections.

Step 1 Create a new application called xScrapbook on the XPages/Lotus server.


Page 2 of 25

Step 2 Don't forget to change the default access for Anonymous in the access control list to Manager.

Step 3 Create three New XPage's: - home - results - profile

Repeat clicks 2,3 & 4 for each subsequent XPage.

Step 4 Create a New Custom Control named container.


Page 3 of 25

Step 5 Add nested panels to your custom control by dragging & dropping. 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 can also utilize the Outline view to appropriately nest your panels!! Name your panels from within the Properties view as below.

- Panel: frame- Panel: header

- Panel: headerInner- Panel: main

- Panel: tabBar - Panel: content

Step 6 Add a Label control into the headerInner panel and give it a Label of Scrapbook.

Step 7 Add your new container Custom Control to each of the XPages (home, results, & profile).


Page 4 of 25

Step 8 Import the css stylesheet into the Resources > Style Sheets resources. The styles.css file is located in the workshop resources media (depending on your class: a memory stick, a CD, a URL, a network location). For this particular IDR workshop, the workshop resources media is located in the C:\Lab Files folder.

Step 9 Import all of the images into Resources > Images.


Page 5 of 25

Step 10 Add the style resource styles.css to the custom control.


Page 6 of 25

Step 11 On the Style 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.

Step 12 Go back to the label you added to the headerInner panel and map it's Style to the class headerInnerTitle.


Page 7 of 25

Step 13 Set both launch options in Application Properties to Open designated xPage, and select XPage home.

Step 14 Save your changes to all files!

Step 15 Use both of the preview buttons (Notes & Browser) to see the results.


Page 8 of 25

Things to Explore: 1) 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.

2) Create a style that puts that custom control in one corner (pick one) of the screen.

Further Readings:

http://www.w3schools.com/css/

http://www.w3.org/Style/CSS/

http://www.alistapart.com/

http://www.csszengarden.com/

SECTION 2: UPDATE SCRAPBOOK TO INCLUDE CUSTOM CONTROLS

In this section, you will learn how to create a custom control that has a customizable content area. You will use the control in the sample application. 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.

Step 1 Open the container Custom Control.

Step 2 Add a Tabbed Panel into the tabBar Panel control by dragging and dropping from the Container Controls pallet.

Step 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.


Page 9 of 25

http://www.w3schools.com/css/

http://www.csszengarden.com/

http://www.alistapart.com/

http://www.w3.org/Style/CSS/

NOTE: Use the Outline view to select the tabs and get to their properties, setting both Name and Label fields as appropriate.

Step 4 Add an Editable Area control into the content panel. Drop it where facet_1 is in the picture.

Step 5 Create three more Custom Controls controls and name them as follows:- searchForm- profileForm- searchResultsTip: add some temporary content (like a label) to these controls to be able to see their proper operation.


Page 10 of 25

Step 6 Add each of the new Custom Controls to their own XPage as follows:- searchForm into home- searchResults into results- profileForm into profile

NOTE: Drag and drop the searchForm custom control onto the green cirlce on the home XPage.

Step 7 Preview in both Browser and Notes Client. Change the URL to see each page, home.xsp, results.xsp, & profile.xsp.


Page 11 of 25

NOTE: We connect up the navigation tabs in a future exercise (14).

Step 8 You are now done with building the skeletal framework for the Profiles application. In the next few sections, you will start to fill in the GUI.

Things to Explore: 1) Can you add “Editable Areas” to XPages?

2) Can you add more than one “Editable Area” to a custom control?

SECTION 3: CREATE A NOTES DOCUMENT (FORM) IN XPAGES

In this section, you will learn how to display notes documents in XPages using form properties and simple data binding. Create a profile form (Classic Notes) and map the profile form to an XPage. Add data binding to the profile XPage to show data stored in the Notes form.

Step 1 Create a New Form named profile. Create the following fields: FullName (Computed Text)

Formula: @Trim(FirstName + " " + LastName) Email (Text) TimeZone (Text) AboutMe (Rich Text) Gender (Text) Country (Text) FirstName (Text) LastName (Text) DOB (Date Time)


Page 12 of 25

TIP: You can create fields by right-clicking inside the form editor window and selecting Create Field... from the list.

Step 2 Open the Form Properties window. On the defaults tab, for On web access use Display XPage instead, set it to the profile XPage. Close the properties view.

Step 3 Create a New View named profiles with the view selection conditions By Formula: SELECT form=”profile”.


Page 13 of 25

Step 4 Insert the following columns into the new view by clicking Append Column in View, then selecting the Field value and changing column properties to set name.

FullName (Sorted Ascending, Sortable / Click to Sort – Both) TimeZone Email

TIP: Don't forget to delete the # column from the view. Also, use Column Properties > Sort Tab > Sort: Ascending, Check Click on column header to sort and select Both.

Step 5 Save the view before continuing.

Step 6 Create some documents in the Notes Client with the profile form. Then Preview the view in the browser and open a document from the view (which would be pretty empty at the moment, other than our header).


Page 14 of 25

Step 7 Open the profileForm custom control (you created that in the previous section). Click on the page in the design editor, so it gets the focus.

Step 8 On the Data tab in the Properties view, add a Domino Document datasource. Choose profile as the form.

Step 9 Click on the All properties tab, and expand the data entry. Then expand the dominoDocument entry and select OnSave for the computeWithForm option.


Page 15 of 25

Step 10 Save the custom control and close it. Then reopen it to make the date palette refresh.

Step 11 Select the Data palette and enable the Select controls dialog box button.

NOTE: Data pallet may have to be selected via the Drop-Down arrow next to the Controls pallet.

Step 12 Select all the field bindings except for FullName and the DOB (use shift+click to select multiple fields).

Step 13 Drag & drop all the selected field bindings to the profileForm page in the design editor.

Step 14 In the helper dialog change the following control types:

- About Me: RichText- Gender: Combobox- TimeZone: Combobox

See pic on next page for how it should look...


Page 16 of 25

Step 15 Right-click inside a cell in the resulting table and choose to append 3 rows in the helper dialog.

Step 16 Reorder the row contents using drag & drop to group related fields together.


Page 17 of 25

Step 17 Add a label control and a Date Time Picker control for the DOB field. Add a new row in the table if needed.

Step 18 Bind the Date Time Picker to the field DOB. Set the Display format to Date only.

Step 19 Save all the changes to the profileForm custom control.

Step 20 Preview the XPage for your control (profile.xsp) in your Browser and Notes Client. You'll notice that the fields are empty for now and ready for entry. If you preview the Profiles View within the browser, you'll be able to view the data within the profile page (you need to enter them using the Notes form, since we don't have action buttons for now).


Page 18 of 25

Things to Explore: Add a field starsign to the profile form and create a combobox with the star signs as selection.


Page 19 of 25

SECTION 4: ADD PAGE FLOW AND CODE ACTIONS TO BUTTONS

In this section, you will learn how page flow works in XPages and how to code actions behind action buttons. You will complete the “profileForm” custom control from previous section.

Step 1 Add the styles.css to the profileForm Custom Control (we need that to comfortably pick the styles).

Step 2 Add 4 button controls into the last table row (add one table row if needed) and label them as:- Save- Delete- Cancel- Edit


Page 20 of 25

Step 3 Change the button type for the Save button to Submit.

Step 4 Set the class to profilesButtonSubmit on the Style tab.

Step 5 Add a simple action on the Events tab: Open Page : home.xsp.


Page 21 of 25

Step 6 Add a computed Visible property for the Delete Button.

Step 7 In the JavaScript Editor add this formula:

!document1.isNewNote()

Step 8 On the Style tab, set the class to profilesButtonCommand.

Step 9 Add another simple action that deletes the document and returns to the home.xsp page.


Page 22 of 25

Step 10 Change the button type for the Cancel button to cancel.

Step 11 On the Style tab, change the class to profilesButtonCancel.

Step 12 Add the simple action to open home.xsp.

Step 13 On the Style tab, apply the class profilesButtonCommand to the Edit button.

Step 14 Create a computed Visible property for the Edit button with this formula:

!document1.isEditable()

Step 15 Add the simple Action to the event Document Mode: Edit Mode.

Step 16 Save the changes to the custom control.


Page 23 of 25

Step 17 Preview the page in the Browser and Notes Client.


Page 24 of 25

Things to Explore: 1) Hide the edit button if the current minute it odd (1, 3, 5 ... 59) (Doesn't make sense but is fun to play with).

2) Check the page properties, there are alternatives for the page navigation for success and failure.

Further Readings:

Online Help

Summary:

Congratulations! You have completed this second lab of the XPages workshop. In this lab, you completed the following procedures:

• Created the Scrapbook XPages application

• Updated Scrapbook to include Custom Controls

• Filled in the skeletal structure for the Profiles application

• Created a Notes Document (Form) in XPages

• Added page flow and code actions to buttons


Page 25 of 25

Xpages Lab 02 Scrapbook

Documents

computed visible

container

workshop resources

profileform

resources

custom control

custom controls

design editor