What is an XPage? - LSBG

Xpages workshop 9. og 10. November 2010Vidar Svendsen | Lotus Techsale

XPages workshop 9. og 10. november 2010●Velkommen●Intro●Runden●Hva vi skal gjennom I dag:09:00 Start, Kaffe12:00 lunsj13:00 frukt, kaffe16:00 ferdig for i dag2

Intro●Vidar Svendsen●Lotus Techsale fra 2009●ISSL konsulent/utvikler fra 2000 til 2009●Vidar.Svendsen@no.ibm.com●Mobil: 41 53 53 083

“runden”●●●HvemHvaHvor●Tanker rundt bruk av Xpages4

Hva vi skal gjennom●●●●xpages bakgrunn, prinsipperØvelserØvelserØvelser●●●Avanserte xpages tipsØvelserØvelser5

XPages Continues Its Way!2009Domino 8.5- First release of XPages- Runs on the Dominoserver2010Notes/Domino 8.5.1Notes/Domino 8.5.x• - Stability/performance•improvements- Runs within the Notes client••- Better client integration- Generates iWidget••- Fixing pending- Active Content Filtering•issues/requests- Performance/scalability• - ExtensibilityimprovementsLater...Notes/Domino next• - XPages next generation•- Consumes/generates RESTservices•- Generates Dojo based UI•- Advanced set of Webcontrols• - Full client integration• - Mobile devices support• - Integration with other Lotusproducts•- Quickr, Connections,Sametime• - More data sources (RDBMS...)• - iWidget consumptionThe 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. Theinformation 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 acommitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionalitydescribed for our products remains at our sole discretion6

Why XPages?●●●●Separation of data and presentation▬▬Build multiple presentations to the same document storeCreate web, Notes and mobile interfacesNew user functionality▬▬▬▬Type-aheadPartial page refreshCombine data from multiple views/sourcesBreak out of Domino presentation norms (navigator + view)Consistent user interface▬▬▬Deep CSS integration in UI controlsApply CSS styles and themes (themes are higher-level organizations of CSSs)Reuse CSS from existing web appsReduction in development costs▬▬▬Use highly flexible UI controlsCreate cleaner solutions that are inherently less costly to produce and maintainAvoid hacks7

Why XPages?●Leverages Notes/Domino strengths:▬▬▬▬▬Security;▬▬▬User identificationEncryptionAccess controlReplicationOffline accessClusteringNotes object store●Why is this important?▬XPages is a modern, very compelling presentation tool. But look what it's sitting on! There's areason companies have 1000s of apps – Domino works. The question of whether to use XPagesisn't a presentation one, it's a question of whether the app fits Domino's document-centric storagemodel. If so, XPages is a VERY compelling choice. We've beaten .NET in a bake-off.8

Why XPages?●Some interesting things you can do over Notes development:▬▬▬▬▬▬▬▬▬▬hide/when on individual controldynamic HTMLleverage 3rd party controlsauto type-aheadauto validation based on regexseparate presentation from datamultiple presentations for multiple conditionsstylingshare code easily (post XPage or custom control to blog)localize using standard properties files9

XPages Basics●●●●●IDEWhat is an XPage?Data SourcesControlsScript10

IDE11

What is an XPage?●●●●XML documentMarkup and controls aggregated together on a page▬Component have properties, events and can emit markupMarkup and components compiled to Java and executed in Domino's (orNotes client's) servlet containerCompilation happens in IDE12

Server Architecture13

Client Architecture14

Data SourcesDocument and View Data Sources are buffersbetween controls and real Domino documentand view objectsDominoDocumentData SourceNSFDominoViewData SourceNSF………Extendiblearchitecture allowsnew data sourcesto be added later,e.g. relational dbs,web services, etc.15

Controls●●●●Core Controls▬Edit Box, Check Box, Button, Computed Field,etc.Container Controls▬▬▬▬Panel, Table, View, Data Table, Section, RepeatContain other controlsSome can be bound to Data Sources (View,Data Table, Repeat)Panels often used to group controls for applyingstyles, partial refresh, visibility, etc.Properties▬▬▬Events▬▬Name, visibility, style, width, height, binding, …Some properties exposed in UIRest are exposed in All Propertiesonclick, onchange, …onclick used most often, in Links and Buttons16

Script●●Client-side script▬▬▬▬Normal browser JavaScriptalert(“Hello World”);Access to global objects like window, documentUse expression to resolve DOM Ids on controls▬▬XPages generates unique IDs for its elementsResolve DOM ID with expression #{id:control_name}Server-side script▬▬▬▬●example: document.getElementById("#{id:inputText1}");Execute logic server-sideGlobal objects (Notes and XSP)▬session, database, currentDocument, …Can call Java seamlesslyMost of your XPages development will be server-side JavaScript (SSJS)17

XPages Development ModelXPagesarchitectureDrag & dropapplicationbuilding usingXPagesJavaScriptlibraries andcustom controlsIntegration ofJavalibraries/classesUse managedbeans andadvancedextensionsAdvanced users withdevelopment skillsUse theXPages nativeAPIJava developersXPages Extensibility API8.5.xPower users18

From good old notes app to xpages app19

Translate Classic Notes to XPagesNotes artifactNotes FormNotes SubformXPages artifactXPage and a serverside JS librarywith a governing JS object, CustomControlCustom controlNotes ViewXPage with embedded view

Translate Classic Notes to XPagesNotes artifactView ActionsNotes fieldsNotes tablesNotes tabbedtableHide whenformulaXPages artifactCustom control with unordered list(ul) of action links, server side JSlibraryControls with data bindingTable controlTab control in conjunctions withcontent panelsvisibility formula in conjunctionwith a page wide governing object

Translate Classic Notes to XPagesNotes artifactSingle panel tableSectionText fieldsAccess controlledsectionButton, Color pick.Lotus Script clientXPages artifactaccordeon containercombination of 2 panels and 2 images andan action to expand/collapse (Dojo)Input boxes or Dijit Text Area.custom control build of 3 panelsButton, Dijit Color pickerJavaScript functions

Translate Classic Notes to XPagesNotes artifactXPages artifactRichText Mime Based RichTextNames (+Au,+Re)Custom control with name pickerFramesets Dropped for Ajax UIOutlines Lists of links styled with CSSEmbedded views views in a XPagePagesXPagesAgentAgents called from a XPage event

JSF Processing Modelhttp://www.ibm.com/developerworks/java/library/j-jsf2/24

Øvelser...25