User Interface Patterns and Nuxeo

“Nuxeo UI”

Art Nicewick
April 2012

Objective
 Introduce Art Conservations users to concepts
behind web based technologies and future
directions
 Provide technologist additional information to help
formulate the ideas of how to proceed with UI
design and selection
 Bring the functional and technical people to
common language platform

In Advance
 Conservator’s
 Sorry it may be too technical, but ask questions.
Our goal is a communication. It’s really not that
hard.
 Technologist
 Sorry that we are “re-reviewing” old concepts, and
presenting in a manner “slightly different”. Feel free
to bring up alternate explanations of concepts, and
be patient.

Three Worlds of the UI

Complex Complex
Simple remote
Local

Dynamic Action
Static data, Page Dynamic actions
and calling remote
refreshed from the within the page itself
resources. Sp page
server every time like “alerts”, but data
refresh not
static until page from
required, Like
server
“Autocomplete”

More cross Browser issues

Three Worlds of the UI

Complex Complex
Simple remote
Local

Dynamic actions Dynamic Action
Static data, Page
Native HTML Simple JavaScript AJAX (JavaScript)
within the page itself and calling remote
refreshed from the
like “alerts”, but data resources. Sp page
server every time
HTML / Javascript /Ajax /JQuery generated at server (PHP,JSP,ASP, JSF, FreeMarker..)
static until page from refresh not
server required, Like
Advanced Javascript Libraries (Dojo, Proto,..)
“Autocomplete”
JQuery (simple and Ajax)

What is HTML
<html><Body> <b> = bold

<b> Hello </b> <i> = italic
<i> world </i>
<br>
And pluto <br> = new line

</body>
</Html>

What is Javascript
<html> HTML
<body>
<b> Click Hello </b> <br>
<input type="button" HTML button

value="Hello"
onClick="alert('Hello World!');" />
</body>
Javascript command (Alert)
</html>

What is AJAX
 Asynchronous Javascript over XML
 Contacts central database for more data every time
you type a letter, and only updates the part of the
screen that needs to change.
 Google Auto complete

What is JQuery
 A library of JavaScript functions, setup to be called via a
“Shorthand” structure.
 Analogous to the idea of Acronyms in English
“Why write “Federal Bureau of Investigation” when
everybody understand that FBI means the same thing …”
The English rule for a Acronyms is ALL CAPS FBI
The rule for JQuery is “$” with commend in brackets …
$(ShowPage)
A javascipt Library, is “kinda” like a glossary of Acronyms
(of javascript code)

Note on JavascriptJQuery
 Some Acronyms become Words and verbs, same
with JQuery.
 The must famous acronym that became a verb, was
the English legal term for inappropriate behavior.
People were arrested “For Unlawful Carnal
Knowledge” *1.
 In JQuery, the functions also become verbs
 JQuery “ofcourse” is much more complex than a
Acronym, but is only Shorthand for JavaScript.
 JQuery plugins constructed to work cross browser
(and mobile).

*1 Actually a false etymology, but a great example

JQuery (Date Picker)
<SCRIPT>
Look for something with the ID=Datepicker
$(function()
{ $( "#datepicker" ).datepicker(); }); And put a datepicker there
</SCRIPT>

Date:
<INPUT id=datepicker
type=text>

Put the date in this text field

Nuxeo UI Framework
 Java bean based framework
 Options
 Java Server Faces Seam (Nuxeo Template)
 Java Server Faces Seam (Custom)
 Google web toolkit
 Flex
 Freemarker
 inFusion

Java Server Faces Seam
(Nuxeo Template)

 Tree Hierarchy format
 Configurable through Nuxeo Studio (or through XML
in IDE)
 XML based configuration
 Limited UI capabilities
 Customize for document management

