-
Type:
Task
-
Status: Resolved
-
Priority:
Minor
-
Resolution: Fixed
-
Affects Version/s: None
-
Fix Version/s: 7.4
-
Component/s: Seam / JSF UI, Themes (deprecated)
-
Epic Link:
-
Tags:
-
Impact type:Configuration Change
-
Upgrade notes:
-
Sprint:nxNag Sprint 7.3.5, nxNag Sprint 7.3.7
-
Story Points:5
Needed features to get back when theme modules are removed:
- binding js/css resources to a page
- defining head meta tags (favicon, bookmarkable URL)
- include "nuxeo 5 includes" template
- include header and footer "manually" on the page
We would have something like:
Page content
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:nxthemes="http://nuxeo.org/nxthemes" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <f:view contentType="text/html" /> <h:head id="pageHead"> <title> <ui:insert name="page title"></ui:insert> </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <link rel="icon" href="/nuxeo/icons/favicon.png" type="image/png"/> <link rel="shortcut icon" href="/nuxeo/icons/favicon.ico" type="image/x-icon"/> <base href="http://localhost:8080/nuxeo/" /> <ui:include src="/incl/includes.xhtml /> <!-- content to replace with new resources endpoint --> <link rel="stylesheet" type="text/css" href="#{baseURL}nxthemes-lib/gadget-common.css,gadget-documentlists.css,gadget-articles.css?basepath=#{baseURL}&flavor=#{currentFlavor}"/> <script src="#{baseURL}nxthemes-lib/gadget-default-automation-request.js,gadget-context-management.js,gadget-default-documentlist-display.js,gadget-articles.js"></script> <script type="text/javascript" src="#{baseURL}js/?scripts=confirmAlerts.js%7CDragAndDrop.js%7CtableSelections.js%7CcustomSeamRemotingWaiter.js%7Ccustom-javascript.js%7Cdefault-contextmenu-actions.js%7Ccustom-contextmenu-actions.js"> </script> <!-- alternative URLs retrieving resources linked to the corresponding theme page named "galaxy", that could reference instead a variable #{currentThemePage} for instance, to get back some kind of negotiation feature--> <link rel="stylesheet" type="text/css" href="#{baseURL}nxthemes-page-css/galaxy?basepath=#{baseURL}&flavor=#{currentFlavor}"/> <script src="#{baseURL}nxthemes-page-js/galaxy?basepath=#{baseURL}"></script> <!-- other interesting potential templating zones --> <ui:insert name="bookmark"></ui:insert> [...] </h:head> <h:body> <div class="header"> <!-- the nuxeo_header template can rely on #{currentFlavor} to display corresponding logo --> <ui:include src="/incl/nuxeo_header.xhtml /> </div> <div class="main"> [actual page content] </div> <div class="footer"> <ui:include src="/incl/nuxeo_footer.xhtml /> </div> </h:body> </html>
Note this above definition could also changed into a template, so that we have something like:
<ui:composition template="global_page_template.xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:define name="page title"> ... </ui:define> <ui:define name="content"> .... </ui:define> </ui:composition>
Theme Page (js/css resources binding via extension points) --> we can rename this concept
<themePage name="galaxy">
<defaultFlavor>default</defaultFlavor>
<flavors>
<flavor>default</flavor>
<flavor>rainbow</flavor>
</flavors>
<styles>
<style>basics</style>
<style>buttons_and_actions</style>
<style>header</style>
<style>body</style>
<style>footer</style>
<style>grids_and_widgets</style>
<style>navigation</style>
<style>forms</style>
<style>messages_and_tooltips</style>
<style>foldable_boxes</style>
<style>tabs_content</style>
<style>helpers</style>
<style>print_generic</style>
</styles>
</themePage>
Flavor (unchanged):
<flavor name="default">
<label>label.theme.flavor.nuxeo.default</label>
<logo>
<path>/img/nuxeo_logo.png</path>
<previewPath>/img/nuxeo_preview_logo_black.png</previewPath>
<width>113</width>
<height>20</height>
<title>Nuxeo</title>
</logo>
<presetsList>
<presets category="border" src="themes/palettes/default-borders.properties" />
<presets category="background"
src="themes/palettes/default-backgrounds.properties" />
<presets category="font" src="themes/palettes/default-fonts.properties" />
<presets category="color" src="themes/palettes/default-colors.properties" />
</presetsList>
<palettePreview>
<colors>
<color>#17384e</color>
<color>#00adff</color>
<color>#00adff</color>
<color>#00adff</color>
<color>#fff</color>
<color>#00adff</color>
<color>#404040</color>
<color>#cfecff</color>
<color>#e6f1ff</color>
</colors>
</palettePreview>
</flavor>
