Mijn presentatie over XPages' xe:objectData, van het XPages & Beer evenement op 12 juni 2013.

1. xe:objectData
Door Thimo Jansen

2. Introductie
* Thimo Jansen
* IBM Domino web developer
* http://www.defrog.nl

3. Agenda
* xe:objectData
* Managed Beans
* Overeenkomsten
* Verschillen
* Voordelen
* Demo
* Bonus

4. xe:objectData

5. xe:objectData // data source
Data Source
uit de
Extension Library

6. xe:objectData // waar
Als datasource bij een:
* XPage
* Panel
- in een repeat
- Single Page Application

7. xe:objectData // voorbeeld
dominoDocument vs objectData
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
! <xp:this.data>
! ! <xp:dominoDocument var="objectDataDocument" formName="fObjectdata"
action="openDocument"></xp:dominoDocument>
! ! <xe:objectData var="objectDataTest" scope="view">
! ! ! <xe:this.createObject>
<![CDATA[#{javascript:new nl.defrog.objectData.Test();}]]>
</xe:this.createObject>
! ! ! <xe:this.saveObject>
<![CDATA[#{objectDataTest.save}]]>
</xe:this.saveObject>
! ! </xe:objectData>
! </xp:this.data>
</xp:view>

8. xe:objectData // properties
* createObject
* saveObject
- Simple action

9. xe:objectData // voorbeeld
dominoDocument vs objectData
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
! <xp:this.data>
! ! <xp:dominoDocument var="objectDataDocument" formName="fObjectdata"
action="openDocument"></xp:dominoDocument>
! ! <xe:objectData var="objectDataTest" scope="view">
! ! ! <xe:this.createObject>
<![CDATA[#{javascript:new nl.defrog.objectData.Test();}]]>
</xe:this.createObject>
! ! ! <xe:this.saveObject>
<![CDATA[#{objectDataTest.saveAction}]]>
</xe:this.saveObject>
! ! </xe:objectData>
! </xp:this.data>
</xp:view>

10. xe:objectData // scope
* request
* view
* session
* application

11. xe:objectData // voorbeeld
Uitlezen variable via EL:
<xp:text value="#{objectDataTest.index}"></xp:text>
Of SSJS:
<xp:text value="#{javascript:objectDataTest.getIndex()}"></xp:text>

12. xe:objectData // voorbeeld
Value binding voor tekstveld:
<xp:inputText value="#{objectDataTest.index}"></xp:inputText>

13. xe:objectData // voorbeeld
Opslaan via simple action:
<xp:button value="Save" id="button1">
! <xp:eventHandler event="onclick" submit="true"refreshMode="full">
! ! <xp:this.action>
! ! ! <xp:saveDocument var="objectDataTest"></xp:saveDocument>
! ! </xp:this.action>
! </xp:eventHandler>
</xp:button>

14. xe:objectData // voorbeeld
Opslaan via EL:
<xp:button value="Save" id="button1">
! <xp:eventHandler event="onclick" submit="true" refreshMode="full">
! ! <xp:this.action>
<![CDATA[#{objectDataTest.saveAction}]]>
</xp:this.action>
! </xp:eventHandler>
</xp:button>

15. xe:objectData // voorbeeld
Opslaan via SSJS:
<xp:button value="Save" id="button1">
! <xp:eventHandler event="onclick" submit="true" refreshMode="full">
! ! <xp:this.action>
<![CDATA[#{javascript:objectDataTest.saveAction();}]]>
</xp:this.action>
! </xp:eventHandler>
</xp:button>

16. Managed Beans

17. Beans // Definitie
* Plain Old Java Object (POJO)
* Serializable
* Parameter-less, public constructor
* Getters en setters

18. Beans // Voorbeeld
package nl.defrog.objectData;
import java.io.Serializable;
public class MyFirstBean implements Serializable {
! private static final long serialVersionUID = 1L;
! private String name;
!
! public MyFirstBean() {
! ! // Constructor
! }
! public String getName() {
! ! return name;
! }
! public void setName(String name) {
! ! this.name = name;
! }
}

19. Beans // Configuratie
In Faces-config
* Name
* Class
* Scope
* Properties

20. Beans // Configuratie
<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
! <managed-bean>
! ! <managed-bean-name>myFirstBean</managed-bean-name>
! ! <managed-bean-class>nl.defrog.objectData.MyFirstBean</managed-bean-class>
! ! <managed-bean-scope>session</managed-bean-scope>
! ! <managed-property>
! ! ! <property-name>name</property-name>
! ! ! <value>Thimo Jansen</value>
! ! </managed-property>
! </managed-bean>
</faces-config>
Application Configuration / Faces-config

21. Beans // voorbeeld
Uitlezen variable via EL:
<xp:text value="#{myFirstBean.name}"></xp:text>
Of SSJS:
<xp:text value="#{javascript:myFirstBean.getName()}"></xp:text>

22. Beans // voorbeeld
Value binding voor tekstveld:
<xp:inputText value="#{myFirstBean.name}"></xp:inputText>

23. Beans // voorbeeld
Opslaan via EL:
<xp:button value="Save" id="button1">
! <xp:eventHandler event="onclick" submit="true" refreshMode="full">
! ! <xp:this.action>
<![CDATA[#{myFirstBean.saveAction}]]>
</xp:this.action>
! </xp:eventHandler>
</xp:button>

24. Beans // voorbeeld
Opslaan via SSJS:
<xp:button value="Save" id="button1">
! <xp:eventHandler event="onclick" submit="true" refreshMode="full">
! ! <xp:this.action>
<![CDATA[#{javascript:myFirstBean.saveAction();}]]>
</xp:this.action>
! </xp:eventHandler>
</xp:button>

25. Overeenkomsten

26. Overeenkomsten
* Plain Old Java Object (POJO)
* Serializable
* Getters / setters
* Scoped

27. Verschillen

28. Verschillen
* objectData
* explicit initialization
* Bean
* parameter-less constructor
* scope lifecycle

29. Voordelen

30. Voordelen
* Invloed op initialisatie
* Simple action save
* Past in xp:repeat
* Geen centrale configuratie
* SPA met Dynamic Loading

31. Demo

32. Bonus

33. Contact
thimo@defrog.nl // @thimo
http://blog.defrog.nl
http://linkedin.com/in/thimojansen