XPages Advanced Workshop March Philippe Riand Stephan Wissel

Transcription

1 XPages Advanced Workshop March 2010 Philippe Riand Stephan Wissel

2 Financial Disclaimer The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion

3 Introduction 3

4 Agenda Introduction W hat's new in Domino Designer in Eclipse XPages architecture overview Deep dive into XPages XPages optimization Upgrading existing applications Debugging XPages Mobile development XPages extension API W hat is coming next? 4 Data sources Data collection Handling events Server side language Client side processing Custom controls Localization XPages servlet engine Managed beans XPages on the Rich Client OneUI

5 Domino Application Development Values Long standing Domino application development values Develop easy-to-use, security rich, applications that are robust and scalable Integrate and leverage existing applications, data, content and systems Quickly respond to changing business needs 8.5 XPages value add Allow developers to build attractive, modern web apps that leverage Web 2.0 technologies with less work Provide means to incrementally update existing Domino Web applications Attract new developers to the platform 5

6 Continue To Deliver The XPages Vision Develop easy-to-use security rich applications that are robust and scalable Build once for universal client access to collaborative applications Harness the power of Web 2.0 from both browser or Lotus Notes client for both online and offline productivity Leverage active content filtering to prevent malicious code Integrate and leverage existing applications, data, content and systems Enterprise ready with performance & scalability enhancements Improve reuse of Domino data and development artifacts through use of components/ iwidgets Allow developers to build attractive, modern web apps that leverage W eb 2.0 technologies with less work Predefined Ajax behaviors and controls Leveraging the Dojo library 6

7 XPages Continues Its Way! Later... Notes/Domino next Notes/Domino Domino First release of XPages - Runs on the Domino server Notes/Domino 8.5.x - Stability/performance - Runs within the Notes client improvements - Better client integration - Generates iwidget - Fixing pending issues/ - Active Content Filtering requests - Performance/scalability - Extensibility improvements - XPages next generation - Consumes/generates REST services - Generates Dojo based UI - Advanced set of Web controls - Full client integration - Mobile devices support - Integration with other Lotus products - Quickr, Connections, Sametime - More data sources (RDBMS...) - iwidget consumption The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion 7

8 What's new in

9 XPages on the Notes Client Enable Notes/Domino users to run XPages web apps offline Deliver the same UI experience running locally in Notes client Take advantage of Notes/Domino NSF replication capabilities Support XPages on all client platforms Windows, MAC, LINUX Innovate & Integrate where practical, e.g. Leverage the client composite application model Integrate with Notes client workspace features as makes sense Provide a secure runtime environment for XPages client apps Leverage client Execution Control Lists (ECLs) Make it secure through a Java security manager synchronized with the ECLs 9

10 XPages on the Client - Demo 10

11 Performance Improvements New properties to better control the JSF life cycle Partial refresh optimized (only rendering the desired controls) Partial execution of the page Used as a default option to the pager Runtime optimization XPages runtime JavaScript interpreter performance Engine optimization Global JS variables no longer kept in memory End user experience / browser rendering Less files (JavaScript & CSS) downloaded Better compressed files 11

12 Scalability Memory usage JSF libraries optimized to minimize the information held in memory View data cache JSF View persistence New options No persistence Persistence can be disabled when not needed In memory default in 8.5 & Consumed memory decreased by x2.5 On disk Pages are serialized to disk, thus increasing the number of concurrent users. Can be a mix between memory and disk 12

13 Improved Developer Experience Dojo enhancements New Dojo release (1.3.2) Support for IE8, Firefox 3.5, Safari 4 Bug fixes & performance enhancements New Dojo related properties Ease the use of dojotype & dojo specific attributes Available to xp:panel, xp:div, xp:span... JavaScript engine Better support of ECMA 262 specification Better use of the security manager 13

14 Active Content Filtering Goal HTML, and particularly from Rich Text fields, can carry malicious code that executes unwanted operations on the behalf of the user accessing the page JavaScript snippets embedded within the HTML href pointing a REST action... Example: Blog entry One can add a reply to a blog entry, that will be read by the blog owner and execute malicious code on his behalf XPages solution Removing malicious code from HTML by applying a filter Filters can be applied on requests and/or responses 14

15 Active Content Filtering Demo Dirty HTML 15 Clean HTML

16 Domino iwidget Being able to run any XPage as an iw idget A developer just needs to register the XPage as an iwidget No changes are requested to the page Add some entry in the Lotus Mashup catalog Share the artifacts with the Rich Client > Widget = Component Incrementally add iw idget related behaviors Event Publishing/Handling Component parameters Support for modes (view, edit, help...) Make the user experience easy through Domino Designer 16

17 Lotus Mashup Demo 17

18 Other Enhancements Modified flag with save confirmation when a window is closed Client side simple actions EventHandler: onstart, oncomplete, onerror for Ajax notifications New options for Localization Controls Hidden field control Multiple value input field Tab link New Link resources that goes to the <head> part Lot of bug fixes and little enhancements 18

19 What you'll see Next. 8.5.x... 19

20 XPages Runtime in Notes/Domino Performance and scalability improvements Shared design elements Better handling parallel requests reducing server contentions Tag cloud performance Stability / robustness Extended Client Integration SPR fixes Support for multiple tabs New Back-end classes capability Running agents on top of in-memory documents Support for multiple levels of categorization Controls enhancements Use of the CKEditor for Rich text editing 20

21 Extensibility APIs Let people create deployable XPages libraries Deployed as Eclipse plugins in the Notes Client and the Domino Server Shared by all the applications! Controls, Render kits, Data sources, Simple actions, Servlets, Request customizers... Common Custom controls shared in jar files Make public the XPages Java APIs Javadoc, articles and samples Open source library of controls shared on openntf We welcome you to AD110 Unleash the Power of XPages We'll be presenting the API in details The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any f eatures or functionality described for our products remains at our sole discretion 21

22 XPages Editor Usability Improvements Design time rendering Improved theme setting and rendering Improved style rendering Improved repeat rendering Extended controls support Analyze property use on All Properties and promote frequently used properties to the pretty panels Checkbox/Radio button group control Palettes enhancements Palette drop to source mode Better Notes data type handling rich text, date, time Data palette improvements Change order of controls And more... The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any f eatures or f unctionality described for our products remains at our sole discretion 22

23 Domino Designer in Eclipse 23

24 Domino Designer 8.5 Revolution Thru Evolution Remaining true to our core value - RAD Same Designer Productivity: Built on Eclipse Enhanced navigation and search capabilities Increased customization Editing resources from within Designer Web: HTML, XML, JavaScript editors Style sheets An extensible application development environment Tools Plug in and integrate together Reporting Tools Testing Tools 24

