Rapid XPages Development - entwicklercamp.de · Rapid XPages Development using Application Layout and Dojo UI Controls ‒FREE !! Introduction to XPages Development ‒JavaScript

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

Rapid XPages Development

1

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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

© 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 …

© 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 …

© 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 …

© 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 …

© 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

© 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

© 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

© 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

© 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

© 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

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

25

Navigator Control

DemoXPage621a

© 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

© 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

© 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:

© 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

© 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

© 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

© 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 …

© 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 …

© 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 …

© 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

© 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

© 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 …

© 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 …

© 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

© 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

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

Time for YOUR Questions!