+ All Categories
Home > Documents > Getting Started With x Pages

Getting Started With x Pages

Date post: 21-Oct-2015
Category:
Upload: sandeep-ratnam
View: 21 times
Download: 0 times
Share this document with a friend
Description:
Introduction to xpages
47
OpenNTF.org Getting Started with XPages June 4 th , 2013 Dr. Mark Roden David Leedy Tuesday, June 4, 13
Transcript

OpenNTF.org

Getting Started with XPages

June 4th, 2013

Dr. Mark Roden David Leedy

Tuesday, June 4, 13

2NotesIn9.com

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

2

Tuesday, June 4, 13

3NotesIn9.com

David Leedy

• Corporate Developer• NotesIn9 ScreenCast http://notesin9.com

index.notesin9.comcheatsheet.notesin9.com

[email protected]• Twitter: @DavidLeedy or @NotesIn9

3

Tuesday, June 4, 13

XPages

Tuesday, June 4, 13

5NotesIn9.com

XPages

• Design Elements meant to Modernize Domino Web DevelopmentAdded in 8.5.0 and enhanced through 9.0

• Built on top of Java Server Faces• Dojo JavaScript Framework is built in• Standard LanguagesHTML, CSS, JavaScript, Java

• Works with other Popular OpenSource Projects jQuery, Twitter Bootstrap, and many more

5

Tuesday, June 4, 13

It’s not that Different

Tuesday, June 4, 13

7

It’s the same plumbing

• NSF FileEasy Deployment

• ACL Security• Agents LotusScript or JavaScheduled

• Readers / Authors Fields• Forms and Views• Replication / Clustering• Off-LineXPiNC

7

Tuesday, June 4, 13

8

We use the same Design Elements

• Pseudo mapping of design elements

8

Pre-XPages Design Element Similar XPages Design Element

Notes Form XPage

Subform Custom Control

Notes View Notes View Data Source

Notes Document Notes Document Data Source

Tuesday, June 4, 13

Think Different

Tuesday, June 4, 13

7NotesIn9.com

Key concepts

• Data BindingEasy to separate source code and DataNo need to Rip and Replace

Unless you want to! (And you might)• Repeat Controls• Dojo IntegrationDate Pickers, Partial Refresh, Pagers

• Scoped Variables

7

Tuesday, June 4, 13

8NotesIn9.com

Scoped Variables

• Allow you to pass information in memory• No need for cookies or URL Parsing• applicationScopeAll Users, Long Life

• sessionScopeSingle user, Life of user session

• viewScopeSingle user, Life of Page

• requestScopeSingle User, REALLY SHORT Life

8

Tuesday, June 4, 13

11NotesIn9.com

Things you always wanted to do

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

11

Tuesday, June 4, 13

12NotesIn9.com

Things you always wanted...

• Much better File Management OptionsWeb Content Folder

WindowOpen PerspectiveXPages

• This helps reusing OpenSource Projects JavaScript FrameWorksCSS FrameWorks Images/Graphicsetc..

12

Tuesday, June 4, 13

13NotesIn9.com

Things you always wanted...

• Compute almost EVERYTHINGHide When’sView Column Titlesmany more..

13

Tuesday, June 4, 13

14NotesIn9.com

Things you always wanted...

• Have a nice UI out of the Box

14

Tuesday, June 4, 13

15NotesIn9.com

Things you always wanted...

• Core Controls vs Extension LibraryUpgrade Pack 1 vs Ext. Library vs Domino 9.0

• Ext. includes the easy to use framework OneUI• XML based “SOURCE”• RDBMS CapabilitiesNative connection to RDBMS

Ext. Lib JDBC Connectors• Build Custom ObjectsCan Span Pages

• Seamlessly integrate external Java librariesPOI, Apache, org.openntf.domino

15

Tuesday, June 4, 13

Demo

Tuesday, June 4, 13

Tools you will need

Tuesday, June 4, 13

29NotesIn9.com

Tools you will need

• Nothing makes your live easier than tools to help code and debugDomino Designer in Eclipse

Increase JVM Memory for acceptable performance http://www-01.ibm.com/support/docview.wss?uid=swg21617708

Local History TODO TrackingCustomize your Perspective

Work the way YOU wantColor your code

Source Control IntegrationSearch and Replace

29

Tuesday, June 4, 13

30NotesIn9.com

Tools you will need

• Domino Designer in EclipseSearch and Replace

30

Tuesday, June 4, 13

31NotesIn9.com

Tools you will need

• Browser debugging tools FirebugChrome Developer Tools IE Developer Tools

• Debug Tools are your friend It will tell you if you:

