Submit Search
Upload
XPages101 - Building an XPages app - Lotusphere 2011
•
0 likes
•
1,427 views
Tim Clark
Follow
Matt White and Tim Clark
Read less
Read more
Technology
Business
Report
Share
Report
Share
1 of 233
Recommended
XPages Blast - Lotusphere 2012
XPages Blast - Lotusphere 2012
Tim Clark
XPages Blast - Lotusphere 2013
XPages Blast - Lotusphere 2013
Tim Clark
1 app 2 developers 3 servers
1 app 2 developers 3 servers
Mark Myers
Harness the power of XPages in Lotus Domino
Harness the power of XPages in Lotus Domino
dominion
The future of web development write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
Entwicker camp2007 blackberry-workshop
Entwicker camp2007 blackberry-workshop
Bill Buchan
DotNetNuke
DotNetNuke
Ambati Sreedhar
Yes, It's Number One it's TOTP!
Yes, It's Number One it's TOTP!
Keith Brooks
Recommended
XPages Blast - Lotusphere 2012
XPages Blast - Lotusphere 2012
Tim Clark
XPages Blast - Lotusphere 2013
XPages Blast - Lotusphere 2013
Tim Clark
1 app 2 developers 3 servers
1 app 2 developers 3 servers
Mark Myers
Harness the power of XPages in Lotus Domino
Harness the power of XPages in Lotus Domino
dominion
The future of web development write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
Entwicker camp2007 blackberry-workshop
Entwicker camp2007 blackberry-workshop
Bill Buchan
DotNetNuke
DotNetNuke
Ambati Sreedhar
Yes, It's Number One it's TOTP!
Yes, It's Number One it's TOTP!
Keith Brooks
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Mark Leusink
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
Kathy Brown
Custom theme creation websphere portal 8.5
Custom theme creation websphere portal 8.5
michele buccarello
The Silence of the Installers
The Silence of the Installers
Klaus Bild
Ibm connections docs 2 install guide
Ibm connections docs 2 install guide
Roberto Boccadoro
Html5
Html5
Nisa Soomro
Nsc 2013 06-17 - random rants on 2013
Nsc 2013 06-17 - random rants on 2013
Mikael Svenson
ICONUK 2014 Connections Migration Tips and Tricks
ICONUK 2014 Connections Migration Tips and Tricks
Victor Toal
Migration:Impossible ... Not so
Migration:Impossible ... Not so
ICON UK EVENTS Limited
ICONUK 2015 - Installing Connections Add-Ons Tips and Tricks
ICONUK 2015 - Installing Connections Add-Ons Tips and Tricks
Victor Toal
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
Klaus Bild
Html5
Html5
Bukhtawar Umbreen
Twelve ways to make your apps suck less
Twelve ways to make your apps suck less
Fons Sonnemans
Our take on Domino 10 - a Ytria webinar
Our take on Domino 10 - a Ytria webinar
Benedek Menesi
Open Mic IBM connections and IBM Verse on premise integration
Open Mic IBM connections and IBM Verse on premise integration
jayeshpar2006
( 2 ) Office 2007 Create A Portal
( 2 ) Office 2007 Create A Portal
LiquidHub
Developing and Deploying Windows 10 Apps
Developing and Deploying Windows 10 Apps
Fons Sonnemans
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
MWLUG 2015 - IBM Connections - Installing the Free "Extras" and Integrating w...
MWLUG 2015 - IBM Connections - Installing the Free "Extras" and Integrating w...
Victor Toal
IconUS 2016 conference - Connections Administration Skills
IconUS 2016 conference - Connections Administration Skills
Victor Toal
AD116 XPages Extension Library: Making Application Development Even Easier
AD116 XPages Extension Library: Making Application Development Even Easier
pdhannan
XPages Blast - Lotusphere 2011
XPages Blast - Lotusphere 2011
Tim Clark
More Related Content
What's hot
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Mark Leusink
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
Kathy Brown
Custom theme creation websphere portal 8.5
Custom theme creation websphere portal 8.5
michele buccarello
The Silence of the Installers
The Silence of the Installers
Klaus Bild
Ibm connections docs 2 install guide
Ibm connections docs 2 install guide
Roberto Boccadoro
Html5
Html5
Nisa Soomro
Nsc 2013 06-17 - random rants on 2013
Nsc 2013 06-17 - random rants on 2013
Mikael Svenson
ICONUK 2014 Connections Migration Tips and Tricks
ICONUK 2014 Connections Migration Tips and Tricks
Victor Toal
Migration:Impossible ... Not so
Migration:Impossible ... Not so
ICON UK EVENTS Limited
ICONUK 2015 - Installing Connections Add-Ons Tips and Tricks
ICONUK 2015 - Installing Connections Add-Ons Tips and Tricks
Victor Toal
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
Klaus Bild
Html5
Html5
Bukhtawar Umbreen
Twelve ways to make your apps suck less
Twelve ways to make your apps suck less
Fons Sonnemans
Our take on Domino 10 - a Ytria webinar
Our take on Domino 10 - a Ytria webinar
Benedek Menesi
Open Mic IBM connections and IBM Verse on premise integration
Open Mic IBM connections and IBM Verse on premise integration
jayeshpar2006
( 2 ) Office 2007 Create A Portal
( 2 ) Office 2007 Create A Portal
LiquidHub
Developing and Deploying Windows 10 Apps
Developing and Deploying Windows 10 Apps
Fons Sonnemans
Html5 tutorial for beginners
Html5 tutorial for beginners
Singsys Pte Ltd
MWLUG 2015 - IBM Connections - Installing the Free "Extras" and Integrating w...
MWLUG 2015 - IBM Connections - Installing the Free "Extras" and Integrating w...
Victor Toal
IconUS 2016 conference - Connections Administration Skills
IconUS 2016 conference - Connections Administration Skills
Victor Toal
What's hot
(20)
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
SHOW102 XPages: Still No Experience Necessary IBM Connect 2014
Custom theme creation websphere portal 8.5
Custom theme creation websphere portal 8.5
The Silence of the Installers
The Silence of the Installers
Ibm connections docs 2 install guide
Ibm connections docs 2 install guide
Html5
Html5
Nsc 2013 06-17 - random rants on 2013
Nsc 2013 06-17 - random rants on 2013
ICONUK 2014 Connections Migration Tips and Tricks
ICONUK 2014 Connections Migration Tips and Tricks
Migration:Impossible ... Not so
Migration:Impossible ... Not so
ICONUK 2015 - Installing Connections Add-Ons Tips and Tricks
ICONUK 2015 - Installing Connections Add-Ons Tips and Tricks
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
SHOW301 - Make Your IBM Connections Deployment Your Own: Customize It!
Html5
Html5
Twelve ways to make your apps suck less
Twelve ways to make your apps suck less
Our take on Domino 10 - a Ytria webinar
Our take on Domino 10 - a Ytria webinar
Open Mic IBM connections and IBM Verse on premise integration
Open Mic IBM connections and IBM Verse on premise integration
( 2 ) Office 2007 Create A Portal
( 2 ) Office 2007 Create A Portal
Developing and Deploying Windows 10 Apps
Developing and Deploying Windows 10 Apps
Html5 tutorial for beginners
Html5 tutorial for beginners
MWLUG 2015 - IBM Connections - Installing the Free "Extras" and Integrating w...
MWLUG 2015 - IBM Connections - Installing the Free "Extras" and Integrating w...
IconUS 2016 conference - Connections Administration Skills
IconUS 2016 conference - Connections Administration Skills
Similar to XPages101 - Building an XPages app - Lotusphere 2011
AD116 XPages Extension Library: Making Application Development Even Easier
AD116 XPages Extension Library: Making Application Development Even Easier
pdhannan
XPages Blast - Lotusphere 2011
XPages Blast - Lotusphere 2011
Tim Clark
An Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller Pattern
Teamstudio
WordPress for eCommerce - Dukapress, Cart66
WordPress for eCommerce - Dukapress, Cart66
Tech Liminal
Windows Phone 8 - 2 Designing WP8 Applications
Windows Phone 8 - 2 Designing WP8 Applications
Oliver Scheer
Creating Accessible Web Pages Using Dreamweaver Mx 2004
Creating Accessible Web Pages Using Dreamweaver Mx 2004
brighteyes
iPhone Programming [2/17] : Introduction to iOS Programming
iPhone Programming [2/17] : Introduction to iOS Programming
IMC Institute
W1.pptx
W1.pptx
MohamedNowfeek1
Global HR New Employee Experience - Landing Pages
Global HR New Employee Experience - Landing Pages
Casey Martin
Global HR & New Employee Experience - Landing Pages
Global HR & New Employee Experience - Landing Pages
Casey Martin
Dnn for beginners
Dnn for beginners
vinoth kumar
What’s new in XAML and Tooling for Windows 8.1
What’s new in XAML and Tooling for Windows 8.1
Fons Sonnemans
Web browser architecture
Web browser architecture
Nguyen Quang
Dreamweaver
Dreamweaver
Jacqueline Wanner
Mobile CMS made simple
Mobile CMS made simple
Jonathan Schmid
Web designer
Web designer
Manish Kumar
OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020
Howard Greenberg
AD101: IBM Domino Application Development Futures
AD101: IBM Domino Application Development Futures
Eamon Muldoon
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Inductive Automation
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Shyamala Prayaga
Similar to XPages101 - Building an XPages app - Lotusphere 2011
(20)
AD116 XPages Extension Library: Making Application Development Even Easier
AD116 XPages Extension Library: Making Application Development Even Easier
XPages Blast - Lotusphere 2011
XPages Blast - Lotusphere 2011
An Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller Pattern
WordPress for eCommerce - Dukapress, Cart66
WordPress for eCommerce - Dukapress, Cart66
Windows Phone 8 - 2 Designing WP8 Applications
Windows Phone 8 - 2 Designing WP8 Applications
Creating Accessible Web Pages Using Dreamweaver Mx 2004
Creating Accessible Web Pages Using Dreamweaver Mx 2004
iPhone Programming [2/17] : Introduction to iOS Programming
iPhone Programming [2/17] : Introduction to iOS Programming
W1.pptx
W1.pptx
Global HR New Employee Experience - Landing Pages
Global HR New Employee Experience - Landing Pages
Global HR & New Employee Experience - Landing Pages
Global HR & New Employee Experience - Landing Pages
Dnn for beginners
Dnn for beginners
What’s new in XAML and Tooling for Windows 8.1
What’s new in XAML and Tooling for Windows 8.1
Web browser architecture
Web browser architecture
Dreamweaver
Dreamweaver
Mobile CMS made simple
Mobile CMS made simple
Web designer
Web designer
OpenNTF Webinar, October 2020
OpenNTF Webinar, October 2020
AD101: IBM Domino Application Development Futures
AD101: IBM Domino Application Development Futures
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Adobe Flex - Developing Rich Internet Application Workshop Day 2
Recently uploaded
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Roshan Dwivedi
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Katpro Technologies
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
Recently uploaded
(20)
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
XPages101 - Building an XPages app - Lotusphere 2011
1.
© 2011 IBM
Corporation SHOW106 XPages101 - How to build a simple XPages application Matt White | Lead Developer | Elguji Software Tim Clark | Tech Sales | IBM Lotus
2.
© 2011 IBM
Corporation 2 Agenda ● Introductions ● Our Sample App ● The starting point ● The end point ● Adding a UI to XPages using OneUI ● Creating our views ● Creating the data entry screens ● Navigation ● Making use of the Extension Library ● Questions
3.
© 2011 IBM
Corporation Matt White • Lead Developer at Elguji Software • IdeaJam • IQJam • LinkJam • I run XPages101.net - an XPages online training site • Independent consultant working mainly with XPages and Java development projects with the London Developer Co-op 3
4.
© 2011 IBM
Corporation Tim Clark 4 • Lotus Software Technical Sales • 17 years @ Lotus/IBM • Smartsuite --> Notes Support • Business Partner Technical Enablement • I co-host the X Cast with Paul Withers and David Leedy • Podcast all about XPages • www.thexcast.net • Helped create the XPages tutorial on Developer Works - Domino Designer Wiki
5.
© 2011 IBM
Corporation How this presentation works • DON’T PANIC! • There are a *lot* of slides, but they are for you to download and use next week when you go home: • http://bit.ly/ls11_show106 • Slides will stay on the right screen, the left screen will show us coding live • To save lots of typing, we have prepared: • The starting point database • The finishing point database • Code Snippets • The slide deck itself • Everything we are presenting is based on standard 8.5.2 IBM Lotus Domino Designer and IBM Lotus Domino • Except that we will also be using the Extension Library from OpenNTF which we will talk about later on • DONT’ PANIC! 5
6.
© 2011 IBM
Corporation Our Sample App - LOANr • We run a video rental business (VHS only of course!) • So we have Customers, Movies and Rentals to keep track of • It’s been run as an IBM Lotus Notes client app for ages • But we want to upgrade • DEMO 6
7.
© 2011 IBM
Corporation Get Started • Copy the databases from the download into ...notesdata directory on your client or the ...dominodata directory on your Domino server • Open Domino Designer • From the File menu choose the Open --> Lotus Notes Application 7
8.
• From the
Open Dialog, locate the databases which you copied to your data directory • Open the starting point database © 2011 IBM Corporation Get Started 8
9.
© 2011 IBM
Corporation Get Started • The database will be opened with the database navigator on the left: 9
10.
© 2011 IBM
Corporation Layout and UI • Right click on the Custom Controls section in the database navigator • Select New Custom Control from the menu • In the dialog which appears name the custom control “layout” • OK the dialog 10
11.
© 2011 IBM
Corporation Layout and UI • In the new custom control, switch to the Source view 11
12.
© 2011 IBM
Corporation Layout and UI • Paste in the Script Snippet 1 which makes up the HTML structure for our site • <div id="lotusFrame"> <div id="lotusBanner"></div> <div id="lotusTitleBar"> <div class="lotusRightCorner"> <div class="lotusInner"> <div id="container_search"> <!-- Search Goes Here --> </div> <span class="clear"></span> </div> </div> </div> <div id="lotusPlaceBar"> <div class="lotusRightCorner"> <div class="lotusInner"> </div> </div> </div> <div id="lotusMain"> <div id="lotusColLeft"> <div class="lotusMenu" role="menu"> <div class="lotusBottomCorner"> <div class="lotusInner"> <ul class="lotusIcons"> <!-- Menu Options Go Here --> </ul> </div> </div> </div> <span class="clear"></span> </div> <div id="lotusContent"> <div id="container_formcontent"> <!-- Content goes here --> </div> </div> </div> <div id="lotusfooter"> <div id="lotusFooter" class="lotusFooter"> ¬¨¬© Tim Clark and Matt White 2011 </div> </div> </div> 12 Script Snippet 1
13.
© 2011 IBM
Corporation Layout and UI • Switch back into Design Mode • Using the Outline pane, locate the lotusInner div inside the title bar div 13
14.
© 2011 IBM
Corporation Layout and UI • In the controls pane, select the image control and drag it inside the div we just located 14
15.
© 2011 IBM
Corporation Layout and UI • A dialog box will appear after dragging in the image control • Select the LOANR-tightcrop-transbg.png image from the list of images in the database • OK the dialog 15
16.
© 2011 IBM
Corporation Layout and UI • Using the Outline pane, make sure that the image is located in the correct position just inside the div 16
17.
© 2011 IBM
Corporation Layout and UI • Select the image we just added using the outline pane • Set the height property of the image to 42 pixels 17
18.
© 2011 IBM
Corporation Layout and UI • Switch to the All Properties tab of the image properties and locate the style property. • You will see the 42px we just added, edit the style and add “; padding: 3px;” to it 18
19.
© 2011 IBM
Corporation Layout and UI • Now using the Outline pane, location the lotusInner div inside the lotusPlaceBar div 19
20.
© 2011 IBM
Corporation Layout and UI • After locating that div, go to the Custom Control properties and then the Property Definition tab • Click the new Property button • Set the name of the new property to “pageTitle” 20
21.
© 2011 IBM
Corporation Layout and UI • Now in the controls pane, select the Computed Field control • Drag the control inside the div we just selected 21
22.
© 2011 IBM
Corporation Layout and UI • Set the name of the computed field to pageTitle 22
23.
© 2011 IBM
Corporation Layout and UI • In the Value tab of the properties of the computed field set the Bind Data selected to use “JavaScript” • Click the code window button next to the text box 23
24.
© 2011 IBM
Corporation Layout and UI • In the dialog which appears, use the Global Objects library to locate the custom property which we just created • Expand compositeData and then double click on the pageTitle entry • The line of code will be automatically inserted into the code window for you • OK the dialog 24
25.
© 2011 IBM
Corporation Layout and UI • In the All Properties of the computed field, locate the style property • Set the style to use script snippet 2 as pictured float: left; font-size: 1.4em; font-weight: normal; line-height: 2em; padding: 2px 0pt 0pt 20px; • Set the styleClass property to “title” 25 Script Snippet 2
26.
© 2011 IBM
Corporation Layout and UI • Locate the Basics tagName property and set this to “span” 26
27.
© 2011 IBM
Corporation Layout and UI • In the source view of the custom control locate the menu options section of the HTML • Add the pictured <li> tags to the HTML 27
28.
© 2011 IBM
Corporation Layout and UI • Select the Link control from the Controls pane • Drag a new link inside the <li> tags we just created • Notice the mouse cursor indicating where the control will be dropped 28
29.
© 2011 IBM
Corporation Layout and UI • In the Link properties set the name of the link to homelink • Set the label to Home • Set the link type to “Open Page” • Set the xPage option to “home” 29
30.
© 2011 IBM
Corporation Layout and UI • In the link value property, set the value to “/home.xsp” • Using the same technique, drag an image control inside the <xp:link> tags we just created 30
31.
© 2011 IBM
Corporation Layout and UI • In the dialog which appears when you drag the image control onto the page select “Use an image placeholder” • OK the dialog 31
32.
© 2011 IBM
Corporation Layout and UI • In the source XML set the url property of the image to use (Script Snippet 3): “/.ibmxspres/domino/oneuiv2/images/iconHome16.png” 32 Script Snippet 3
33.
© 2011 IBM
Corporation Layout and UI • Switch to the Design view of the custom control • Use the outline pane to locate the container_formcontent div inside the lotusContent div in the HTML of the custom control 33
34.
© 2011 IBM
Corporation Layout and UI • Once the div is located, select the Editable Area control from the Control pane • Drag the Editable Area onto the custom control into the div we just located 34
35.
© 2011 IBM
Corporation Layout and UI • The Editable Area should look like this now: 35
36.
© 2011 IBM
Corporation Layout and UI • Save the Custom Control • Go to the XPages section of the database navigator and right click on the heading • Select to create a new XPage • In the dialog which appears enter the name of the XPage as “home” • OK the dialog 36
37.
© 2011 IBM
Corporation Layout and UI • In the XPage, select the layout custom control from the Controls pane (on the right hand side of the screen) • Drag the layout control onto the XPage so it looks like this: 37
38.
© 2011 IBM
Corporation Layout and UI • In the properties of the custom control on the XPage, go to the Custom Properties section • Set the pageTitle to “Home” • Save the XPage 38
39.
© 2011 IBM
Corporation Layout and UI • Go to the Resources Themes section of the database navigator • Right click and select the new Theme option • In the dialog which appears, name the theme “blue” • OK the dialog 39
40.
© 2011 IBM
Corporation Layout and UI • Make sure you are in Source mode for the Theme • In the XML which appears, set the “extends” property to “oneui” • Save the theme 40
41.
© 2011 IBM
Corporation Layout and UI • Open the Application Properties design element • Go to the XPages tab • Set the Application Theme to “blue” • Save the Application properties 41
42.
© 2011 IBM
Corporation Layout and UI • Go back to the home XPage • Select the Preview in web browser button on the toolbar • You should see something like this: 42
43.
© 2011 IBM
Corporation Movies View • To see some of the data we need to recreate the database views • Create a new custom control called “view_movies” 43
44.
© 2011 IBM
Corporation • Now drag and drop a view control onto the blank custom control 44 Movies View
45.
© 2011 IBM
Corporation • Pick the view you want to show and the columns • Here we want the “Movies” view and all the columns • OK the dialog 45 Movies View
46.
© 2011 IBM
Corporation Movies View • Using the outline select the view and in Properties select Display • Set the number of rows to display to be 5 46
47.
© 2011 IBM
Corporation Movies View • Again using the outline, select viewColumn1 and set the values to be links • This makes the values clickable and it uses the stored form to decide which form to open • Save the custom control 47
48.
© 2011 IBM
Corporation Movies View • Informational (this has already been done in the database) • The Notes form has already been configured to say that when viewed on the web use a specified XPage • This time it’s “movie” 48
49.
© 2011 IBM
Corporation Movies View • Now we need to create an XPage to use the custom control on • Give it a name of “movies” • OK the dialog 49
50.
© 2011 IBM
Corporation Movies View • Drag the layout custom control onto the XPage • Now drag the view_movies custom control onto the facet_1 green spot 50
51.
© 2011 IBM
Corporation Movies View • Edit the “layout” Custom Properties • Set the pageTitle to “Movies” • Save the XPage 51
52.
© 2011 IBM
Corporation Movies View • Now that the we have created the XPage, we can go back to the custom control and create a button to make a new movie document. • Open the Custom Control “view_movies” that you have just been working on • drag a button to the top of the custom control 52
53.
© 2011 IBM
Corporation Movies View • Change the button Label to be “Create Movie” 53
54.
© 2011 IBM
Corporation Movies View • On the Events tab, click the Add Action button 54
55.
© 2011 IBM
Corporation Movies View • Action = “Open Page” • Name of page to open = “movie” (you will have to type this, we’ll create it later) • Target document = “New Document” • Click OK • Save the Custom Control 55
56.
© 2011 IBM
Corporation Movies View • in the source code view • change the name to be “/movie.xsp” 56
57.
© 2011 IBM
Corporation Movies View • Preview the XPage in the browser and it should look like this (without all the menu options) 57
58.
© 2011 IBM
Corporation Customers View • Another view but a different style of creating it • Create a custom control called “view_customers” • OK the dialog 58
59.
© 2011 IBM
Corporation Customers View • This view is going to use a repeat panel • Drag a repeat control onto the blank custom control 59
60.
© 2011 IBM
Corporation Customers View • Now we need to get some data into the repeat control • The properties panel shows us a simple data binding so we will set that to the “Customers” view. • OK the dialog 60
61.
© 2011 IBM
Corporation Customers View • We also need to give the data set a name so that we can use it later on • Call the collection name “rowData” 61
62.
© 2011 IBM
Corporation Customers View • Now drag and drop a panel control into the repeat control 62
63.
© 2011 IBM
Corporation Customers View • Into that panel we are going to drop 1 link and 2 computed fields 63
64.
© 2011 IBM
Corporation Customers View • For the link control we are going to compute the label. This will be the first name field from the document on the current row of the repeat control. • In the JavaScript editor enter (Script Snippet 4): rowData.getColumnValue(“firstname”) • OK the dialog 64 Script Snippet 4
65.
© 2011 IBM
Corporation Customers View • To make the first name do something we add an OnClick Event to it • A simple action to open the corresponding document • In the Events tab click “Add Action” • Set the Action to be “Open Page” • Name of page to “customer” (you have to type this in) • Target should be “Open document” • Compute the Document ID 65
66.
© 2011 IBM
Corporation Customers View • Type the following into the JavaScript editor rowData.getUniversalID() • Here we are using rowData again to get the contents of the current item in the repeat control • OK the dialog 66 Script Snippet 5
67.
© 2011 IBM
Corporation Customers View • We have not created the customer XPage yet so we need to make sure the action XML is properly formed or it will break later on • Switch to the source mode and edit the action we just created • Make the name=”customer” read like the example below: • name=”/customer.xsp” • Switch back to the design mode 67
68.
© 2011 IBM
Corporation Customers View • Now for the 2 computed fields • They are both simple data bindings to the fields “lastname” and “postcode” • N.B. we are using the rowData as the data source • Space out the fields as you like and put a separator between the two computed fields • Also need to add a Line Feed at the end of the row, or the data will appear all on 1 line • Save the Custom Control 68
69.
© 2011 IBM
Corporation Customers View • Create a new XPage called “customers” • OK the dialog 69
70.
© 2011 IBM
Corporation Customers View • First, drag on the layout custom control • Next, drag the view_customers custom control onto the facet_1 green spot so that it looks like the image on the right 70
71.
© 2011 IBM
Corporation Customers View • Edit the “layout” Custom Properties • Set the pageTitle to “Customers” • Save the XPage 71
72.
© 2011 IBM
Corporation Customers View • Preview in a browser and it should look like this 72
73.
© 2011 IBM
Corporation Rentals View • Create a new custom control called “view_rentals” 73
74.
© 2011 IBM
Corporation Rentals View • Drag a View control onto the custom control 74
75.
© 2011 IBM
Corporation Rentals View • Select the “Rentals” view • De-select the returned column • OK the dialog 75
76.
© 2011 IBM
Corporation Rentals View • Select the view in the outline and then from All Properties set the Var to be “rentalRow” (this is like we did for the repeat panel) • Also set the Maximum rows to be 10 76
77.
© 2011 IBM
Corporation Rentals View • Select the first column and set the values to be links 77
78.
© 2011 IBM
Corporation Rentals View • In this view we are going to add 2 columns to do some @dblookups in • Right click on the first column and click “Append Column” • Right click in the second column and click “Insert Column” 78
79.
© 2011 IBM
Corporation Rentals View • Click in the new second column and set the Data to be Computed Value • Use the JavaScript Editor button to enter the @dblookup 79
80.
© 2011 IBM
Corporation Rentals View • Enter the following @functions to lookup the rentalcustomerid and find the customer name from the lookup view: @Left(@DbLookup(@DbName(),"lookupcustomer",rentalRow.getColumnValue ("Rental Customer"),5), "|"); • Take special care of the upper and lower case in @functions • OK the dialog 80 Script Snippet 6
81.
© 2011 IBM
Corporation Rentals View • Enter the following @function into the 2nd new column Data Computed Value • @Left(@DbLookup(@DbName(),"lookupmovies",rentalRow.getColumnValue ("Movie rented"),3), "|"); • This @function returns the movie name • OK the dialog • Save the Custom Control 81 Script Snippet 7
82.
© 2011 IBM
Corporation Rentals View • Create a new “rentals” XPage • Drag on the “layout” custom control • Add the “view_rentals” custom control to the facet_1 green spot • OK the dialog 82
83.
© 2011 IBM
Corporation Rentals View • Edit the “layout” Custom Properties • Set the pageTitle to “Rentals” • Save the XPage 83
84.
© 2011 IBM
Corporation Rentals View • It should look like this when you preview the XPage 84
85.
© 2011 IBM
Corporation Customer Form • Right click on the Custom Controls section in the database navigator • Select “New Custom Control” from the menu • In the dialog which appears, call the new custom control “form_customer” 85
86.
© 2011 IBM
Corporation Customer Form • In the Custom Controls properties pane, go to the Data tab • Click the “Add” button • Select “Domino Document” from the list 86
87.
© 2011 IBM
Corporation Customer Form • Set the Form of the Data Source to “customer” • Leave the Data Source Name as “document1” • Set the “Run Form Validation” option to “On document save” 87
88.
© 2011 IBM
Corporation Customer Form • Select the data palette tab in Designer and make sure the “Select Controls Dialog Box” is enabled • Now select the following fields from the Data source list: – firstname – lastname – Address1 – Address2 – Address3 – AddrCity – postcode – country – telephone – email – dateofbirth • Drag the fields onto the custom control body
89.
© 2011 IBM
Corporation Customer Form • The Select Data Bound Controls dialog will appear • Set the country field to use a combo box • Make sure Date of birth is set to be a Date Time Picker • Edit the field labels to add spaces between words • Make sure the “Add Submit button to generated code” checkbox is checked • Make sure the “Add messages control to generated code” checkbox is checked • OK the dialog
90.
© 2011 IBM
Corporation Customer Form • The list of fields will be added to the custom control in a table • Select the first name field and add a required validation message • Select the last name field and add a required validation message 90
91.
© 2011 IBM
Corporation Customer Form • Select the country field and go to the Values tab of the properties pane • Click the Add Formula Item button • In the dialog box which appears enter: • @DbLookup(@DbName(), “vwRefData”, “Countries”, 2) • OK the Dialog box 91 Script Snippet 8
92.
© 2011 IBM
Corporation Customer Form • Now Click the “Add Item” button • In the label of the new item type “Please Select a Country” • In the value, type a single space “ “ 92
93.
© 2011 IBM
Corporation Customer Form • Now use the list ordering button to move the new item to the top of the list 93
94.
© 2011 IBM
Corporation Customer Form • Open the All Properties tab for the country field • Go to the Data Validators section • Click the “+” button and select “xp:validateExpression” from the list 94
95.
© 2011 IBM
Corporation Customer Form • In the message property of the new validator, set the value to “Please select a country” 95
96.
© 2011 IBM
Corporation Customer Form • Click the blue diamond next to the expression property and select “Compute Value” 96
97.
© 2011 IBM
Corporation Customer Form • In the dialog which appears enter the pictured code (Script Snippet 9) • OK the dialog 97 Script Snippet 9
98.
© 2011 IBM
Corporation Customer Form • Select the postcode field • Go to the All Properties of the field on the properties pane • Navigate to the Data Validators section • Click the “+” button and select the “xp:validateConstraint” option 98
99.
© 2011 IBM
Corporation Customer Form • In the regex property set the value to: (GIR 0AA|[A-PR-UWYZ]([0-9]{1,2}|([A-HK-Y][0-9]|[A-HK-Y][0-9]([0-9]| [ABEHMNPRV-Y]))|[0-9][A-HJKPS-UW]) [0-9][ABD-HJLNP-UW-Z]{2}) http://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom#Validation • In the message property set the value to “Please enter a valid post code” 99 Script Snippet 10
100.
© 2011 IBM
Corporation Customer Form • From the Core Control panel, select the Button control • Drag a new button onto the custom control next to the Submit button • Set the label of the new button to “Cancel” 100
101.
© 2011 IBM
Corporation Customer Form • Change the button type to “Cancel” 101
102.
© 2011 IBM
Corporation Customer Form • Select the Submit button and click the blue diamond next to the Visible property • Select “Compute Value” from the list • In the dialog which appears enter: document1.isEditable() • OK the dialog box 102 Script Snippet 11
103.
© 2011 IBM
Corporation Customer Form • Repeat the process for the Cancel button 103
104.
© 2011 IBM
Corporation Customer Form • Select and drag another new button from the Core Controls list • Drop the new button next to the Cancel button • Set the label of the new button to “Edit” 104
105.
© 2011 IBM
Corporation Customer Form • Select the blue diamond menu from the Visible property of the Edit button • Select Compute Value from the menu • In the dialog which appears enter: !document1.isEditable() • OK the dialog 105 Script Snippet 12
106.
© 2011 IBM
Corporation Customer Form • Switch to the events tab of the Edit button • In the Server tab of the onClick event, click the “Add Action” button • In the dialog which appears, set the action to “Change Document Mode” • Then set the Document Mode to “Edit Mode” • OK the dialog • Save and close the custom control 106
107.
© 2011 IBM
Corporation Customer Form • Right click on the XPages section of the database navigator and select the New XPage option • In the dialog which appears, name the XPage “customer” • OK the dialog 107
108.
© 2011 IBM
Corporation Customer Form • Drag the layout custom control from the Custom Controls section on the right onto the XPage 108
109.
© 2011 IBM
Corporation Customer Form • Drag the form_customer custom control into the space where there is a green dot (the editable area) • Set the pageTitle property to “Customer” • Your XPage should look something like this now: 109
110.
© 2011 IBM
Corporation Customer Form • In the XPage properties, set the next page (success or cancel) property to “home” • Save and preview the XPage in the browser 110
111.
© 2011 IBM
Corporation Customer Form • In the browser, try and save the XPage and notice that the validation is running on the client side 111
112.
© 2011 IBM
Corporation Customer Form • Switch back to Domino Designer and open the Application Properties design element • Open the XPages tab and set the Client Validation to “Off” • Save the Properties 112
113.
© 2011 IBM
Corporation Customer Form • Test the validation again and notice it is now run on the server side • Test the post code validation • Try TW999 ZQT (it’s invalid) • Try TW18 3AG (it’s valid) 113
114.
© 2011 IBM
Corporation Rental Form • In the database navigator, right click the Custom Controls section • Select “New Custom Control” from the menu • In the dialog, enter “form_rental” • OK the dialog 114
115.
© 2011 IBM
Corporation Rental Form • In the Data tab of the custom control properties • Click the Add... Domino Document option • Set the form of the data binding to “rental” • Set the Run Form Validation option to “On Document Save” 115
116.
© 2011 IBM
Corporation Rental Form • In the Data Source pane select the document1 data source • Drag all the fields onto the Custom Control • In the dialog which appears set the Rental Customer to be a Combo Box • Set the Rental Movie to be a Combo Box • Check the Add Submit button option • Check the Add Messages option • OK the dialog 116
117.
© 2011 IBM
Corporation Rental Form • In the Values Properties section of the Customer Combo Box • Click the Add Item button • Set the label of the new item to “Please Select a Customer” • Set the value of the new item to “ ” (a single space) 117
118.
© 2011 IBM
Corporation Rental Form • Click the “Add Formula Item...” button • In the dialog which appears enter: (Script Snippet xxx) @DbColumn(@DbName(), “LookupCustomer”, 5).sort(); • OK the dialog 118 Script Snippet 13
119.
© 2011 IBM
Corporation Rental Form • In the Values Properties for the Movie Combo Box • Click the Add Item button • Set the Label of the new item to “Please Select a Movie” • Set the Value of the new item to “ “ 119
120.
© 2011 IBM
Corporation Rental Form • Click the Add Formula Item button • In the dialog which appears enter: (Script Snippet xxx) @DbColumn(@DbName(), “LookupMovies”, 3).sort(); • OK the dialog 120 Script Snippet 14
121.
© 2011 IBM
Corporation Rental Form • In the loan date control go to the Data properties • Click the blue diamond control next to the default value field and select “Compute value” • In the dialog which appears enter: (Script Snippet 15) @Today(); • OK the dialog 121 Script Snippet 15
122.
© 2011 IBM
Corporation Rental Form • Delete the returned edit box control • In it’s place drag in a new Check Box control • Set the label of the new control to “Returned” 122
123.
© 2011 IBM
Corporation Rental Form • In the data properties for the control • Set the Data source to “document1” • Set the Bind To to “returned” • Set the value when checked to “yes” • Set the value when uncheck to “no” • Save the Custom Control 123
124.
© 2011 IBM
Corporation Rental Form • Select the Panel control from the Control Pane • Drag a new Panel onto the top of the custom control (above the existing content) 124
125.
© 2011 IBM
Corporation Rental Form • In the All Properties section of the new panel • Go to styling style • Enter “float: right;” • The panel should move to the right of the screen 125
126.
© 2011 IBM
Corporation Rental Form • In the Data Properties of the panel • Click the Add... Domino Document button • Set the form of the data binding to “customer” • Set the Default Action to “Open Document” • Click the Compute Value option for the Document ID property 126
127.
© 2011 IBM
Corporation Rental Form • In the dialog which appears enter the pictured code (script snippet 16) • OK the dialog 127 Script Snippet 16
128.
© 2011 IBM
Corporation Rental Form • In the All Properties section of the Panel • Go to the data data dominoDocument section • Set the ignoreRequestParams property to true 128
129.
© 2011 IBM
Corporation Rental Form • In the Data Source pane select document2 from the data source list • Select all of the fields • Drag them inside the panel we just added to the custom control • In the dialog which appears make sure that we do not add a submit button or error messages • OK the dialog 129
130.
© 2011 IBM
Corporation Rental Form • The Custom Control should now look like this: 130
131.
© 2011 IBM
Corporation Rental Form • Select the panel we just added using the outline control • Set the name of the panel to “customerdetailspanel” 131
132.
© 2011 IBM
Corporation Rental Form • Select the rentalcustomerid field • Go to the onChange event and set the server side event to use the Script Editor • Enter the following code (Script Snippet 17): document1.getDocument(true); 132 Script Snippet 17
133.
© 2011 IBM
Corporation Rental Form • In the Server Options section of the onChange event • Set the options to Partial Update • Click the Select Element button • Choose “customerdetailspanel” from the list • OK the dialog 133
134.
© 2011 IBM
Corporation Rental Form • Select the table inside the customerdetailspanel • In the table properties, set the Visible property to be computed • In the dialog which appears enter: !document2.isNewNote() • OK the dialog • Save the Custom Control 134 Script Snippet 18
135.
© 2011 IBM
Corporation Rental Form • In the XPages section of the database navigator, right click • Select “New XPage” from the menu • Name the new XPage “rental” • OK the dialog 135
136.
© 2011 IBM
Corporation Rental Form • Drag the layout custom control onto the XPage • Drag the form_rental custom control into the editable area of the XPage (the green dot) • In the Custom Properties of the layout custom control set the pageTitle property to “Rental” 136
137.
© 2011 IBM
Corporation Rental Form • In the XPage Properties set the Next Page to open “home” • Save the XPage • Preview it in the browser 137
138.
© 2011 IBM
Corporation Rental Form • When the new rental is loaded, the customer details are hidden • When a customer is selected the details appear on the right side of the screen 138
139.
© 2011 IBM
Corporation Movie Form • Create a new custom control called “form_movie” 139
140.
© 2011 IBM
Corporation Movie Form • Create a data binding to the Domino Document “Movie” • Set the validation to run for “Both” (This allows the computed when composed fields to function) 140
141.
© 2011 IBM
Corporation Movie Form • Drag the fields shown from the data pane and drop them onto the blank custom control 141
142.
© 2011 IBM
Corporation Movie Form • Edit the Labels to be as highlighted in yellow • Change the controls for the Certificate and Genre to be combo boxes • Change the control for Cover image to be an editbox (This is going to be deleted anyway) • Add the submit button check mark • Finally add the error messages control check mark • Click OK 142
143.
© 2011 IBM
Corporation Movie Form • Select the movieid1 Edit Box from the outline • Set it to be “read only” 143
144.
© 2011 IBM
Corporation Movie Form • In the Values for the “certificate” field click Add Formula Item and use the following JavaScript: (Script Snippet 19) @DbLookup(@DbName(),"vwRefData","Certificate",2) • Also for the Values for the “genre” field click Add Formula Item and use the JavaScript below: (Script Snippet 20) @DbLookup(@DbName(),"vwRefData","Genre",2) 144 Script Snippet 19 & 20
145.
© 2011 IBM
Corporation Movie Form • To make the “Coverimage” fields behave correctly we need to first delete the editbox we used to start with. 145
146.
© 2011 IBM
Corporation Movie Form • In it’s place we drag and drop a “File Upload” control • We need to tell the control what data it is working against, so we select the Data tab of the Properties panel and set the data source to “document1” • Bind it to the “coverimage” field 146
147.
© 2011 IBM
Corporation Movie Form • As we only want to see the upload control in when we are in edit mode, we set the visibility of the control using the following JavaScript: (Script Snippet 21) document1.isEditable() • OK the dialog 147 Script Snippet 21
148.
© 2011 IBM
Corporation Movie Form • We also want to be able to download the image files so we also add a File Download control in the same table cell 148
149.
© 2011 IBM
Corporation • We also need to bind the File Download control to the “coverimage” field • On the Data panel for the File Download control • Data source = “document1” • Bind to = “coverimage” 149
150.
© 2011 IBM
Corporation Movie Form • As we only want to see this control when we are in read mode, we again set the visibility of the control with the following JavaScript: (Script Snippet 22) !document1.isEditable() • OK the dialog 150 Script Snippet 22
151.
© 2011 IBM
Corporation Movie Form • Now drag 2 buttons onto the custom control just after the Submit button • Label them “Cancel” and “Edit” 151
152.
© 2011 IBM
Corporation Movie Form • For the Cancel button, set the type to be “Cancel” 152 Cancel
153.
© 2011 IBM
Corporation Movie Form • The Edit button has to have an On-Click Event to trigger it’s action • Click on the Event tab and then Add Action • Add a simple action as shown below to change the document mode to “Edit Mode” 153
154.
© 2011 IBM
Corporation Movie Form • Set the visibility of the buttons to be as follows: • Submit and Cancel • document1.isEditable() • Edit • !document1.isEditable() • The Submit and Cancel buttons will only show in edit mode and the Edit button will only show in read mode 154 Script Snippet 23 & 24
155.
© 2011 IBM
Corporation Movie Form • Now right click anywhere inside the Coverimage row and “Insert Row Below” 155
156.
© 2011 IBM
Corporation Movie Form • Into this new row, drag a Repeat control into the right side cell 156
157.
© 2011 IBM
Corporation Movie Form • Set the data binding for the repeat control to be the following JavaScript: (Script Snippet 25) document1.getItemValueArray(“imagenames”) • Set the Collection name to “imagename” 157 Script Snippet 25
158.
© 2011 IBM
Corporation Movie Form • Drag a Computed Field control into the Repeat control 158
159.
© 2011 IBM
Corporation Movie Form • Set the content type of the computed field to “HTML” 159
160.
© 2011 IBM
Corporation Movie Form • To get the Computed field to display the filenames with a properly formed URL we set the Value of the Computed Field to be the following JavaScript: (Script Snippet 26) var url = "/" + @ReplaceSubstring(database.getFilePath(), "", "/") + "/0/" + document1.getDocument().getUniversalID(); url += "/$FILE/" + escape(imagename); return "<a dojoType="dojox.image.Lightbox" group="group1" title="" + imagename + "" href="" + url + "">" + imagename + "</a><br />" 160 Script Snippet 26
161.
© 2011 IBM
Corporation Movie Form • We also need to add the relevant dojo controls to the custom control • Select the Custom Control from the outline and click on Resources • Add a Dojo Module named “dojox.image.Lightbox” 161
162.
© 2011 IBM
Corporation Movie Form • We also need a style sheet but need to do it from the XML source • Switch to Source mode • Click on the “Dojo Module Resource” in the outline • Add the following line to the XML: (Script Snippet 27) <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/image/resources/Lightbox.css"></xp:styleSheet> 162 Script Snippet 27
163.
© 2011 IBM
Corporation Movie Form • In the All Properties of the Custom control we need to set 2 last properties • dojoParseOnLoad = “true” • dojoTheme = “true” • Save the custom control 163
164.
© 2011 IBM
Corporation Movie Form • Create a new XPage called “movie” 164
165.
© 2011 IBM
Corporation Movie Form • In the XPage Properties set the Next Page to open “home” 165
166.
© 2011 IBM
Corporation Movie Form • Drag and drop the “layout” custom control onto it • Drag the “form_movie” custom control onto the facet_1 green spot • Save the XPage and Preview. 166
167.
© 2011 IBM
Corporation Movie Form • in Edit mode 167
168.
© 2011 IBM
Corporation Movie Form • In Read mode • To get here change the url to ../movies.xsp and pick a movie 168
169.
© 2011 IBM
Corporation Movie Form • Clicking on an image file in the repeat control 169
170.
© 2011 IBM
Corporation Navigation • Open the layout custom control • Switch to the Source mode • The highlighted text is a menu entry • Copy the highlighted text to the clipboard 170
171.
© 2011 IBM
Corporation Navigation • Paste this under the existing entry (the screen shot shows it three times) • Edit the bits in yellow to match your application 171 Script Snippet 28
172.
© 2011 IBM
Corporation Navigation • To make it easy for you copy the script snippet for the menus. Don’t worry about the last three options, they come next. ;o) • Script Snippet 28 • Save the custom control and preview the home XPage 172 Script Snippet 28
173.
© 2011 IBM
Corporation Install Extension Library • To install the Extension Library just follow the instructions from the OpenNTF.org download - http://extlib.openntf.org • If you want to preview without having a local server installed then you will need to copy the eclipse directory from • ...notesdataworkspaceapplications • to • ...notesdatadominoworkspaceapplications 173
174.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Right click on the Custom Controls section of the Database Navigator • Set the name of the custom control to be “form_editdialog” 174
175.
© 2011 IBM
Corporation Edit Document in a Dialog Box • In the data properties tab of the custom control • Click the Add Domino View button • Set the view binding to use the “LookupCustomer” view 175
176.
© 2011 IBM
Corporation Edit Document in a Dialog Box • From the Controls pane, select the Repeat control • Drag a new Repeat control onto the Custom Control • Set the Repeat control to use the view1 data source • Set the collection name of the repeat control to “rowData” 176
177.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Select the Panel control from the Controls pane • Drag a new Panel control inside the repeat control on the custom control • Set the ID of the panel to “customerdetails” 177
178.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Select the Computed Field control from the controls pane • Drag a new computed field inside the panel which we just added 178
179.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Set the Value properties page to bind the computed field to the “firstname” field on the rowData data source 179
180.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Add another computed field next to the one which we just added • Set the data binding for this field to use the “lastname” field on the rowData data source 180
181.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Now from the Extension Library section of the controls pane • Drag a new Dialog onto the custom control next to the two computed fields we just added 181
182.
© 2011 IBM
Corporation Edit Document in a Dialog Box • In the All Properties panel for the dialog box • Set the title property to “Edit Customer” 182
183.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Switch to the source mode of the custom control • Set the id of the dialog control to “inplacedialog 183
184.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Now add a new Link control in between the dialog box which we just added and the last of the computed text fields • Set it’s label to “Edit Customer” 184
185.
© 2011 IBM
Corporation Edit Document in a Dialog Box • In the events tab of the link control go to the Client Side settings for the onClick event • Add the following code to the onClick event: (Script Snippet 29) XSP.openDialog(‘#{id:inplacedialog}’); 185 Script Snippet 29
186.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Now add a new Panel control inside the Dialog box control we added 186
187.
© 2011 IBM
Corporation Edit Document in a Dialog Box • In the data properties of the Panel control • Add a new document data binding using the Form “customer” 187
188.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Change the default action of the document data binding to be “Edit Document” • Then compute the Document ID property of the data binding • In the dialog which appears enter: (Script Snippet 30) rowData.getDocument().getUniversalID() • OK the dialog 188 Script Snippet 30
189.
© 2011 IBM
Corporation Edit Document in a Dialog Box • In the data fields pane which appears for the new document binding • Select the first name and last name fields and drag them onto the custom control inside the panel which we just added • OK the dialog if it appears 189
190.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Switch back to the Design view of the custom control • Select a cell in the table which we just added • Right click and select “Append Rows” • Add one new row to the table 190
191.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Drag a new button control into the right hand cell of the row which we just added to the table 191
192.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Set the label of the new button to “Save” 192
193.
© 2011 IBM
Corporation Edit Document in a Dialog Box • In the onClick event of the button, click the “Add Action” button • Set the action to be “Save Document” • OK the dialog Box 193
194.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Add another event by clicking the “Add Action” button • Set the action to be “Execute Script” • Enter the pictured code in the window (Script Snippet 31) • OK the dialog • Save and Close the Custom Control 194 Script Snippet 31
195.
© 2011 IBM
Corporation Edit Document in a Dialog Box • From the XPages section of the database navigator, right click and select “New XPage” • Name the new XPage “editdialog” 195
196.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Drag the layout custom control onto the new XPage • Drag the new form_editdialog custom control into the editable area on the XPage • It should look like the page below • Save and Preview the XPage 196
197.
© 2011 IBM
Corporation Edit Document in a Dialog Box • A list of customers is displayed • Click the “Edit Customer” link next to a name 197
198.
© 2011 IBM
Corporation Edit Document in a Dialog Box • Click on the Edit Customer link • A dialog box will appear with the fields in edit mode • Save the changes and they will be updated on the main page 198
199.
© 2011 IBM
Corporation Dojo Grid • Right click on the custom controls section of the database navigator • Select “New Custom Control” • Name the new custom control “form_dojogrid” • OK the dialog 199
200.
© 2011 IBM
Corporation Dojo Grid • Select the “REST Services” control from the Extension Library Controls pane • Drag it onto the custom control • Make sure the ID is set to “restService1” 200
201.
© 2011 IBM
Corporation Dojo Grid • Switch to the Source view of the custom control 201
202.
© 2011 IBM
Corporation Dojo Grid • Paste script snippet 32 inside the <xe:restService> tags 202 Script Snippet 32
203.
© 2011 IBM
Corporation Dojo Grid • Select the “Data Grid” control from the Dojo Grid controls pane • Drag a new Data Grid control onto the custom control below the REST Service control 203
204.
© 2011 IBM
Corporation Dojo Grid • Set the “style” property of the grid to the following using script snippet 33 • Add the “storeComponentId” property to the control and set it to “restService1” 204 Script Snippet 33
205.
© 2011 IBM
Corporation Dojo Grid • Select the Data Grid Column control from the Dojo Grid control pane • Drag a new Data Grid Column control inside the Data Grid control we just added 205
206.
© 2011 IBM
Corporation Dojo Grid • In the Properties pane on the Data Grid Column control • Set the editable property to “true” • Set the field property to “firstname” • Set the width property to “auto” 206
207.
© 2011 IBM
Corporation Dojo Grid • Repeat the process of adding another Data Grid Column to the grid • Set the editable property to “true” • Set the field property to “lastname” • Set the width property to “auto” 207
208.
© 2011 IBM
Corporation Dojo Grid • Switch to Design mode • Select the Button control from the Controls pane • Drag a new button onto the end of the custom control • Set the label of the new button to “Save Changes” 208
209.
© 2011 IBM
Corporation Dojo Grid • In the client side of the onClick event of the button add the following code (script snippet 34) 209 Script Snippet 34
210.
© 2011 IBM
Corporation Dojo Grid • Add another new button next to the one we just added • Set the label to “Revert Changes” 210
211.
© 2011 IBM
Corporation Dojo Grid • In the client side of the onClick event of the new button • Add the following code: (script snippet 35) var ds = eval(‘restService1’) ds.revert() • Save the custom control 211 Script Snippet 35
212.
© 2011 IBM
Corporation Dojo Grid • From the XPages section of the database navigator • Right click and select “New XPage” • Set the name of the new XPage to “grid” • OK the dialog 212
213.
© 2011 IBM
Corporation Dojo Grid • Drag the layout custom control onto the new XPage 213
214.
© 2011 IBM
Corporation Dojo Grid • Drag the new form_dojogrid custom control inside the editable area of the new XPage • Save and preview the XPage 214
215.
© 2011 IBM
Corporation Dojo Grid • You should see something like this: • Double click in an entry to edit it and hit enter to exit edit mode • Click “Save Changes” 215
216.
© 2011 IBM
Corporation Tooltips • We are going to re-use the view_customers custom control and need to copy it to the clipboard and then paste it 216
217.
© 2011 IBM
Corporation Tooltips • Now rename the new custom control to “view_tooltip” • It is important that you rename it by right clicking in the Custom Controls section of the application navigator as shown on the left 217
218.
© 2011 IBM
Corporation • Now comes the fun/complicated bit • Open the view_tooltip custom control • Add a line feed after computedField2 (if it’s not already there) • Drag and drop a Tooltip control from the Extension Library pane onto the new line 218 Tooltips
219.
© 2011 IBM
Corporation • Change the All Properties for the Tooltip to the following: • dynamicContent = “true” • for = “link1” 219 Tooltips
220.
© 2011 IBM
Corporation • Now switch to the source code and add a line feed in the <xe:tooltip> tags • Now drag a panel control into the new space 220 Tooltips
221.
© 2011 IBM
Corporation • Name the Panel control “tooltip” 221 Tooltips
222.
© 2011 IBM
Corporation • Now add a domino document data binding to the panel • Use the “customer” form • Set the default action to “Edit Document” • Compute the Document ID 222 Tooltips
223.
© 2011 IBM
Corporation • Again we use rowData to get information from the current row of the repeat control • Use the following JavaScript: • rowData.getNoteID() 223 Tooltips Script Snippet 36
224.
© 2011 IBM
Corporation • Now we need a table 2 rows and 2 columns • Drag and drop the Table control to the space below the data binding 224 Tooltips
225.
© 2011 IBM
Corporation • In cell A1 drag a label and set the Label to “EMail address” 225 Tooltips
226.
© 2011 IBM
Corporation • Switch back to the design mode • Drag a computed field control into cell B1 226 Tooltips
227.
© 2011 IBM
Corporation Tooltips • Bind the computed field to document1 and the “email” field 227
228.
© 2011 IBM
Corporation Tooltips • Drag a Label control to cell A2 and set the Label to “City” 228
229.
© 2011 IBM
Corporation Tooltips • Drag another Computed field to cell B2 and bind it to document1 and “AddrCity” • Save the Custom Control 229
230.
© 2011 IBM
Corporation Tooltips • Create a new XPage named “tooltip” • Drag on the “layout” custom control • Drag the “view_tooltip” custom control onto the facet_1 green spot • Save the XPage and Preview it 230
231.
© 2011 IBM
Corporation Tooltips • Preview the XPage and hover over a first name in the list • You should see a tooltip with the EMail address and city from the customer record appear 231
232.
© 2011 IBM
Corporation Questions? • Contact Us: • Matt White • matt.white@elguji.com • twitter.com/mattwhite • mattwhite.me • Tim Clark • tim_clark@uk.ibm.com • twitter.com/timsterc • blog.tc-soft.com 232
233.
© 2011 IBM
Corporation 233 Legal Disclaimer © IBM Corporation 2011. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness 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 change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement 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 in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that 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, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., 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.