Xpages för utvecklare

Workshop xPages

Thomas Adrianwww.notessidan.se

Agenda

– Kunskapströskeln– Fördelar– Nackdelar– En snabb demo av notessidan.se– Demo av olika funktioner– Fika– Workshop Projektrum

● Formulär + validering och actions● Vyer

Hur jag lärt mig xPages● Läst bloggar,

planetlotus.org

● Läst dokumentationenhttp://publib.boulder.ibm.com/infocenter/domhelp/v8r0/index.jsp

● Läst och deltagit på notes.net forum

● Chat forum #dojo

● Xpages Wiki: http://www.youatnotes.de/web/youatnotes/wiki-xpages.nsf/home.xsp

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

● http://www.jmackey.net/

● Byggt själv

Kunskapströskeln● Eclipse (Outline, Navigator, Problem, Properties, Events, controls)

● HTML

● Stylesheet / Themes

● Ajax, partial refresh

● Lotusscript/@formulas/Javascript (ev. java)

● Dojo och Dijit

● Controls (32) och Custom Controls

● Client side js (csjs)

● Server side js (ssjs)

● Globala object och Scoped variables

● JSF + navigator

Fördelar● Man behöver inte förändra befintliga applikationerna.

● Man kan bygga väldigt komplicerade applikationer utan att skriva en rad kod, man får mycket gratis. t.ex. validering och type-ahead

● Flera datakällor på samma xPage, tex. Join i en vy

● Varje kontroll är bunden till en data källa

● Lätt att göra flerspråkiga websidor

● Lätt att bygga ett ramverk med ”editable area”

● Inbyggt stöd för dojo och oneui

● En xpage behöver inte ligga i databasen där datat ligger

● Kan köras i notesklienten 8.5.1 (med klientens ECL)

Nackdelar● Många klick

● Svårt att kombinera ”egen kod” med xPage funktionalitet. tex. Egna <script></script>

● ID hanteringen är omständig<div id="view:_id1:_id13:repeat1:0:divSubject">

● En xPage kan bara generera HTML, (inte xml, json, sql etc)

● Bristfällig dokumentation

● Säkerhetsmodellen, agenter?

● All UI kod i lotusscript måste skrivas om (men det är inte på grund av xpages)

● Buggig

Verktyg för Webutveckling

● Utveckla för Firefox, testa i IE● Firefox eller Chrome● Firebug (FF tillägg)● JSView (FF tillägg)● Firebug lite (IE)● Live HTTP headers (FF tillägg)

En Xpage● Är i webläsaren kompilerad java kod som körs som en servlet

● Är bara en ”dum” html sida innan du binder kontroller och datakällor till den

● Liknar ett formulär.

● En container för att lagra controller

● Kan bindas till flera datakällor

● Kan innehålla Custom Controls

● Är JSF

● Har events för load ( typ WQO)

Custom Controls

● Liknar subformulär● Kan innehålla andra custom controls● Kan inte användas utan en xpage● Kan ta parametrar (bra om man t.ex. Vill

skapa custom controls som kan användas var som heltst, tex. Tooltip, eller Dialoger)

● Har events för load ( typ WQO)

Controlsrepeat, panels , edit box etc..

● några har event, andra inte● några kan nestlas i varandra, andra inte● Alla har sina egna egenskaper och API● Några kan man koppla till data källor, andra

inte● Man kan göra egna

Repeat Control

● Antagligen den coolaste funktionen i hela xPages , (en del tycker Editable Areas)

● Data behöver inte se ut som en tabell● I stort sett vad som helst kan repeteras● Repeat kan nestlas● Inte bara för dokument

– Arrays– Json– Multivalue fields

Exempel på egna controls

● Tooltips● Dialoger● Create PDF● Movie/Flash● Actionbar● Drop down Menu● Document history● Cloud

● Tree ● Workflow● Picture gallery● Rating● Charting● Login/Logot● Multi file upload● ....

Scoped Variablescookies på servern

● ApplicationScopeTillgänglig för alla användareTas bort efter en viss tid

● SessionScopeTillgänglig för aktuell användare

● ViewScopeTillgänglig för aktuell websida

● RequestScopeTillgänglig för aktuell request

Programmering● SSJS kräver alltid en request till servern● CSJS utförs alltid på klienten, (id konverteras av servern)● Javascript på servern SSJS

– @formulas– Dominoklasser– XSP

● Javascript på klienten CSJS- Dojo

● Java på servern med CSJS● Lotusscript/Java på servern via agenter

Notesformulär

● Traditionella Notesformulär används av xpages men bara för att definiera fält

● Xpages kräver att alla fält finns på formulären

● Ett formulär som ska accesssas av en xpage kan inte innehålla subforms

● Mitt tips är att göra ett nytt formulär som innehåller bara dom fält jag behöver i min xpage

● Använd formuläret för att dokumentera

Notesvyer

● Används för Lookups och Sortering

ID och Class● ID och Class är det man i vanliga fall använder när man

utvecklar webapplikationer● I xPages sköter Domino ID hanteringen eftersom data på en

xPage kan repeteras● Utvecklare av xpages får nöja dig med ”Class”:er

Åtkomst till ID i CSJSFör att hitta denna div

<div id="view:_id1:_id12:repeat1:0:divBody" class="docBody"></div>

använd följande som hittar alla id som slutar på divBody

dojo.query("[id$='divBody']")[0];

var div = dojo.query("[id$='divBody']")[0];dojo.toggleClass(div,"bodyhide");

Om man behöver hitta ett id på en control använd syntaxen "#{id:mittid}"

Exempel: dojo.byId("#{id:searchData}")

Resulterar i följande efter Domino konverterat id't

dojo.byId("view:_id1:searchData")

SSJS● getClientId(”button1”)

● getComponent(”repeat1”).

● getComponent(”repeat1”).getRowCount()

● getComponent(”...”).onclick=”alert('test');”

● facesContext.getExternalContext().getRequest().getRemoteAddr()

● sessionScope.put(”param”,”value”);

● sessionScope.get(”param”);

● context.redirectToPage(&quot;xstart.xsp&quot;);

● context.getLocale();

● context.getUrlParameter(&quot;post&quot;);

● var pager:com.ibm.xsp.component.xp.XspPager= getComponent(””);pager...

● GetComponent finns inte i CSJS

Xpage på olika språk

● Skapa propertyfiler för olika språk med några klick från databasen

● Exportera propertyfilerna● Skicka propertyfilerna till översättning● Importera propertyfilerna till databasen

● Obs: kräver att man har använt controller

DDE och programmeringstips● CTRL-M (öppna vy i fulläge)

● Outline ( organisera controls)

● CTRL-L x 2

● F3 (på en control markerar ”parent control”)

● All Properties på en control (visar alla egenskaper)

● print(”test”) i ssjs skriver till server console

● Aktivera debug i application properties

● Hjälpen som ett eget fönster

● Använd Alltid try/catch i SSJS

● @formulas returnerar String(ett värde) eller Array(flera värden)

● Firebug , console.log(...)

Demo

● Theme OneUI● ID hanteringen

● Panels● Repeat Control● Custom Controls● Editable Area● View Control/Pager● Partial Refresh

Demo

xpages.notessidan.se