Sei sulla pagina 1di 13
Domino's XPages Workshop Lab Manual Lab 1 Hello World XPage Page 1 of 13 COPYRIGHT

Domino's XPages Workshop

Lab Manual

Lab 1 Hello World XPage

Introduction: XPages is a new design element within the Notes/Domino infrastructure. In this lab, you

Introduction:

XPages is a new design element within the Notes/Domino infrastructure. In this lab, you will become familiar with the basic working of the XPages editor and the components palette.

Description:

This lab introduces the new XPages design elements and the elements which are included in each. You will create the mandatory “Hello World” code example and prepare some structure for the subsequent exercises.

Objective:

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

Know what an XPage is an where to locate them in the design tree

Know the new administration settings to allow your XPages to execute on the Domino server

Understand where XPages get their content and their basic purpose

Procedure:

SECTION 1: CREATING HELLO WORLD XPAGE

In this section, you will learn how to create an XPage and preview it both in the browser and notes client.

Step 1

Create a new database (<CTRL> + N) on the XPages/Lotus server by clicking File > New > Application and title it xpages1.

File > New > Application and title it xpages1 . Page 2 of 13 COPYRIGHT IBM
Step 2 Create a new XPage by double-clicking on XPages in the Applications view. Then
Step 2 Create a new XPage by double-clicking on XPages in the Applications view. Then
Step 2
Create a new XPage by double-clicking on XPages in the Applications view. Then click the
New XPage button. Enter the name of hwPage and click OK to create the page.
Step 3
Create a new Custom Control by double-clicking on Custom Controls in the Applications
view. Then click the New Custom Control button. Enter the name of hwControl and click
OK to create the custom control.
of hwControl and click OK to create the custom control. Page 3 of 13 COPYRIGHT IBM
Step 4 Add a Label control as a test control ("hello XPages world!"). Step 5

Step 4

Add a Label control as a test control ("hello XPages world!").

control as a test control ("hello XPages world!"). Step 5 Edit the properties for the label

Step 5

Edit the properties for the label to change the label text to Hello Xpages world!.

label to change the label text to Hello Xpages world! . Step 6 Press <CTRL> +

Step 6

Press <CTRL> + S to save (or File > Save from the menu).

Step 7

Add your new hwControl Custom Control to the XPage hwPage by dragging & dropping it onto the page.

hwPage by dragging & dropping it onto the page. Page 4 of 13 COPYRIGHT IBM CORPORATION
Step 8 Press <CTRL> + S to save (or File > Save from the menu).

Step 8

Press <CTRL> + S to save (or File > Save from the menu).

Step 9

Set the Access Control options to allow Anonymous access to Manager by right-clicking on the xpages1 under Applications view and selecting Application > Access Control

view and selecting Application > Access Control Select the -Default- from the list and change Access

Select the -Default- from the list and change Access to Manager. Click OK to save the changes.

Access to Manager . Click OK to save the changes. Page 5 of 13 COPYRIGHT IBM
Step 10 Set web launch options in Application Properties. Change Launch to Open designated XPage
Step 10 Set web launch options in Application Properties. Change Launch to Open designated XPage
Step 10
Set web launch options in Application Properties. Change Launch to Open designated
XPage and select hwPage as the XPage to open for both launch properties.
Step 11
Save the changes to the Application Properties before continuing.
Step 12
Click on Preview in Web Browser button from the toolbar to view the XPage inside the
browser. This will open up the new Hello World XPages application within Mozilla Firefox.
Step 13
Switch back to Designer and then click on the Preview in Notes button from the toolbar to
view the XPage from within the Notes client.
the toolbar to view the XPage from within the Notes client. Page 6 of 13 COPYRIGHT
NOTE: Notice how the XPage looks exactly the same within both the Browser and the

NOTE: Notice how the XPage looks exactly the same within both the Browser and the Notes Client. We will be including screenshots of previewing in both throughout the rest of the labs so that you can see that the XPages look the same, no matter which software is used to render it.

Things to Explore: 1) Can you change the Output from static “Hello World” to include the current time? (Use the caret for entering JavaScript and the date() function).

