The use of Tobago is explained in the Demo.

You may subscribe to the user mailing list, and post questions there.

Please look at tobago-example-blank or download the myfaces-tobago-example from the nightly builds directory.

Tobago runs with Sun RI and with MyFaces. Please take a look at the List.

Tobago 2.0.x:

Tobago supports the JSF 2.0 Facelets. Note: Please add following context param in your web.xml

    <context-param>
      <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
      <param-value>true</param-value>
    </context-param>

Tobago 1.0.x and 1.5.x:

Tobago supports Facelets with the tobago-facelets.jar. Note: Please add following context param in your web.xml

    <context-param>
      <param-name>facelets.SKIP_COMMENTS</param-name>
      <param-value>true</param-value>
    </context-param>

JSF only supports one renderkit (renderkitId) per page (f:view). Because Tobago has it's own renderkitId you cannot use any non-Tobago components that need a renderer.

    <tc:gridLayout rows="auto 100px 1fr 2fr" />

The attribute 'fixed' means a theme dependent height of one row (i.e. in Speyside a row is typically 20px high.) In a 'fixed' row all one height unit high elements find their place (like buttons, input fields, one row of text...).
Using px heights is at your own risk, but it is sometimes needed for elements like box or sheet.

Alternatively you can give elements a proportion with the * notation.
For example rows="1fr 2fr" gives the first row 1/3 of the available vertical space and the second row 2/3. This works fine for columns, too.

You can group elements with a tc:panel element. Such a panel is interpreted as one element regarding layout. The panel itself can have its own layout for multiple elements inside the panel.

Till Tobago 2.0 and lower, you have two options.

Add a TobagoMultipartFormdataFilter to your web.xml. JavaDoc Description

Add the tobago-fileupload.jar to your project. The tobago-fileupload.jar contains a FacesContextFactory that wraps the multipart-formdata request inside the FacesContext. JavaDoc Description

Starting with Tobago 3.0 the Servlet API 3.0 will be used. Some more information about the usage you will find in Jira and in the Tobago Demo 3.0. There is also a migration guide available.

The page tag already acts like a form tag. You only need a explicit form tag for partial validation of your data. Please look at the forms example in the Tobago demo

Please take a look at the List.

You have to define a new name for the theme in the META-INF/tobago-config.xml. Choose a fallback theme in the tobago-config.xml. Put the modified resources under the resource-path + theme-name. An example for this is the charlotteville theme. (TODO more details resource handling)

Example layout of a theme jar:

    /META-INF/tobago-config.xml (resource-path/html/theme-name)
    /org/apache/myfaces/tobago/renderkit/html/xxxxx/standard/style/tobago.css (standard styles)
    /org/apache/myfaces/tobago/renderkit/html/xxxxx/standard/style/tobago-menu.css (menu styles)
    /org/apache/myfaces/tobago/renderkit/html/xxxxx/standard/style/tobago-sheet.css (sheet styles)
    /org/apache/myfaces/tobago/renderkit/html/xxxxx/msie/style/tobago.css (different styles for msie)

Property and resource loading and renderer loading is done in the following order

    resource-path/content-type/theme/client/[tag(for renderer)|property|style|script|image]_locale.(class|property|property.xml|css|js|gif|png...]

for example OutRenderer
org.apache.myfaces.tobago.renderkit.html.scarborough.standard.tag.OutRenderer
OutRenderer is getRendererType() + "Renderer"
The locale handling is handled like the Properties Class.
You have not define everything because the ResourceManager is asking the fallback theme for missing resources
The fallback theme of charlotteville is speyside.
The fallback theme of speyside is scarborough.
The fallback theme of scarborough is standard
The resource manager looks in the case of the charlotteville theme in
charlotteville -> speyside -> scarborough -> standard

Please look at tobago-example-theme

UIBox, UIInput and UIOutput support custom markup with the markup attribute. The supported markup is defined in the tobago-config.xml. The standard markup is defined in tobago-config.xml of the tobago-theme-standard. This can be extended in your own theme. The markup attribute is rendered as a CSS class tobago-[renderer-name.toLowerCase]-markup-[markup]. For an example please look at the markup number and the CSS class tobago-in-markup-number for UIIn in theme/scarborough/src/main/resources/org/apache/myfaces/tobago/renderkit/html/scarborough/standard/style/tobago.css

