Hi,

Here is a preview of the web widget implementation for nuxeo5 / nxthemes

http://www.medic.chalmers.se/~jmo/nuxeo5/nxthemes-2007-11-15.html

Web widgets are small applications that are displayed on the browser
page using javascript, CSS and HTML. They mainly differ from portlets
and other types of web content in the sense that it is the client that
does most of the rendering job. The server only provides the data.

The current implementation is based on the Universal Widget Architecture
(UWA) put out by Netvibes (http://dev.netvibes.com). It doesn't mean,
yet, that existing netvibes widgets can be used directly in nuxeo5
without any modification, since supporting the entire API would be too
much of a job so long as it is not made available by netvibes. But I
read that plans are on the way to release it soon as open source.

The web widgets' code is made of static HTML files containing a <body>
and a <style> section (the widget's view), a <script> section (controller).
There is also the possibility for a widget to have configurable
settings, the schema is then defined in a <widget:preferences> section
(widget's model).

In the nuxeo5, web widgets are registered using:

  <extension target="org.nuxeo.theme.webwidgets.Service" point="widgets">
    <widget name="some widget">
      <category>some category</category>
      <url>http://......../widget-code.html</url>
    </widget>
  </extension>

the widget's description, author, icon, etc. are defined in the HTML
file specified by the <url>.

What the web widgets module (nuxeo-theme-webwidgets) provides is the
possibility to define areas inside existing themes into which widgets
can be inserted. These are called 'panels' and each has its own name.
The same panel identified by its name can appear in several themes.

With each panel is associated a "widget provider", which defines what
happens when a widget is added, moved or deleted. The default provider
stores the information about widgets and their preferences in memory. So
it is not supposed to be used in production, but rather it is meant as
an example to start developing widget providers with a real persistent
back-end, etc.

Providers are registered as:

  <extension target="org.nuxeo.theme.webwidgets.Service" point="providers">

    <provider name="default">
      <class>org.nuxeo.theme.webwidgets.DefaultProvider</class>
      <resource>nxthemes-webwidget-default-provider.css</resource>

      <panel-decoration mode="*">
        %REGION_BODY%
      </panel-decoration>

      <panel-decoration mode="web-widgets">
        <div class="nxthemesDefaultProviderPanelTitle">%REGION_NAME%</div>
        <div class="nxthemesDefaultProviderPanelBody">
          %REGION_BODY%
        </div>
      </panel-decoration>

      <widget-decoration mode="*">
        <div class="nxthemesDefaultProviderWidgetTitle">
          <span id="%ICON_AREA%">[ ]</span>
          <span id="%TITLE_AREA%">%WIDGET_NAME%</span>
        </div>
        <div class="nxthemesDefaultProviderWidgetBody">
          <div id="%BODY_AREA%">%WIDGET_BODY%</div>
        </div>
      </widget-decoration>

      <widget-decoration mode="web-widgets">
        <div class="nxthemesDefaultProviderWidgetTitle %DRAG_AREA%">
          <div class="nxthemesDefaultProviderWidgetActions">
            <span onclick="%ACTION_EDIT_PREFERENCES%">Edit</span>
            <span onclick="%ACTION_DELETE_WIDGET%"><img
src="/nuxeo/nxthemes-web-widgets/images/window-close.png" width="16"
height="16" /></span>
          </div>
          <span id="%ICON_AREA%">[ ]</span>
          <span id="%TITLE_AREA%">%WIDGET_NAME%</span>
        </div>
        <div class="nxthemesDefaultProviderWidgetBody">
          <div id="%BODY_AREA%">%WIDGET_BODY%</div>
          <div class="nxthemesDefaultProviderWidgetFooter">
          Widget by <strong>%WIDGET_AUTHOR%</strong>:
          %WIDGET_DESCRIPTION%
          </div>
        </div>
      </widget-decoration>

    </provider>

  </extension>


You can see that is possible to define a template that will be used to
decorate the panel (<panel-decoration>), and a template that will
decorate the widget boxes (<widget-decoration>).
This can be done for the different view modes available. For instance
there is a default view mode called "*" where widgets cannot be modified
and there is a 'web-widgets' view mode where widgets can be modified and
moved around. It is possible to register other view modes depending on
what the application will look like and what it will do.

To switch to a given view mode, a shortcut key can be used, by default
it is the 'w' key.

  <extension target="org.nuxeo.theme.services.ThemeService"
point="shortcuts">
    <shortcut key="w" target="/nuxeo/nxthemes-select?mode=web-widgets" />
  </extension>

also a link could be placed on a page linking to
/nuxeo/nxthemes-select?mode=some-widget-mode

the source code is available in svn at:
https://svn.nuxeo.org/nuxeo/org.nuxeo.theme/trunk/nuxeo-theme-webwidgets

here are the changes to be made to org.nuxeo.theme/pom.xml to get the
module to be compiled and be installed.

Index: pom.xml
===================================================================
--- pom.xml     (revision 27266)
+++ pom.xml     (working copy)
@@ -30,6 +30,7 @@
     <module>nuxeo-theme-jsf</module>
     <module>nuxeo-theme-jsf-editor</module>
     <module>nuxeo-theme-jsf-editor-web</module>
+    <module>nuxeo-theme-webwidgets</module>
   </modules>
 
   <organization>
@@ -100,8 +101,12 @@
         <artifactId>nuxeo-theme-jsf-editor-web</artifactId>
         <version>${nuxeo.theme.version}</version>
       </dependency>
-
       <dependency>
+        <groupId>org.nuxeo.theme</groupId>
+        <artifactId>nuxeo-theme-web-widgets</artifactId>
+        <version>${project.version}</version>
+      </dependency>
+      <dependency>
         <groupId>cssparser</groupId>
         <artifactId>cssparser</artifactId>
         <version>0.9.4-fix</version>


Enjoy!

/JM
_______________________________________________
ECM mailing list
[email protected]
http://lists.nuxeo.com/mailman/listinfo/ecm

Reply via email to