How to add richfaces tag to a jsf page?

I am following the tutorials and examples at http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf?tab=usage&cid=40889 and i am using richfaces 4.0 . Now i am trying to create a scrollable data table. I inserted the sample code to my jsf page. Here it is:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:rich="http://richfaces.org/rich">

    <style>
        .scrolls{
            width:300px;
            height:200px;
            overflow:auto;
        }
    </style>    
    <h:form>
        <rich:spacer height="30" />
        <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px" 
            width="700px" id="carList" rows="40" columnClasses="col"
            value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
            sortOrder="#{dataTableScrollerBean.order}"
            selection="#{dataTableScrollerBean.selection}">

            <rich:column id="make">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet>
                <h:outputText value="#{category.make}" />
            </rich:column>
            <rich:column id="model">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet>
                <h:outputText value="#{category.model}" />
            </rich:column>
            <rich:column id="price">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet>
                <h:outputText value="#{category.price}" />
            </rich:column>
            <rich:column id="mileage">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Mileage" /></f:facet>
                <h:outputText value="#{category.mileage}" />
            </rich:column>
            <rich:column width="200px" id="vin">
                <f:facet name="header"><h:outputText styleClass="headerText" value="VIN" /></f:facet>
                <h:outputText value="#{category.vin}" />
            </rich:column>
            <rich:column id="stock">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Stock" /></f:facet>
                <h:outputText value="#{category.stock}" />
            </rich:column>
        </rich:scrollableDataTable>
        <rich:spacer height="20px"/>
        <a4j:commandButton value="Show Current Selection" reRender="table" 
            action="#{dataTableScrollerBean.takeSelection}" 
            oncomplete="javascript:Richfaces.showModalPanel('panel');"/>
    </h:form>
    <rich:modalPanel id="panel" autosized="false" keepVisualState="false" width="315" height="230">
            <f:facet name="header">
                <h:outputText value="Selected Rows"/>
            </f:facet>
            <f:facet name="controls">
                <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
            </f:facet>
        <h:panelGroup layout="block" styleClass="scrolls">
        <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table">
            <rich:column>
                <f:facet name="header"><h:outputText value="Make" /></f:facet>
                <h:outputText value="#{sel.make}" />
            </rich:column>
            <rich:column id="model">
                <f:facet name="header"><h:outputText value="Model" /></f:facet>
                <h:outputText value="#{sel.model}" />
            </rich:column>
            <rich:column id="price">
                <f:facet name="header"><h:outputText value="Price" /></f:facet>
                <h:outputText value="#{sel.price}" />
            </rich:column>
            <rich:column id="mileage">
                <f:facet name="header"><h:outputText value="Mileage" /></f:facet>
                <h:outputText value="#{sel.mileage}" />
            </rich:column>
            <rich:column id="stock">
                <f:facet name="header"><h:outputText value="Stock" /></f:facet>
                <h:outputText value="#{sel.stock}" />
            </rich:column>
        </rich:dataTable>
        </h:panelGroup>
    </rich:modalPanel>
</ui:composition>

The problem is, netbeans says

The component library http://richfaces.org/rich does not contain component scrollableDataTable

To fix this, i think i need to add org.richfaces.taglib.ScrollableDataTableTag tag to the page. But i do not know how to add tag to a jsf page. I tried:

<ui:composition xlmns:u="org.richfaces.taglib.ScrollableDataTableTag">

but it gives an error saying that:

Fatal Error: Open quote is expected for attribute "{1}" associated with an  element type  "xlmns:u".

From line 14, column 9; to line 14, column 33

Further processing of the file may be significantly affected by this fatal error. Please fix the problem before continuing editing of this file!

Undeclared component xlmns:u=org.richfaces.taglib.ScrollableDataTableTag"

So how can i add this tag, or do i have to do another thing to use scrollable data table? Can anyone help?

Thanks

Solution

As Alexandre Lavoie said, it is because of the different versions and it is working now.