XPages'Blast'''

Tweet'about'this'event:'#xpages''and'men:on'us:'@teamstudio'@TLCCLTD'@ma?white'@TimsterC'

'March'26,'2013'

@teamstudio'teamstudio.com'

Dan$Colbert$Vice'President'North'America'and'La:n'America'

Taline$Badrikian$Marke:ng'Director'

Who'we'are'•  Our'background'is'in'crea:ng'tools'for'collabora:ve'

compu:ng'in'midQsize'and'large'enterprises,'primarily'for'Lotus'Notes'

•  EasyQtoQuse'tools'for'developers'and'administrators'•  2300+'ac:ve'customers,'47'countries'•  Offices'in'US,'UK'and'Japan'•  Entered'mobile'space'in'2010'with'Unplugged'–'easy'

mobiliza:on'of'Notes'apps'to'Blackberry,'Android'and'iOS''

Teamstudio Unplugged

•  Your Mobile Domino Server – take your Notes apps with you!

•  End users access Notes applications from mobile devices whether online or offline

•  Leverages existing skills and technology – Xpages – Replication model you already know

•  IBM'Collabora:on'Solu:ons'Award'Winner'2013' '

'

Teamstudio Continuity

•  Mobile BCM application for smartphones and tablets –  iOS, Android and BB

•  Offline access to all your BCM and Disaster Recovery data

•  Store plans, contacts, call trees, and more •  Client available for download from app stores

Teamstudio

•  Visit us at IamLUG - May 6 & 7 •  Next webinar – jQuery and XPages apps, Mark Roden –

April 23

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

Howard Greenberg TLCC

@TLCCLtd

Paul Della-Nebbia TLCC

@paulDN

XPages Blast Your Hosts Today:

1

#XPages

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

2

Upcoming and Recorded Webinars

Next Webinar on April 23rd jQuery: The World's Most Popular JavaScript Library Comes to XPages with Mark Roden

www.tlcc.com/xpages-webinar

Same web page has a link to previous webinars

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

• Seven XPages Courses! On Sale, Save $200! 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

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

IamLUG in St. Louis ¾May 6th and 7th … FREE!!

TackItOn the day after (May 8th)

¾Rapid XPages Development using Application Layout and Dojo UI Controls

• One full day with TLCC’s expert instructor Paul Della-Nebbia • TLCC’s Rapid XPages Development using Application Layout and Dojo UI

Controls (8.5 or 9.0) self-paced course (28 hours) • A year of continued instructor support

¾All for only $495! IamLUG exclusive offer!!

www.iamlug.org

4

Upcoming Events

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

Asking Questions

Q & A at the end! Type in your questions as they come up

5

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

Tim Clark, IBM Champion @timsterc

Your Presenters Today:

6

#XPages

Matt White, IBM Champion @mattwhite

XPages Blast (2013)

1

Matt White | London Developer Co-op

Tim Clark | TC Soft Consulting

#xpages

Matt White

2

–Consultant with London Developer Co-op–Lead Developer with Elguji Software–Owner of XPages101.net–In the last year has;

– Got married– Become a father– Bought a new house– Oh... and developed some XPages apps!

–Owner of TC Soft Consulting–IBM Champion–Prince2 Practitioner (Project Management)–ITIL certified–Manager of;

– People– Projects– My family ;o)

#xpages

Tim Clark

3

–IBM Lotus® Domino® Server 8.5.3– If we use other versions for a tip we’ll highlight it

–IBM Lotus® Notes® 8.5.3–IBM Notes® 9.0–IBM Lotus® Domino Designer® 8.5.3–IBM Domino Designer® 9.0

–We will use this logo to highlight any slide that has IBM Domino Designer® 9.0 items

#xpages

Products we’re using

4

#xpages

Agenda

5

–Config Tips–Client Side Tips–Server Side Tips–Debugging Tips

–Working Sets– Great for grouping together similar applications

–Perspectives– Switch between XPages, Domino Designer and Debug

