Detail.xml

<?xml version="1.0"?>
<app:DetailClass xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:js="js.core"
                 xmlns:ui="js.ui"
                 xmlns:app="app"
                 xmlns:data="js.data"
                 xmlns:sprdData="sprd.data"
                 xmlns:sprdView="sprd.view">

    <js:Injection cid="injection">
        <sprdData:SprdApiDataSource cid="api"
                                    endPoint="http://api.spreadshirt.net/api" gateway="api/v1"/>
        <sprdData:ImageService/>
    </js:Injection>

    <data:PagedDataView cid="productTypePage" baseList="{shop.productTypes}" pageSize="6"/>

    <div class="detail-page">

        <div class="viewer">
            <sprdView:ProductViewer cid="productViewer" product="{product}" view="{currentView}"/>
            <sprdView:ProductViewSelector product="{product}" selectedItem="{{currentView}}"
                    viewWidth="45" viewHeight="45"/>

            <sprdView:ColorSelector cid="colorSelector" selectedItem="{{selectedColor}}" colorWidth="25"/>
        </div>

        <div class="product-types">
            <a onclick="prevPage" class="previous-page" title="previous page" visible="{productTypePage.hasPreviousPage()}"/>

            <ui:SelectionView items="{productTypePage.list}" tagName="ul" selectedItem="{{selectedProductType}}"
                    class="product-type-selector" needsSelection="true">
                <js:Template name="item">
                    <li>
                        <sprdView:ProductTypeImage productType="{$item}" width="50" height="50" alt="${$item.name}"/>
                    </li>
                </js:Template>
            </ui:SelectionView>

            <a onclick="nextPage" class="next-page" title="next page" visible="{productTypePage.hasNextPage()}"/>
        </div>

        <div class="info">
            <h1>{selectedProductType.name}</h1>
            <p>{selectedProductType.description}</p>
        </div>

        <sprdView:SizeSelector cid="sizeSelector" selectedItem="{{selectedSize}}"/>

    </div>

    <div class="debug">
        <a onclick="addConfiguration">Add Image</a>
    </div>


</app:DetailClass>