Last updated February 28, 2011 09:02, by Bernd Eilers
Feedicon  

Layout Customization for OpenOffice.org on Kenai

Feature Activation

For a particular project, a project admin must add both the "Website" and the "Custom Layout" features. To do this, go to the "Features" tab for your project.

  • Only one custom layout is allowed per project.
  • Note the "Layout" drop down list. For most of the OpenOffice.org projects the "OpenOffice.org Layout" should be used. Some special purpose webcontent only providing projects might choose the "OpenOffice.org Simple Layout" instead.

Once the feature is enabled, Kenai will begin using the new layout for all application generated project pages. User-created web pages will also be placed into the new layout if the "Include Normal Navigation" box is checked in the website feature configuration. This configuration is the default for projects migrated from Collabnet.

Customization

The layout for the project is customized using a set of HTML fragments which are used in the layout templates. To see the available modules, click on the new custom layout feature in the "features" tab of the project. Modules are placed into a special directory in the website root directory, named "__modules".

Note that fragments contain code which is inserted directly into the served pages, and can therefore contain any code appropriate to the context - usually, this means HTML, CSS and JavaScript. Typically, some fragments would reference content which is stored elsewhere on the website. For example, CSS might be included from a file within a "css" subdirectory within your Kenai website, using a <link> tag within the <head> module. Similarly, fragments for subprojects might maintain a consistent look and feel by referencing CSS and JavaScript files at a parent project website URL.

OpenOffice.org Layout

The "OpenOffice.org Layout" provides the default OpenOffice.org look&feel with the default OpenOffice.org stylesheets.

The fragments used by the "OpenOffice.org" Layout are as follows:

head__modules/head.htmlxto add content to the head section of all web content
header__modules/header.htmlxto replace the header
header_left__modules/header_left.htmlxto replace the logo and text in the left area of the header
header_tools__modules/header_tools.htmlxto replace the tools area of the header (login options and search boxes)
header_navigation__modules/header_navigation.htmlxto replace the navigation area with the tabs in the header
header_navigation_extras__modules/header_navigation_extras.htmlxto add additional tabs to the navigation area in the header
header_extras__modules/header_extras.htmlxto add additional content below the usual header
breadcrumbs__modules/breadcrumbs.htmlxto replace the breadcrumbs area below the header
left_sidebar__modules/left_sidebar.htmlxto replace the left sidebar
left_sidebar_content__modules/left_sidebar_content.htmlxto replace the content in the left sidebar but keeping the toggle bar
left_sidebar_topics__modules/left_sidebar_topics.htmlxto add additional topic boxes to the left sidebar
search__modules/search.htmlxto replace the search box in the left sidebar
help__modules/help.htmlxto replace the help box in the left sidebar
right_sidebar__modules/right_sidebar.htmlxto add a sidebar on the right without a toggle bar
right_sidebar_content__modules/right_sidebar_content.htmlxto add a sidebar on the right with a toggle br
footer__modules/footer.htmlxto replace the footer
footer_extras__modules/footer_extras.htmlxto add content below the usual footer

Note that some of those fragments are not being used if some others are present. For example if there is a left_sidebar fragment the left_sidebar_content, left_sidebar_topics, search and help fragments are not being used.

OpenOffice.org Simple Layout

The "OpenOffice.org Layout" provides the a simplified OpenOffice.org look&feel with the reduced OpenOffice.org stylesheets. The large OpenOffice.org stylesheet which also contains general default rules for basic HTML elements is not included. Also stylesheet information for OpenOffice.org header and footer elements is only included if the project does not define it´s own header and footer by providinge header.htmlx and footer.htmlx fragments in the __modules directory. This can be useful for special purpose web content providing projects where those default CSS rules might otherwise get in the way of defining a special layout. Stylesheets needed for the kenai infrastructur are included though.

The fragments used by the "OpenOffice.org Simple Layout" are as follows:

