H4 Lab 01   X Page Basics
Upcoming SlideShare
Loading in...5
×
 

H4 Lab 01 X Page Basics

on

  • 1,177 views

tutorial to learn xpages technology

tutorial to learn xpages technology

Statistics

Views

Total Views
1,177
Views on SlideShare
1,176
Embed Views
1

Actions

Likes
1
Downloads
49
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    H4 Lab 01   X Page Basics H4 Lab 01 X Page Basics Document Transcript

    • Developing XPages - Part I Lotus Channel Technical Sales Copyright IBM Corporation 2010. All Rights Reserved. This exercise is intended to assist IBM SWG Sales and their business partners in understanding IBM Software products, marketing tactics, sales tactics and our direction during 2007. This exercise can be used in sales situations except individual charts labeled VENDOR CONFIDENTIAL or IBM CONFIDENTIAL, in which case they should be considered confidential under the practices in place in your firm and under any existing agreements with IBM regarding disclosure of confidential information. For questions or to request permission for any other use of the information or distribution of the presentation, please contact any member of the IBM software sales team. Confidentiality Reminder As a reminder, if you are an IBM Business Partner, any IBM Confidential information in this session is not to be shared by you with anyone outside of your company. This is in accordance with the PartnerWorld non-disclosure agreement as signed by your company. Thank you for your adherence to this agreement. Matthias Schneider IBM Corporation March 2010 Page 1 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • Table of Contents 1 Time Estimates ......................................................................................................... 2 2 Purpose...................................................................................................................... 2 3 Description................................................................................................................ 2 4 Detailed Steps ........................................................................................................... 3 Create a new XPage Application ............................................................................... 3 Work with Stylesheets................................................................................................ 6 Our first XPages ......................................................................................................... 6 Bring Data into Play................................................................................................... 6 5 Summary................................................................................................................... 6 1 Time Estimates The IT Professional should be able to complete this lab in 90 minutes. 2 Purpose You will build the foundation for our sample application and learn about application structure that allows styling your application easily. You will learn how to create a custom control that has a customizable content area. You will use the control in the sample application and learn how to display Notes documents in XPages using form properties and simple data binding. 3 Description You will create three XPages that provide access to our sample application. You will prepare some structure for the subsequent exercises and then extend the existing container control to include a tabbed control and a content area. The content area allows you to add individual content into it, effectively creating a new container control type. 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. Page 2 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 4 Detailed Steps Create a new XPage Application 1. If Domino is not running, start it now. 2. Open Domino Designer from the desktop icon and login as Domino Admin/ibm with password passw0rd. 3. Close the Welcome Page and click on Create a New Application from the Home Page. 4. Select DOM85/ibm as the server and name the blank application xScrapbook. Page 3 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 5. Click OK. 6. Create three XPages in your Scrapbook application named: - home - results - profile 7. Create one Custom Control named container. 8. Open the container custom control. In the next step we will add nested panels to the custom control. Note: 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. 9. Drag six panels onto the container Custom Control page and then arrange and nest them as shown below. Important: make sure to use the names shown: - Panel: frame - Panel: header - Panel: headerInner - Panel: main - Panel: tabBar - Panel: content Page 4 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • The easiest way to do this is using the Outline panel on the left side of the screen. 10. Add a Label control into the headerInner panel and give it a Label of Scrapbook. 11. Save the custom control. You might receive a message that the automatic project build has been turned of. Enable it via Project > Build Automatically. 12. Add your new container custom control – via Drag’n Drop - to each of the XPages (home, results, profile). Page 5 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • Work with Stylesheets 13. From the Resources section of the application navigator, double-click on Style Sheets. 14. Click on Import Style Sheet and browse to C:MyLabFilesXPagesstylesheetsstyles.css. Page 6 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 15. From the Resources section of the application navigator, double-click on Images. 16. Click on Import Image Resource and browse to C:MyLabFilesXPagesimages. 17. Import all of the images from this directory. (You can select them all using the Ctrl key) Next, we will add the style sheet to the container control. 18. Click anywhere on the container control and then click on Style in the Properties dialog Page 7 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 19. Click on the Add style sheet to page button. 20. Select styles.css from the dialog and click OK. Page 8 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 21. On the Style tab of each panel (6 panels) map the panel name to the corresponding named style sheet class. TIP: Use the Outline to navigate the panels easily. Page 9 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 22. Go back to the label you added to the headerInner panel and map it to the class headerInnerTitle. 23. Save the container control and switch to one of the XPages. 24. Use the Preview in Web Browser button to see the results in the browser. Page 10 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • Our first XPages 22. Open the container custom control. 23. Drag a Tabbed Panel (from Container Controls) onto the page and use the Outline to place it into the tabBar Panel control. The tabbed panel needs to have 3 tabs: Home, Profile and Results. 24. Right click on tabbed panel and select Append Tab. Page 11 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 25. Use the outline to select the tabs and get to their properties and name: - the first tab homeTab with a label of Home - the second tab profileTab with a label of Profile - the third tab resultsTab with a label of Results Page 12 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 26. Drag an Editable Area control (from Core Controls) into the content area. Drop it where facet_1 is in the picture. 27. Create three more Custom controls: - searchForm - profileForm - searchResults TIP: Add some temporary content to these controls to be able to see their proper operation. Page 13 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 28. Add each of the new custom controls to their own XPage Editable Areas as follows: - searchForm into home - searchResults into results - profileForm into profile Example: Drag and drop the searchForm custom control onto the green circle on the home XPage. 29. Use the preview button to preview the home page. Page 14 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 30. Change the URL to see each page, e.g. home.xsp, results.xsp & profile.xsp. Note that you will connect up the navigation tabs in Exercise 14. Bring Data into Play 31. Create a new Notes form named profile. Add 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 15 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • The result should look like this: Page 16 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 32. On the Form properties for On Web Access, use Display XPage instead and set it to the profile XPage. Page 17 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 33. Create a new view named “profiles” with the view selection formula SELECT form=”profile” and the following columns: - FullName (Sorted Ascending, Sortable / Click to Sort – Both) - TimeZone - Email Map the column values to the previously created fields from the profile form. 34. Create some documents in the Notes client with the profile form. You can accomplish this by opening the Scrapbook application and selecting Create > profile from the main menu. 35. Preview the view in the browser and open a document from the view (which will be empty other than our header). 36. Open the profileForm custom control and remove any temporary text you entered. Page 18 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 37. On the Data tab of the Properties dialog, add a Domino Document data source. 38. Choose profile as the form. Page 19 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 39. Click on the All Properties tab in the Properties dialog. Expand the datadata entry, then expand the dominoDocument entry and select onsave for the computeWithForm option. 40. Save the custom control. 41. Select the Data palette from the right side of the screen. Note: If the Data palette is not visible, select the arrow beside the Controls tab and select Data. Page 20 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 42. Enable the Select Controls dialog box button. 43. Select all the field bindings except for Full Name and DOB (use Shift to select multiple). 44. Drag & drop all the selected field bindings to the profileForm page in the design editor. Page 21 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 45. In the helper dialog change the following control types: - About Me: RichText - Gender: Combo Box - TimeZone: Combo Box 46. Click on OK. Page 22 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 47. Reorder the row contents using drag & drop (in the Outline) to group related fields together. Page 23 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 48. Right click inside a cell in the resulting table and choose to append 3 rows. 49. Drag a Label control (from Core Controls) to the first column in the first additional row and make the Label DOB. 50. Drag a Date Time Picker control (from Core Controls) to the second column in the first additional row. Page 24 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 51. From the Data tab in the Properties dialog, bind the picker to the field DOB and check that the display type is set to Date / Time and the Display format to Date only. 52. Preview the XPage for your control in your browser (note that, although you can complete the form, you can't save it since we don't have action buttons yet). Page 25 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.
    • 5 Summary In this exercise you built the foundation for our sample application and learned about application structure that allows you to easily style your application. You also learned how to create a custom control that has a customizable content area. You will use the control in the sample application. You learned how to display Notes documents in XPages using form properties and simple data binding. Page 26 of 26 COPYRIGHT IBM CORPORATION 2009. ALL RIGHTS RESERVED. IBM ISV & DEVELOPER RELATIONS.