felix-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Felix > Branding the Web Console
Date Tue, 02 Feb 2010 14:51:00 GMT
<html>
<head>
    <base href="http://cwiki.apache.org/confluence">
            <link rel="stylesheet" href="/confluence/s/1519/1/1/_/styles/combined.css?spaceKey=FELIX&amp;forWysiwyg=true"
type="text/css">
    </head>
<body style="background-color: white" bgcolor="white">
<div id="pageContent">
<div id="notificationFormat">
<div class="wiki-content">
<div class="email">
     <h2><a href="http://cwiki.apache.org/confluence/display/FELIX/Branding+the+Web+Console">Branding
the Web Console</a></h2>
     <h4>Page <b>edited</b> by             <a href="http://cwiki.apache.org/confluence/display/~fmeschbe">Felix
Meschberger</a>
    </h4>
     Update for use of the brand name (see FELIX-1958)
          <div id="versionComment" class="noteMacro" style="display:none; padding: 5px;">
     Update for use of the brand name (see FELIX-1958)<br />
     </div>
          <br/>
     <div class="notificationGreySide">
         <h1><a name="BrandingtheWebConsole-BrandingtheWebConsole"></a>Branding
the Web Console</h1>

<p>Branding the Web Consle mainly concerns hooking into the looks of the Web Console
providing vendor-provided setup like CSS, Logo, Main Title, Vendor URL, etc.</p>



<h2><a name="BrandingtheWebConsole-BrandingPluginandDefaultBrandingPlugin"></a>BrandingPlugin
and DefaultBrandingPlugin</h2>


<p>Branding for the Web Console can be provided in two ways: By registering a <tt>BrandingPlugin</tt>
service or by providing a branding properties files. The Web Console uses the branding from
the <tt>BrandingPlugin</tt> service registered with the highest ranking.</p>

<p>The <tt>BrandingPlugin</tt> interface provides the following information
used for branding:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-java">
<span class="code-comment">// Returns an indicative name of the branding plugin
</span><span class="code-comment">// This value is used as the Window/Page title
together with the
</span><span class="code-comment">// title of the respective plugin
</span><span class="code-object">String</span> getBrandName();

<span class="code-comment">// Returns the name of the product in which the web console
is contained
</span><span class="code-comment">// and to which the web console is branded.
</span><span class="code-object">String</span> getProductName();

<span class="code-comment">// Returns an (absolute) URL to a web site representing the
product to
</span><span class="code-comment">// which the web console is branded.
</span><span class="code-object">String</span> getProductURL();

<span class="code-comment">// Returns an absolute path to an image to be rendered as
the logo of the
</span><span class="code-comment">// branding product.
</span><span class="code-object">String</span> getProductImage();

<span class="code-comment">// Returns the name of the branding product vendor.
</span><span class="code-object">String</span> getVendorName();

<span class="code-comment">// Returns an (absolute) URL to the web site of the branding
product
</span><span class="code-comment">// vendor.
</span><span class="code-object">String</span> getVendorURL();

<span class="code-comment">// Returns an absolute path to an image to be rendered as
the logo of the
</span><span class="code-comment">// branding product vendor.
</span><span class="code-object">String</span> getVendorImage();

<span class="code-comment">// Returns the absolute path to an icon to be used as the
web console
</span><span class="code-comment">// <span class="code-quote">"favicon"</span>.
</span><span class="code-object">String</span> getFavIcon();

<span class="code-comment">// Returns the absolute path to a CSS file to be used as
the main CSS <span class="code-keyword">for</span>
</span><span class="code-comment">// the basic admin site.
</span><span class="code-object">String</span> getMainStyleSheet();
</pre>
</div></div>


<p>If no <tt>BrandingPlugin</tt> service is registered, the <tt>DefaultBrandingPlugin</tt>
is used.</p>


<p>The <tt>DefaultBrandingPlugin</tt> reads the <tt>/META-INF/webconsole.properties</tt>
from the web console bundle to setup the branding using the following properties:</p>

<table class='confluenceTable'><tbody>
<tr>
<th class='confluenceTh'> Property Name </th>
<th class='confluenceTh'> Default Value </th>
<th class='confluenceTh'> <tt>BrandingPlugin</tt> method name </th>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.brand.name</tt> </td>
<td class='confluenceTd'> Apache Felix Web Console </td>
<td class='confluenceTd'> <tt>getBrandName()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.product.name</tt> </td>
<td class='confluenceTd'> Apache Felix </td>
<td class='confluenceTd'> <tt>getProductName()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.product.url</tt> </td>
<td class='confluenceTd'> <a href="http://felix.apache.org" rel="nofollow">http://felix.apache.org</a>
</td>
<td class='confluenceTd'> <tt>getProductURL()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.product.image</tt> </td>
<td class='confluenceTd'> /res/imgs/logo.png </td>
<td class='confluenceTd'> <tt>getProductImage()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.vendor.name</tt> </td>
<td class='confluenceTd'> The Apache Software Foundation </td>
<td class='confluenceTd'> <tt>getVendorName()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.vendor.url</tt> </td>
<td class='confluenceTd'> <a href="http://www.apache.org" rel="nofollow">http://www.apache.org</a>
</td>
<td class='confluenceTd'> <tt>getVendorURL()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.vendor.image</tt> </td>
<td class='confluenceTd'> /res/imgs/logo.png </td>
<td class='confluenceTd'> <tt>getVendorImage()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.favicon</tt> </td>
<td class='confluenceTd'> /res/imgs/favicon.ico </td>
<td class='confluenceTd'> <tt>getFavIcon()</tt> </td>
</tr>
<tr>
<td class='confluenceTd'> <tt>webconsole.stylesheet</tt> </td>
<td class='confluenceTd'> /res/ui/webconsole.css </td>
<td class='confluenceTd'> <tt>getMainStyleSheet()</tt> </td>
</tr>
</tbody></table>