2) Can you show your name (which would be Anonymous if you are not logged in) together with Hello World.

SECTION 2: EXTEND THE HELLO WORLD XPAGE

In this section, you will become familiar with conditional display of information in XPages. You will learn the difference between full and partial refresh.

You're going to extend the XPage application to change your custom control to contain an input field to collect the users name and a button to update the page to show “Hello [Name entered]“.

Step 1

Add a Panel to the hwControl Custom Control by dragging & dropping. Name it helloPanel.

Control by dragging & dropping . Name it helloPanel . Page 7 of 13 COPYRIGHT IBM
Control by dragging & dropping . Name it helloPanel . Page 7 of 13 COPYRIGHT IBM
Step 2 Add a Label to the panel. Make it say: Your Name please. Step
Step 2 Add a Label to the panel. Make it say: Your Name please. Step
Step 2
Add a Label to the panel. Make it say: Your Name please.
Step 3
Add an Edit Box, name it yourName.
Step 4
Add a Button underneath the panel. Label it Say Hello.
4 Add a Button underneath the panel. Label it Say Hello. Page 8 of 13 COPYRIGHT
Step 5 Add a custom property to the custom control by clicking on an empty
Step 5 Add a custom property to the custom control by clicking on an empty
Step 5
Add a custom property to the custom control by clicking on an empty part of the page. Then
look at the Properties view underneath the custom control view and select Property
Definition from the list on left. Click New Property button to create a new property. Call it
iknowyou.
Change the Type to boolean, and change the Default Value to false. Check the
box for Allow multiple instances.
Step 6
Add code to the button's onClick event by clicking on the Say Hello button to give it focus.
Then switch to the Events tab underneath the custom control editor view. Make sure the

onclick mouse event is selected, then click Add Action

button.

mouse event is selected, then click Add Action button. Page 9 of 13 COPYRIGHT IBM CORPORATION
Step 7 Change the Category to Basic. Change the Action to Execute Script. Enter the
Step 7 Change the Category to Basic. Change the Action to Execute Script. Enter the
Step 7
Change the Category to Basic.
Change the Action to Execute Script. Enter the following
scripting code into the Condition box, then click OK.
var txtControlValue = getComponent("yourName").getValue();
getComponent("label2").setValue("Hello "+txtControlValue);
compositeData.iknowyou = true;
Step 8
Preview and test the result by running in browser. Notice how the functionality works and how
the edit box and button stay visible and on the page even after a submission.
Step 9 Change the Visible properties of the edit box and the button to Compute

Step 9

Change the Visible properties of the edit box and the button to Compute value

of the edit box and the button to Compute value Use the following formula: !compositeData.iknowyou Page

Use the following formula:

!compositeData.iknowyou

value Use the following formula: !compositeData.iknowyou Page 11 of 13 COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS
Step 10 Did you make sure you changed it for both edit box AND the
Step 10 Did you make sure you changed it for both edit box AND the
Step 10
Did you make sure you changed it for both edit box AND the button?!? =) OK, then you should
now Save your changes.
Step 11
Preview the result in both the Browser and Notes client. Notice this time how the edit box
and button were removed from XPage once you clicked Say Hello.
NOTE: To preview the result you will need to change the focus to the hwPage,
as you can't preview a custom control. Be sure to save both before you hit the
preview button.
Step 12
Change the Server Options for the Button event from Full Update to Partial Update and
select the helloPanel.
Step 13
Add some text above and below the panel.
Step 14
Preview the result in the Browser and Notes client.
Step 14 Preview the result in the Browser and Notes client. Page 12 of 13 COPYRIGHT
Step 14 Preview the result in the Browser and Notes client. Page 12 of 13 COPYRIGHT
NOTE: Notice this time how only the edit box gets removed due to the Partial
NOTE: Notice this time how only the edit box gets removed due to the Partial

NOTE: Notice this time how only the edit box gets removed due to the Partial Update change you just did.

Summary:

Congratulations! You have completed this overview lab of XPages.

In this lab, you completed the following procedures:

• Updated Domino security to allow XPages to execute

• Looked at elements of a XPage

• Created a sample Hello World XPage application

• Learned how to edit XPage source code