–Turn on Line Numbers in code editor– Right click in the gutter and select “Show Line Numbers”

#xpages

Designer Tweaks

6

#xpages

Designer Tweaks

7

–XPages Palette to control which controls you see in the sidebar (new in 9.0)

#xpages

Disable Build Automatically

8

–It is enabled by default–When you save a design element the application is

recompiled–This is bad if

– you’re working in a team– you’re working on remote servers

–Turn it off and get used to using Ctrl-B

–Bonus Tip: if you close other applications the build process is quicker

– Can only be done in Package Explorer in 8.5.3, in 9.0 it can be done from Applications pane

#xpages

Disable Build Automatically

9

#xpages

Source Control

10

– Acts as a great backup tool for you– Even if you don’t have a team Repository, set up a local one– We use Github, allows for better team development– Set up Source Control for the application and choose a disk

location– Then set up the Github project– Link the two by creating a new Git project in the same disk

location– Video of how to set it all up at

http://bit.ly/xpb_github

– We use a client to control the Committing, rollbacks etc, but command line works equally well

– https://github.com/tcsoft/xpb2013

#xpages

Designer Memory Settings

11

– 8.5.3 Designer client can be a little crashy, but we can fix that!– Open the file at:

<Notes program dir>/framework/rcp/deploy/jvm.properties

– Default settings in 8.5.3 are:

vmarg.Xmx=-Xmx256m vmarg.Xms=-Xms48m vmarg.Xmca=-Xmca8k

– Also still like this is Domino Designer 9.0 (beta)

#xpages

Designer Memory Settings

12

–New settings should be:

vmarg.Xmx=-Xmx1024m vmarg.Xms=-Xms512m vmarg.Xmca=-Xmca512k

–Took my machine from crashing nearly every day at 3pm to almost never crashing

–Technote:

http://www-01.ibm.com/support/docview.wss?uid=swg21617708

#xpages

Agenda

13

–Config Tips–Client Side Tips–Server Side Tips–Debugging Tips

#xpages

Know your versions

14

– Dojo• 8.5.0 == 1.1.1• 8.5.1 == 1.3.2• 8.5.2 == 1.4.3• 8.5.3 == 1.6.1• 9.0 == 1.8

– OneUI• < 8.5.3 == 2.0.1• 8.5.3 == 2.1• 9.0 == 3.0.2

– CKEditor• 8.5.2 == 3.2.1.6• 8.5.3 == 3.5.3• 9.0 == 3.6.4

#xpages

Think Mobile

15

–Mobile Controls in the Extension Library–But even if not going that far then it’s always

worth setting meta tags and field types–Meta tags configure the page for optimal

viewing in iOS–Set them by adding a metadata resource to

your XPage:

#xpages

Think Mobile

16

–By default consider these...–viewport: width = device-width, initial-scale = 2.3,

user-scalable = yes• scales the page to fit on the page

–apple-mobile-web-app-capable: yes• allows you to add to the iOS workspace and run without

the Safari controls–apple-mobile-web-app-status-bar-style: black

• changes the header bar colour

#xpages

Think Mobile

17

–There is no overhead at all to setting the “type” property of fields so that when you are using a mobile device the user gets the correct keyboard

–In All Properties for a field set type, most important being:• date (displays a native picker, but beware date formats)• email• number• url

#xpages

Use jQuery

18

–If you want to use the most popular JavaScript framework on the Internet add jQuery to your application

–Extra overhead but on a fast network not a huge problem

–Check out http://xomino.com for great tips–Gives access to huge number of resources in your

applications–Code is often easier to write (ymmv!)

–Check out the companion application for this session.

–The extension library application layout has lots of options and can be made to suit your application.

#xpages

Use the extension library application layout

19

#xpages

Use Bootstrap

20

–OneUI is one way to go for the look and feel of your app

–Bootstrap is an alternative• Open source, released by Twitter• Easy to use• Integrates with jQuery• Has useful built in widgets

#xpages

Use Bootstrap

21

#xpages