head__modules/head.htmlxto add content to the head section of all web content
header__modules/header.htmlxto replace the header
header_left__modules/header_left.htmlxto replace the logo and text in the left area of the header
header_tools__modules/header_tools.htmlxto replace the tools area of the header (login options and search boxes)
header_navigation__modules/header_navigation.htmlxto replace the navigation area with the tabs in the header
header_navigation_extras__modules/header_navigation_extras.htmlxto add additional tabs to the navigation area in the header
footer__modules/footer.htmlxto replace the footer

Note that if there is a header fragment the header_left, header_tools, header_navigation and header_navigation_extras fragments are not being used.

Migration

Only for the why project the "OpenOffice.org Simple Layout" is set during migration from the CEE site every other project including www is configured to use the "OpenOffice.org Layout".

Localization

If the default OpenOffice.org header is being used a locale.yaml file in the __modules directory of the project can be used to localize the header. This feature is available even when the custom layout feature is not being activated for the project.

Here is a sample locale.yaml file containing the default values which would be used when no locale.yaml file is present. To localize the header for your project just change the values in this file and place it into the __modules tolevel directory for the webcontent of your project.

The de project is an example project that is using a localized locale.yaml file.

Website Update Automation

Website content and custom layout can be managed in a source code repository rather than directly using WebDAV. You can use the Hook feature in conjunction with either or both of the Website and Custom Layout features.

Website Automation Setup

A project admin can add a new repository using the "SCM" feature. Instead of manually updating Website files via a WebDAV client, a project admin can add a "SCM Website Hook" type via the "Hook" feature. It will allow any checkins to a specific SCM repository to be updated into the Website area automatically. The default setting for all OpenOffice.org projects is to use a subversion reopository for web content. This is automatically configured during migration of the collabnet site.

Keeping website content in a separate repository is highly recommended, rather than keeping the project customization in the same source code repository per the old java.net repository layout. It enables more flexible access controls, allowing project admins to grant different users access to the customization repository than to the general source code repository. Also it improves update performance, particularly with large source code repositories.

Check in any changes into the new content repository as needed.

Custom Layout subdirectory

Create a "_modules" subdirectory to hold any custom layout modifications and check it into the new repository. The "_modules" directory should be at the top level.

__modules

Enable SCM Website Hook

Create a new Hook type "SCM Website Hook" and link to the new content repository. Please make sure the base directory used for the hook contains specific content directories as stated in "Upload Content" section. For example, '/' is the base directory if all content directories are at the root of the repository.

Any subsequent commits to the content repository will result contents of base directory within the repository updated automatically into the Website area.

Website Conversion Examples

Adding project specific additional information boxes to the left sidebar

To add one or more project specific additional information boxes to the left sidebar add a __modules/left_sidebar_topics.htmlx file like the following:

<dl id="devguidebox" class="navgroup"> 
      <dt><a href="http://wiki.services.openoffice.org/wiki/Documentation/DevGuide/OpenOffice.org_Developers_Guide">Developer's Guide</a></dt>
  <dd>
  <ul>
	<li><a href="http://wiki.services.openoffice.org/wiki/Documentation/DevGuide/OpenOffice.org_Developers_Guide">&raquo; Content Table</a></li>
	<li><a href="/docs/common/ref/com/sun/star/module-ix.html">&raquo; IDL reference</a></li>
	<li><a href="/docs/DevelopersGuide/Appendix/IDLDesignGuide/IDLDesignGuide.xhtml">&raquo; IDL Design Guide</a></li>
	<li><a href="/docs/DevelopersGuide/Appendix/IDLDocumentationGuide/IDLDocumentationGuide.xhtml">&raquo; IDL Docu Guide</a></li>
  </ul>
  </dd>
</dl>

The api project is an example project using such type of customization.

Adding a project specific tab to the navigation area of the header

To add a project specific tab to the navigation area of the header add a __modules/header_navigation_extras.htmlx file like the following:

<li class="plain">
<a href="http://wiki.services.openoffice.org/wiki/Documentation/DevGuide/OpenOffice.org_Developers_Guide"><span>Developer's Guide</span></a>
</li>

Again the api project is an example project using such type of customization.

Replacing or disabling the breadcrumbs

You can replace the breadcrumbs area below the header by providing a __modules/breadcrumbs.htmlx file. To disable it provide a __modules/breadcrumbs.htmlx with just a simple HTML comment like the following:

<!-- breadcrumbs disabled -->

Note that providing an empty __modules/breadcrumbs.htmlx file will not disable the breadcrumbs area there must be some content in it. The same technic can be used to disable the header and the footer using __modules/header.htmlx and __modules/footer.htmlx files with just a simple HTML comment.

The support project is an example project using such customization.

Log in/out controls for own header

Links for controlling login and logout (typically located at the top right of the page) can generated using javascript if you use a custom header. We have provided a javascript snippet which enables this feature - this is a reusable example, but feel entirely free to re-write it. (For example, it uses jquery and a cookie lib found here:

http://code.google.com/p/cookies/

Jquery is already used by Kenai, but you may wish to skip the cookie lib and do the cookie parsing yourself.)

NOTE: future revs of the custom layout feature will introduce a DSL to allow users to insert fragments generated dynamically by Kenai, such as project specific menus and login controls, tailored to the particular configuration of the project and session state. For now however, these fragments are inserted statically into the pages rendered by Kenai.

Here is the javascript code.

var JNLogin = {
    _getSsoCookie: 
        function () { 
            return $.cookies.get('SSO');
        },

    _getCookieComponent:
        function (index) {
            ssoCookie = this._getSsoCookie ();
            bits = ssoCookie.split (':');
            return bits[index];
        },

    username:
        function() {
            return this._getCookieComponent (0);
        },

    expiration:
        function() {
            var expStr = this._getCookieComponent (1);
            var expNum = new Number(expStr);
            return new Date (expNum * 1000);
        },

    loggedIn: 
        function() {
            if (this._getSsoCookie ()) {
                var expDate = this.expiration ();
                var today = new Date ();
                return expDate &gt; today;
            } else {
                return false;
            }
        },

    init:
        function(idList) {
            var that = this;

            var username = 'username';
            var login = 'loginbox';
            var logout = 'loggedin';

            if (idList) {
                username = idList.username || username;
                login = idList.login || login;
                logout = idList.logout || logout;
            }

            $(document).ready (function () {
                ´if (that.loggedIn ()) {
                    $("#" + username).html (that.username ());
                    $("#" + login).hide ();
                } else {
                    $("#" + logout).hide ();
                };
            });
        }
}

.init ();

For this to work, three elements need to be present in the page. In this example, these are two <div> elements named 'loginbox' and 'loggedin', and a link anchor named 'username'. Here is the snippet:

<div id="loginbox"
    <div>
        <a href="https://testjava.net/people/login">Login</a>

        |
        <a href="https://testjava.net/people/new">Register</a>
   </div>
</div>
<div id="loggedin">
    <div>

        <a id="username" href="http://testjava.net/mypage"></a>
        |
        <a href="http://testjava.net/people/logout">Log out</a>
    </div>

</div>

The javascript JNLogin.init() function manipulates these elements based on the session state. Note that you can also remove the unparameterized init call at the end of the definition of JNLogin above, and call it with a parameter hash,
like this:

JNLogin.init ({ username: 'yourelementid', ... });

Any or all of the element names can be set this way. Valid hash keys are 'username' (default: 'username'), 'login' (default: 'loginbox'), and 'logout' (default: 'loggedin').

Nav Links

For Kenai-internal links, the following guidelines should be followed:

  • Links to mailing lists should go to: 
    http://domain.tld/projects/shortname/lists

    so for de, on openoffice.org, that would be

    http://openoffice.org/projects/de/lists

  • Links to other projects, if a website feature is active for the target project, should look like this: 
    http://shortname.domain.tld/

    so, for the de project, for example, the link target would be:

    http://de.openoffice.org/

  • Links to other projects, if a website feature is NOT active for the target project, should look like this: 
    http://domain.tld/projects/shortname

    so, for the de project, the link target would be:

    http://openoffice.org/projects/de

  • Mysql
  • Glassfish
  • Jruby
  • Rails
  • Nblogo
Terms of Use; Privacy Policy;
© 2010, Oracle Corporation and/or its affiliates
(revision 20120518.3c65429)
 
 
Close
loading
Please Confirm
Close