Please take a look at the List. Feel free to post your own experiences.

Can Tobago replace Tiles? Can I ignore Tiles and Sitemesh in favor of Tobago? >

Tobago cannot replace it. But sometimes you may not need it, when you are using Tobago. If you want to position and size your components automatically, you can do this with a Tobago LayoutManager. If you want your header and sidebar rendered without writing duplicate code, you may use JSP 2.0 tag files, Facelets or Tiles/Sitemesh.

If you want to set up a different mirror for some reason, you can use your ~/.m2/settings.xml and add the following lines:

    <mirrors>
      <mirror>
        <id>mirror ID</id>
        <name>Give it a name</name>
        <url>The URL of the mirror</url>
        <mirrorOf>The server ID of the repository being mirrored. This must not match the mirror ID</mirrorOf>
      </mirror>
    </mirrors>

See: Guide to mirror settings

Mirrors: List of mirrors

If you run into problems with fetching jars from the online repository, you can configure Maven not to fetch them but use the ones already in your local repository by adding the following to your ~/.m2/settings.xml:

    <settings>
      <offline/>
    </settings>

or use the mvn -o switch.

    mvn compile checkstyle:check

The problem is, that there is no concept for deprecation in Taglibs. The tobago-core.jar contains a generated checkstyle configuration to perform a syntax check via the maven checkstyle plugin.

Configure in the applications pom.xml an entry like this example

    <profile>
      <id>checkstyle-for-view-definition-language</id>
      <build>
        <plugins>
          <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-checkstyle-plugin</artifactId>
            <configuration>
              <configLocation>META-INF/checkstyle-tobago.xml</configLocation>
              <includes>**/*.xhtml</includes>
              <excludes>**/*.java</excludes>
              <sourceDirectory>src/main/webapp</sourceDirectory>
            </configuration>
            <dependencies>
              <dependency>
                <groupId>org.apache.myfaces.tobago</groupId>
                <artifactId>tobago-core</artifactId>
                <version>\${tobago.version}</version>
              </dependency>
            </dependencies>
          </plugin>
        </plugins>
      </build>
    </profile>

To perform a check call

    mvn checkstyle:check -Pcheckstyle-for-view-definition-language

You will find the result in target/checkstyle-result.xml

One reason is, that the checked out files will have a too long path name. Under Windows the MAX_PATH is set to 260 characters. When you try to checkout in a directory like C:\Dokumente und Einstellungen\MyUser\Apache Projects\ the path will be too long. A workaround will be checking out in an other directory or register a new drive letter and check it out in X:

    SUBST X: "C:\Dokumente und Einstellungen\MyUser\Apache Projects\"

In the tobago-example-test application, the pages can be checked with selenium since Tobago 1.5. To run the full test automatically call

    mvn -P integration-test

This will start a jetty server and a selenium server and calls every listed page in the test application.

If you want to run the tests from your IDE, please start the jetty with `mvn jetty:run` or `mvn jetty:run-exploded` and start the selenium server with

    mvn selenium:start-server

Now you can start the selenium tests in the IDE.

Sometimes there is a problem with Firefox. You may try to use a different version, or an installation without plugins.

In the tobago-example-demo application, the pages can be checked with QUnit/Arquillian. To run the full test automatically call

    cd tobago-example/tobago-example-demo
    mvn verify -Pqunit-integration-tests

The default arquillian browser is 'phantomjs'. You can change it in tobago-example-demo/pom.xml <arquillian.browser>.

If you want to run the tests from your IDE, please use the maven profile 'tomee'. After that, you can start the test from the QUnitTests class.

Since Tobago 4.3.0 the integration tests are reimplemented with docker.

To run the integration tests:

    cd tobago-example/tobago-example-demo
    mvn -Pdocker-qunit-tests

The docker container can be rebuild with:

    mvn package -Pdocker-qunit-tests docker:build

You can also just start/stop the docker container manually to run the tests from your IDE.

    mvn -Pdocker-qunit-tests docker:start
    mvn -Pdocker-qunit-tests docker:stop

1. start demo

       cd tobago-example/tobago-example-demo
       mvn clean jetty:run

