OpenNTF.

org

Getting Started with XPages

June 4th, 2013

Dr. Mark Roden

Tuesday, June 4, 13

David Leedy

Mark Roden
Senior Consultant for PSC Group LLC. XPages and jQuery Enthusiast NotesIn9 Contributor DC Users Group Organizer http://xomino.com ! demo.xomino.com Twitter: @MarkyRoden

NotesIn9.com
Tuesday, June 4, 13

David Leedy
Corporate Developer NotesIn9 ScreenCast ! http://notesin9.com ! index.notesin9.com ! cheatsheet.notesin9.com dleedy@notesin9.com Twitter: @DavidLeedy or @NotesIn9

NotesIn9.com
Tuesday, June 4, 13

XPages

Tuesday, June 4, 13

XPages
Design Elements meant to Modernize Domino Web Development ! Added in 8.5.0 and enhanced through 9.0 Built on top of Java Server Faces Dojo JavaScript Framework is built in Standard Languages ! HTML, CSS, JavaScript, Java Works with other Popular OpenSource Projects ! jQuery, Twitter Bootstrap, and many more

NotesIn9.com
Tuesday, June 4, 13

Its not that Different

Tuesday, June 4, 13

Its the same plumbing

NSF File ! Easy Deployment ACL Security Agents ! LotusScript or Java ! Scheduled Readers / Authors Fields Forms and Views Replication / Clustering Off-Line ! XPiNC
7
Tuesday, June 4, 13

We use the same Design Elements

Pseudo mapping of design elements

Pre-XPages Design Element Notes Form Subform Notes View Notes Document

Similar XPages Design Element XPage Custom Control Notes View Data Source Notes Document Data Source

8
Tuesday, June 4, 13

Think Different

Tuesday, June 4, 13

Key concepts
Data Binding ! Easy to separate source code and Data ! No need to Rip and Replace ! Unless you want to! (And you might) Repeat Controls Dojo Integration ! Date Pickers, Partial Refresh, Pagers Scoped Variables

NotesIn9.com
Tuesday, June 4, 13

Scoped Variables
Allow you to pass information in memory No need for cookies or URL Parsing applicationScope ! All Users, Long Life sessionScope ! Single user, Life of user session viewScope ! Single user, Life of Page requestScope ! Single User, REALLY SHORT Life

NotesIn9.com
Tuesday, June 4, 13

Things you always wanted to do

Have the control to refresh/re-compute any element on the page and retain all the

values

NotesIn9.com
Tuesday, June 4, 13

11

Things you always wanted...

Much better File Management Options ! Web Content Folder
! Window ! Open

Perspective ! XPages
This helps reusing OpenSource Projects
! JavaScript FrameWorks ! CSS FrameWorks ! Images/Graphics ! etc..

NotesIn9.com
Tuesday, June 4, 13

12

Things you always wanted...

Compute almost EVERYTHING ! Hide Whens ! View Column Titles ! many more..

NotesIn9.com
Tuesday, June 4, 13

13

Things you always wanted...

Have a nice UI out of the Box

NotesIn9.com
Tuesday, June 4, 13

14

Things you always wanted...

Core Controls vs Extension Library ! Upgrade Pack 1 vs Ext. Library vs Domino 9.0 Ext. includes the easy to use framework OneUI XML based SOURCE RDBMS Capabilities ! Native connection to RDBMS ! Ext. Lib JDBC Connectors Build Custom Objects ! Can Span Pages Seamlessly integrate external Java libraries ! POI, Apache, org.openntf.domino
NotesIn9.com
Tuesday, June 4, 13

15

Demo

Tuesday, June 4, 13

Tools you will need

Tuesday, June 4, 13

Tools you will need

Nothing makes your live easier than tools to help code and debug ! Domino Designer in Eclipse ! Increase JVM Memory for acceptable performance " http://www-01.ibm.com/support/docview.wss?uid=swg21617708 ! Local History ! TODO Tracking ! Customize your Perspective " Work the way YOU want " Color your code ! Source Control Integration ! Search and Replace

NotesIn9.com
Tuesday, June 4, 13

29

Tools you will need

Domino Designer in Eclipse ! Search and Replace

NotesIn9.com
Tuesday, June 4, 13

30

Tools you will need

Browser debugging tools ! Firebug ! Chrome Developer Tools ! IE Developer Tools Debug Tools are your friend ! It will tell you if you: ! Have a JavaScript Error ! Have a file which is not loading ! Your REST service isnt working ! Your anything isnt working

NotesIn9.com
Tuesday, June 4, 13

31

Tools you will need

Debug tools

NotesIn9.com
Tuesday, June 4, 13

32

Tools you will need

NotesIn9.com
Tuesday, June 4, 13

33

Tools you will need

Debuggers ! Java Debugger ! 8.5+ ! SSJS debugger ! New with 9.0

! http://notesin9.com/index.php/2013/04/05/notesin9-105-introduction-to-ssjs-debugger/
! Fredrik
NotesIn9.com
Tuesday, June 4, 13

Norling
34

Tools you will need

Debuggers ! XPages debug toolbar XPages debug Toolbar
! http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=XPage

%20Debug%20Toolbar ! Mark Leusink

NotesIn9.com
Tuesday, June 4, 13

36

Tools you will need

Debuggers ! XPages debug toolbar ! Access to scoped variables

! http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name=XPage

%20Debug%20Toolbar ! Mark Leusink

NotesIn9.com
Tuesday, June 4, 13

37

Learning Curve?

Tuesday, June 4, 13