25 Integration into Eclipse Designer is fully integrated on Eclipse Uses the Eclipse layout system Projects NSF as projects and design elements as Eclipse resources (files) The Eclipse views, editors and perspective What are they? Showing/hidding views, restoring the old layout (perspective) Interesting views Each design element is projected as one of more files Complex design elements are projected through DXL (XML format) Warn: 100% roundtrip is not guaranteed yet Navigator, Problems, Java Package Explorer... Leveraging Eclipse capability Searching an NSF Importing/Exporting content 25

26 Eclipse Search Service Define scope Open DXL representation of design element 26

27 Code Compare Compares DXL representation 27

28 Leveraging Eclipse Editors Property broker editor 28

29 XPages Architecture Overview 29

30 XPages architecture XPages Development Model Drag & drop application building using XPages JavaScript libraries and custom controls Integration of Java libraries/ classes Use managed beans and advanced extensions Advanced users with development skills Power users 30 Use the XPages native API Java developers XPages Extensibility API 8.5.x

31 XPages Technology Java and JSF behind the scene Runs in the Domino JVM, within the http process JSF had been extended in many places to make it richer and easier XML File format, composite controls, script languages, data sources, localization, simple actions, ajax requests... As of 8.5.x, uses and extended JSF 1.1 library Lot of performance and scalability enhancements Some JSF 1.2/2.0 API had been back-ported XPages runs within a servlet engine A custom servlet engine is used to run NSF based Web applications The NSF is seen as a deployed J2EE Web Module The Servlet API is available to the running XPages The Dojo Toolkit is used as the runtime JavaScript library Used as a core JavaScript library as well as a UI widget framework Tightly integrated within the XPages Runtime 31

32 J2EE Artifacts Client Request Domino HTTP Server XPages Servlet Engine 2.4 servlet engine Virtual J2EE modules No WAR deployment required The server directly reads the design elements from the NSF database NSF database containing the design elements & the data 32

33 Global Architecture Supports both the Domino server and the rich client Supports the data and the design elements replication Domino Server Notes Client The runtime directly reads from the NSF Domino Designer in Eclipse NSF replication Eclipse Workspace Eclipse directly reads/writes to the NSF thanks to a custom EFS 33 NSF files

34 XPages Architecture - 8.5/8.5.1 NSF Applications NSF Applications XPages Extensions OSGi bundles XPages Extensions provided as jar files XPages Runtime Domino HTTP Task Domino Server Profile +Web Container XPages Runtime OSGi Runtime Notes Client Process Notes Client You can extend XPages within an NSF Application, or as separate XPages Extensions. The Domino runtime is deployed as a set of jar files into well defined directories Extensions are provided as jar files copied to <domino>/xsp/nsf/lib (warn: this directory is cleaned-up by the installer when upgrading the server) The Client runtime is deployed as a set of OSGi bundles (plugins) Extensions are also deployed as OSGi bundles 34

35 XPages Architecture 8.5.x NSF Applications NSF Applications XPages Extensions OSGi bundles XPD Profile XPages Runtime XPD Profile +Web Container XPages Runtime OSGi Runtime OSGi Runtime Domino HTTP Task Notes Client Process Domino Server XPages Extensions OSGi bundles Notes Client Both the Domino server and the Notes client are deployed as OSGi bundles The same extension mechanism is used in both platforms; extensions are provided as OSGi bundles. 35

36 XPages Files XPages and Custom controls are defined as: An pure XML file defining the page content A xsp-config file is defining the content of a custom control The XPages Compiler From.xsp to.java to.class Ex: list of controls properties, icon, palette category... Designer generates a high performance Java file out of the XPages XML source The Eclipse Java compiler compiles this Java file into a class file Both processors feeds the Eclipse problems view How an XPage is version-ed Each control in the page has a minimum runtime requirement Each property of each control has the same requirement -> the runtime requirement for the page is the requirement maximum above This is also extended in 8.5.x to get an application version 36

37 JSF Processing Model 37

38 Page Rendering JSF Markup XML + HTML JSF Hierarchy of Components Rendering Phase JSF Render-kit One single markup for all the platforms Actual rendering is done using JSF RenderKit Render-kit is selected using an extension point Can leverage platform specificities - Control properties can be set per platform - Pages can be per render-kit - Use of the platform style sheets HTML Basic HTML Dojo HTML Markup Can use Dojo library/widgets Browser 38 Handheld Mobile devices Client Notes Client

39 XPages XML File format Each tag in the XML file represents a control or a complex property (an object attached to a control) All the standard XPages controls are in a single, reserved, namespace Each tag in the XML file represents a control or a complex property There is one root tag, called <xp:view> Control properties are passed as element attributes Special <this.prop> syntax to make the XML file more readable, when it contains illegal XML characters, like CR/LF Collections as defined through <this.prop> tag, where each sub-tag is an entry in the collection (this supports polymorphism, for example data sources) Pass-through tags Tags without a namespace are passed as is to the browser, without any further processing 39