Have a JavaScript ErrorHave a file which is not loadingYour REST service isn’t workingYour anything isn’t working

31

Tuesday, June 4, 13

32NotesIn9.com

Tools you will need

• Debug tools

32

Tuesday, June 4, 13

33NotesIn9.com

Tools you will need

33

Tuesday, June 4, 13

34NotesIn9.com

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 Norling

34

Tuesday, June 4, 13

Learning Curve?

Tuesday, June 4, 13

39NotesIn9.com

Learning Curve

• With all these new technologies where do I start?HTML / XML JavaScript Syntax

DojoBackend Server Side Processing

This is the “LotusScript” of XPagesExternal frameworks like jQuery

CSS Java

Not Needed to start - Can be handy later

39

Tuesday, June 4, 13

40NotesIn9.com

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 FormViewApplication

• Designer Wiki http://www-10.lotus.com/ldd/ddwiki.nsf

40

Tuesday, June 4, 13

Additional resources

Tuesday, June 4, 13

42NotesIn9.com

Additional Resources

• CommunityOpenNTF.orgXPages.InfoCollaborationToday.InfoStackOverFlow.com

Over 1,300 questions asked and answeredGoogle for “XPages Forum”Google+ community - “XPages”

• PaidXPages101.net TLCC.comEngage a mentor

42

Tuesday, June 4, 13

43NotesIn9.com

Additional NotesIn9 resources

• notesIn9.com• index.notesin9.comAlso XPages.TVAll episodes in an easier to find format

By Episode numberBy contributor

• cheatsheet.notesin9.comAlso XPagesCheatSheet.com

Downloadable and printable CheatsheetsOnline URL CheatSheetDownloadable demo application and FakeNames database

43

Tuesday, June 4, 13

Rookie Mistakes

Tuesday, June 4, 13

18NotesIn9.com

Rookie Mistakes

• Mistakes everyone makes starting out with XPagesWhy 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 can’t I Hide/Show a Panel?Why doesn’t my dojo/jQuery selector work?Why can’t I get two document data sources to open in read mode and edit mode

18

Tuesday, June 4, 13

19NotesIn9.com

Rookie Mistakes

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

19

Tuesday, June 4, 13

20NotesIn9.com

Rookie Mistakes

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

20

Tuesday, June 4, 13

21NotesIn9.com

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

21

Tuesday, June 4, 13

22NotesIn9.com

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

22

Tuesday, June 4, 13

23NotesIn9.com

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

• AnswerCreate the document with a scope: request

23

Tuesday, June 4, 13

24NotesIn9.com

Rookie Mistakes

• Why can’t I Hide/Show a Panel?• Server Side SolutionUse Nested Divs

panelOuter panelInner

Control rendering on Inner PanelUse panelOuter as partial refresh target

• Client Side SolutionUse dojo.style

dojo.toggleClass("#{id:contentsOuter}", "hide");Assumes .hide { display: none};

Add to CSS file via resource

24

Tuesday, June 4, 13

25NotesIn9.com

Rookie Mistakes

• Why doesn’t my dojo/jQuery selector work? dojo.byId is good with Colons dojo.query does not like Colons

25

<xp:button  value="Label"  id="button1">

<xp:eventHandler  event="onclick"  submit="false">

<xp:this.script>

<![CDATA[

  var  theField;

  theField  =  dojo.query("#{id:fruit1}");

  alert(theField.value);

                 ]]>

</xp:this.script>

</xp:eventHandler>

</xp:button>

Tuesday, June 4, 13

26NotesIn9.com

Rookie Mistakes

• Why doesn’t my dojo/jQuery selector work?• Suggest use class selectorsAvoid CSS Frameworks that use ID (#) selctors

<xp:inputText styleClass="fruitField" value="#{document1.fruit}" id="fruit1"> </xp:inputText>

dojo.query(“.fruitField”)

26

Tuesday, June 4, 13

27NotesIn9.com

Rookie Mistakes

• Why can’t I get two document data sources to open in read mode and edit mode

• Request Parameters in the URL ?action=editdocument

• Solution ignoreRequestParameters = true

27

Tuesday, June 4, 13

Questions?

Tuesday, June 4, 13

Additional Slides

Tuesday, June 4, 13

XPages and Twitter Bootstrap

Tuesday, June 4, 13

47NotesIn9.com

XPages and Bootstrap

• Twitter Bootstrap is UI and JavaScript FrameWork• A lot of interest in the combination http://www.bootstrap4xpages.com - Mark Leusink

• OpenNTFOliver 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 Brown’s blog (runningnotes.net), and I’m sure more.• Possible alternative for Mobile Development

47

Tuesday, June 4, 13


Recommended