elstar IT

Fullstack | Java | Tech Speaker | Tech Coach | Frank van der Linden

  • About me
  • Blog license
  • My Open source projects

Power of Themes part 2, the XML syntax

01-06-2015 2 responses flinden68 development

Last month I wrote a small blog about the Power of Themes. To me the must start of a XPages project.

A themes is in the basic just a XML file, like many other files in a XPages application. So when you are forget a XML tag to close properly you will be prompt when you build the application with malformed error.

Extending themes

The first tag in the Theme file is the <theme> tag, and as you can see, you can extend other themes in this tag. This is a very usefull, becuase you can benefit from other themes and don’t need to write all the theme components.

[dropshadowbox align=”none” effect=”lifted-both” width=”250px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]<theme extends=“Bootstrap3.2.0”>[/dropshadowbox]

Resources

Another nice thing about themes is to be a central place to declare all your ‘external’ resources, like css, javascript files. But also meta tags you need across you entire application

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<resources>

        <metaData>

            <name>viewport</name>

            <content>width=device-width, initial-scale=1.0</content>

        </metaData>

    </resources>

<resource>

        <content-type>text/css</content-type>

        <href>libs/fontawesome/css/font-awesome.min.css</href>

</resource>

[/dropshadowbox]

Expression Language

In the Themes you can also use Expression Language, so you can benefit from other Java resources in the XPages application. One nice example is the favicon, which is stored in a configuration file or application title

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<control override=“false”>

        <name>ViewRoot</name>

        <property>

            <name>pageTitle</name>

            <value>#{javascript:database.getTitle();}</value>

        </property>

        <property>

            <name>pageIcon</name>

            <value>#{javascript:configBean.getFaviconURL()}</value>

        </property>

</control>

[/dropshadowbox]

Components

In the Theme you can override existing components of the XPages runtime, with you own style or properties. For a list of available components, navigate to the <Notes program>xsp\nsf\themes directory. Inside this folder you will fin all themes used by the XPages runtime. Open it will you preferred text editor and start searching for you component. There is comments above the components, so it is not that difficult to find the desired component.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<control>

        <name>DataTable.ViewPanel</name>

        <property>

            <name>dataTableStyleClass</name>

            <value>table table-hover</value>

        </property>

</control>

[/dropshadowbox]

In the above example I override the style of the ViewPanel Table class to meet the style of Bootstrap of tables. As you can see, it is only a few lines of code, but all the view panels in the XPages application will behave like a Bootstrap table with hover colouring.

Theme Id

Theme Id’s is another powerful functionality of Themes. In a Theme you specify a theme id component. Give it a unique name. Best way to follow the way IBM is using, so you will later understand the use of the theme component.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<!– Primary Button –>

<control>

        <name>Button.Primary</name>

        <property>

            <name>styleClass</name>

            <value>btn btn-primary</value>

        </property>

</control>

[/dropshadowbox]

Inside the application to assign this theme name as ThemeId to a component and on runtime the button will behave as primary Bootstrap button.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<xp:button id=“buttonSave” themeId=“Button.Primary”>

</xp:button>

BootstrapSaveButton

[/dropshadowbox]

Advanced power

In my application I am using bootstrap to make it responsive. One of the not so nice components that needs some love to meet the Bootstrap look and feel is the Pager.

I have created a custom Java renderer, which convert the standard Pager.

In the Theme I specify the component who will use the Renderer.

[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<control>

        <name>Pager</name>

        <property>

          <name>rendererType</name>

          <value>nl.elstarit.renderers.type.BootstrapPagerRenderer</value>

        </property>

      </control>

[/dropshadowbox]

The RenderType is pointing to a Renderkit component I created in the Faces-config.xml, which is pointing to the actual Java Class who do the magic

[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]

<!– Bootstrap render pager –>

  <render-kit>

    <renderer>

      <component-family>com.ibm.xsp.Pager</component-family>

      <renderer-type>nl.elstarit.renderers.type.BootstrapPagerRenderer</renderer-type>

      <renderer-class>nl.elstarit.renderers.BootstrapPagerRenderer</renderer-class>

    </renderer>

  </render-kit>

[/dropshadowbox]

When the page is rendered the pager looks now like this.

[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]BootstrapPager[/dropshadowbox]

I hope this will help to understand the power of Themes. Almost everything configured in one place.

Tags: development, themes, xpages

2 thoughts on “Power of Themes part 2, the XML syntax”

  1. Andrew Magerman says:
    02-06-2015 at 09:06

    Excellent!

    Reply
  2. Patrick Kwinten says:
    14-04-2016 at 19:08

    some great examples! Another good one is for disabling/enabling AMD loading

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • « Power of Themes part 1, get started
  • My take on JSoup »

Contact me

My name is Frank van der Linden and I am an independent software developer based in the Netherlands. The last 2 years I was awarded as IBM Champion. Also I am on the board of OpenNTF. My specialisations are Java, Web development and Domino.


If you want to hire me, please fill in the Contact form


IBM Champion web badge
Apache Logo

All the code on this blog are under the Apache License 2.0. For more details, see Apache License 2.0

Most recent posts

  • NL Portal, a open source project
  • 10th anniversary as a freelancer and more…
  • Engage 2020: Hello are you listening, There is stream for everything
  • Spring Cloud Function on Azure run locally
  • Deploy Spring Cloud Function to IBM Cloud

Latest reactions

  • Spring Cloud Function on Azure run locally - elstar IT on Deploy Spring Cloud Function to IBM Cloud
  • flinden68 on Quick XPages tip: add Fullcalendar plugin to your application
  • Rajesh samal on Quick tip: Swagger support for Spring Webflux
  • dsieyx on Quick XPages tip: add Fullcalendar plugin to your application
  • John on Named as IBM Champion 2019

Archive

  • November 2024
  • April 2024
  • March 2020
  • February 2020
  • January 2020
  • October 2019
  • September 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • January 2019
  • December 2018
  • October 2018
  • September 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014

Category

  • bluemix
  • business
  • cloudant
  • community
  • development
  • hrassistant
  • openntf
  • running
  • salesforce
  • Springboot
  • Tesla
  • trailrunning
  • Uncategorized
  • watson
  • OpenNTF
  • Collaboration Today
  • XSnippets
  • Stackoverflow
  • IBM Collaboration Solutions
  • Social Business Toolkit
  • About me
  • Dutch curriculum vitae
  • English curriculum vitae
  • Google+
  • LinkedIn profile
  • Twitter
  • Slideshare
  • Blog license
  • My open source projects