Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout...
Transcript of Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout...
![Page 1: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/1.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Rapid XPages Development
1
![Page 2: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/2.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Howard Greenberg The Learning Continuum Company - TLCC Email: [email protected] Twitter: @TLCCLtd
2
Instructor
#XPages
![Page 3: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/3.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
• Seven XPages Courses! ‒ NEW! Rapid XPages Development using Application Layout and Dojo UI Controls ‒ FREE !! Introduction to XPages Development ‒ JavaScript for XPages Development ‒ Developing XPages Using Domino Designer 8.5 ‒ XPages Development 2 for Notes and Domino 8.5 ‒ Mobile XPages for Domino 8.5 ‒ Java 1 for XPages Developers
• Self Paced Training – Learn anywhere! – An Instructor is a click away
• Instructor Led (Private) • TLCC Mentoring Services
3
TLCC XPages Offerings
![Page 4: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/4.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
• Special offer for Entwickler Kamp Attendees – 20% off on all TLCC courses – 5% off on any course on sale
• Go to www.tlcc.com/entwickler to get this offer
Special Offer for Attendees
4
![Page 5: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/5.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Agenda
5
• Requirements and Terminology • Form Table control • Data View control • Application Layout control • Q & A
#XPages
![Page 6: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/6.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
System Requirements
• Domino Designer 8.5.3 and Domino Server 8.5.3
– Upgrade Pack 1 or
– 8.5.3 Extension Library
• IBM Notes and Domino 9 beta
– Upgrade Pack 1+ Included – All you need
6
![Page 7: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/7.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
7
Form Table
Note: OneUIV2 Theme is required to display the Form Table control
![Page 8: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/8.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
8
Tip: Validation and Form Tables
![Page 9: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/9.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
9
Procedure: Add a Form Table to an XPage …
… cont’d …
Add Form Table to XPage
![Page 10: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/10.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
10
Procedure: Add a Form Table to an XPage …
1
2
3
… cont’d …
Add Form Layout Row to Form Table
![Page 11: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/11.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
11
Procedure: Add a Form Table to an XPage
DemoXPage211Input
Add action controls & set navigation
![Page 12: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/12.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
12
Activity: Form Table
Setup: 1. Copy the NSF to your Domino Designer data directory 2. Sign the Application in Designer
• right-click and choose Application | Sign Design 3. Test by previewing the MoblSim.xsp XPage in Chrome or Safari (if you have
it)
To do the Activity: 1. Edit the Activity1_FormTable 2. Follow the comments on the XPage Completed Activity: DocXPage_FormTable_Complete
![Page 13: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/13.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
13
Data View control versus core View control
DemoXPage511View
![Page 14: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/14.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
14
Data View Design Framework: Properties, Complex Properties and facets
![Page 15: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/15.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
15
Procedure: Creating a Data View …
… cont’d …
![Page 16: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/16.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
16
Procedure: Creating a Data View …
… cont’d …
![Page 17: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/17.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
17
Procedure: Creating a Data View …
… cont’d …
![Page 18: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/18.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
18
Procedure: Creating a Data View …
… cont’d …
![Page 19: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/19.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
19
Procedure: Creating a Data View
![Page 20: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/20.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
20
Activity: Data View
• Activity XPage: Activity2_DataView • Completed Activity: DataView_Complete
Open the Activity XPage (Activity2_DataView ) and follow the instructions on the XPage
![Page 21: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/21.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Categorized Columns in a Data View
21
![Page 22: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/22.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Method 1: Categorizing by setting the categoryColumn property
22
DemoXPage532View
![Page 23: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/23.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Method 2: Categorizing using the categoryRow facet
23
![Page 24: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/24.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Details, Details … and Repeat!
24
DemoXPage545View
![Page 25: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/25.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
25
Navigator Control
DemoXPage621a
![Page 26: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/26.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
26
Application Layout Design Framework: Configuration Property and facets …
… cont’d …
• Six facet areas • Five bar areas
![Page 27: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/27.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
27
Application Layout Design Framework: Configuration Property and facets
![Page 28: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/28.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
28
One onItemClick event for all nodes in xe:applicationLayout configuration
onItemClick event - triggered when any node in any of its configuration properties is fired, including:
• bannerApplicationLinks • bannerUtilityLinks • titleBarTabs • placeBarActions • footerLinks
Get submitted value for clicked node - SSJS: Get submitted value for clicked node - CSJS:
![Page 29: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/29.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
29
DemoXPage711 – Areas of the Application Layout control DemoXPage712 – onItemClick event for xe:applicationLayout
![Page 30: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/30.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
The oneuiv2.1 Themes
30
OneUI version 2 Themes: <NotesDominoDataDirectory>\domino\html\oneuiv2.1
OneUI version 2 Theme definitions: <NotesDominoProgramDirectory>\xsp\nsf\themes
![Page 31: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/31.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Procedure: Setting a oneuiv2.1 Theme for an Application
31
OR …
DemoXPage721
![Page 32: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/32.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Procedure: Designing an Application Layout in a Custom Control …
32
… cont’d …
![Page 33: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/33.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Procedure: Designing an Application Layout in a Custom Control …
33
… cont’d …
![Page 34: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/34.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Procedure: Designing an Application Layout in a Custom Control …
34
… cont’d …
![Page 35: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/35.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Procedure: Designing an Application Layout in a Custom Control
35
![Page 36: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/36.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Navigation and Context: You are Here!
36
Demo761_CustByNameView
![Page 37: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/37.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Technique: Using the navigationPath Property to Select a Tab …
37
… cont’d …
![Page 38: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/38.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Technique: Using the navigationPath Property to Select a Tab …
38
Coding the selection property of the xe:pageTreeNode in the titleBarTabs
… cont’d …
![Page 39: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/39.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Technique: Using the navigationPath Property to Select a Tab
39
Example: Customers Application
![Page 40: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/40.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
40
Activity 3
To do the Activity: • Start with the Custom Control called ccActivity3_AppLayout
– NOTE: There are numerous XPages and one Custom Control you will edit in this activity.
• Completed Activity (starting point): AppLayout_ByName
![Page 41: Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript](https://reader036.fdocuments.us/reader036/viewer/2022062403/605858afc914d154a56a0148/html5/thumbnails/41.jpg)
© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC
Time for YOUR Questions!