Use Bootstrap

22

#xpages

Agenda

23

–Config Tips–Client Side Tips–Server Side Tips–Debugging Tips

–For simple things like including CSS files on all XPages

–For more advanced things as well...–Add a CSS class to all controls of a particular

type:

#xpages

Using Themes

24

–Using the Theme ID we can create our own sub types of field:

–Or we can add custom classes to the <body>

#xpages

Using Themes

25

#xpages

Using Attributes

26

–Pretty much every control has a property called “attrs”

–You can add as many attributes as you like to a control

–Often used in conjunction with the tagName property• To make a panel into an anchor for example

–Ones we use a lot are:• href• onclick (and other events)• data-toggle (and other jQuery tags)

–Will result in this being generated:

<a id="id1:_id2:mylink" onclick="doSomething()"> My Link</a>

#xpages

Using Attributes

27

#xpages

Document Locking

28

–Scoped Variables are great for in memory tasks–Such as knowing who has documents in edit mode–So when a page is loaded we can call some code

to decide whether to allow the user to edit it–We can use applicationScope variables to store a

Java Hashmap of who has locked individual documents

#xpages

Document Locking

29

function processDocumentLocking(){

if (context.getUrlParameter("documentId") != "" &&

context.getUrlParameter("action").toLowerCase() == "editdocument"){

if (!applicationScope.containsKey("documentlocks")){

applicationScope.documentlocks = new java.util.Hashtable();

}

var hash:java.util.Hashtable = applicationScope.documentlocks;

if (hash.containsKey(context.getUrlParameter("documentId"))){

var lock = hash.get(context.getUrlParameter("documentId"));

if (lock.person != @UserName()){

viewScope.locked = lock;

}

}else{

var lock = new DocumentLock();

lock.unid = context.getUrlParameter("documentId");

lock.person = @UserName();

lock.time = new java.util.Date();

hash.put(lock.unid, lock);

applicationScope.documentlocks = hash;

}

...

#xpages

Document Locking

30

...

}else if (context.getUrlParameter("documentId") != "" &&

context.getUrlParameter("action").toLowerCase() == "opendocument"){

if (!applicationScope.containsKey("documentlocks")){

applicationScope.documentlocks = new java.util.Hashtable();

}

var hash:java.util.Hashtable = applicationScope.documentlocks;

if (hash.containsKey(context.getUrlParameter("documentId"))){

var lock = hash.get(context.getUrlParameter("documentId"));

if (lock.person == @UserName()){

unlockDocument( context.getUrlParameter("documentId") );

}else{

viewScope.locked = lock;

}

}

}

}

#xpages

Document Locking

31

function unlockDocument(unid){

if (applicationScope.containsKey("documentlocks")){

var hash:java.util.Hashtable = applicationScope.documentlocks;

if (hash.containsKey(unid)){

var lock = hash.get(unid);

if (lock.person == @UserName()){

hash.remove(unid);

applicationScope.documentlocks = hash;

}

}

}

}

var DocumentLock = function(){

this.unid;

this.person;

this.time;

}

#xpages

Document Locking

32

#xpages

Expression Language

33

– You’re probably already using it even if you don’t realise it with Simple Data Binding

– It’s just a simple shorthand to access properties quickly– You just need to use the Advanced - Expression

Language binding

#xpages

Expression Language

34

–If you want to get clever you can mix and match EL with SSJS

–In the Advanced - Custom binding

#xpages

Managed Beans

35

–Not as scary as you might think–Made up of two things

• Java Class that does something• XML Config to set up the “managed” bit

–The idea is that the server looks after creation of the objects for you

–So say we want to create an HTML Email...

#xpages

Managed Beans

36

–Tony McGuckin contributed the XSnippet:http://bit.ly/xpb_managedbean

–It does a single thing, in this case sends an email:

#xpages

Managed Beans

37

–Then we set up the XML Configuration–In the faces-config.xml file found in Package

Explorer•WebContent\WEB-INF\faces-config.xml

