Web Components Samples for Domino Access Services
=================================================
This project contains some sample code that demonstrates how combination of [Domino Access Services](http://www-10.lotus.com/ldd/ddwiki.nsf/xpAPIViewer.xsp?lookupName=IBM+Domino+Access+Services+9.0.1#action=openDocument&content=catcontent&ct=api), a standardized set of REST services to access Domino Data, and [Web Components](http://w3c.github.io/webcomponents/explainer/), a set of emerging web standards, would help effort of making Domino application rich and interactive with components with next level of reusability and ease of composition.
This project uses [Polymer](http://www.polymer-project.org/) for the polyfills of [Web Components](http://w3c.github.io/webcomponents/explainer/) as well as some advanced concepts on top of it.
###OPENNTF###
This project is an OpenNTF project, and is available under the Apache License V2.0. All other aspects of the project, including contributions, defect reports, discussions, feature requests and reviews are subject to the [OpenNTF Terms of Use](http://openntf.org/Internal/home.nsf/dx/Terms_of_Use).
How to deploy
-------------
1. Enable Domino Data Service on your server.
2. Extract the code under $DOMINODATA/domino/html. dassamples directory under there should be created.
3. Go to $DOMINODATA/domino/html/dassamples and create lib directory under there.
4. Download <a href="https://github.com/Polymer/polymer/releases/download/v0.0.20131003/polymer-all-v0.0.20131003.zip">https://github.com/Polymer/polymer/releases/download/v0.0.20131003/polymer-all-v0.0.20131003.zip</a> and put polymer-v0.0.20131003/polymer-v0.0.20131003.min.js in the ZIP to $DOMINODATA/domino/html/dassamples/lib.</div>
5. Download <a href="http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1.zip">http://download.dojotoolkit.org/release-1.9.1/dojo-release-1.9.1.zip</a> and extract it under $DOMINODATA/domino/html/dassamples/lib. dojo-release-1.9.1 directory under there should be created.</div>
6. Create a database named TestDiscussion.nsf inheriting discussion database.
7. Go to Advanced tab in database properties and set Views and documents to Allow Domino Data Service.
8. Create a form named AuthUserLookup. Find the form in outline, right-click it and select edit it with DXL. Replace the content with backend/AuthUserLookup.dxl and save it. Open the form, and right-click on the form, select Form Properties, go to Defaults tab, select Other for the Content type and set application/json there. Save the form.
9. Create a view named ($RestAllDocuments). Find the view in outline, right-click it and select edit it with DXL. Replace the content with backend/RestAllDocuments.dxl and save it. Open the view, and right-click on the view, select View Properties, go to Advanced tab and check off Allow Domino Data Service operations. Save the view.
How to run the application
--------------------------
Hit: http(s)://yourdominoserver/dassamples/app.html
If you append "?mock=1" to the URL, the applications shows mock data instead of actual data in the NSF.
Playing around with the application to see the concept
------------------------------------------------------
Entering the following in browser console would help see the concept of underlying techniques of this application:
```javascript
document.body.querySelector("dassamples-app-view").childNodes.length
document.body.querySelector("dassamples-app-view").shadowRoot.innerHTML
```
Elements in the application whose name begin with *dassamples* are called [Custom Elements](http://www.w3.org/TR/2013/WD-custom-elements-20130514/). [Custom Elements](http://www.w3.org/TR/2013/WD-custom-elements-20130514/) allows to define reusable UI component as a HTML tag. For example, `<dassamples-app-view>` is a custom element that defines UI structure of view and controlls it.
Though you'll see `<dassamples-app-view>` has the entire view UI inside, `<dassamples-app-view>` does not have any child nodes. It is similar to `<input type="date">`, as its drop down button won't show up in DOM. The inner UI is actually in a separate DOM tree, called [Shadow DOM](http://www.w3.org/TR/shadow-dom/), which you can see in `.shadowRoot` property in `<dassamples-app-view>`. This allows to separate the inner UI from the outer UI, meaning encapsulating inner UI.
```javascript
document.body.querySelector("dassamples-app-view").shadowRoot
.querySelector("dassamples-app-navigator").shadowRoot
.querySelector("dassamples-app-form").Subject = "Foo"
```
If you take a look at the definition of `<dassamples-app-form>`, you'll see some `{{property}}` syntaxes, which connects DOM elements in the form and `<dassamples-app-form>`. This is called data binding ([TemplateBinding](http://www.polymer-project.org/docs/polymer/databinding.html)). With data binding, above change in `.Subject` property will automatically change Subject field in the form. Change in Subject field (like user's edit) will automatically update `.Subject` property in `<dassamples-app-form>`. It means that the data binding is two-way.
This is very powerful considering what to do with REST service. Once data from REST service comes in JavaScript object, all you have to do to update the form with the new data typically is copying the properties in that JavaScript object to `<dassamples-app-form>`. All you have to do to persist the form data typically is copying properties in `<dassamples-app-form>` to a new object and sending it to REST service.
Though [TemplateBinding](http://www.polymer-project.org/docs/polymer/databinding.html) is not a part of [Web Components](http://w3c.github.io/webcomponents/explainer/) standard, there are some efforts around it, starting with lower-level ECMAScript APIs: [`Object.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe) and [`Array.observe()`](http://wiki.ecmascript.org/doku.php?id=harmony:observe#array.observe).
```javascript
document.body.querySelector("dassamples-app-view").rows.unshift({
unid: new Date().getTime(),
Who: "Test 0",
Date: new Date(),
Subject: "Test 0 entry"
}, {
unid: new Date().getTime(),
Who: "Test 1",
Date: new Date(),
Subject: "Test 1 entry"
})
```
If you take a look at the definition of `<dassamples-app-view>`, you'll see `<template repeat="{{rows}}">`. This is called auto-repeat. The content in `<template>` (which is view rows) is repeated with entries of `.rows` property in `<dassamples-app-view>`. Change in `.rows` will be reflected automatically to the UI. You'll see rows are added to the top as soon as you enter above code.
This is very powerful considering what to do with REST service. Once data from REST service comes in JavaScript array, all you have to do to update the view with the new data typically is adding them to `.rows`.
Domino versions tested with
---------------------------
Domino 9.0+
Browsers tested with
--------------------
* Internet Explorer (10+)
* Latest Firefox
* Safari (6.1+)
* Latest Chrome
Known issues
------------
* Some display issues with Internet Explorer and Safari 7.0.
License
-------
See [here](./LICENSE).
Akira Sudoh is the developer, Niklas Heidloff only committer.