Nuxeo Themes

{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 [Themes 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: [Themes 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!
-- Unfortunately, it seems rather unstable and I could not create a new theme with it.

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&nbsp;
{code}
<theme name="galaxy"
{code}
to

{code}
<theme name="my_theme"
{code}
as well as all references to "galaxy" in&nbsp;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.&nbsp;(?) &nbsp;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&nbsp;theme-mytheme.xml&nbsp;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}

{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}
(?) &nbsp;What are the "perspectives"?

Types seem to be:

* *"generic fragment"*: predefined nuxeo fragments like "nuxeo5 clip board" or "nuxeo5 breadcrumbs". (?) &nbsp;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&nbsp;<view>facelet region</view>. What does it mean? Where does it say what content to include?