You are on page 1of 13

Domino's XPages Workshop Lab Manual

Lab 1 Hello World XPage

Page 1 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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.

Page 2 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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.

Page 3 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

Step 4

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

Step 5

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

Step 6 Step 7

Press <CTRL> + S to save (or File > Save from the menu). Add your new hwControl Custom Control to the XPage hwPage by dragging & dropping it onto the page.

Page 4 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

Step 8 Step 9

Press <CTRL> + S to save (or File > Save from the menu). 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....

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

Page 5 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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

Save the changes to the Application Properties before continuing. 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.

Page 6 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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.

Page 7 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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.

Page 8 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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.

Page 9 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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.

Page 10 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

Step 9

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

Use the following formula: !compositeData.iknowyou

Page 11 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

Step 10

Did you make sure you changed it for both edit box AND the button?!? =) OK, then you should now Save your changes. 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.

Step 11

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

Add some text above and below the panel. Preview the result in the Browser and Notes client.

Page 12 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

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

Page 13 of 13
COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 1 IBM ISV & DEVELOPER RELATIONS.

You might also like