<p><b>Note:</b> The <tt>/META-INF/webconsole.properties</tt>
file is not contained in the Apache Felix Web Console bundle itself. It may be provided by
a Fragment Bundle attaching to the Apache Felix Web Console bundle. For an example of such
a fragment bundle see prototype <a href="https://svn.apache.org/repos/asf/sling/trunk/bundles/extensions/webconsolebranding/"
rel="nofollow">Sling Web Console Branding Bundle</a> with its <a href="https://svn.apache.org/repos/asf/sling/trunk/bundles/extensions/webconsolebranding/src/main/resources/META-INF/webconsole.properties?view=markup"
rel="nofollow"><tt>webconsole.properties</tt></a></p>


<h2><a name="BrandingtheWebConsole-BrandingtheStylesheet"></a>Branding the
Stylesheet</h2>

<p>Branding the CSS Stylesheet is basically possible with the <tt>BrandingPlugin.getMainStyleSheet()</tt>
method. The default value of the <tt>DefaultBrandingPlugin</tt> points to <a
href="http://svn.apache.org/viewvc/felix/trunk/webconsole/src/main/resources/res/ui/webconsole.css?view=markup"
rel="nofollow"><tt>webconsole.css</tt></a>. This allows styling the main
content structure as shown here:</p>

<div class="code panel" style="border-width: 1px;"><div class="codeContent panelContent">
<pre class="code-html">
<span class="code-tag">&lt;body&gt;</span>
    <span class="code-tag">&lt;div id=<span class="code-quote">"main"</span>&gt;</span>

        <span class="code-tag"><span class="code-comment">&lt;!-- Lead --&gt;</span></span>
        <span class="code-tag">&lt;div id=<span class="code-quote">"lead"</span>&gt;</span>
            <span class="code-tag">&lt;h1&gt;</span>
                Bundle Name
                <span class="code-tag">&lt;br&gt;</span>
                Page Title
            <span class="code-tag">&lt;/h1&gt;</span>
            <span class="code-tag">&lt;p&gt;</span>
                <span class="code-tag">&lt;a target=<span class="code-quote">"_blank"</span>
href=<span class="code-quote">"productURL"</span> title=<span class="code-quote">"productName"</span>&gt;</span>
                    <span class="code-tag">&lt;img src=<span class="code-quote">"productImage"</span>
border=<span class="code-quote">"0"</span>/&gt;</span>
                <span class="code-tag">&lt;/a&gt;</span>
            <span class="code-tag">&lt;/p&gt;</span>
        <span class="code-tag">&lt;/div&gt;</span>

        <span class="code-tag"><span class="code-comment">&lt;!-- Top Navigation
--&gt;</span></span>
        <span class="code-tag">&lt;div id=<span class="code-quote">"technav"</span>&gt;</span>
            <span class="code-tag"><span class="code-comment">&lt;!-- regular
link --&gt;</span></span>
            <span class="code-tag">&lt;a href=""&gt;</span>title<span
class="code-tag">&lt;/a&gt;</span>
            <span class="code-tag"><span class="code-comment">&lt;!-- label
of current page --&gt;</span></span>
            <span class="code-tag">&lt;span class=<span class="code-quote">"technavat"</span>&gt;</span>title<span
class="code-tag">&lt;/span&gt;</span>
            <span class="code-tag"><span class="code-comment">&lt;!-- label
of current page if drawing as link --&gt;</span></span>
            <span class="code-tag">&lt;a href=<span class="code-quote">""
class="</span>technavat"&gt;</span>title<span class="code-tag">&lt;/a&gt;</span>
        <span class="code-tag">&lt;/div&gt;</span>

        <span class="code-tag"><span class="code-comment">&lt;!-- this should
be inside a div ... --&gt;</span></span>
        <span class="code-tag">&lt;div id=<span class="code-quote">"content"</span>&gt;</span>
            <span class="code-tag"><span class="code-comment">&lt;!-- here
comes the content --&gt;</span></span>
        <span class="code-tag">&lt;/div&gt;</span>
    <span class="code-tag">&lt;/div&gt;</span>
<span class="code-tag">&lt;/body&gt;</span>
</pre>
</div></div>

<p>Predefined plugins use other styles defined by further CSS styles contained in the
web console bundle.</p>

<p>It is yet unclear how these plugins can be styled....</p>
     </div>
     <div id="commentsSection" class="wiki-content pageSection">
       <div style="float: right;">
            <a href="http://cwiki.apache.org/confluence/users/viewnotifications.action"
class="grey">Change Notification Preferences</a>
       </div>

       <a href="http://cwiki.apache.org/confluence/display/FELIX/Branding+the+Web+Console">View
Online</a>
       |
       <a href="http://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=2853654&revisedVersion=11&originalVersion=10">View
Change</a>
              |
       <a href="http://cwiki.apache.org/confluence/display/FELIX/Branding+the+Web+Console?showComments=true&amp;showCommentArea=true#addcomment">Add
Comment</a>
            </div>
</div>
</div>
</div>
</div>
</body>
</html>

Mime
View raw message