40 Web UI in XPages You need 7 good reasons not to use IBM OneUI* * (Haven't found 7 reasons yet) 40

41 IBM OneUI 41 More later...

42 Deep Dive Into XPages 42

43 XPages Editor Dual modes: W YSIW YG and Source 8.5.2: drop components to the source code! Property panels Pretty and easy to use panel The All Properties panel 43

44 Controls palette XPages Editor XPage design element Optional source mode Scripting & Simple Actions Outline Property sheets 44 Custom Controls palette

45 Data Sources 45

46 What Are Data Sources? Data sources are XPages artifact for connecting the UI controls to the data An XPage is not linked to a single document or a view Can connect to multiple data sources at the same time! Data Sources can be defined globally in the page or in panels Data Sources are making available objects (ex: a Domino document) that are used by the UI controls for accessing the data Data is well separated from the UI These objects are seen by any control located in the children hierarchy Extensible architecture for new data sources in the future 46

47 Domino Data Sources XPages is equiped, in standard, with 2 Notes/Domino data sources: View data sources Access to Domino views or folders Document data sources Access to Domino documents Based on the Java back-end API Publishes View and Document back-end objects 47

48 View Data Sources Building a View Data Source... Visual helpers to generate markup Data palette to work with members Property sheet for detailed settings All properties computable via JS Simple Tag <xp:dominoview var="dominoview viewname="xpalldocuments"> 48

49 Views Are Also About Folders UI support in Lotus Domino Designer 8.5.x is for Notes view data sources only But... The XPages runtime system supports both Views and Folders And... It's on the list of things to be added for 8.5.x View name is editable, type in folder name into View editbox. editable Type name of column into View Column field (or, compute it!) 49

50 Summary On View Data Sources How do I work with data in Domino Folders? W hat if my view or folder is in another db on another server You can use a folder name anywhere you use viewname <xp:dominoview var="dominofolder" viewname="my Folder"> Just specify the database name at the data source level All these information can obviously be computed <xp:dominoview var="dominofolder" databasename= servername!! mydb.nsf viewname="($all)"> And if I want to use a replica id instead of a database name? You guessed it: <xp:dominoview var="dominofolder" databasename= A9:004134AF viewname="($all)"> And you can finally cut/copy/paste replica ids in Designer

51 How To Manage Multiple Data Sources In The Same Page? No restrictions on the number of data sources used on an XPage! Multiple data sources require special management in certain cases e.g. Open Document simple action generates a URL using the UNID documentid=662f287de be002e8a8a &action=opendocument If multiple document data sources are defined on the page... Which one does this map documentid and action to? We can handle this scenario easily using a special data source property! 51

52 Data Sources Parameters and URL Each data source has a set of parameters These parameters can be controlled by a URL View data sources Document data sources Tweaking the URL behavior Multiple data sources in the same page Ignoring the URL parameters Ex: multiple data sources in the same page (a view and a document) Ex: security reasons, do not let people access document others that the one you want them to access But the parameters, as any other properties, can be computed and access the URL query string 52

53 Examples Ex: 2 Domino Document Data Sources using Customer and Order forms <xp:dominodocument var="document2" formname="orders"></ xp:dominodocument> Construct a URL using the prefix to uniquely identify the data source <xp:dominodocument var="document1" formname="customer" requestparamprefix="cust"> </xp:dominodocument> custdocumentid=662f287de be002e8a8a &custaction=opendocument More detailed example online Updating data from multiple forms from a single XPage d6plinks/groc-7fflyj 53

54 Advanced Data Sources Repeating data sources Data sources can be located within a repeat tag In that case, multiple objects will be opened, one per repeat occurence Example: repeating documents A main View data source is used to browse the view entries Opening a document for each entry in a view The document id is computed based on the current view entry The save action will save all the documents being opened -> be careful: each document opened consume memory resources, plus takes time to open 54

55 Working With Data Collections 55

56 What is a Data Collection A data collection is a set of objects that can be iterated Ex: a view is a collection of view entries Data collections can be iterated using dedicated controls Data table View control Repeat control 56

57 Data Table A data table is made of columns Each column has 3 parts A header A body A footer The data table repeats through the collection and create one body row per occurrence The body row contains controls that will be repeated Those controls can be editable, when the data source supports it Limitations: domino views are not editable 57

58 Data Table vs View Panel The view panel has extended, simplified data binding It displays data in read only mode The column data binding doesn't require controls to be added to the body A column name is generally used for easy data binding A 'value' property can also be used to compute the column value Controls added to the body are supported if needed The view panel has extended user behaviors Allows hierarchical data display with twisties Categorized columns Documents hierarchy (responses) Supports column resorting 58

59 Repeat Control A repeat control is used to repeat content made of an arbitrary set of controls Gives the highest flexibility when displaying repeated data Can be stacked, contain data sources or any kind of controls (views...) 2 modes are available: Dynamic repeat behavior The JSF hierarchy contains the repeat control and one copy of its contents. At runtime, the content is repeated per occurrence, by giving a different context to the repeated control Create controls The repetition happens when the JSF tree is constructed and the runtime create one set of child controls per occurrence. The repeat control is only used once and removed from the hierarchy 59

60 The Pager A pager is a customizable control A custom pager can be created by simply accessing the collection iterator properties first: defines the index of the first element to display rows: defines the number of items to display The repeat control, as well as the data table, have convenience methods to set the current position (8.5.2) gotofirstpage(), gotonextpage()... 60

61 Creating a Custom Pager How the pager works? It connects to FacesDataIterator components, like a dynamic repeat control, a data table or a view panel The items being displayed by the FacesDataIterator are defined by 2 property first: the index of the first item being displayed (0 to count-1) rows: the number of rows being displayed When displaying itself, the pager grabs the value of those properties and displays the pages and the action links When clicking on the pager links, the pager adjusts the first property of the FacesDataIterator A custom control can use the same behavior 61

62 Handling Events 62

63 Event Model Difference between client side and server side XPages is made of a server runtime that generates code for Web browsers The browser can execute local JavaScript, while the XPages runtime executes server side JavaScript, or Java code Events triggered by a control Control can have events triggered by the browser on a server action Ex: button click Those event shows in the All Properties panel, in the events section Only client side code can be attached to those events Running server side needs a communication channel to be established between the client and the server. This should be done through a post-back request or a web Service request -> Hopefully, this is made easy by the EventHandler control (see next slide!) 63

64 EventHandler Control Automatically used by Designer in the events panels Each time you add an event using the Events panel, Designer adds this component to the source code Provides a large set of capability Executes code on both client and server sides Supports Ajax behaviors like partial refresh and partial execution Supports parameters to be send to the server Finally provides both client and server simple actions 64

65 Pure Server Events Some events are not triggered by a user action but by state change on the server Ex: data source events, page events.. In that case, the events are directly assigned to the control, and no EventHandler is being used Only server side code can be assigned to these events 65

66 Server Side Languages 66

67 XPages Expressions Every control property can have a static value or can be computed In Designer, a diamond appears next to the property to make it computed In the source code, the value of the attribute is using a specific syntax Load time versus runtime execution A load time expression is only evaluated once, when the page is constructed Syntax: ${[language:]xxxxx} A runtime expression is evaluated each time it is needed Syntax: #{[language:]xxxxx} Can lead to many evaluations when the page is processed Some properties, like the control id, do not support this mode 67

68 JavaScript on The Server XPages choose JavaScript as the default processing language on the server Parity with the browser: reuse your skills Tighly integrated with Java Uses the javascript: prefix in an expression 68

69 Global Objects JavaScript makes some objects available as global objects Exposed by the Designer script editor session, database... The available scopes application, session, view, request No need to declare the object like in Lotuscript (Dim s as new NotesSession) Store data at different levels The XPages context object Gives access to set of useful APIs 69

70 Global Functions Besides global object, JavaScript also has global functions getcomponent() Returns the JSF component based on its id. See control snippets for available methods Save() Saves all the data sources in the page 70

71 JavaScript Libraries JavaScript code can be located in different places In the XPages themselves No need for agents! In libraries of reusable code (.jss) Libraries processing model Loaded the first time they are used Discarded when the system is claiming for memory Uses Java weak references mechanism Unpredictable: do not store global values in the library, use scopes instead! 71

72 Integrating Java Code Calling Java from JavaScript The JavaScript bridge Package names, importpackages, Package keyword How types are mapped Adding Java files into an NSF Adding libraries into an NSF New source directory do not use Local! WEB-INF/lib Adding a shared library Better scalability Server directories: 8.5.1: <domino>/xsp/nsf/lib Warn, as it is clear out when the server is reinstalled 8.5.x next: OSGi plug-ins 72

73 Accessing the JSF Controls Each control in the page is in fact an instance of a Java object that inherits from the JSF UIComponent object The Java objects can be accessed through the getcomponent () global function The controls are accessed using their JSF id ('name') Each component property/method can be accessed through JavaScript Ex: getcomponent('mycomputedfield').getvalue() Domino Designer is providing code completion on the available method 73

74 What is EL? EL means Expression Language Main JSF processing language Not a complete language, but a bridge between pages and Java Default when no language is specified in a expression #{myobject.myprop} Used to bind controls to Domino documents Internally uses JSF variable and property resolvers. Can be extended in Java. EL syntax Used to access object properties myobject, myobject.property, myobject[ property ] 74

75 Advanced Uses of Expressions Sometimes, when computing a string property, it can be useful to compute different parts of the value separately The XPages expression engine supports an expression that is a mix of expressions and static strings Ex: computing the style property style= background: #{o.bg}; font-family: #{o.font} W hen a load time expression generates a runtime expression Ex: a custom control that needs a dynamic data binding capability 75

76 Client Side Processing 76

77 Client Side JavaScript Inserting client script into a page The Script resource at the page level The outputscript tag The Event handler What is different between the eventhandler and the all properties? Dynamic client script The script contained in an outputscript tag can be computed: server side script can compute client side script. 77

78 Controls Ids in the Browser Multiple XPages controls can have the same JSF id in the same page, or in the same NamingContainer But the browsers require the ids to be unique in the page For example, when the same custom control is added twice to the same page The XPages runtime then generate unique client ids per controls These ids are composed by the ids of the parent (naming containers) concatenated using ':'. When within a repeat/data table, the current iteration index in also appended W arnings The ':' character used to compose the final client id, is not CSS friendly This is a JSF design flaw Client ids are not easily predictable To make them predictable, be sure that their ids are designed in Designer, else the runtime will generate random _idxxx ids. As a good practice, do not rely on client ids in your code. Use dedicated functions instead. 78

79 Calculating a Control Client Id Computing a client id for a control can be done by: Calling the getclientid() global function in server side JavaScript Using the #{id:xxxx} expression on the server side 79

80 Using Dojo Controls dojotype & dojoattributes Each control can have a Dojo type and a set of Dojo attributes assigned Dojo attributes are only generated if there is a Dojo type defined Dojo Modules In the future, some optimizations can be used to generate JavaScript instead of HTML tags, thus not triggering the Dojo parser Dojo modules can be defined in a page or in a custom control. Gerenates a dojo.require() statement in the HTML Dojo & clientid When a Dojo type is assigned to a control, then a client id is automatically generated Use #{id:xxx} to find the runtime control ids 80

81 Custom Controls 81

82 What is a Custom Control? Composite controls Parameterizable sub-forms Controls made by assembling existing controls Behave exactly as native controls Appear in the Control palette Define their own set of properties Hierarchical with custom editors Pure Java controls Use the full JSF APIs Base classes provided to ease development 82 Control is like a page

83 Defining the Control Properties Each control can have custom properties Defined in the Designer property panel The properties can be hierarchical At runtime, the custom control can access the value using compositedata. 83

84 Using Editable Areas Editable areas are place holders in a custom control where users can drop their own controls Can be used to define common page layouts Uses the JSF concept of facet 84

85 Extending the Design Time Experience Providing a design time rendering This is a piece of markup rendered by designer instead of the custom control definition Using property editors Provides a better user experience Property editors can be assigned to help users setting values Leveraging the pretty panels (8.5.2) Some panels are automatically displayed if the control contains some properties Data panel Style panel Dojo panel 85

86 Localization 86

87 Localizing XPages Applications One default language Render language defined through browser language property Can be overwritten using the context object Strings are stored in standard Java properties files Special characters are stored as Unicode numbers Good use for ANT automation scripts (free Domino Designer plug-in) No translation of HTML 87

88 XPages Servlet Engine 88

89 What is the Servlet API? The servlet API is defined as part of the J2EE specification XPages uses a 2.4 extended servlet engine The content of the NSF is projected as the web module content JSF External Context The External Context is available through the facescontext global object The External Context gives access to: The servlet request The servlet response The http session 89

90 Tips and tricks with the Servlet API How to access the URL?... The XPages view object has a requesturl property 90

91 Render your Own Content Set rendered=false for the Xpage In the beforerenderresult get the ResponseStream() for binary content - or - In the afterrenderresult get the ResponseW riter() for text content (= the replacement for LotusScript print statement) Add a render complete to the result 91

92 XPages and managed Beans 92

93 Managed Beans Define the scope: request, page, session, application Standard Java Bean class (needs a parameterless constructor) Mapping to a global name in faces-config.xml Can be used in JavaScript like the global build in objects Good for external stuff 93

94 XPages On The Client 94

95 Execution Modes Local Remote NSF is in local data folder or sub-directory All data and resources are loaded locally and executed in local web container NSF resides on a Lotus Domino server Data and resources are loaded across a network Application logic is executed in the local web container No XPages code executes on the server Consistent with the existing client model 95

96 XPages on the Client - Architecture Similar to the server/web architecture Notes Client Embedded XUL Runner XPages requests sent to an embedded Java Web container Web Container XPages UI Container XPages Runtime In Short NSF apps have a new XPages client launch option When app is opened, this URL is passed to XPages client container The container further transforms the URL... Creates a instance of the XULRunner browser Sends a secure request to client web container The web container routes all XSP requests to the XPages runtime XPages runtime renders pages back to the XULRunner browser 96 The XPages runtime inserts as a generic web module and provides a virtual container for NSFs Each NSF can be projected as an autodeployed Web Module. NSF design elements (XSP, Java class files ) are made available as module resources to the servlet API.

97 Launching XPages in the Notes Client Launch Properties can be set in both Lotus Notes and Lotus Domino Designer Notes Client: Lotus Domino Designer: 97

98 Execution Modes Local Remote NSF is in local data folder or sub-directory All data and resources are loaded locally and executed in local web container NSF resides on a Lotus Domino server Data and resources are loaded across a network Application logic is executed in the local web container No XPages code executes on the server Consistent with the existing client model 98

99 Customization of XPages in Notes Rich Client Platform Specific Properties Native Platform Dialogs Client Themes XPages Toolbar Ability to customize application user experience for the Notes Client Navigation, Clear Cache / Refresh Page, View Source, Print / Page Setup enablemodifiedflag Prompt to save any modified content Bookmarking XPages Failover Support 99

100 Customization of XPages in Notes SW T Dialogs instead of JavaScript Alert / Confirm Dialogs Web Notes Client Client Side JavaScript Access to Java Platform Services XSP.Alert() XSP.Xxx(); XSP._NotPublished(); 100

101 Customization of XPages in Notes Rich Client Platform Specific Properties Provide a different user experience in W eb and in Notes In Notes, analogous to traditional 'hide/when' functionality e.g. Discussion Template Toolbar <xp:label value="w elcome " id="labelw elcome"> <xp:label.rcp rendered="false"></ xp:label.rcp> </xp:label> <xp:text escape="true" id="cfusername" value=".."> <xp:text.rcp rendered="false"></xp:text.rcp> </xp:text> 101

102 enablemodifiedflag Integrated with Notes Client document save model Alerts user to unsaved content on certain events <Esc> / Close Window Navigation to other page (client + web) Applying enablemodifiedflag Main Save menu sensitive to modified document content Hooks explicit File Save / {Ctl}{S} operations Can be applied to any input control Default setting overrides the need to specify behavior in many places disablemodifiedflag flag allows an input control to explicitly opt out of the process Handles client side and server side validation scenarios Client side JavaScript reports an error before save can be performed Server side validator finds an error after the page is submitted 102

103 XPages Client Theme Support for Client Themes Application Properties panel extended Different look and feel when applications are used in the Notes Client Allow property setting for Application, Web and Client Themes No Out of the Box Client Theme for /

104 XPages & Composite Applications Full integration with Composite Applications in Component A new Component design element Define Publish & Receive Events for interaction with other components Define Parameters to conditionalize component behavior Uses iwidget format W ire XPages components together or with other components Comp App supports XPages applications and XPages Components PIM (mail), Managed Browser Symphony Containers Widgets... New XPages Simple Actions to easily handle Publish Events Receive Events handled with JavaScript 104

105 XPages in Composite Applications Editor Adding an XPages Application/Component to a Composite Application Easy peasy select Notes URL via the design element picker or just specify manually 105

106 XPages in Composite Applications XPages Discussion Component Google Widget Notes Mail View 106

107 All Permissions Security Properties Network File Java Security Key Objective Prevent an XPages Application from executing Java code that could read data from the users workstation and transmit it to a remote host over the network. XPages Java Security Manager integrated with the Notes Execution Control List (ECL) service Notes Client Execution Security Alert dialog used to warn a user when code in an XPages application executes a protected operation User can: Deny the action Trust it one time only Modify the ECL so that it will always be a trusted action 107

108 Security Java backend classes security correctly surfaced in XPiNC Client Side JavaScript Access to Java Platform Services Session IDs Limited client platform services available via client side JavaScript Mostly UI functions like dialog rendering Assigned when an application is opened using XPages Persists until the Notes Tab is closed Port Number in XPages URL Randomly generated when Notes Client is launched Persists until the Notes Client is closed 108

109 Link Handling & Document Interoperability Domino web links / Notes client links XPages uses MIME format when storing documents on the web and client No web/client interoperabiltiy issues for pure XPages apps Traditional Notes applications use a native CD binary format for rich text Native rich text document must undergo a conversion for XPages to display Happens automatically in CD / MIME conversions can be lossy on certain content types Can occur when users are using regular Notes client & XPiNC on same app Same scenario as when Notes client apps also serve as Domino web apps User is warned of potential format loss if writing a document that requires conversion 8.5.x aims for better round-tripping of rich text documents Links in Traditional Notes App "The Same links when viewed in XPiNC information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion" 109

110 Window Management W indow Management Lift single-window restriction on XPages client applications e.g. Allow documents to be opened in new window like traditional Notes client apps Dictate behavior by preference settings Leverage existing client preferences Enable this option for Links Page navigations View column selections "The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion" 110

111 Integration in Mashup, Portal & Composite Applications 111

112 Domino iwidget Being able to run any XPage as an iw idget A developer just needs to register the XPage as an iwidget No changes are requested to the page Add some entry in the Lotus Mashup catalog Share the artifacts with the Rich Client Incrementally add iw idget related behaviors Event Publishing/Handling Component parameters Support for modes (view, edit, help...) Make the user experience easy through Domino Designer 112

113 High Level Architecture Lotus Mashup Server Domino Server Widget Catalog iwidget Servlet Proxy server XPages Renderer Application Database - XPages - Components Lotus Mashup and the Domino Server don t have to run on the same machine The Domino server serves the iwidget definitions and the XPages markup The iwidget servlet composes the widget.xml on the fly XPages content is served by the regular XPages runtime Domino iwidget rendered in an iframe 113 The Lotus Mashup proxy server is used whenever necessary Uses HTML 5 extensions when available (FF3, IE8...), else uses the proxy

114 Deep Dive Into OneUI 114

115 IBM OneUI 115

116 Why & How of OneUI Standard Structure for pages Clear class names for elements Not bound to one specific color Lower help desk calls due familiarity of applications CSS / Theme preinstalled on Domino 8.5.x ( uid=swg ) <resource> <content-type>text/css</content-type> <href>/.ibmxspres/domino/oneuiv2/base/ core.css</href> </resource> 116

117 XPages Optimization 117

118 * 118

119 Understanding the problems The six phase server-side XPages lifecycle finishes by rendering the response to the requesting browser Several processing stages are then executed on the response content before it is viewable or completed within the requesting browser How you design and implement your XPages code has an impact on the efficiency of these processing stages Factors to consider include: Number of components on the page Complexity of script (both server- and client-side) Mass weight of resources (images, CSS, etc) Use of Ajax requests And so on

120 Tools Profiling Your Application Firebug Firefox extension PageSpeed YSlow! Firefox/Firebug extension Firefox/Firebug extension Speed Tracer Google Chrome Extension 120

121 Tools - Firebug 121

122 Tools Page Speed 122

123 Tools YSlow! 123

124 Tools Speed Tracer 124

125 Performance CPU Optimization Avoid all the other lifecycle phases whenever possible This means use GET requests when possible Instead of using an "Open Page" simple action for a link, use the link type (URL or Open Page) and Parameters properties This has several side effects: Phases 1-5 of are not processed, as this is just a GET It avoids an HTTP Client Redirect request Because the browser needs to be aware of the new page, the "Open Page" simple action (or any redirect...() method in the context object) sends a redirect instruction to the browser, which then generates a GET request Use case Links within a view to open the associated document but also supply querystring information. Lets have a look

126 Performance Data Processing Optimization In some cases, you just need to identify the event coming from the client and then redirect to another page without any data processing. In this case, you don't need to apply the request values, validate them, update them... The best example for this is a Cancel button, when you just want to go back to the previous page Achieved by using the immediate property of the event handler With this option set, phases 3, 4, and 5 are avoided, and the data is not processed Use this option when your event handler just needs to do some server side processing, but redirect to a different page afterwards Use cases: Server side redirect action and avoiding processing of current form. Lets have a look

127 Performance Execution Mode Optimization If only a portion of the page should be updated and processed, then the EventHandler has an option called Execution Mode (execmode) Two values are possible: full (default), or partial Partial restricts lifecycle execution to that control Another complimentary property is also available execid This allows a target control to be specified This allows Phases 2, 3, 4, and 5 to be processed on the submitting control, and any children referenced by the event handler If the control is within a repeat, then the repetition is not executed but only the required occurrence to reach the control is processed Use case Executing a single document within a multi-document XPage. Lets have a look

128 Scalability Data Cache Optimization W hen a view is used, the server has to save the values displayed by the page in case of a postback request. This ensures that the same data will be processed during the postback, and makes available the view data as it was when the page was rendered, regardless of what happened in the database since the initial request This has 2 side effects: Data saved for the page consumes a large amount of memory Extra processing as some objects cannot be kept in memory between requests 128

129 Scalability Data Cache Optimization If the data is not needed between requests (e.g. if there is no action using getcolumnvalue(), for example), then only the id and some other basic data, like the position, should be kept in memory This is achieved through a new View datacache property: The possible values are: full: the full data set should be retained in memory id: only the id should be kept in memory between requests. Postback access to values is not permitted Use this option to save on memory and CPU processing Use case A complex view vs. a simple view. Lets have a look

130 Performance Server Page Persistence For the Restore View phase of the lifecycle, there is now a property in that allows you to control the persistence of XPages within the server By default, the last 4 XPages are always persisted to aid retrieval of a page Improves server performance by reducing amount of processing Some applications will perform better based on how this property is set Low number of application users suits Keep pages in memory High number of application users suits Keep pages on disk Indeterminent number of application users suits Keep the current page in memory Use case High vs.low throughput application Lets have a look

131 Integrating business logic W hen making use of the scoped variables (sessionscope,...), it is better to use native JavaTM objects over JavaScript variables Most beneficial when implementing caching mechanisms Prefer use of Java HashMap over JavaScript Array Load Java objects into the HashMap Minimize instantiation of Java objects with the new operator, instead use static classes and methods var utilityobject = new com.foo.logic.utility(); var result = utilityobject.processdocument(document.getid()); var result = com.foo.logic.utility.processdocument(document.getid()); 131

132 Performance by Design for the Browser 132

133 Less Is More W hen a control is instantiated new objects are created, these java new calls are expensive. More objects also means more memory usage Consider breaking your page into following controls, Header Navigation Content (can have multiple e.g. edit / view) Footer 133

134 Requesting Pages Use GET instead of POST when not submitting data i.e. Use direct links GET requires less phases of the JSF lifecycle Partial Updates Partial updates make considerable less calls over the network. Instead of request the complete page and possibly all its associated files only a small portion of the the page is requested Only that portion of the JSF Tree is processed partialexecute 134

135 Data Sources Declaring a data source has an overhead wheather the data source is used or not. Do not pre-emptively declare data sources Declare your data sources deep in your application just before you need them. In certain may be quicker e.g. Displaing the contents of a small can still be used with <xp:repeat> 135

136 When to Execute - # vs $ # Executed every time the page is rendered Use for values that are likely to change $ Executed when the page is first loaded Use for values that don't change 136

137 Use The Correct Tag <xp:div> should be used when you want a simple container. <xp:panel> is intended to contain editable data. If <xp:div>will do the same job use it. If you still want to use <xp:panel> but the content is only read-only be sure to set or compute the read-only attribute to true Use <xp:scriptblock> to insert computed client side JavaScript 137

138 Scopes viewscope requestscope Exists for the life of a request ( can span pages) sessionscope Exists for the life a view (rendering of a page) Exists for the life of user session i.e. Until they log-off, timeout or close browser applicationscope Exists for the first loading of the application until a timeout (default is 30 mins) 138

139 Network/Web Optimization's Goal Reducing requests Less requests Less Bandwidth Cache should be set for a long period or idenfity Increment file names and links when a file changes Reducing Bandwidth Smaller files 139

140 Network/Web Optimization's - Images Use correct file type depending on content JPEG for complexed detailed images PNG/GIF for simple images, fonts, transparencies GZip will not add any benefit. Size the image to size you intend to use Resizing using html attributes height and width will delay the rendering of your page Images larger than necessary will waste bandwidth. 140

141 Network/Web Optimization's - CSS Externalize styling so it can be cached and reused Combine CSS files Minify the CSS files Remove formatting and whitespace Keep re-usablity in mind Less files reduces overhead on the network Simple identifiers are more reusable Don't use complex identifiers.classname div div div ul li span{...} Avoid duplication GZip CSS files stored on disk 141

142 Network/Web Optimization's CSS Sprites Background images can be combined into one file. The background image can be offset to correct position Dramatically reduces number of requests for images. 142

143 Non-Optimized Site 875ms to completely load the page 143

144 Optimized Site 271ms to completely load the page Exactly the same content in one third the time 144

145 Upgrading Existing Applications 145

146 Analyze your application How much UI code you you have? Field enter / exit events UI classes Hide W hen W hich forms use Refresh field on keyword change? How much encryption does your application use? How complex are your subs and functions? How do you use RichText (if any)? 146

147 Sample Report* *Reports are available on OpenNTF 147

148 Platform comparison IBM Lotus Notes Client Application Classic Lotus Domino web Application XPages application Session permanent Time based Time based State Full state information Stateless Partially available Programming LotusScript JavaScript LotusScript JavaScript Java JavaScript Java UI RichText HTML translated HTML / Dojo from RichText RichText support full 148 weak partial

149 Platform comparison Notes Client Application Classic Domino web Application XPages application Update Full & Partial & Distributed Full only Full & Partial (single region) Encryption / Signature Yes No Under consideration Layout Free, typically 2 Free Frames for views, form Full Screen Free OneUI recommended Sections Standard & Access Controlled Standard only Standard (Access controlled under consideration) Hide when Per paragraph Per paragraph + HTML DOM Per element 149

150 Key Questions Sequence of enhancements Views first Easy forms Complex forms W hat UI to pick? 1:1 translation OneUI New corporate look How much refactoring? Good chance to clean-up Refactoring least understood concept for NMU 150

151 Translate Classic Notes to XPages Notes artifact XPages artifact Notes Form XPage and a serverside JS library with a governing JS object, Custom Control Notes Subform Custom control Notes View XPage with embedded view

152 Translate Classic Notes to XPages Notes artifact XPages artifact View Actions Custom control with unordered list (ul) of action links, server side JS library Notes fields Controls with data binding Notes tables Table control Notes tabbed table Hide when formula Tab control in conjunctions with content panels visibility formula in conjunction with a page wide governing object

153 Translate Classic Notes to XPages Notes artifact XPages artifact Single panel table accordeon container Section combination of 2 panels and 2 images and an action to expand/collapse (Dojo) Text fields Input boxes or Dijit Text Area. Access controlled section custom control build of 3 panels Button, Color pick. Button, Dijit Color picker Lotus Script client JavaScript functions

154 Translate Classic Notes to XPages Notes artifact XPages artifact RichText Mime Based RichText Names (+Au, +Re) Custom control with name picker Framesets Dropped for Ajax UI Outlines Lists of links styled with CSS Embedded views views in a XPage Pages XPages Agent Agents called from a XPage event

155 You need a plan (1)

156 You need a plan (2)

157 Like for Like Development Practices Views (including categorized) Action Bars Data Forms Ability to create, edit or submit these forms Sub Forms Navigators (maybe using Outlines) Sections Search Business Logic as either Lotusscript or Java 157

158 Views Three possibilities in XPages View Control (simple and wizard driven) Data Table Control (manually created but tick boxes to add pagers, allows more flexibility) Repeat Control (manually created, maximum flexibility, powerful tool) 158

159 Views For quick easy views the view control is the way For things you couldn't do with Lotus Domino views repeats are your friend Categorized Views Best to use View Control, manual creation in Repeat View control automatically shows category twistie for categorised columns as before Is not a property is read from view design Embedded Filter By Category Views Many rows per document Rich Text possibilities Control everything Can be done via property categoryfilter of the view data source Upgrade Tip bookmarks to view links Could exist Currently not an XPage redirect available Live with it or use a Web Site Rule - Substitution 159

160 View Pagers Domino Formula based commands for View Pagers XPages has an easily customisable control to drag and drop, and is added automatically with View Control Repeat Controls just need a simple attach to field setting in the Repeat Control 160

161 Action Bars In Domino you have fixed Action Bars with the ability to add free form buttons in forms XPages has buttons where can be added where you need them 161

162 Data Forms Existing Notes Forms used for their schema definition Default values, computations still valid (compute with form etc) Connect from XPage via Data Source 162

163 Data Forms Upgrade Tip - Getting Existing Documents to launch using an XPage instead If a user has a bookmark to an existing view/ document url internally the XPages code will redirect to the XPage url Setting in Form Properties second tab Display XPage instead 163

164 Create, edit or submit data forms Domino uses action bars for buttons and formulas ([Compose]; form ) XPages has buttons with simple actions (although code is still possible) Data source has a property computew ithform (onload, onsave, both) 164

165 Sub Forms Not usable in XPage development Recreate those as custom controls for similar reuse If they contain fields that are not on forms then those fields are available in XPages, however Designer does not pick them (so manual typing) For long term and complex applications consider creating a new form as a clear data schema and include all fields and remove sub forms 165

166 Navigators/Outlines Outlines currently have no out of the box automatic replacement However this is web development so many easy examples available to reuse OpenNTF.org has a few controls for download. The discussion and wiki template's use these 166

167 Sections Notes development has sections Standard Controlled Access XPages also has sections via the section Container Controls Similar properties to Notes Can be Controlled Access via the visible property 167

168 Search Domino development has built in search and results form (together with custom built options via $$SearchTemplate etc) XPages offers simple inline search or custom built search query and results custom controls/xpages (but built yourself or downloaded from openntf.org) The concept is just adding a Search query to the data source in use for that XPage Give the search property a value, say collect something from the url param.searchvalue Optional parameter using searchmaxdocs to restrict number of results returned for search 168

169 Search Then supply an Edit Box to take search parameter In Data properties link to Scoped Variable - View Scope and give data a name (this then places the data in memory to be picked up by search action Link) 169

170 Search Lastly add a Link control to submit search request Using either a computed Link or onclick Event compute the next page or url and retrieve search value using viewscope.searchvalue. Example computed url: xpage.xsp?searchvalue=" + viewscope.searchvalue 170

171 Advanced Search Show/Hide parts of your view depending on whether a search parameter is detected for things like Searching For: Term Basic and Advanced Search custom Controls available on OpenNTF They plug into your application and obviously code is open to customize 171

172 Business Logic Existing Logic maybe in Lotuscript or Java Agents/Libraries Default Language for XPages is Server Side JavaScript (SSJS) SSJS supports the full Notes Domino object model like LotusScript You can in that language but not LotusScript W hat to do? agent.runonserver(docid) on postsavedocument event This will run your agent, send it the id of the to be processed document XPage code will resume once the agent has finished Agent needs to retrieve its own context document using the id passed doc = db.getdocumentbyid(agent.parameterdocid) 172

173 Business Logic Your choices: Keep as is will work fine via previously described method (improvements planned for maintenance releases) Rewrite using SSJS Bigger/More advanced stuff maybe rewrite in java and this can be used direct from SSJS or perhaps at more advanced level like managed java beans Note from the code examples that the SSJS looks similar to LotusScript 173

174 Web Query Open / Web Query Save Your favourite question it seems W QO/W QS agents are only usable via the previous method described XPages themselves have a full array of events that take over from these making them more flexible Range from data events that match those available in existing Notes development To XPage lifecycle events like beforepageload, afterpageload etc 174

175 Extra know you need Rich Text Multiple Data Forms (ie responding to other documents) $$ViewTemplate's $$ErrorTemplates Multiple NSF's 175

176 Rich Text XPages improves rich text handling, a lot Out of the box Dojo Rich Text Control Automatic Filters for XSS Easy use of a Custom Convertor to parse results if you choose (wiki markup perhaps) 176

177 Multiple Data Forms XPages allow multiple data sources on one page 1 Form 1 View, 1 Form 2 Views, 2 Forms 1 View etc etc You can link them together to display depending on other selections Views are simple, Forms need some thought The master Form is controlled via the XPages model Subsequent Forms you have to drive and unlock from the master Use data source setting ignorerequestparams=true to do this 177

178 $$ViewTemplate's Domino has $$ViewTemplates and we can provide one design element to style how all views look within a browser XPages doesn't have this concept however there are other design patterns available 1 Custom control with custom properties determining view Columns must be identical though Use a custom control as an overall design for your site and add an Editable Area to contain the view control 178

179 $$ErrorTemplates Errors used to be caught by $$ErrorTemplates XPages by default gives you Error 500 Turn on error page via App Properties > Xpages > Display default error page But gives an error to the user So we can also select a pre created Error Page 179

180 $$ErrorTemplates W ith a custom Error XPage you can send a friendly message to the user and send the real error to a log You add a computed field and either enter requestscope.error in the JavaScript editor or add a request scope variable called error The 'error' variable contains the actual Java Exception object Using java.lang.throwable methods, you can create a more detailed error message 180

181 Multiple NSF's Some existing applications may span multiple nsf's Maybe for different entry points but mainly as data silo's XPages makes it easier to retrieve and combine this data on one XPage (do not read this as joining views across nsf's presentation only) Good practice maybe would be to combine XPage design in one nsf XPages in the Client currently has a security restriction launching an XPage in another nsf Key tip here is when you create views and you want to launch a specific XPage, use the column property open selected document using to select that XPage 181