Extending Nuxeo Studio
<?xml version="1.0"?>
<component name="org.test.querymodel.contribs">
<extension
target="org.nuxeo.ecm.core.search.api.client.querymodel.QueryModelService"
point="model">
<queryModel name="TEST_QUERY">
<pattern>
SELECT * FROM Document WHERE ecm:primaryType = 'TestDocType' AND
ecm:mixinType != 'HiddenInNavigation' AND ecm:currentLifeCycleState !=
'deleted'
</pattern>
<sortable value="true" defaultSortColumn="dc:title"
defaultSortAscending="true" />
</queryModel>
</extension>
</component>

Question
 Can I add JQuery to Native Nuxeo JSF pages?
http://www.srikanthtechnologies.com/blog/java/jquerywithjsf.aspx
 Maybe?

Creating Custom interface
 Nuxeo supports custom interfaces for
 JSFSeamRichfaces
 Google Web Toolkit
 Flex
 Freemaker
 There are also extension to support
 PHP
 Infusion
 Most custom interfaces use NXSQL and calls Nuxeo
services

Access Nuxeo from PHP
$client = new PhpAutomationClient('http://localhost:8080/nuxeo/site/automation');

$session = $client->getSession('Administrator','Administrator');

$answer=$session->newRequest("Document.Query")->
set('params', 'query', "SELECT * FROM Document“ )
->sendRequest();
$documentsArray = $answer->getDocumentList();
$value = sizeof($documentsArray);
echo '<table>';
echo '<tr><TH>uid</TH><TH>Path</TH>
<TH>Type</TH><TH>State</TH><TH>Title</TH><TH>Download as PDF</TH>';
for ($test = 0; $test < $value; $test ++){
echo '<tr>';
echo '<td> ' . current($documentsArray)->getUid() . '</td>';
echo '<td> ' . current($documentsArray)->getPath() . '</td>';
echo '<td> ' . current($documentsArray)->getType() . '</td>';
echo '<td> ' . current($documentsArray)->getState() . '</td>';
echo '<td> ' . current($documentsArray)->getTitle() . '</td>';
echo '<td><form id="test" action="../tests/B5bis.php" method="post" >'; Request for a list of Documents
echo '<input type="hidden" name="data" value="'.
current($documentsArray)->getPath(). '"/>'; From NUXEO
echo '<input type="submit" value="download"/>';
echo '</form></td></tr>';
next($documentsArray); Looks allot like SQL …
}
echo '</table>';
But it’s really NXSQL …

JSFSEAMRichfaces
 The Nuxeo EP default web UI is based on JSF (a
Java EE standard) for the UI component model,
and Seam for the navigation and context
management.
 Technologies:
 Sun JSF 1.2, Facelets, JBoss RichFaces 3.2,
JBoss Seam 2.

SEAM
 Seam is a integrated bundle of Open Source
software with Java Server Faces.
 However, it also does a little more .. Something
called CDI (Context and dependency injection )

SEAM (and CDI)

Seam implements a Java Standard (JSR-299)
called “Context and dependency injections” (or
CDI).

This is the general concept that the java programs
“Call Out” to “Listeners” at key point in the process. If
a listener is found, the program does what it says.

If the developer whats to change the programs
behavior, they only need to add a new routine and
then “Wait for the CDI exit to call it”.

CDI in Action (Extension Points)
Step 1
Ready to write None, Ok,
“Thank you” email I just do it
boss, any advice

Step 2 Wait, I see my
Okay
boss left a
Ready to sign
note to add his
“Thank you” email
name
boss, any advice
After step 2. Add
Step 3 my name
Ready to
complete“ Thank None, Ok,
you” email I just do it
boss, any advice

Step 4
Ready to Deliver None, Ok,
“Thank you” email I just do it
boss, any advice

What is RichFaces
 JSF 1.2 did not support AJAX (e.g. Autocomplete)
 Richfaces 3.X added AJAX to JSF 1.2 , with a component
library
(Note: Richfaces supports a tag called JQUERY)
 JSF 2.0 now does support ajax
 Richfaces 4.X extends JSF 2.0 with performance features
and additional tags

Nuxeo 5.5 uses JSF 1.2 and Richfaces 3.2

JSFSEAM Points and Use Case
 Key points:
Nuxeo EP's JSF interface is modular and easy to
customize:
 integrated theme manager,
 XML configuration for buttons, tabs, actions, etc.
 Form and Widget layout engine.
 Open source
 Standard Spec
 No Plug-in
 Typical use case:
 Business application,
 Document management back-office.

Cons
 JSF
 It stores lot of state data on client or server thus
have a large memory footprint.
 It doesn't have a good validation engine.
 Creating new widgets is bit complex for new
developers.
 Since it's a specification and many vendors provide
different implementation and plugins for it, you have
to spend time creating a good package for yourself.
 “JBoss Seam creates a nice package. Probably
it's the best that gives you everything for JSF in a
single instance.”

Notes
 Nuxeo is using JQuery with the JSF
implementation In particalur, JQueryTools tooltip
feaure.
http://forum.nuxeo.com/?t=msg&goto=15430&&srch=jquery#msg_15430

 Also, there are JSF Jquery implementation like ProtoFaces and
standard Jquery, that we may be able to use to extend the current JSF
framework while keeping to the Nuxeo baseline.

GWT Client

 GWT (Google Web Toolkit) allows the Java
development of applications that will be deployed
under HTML/JavaScript format.
 Nuxeo has integrated the GWT technology:
 in the build environment (via Maven),
 with the platform via dedicated REST APIs,
 with the extension points model (to allow modular
development with GWT as it is available within the rest
of Nuxeo EP).
 Technologies:
 Google Web Toolkit 1.5,
 JAX-RS to communicate with server.

GWT Points and Use case
 Key Points:
The GWT technology allows the development of user-
friendly and reactive applications with no deployment
needed.
 From the development side, it is highly productive to be
able to code in Java (Java IDE, Type Safety, unit tests)
without bothering with classical RIA related problems
(JavaScript debug, multi-browsers support, etc.).
GWT allows the development of complex interfaces that
are difficult to create rapidly with standard web
technologies:
 Text and image annotation interface,
 Tiling client to display and navigate in large images.

GWT
 Requires web designers to be Java Programmers
 Business logic in UI layer
 Not friendly to SEO
 Heavy dependance on Jvascript (all javascript)
 Known for memory leaks
 Requires ORM

Flex client

 Nuxeo EP provides a Flex/AMF connector allowing an
Air/Flex client to connect.
 Technologies:
 Air/Flex,
 AMF remoting integrated via GraniteDS.
 Key points:
The Flex technology can be easily deployed, as the
equipment rate in flash VM is quite high. The Flash
technology allows rapid development of advanced clients
with a rich and user-friendly interface.
It would be a small application requiring rich media support
and a plain user interface for a large audience. For
example, this technology has been used for eLearning
applications based on Nuxeo EP.

Flex
 The UI looks much nicer then JSF UI
 Flex looks like more simple to develop rather then
JSF
 Compatible between different web browsers
 Flex 2 SDK and Flex Builder 2 for Education are
both free

Flex disadvantage
 It doesn't has standard specification
 Adobe is the only provider of Flex
 It requires plug in installation on the client side ,
however this may not be disadvantage since Adobe
claims that Flash is installed on more then 99%
percent of users.
 If you build a web site which users would need to
search in some search engine the search engine
would not be able to understand the content of the
flash files (search engines can only understand
standard html files/pdf files etc')
 Flex based pages takes a lot of time to get loading
compare to JSF pages
 Flex Builder 2 costs some money

What is Freemarker?
 Freemarker is a template engine
 It is used to generate text output
 Example: HTML, XML, email, SQL, Java code
 Programmer prepares environment in Java
 Designer writes template referencing the environment
 Freemarker produces output

Java Example
Configuration config = new Configuration();

config.setSharedVariable("TODAY", new Date());

Person person = new Person(1234);
person.setName("Jon Smith");
List phones = new ArrayList(); Java Bean
phones.add("333-555-5777");
phones.add("899-379-9973"); Person: 1000
Person: 1000
person.setPhones(phones);
Map env = new HashMap();
env.put("PERSON", person);

Template Example
• Template references Java Bean
• Expressions are usually surrounded by ${}
• Support for JavaBean properties, map keys and
collection indexes ${PERSON.phones[1]}
Template File (person.ftl)
<Html><Body> Dear ${PERSON.name},
you have successfully registered with account id
${PERSON.id} .
${TODAY?string.medium}, </body></Html>

Output
Dear Jon Smith,
you have successfully registered with account id 1234.
01/01/2013

Loop though Phone Numbers
Template File (person.ftl)
<Html><body> Dear ${PERSON.name},
you have successfully registered with account id
${PERSON.id} .
<#list PERSON.phones as phone>
${phone}<#if phone_has_next>, </#if>
</#list>
${TODAY?string.medium}, </body></html>
Output File

Dear Jon Smith,
you have successfully registered with account id 1234.
333-555-5777
899-379-9973
01/01/2013

Java Part - Process Template

Template template = config.getTemplate("person.ftl");
FileWriter writer = new FileWriter("person.html");
template.process(env, writer);
writer.close();

FTL – Advanced Features
 <#macro>
 Macro is a repetitive template fragment
 <#import "v1/macros.ftl“ as lib>
 Imports given library into the namespace
 <#include "*/header.ftl“>
 Include is used to merge specified template
 root.put( "doc", NodeModel.parse(file.xml)));
 XML files can be access by name, attribute with @
 ${doc.invoice.item.@price}

Freemarker 2 MSWord (or Open
Office)
 A common practice when customizing the
template is to create a sample HTML document
using Microsoft Word, then insert customized
template tags and macros in place of the default
content. The default template packaged with this
software can be used as an example

s/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 1"/>
panose-1:2 4 5 3 5 4 6 3 2 4;
<w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 2"/>
mso-font-charset:0;
> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 2"/>
mso-generic-font-family:roman;

HTML to create “Hello World” document
s/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 2"/>
mso-font-pitch:variable;
<w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2"/>415 0;}
mso-font-signature:-536870145 1107305727 0 0
aMark/> <w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2"/>
@font-face
hSp/> <w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 2"/>
{font-family:Calibri;
edForcedTables/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium2 4; 2 Accent 2"/>
panose-1:2 15 5 2 2 2 4 3 List
> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2"/>
mso-font-charset:0;
/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2"/>
mso-generic-font-family:swiss;
<w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2"/>
mso-font-pitch:variable;
<w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 2"/>
mso-font-signature:-520092929 1073786111 9 0 415 0;}
oftInternetExplorer4</w:BrowserLevel>
<w:LsdException Locked="false" Priority="71" SemiHidden="false" Style Definitions */
/* UnhideWhenUsed="false" Name="Colorful Shading Accent 2"/>
<w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false"div.MsoNormal List Accent 2"/>
p.MsoNormal, li.MsoNormal, Name="Colorful
mbria Math"/> <w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 2"/>
{mso-style-unhide:no;
"/> <w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 3"/>
mso-style-qformat:yes;
#45;-"/> <w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 3"/>
mso-style-parent:"";
"/> <w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 3"/>
margin-top:0in;
<w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3"/>
margin-right:0in;
margin-bottom:10.0pt;
<w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 3"/>
margin-left:0in;
Group"/> <w:LsdException Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 3"/>
line-height:115%;
440"/> <w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3"/>
mso-pagination:widow-orphan;
p"/> <w:LsdException Locked="false" Priority="68" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3"/>
font-size:11.0pt;
Ovr"/> <w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3"/>
font-family:"Calibri","sans-serif";
ocument> <w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 3"/>
mso-ascii-font-family:Calibri;
mso 9]><xml> <w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 3"/>
mso-ascii-theme-font:minor-latin;
edState="false" DefUnhideWhenUsed="true"
<w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 3"/>
mso-fareast-font-family:Calibri;
efQFormat="false" DefPriority="99" Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 3"/>
<w:LsdException mso-fareast-theme-font:minor-latin;
<w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 4"/>
mso-hansi-font-family:Calibri;
="false" Priority="0" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Normal"/> mso-hansi-theme-font:minor-latin; 4"/>
<w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent
="false" Priority="9" SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="heading 1"/>
<w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light GridNew Roman";
mso-bidi-font-family:"Times Accent 4"/>
="false" Priority="9" QFormat="true" Name="heading 2"/>
mso-bidi-theme-font:minor-bidi;}
.MsoChpDefault
{mso-style-type:export-only;
mso-default-props:yes;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:Calibri;
<w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 4"/>
mso-fareast-theme-font:minor-latin;
="false" Priority="39"<w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 4"/>
Name="toc 1"/> mso-hansi-font-family:Calibri;
="false" Priority="39"<w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 4"/>
Name="toc 2"/> mso-hansi-theme-font:minor-latin;
="false" Priority="39"<w:LsdException Locked="false" Priority="73" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Grid Accent 4"/>
Name="toc 3"/> mso-bidi-font-family:"Times New Roman";
="false" Priority="39"<w:LsdException Locked="false" Priority="60" SemiHidden="false" UnhideWhenUsed="false" Name="Light Shading Accent 5"/>
Name="toc 4"/> mso-bidi-theme-font:minor-bidi;}
="false" Priority="39"<w:LsdException Locked="false" Priority="61" SemiHidden="false" UnhideWhenUsed="false" Name="Light List Accent 5"/>
Name="toc 5"/> .MsoPapDefault
="false" Priority="39"<w:LsdException Locked="false" Priority="62" SemiHidden="false" UnhideWhenUsed="false" Name="Light Grid Accent 5"/>
Name="toc 6"/> {mso-style-type:export-only;
="false" Priority="39"<w:LsdException Locked="false" Priority="63" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5"/>
Name="toc 7"/> margin-bottom:10.0pt;
="false" Priority="39"<w:LsdException Locked="false" Priority="64" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5"/>
Name="toc 8"/> line-height:115%;}
="false" Priority="39"<w:LsdException Locked="false" Priority="65" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 1 Accent 5"/>
Name="toc 9"/> @page WordSection1
="false" Priority="35"<w:LsdException Name="caption"/>
QFormat="true" Locked="false" Priority="66" SemiHidden="false" UnhideWhenUsed="false" Name="Medium List 2 Accent 5"/>
{size:8.5in 11.0in;
="false" Priority="10"<w:LsdException Locked="false" Priority="67" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5"/>
SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Title"/> margin:1.0in 1.0in 1.0in 1.0in;
="false" Priority="1" Name="Default Paragraph Font"/>
mso-header-margin:.5in;
="false" Priority="11"<w:LsdException Locked="false" Priority="69" SemiHidden="false" UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5"/>
SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Subtitle"/> mso-footer-margin:.5in;
="false" Priority="22"<w:LsdException Locked="false" Priority="70" SemiHidden="false" UnhideWhenUsed="false" Name="Dark List Accent 5"/>
SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Strong"/> mso-paper-source:0;}
="false" Priority="20"<w:LsdException Locked="false" Priority="71" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful Shading Accent 5"/>
SemiHidden="false" UnhideWhenUsed="false" QFormat="true" Name="Emphasis"/>
div.WordSection1
="false" Priority="59"<w:LsdException Locked="false" Priority="72" SemiHidden="false" UnhideWhenUsed="false" Name="Colorful List Accent 5"/>
SemiHidden="false" UnhideWhenUsed="false" Name="Table Grid"/> {page:WordSection1;}

User Interface Patterns and Nuxeo

User Interface Patterns and Nuxeo

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to User Interface Patterns and Nuxeo

Similar to User Interface Patterns and Nuxeo (20)

Recently uploaded

Recently uploaded (20)

User Interface Patterns and Nuxeo