{toc}
h1. Nuxeo Themes
- Nuxeo Themes is implemented in WebEngine
- WebEngine is a lightweight framework, and comes empty: there's nothing in it. To switch from the current framework (JSF SEAM) to WebEngine means to give up all the functionality and reimplement in WebEngine
- There is a [theme.jSF|http://explorer.nuxeo.org/nuxeo/site/distribution/current/viewComponent/org.nuxeo.theme.jsf] component that implements themes in JSF SEAM.
-- proof: Nuxeo 5.3 documentation [12.4.2.1. "Styling the theme using the editor"|http://community.nuxeo.com/5.3/books/nuxeo-book/html/theme-service.html#d2452e3421] shows Theme Editor working in something looking suspiciously similar to Nuxeo DM:
!Nuxeo-theme-editor.png!
- SEAM and WebEngine can be mixed and used together (but not on the same page). In fact they are mixed in the default install: Nuxeo DM is written in SEAM, while the Theme Editor is written in WebEngine.
-- proof: [theme.editor|http://explorer.nuxeo.org/nuxeo/site/distribution/current/viewBundle/org.nuxeo.theme.editor], View META-INF/MANIFEST.MF
{code}
Bundle-Name: NXThemes editor
Bundle-Vendor: Chalmers
Provide-Package: org.nuxeo.theme.editor
Require-Bundle: org.nuxeo.theme.webengine
{code}
- More tech details in [Nuxeo Themes]
-- [listComponents|http://explorer.nuxeo.org/nuxeo/site/distribution/current/listComponents] to find all components mentioning "theme"
-- [listSeamComponents|http://explorer.nuxeo.org/nuxeo/site/distribution/current/listSeamComponents] to find all SEAM components mentioning "theme"
- It seems templates define only layout of the whole application - and more specifically, the Document Management section. There seems not to be nested templates.
h1. Theme Editor
- The theme editor is integrated within Nuxeo 5.5 and it works with the JSF/Seam UI.
!theme_manager.png|width=800!
- Unfortunately, it seems rather unstable and I could not create a new theme with it.
TODO: report to the NUXEO Jira, and check if it's already reported and track it
- The editor is a graphical tool for editing the theme xml file. We can edit the config XML manually to achieve a desired layout
!theme_manager_xml.png|width=600!
h4. Customizing a theme
These are the steps that I have found working for modifying the layout.
- I downloaded the theme-galaxy.xml from the Theme Editor. This is the default theme.
- I renamed it to theme-mytheme.xml and put it in the the resources/themes in the contribution project. There is the OSGI-INF/theme-contrib.xml as well where we specify:
{code}
<extension target="org.nuxeo.theme.services.ThemeService" point="themes">
<theme>
<src>themes/theme-mytheme.xml</src>
</theme>
</extension>
{code}
First, I changed
{code}
<theme name="galaxy"
{code}
to
{code}
<theme name="my_theme"
{code}
as well as all references to "galaxy" in theme-contrib.xml.
As a result after deployment:
* default theme was indeed changed to my_theme
* layout was broken as galaxy.css was not included. (?) How do we point to the proper css?
So I returned "galaxy" as a name and it overrode the default galaxy theme. The css was included and layout was fine.
Then I edited the theme-mytheme.xml adding the following (the second footer):
{code}
<section class="nxFooter">
<cell class="content">
<!-- copyrights -->
<fragment type="generic fragment"/>
</cell>
</section>
<section class="nxFooter">
<cell class="content">
<!-- copyrights -->
<fragment type="generic fragment"/>
</cell>
</section>
{code}
Then in the same file:
{code}
<widget element="page[1]/section[4]/cell[1]/fragment[1]">
<view>tabs</view>
</widget>
<widget element="page[1]/section[4]">
<view>section frame</view>
</widget>
<widget element="page[1]/section[4]/cell[1]">
<view>cell frame</view>
</widget>
{code}
This results in:
*"section frame"* is output as:
{code}
<table cellpadding="0" cellspacing="0" border="0" class="themeSectionFrame nxFooter">....
{code}
*"cell frame"* is output as:
{code}
<td valign="top" class="themeCellFrame content">...
{code}
inside the section frame table.
See [jsf--views|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewContribution/org.nuxeo.theme.jsf--views]
As for the "tabs" - we add in theme-contrib.xml:
{code}
<extension target="org.nuxeo.theme.services.ThemeService" point="views">
<view name="tabs" template-engine="jsf-facelets">
<format-type>widget</format-type>
<template>incl/logo_DM_galaxy.xhtml</template>
</view>
</extension>
{code}
This effectively outputs the logo after the footer.
h1. Questions
In theme-mytheme.xml:
{code}
<fragment perspectives="default,multiple_domains" type="generic fragment"/>
{code}
(?) What are the "perspectives"?
Types seem to be:
* *"generic fragment"*: predefined nuxeo fragments like "nuxeo5 clip board" or "nuxeo5 breadcrumbs". (?) What are all possible fragments? (See [theme.fragments|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewComponent/org.nuxeo.theme.fragments] and [default--views|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewContribution/org.nuxeo.theme.nuxeo.default--views])
* *"region fragment"*: (?) What is this? For the corresponding fragment we have <view>facelet region</view>. What does it mean? Where does it say what content to include?
h1. Links
- [Theme doc|http://doc.nuxeo.com/display/NXDOC/Theme]
- [ui--shortcuts|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewContribution/org.nuxeo.theme.editor.ui--shortcuts] (Interesting\!)
h1. Nuxeo Themes
- Nuxeo Themes is implemented in WebEngine
- WebEngine is a lightweight framework, and comes empty: there's nothing in it. To switch from the current framework (JSF SEAM) to WebEngine means to give up all the functionality and reimplement in WebEngine
- There is a [theme.jSF|http://explorer.nuxeo.org/nuxeo/site/distribution/current/viewComponent/org.nuxeo.theme.jsf] component that implements themes in JSF SEAM.
-- proof: Nuxeo 5.3 documentation [12.4.2.1. "Styling the theme using the editor"|http://community.nuxeo.com/5.3/books/nuxeo-book/html/theme-service.html#d2452e3421] shows Theme Editor working in something looking suspiciously similar to Nuxeo DM:
!Nuxeo-theme-editor.png!
- SEAM and WebEngine can be mixed and used together (but not on the same page). In fact they are mixed in the default install: Nuxeo DM is written in SEAM, while the Theme Editor is written in WebEngine.
-- proof: [theme.editor|http://explorer.nuxeo.org/nuxeo/site/distribution/current/viewBundle/org.nuxeo.theme.editor], View META-INF/MANIFEST.MF
{code}
Bundle-Name: NXThemes editor
Bundle-Vendor: Chalmers
Provide-Package: org.nuxeo.theme.editor
Require-Bundle: org.nuxeo.theme.webengine
{code}
- More tech details in [Nuxeo Themes]
-- [listComponents|http://explorer.nuxeo.org/nuxeo/site/distribution/current/listComponents] to find all components mentioning "theme"
-- [listSeamComponents|http://explorer.nuxeo.org/nuxeo/site/distribution/current/listSeamComponents] to find all SEAM components mentioning "theme"
- It seems templates define only layout of the whole application - and more specifically, the Document Management section. There seems not to be nested templates.
h1. Theme Editor
- The theme editor is integrated within Nuxeo 5.5 and it works with the JSF/Seam UI.
!theme_manager.png|width=800!
- Unfortunately, it seems rather unstable and I could not create a new theme with it.
TODO: report to the NUXEO Jira, and check if it's already reported and track it
- The editor is a graphical tool for editing the theme xml file. We can edit the config XML manually to achieve a desired layout
!theme_manager_xml.png|width=600!
h4. Customizing a theme
These are the steps that I have found working for modifying the layout.
- I downloaded the theme-galaxy.xml from the Theme Editor. This is the default theme.
- I renamed it to theme-mytheme.xml and put it in the the resources/themes in the contribution project. There is the OSGI-INF/theme-contrib.xml as well where we specify:
{code}
<extension target="org.nuxeo.theme.services.ThemeService" point="themes">
<theme>
<src>themes/theme-mytheme.xml</src>
</theme>
</extension>
{code}
First, I changed
{code}
<theme name="galaxy"
{code}
to
{code}
<theme name="my_theme"
{code}
as well as all references to "galaxy" in theme-contrib.xml.
As a result after deployment:
* default theme was indeed changed to my_theme
* layout was broken as galaxy.css was not included. (?) How do we point to the proper css?
So I returned "galaxy" as a name and it overrode the default galaxy theme. The css was included and layout was fine.
Then I edited the theme-mytheme.xml adding the following (the second footer):
{code}
<section class="nxFooter">
<cell class="content">
<!-- copyrights -->
<fragment type="generic fragment"/>
</cell>
</section>
<section class="nxFooter">
<cell class="content">
<!-- copyrights -->
<fragment type="generic fragment"/>
</cell>
</section>
{code}
Then in the same file:
{code}
<widget element="page[1]/section[4]/cell[1]/fragment[1]">
<view>tabs</view>
</widget>
<widget element="page[1]/section[4]">
<view>section frame</view>
</widget>
<widget element="page[1]/section[4]/cell[1]">
<view>cell frame</view>
</widget>
{code}
This results in:
*"section frame"* is output as:
{code}
<table cellpadding="0" cellspacing="0" border="0" class="themeSectionFrame nxFooter">....
{code}
*"cell frame"* is output as:
{code}
<td valign="top" class="themeCellFrame content">...
{code}
inside the section frame table.
See [jsf--views|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewContribution/org.nuxeo.theme.jsf--views]
As for the "tabs" - we add in theme-contrib.xml:
{code}
<extension target="org.nuxeo.theme.services.ThemeService" point="views">
<view name="tabs" template-engine="jsf-facelets">
<format-type>widget</format-type>
<template>incl/logo_DM_galaxy.xhtml</template>
</view>
</extension>
{code}
This effectively outputs the logo after the footer.
h1. Questions
In theme-mytheme.xml:
{code}
<fragment perspectives="default,multiple_domains" type="generic fragment"/>
{code}
(?) What are the "perspectives"?
Types seem to be:
* *"generic fragment"*: predefined nuxeo fragments like "nuxeo5 clip board" or "nuxeo5 breadcrumbs". (?) What are all possible fragments? (See [theme.fragments|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewComponent/org.nuxeo.theme.fragments] and [default--views|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewContribution/org.nuxeo.theme.nuxeo.default--views])
* *"region fragment"*: (?) What is this? For the corresponding fragment we have <view>facelet region</view>. What does it mean? Where does it say what content to include?
h1. Links
- [Theme doc|http://doc.nuxeo.com/display/NXDOC/Theme]
- [ui--shortcuts|http://explorer.nuxeo.org/nuxeo/site/distribution/Nuxeo%20DM-5.3.2/viewContribution/org.nuxeo.theme.editor.ui--shortcuts] (Interesting\!)