182 Extra know to accelerate you forward Type Ahead Field Validation Date Time Pickers Linked Combo Boxes File Upload Dojo W idgets Tabbed Tables OneUI XSS Protection Relational Database Access OpenNTF 182

183 Type Ahead Simple to turn on for any field just Enable Type Ahead in Type Ahead property box Then supply a Notes view to get the suggestions from Fine tune Mode (partial, full), separator, minimum characters 183

184 Field Validation Enabled within properties for each field From simple required field to conditional and string length checking To enable basic validation go to Validation tab of Edit Box properties 184

185 Field Validation Advanced More advanced use add a validator via All Properties Can add as many validators as you like Flexible options adding a customvalidator allows you to do things like checking for duplicate field value 185

186 Field Validation displaying message to user You use Core Control Display Error or Display Errors to position where the user sees the error when they submit the data. Simple drag the control to where you want it to display For Display Error - just link it to the field that has the validation 186

187 Date time Picker Core control just drag and drop onto your XPage no coding required Just a standard edit box linked to a date/time field with property Use date/time picker pop-up set 187

188 Linked Combo Boxes Options in a second combo box are dependent on the value selected in the first one Create two Combo Boxes (first with manual values if required) First Combo set Partial Update and id of second Combo, also set do not validate Second Combo add a computed item for values lookup first combo and use for filter for 188