2. open 'Test' menu in the header of the Tobago-Demo-Page
   1. 'Run Test' is enabled if a test is available for the current page.
   2. 'Run all tests' is enabled if in development mode. (opens every test in a separate iframe)
   3. 'Access all pages' is enabled if in development mode. (opens every page in a separate iframe)

Howto create QUnit tests for Tobago Demo 3.0 or higher

1. Choose a `sample.xhtml` file for testing.
2. Create a `sample.test.js` file (with same name).
3. Add a to the `sample.test.js`.

       QUnit.test("Testtitle", function(assert) {
         ...
       });

   1. The test will run in a different frame. To get an element in the test frame use `jQueryFrameFn()` instead of `jQuery()`. Please note that `jQueryFrameFn()` return a function, so you have to write `jQueryVar()` instead of `jQueryVar` to get the element.
      This is very usefull, because elements are outdated after an AJAX request or a full page reload.
   2. Create a TobagoTestTools variable:

          var TTT = new TobagoTestTools(assert);

   3. User actions like a click on a button can be added to an action function:

          TTT.action(function () {
            $button().click();
          });

   4. If the test have to wait for a response or a specific time use the waitForResponse or the waitMs function:

          TTT.waitForResponse();
          TTT.waitMs(2000); // wait 2000 milliseconds

   5. can be added to a asserts function. The first parameter is the number of assertions:

          TTT.asserts(2, function () {
            assert.equal($input().val(), "Alice");
            assert.equal($output().text(), "Bob");
          });

   6. Start the test with:

          TTT.startTest();

       @Test
       public void testname() throws UnsupportedEncodingException, InterruptedException {
         String page = "content/.../testname.xhtml";
         runStandardTest(page);
       }

4. Run the tests from QUnitTests or type

       mvn verify -Pqunit-integration-tests

Please use at least Tobago 2.0 for this guidance (in this version the pom.xml files are prepared).

You will need to do the following steps for preparation:

- Download the server like:

      wlp-developers-runtime-8.5.5.0.jar

  from IBM
- Unpack the server anywhere in you file system, e.g. like this

      mkdir /opt/wlp-developers-runtime-8.5.5.0
      cd /opt/wlp-developers-runtime-8.5.5.0
      java -jar ~/Downloads/wlp-developers-runtime-8.5.5.0.jar

- Adding your server home to a property in the settings.xml of Maven

      <wlp.directory>/opt/wlp-developers-runtime-8.5.5.0/wlp</wlp.directory>

After these steps you can start/stop the server and deploy an built artifact. For these steps, you need to be in the Tobago example demo directory.

    cd tobago-examples/tobago-example-demo

This is important for the first start of the server, because at the first start the server will be initialized. For the setup the file

    test/resources/server.xml

will be read. It contains the features, the WLP server will be support, and other configurations. In our case we have the following features:

    <feature>cdi-1.0</feature>
    <feature>jsp-2.2</feature>
    <feature>servlet-3.0</feature>
    <feature>jsf-2.0</feature>

- Start the server

      mvn -Pliberty liberty:start-server

- Build an artifact (you need the "provided" property, because JSF and OWB comes from the server)

      mvn clean package -Djsf=provided

- Deploy an artifact

      mvn -Pliberty liberty:deploy

- You will find the web application under this URL

      http://localhost:9080/tobago-example-demo/

- Redeploy an artifact: The same as deploy.
- Stop the server

      mvn -Pliberty liberty:stop-server

The server starts very fast and is simple to use (very different from the full WebSphere installation). The log files you will find here:

    cd /opt/wlp-developers-8.5.next.beta/wlp/usr/servers/tobago/logs/

Sometime you may need to the clean the server, in particular when you are changing JAR dependencies. For doing that

- Stop the server
- Remove the whole concrete server installation

      rm -r /opt/wlp-developers-8.5.next.beta/wlp/usr/servers/tobago

- Start the server (don't forget the server.xml)
- Deploy again

Please also consider the plugin configuration in the tobago-example/pom.xml

    <groupId>com.ibm.websphere.wlp.maven.plugins</groupId>
    <artifactId>liberty-maven-plugin</artifactId>

There is a basic example for portlets in the GIT repository in the sub-folder tobago-example/tobago-example-portlet There is no specific configuration to use Tobago in Portlets. The portlet stuff is currently not active, so the example is removed in Tobago 4.