Your SlideShare is downloading. ×
0
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
How to build a simple XPages application - Lotusphere 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to build a simple XPages application - Lotusphere 2010

1,031

Published on

Tim Clark and Matt White. …

Tim Clark and Matt White.
Files downloadable from www.tc-soft.com
A 2 hour presentation on how to create an IBM Lotus XPages application to do record create, read, update and delete.
Also includes how to include Dojo modules.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,031
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SHOW112How to build an XPages applicationfrom start to finishTim Clark | Lotus Business Partner Technical EnablementMatt White | Elguji Software
  • 2. Legal Disclaimers© IBM Corporation 2009. All Rights Reserved.The information contained in this publication is provided for informational purposes only. While efforts were made to verify thecompleteness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind,express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to changeby IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, thispublication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating anywarranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable licenseagreement governing the use of IBM software.References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries inwhich IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’ssole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product orfeature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implyingthat any activities undertaken by you will result in any specific sales, revenue growth or other results.IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino and Lotusphere are trademarks of International Business MachinesCorporation in the United States, other countries, or both.Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.All references to LOANr refer to a fictitious company and are used for illustration purposes only.The information on the new product is intended to outline our general product direction and it should not be relied on inmaking a purchasing decision. The information on the new product is for informational purposes only and may not beincorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation todeliver any material, code or functionality. The development, release, and timing of any features or functionality describedfor our products remains at our sole discretion 2
  • 3. Hi, I’m TimIBMLotus Business Partner Technical Enablementtim_clark@uk.ibm.comhttp://blog.tc-soft.comTwitter : @TimsterC 3
  • 4. Hi, I’m MattElguji SoftwareThe developers of IdeaJam and IQJammatt.white@elguji.comhttp://mattwhite.meTwitter: @mattwhite 4
  • 5. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 5
  • 6. Welcome to our sample applicationLOANr is a browser application that is used by the staff of a movie rentalstore.They can use it to add customers and movies to their database, createrentals and check some statistics of the rentals.It makes use of all the XPages design elements and requires us to thinkabout an IBM® Lotus® Notes® application in a slightly new way.DEMO 6
  • 7. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 7
  • 8. What are XPages?New server task that is part of HTTP As developers who really cares about admin server tasks?An XPage is a JavaTM Server Face JEE ApplicationFrom IBM® Lotus® Domino® Designer 8.5.0 onwards there arethree “main” new design elements: XPages Custom Controls Server Side Script LibrariesAll code is written in JavaScript @Functions are available - (here be dragons around!) Code, commas and case sensitivity are very important Turn on the debugger (we will show how later) 8
  • 9. The XPageClosest match in “classic” Notes is the form But an XPage is just used as a Web interface onto your databaseIs really a container for Custom Controls Generally not much coding is done in the XPage You just drag and drop content into the XPage to be displayed to the browser 9
  • 10. The Custom ControlClosest match in “classic” Notes is the sub formThe real programming with XPages is done in Custom Controls Re-use is keyGenerally you’ll separate function from UI One Custom Control will handle layout Others will handle data binding and business processes 10
  • 11. The Server Side Javascript LibraryThere are now two types of JavaScript Client side – Will run out on the browser Server side – Will run on the serverServer-side JavaScript can do almost everything that LotusScript or Java can do Except for UI classes Always runs in the context of the user executing it You can run agents on the server to execute code as the server rather than the current user. 11
  • 12. What aren’t XPages?They are not a total replacement to every element of web design You can still make use of web agents for things like RSS, JSON etc Login screens for session authentication are still in “classic” DominoA panacea Good design is still worth it’s weight in gold Think about how your application will work Plan for growth, usage etc 12
  • 13. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 13
  • 14. Layout / UILayout Custom Control Editable AreasCSSThemes 14
  • 15. Layout Custom Control In the Domino Designer client; 1, right click on the “Custom Control” (CC) design element 2, select “New Custom Control” 15
  • 16. 1, Name the new CC “cc_container”2, Click OK 16
  • 17. Drag & drop 7 panels from the Container Controls palette onto your new custom control 17
  • 18. 1, In the outline click on the first Panel 2, In the properties for the Panel click in the Name property and name the panel “frame” 3, name the other panels as shown: topLozenge navLozenge contentLozenge header navbar content  It should end up looking like this18
  • 19. 1, Using the Outline (bottom left of the Domino Designer) 2, Drag & drop the Lozenge panels into the frame panel 3, Drop the header into topLozenge 4, Drop navbar into navLozenge 5, Drop content into contentLozenge 6, Be careful as you drag and drop, try to do it in the order above or it is possible that it could get quite confusing. 7, If it all goes wrong then select the Panel in the outline and hit the delete key. Add another Panel and try again. ;o)19
  • 20. 1, click on Root Document in the Outline2, click on the Style property tab3, click on the “Add style sheet...” button 20
  • 21. 1, click on the LS2010style.css 2, click OK21
  • 22. 1, Select the Panel:frame in the Outline 2, Then select the style property tab 3, Pick the correlating style for the Panel. frame = frame topLozenge = lozenge header = header navLozenge = lozenge navbar = navbar contentLozenge = lozenge content = content22
  • 23. It should look like this when you have got this far 23
  • 24. Drag and drop an image control onto the header panel(Its the blue one at the top) 24
  • 25. 1, Drag an Editable Area from the Core Controls palette2, Drop it onto the content panel (2). (Its the white one) 25
  • 26. Theme In our application, we want all of the buttons to be nicely formatted, but we don’t want to have to manually go around and apply formatting or a style to each of them. So we’re going to use a theme to make all buttons into Dojo buttons. 1, From the File menu, select New 2, Then select Theme 26
  • 27. 1, In the dialog, name the theme “loanr”2, OK the dialog 27
  • 28. 1, Set the source XML of the theme to use the pictured XML. This firstly extends the “webstandard” theme which defines a base level of UI for XPages applications. Then we tell XPages that we want to set the dojoType property for each kind of button (Command, Submit and Cancel) to use the dijit.form.Button value. Save and close the theme script_snippets.txt (1)28
  • 29. 1, Open the application properties and set the Application Theme on the XPages tab to use the new “loanr” theme we just created 2, Set the Client validation radio button to “Off”. This will mean all validation is done on the server rather than the client. 3, Check the “Display Default Error Page” box so that we get detailed error messages for any problems we create. 4, Save & Close29
  • 30. Now Open the cc_container custom control30
  • 31. 1, In the All Properties of the custom control, set “dojoParseOnLoad” to be true 2, Now set “dojoTheme” to be true 3, Now add a new “xp:dojoModule” resource31
  • 32. Set the name of the dojoModule to “dijit.form.Button”Save and Close the Custom Control 32
  • 33. 1, Right click on the XPages container 2, Select “New XPage...”33
  • 34. 1, Name the XPage “home” 2, OK the dialog34
  • 35. 1, In the new XPage click and drag the cc_container custom control2, Drop it onto the empty XPage 35
  • 36. 1, It should look like the screen shot below.2, Use the Preview in Browser button to launch the XPage in your web browser. 36
  • 37. It should look like this when you preview it in the browserBut it’s going to look better when we put some content into it 37
  • 38. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 38
  • 39. Data StructureNotes Forms and Views are equivalent to table definitionsForms Still add fields Can use computed fieldsViews Make sure you name columns sensibly Sorting is still required 39
  • 40. Basic data schema 1 1 ∞ ∞ 40
  • 41. Notes Form Definitions 41
  • 42. Customer viewCustomers view Customer Data column Value Formula 42
  • 43. Movies and Rentals viewsMovies view Rentals viewMovie Lookup column formula is;movietitle + "|" + movieid 43
  • 44. Movies by Genre view Genre Column sorting Genre (Sort= Ascending) (Type = Categorized) Movie ID (Sort=Ascending) 44
  • 45. Search viewWe just use this view to display searchWe just use this view to display search results.results The column formatting will be whatThe column formatting will be what you you want to see in the searchwant to see in the search results results custom controlcustom control 45
  • 46. RentalsByMovieId view 46
  • 47. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 47
  • 48. New CustomerOpen the list of Custom Controls and click the New Custom Control ButtonIn the dialog that appears, call the Custom Control “cc_customer” 48
  • 49. In the Custom Control properties, select the Data tab Click the the Add -> Domino Document button49
  • 50. 1, Set the form for the Document data source to be “customer”2, Set the default action to be “Open Document” 50
  • 51. 1, On the Data pane, make sure that the Select Controls button is enabled (it isdisabled by default) 51
  • 52. 1, Now select the highlighted fields and drag them onto the new custom control52
  • 53. 1, In the dialog which appears, set the control type for each of the fields, in this case we just need to set the DateofBirth to be a date time picker 2, Check the Add Messages Control... checkbox to automatically add an error message control 3, Check the “Save these settings...” box to save having to re- do this work for future operations 4, OK the dialog A table of the fields, ready bound will be added to the custom control53
  • 54. 1, Select the First Name field and go to it’s validation properties2, Check the Required Field option and enter the error message which will display if the field is left blank3, Repeat this for the Last Name field 54
  • 55. 1, Select the postcode field 2, Go to the All Properties tab for the field 3, Go to the Data --> Validators section of the All Properties and click the “+” button55
  • 56. 1, Select the “xp:validateConstraint” option 56
  • 57. 1, Get a Regex Expression to validate UK Post Codes from Wikipedia 57
  • 58. 1, Add the Message to the validateConstraint forwhen the validation fails2, Paste the Regex into the Regex field on thevalidateConstraint script_snippets.txt (2) 58
  • 59. 1, Place the mouse cursor into the top right cell of the field table and then right click 2, Select the “Append Column(s)” option 3, In the dialog which appears, select 1 column to append and OK the dialog59
  • 60. 1, Drag and drop a new “Display Error” core control into the cell next to the FirstName field 2, Repeat this for the LastName field 3, Repeat this for the PostCode field60
  • 61. 1, Select the FirstName field and go to it’s all properties 2, Locate the Data --> disableClientSideValidation option and set this to true 3, Repeat steps 1 & 2 for the LastName field 4, Repeat steps 1 & 2 for the PostCode field61
  • 62. 1, Select the Error Messages control 2, Go to the Font properties of the control 3, Make the font bold62
  • 63. 1, Go to the background properties of the control 2, Select the background color button 3, Select Light Yellow and OK the dialog63
  • 64. 1, Select the Style tab of the Errors properties pane2, Click the Export... button 64
  • 65. 1, In the dialog which appears, make sure that all of your custom formatting changes are listed 2, Select the style sheet which the new style will be inserted into 3, Type a class name for the new style “errortext” 4, Check the “Apply this style...” box 5, OK the dialog65
  • 66. 1, Select the first error message control 2, Select the Style properties 3, Set the class to our new “errortext” class we just created66
  • 67. Set the “Show Error Messages for” to bind the control to it’s related field Repeat Steps 1 to 5 for the Last Name Repeat Steps 1 to 5 for the Post Code Save the custom control67
  • 68. 1, Select the dateofbirth field2, Select the data properties tab for the field3, Set the Display format to be “Date Only” 68
  • 69. 1, In the custom control All Properties -> data -> data set the computeWithForm to “onsave” 69
  • 70. cc_actionbar 1, Right click on the Custom Controls container 2, Select to create a “New Custom Control...” 70
  • 71. 1, Name the custom control “cc_actionbar”2, OK the dialog 71
  • 72. Double click the Button Core Control to add a new button to the Custom Control. Repeat this three times.72
  • 73. 1, Select the first button and change it’s label to “Edit”2, Select the Visible property and make it a ComputedValue 73
  • 74. In the dialog enter the code shown to decide when to show the Edit button (i.e. when the document is in “Edit Mode”) All of the custom controls that edit data use a data binding called “document1” so we can refer to that herescript_snippets.txt (3) 74
  • 75. Go to the Events tab of the button properties. In the onClick event, click the “Add Action...” button75
  • 76. 1, Set the action of the Button to “Change Document Mode” 2, Set the Document Mode to “Edit Mode” 3, OK the dialog76
  • 77. 1, Select the second new button2, Set the label for the button to be “Save”3, Make the button type “Submit”4, Set the Visible property to “Compute Value...” 77
  • 78. Set the Visible script to use the pictured code script_snippets.txt (4)78
  • 79. 1, Select the third new button2, Set the label to “Cancel”3, Set the button type to “Cancel”Save and close the Custom Control 79
  • 80. Open the cc_customer Custom ControlSelect the cc_actionbar custom control and drag it to the top of thecustom control.Save and Close 80
  • 81. 1, Right click on the XPages container 2, Select “New XPage...” In the dialog which appears, name the XPage “customer”81
  • 82. 1, Select the “cc_container” custom control from the Custom Controls sidebar2, Drag and drop the custom control onto the new XPage 82
  • 83. 1, Select the “cc_customer” custom control2, Drag and drop the custom control inside the editable area of the cc_containercontrol (the green dot)Save and preview the XPage.Test the validation. 83
  • 84. New Movie From the File menu select new Custom Control Name the new custom control “cc_movie” In the new Custom Control, select the Data tab of the properties pane. Then click the Add --> Domino Document button 84
  • 85. In the Form drop down, select “movie” 85
  • 86. In the Default Action, select “Open Document” Select the highlighted fields from the Data pane86
  • 87. 1, In the data binding dialog, select the control types and set the Labels for each field 2, OK the dialog87
  • 88. 1, Select the Error Messages Control 2, Select the style properties 3, Click the Add style sheet to page... button88
  • 89. Select the “LS2010.css” style sheet from the dialog which appears.89
  • 90. Select the “errortext” class to apply to the Error Messages control90
  • 91. 1, Select the movietitle field 2, Go to the Validation properties for the field and make it required91
  • 92. 1, Place the cursor in the top right table cell 2, Right click and select “Append Column (s)...”92
  • 93. Set the number of columns to add to 1 Add an Error Message control into the top right table cell Set the style to be .errortext93
  • 94. In the Error Message properties, bind the Error Message control to the movietitle field94
  • 95. 1, Select the movietitle field 2, Go to All Properties for the field 3, Set the disableClientSideValidation for the field to true95
  • 96. 1, Select the certificate field 2, Go to the Values properties tab for the field 3, Click the “Add Formula Item...” button96
  • 97. 1, Enter the pictured formula into the Script Editor window 2, OK the dialog script_snippets.txt (5)97
  • 98. 1, Select the genre field 2, Go to the Values properties tab 3, Click the “Add Formula Item...” button98
  • 99. 1, In the dialog which appears, enter the pictured code 2, OK the dialog script_snippets.txt (6)99
  • 100. Delete the coverimage field which was added to the custom control as we want to replace it with a file upload control100
  • 101. Select the File Upload control and drag it into the table next to the Cover Image label 101
  • 102. 1, Select the File Upload control and go to the properties pane. 2, Select the Visible property and set it to “Compute Value...”102
  • 103. In the Script Editor dialog, enter the pictured code and OK the dialog. script_snippets.txt (7)103
  • 104. Set the data binding of the File Upload control to use the coverimage field104
  • 105. 1, Select the dateofrelease field 2, Select the data properties tab for the field 3, Set the Display format to be “Date Only” Drag the cc_actionbar to the top of the custom control Save and close the custom control105
  • 106. 1, In the custom control All Properties -> data -> data set the computeWithForm to “onsave” 106
  • 107. 1, Right click on the XPages container 2, Select “New XPage...”107
  • 108. 1, Name the XPage “movie” 2, OK the dialog108
  • 109. 1, Select the cc_container custom control2, Drag the custom control onto the new XPage 109
  • 110. 1, Select the cc_movie custom control2, Drag the custom control into the editable area of cc_containerSave and close the XPage and preview in browser 110
  • 111. New Rental Create a new custom control and call it cc_rental Drag and drop the cc_actionbar onto the custom control 1, click on the background of the custom control 2, select data 3 & 4, add a document binding 5, select rental as the form 6, use create document as the default action 111
  • 112. 1, Make sure the add fields dialog is enabled 2, Select and drag all of the fields onto the custom control 3, Change Rental Customer ID and Rental Movie ID to be a Combo Box112
  • 113. 1, select rentalcustomerid field 2, on the “Values” tab click Add Item 3, type “Select Customer” and single space in the value 4, click add Formula Item 5, use the formula as shown in the diagramscript_snippets.txt (8) 113
  • 114. 1, select rentalmovieid field and click the Values tab 2, click Add Item and type “Pick a Movie” and a single space in the value 3, click Add Formula Item114
  • 115. Enter the formula shown on the left script_snippets.txt (9)115
  • 116. 1, click on the loandate field 2, select the Data tab 3, change the display format to “Date Only”116
  • 117. 1, select the returned field, right click and select delete2, click and drag a Check Box control to position 3 117
  • 118. Change the label to “Returned?”118
  • 119. 1, on the data tab, select document1 and Bind to returned 2, type “yes” into Value when checked 3, type “no” into Value when unchecked119
  • 120. 1, select the rentalcustomerid field 2, on the All Properties tab find data/ validators and click the “+” button. 3, from the list select xp:validateExpression120
  • 121. 1, in the expression click the diamond and select Compute value 2, use the formula shown in the Script Editor 3, in the message property type “You must pick a customer” script_snippets.txt (10)121
  • 122. Repeat this process for the rentalmovieid field but use the formula shown. The message should be “You must select a movie” script_snippets.txt (10)122
  • 123. 1, select the Display Errors control 2, click the Add style sheet to page button 3, select the LS2010style.css 4, click OK123
  • 124. Pick the .errortext style and it should change the Error Messages control to look like below.124
  • 125. Now drag a Panel control onto the page underneath cc_actionbarName the panel “customerdetails” 125
  • 126. Into that Panel drag and drop a Table control 126
  • 127. We need 2 rows and 1 columns for this table.127
  • 128. Drag a Label control into the cell on the left of the table. Type “Customer Details” into the Label property128
  • 129. 1, drag a Computed field into the cell on the right of the table. 2, in the value change the Bind data using to be JavaScript129
  • 130. Use the javascript on the left to get and display the customers details script_snippets.txt (12)130
  • 131. On the computed field set the Content type to be HTML131
  • 132. In the All Properties of the customerdetails Panel set the Styling -> style property to float: right; script_snippets.txt (13)132
  • 133. 1, In the custom control All Properties -> data -> data set the computeWithForm to “onsave” 133
  • 134. The magic that makes this bit all work is partial page refresh Select the rentalcustomerid field and then.... On the events panel find the onchange event in the “Select & Change” section Click on the Partial Update radio button and then the “Select Element” button Pick the customerdetails that you named earlier Click the checkbox to make sure that we do not try and validate the entries Save and close the custom control134
  • 135. 1, Right click on the XPages container 2, Select “New XPage...”135
  • 136. 1, Name the XPage “rental” 2, OK the dialog136
  • 137. 1, Select the cc_container custom control2, Drag the custom control onto the new XPage 137
  • 138. 1, Select the cc_rental custom control2, Drag the custom control into the editable area of cc_containerSave the XPage and preview in browser 138
  • 139. It should look like this when you are done.139
  • 140. Recent Rentals View 1, Open the File menu 2, Choose New, Custom Control 140
  • 141. 1, Name the new custom control “cc_recentrentals”2, OK the dialog 141
  • 142. 1, In the Data properties for the custom control, click the Add Button 2, Then select “Domino View”142
  • 143. 1, Set the view properties to use the “rentals” view 143
  • 144. Select a new View control from the Container Controls pane and drag it onto the custom control 144
  • 145. 1, In the dialog which appears, select the “view1” data binding which we just created 2, Check the columns which we want to display (all of them in this case) 3, OK the dialog145
  • 146. 1, Select the Movie Rented column in the view and right click 2, On the menu, select Insert Column146
  • 147. 1, Select the whole view and go to it’s All Properties 2, The data, var property should be set to “rentalRow”147
  • 148. 1, Select the new column we just added and go to it’s all properties. In the Data, value property set it to use a computed value.148
  • 149. 1, Enter the pictured formula in the dialog which appears. We’re doing a lookup from inside the view here! 2, OK the dialog script_snippets.txt (14)149
  • 150. 1, Select the “returned” column in the view and right click 2, On the menu, select Insert Column150
  • 151. 1, In the data, value property for the new column, set it to use acomputed value 151
  • 152. 1, Enter the pictured code in the dialog which appears, as we’re doing a second DbLookup from the same view2, OK the dialog script_snippets.txt (15) 152
  • 153. 1,In the view display properties, set the Maximum rows per page to 10 Save and close the custom control153
  • 154. 1, Right click on the Custom Controls container 2, Select “New Custom Control...”154
  • 155. 1, Enter “cc_home” as the name for the custom control2, OK the dialog 155
  • 156. Click and drag a new “Tabbed Panel” Container Control onto the custom control 156
  • 157. 1, Right click on the new tabbed panel2, Select “Append Tab” from the menuRepeat until there are five tabs 157
  • 158. 1, Select the first tab using the outline pane2, Set the Label for the first tab to “Recent Rentals” 158
  • 159. Repeat the process for each of the tabs so that we end up with the tabscalled:1, Recent Rentals2, Customers3, Movies4, Rental Stats5, Movies By Genre 159
  • 160. 1, Select the Recent Rentals tab and then click and drag the “cc_recentrentals” custom control2, Drop it inside the Recent Rentals tab as picturedSave and close the custom control*We come back to the other tabs later. 160
  • 161. 1, Open the “home” XPage and select cc_home from the custom controls pane on the right2, Drag and drop the control into the editable area of cc_container (the green dot)Save and Close and preview homeNotice the extra columns we added 161
  • 162. Other Views 1, Right click on the Custom Controls container 2, Select new custom control 162
  • 163. 1, Name the new custom control “cc_vwCustomer”2, OK the dialog 163
  • 164. 1, In the custom control properties, go to the Data tab and click the Add, Domino View button164
  • 165. 1, In the data properties, set the View name to “customers” 165
  • 166. From the Container Controls pane, click and drag a new View control onto the custom control 1, Set the view to show data from the view data binding we just set up OK the dialog166
  • 167. 1, Select the first column in the view 2, Set the first column to “Show values in this column as links” 3, Make it open the documents in read mode 4, Also add a checkbox next to each row (we’ll use this later to delete documents) Save and Close the Custom Control In the properties of the customer Notes Form, set the “Display XPage Instead” property to use the customer XPage.167
  • 168. Right click on the Custom Controls container and select “New Custom Control...”168
  • 169. 1, Call the new control “cc_vwMovie”2, OK the dialog 169
  • 170. 1, In the custom control properties, go to the Data tab and click the “Add” button 2, Then select the “Domino View” option170
  • 171. 1, In the “view1” data source, set the view name to “movies” 171
  • 172. Select and drag a new View control onto the custom control from the container controls pane1, In the data source dialog,select “view1” as the datasource and then uncheckthe Movie Lookup columnas we don’t need to displayit.OK the dialog. 172
  • 173. 1, Select the first column of the view 2, Check the “Show values in this column as links” box 3, Make the Documents open in read mode 4, Set the column to also display a check box which we can use for deletions later on Save and close the custom control In the properties of the movie Notes Form, set the “Display XPage Instead” property to use the movie XPage.173
  • 174. Open the cc_home custom control1, Select the Customers tab in the outline and then pick the cc_vwCustomers custom control from the pane on the right2, Drag and drop the control inside the Customers tab of the tabbed panel 174
  • 175. 1, Select the Movies tab in the outline and then pick the cc_vwMovies customcontrol from the pane on the right2, Drag and drop the control inside the Movies tab of the tabbed panelSave and close the custom control. 175
  • 176. cc_navbar 1, Right click on the Custom Controls container 2, Select to create a “New Custom Control...” 1, Name the custom control “cc_navbar” 2, OK the dialog 176
  • 177. Click and add five buttons, next to each other on the custom control177
  • 178. 1, Select the first button2, Change it’s label to “Home”3, Repeat the process for each button so that their labels are: “New Rental”, “New Customer”, “New Movie” and “Delete Selected”Save the custom control 178
  • 179. 1, Select the Home button 2, Go to the events for the button 3, In the onClick event, click the Add Action button179
  • 180. 1, Set the action to Open the Home Page2, Make sure the checkbox is checked, to not validate or update data 180
  • 181. 1, Select the New Rental button2, Go to the events for the button3, In the onClick event, click the Add Action button 181
  • 182. 1, Set the action to Open Page 2, Set the page to open to “rental” 3, Set the Target Document to “New Document” 4, OK the dialog182
  • 183. 1, Select the New Customer button and switch to the Events tab2, Click the Add Action... button 183
  • 184. 1, In the dialog which appears, set the action to “Open Page” 2, Set the name of the page to open to “customer” 3, Set the target document to be a “New Document” 4, OK the dialog184
  • 185. 1, Select the New Movie button and switch to the Events tab2, Click the Add Action... button 185
  • 186. 1, In the dialog which appears, set the action to “Open Page” 2, Set the name of the page to open to “movie” 3, Set the target document to “New Document” 4, OK the dialog186
  • 187. 1, Switch to the New Rental button properties2, Select the Visible property3, Set it to Computed Value 187
  • 188. 1, In the dialog which appears, enter the pictured code 2, OK the dialog Repeat this process of setting the visibility for the New Custom, New Movie and Delete Selected buttons Save the Custom Control script_snippets.txt (16)188
  • 189. Now we need to set the names of each view in our three view custom controls 1, Open cc_recentrentals and select the view control 2, Set it’s name to “rentalsview”, Save and Close 1, Open cc_vwCustomers and select the view control 2, Set it’s name to “customersview”, Save and Close 1, Open cc_vwMovies and select the view control 2, Set it’s name to “moviesview”, Save and Close 189
  • 190. 1, Back in cc_navbar, select the “Delete Selected” button2, Switch to the events tab3, We want to insert a script in here, so switch to “Script Editor” and click the Open Script Dialog button 190
  • 191. 1, Enter the code from the image in the Script Editor dialog. It uses the“getSelectedIds” method for each of the views that we enabled the checkboxes for.This returns an array of Note IDs that we can loop through to delete thedocuments.2, OK the dialogSave and close the custom control script_snippets.txt (17) 191
  • 192. Open the cc_home custom control1, Select the first tab of the tabbed panel using the Outline pane2, In the onClick event of the tab, add a script which sets the sessionScope.TabIDto “tabPanel1”Repeat this process for each of the other tabs, incrementing the “tabPaneln” as yougoThis is needed sothe delete button incc_navbar knowswhich view to deletedocuments from script_snippets.txt (18) 192
  • 193. 1, Open the home XPage and make sure that the XPage is selected in the outline. Select the Events tab for the XPage. 2, Find the Page -> beforePageLoad action 3, Select the script editor 4, Add the code shown. 5, On the Properties tab for the XPage Repeat this for the following XPages, replacing “home” with the relevant page name. movie, customer, rental & search 6, Set the Next page (success) to “home” and Next page (fail) to “Same Page” 7, Repeat for movie, customer and rental. (not search) 8, Save and Close each page.script_snippets.txt (19) 193
  • 194. 1, Open the cc_container custom control and select the cc_navbar control from the right pane2, Drag the control into the navbar panel on the cc_container control3, The new buttons should now be inside the navbar panel as picturedSave and close the custom controlNow test that navigation is working and that the deletions work as well 194
  • 195. Repeating Repeats 1, Right click on the Custom Controls container 2, Select the “New Custom Control...” option 195
  • 196. 1, Name the new custom control “cc_moviesbygenre”2, OK the dialog 196
  • 197. 1, Place the cursor in the custom control2, Select and drag a new repeat Container Control3, Drop the repeat control onto the Custom Control 197
  • 198. 1, Select the new repeat control and open it’s properties 2, Set the Collection Name to “genre” 3, Set the Index Name to “genreindex”198
  • 199. 1, Set the repeat iteration to Javascript and then click the Open Script Dialog button 199
  • 200. 1, Enter the pictured code into the Script Editor dialog 2, OK the Dialog script_snippets.txt (20)200
  • 201. 1, Select and drag a new computed field from the core controls pane2, Drop the new field inside the repeat control 201
  • 202. 1, Select the new computed field and bring up it’s Properties.202
  • 203. 1, Set the name of the computed field to “genre”203
  • 204. 1, Select the value properties tab for the field 2, Set the data binding to use Javascript 3, Set the value of the Javascript to “genre” to use the variable we created in the repeat control204
  • 205. 1, Switch to the source XML view of the custom control2, Add <h1> tags around the computed field we just created 205
  • 206. 1, Switch back to the design view of the custom control2, Note that the genre field is now formatted as an <h1> block3, Select a new panel from the Container Controls Pane4, Drag and drop it next to the genre computed field 206
  • 207. 1, Select the new panel 2, In the properties, name it “movies”207
  • 208. 1, Select a new repeat control from the container controls2, Drag and drop it inside the movies panel 208
  • 209. 1, In the new repeat properties set the Collection name to “movie”2, Set the Index Name to “movieindex”3, Set the Iteration to Javascript and then click the Script Editor dialog button script_snippets.txt (21) 209
  • 210. 1, Enter the pictured script (which makes use of the first repeat’s variable name to perform a DBLookup) 2, OK the dialog210
  • 211. 1, Drag a new Panel inside the second repeat2, In the panel properties set the name to “moviedetails” 211
  • 212. 1, Select the Style properties for the panel 2, Set the Class name to “moviedetails”212
  • 213. 1, Select a new link from the Core Controls pane2, Drag and drop it inside the panel we just added 213
  • 214. 1, Select the new link’s properties 2, Name the link “movietitlelink” 3, Select the label and set it to be a computed value214
  • 215. 1, In the Script Editor dialog which appears, enter the pictured code2, OK the dialog script_snippets.txt (22) 215
  • 216. 1, Select the Events tab for the link 2, In the onClick event click the “Add Action...” button216
  • 217. 1, In the dialog which appears, set the action to be “Open Page” 2, Set the page to open to be “movie” 3, Set the Target Document to “Open Document” 4, In the Document ID, select to compute the value217
  • 218. 1, In the dialog which appears, enter the pictured code which get the UNID of the movie document which we are currently iterating over 2, OK the dialog script_snippets.txt (23)218
  • 219. 1, Note that the Document ID is now “Computed” 2, OK the dialog219
  • 220. 1, Switch to the source XML view of the custom control2, Wrap the link we just created with an <h2> tag3, Close the <h2> tag 220
  • 221. 1, Drag a new Panel inside the second repeat2, Drop it after the movietitlelink we just created 221
  • 222. 1, Select a new label from the Core Controls Pane2, Drop it inside the new panel we just created 222
  • 223. 1, Note where the new label control is2, Drag another new label control next to it3, Select a new computed field and drag it in between the two new labels4, Drag on another computed field after the second label. 223
  • 224. We should end up with the following:1, New Label2, New Computed Field3, New Label4, New Computed Field 224
  • 225. 1, Select the first new label 2, Set the Label to be “Certificate:”225
  • 226. 1, Select the first new computed field 2, Set the value to use Javascript Binding 3, Set the Javacript to use the pictured code which makes use of the second repeat variable “movie” script_snippets.txt (24)226
  • 227. 1, Select the second new label 2, Set the label to be “Date of Release:”227
  • 228. 1, Select the second new computed field 2, Set the value of the field to use Javascript data binding 3, Set the javascript to use the pictured code script_snippets.txt (24)228
  • 229. 1, Switch to the source XML view of the custom control2, Wrap the first label / computed field pair in <span> tags3, Wrap the second label / computed field pair in <span> tags 229
  • 230. Save and close the custom control Add cc_moviesbygenre to cc_home into the Movies By Genre tab panel Preview the home XPage and switch to the Movies By Genre tab Note the “categorization” of the Genres and then each movie in the Genre formatted properly230
  • 231. 231
  • 232. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Sunday Bonus Section ;o)  Questions  Appendices 232
  • 233. Cool Stuff - Lightbox 1, Open the cc_movie custom control1, Select and drag a new Repeatcontrol from the ContainerControls pane2, Drop it below the main datatable 233
  • 234. 1, Go to the repeat control properties 2, Set the iteration to use Javascript and then select the Script Editor window button1, In the script editor enter the picturedcode which gets a list of attachment namesfrom the document2, OK the dialog script_snippets.txt (29) 234
  • 235. 1, Set the collection name to “imagename” so that we can refer to it later1, Select and drag a computed field fromthe Core Controls pane2, Drop it inside the repeat control 235
  • 236. 1, Select the new computed field 2, Name it “image” 3, Set its content type to HTML1, Select the Value properties tab2, Set the Data binding to Javascript3, Click the Script Editor button 236
  • 237. 1, Enter the pictured code which builds an <a> tag with a URL to the imagename repeat variable 2, OK the dialog1, Add a line break after the computedfield inside the repeat control script_snippets.txt (30) 237
  • 238. 1, Select the Custom Control “All Properties” pane 2, In the resources section add a new xp:dojoModule resource1, Call the dojoModule name“dojox.image.Lightbox” 238
  • 239. 1, Select the Custom Control “Resources” tab 2, Click the “Add Style Sheet...” button1, Select the “lighbox.css”2, OK the dialog boxSave and close the Custom ControlPreview the home.xsp and open a movie 239
  • 240. Cool Stuff - Charts 1, Right click on the script libraries container 2, Select the New Script Library option 1, Enter the name as “jsPieChart” 2, Set the type of the Script Library to be Javascript 3, OK the Dialog 240
  • 241. Set the content of the script library to use the pictured codeThe save and close it 1, Right click on the custom controls container 2, Select the New Custom Control option script_snippets.txt (31) 241
  • 242. 1, Set the name of the custom control to be “cc_rentalstats” 2, OK the dialog1, Switch to the source XML view ofthe custom control2, Enter the <h2> and <div> htmlpictured script_snippets.txt (32) 242
  • 243. 1, In the custom control properties, select Resources and then click the “Add Script Library” button1, From the dialog, select the “jsPieChart” librarywhich we just created2, OK the dialog 243
  • 244. 1, Still in the custom control properties, go to All Properties and locate the “resources” section 2, Click the “+” button and select the xp:dojoModule option1, In the new properties whichappear, enter the name“dojox.charting.Chart2D” 1, In the source XML of the custom control you should see the dojoModule XML tags appear 244
  • 245. 1, Copy and paste the <xp:dojoModule> elements 6 times and change the name property for each to match the screenshot 2, Copy and past the <xp:script> element once and set the src property to “/movies.js”Movies.js is a “classic” page designelement which renders a JSONJavascript object to the browserThis already exists in theLOANr-START.nsfSave and close the Custom Control script_snippets.txt (33) 245
  • 246. 1, Open the “cc_home” custom control1, Select the Rental Stats tab in theoutline and then drag the“cc_rentalstats” custom controlfrom the Controls pane into this tab.(2)Save and close the custom controlPreview home.xsp in your browser 246
  • 247. Preview the home XPage, on the Rental Stats tag you should see a pie chart247
  • 248. Cool Stuff - Searching 1, Right click on the custom controls container 2, Select “New Custom Control”1, Name the custom control “cc_search”2, OK the new custom control dialog 248
  • 249. 1, Add some title text: “Search results for:” 2, Select and Drag a new Computed Field 3, Drop the new field to the right of the title text1, Select the computed field2, Switch to the Value properties tab3, Set the binding to use “Advanced”4, Use a Scoped Variable5, Use a Session Scope Parameter6, Set the variable name to be “query” 249
  • 250. 1, Select a new View container control 2, Drag and drop it to just below the search results title1, In the dialog which appears, select to show the datafrom a Domino View2, Select the view called “search”3, We want all the columns so just OK the dialog 250
  • 251. 1, With the new view selected, go to it’s All Properties tab 2, In the data -> data -> search property select the “Compute Value” option1, In the script editor dialog, enter “sessionScope.query”2, OK the dialog script_snippets.txt (26) 251
  • 252. 1, Select the Description column of the view control 2, Check the “Show values in this column as links” checkbox and make it open in read mode Save and Close the Custom Control1, Right click on theXPages container2, Select “New XPage...” 1, Enter the Name as “search” 2, OK the dialog 252
  • 253. 1, Select the cc_container custom control from the controls pane on the right 2, Drag and drop it onto the new XPage1, Select the cc_search customcontrol from the controls paneon the right2, Drag and drop it into theeditable area (the green dot) ofthe cc_container customcontrolSave and Close the XPage 253
  • 254. 1, Open the cc_navbar custom control1, Switch to the Source XML view2, Create a new <div> before theexisting content. Give it an id of“search” and style it to float right,as pictured 254
  • 255. 1, Select the Edit Box core control2, Drag it into the div you just created (make sure it is inside using the outline pane) 1, Name the new Edit Box “searchbox” 255
  • 256. 1, Select the data properties tab2, Change the binding to Advanced3, Set the binding to use a Scoped Variable - Session Scope4, In the variable name enter “query”5, Set the default value to be “Search...” 1, Select the events tab 2, Select the onblur focus event 3, Select the client side element of the event 4, Switch to Script Editor mode script_snippets.txt (27) 5, Insert the pictured code 256
  • 257. 1, Select the onfocus event2, Select the client side version of the event3, Switch to the script editor for the event4, Insert the pictured code 1, Select the Button Core Control 2, Click and Drag it to the right of the searchbox field we just added script_snippets.txt (28) 257
  • 258. 1, Set the label of the new button to “Go!” 1, Select the events tab for the button 2, In the onclick event, click the “Add Action” button 258
  • 259. 1, Set the action to be “Open Page” 2, Select the name of the page to open to be “search” 3, OK the dialog Now save and test the search function.1, Enter a search term and click“Go!”2, The search results are displayed 259
  • 260. Other XPages SessionsTitle Session ID Speakers Philippe RiandAD106 XPages Just Keep Getting Better Eamon Muldoon Steve CastledineAD107 Enhance Your Existing Applications With XPages Stephan Wissel Martin DonnellyAD108 XPages In The IBM Lotus Notes Client - A Deep Dive Teressa Monahan Mark GarganAD109 XPages Performance & Scalability Tony McGuckin Philippe RiandAD110 Unleash The Power Of XPages Maire Kehoe Harnessing The Power Of Server-Side JavaScript and Other Tim TripconyAd111 Advanced XPages Techniques Stephan Wissel Declan LynchBP207 Make Your XPages Apps “Pop!” With CSS And Themes David Leedy 260
  • 261. IBM RedBook about XPages - http://tiny.cc/XPagesRedBook 261
  • 262. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 262
  • 263. Don’t forget your fill out your evals:SHOW112 - How to build an XPages application from start to finish Tim Clark Matt White tim_clark@uk.ibm.com matt.white@elguji.com http://blog.tc-soft.com http://mattwhite.me Twitter : @TimsterC Twitter : @mattwhite 263
  • 264. Agenda  Welcome to LOANr  What are XPages?  Layout and UI  Data Structure  Data CRUD  Questions  Appendices 264
  • 265. APPENDIXINSTALL & CONFIGURATIONIn this section, youll find instructions for setting up your environment to use the demo files weve provided for youYou will also find features that are in the LOANr-FINAL.nsf that we did not have time to show you at Lotusphere 2010These are the cool bits we really wanted to get to, but just didnt have time. They are here for your reference. 265
  • 266. Install & Configuration (i)•Install IBM® Lotus® Notes® 8.5.1 Client, Designer & Administrator•Go and download LOANr.zip from ftp://lotusphere.turtleweb.com •login: show112 pw: ls2010•Expand out the zip file and place the LOANr-START.nsf & LOANr-FINAL.nsf files into your Notes data directory e.g. ..notesdataLS2010•Place the script_snippets.txt in an easy to find directory, you might need itmore than you think. 266
  • 267. Install & Configuration (iii) Open IBM Lotus Domino Designer and open LOANr-START.nsf 267
  • 268. Install & Configuration (ii)Open the Administrator client and sign the databases 268

×