Learning Curve
With all these new technologies where do I start? ! HTML / XML ! JavaScript Syntax ! Dojo ! Backend Server Side Processing " This is the LotusScript of XPages ! External frameworks like jQuery ! CSS ! Java ! Not Needed to start - Can be handy later

NotesIn9.com
Tuesday, June 4, 13

39

Learning Curve
How do I get started? Start with a low pressure project Set a personal goal to convert an existing piece of code to XPages ! Form ! View ! Application Designer Wiki ! http://www-10.lotus.com/ldd/ddwiki.nsf

NotesIn9.com
Tuesday, June 4, 13

40

Additional resources

Tuesday, June 4, 13

Additional Resources
Community ! OpenNTF.org ! XPages.Info ! CollaborationToday.Info ! StackOverFlow.com ! Over 1,300 questions asked and answered ! Google for XPages Forum ! Google+ community - XPages Paid ! XPages101.net ! TLCC.com ! Engage a mentor
NotesIn9.com
Tuesday, June 4, 13

42

Additional NotesIn9 resources

notesIn9.com index.notesin9.com ! Also XPages.TV ! All episodes in an easier to find format ! By Episode number ! By contributor cheatsheet.notesin9.com ! Also XPagesCheatSheet.com ! Downloadable and printable Cheatsheets ! Online URL CheatSheet ! Downloadable demo application and FakeNames database

NotesIn9.com
Tuesday, June 4, 13

43

Rookie Mistakes

Tuesday, June 4, 13

Rookie Mistakes
Mistakes everyone makes starting out with XPages ! Why does my code not run when I click a button? ! Why do I make 5 documents every time I save a new form? ! Why does the same document come back when I save? ! Why cant I Hide/Show a Panel? ! Why doesnt my dojo/jQuery selector work? ! Why cant I get two document data sources to open in read mode and edit mode

NotesIn9.com
Tuesday, June 4, 13

18

Rookie Mistakes
Why does my code not run when I click a button? ! Did you put it in the right place?

NotesIn9.com
Tuesday, June 4, 13

19

Rookie Mistakes
Why does my code not run when I click a button? ! Did you put it in the right place?

NotesIn9.com
Tuesday, June 4, 13

20

Rookie Mistakes
Why do I make 5 documents every time I save a new form? ! New custom control new binding right?
! Multiple data bindings means multiple documents

NotesIn9.com
Tuesday, June 4, 13

21

Rookie Mistakes
Why do I make 5 documents every time I save a new form? Solution
! Copy and Paste the data binding in the source panel from one custom control to the next ! When finished move it to the XPage

NotesIn9.com
Tuesday, June 4, 13

22

Rookie Mistakes
Why does the same document come back when I save? ! When I have two data sources on the same page when I create a new document it always comes back on the page? ! http://blog.hughesconnect.com/?p=62 ! Mark Hughes Answer ! Create the document with a scope: request

NotesIn9.com
Tuesday, June 4, 13

23

Rookie Mistakes
Why cant I Hide/Show a Panel? Server Side Solution ! Use Nested Divs ! panelOuter " panelInner ! Control rendering on Inner Panel ! Use panelOuter as partial refresh target Client Side Solution ! Use dojo.style ! dojo.toggleClass("#{id:contentsOuter}", "hide"); " Assumes .hide { display: none};
#

Add to CSS file via resource

24

NotesIn9.com
Tuesday, June 4, 13

Rookie Mistakes
Why doesnt my dojo/jQuery selector work? ! dojo.byId is good with Colons ! dojo.query does not like Colons
!"#$%&''()*+,-&./!"#$%&!'()*!$+,,-./!0 !"#$.+.)'0,)1-.2*.+.)'/!-.1&(12!'3+$4(,*!5#&3%!0 !"#$'34565724#'8 !9:;<=>=: * * * +,2*'3.?4.-1@ '3.?4.-1*/*1(A(6B&.2CDEFG41$H2&4'IJEK@ ,-.2'D'3.?4.-16+,-&.K@

*********LL8 !M"#$'34565724#'8 !M"#$.+.)'0,)1-.28 !M"#$%&''()8

NotesIn9.com
Tuesday, June 4, 13

25

Rookie Mistakes
Why doesnt my dojo/jQuery selector work? Suggest use class selectors ! Avoid CSS Frameworks that use ID (#) selctors
! <xp:inputText styleClass="fruitField" value="#{document1.fruit}" id="fruit1"> ! </xp:inputText> ! dojo.query(.fruitField)

NotesIn9.com
Tuesday, June 4, 13

26

Rookie Mistakes
Why cant I get two document data sources to open in read mode and edit mode Request Parameters in the URL ! ?action=editdocument Solution ! ignoreRequestParameters = true

NotesIn9.com
Tuesday, June 4, 13

27

Questions?

Tuesday, June 4, 13

Additional Slides

Tuesday, June 4, 13

XPages and Twitter Bootstrap

Tuesday, June 4, 13

XPages and Bootstrap

Twitter Bootstrap is UI and JavaScript FrameWork A lot of interest in the combination ! http://www.bootstrap4xpages.com - Mark Leusink OpenNTF ! Oliver Busse - Bootstrap UI Template Kit Steve Zavocki - notesspeak.blogspot.com ! http://notesspeak.blogspot.com/2013/05/bootstrap-modal-dialog-custom-control.html Henning Schmidt - http://www.schmhen.de/2012/08/30/xpages-create-a-responsive-layout-with-twitter-bootstrap-2/ Kathy Browns blog (runningnotes.net), and Im sure more. Possible alternative for Mobile Development

NotesIn9.com
Tuesday, June 4, 13

47