189 Linked Combo Boxes 189

190 File Upload (and download) Drag and Drop Core controls Just need to specify which field to attach the files to Customizable 190

191 Dojo Widgets As well as the out of the box dojo core controls you can use others Such as Dialog, Tree, Progress Bar, etc ( Need to add dojoparseonload=true & dojotheme=true to XPage Then add the dojo module resource you need eg dijit.dialog XPage elements have a dojotype & dojoattributes which you use 191

192 Tabbed Tables XPages has a drag and drop core control Tabbed Panel Very simple configuration Drag and Drop the other controls etc you wish to be on each tab 192

193 Testing & Debugging XPages Applications 193

194 Tools Unit Tests XPages Controls inspector Medusa for XPages print() _dump() 194

195 Unit Tests Courtesy of Lorcan McDonald (IBM Lab Dublin) Available on OpenNTF Test Driven Development (get used to it) 195

196 XPage controls Inspector Available on OpenNTF 196

197 Medusa for XPages Extension to Firefox Firebug Plug-in 197

198 XPiNC Testing / Debugging Lotus Domino Designer Preview XPages Client Toolbar View Source Clear Private Data / Refresh View Browser Configuration Error Logging <NOTES_INSTALL_DIR>/data/ IBM_TECHNICAL_SUPPORT Help > Support > View Trace Help > Support > View Log 198 Client Preview Cache Management Web Preview View Source View Config

199 XPiNC Testing / Debugging ClientSide JavaScript Error Reporting: In Notes status bar Enable Firebug Lite Rename xsp.properties.sample in <NotesData>/properties to xsp.properties Comment in the line: xsp.client.script.dojo.djconfig=isdebug:true Restart the Notes Client. ServerSide JavaScript Error Reporting: Append -RPARAMS -console to the shortcut that launches Notes e.g. C:\Notes\notes.exe -RPARAMS -console Notes Client will launch with a console window print() and _dump() statements output to the console 199

200 Mobile Development 200

201 Biggest challenge: Screen size! 201

202 XPages on iphone* OpenNTF Project Split application into widgets Scripting dependency on Dojo - won't work in older browsers * or BlackBerry, or Android or

203 XPages on Blackberry - Browser (W ebkit upgrade pending) - Partner solution native (Teamstudio) 203

204 XPages Extensibility API

205 Extending The XPages Runtime By creating Custom Controls design elements Easy to develop, just uses XPages and script language Embedded inside an NSF Powerful, but don't have access to the full JSF API By extending the runtime with your existing Java code Adding Java libraries to the runtime (jar files) By calling Java from XPages (JavaScript bridge, EL, managed beans...) By providing native JSF/XPages libraries Requires knowledge of Java, JSF and XPages native API 205

206 XPages Concepts XPages Library Controls OSGi bundle (plug-ins) that contains Java code, configuration files and resources Reusable components that appear in the Designer palette Renderers A renderer defines how a control is rendered at runtime Outputs HTML and client JavaScript to the browser Complex types Other XPages objects used by controls to store parameters and encapsulate behaviors Some examples Data sources, simple actions, validators, converters

207 Creating controls at runtime // Parent of the new control var mypanel = getcomponent("actionpanel"); // Java Class of the new control var newbox:com.ibm.xsp.component.xp.xspinputtext = new com.ibm.xsp.component.xp.xspinputtext(); // Setting parameters newbox.settitle("a title"); // adding to the internal tree mypanel.getchildren().add(newbox); 207

208 XPages Extension Demo 208

209 A Glimpse to the Future XPages is strategic for Notes/Domino We continue to invest on this technology This is not a commitment on the new features being developed This shows the direction we are taking This is provided as information to keep you updated and get your feedback The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any f eatures or functionality described for our products remains at our sole discretion 209

210 XPages Next Generation XPages stateless mode Generates HTML without the server side life cycle Rich HTML interfaces Dojo dijits Still leverages XPages strengths Component/renderkit model, Page composition, Localization, i18n, Security, Dynamic page generation, Simple actions, Script languages for business logic XPages embraces REST services Generated UI bind to data coming from REST services Existing or custom services Should be able to easily produce REST services On both the Domino server and the Notes client, using the available Web container Extend existing services with custom business logic 210

211 Advanced Dojo Based Controls Dynamic Tooltips Scrollable Grid Popup Dialogs Calendar Control Tag Cloud 211 Dynamic Outline

212 Better Rich Client Integration W e have started to address some of these points in 8.5.x "The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion" 212

213 And also... Improving the reuse of existing assets Data sources Relational data access Mobile devices support LotusScript libraries, existing design elements (forms, views...) Detecting the devices, dedicated themes, accessing the device capability... Integration with other products in the portfolio Sametime, Connections

214 Resources Lotus Domino Designer wiki powered by XPages! OpenNTF Open source developer community Planet Lotus Aggregation of Lotus related blogs. Lots of Domino app dev related posts planetlotus.org XPages blog: IBM DeveloperW orks XPages Pod Cast: Bleedyellow.com (Sametime: im.bleedyellow.com ) 214