lab 02 scrapbook

8/8/2019 Lab 02 Scrapbook

1/25

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


2/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 tomodernize 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: CREATETHE SCRAPBOOKXPAGESAPPLICATION

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

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


Page 2 of 25


3/25

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

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


4/25

Step 5 Addnested panels to your custom control by dragging & dropping. A panel translates into aDIV element using the HTML rendering but can contain additional logic. Panels are commonlyused 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 panelsfrom 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 headerInnerpanel and give it a Label ofScrapbook.

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


Page 4 of 25


5/25

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

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


Page 5 of 25


6/25

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


Page 6 of 25


7/25

Step 11 On the Style tab of each panel(6 panels), map the class to the corresponding named stylesheet 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 classheaderInnerTitle.


Page 7 of 25


8/25

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

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


9/25

Things to Explore: 1) Can you create a custom control that shows the currentuser name (Anonymous if you are not logged in and add that to the newlycreated 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 SCRAPBOOKTOINCLUDE CUSTOM CONTROLS

In this section, you will learn how to create a custom control that has acustomizable content area. You will use the control in the sample application. Youwill extend the existing container control to include a tabbed control and a contentarea. The content area allow you add individual content into it, effectively creatinga new container control type.

Step 1 Open the containerCustom Control.

Step 2 Add a Tabbed Panel into the tabBarPanel 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.w3.org/Style/CSS/http://www.alistapart.com/http://www.csszengarden.com/http://www.w3.org/Style/CSS/http://www.alistapart.com/http://www.csszengarden.com/http://www.w3schools.com/css/


10/25

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- searchResults

Tip: add some temporary content (like a label) to these controls to be able to see their properoperation.


Page 10 of 25


11/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 onthe home XPage.

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


Page 11 of 25


12/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 nextfew 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: CREATEA NOTES DOCUMENT (FORM) IN XPAGES

In this section, you will learn how to display notes documents in XPages usingform properties and simple data binding. Create a profile form (Classic Notes) andmap 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 NewForm 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


13/25

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

Step 2 Open the Form Properties window. On the defaults tab, forOn 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 conditionsBy Formula:SELECTform=profile.


Page 13 of 25


14/25

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

FullName (Sorted Ascending, Sortable / Click to Sort Both)TimeZoneEmail

TIP: Don't forget to delete the # column from the view. Also, use ColumnProperties > Sort Tab > Sort: Ascending, Check Click on column headerto 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 inthe browserand open a document from the view (which would be pretty empty at the moment,other than our header).


Page 14 of 25


15/25

Step 7 Open the profileFormcustom control(you created that in the previous section). Click on thepage 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 profileas the form.

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


Page 15 of 25


16/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 tothe Controls pallet.

Step 12 Select all the field bindings exceptforFullName 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 dialogchange 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


17/25

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

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


Page 17 of 25


18/25

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

Step 18 Bind the Date Time Pickerto 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'llnotice that the fields are empty for now and ready for entry. If you preview the Profiles Viewwithin the browser, you'll be able to view the data within the profile page (you need to enterthem using the Notes form, since we don't have action buttons for now).


Page 18 of 25


19/25

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


Page 19 of 25


20/25

SECTION 4: ADD PAGE FLOWAND CODE ACTIONSTO BUTTONS

In this section, you will learn how page flow works in XPages and how to codeactions behind action buttons. You will complete the profileForm custom controlfrom previous section.

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

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


21/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


22/25

Step 6 Add a computedVisibleproperty for the Delete Button.

Step 7 In the JavaScript Editoradd this formula:

!document1.isNewNote()

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

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


Page 22 of 25


23/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 classprofilesButtonCommand 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


24/25

Step 17 Preview the page in the Browserand Notes Client.


Page 24 of 25


25/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 forsuccess and failure.

Further Readings:

Online Help

Summary:

Congratulations! You have completed this second lab of the XPagesworkshop. 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

lab 02 scrapbook

Documents