–We need to define the name of the bean, the Java class being used and the Scope it will operate with

#xpages

Managed Beans

38

–Now we can use the managed bean in our SSJS

#xpages

FacesMessage

39

–Often we want to be able to send messages to the browser window

–Just add add an “Error Messages” control to your XPage and use this code:

–In this example the code runs when a button is clicked and shows the current time

#xpages

Custom Validators

40

–For complex or common validation we can centralise the logic into Java classes using Custom Validators

–First we create the Java class:

#xpages

Custom Validators

41

–Next we set up the validator configuration in the faces-config.xml file•WebContent\WEB-INF\faces-config.xml

#xpages

Custom Validators

42

–And finally we can make use of the validator in our XPage

#xpages

Apache Commons

43

–Taking the Custom Validator, what if we want “real” validation

–Lots of common tasks have already been covered by Apache Commons:

http://commons.apache.org/validator/

–Import the commons-validator.jar file into WebContent\WEB-INF\Lib

–Then right click and “Add to Build Path”

#xpages

Apache Commons

44

–Now we can edit our Java class to use the EmailValidator:

#xpages

Agenda

45

–Config Tips–Client Side Tips–Server Side Tips–Debugging Tips

#xpages

Log File Viewer

46

–A project on OpenNTF by Jakob Majkilde

http://bit.ly/xpb_logfileviewer

–Makes watching log files (especially on remote servers) much easier

#xpages

Log File Viewer

47

#xpages

Debug Toolbar

48

–A project on OpenNTF by Mark Leusink

http://bit.ly/xpb_debugtoolbar–Very useful for following debug messages,

timing code and more

#xpages

Java Debugging

49

–Built into Domino Designer since 8.5.3–Easy to set up–Add lines to notes.ini on the dev server:

JavaEnableDebug=1JavaDebugOptions=transport=dt_socket,server=y,suspend=n,address=8000

–Restart the server

#xpages

Java Debugging

50

–In Domino Designer switch to the Debug Perspective

–Create a new Remote Java Application Debug Configuration

#xpages

Java Debugging

51

–Now we can add a breakpoint to our code and load the XPage in a browser and then step through the code

#xpages

SSJS Debugging

52

–Server Side JavaScript debugging is almost exactly the same in Domino 9.0

–The notes.ini lines to add are:

JavaEnableDebug=1JavascriptEnableDebug=1JavaDebugOptions=transport=dt_socket,server=y,suspend=n,address=8000

–There was a whole session on this @ Connect13:AD202 Debug Server Side Javascript, Java, and XPages Apps Using the SSJS DebuggerM Blout & D O'Connor

#xpages

SSJS Debugging

53

–The Debug Configuration will look like this:

#xpages

SSJS Debugging

54

–And then we can set a breakpoint in the source XML of our XPage or Script Library:

#xpages

Pasting source code from extension library

55

– ‘The prefix "xe" for element "xe:navigator" is not bound.’– This happens when you paste in some source code from

one custom control to another for a control that is from the extension library.

– The View tag is where you can solve this issue.

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"xmlns:xe="http://www.ibm.com/xsp/coreex">

– Does not happen if you drag and drop from the extension library palette.

#xpages

Contact Us

56

–Matt White• matthew.white@fclonline.com• @mattwhite

–Tim Clark• tim@tc-soft.com• @timsterc

© 2013 The Learning Continuum Company, Ltd – This material can not be reproduced or distributed without the express permission of TLCC

Question and Answer Time!

Teamstudio Questions? contactus@teamstudio.com 877-228-6178 www.teamstudio.com

#XPages

@PaulDN

@TLCCLtd

@Teamstudio

TLCC Questions?

howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095

7

Matt White Tim Clark Howard Greenberg Paul Della-Nebbia

IamLUG in St. Louis, May 6th and 7th TackItOn May 8th Rapid XPages Development using Application Layout and Dojo UI Controls

www.iamlug.org

Save $200! Rapid XPages Development using Application Layout and Dojo UI Controls until 4/12