Redesigned fragment factory

The fragment factory is used to insert page fragments into a theme (by clicking on Add fragment via the contextual menu).

>>> Take a look at the screencast

The operation is done in four steps:

Selecting a fragment type (data)
Selecting a view (HTML)
Selecting a style (CSS code)
Reviewing the selection and adding the fragment

Each step determines the range of choices available in the following steps.

Fragments are responsible for generating data according to a data model (menu, feed, region, navigation, …). For any given type of data model, a limited list of views is available.

The views are responsible for converting the fragment data into HTML code. For example a list of links may be represented as a vertical menu or as a horizontal trail, or as news ticker…

Since views expect a given type of data format, they know in advance how to interpret the data. There is so to speak a strong typing between fragments and views.

A special type of fragment called the generic fragment generates no data at all, which means that views are responsible for obtaining the data directly from the application.

In this example we select the search box view:

Here is the HTML code of the search box:

<form action="${Root.getPath()}/@search" method="get">
  <div>
    <input type="text" name="fullText" value="" />
  </div>
</form>

In the third step we can choose to apply a style to the selected view. This is an optional step.

The CSS code of the search box style is:

form {
 background-color: "light blue (Chalmers ST colors)";
 border: 1px solid "white (Chalmers ST colors)";
 margin: 18px 15px;
 padding: 8px;
 text-align: left;
}

form input {
 background: "search (Chalmers ST backgrounds)";
 border-color: "dark blue (Chalmers ST colors)";
 border-style: solid;
 border-width: 1px;
 color: "dark gray (Chalmers ST colors)";
 font-size: 12px;
 padding: 4px 20px;
 width: 120px;
}

It is clear that not all styles are designed for the search box view. The typing between views and styles is weak and there is no guarantee that styles will match any given view.

Finally we review the selection. A preview is generated on-the-fly and by clicking on the ADD FRAGMENT button we can insert the fragment into the theme. This operation, as all other theme operations, can be undone by clicking on undo add fragment.

Screencast showing the four steps

Improvements

There is no way to know in advance how well styles and views will match one another. A solution would be to restrict the list of styles that can be applied to a view. In that case when a style is created or being edited there should be an option where to specify a list of compatible views. If no view is selected one could assume that the style applies to any view.

nuxeo • Themes