<!--  
-->


<ExampleTree ID="exampleTree" openProperty="isOpen">
<nodeVisibility>sdk</nodeVisibility>
<!--  -->
<root name="root/">

<children>


<!-- Welcome -->
<ExampleFolder
    title="Featured Samples" 
    id="Welcome"
    isOpen="true"
    showSkinSwitcher="true"
    screenshot="screenshots/tabs_ds_code.png"
    icon="[ISO_DOCS_SKIN]/images/silkicons/house.png"
    screenshotWidth="291" screenshotHeight="176"><description>
    <![CDATA[
    <div class="explorerWelcomePageTitle">
    Welcome to the SmartClient Feature Tour!
    </div>
    
	<div>&nbsp;</div>
    
    <div style="float: left;">
    	<div style="line-height: 20pt; padding-bottom:5px">
	        <div class="explorerWelcomePageBullet">
    	  	    <span class="explorerWelcomePageNumber"> 1 </span>
        	</div>
        	<span>To load a featured sample, click the name in the tree on the left</span>
        </div>
    
    	<div style="line-height: 20pt; padding-bottom:5px">
	        <div class="explorerWelcomePageBullet">
    	  	    <span class="explorerWelcomePageNumber"> 2 </span>
        	</div>
        	With an example loaded, view the source code by clicking on the tabs shown above the running example
        </div>
    
    	<div style="line-height: 20pt;">
        	<div style="float: left; margin-bottom: 3pt; margin-right: 20pt;">
		        <div class="explorerWelcomePageBullet">
    		  	    <span class="explorerWelcomePageNumber"> 3 </span>
        		</div>
        		See <a href="http://www.smartclient.com/docs/9.1/a/b/c/go.html#featureExplorerOverview">reference docs</a> for how to use this feature explorer including how to use code in standalone apps
        	</div>
		</div>
		
		<div>&nbsp;</div>
    </div>

]]>
    <!--  -->
</description><children>
<!--
    <Example
        title="Hello World"
        jsURL="welcome/hello.js"
        xmlURL="welcome/hello.xml"><description><![CDATA[
        A SmartClient <code>Label</code> component displays the "Hello world!" message.
        ]]></description></Example>
-->
   <Example
        title="Hello World"
        visibility="sdk"
        jsURL="welcome/helloButton.js"
        xmlURL="welcome/helloButton.xml"><description><![CDATA[
        A SmartClient <code>IButton</code> component responds to mouse clicks by showing a
        modal <code>Dialog</code> component with the "Hello world!" message.  Source code is
        provided in both XML and JS formats.
        ]]></description>
        </Example>
        
    <Example
        title="Hello World (styling)"
        visibility="sdk"
        jsURL="welcome/helloStyled.js"
        xmlURL="welcome/helloStyled.xml"><tabs>
        <tab title="CSS" url="welcome/helloStyled.css"/>
        </tabs><description><![CDATA[
        This <code>Label</code> component is heavily styled with a combination of CSS class,
        CSS attribute shortcuts, and SmartClient attributes.  Source code is
        provided in both XML and JS formats.
        ]]></description></Example>
    <Example
        title="Hello You (form)"
        visibility="sdk"
        jsURL="welcome/helloForm.js"
        xmlURL="welcome/helloForm.xml"><description><![CDATA[
        This SmartClient <code>FormLayout</code> provides a text field and a button control.
        Type a name in the field, then click the button for a personalized message.
        Source code is provided in both XML and JS formats.
        ]]></description></Example>

    <Example title="Live Grid" id="fetchOperationFS" ref="fetchOperation"  
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_put.png"><description><![CDATA[
        <p>Rows are fetched automatically as the user drags the scrollbar. Drag the 
        scrollbar quickly to the bottom to fetch a range near the end (a prompt will appear 
        during server fetch).</p>
        <p>Scroll slowly back up to fill in the middle.</p>
        <p>Another key unique feature of SmartClient is lazy rendering of columns. Most 
        browsers cannot handle displaying a large number of columns and have serious 
        performance issues. SmartClient, however, does not render all columns outside the 
        visible area by default and only renders them as the grid is horizontally scrolled. This 
        feature can be disabled if desired.</p>
        ]]></description></Example>
    <Example title="Adaptive Filter" id="adaptiveFilterFS" ref="adaptiveFilter" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png" />
    <Example title="Advanced Filter" id="filterBuilderBracketFS" ref="filterBuilderBracket" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/sc_insertformula.png" />
    <Example title="Dynamic Frozen Columns" id="dynamicFreezeFS" ref="dynamicFreeze"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_detail.png" />
	<Example title="User-Defined Hilites" id="userDefinedHilitesFS" ref="userDefinedHilites" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_side_tree.png" />
	<Example title="Dynamic Grouping" id="dynamicGroupingFS" ref="dynamicGrouping" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_side_tree.png" />
    <Example title="Grid Summaries" id="summaryGridFS" ref="summaryGrid" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_side_tree.png" />
    <Example title="Mass Update" id="massUpdateFS"  ref="massUpdate" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"/>
    <Example title="Expanding Rows" id="expansionRelatedRecordsFS" ref="expansionRelatedRecords"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_split.png" />
    <Example title="Zoomable Charts" id="stockPriceChartingFS" ref="stockPriceCharting"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png" />
    <Example title="Multi-Axis Charts" id="multiSeriesChartMAFS" ref="multiSeriesChartMA"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png" />
    <Example title="Dependent Selects (Grid)" id="databoundDependentSelectsFS" ref="databoundDependentSelects"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png" />
    <Example title="Dependent Selects (Form)" id="formDependentSelectsFS" ref="formDependentSelectsLocal"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png" />
    <Example title="Filter Related Records" id="filterRelatedFS" ref="filterRelated"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png" />
    <Example title="Databound Dragging" id="databoundDragCopyFS" ref="databoundDragCopy" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_link.png"/>
<!-- how about a flag like "skinScreenShots" - in which case we can look at (say) isc.currentSkin and
     append to the screenshot property. Bit of a hack - that prop may be unset -->        
    <Example
        id="showcaseApp"
        title="Complete Application"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_osx.png"
        needServer="true"
        jsURL="demoApp/demoAppJS.js"
        xmlURL="demoApp/demoAppXML.xml"
        dataSource="supplyCategory"
        fullScreen="true"
        screenshot="demoApp/demoApp.png"
        screenshotWidth="480"
        screenshotHeight="337"
        >
        <tabs>
            <tab title="supplyItem" url="supplyItem.ds.xml"/>
        </tabs>
        <description>Demonstrates a range of SmartClient GUI components, data binding operations,
        and layout managers in a single-page application.
        </description></Example>
    <ExampleFolder title="Server Examples" isOpen="true" id="FSserverExamples" >
	<description><![CDATA[
    The SmartClient Server framework is a collection of .jar files and optional servlets that work with
    any J2EE or J2SE container and are easily integrated into existing applications.  Its major
    features include:<ul>
    <li><b>Simplified server integration:</b> A pre-built network protocol for browser-server
        communication, which handles data paging, transactions/batch operations, server-side
        sort, automatic cache updates, validation and other error handling, optimistic
        concurrency (aka long transactions) and binary file uploads.<P></li>
    <li><b>SQL, JPA & Hibernate Connectors:</b> Secure, flexible, transactional support for all
        CRUD operations, either directly via JDBC or via Hibernate or JPA beans.<P></li>
    <li><b>Rapid integration with Java Beans:</b> Robust, complete, bi-directional translation
        between Java and Javascript objects for rapid integration with any Java beans-based
        persistence system, such as Spring services or custom ORM implementations.  Send and
        receive complex structures including Java Enums and Java Generics without the need to
        write mapping or validation code.  Declaratively trim and rearrange data so that only
        selected data is sent to the client <b>without</b> the need to create and populate
        redundant DTOs (data transfer objects).<P></li>
    <li><b>Server enforcement of Validators:</b> A single file specifies validation rules
        which are enforced on both the client and server side<P></li>
    <li><b>Declarative Security:</b> Easily attach role or capability-based security rules to
        data operations with server-side enforcement, plus automatic client-side effects such as
        hiding fields or showing fields as read-only based on the user role.<P></li>
    <li><b>Export:</b> Export any dataset to CSV or true Excel spreadsheets, including data
        highlights and formatting rules<br><br></li>
    <li><b>High speed data delivery / data compression:</b> automatically use the fastest 
        possible mechanism for delivering data to the browser<br></li>
    </ul>
    The SmartClient Server framework is an optional, commercially-licensed package.  See the 
    <a href=http://www.smartclient.com/product/index.jsp>products page</a> for details.
    ]]>
</description><children>
   
    <ExampleFolder title="Validation"  id="FSServerValidation" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png"><description>
        The SmartClient Server provides powerful support for server-based validation.
    </description>
	<children>
    <Example title="Single Source" id="FSsingleSourceValidation" ref="singleSourceValidation" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
    <Example title="DMI Validation" id="FSdmiValidation" ref="dmiValidation" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
    <Example title="Velocity Expression" id="FSvelocityValidation" ref="velocityValidation" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
    <Example title="Inline Script" id="FSinlineScriptValidation" ref="inlineScriptValidation" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
    <Example title="Unique Check" id="FSuniqueCheckValidation" ref="uniqueCheckValidation" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
    <Example title="Related Records" id="FShasRelatedValidation" ref="hasRelatedValidation" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>       
    <Example title="Blocking Errors" id="FSblockingErrors" ref="blockingErrors" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
    </children></ExampleFolder>

    <ExampleFolder title="SQL" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/database_table.png" ><description>
        The SmartClient Server provides powerful built-in support for codeless connection to
        mainstream SQL databases.
    </description><children>
        <Example title="Database Wizard" id="SQLsqlWizard" ref="sqlWizard" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"/>
        <Example title="Basic Connector"  id="SQLsqlConnector"  ref="sqlConnector" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"/>
        <Example title="Large Value Map" id="SQLlargeValueMapSQL" ref="largeValueMapSQL" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_relationship.png"/>
        <Example title="User-Specific Data" id="SQLuserSpecificData" ref="userSpecificData" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/user_orange.png"/>
        <Example title="Dynamic Reporting" id="SQLdynamicReporting" ref="dynamicReporting"
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png"/>
        <Example title="Transactions" id="SQLautoTransactions" ref="autoTransactions" />
        <Example title="Field Include"  id="SQLsqlIncludeFrom" ref="sqlIncludeFrom" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>
        <Example title="Multiple Field Include"  id="SQLsqlIncludeVia" ref="sqlIncludeVia" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>
        <Example title="Dynamic Field Include" id="SQLsqlIncludeFromDynamic" ref="sqlIncludeFromDynamic" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>
    </children></ExampleFolder>
    <ExampleFolder title="Hibernate / Beans" isOpen="false" icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"><description>
        The SmartClient Server provides powerful built-in support for Hibernate
    </description><children>
        <Example  title="Auto Derivation"  id="FShibernateAutoDerivation"  ref="hibernateAutoDerivation" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>     
        <Example  title="Beanless Mode" id="FShibernateConnector" ref="hibernateConnector" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png" />
        <Example  title="Advanced Filtering" id="FSadvancedFilterHibernate" ref="advancedFilterHibernate" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png"/>    
        <Example  title="Many-to-One Relation" id="FShbRelationManyToOneSimple" ref="hbRelationManyToOneSimple" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>
        <Example  title="One-to-Many Relation" id="FShbRelationOneToMany" ref="hbRelationOneToMany" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>    
        <Example  title="Field Include" id="FShbIncludeFrom" ref="hbIncludeFrom" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>
        <Example  title="Dynamic Field Include" id="FShbIncludeFromDynamic" ref="hbIncludeFromDynamic" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>
        <Example  title="Master-Detail (Batch Load and Save)"  id="FSmasterDetail"  ref="masterDetail" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png"/>
        <Example  title="Data Selection" id="FSflattenedBeans" ref="flattenedBeans" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/branch.png"/>
        <Example  title="Spring with Beans" id="FShibernateProduction"   ref="hibernateProduction"  
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_save.png" />
        <Example  title="Java Beans" id="FSjavaBeans"  ref="javaBeans" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png" />
        <Example  title="DMI" id="FSDMI" ref="DMI" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_edit.png"/>
        <Example  title="Auto Transactions" id="FSautoTransactionsHB" ref="autoTransactionsHB" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"/>
        <Example  title="Upload" id="FSuploadHB" ref="uploadHB" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png"/>
    
     </children></ExampleFolder>
	 
    <ExampleFolder title="JPA" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/cup.png"><description><![CDATA[
        The SmartClient Server's built-in support for JPA/JPA2 allows you to easily use your JPA annotated entities
        in SmartClient's client-side widgets.<p/>
    ]]></description><children>
        <Example title="Auto Derivation" id="FSjpaConnector" ref="jpaConnector" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>  
        <Example title="Advanced Filtering" id="FSjpa2Connector" ref="jpa2Connector" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png"/>
        <Example title="Many-to-One Relation" id="FSjpaRelationManyToOneSimple" ref="jpaRelationManyToOneSimple" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>
        <Example title="One-to-Many Relation" id="FSjpaRelationOneToMany" ref="jpaRelationOneToMany" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>
        <Example title="Field Include" id="FSjpaIncludeFrom" ref="jpaIncludeFrom" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>         
        <Example title="Dynamic Field Include" id="FSjpaIncludeFromDynamic" ref="jpaIncludeFromDynamic" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"/>
        <Example title="Upload" id="FSuploadJPA" ref="uploadJPA" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png" />
    </children></ExampleFolder>
     <ExampleFolder id="transactionsFolderJ" title="Transactions" isOpen="false" icon="[ISO_DOCS_SKIN]/images/iconexperience/branch.png"><description><![CDATA[
            SmartClient provides robust support for transactional applications.
            <P>
            Queueing makes combining operations together into a single
            transaction extremely easy, for more efficient data loading and transactional saves.
            <P>
            Automatic Transaction Management support in the SmartClient Server, with 
            specific implementations for the built-in SQL and Hibernate DataSources, allows 
            for queued requests to be committed or rolled back as a single database transaction.
            This feature is only available in Power and Enterprise editions.
            <P>
            Transaction Chaining allows for declarative handling of data dependencies
            between operations submitted together in a queue.  This feature is only available
            in Power and Enterprise editions.
     ]]></description><children>
        <Example title="Simple Queueing"  id="FSqueuing"  ref="queuing" />
        <Example title="Automatic Transaction Management" id="FSautoTransactions" ref="autoTransactions" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"/>      
        <Example title="Master/Detail Add" id="FSqueuedAdd" ref="queuedAdd" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_insert.png"/>
        <Example title="Mass Update" id="FSmassUpdate"  ref="massUpdate" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"/>
        <Example title="Multi-Row Drag &amp; Save" id="FSdataboundDragCopy"  ref="databoundDragCopy" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_go.png"/>
        <Example title="Many-to-Many Drag &amp; Save" id="FSrow-drag-save-pivot"  ref="row-drag-save-pivot"  
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_go.png"/>
        <Example title="Rollback" id="FSrollback" ref="rollback" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_undo.png"/>
        <Example title="Transactional User Operations" id="FSjdbcOperations" ref="jdbcOperations" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/user_go.png"/>
    </children></ExampleFolder>
    <ExampleFolder title="Custom DataSources" isOpen="false" 
                   icon="[ISO_DOCS_SKIN]/images/silkicons/database_edit.png"><description>
        Examples showing how to leverage the SmartClient Server to create partially or completely
        customized DataSource implementations.
    </description><children>
        <Example title="Javabean Wizard" id="FSjavabeanWizard" ref="javabeanWizard" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"/>           
        <Example title="Simple (Hardcoded)" id="FScustomDataSource" ref="customDataSource" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_insert.png"/>
        <Example title="ORM DataSource" id="FSormDataSource" ref="ormDataSource" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/objects_exchange.png"/>
        <Example title="Reusable ORM DataSource" id="FSreusableORMDataSource" ref="reusableORMDataSource" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/objects_exchange.png"/>
		<Example title="Editable Server-Side DataSource"  id="FSeditableServerSideDataSource" ref="editableServerSideDataSource" />
    </children></ExampleFolder>

    <ExampleFolder showSkinSwitcher="true" title="Export" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"><description>
    Exporting Data from DataSources and DataBoundComponents.
    </description><children>

    <Example title="Excel Export" id="FSexport" ref="export" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"/>
    <Example title="Formatted Export (Declared Formats)" id="FSformattedExportBuiltin" ref="formattedExportBuiltin" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"/>
    <Example title="Formatted Export (Custom Formatting)" id="FSformattedExport" ref="formattedExport" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"/>
    <Example title="Server-side Formatted Export" id="FSformattedServerExport" ref="formattedServerExport" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"/>
    <Example title="PDF Export" id="FSpdfExport" ref="pdfExport" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/printer.png"/>
    <Example title="Chart Image Export" id="FSchartImageExport" ref="chartImageExport" 
    icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"/>
    <Example title="Chart PDF Export" id="FSchartPDFExport" ref="chartPDFExport" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/printer.png"/>
    <Example title="Drawing Export" id="FSdrawingExport" ref="drawingExport" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png"/>
    <Example title="Custom Export" id="FScustomExport" ref="customExport" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"/>
    <Example title="Custom Export (Custom Response)" id="FScustomExportCustomResponse" ref="customExportCustomResponse" 
    icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"/>
    </children>
    </ExampleFolder>
    
    <Example title="Auditing" id="FSauditing" ref="auditing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_side_boxes.png"/>

    <ExampleFolder showSkinSwitcher="true"  title="Upload / Download"  isOpen="false"  icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png">
            <description>
                Samples with Upload and Download files
            </description>
       <children>
        <Example title="Upload" id="FSupload"  ref="upload"  
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png"/>                         
        <Example title="Batch Data Upload" id="FSbatchUpload" ref="batchUpload" 
        icon="[ISO_DOCS_SKIN]/images/iconexperience/server_from_client.png"/>               
        <Example title="MultiFileItem" id="FSmultiFileItem"  ref="multiFileItem"  
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png"/>
        <Example title="Custom Download" id="FScustomDownload" ref="customDownload" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_put.png"/>
        <Example title="Custom Binary Field"  id="FScustomBinaryField"  ref="customBinaryField" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_save.png"/>
       </children>
    </ExampleFolder>

    <ExampleFolder showSkinSwitcher="true" title="Component XML" isOpen="false"
        icon="[ISO_DOCS_SKIN]/images/silkicons/script_code.png">
        <description><![CDATA[
            Component XML is a format for specifying UI components declaratively in XML.
            <P>
            Using Component XML, you can separate the layout of your application from its
            business logic, so that less technical users can edit the layout while JavaScript
            developers implement business logic.
            <P>
            Component XML also allows visual tools such as Visual Builder to be used to modify
            the layout of your applications.
            ]]>
        </description>
        <children>
            <Example id="addingHandlers" title="Adding Handlers"
                jsURL="componentXML/addingHandlers.js"
                icon="[ISO_DOCS_SKIN]/images/silkicons/script_code.png">
                <tabs>
                    <tab title="component XML" url="ui/addingHandlers.ui.xml"
                        doEval="false" canEdit="false" />
                    <tab name="supplyItem" dataSource="supplyItem"/>
                </tabs>
                <descriptionHeight>200</descriptionHeight>
                <description><![CDATA[
                    The form and button below have been loaded from Component XML, then, a
                    click handler has been added via JavaScript code which performs some
                    specialized validation before saving.
                    <P>
                    Click the "Save" button to see a warning message generated by the click
                    handler, then check the "In Stock" button and hit "Save" again to allow
                    saving to proceed.
                    <P>
                    With this development approach, the form and button can be reorganized
                    arbitrarily by editing of XML, possibly in a visual tool such as Visual
                    Builder, or in any tool of your own design that can produce Component XML.
                    So long as the relevant controls and fields are not renamed, the JavaScript
                    code will work unchanged with the new layout.
                ]]>
                </description>
            </Example>
            <Example id="replacePlaceholder" title="Replace Placeholder"
                jsURL="componentXML/replacePlaceholder.js"
                icon="[ISO_DOCS_SKIN]/images/silkicons/script_code.png">
                <tabs>
                    <tab title="component XML" url="ui/replacePlaceholder.ui.xml"
                        doEval="false" canEdit="false" />
                    <tab name="supplyItem" dataSource="supplyItem"/>
                </tabs>
                <descriptionHeight>175</descriptionHeight>
                <description><![CDATA[
                    Programmatically created components can be inserted into the middle of a
                    layout that is otherwise controlled by Component XML. Just leave a
                    placeholder component in the Component XML layout and replace it
                    programatically.
                    <P>
                    In the example below, the form and placeholder have been loaded from a
                    Component XML file.  Use the "Replace PlaceHolder" button to replace the
                    placeholder with a programatically generated grid component.
                    <P>
                    Or, check the "Auto-replace Placeholder" checkbox and press the "Reload
                    Component XML" button to see the replacement take place automatically as
                    soon as the Component XML is loaded.
                ]]>
                </description>
            </Example>
            <Example id="customComponents" title="Custom Components"
                jsURL="componentXML/customComponents.js"
                icon="[ISO_DOCS_SKIN]/images/silkicons/script_code.png">
                <tabs>
                    <tab title="component XML" url="ui/customComponents.ui.xml"
                        doEval="false" canEdit="false" />
                    <tab name="supplyItem" dataSource="supplyItem"/>
                </tabs>
                <descriptionHeight>200</descriptionHeight>
                <description><![CDATA[
                    You can use custom components in screens created via Component XML. Just
                    use the "constructor" attribute to indicate that your custom class should
                    be used.
                    <P>
                    You can even provide custom properties to your custom class.  In the sample
                    below, the custom ListGrid subclass "MyListGrid" has a boolean setting
                    "hilitePricesOverTen" that causes prices over $10 to appear in red color.
                    This boolean setting is false by default, but the Component XML file sets
                    the property to true on the grid.
                    <P>
                    It's also possible to declare a Component Schema so that &lt;MyListGrid&gt;
                    can be used directly as the XML tag, with no need to set the constructor or
                    declare the types of custom properties like "hilitePricesOverTen".
                ]]>
                </description>
            </Example>
            <Example id="screenReuse" title="Screen Reuse"
                jsURL="componentXML/screenReuse.js"
                icon="[ISO_DOCS_SKIN]/images/silkicons/script_code.png">
                <tabs>
                    <tab title="screenReuse XML" url="ui/screenReuse.ui.xml"
                        doEval="false" canEdit="false" />
                    <tab name="countryDS" dataSource="countryDS"/>
                    <tab name="supplyItem" dataSource="supplyItem"/>
                </tabs>
                <descriptionHeight>200</descriptionHeight>
                <description><![CDATA[
                    Using <code>createScreen()</code>, you can load multiple copies of the same Component XML
                    screen, and the copies will not interfere with each other.  This allows Component XML
                    screens to be treated as simple reusable components.
                    <P>
                    Use the "DataSources" drop-down below to select a DataSource.  Each time you select a new
                    DataSource, a new copy of the same Component XML screen is created, and its components are
                    bound to the selected DataSource.
                ]]>
                </description>
            </Example>
        </children>
    </ExampleFolder>
    
    <ExampleFolder showSkinSwitcher="true" title="Real-Time Messaging" isOpen="false"
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_lightning.png">
	    <description>
	     RTM module provides low-latency, high data volume streaming
         capabilities for latency-sensitive applications such as trading desks and operations
         centers.
	    </description>
    	<children>
		    <Example title="Portfolio Grid" id="FSportfolioGrid"  ref="portfolioGrid" 
		    icon="[ISO_DOCS_SKIN]/images/silkicons/coins.png"/>		        
			<Example title="Stock Chart"  id="FSstockQuotesChart" ref="stockQuotesChart" 
			icon="[ISO_DOCS_SKIN]/images/silkicons/chart_line.png"/>
        </children>
    </ExampleFolder>
	
	<ExampleFolder title="Server Scripting" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/sc_insertformula.png"><description>
        Simple business logic and validation rules can be embedded directly in *.ds.xml files.  Use Java, or scripting
		languages such as Groovy or JavaScript.
		</description>
		<children>
			<Example title="User-Specific Data" id="FSscriptingUserSpecificData" ref="scriptingUserSpecificData" 
			icon="[ISO_DOCS_SKIN]/images/silkicons/user_orange.png"/>
            <Example title="Validation" id="FSIinlineScriptValidation" ref="inlineScriptValidation" 
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"/>
		</children>
	</ExampleFolder>
    
    <Example id="FSrssFeed" title="HTTP Proxy" ref="rssFeed" requiresModules="SCServer"
            icon="[ISO_DOCS_SKIN]/images/silkicons/feed.png">
            <descriptionHeight>140</descriptionHeight>
        <description><![CDATA[
            The SmartClient Server includes an HTTP Proxy servlet which supports contacting REST and
            WSDL web services as though they were hosted by a local web server, avoiding the "same origin
            policy" restriction which normally prevents web applications from accessing remote
            services.
            <P>
            The proxy is used automatically whenever an attempt to contact a URL on another host is performed. No
            special code is needed.  In this example, a DataSource is configured to download the
            Slashdot RSS feed, with no server-side code or proxy configuration required.
            <P>
            Configuration files allow for restricting proxying to specific
            services that should be accessible to users through your application.
        ]]></description>
    </Example>
    
</children></ExampleFolder>
	
	
	
    <Example title="Tile Sort &amp; Filter" id="tilingFilterFS" ref="tilingFilter" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png"/>
    <Example title="Simple Cube" id="basicCubeFS" ref="basicCube"
        icon="[ISO_DOCS_SKIN]/images/silkicons/cube_simple.png" />
    <Example title="Advanced Cube" id="analyticsFS" ref="analytics"
        icon="[ISO_DOCS_SKIN]/images/silkicons/cube_simple.png" />
        
    <Example title="Databound Calendar" id="dataBoundCalendarFS" ref="databoundCalendar" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/cal.png" />

    <ExampleFolder title="Dashboards &amp; Tools" id="portalFS" ref="portal"
        icon="[ISO_DOCS_SKIN]/images/silkicons/world.png" />
    <Example title="Printing" id="printingFS" ref="printing" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/printer.png" />
    <Example
        id="offlineSupport"
        title="Offline support"
        jsURL="offline/offlineSupport.js"
        descriptionHeight="180"><tabs>
            <tab name="supplyItem" dataSource="supplyItem"/>
            <tab name="supplyCategory" dataSource="supplyCategory"/>
       </tabs>
        <description><![CDATA[
        SmartClient has support for caching server responses in browser storage, allowing
        these cached responses to be returned to an application at some future point when 
        the application is offline.  Offline support is automatic once enabled - if the user
        switches the application or browser into offline mode, or the browser detects that it
        is offline, the framework automatically and transparently starts returning cached 
        responses whenever it can (application code can determine that responses have come 
        from offline cache if necessary)<p>
        Use the tree to navigate categories. Click a category to load the grid with
        matching items.  Now reload the page and click "Go offline" (or switch the
        browser into offline mode).  If a category is clicked that had previously been selected before
        the reload, the grid will still be populated from the Offline cache. If 
        a category is clicked that had not been previously selected, or a node is opened
        in the tree that had not been previously opened, the "Data not available
        while offline" message will be displayed.
        ]]></description>
        </Example>
    <Example
        id="offlinePrefs"
        title="Offline preferences"
        jsURL="offline/offlinePrefs.js"
        descriptionHeight="160"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
        <description><![CDATA[
        SmartClient provides a unified Offline browser storage API that can be used 
        for any client-side persistence task.  In this example, the ListGrid's 
        viewState to browser-local storage is stored. Try resizing or reordering some columns in the
        grid, click "Persist State", then press F5 to reload, or close and re-open the browser.
        The changes have been remembered.  Try adding a formula field to the grid and reload 
        again. Persisting a user's preferences like this is a compelling addition to any application, 
        and in this case doesn't even require a server round trip.<p>
        Offline support is provided in modern HTML5 browsers, and also in older versions of 
        Internet Explorer (6 and greater). The underlying technologies used are very different,
        but the SmartClient API is the same, regardless of which browser is used.
        ]]></description>
        </Example> 
    <Example title="Pattern Reuse" id="patternReuseFS"  ref="patternReuse" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_table.png" />
    <Example
        jsURL="devConsole/devConsole.js"
        title="Developer Console"
        icon="[ISO_DOCS_SKIN]/images/silkicons/bug.png"
        showSkinSwitcher="false"
        showSource="false"
        >
		<descriptionHeight>105</descriptionHeight>
		<description><![CDATA[
The Developer Console is a suite of development tools implemented in SmartClient itself.  The
Console runs in its own browser window, parallel to the running application, so it is always
available, in every browser, and in every deployment environment.<BR><BR> 
Click on the name of a screenshot below to see more information about developer
console features.
        ]]></description></Example>
    <Example
        title="SmartClient Docs"
        jsURL="docs/docs.js"
        showSkinSwitcher="false"
        showSource="false"
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png"
        >
		<description>
        SmartClient contains over 100 documented components with more than 2000 documented,
        supported APIs.  All of SmartClient's documentation is integrated into a
        SmartClient-based, searchable documentation browser, including API reference, concepts,
        tutorials, live examples, architectural blueprints and deployment instructions.
        </description></Example>


</children></ExampleFolder>



<!-- Concepts -->
<!--
<ExampleFolder title="Concepts" isOpen="false"><description>
    Essential SmartClient concepts.
</description><children>
    <Example title="Visual components" xmlURL=".xml" jsURL=".js"><description>
        Visual components are the building blocks of SmartClient applications.
        </description></Example>
    <Example title="Inline HTML" xmlURL=".xml" jsURL=".js"><description>
        HTML in SmartClient
        Embed existing web pages, portlets, and components inside SmartClient components.
        &lt;code&gt;HTMLFlow&lt;/code&gt; and &lt;code&gt;HTMLPane&lt;/code&gt; components manage
        and display your page fragments in standard HTML and CSS.
        </description></Example>
    <Example title="Layouts" xmlURL=".xml" jsURL=".js"><description>
        Create pixel-perfect page layouts without CSS hacks.
        HLayout, VLayout, HStack, and VStack are the building blocks for easy liquid layouts.
        </description></Example>
    <Example title="Editors" xmlURL=".xml" jsURL=".js"><description>
        Create flexible multi-field forms and grids for user data entry.
        FormLayout and ListGrid components manage a rich set of built-in and custom input
        controls for all data types.
        </description></Example>
    <Example title="DataSources" xmlURL=".xml" jsURL=".js"><description>
        Accelerate development with model-driven components.
        DataSources provide a shared data model for your forms, grids, and reports, with
        easy read-write data binding to JSON, XML, WSDL, POJOs, and other remote data providers.
        </description></Example>
    <Example title="Extensions" xmlURL=".xml" jsURL=".js"><description>
        Build your own SmartClient components.
        The SmartClient class system is fully exposed to customize, aggregate, or build
        new components for your unique requirements.
        </description></Example>
</children></ExampleFolder>
-->


<!-- PARENT FOLDER: Grids -->
<ExampleFolder
    showSkinSwitcher="true"
    title="Grids"
    isOpen="false"
    icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png"><description>
    High-performance interactive data grids.
</description><children>
    <!--
    <Example
        title="ListGrid Showcase"
        jsURL="grids/gridShowcase.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        ListGrid showcase.
        </description></Example>
    <Example
        title="ListGrid"
        xmlURL="ListGrid.xml"><description>
        Click, ctrl-click, or shift-click to select rows. Click column headers to sort. Drag
        column headers to resize or reorder. Move row selection with arrow keys.
        </description></Example>
      -->

<!-- Grids > Appearance (combining Layout and Formatting for now) -->
<ExampleFolder
    title="Appearance"
    isOpen="false"><description>
    Styling, sizing and formatting options for grids, as well as built-in end user controls.
</description><children>
    <Example
        title="Column order"
        id="columnOrder"
        jsURL="grids/layout/columnOrder.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Drag and drop the column headers to rearrange columns in the grid.
        Right-click the column headers to hide or show columns.
        Click the buttons to hide or show the "Capital" column.
        </description></Example>
    <Example
        title="Column size"
        id="columnSize"
        jsURL="grids/layout/columnSize.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click and drag between the column headers to resize columns in the grid.
        </description></Example>
    <Example
        title="Column align"
        visibility="sdk"
        jsURL="grids/layout/columnAlign.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click the radio buttons to change the alignment of the "Flag" column.
        </description></Example>
    <Example
        title="Column headers"
        visibility="sdk"
        jsURL="grids/layout/columnHeaders.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click the buttons to show or hide the column headers.
        </description></Example>
    <Example
        title="Column titles"
        visibility="sdk"
        jsURL="grids/layout/columnTitles.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click the buttons to change the title of the "Country" column.
        </description></Example>
    <Example
        title="Multiline values"
        id="multilineValues"
        jsURL="grids/layout/multiLineValues.js"><tabs>
        <tab title="countryData" url="grids/data/countryDataDetail.js"/>
        </tabs>
		<description>
        Click and drag between the "Background" and "Flag" column headers, or resize the browser
        window to change the size of the entire grid. The "Background" values are
        confined to a fixed row height.
        </description></Example>
    <!-- hidden: exposes LG.body, and ledger styles unlikely to need to be flipped on/off
                 dynamically
    <Example
        title="Ledger style"
        jsURL="grids/formatting/ledgerStyle.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click the buttons to enable or disable alternating light/dark rows.
        </description></Example>
        -->
    <Example title="Header Spans" id="gridHeaderSpans" ref="headerSpans" />
    <Example
        title="Cell styles"
        jsURL="grids/formatting/cellStyles.js"><tabs>
        <tab title="CSS" url="grids/formatting/cellStyles.css"/>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Mouse over the rows and click-drag to select rows, to see the effects of different
        base styles on these two grids.
        </description></Example>
    <Example
        title="Style cells (add style)"
        id="addStyle"
        jsURL="grids/formatting/addStyle.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        This grid hilites "Population" values greater than 1 billion or less than 50 million
        using additive style attributes (text color and weight).
        </description></Example>
    <Example
        title="Style cells (replace style)"
        id="replaceStyle"
        jsURL="grids/formatting/replaceStyle.js"><tabs>
        <tab title="CSS" url="grids/formatting/replaceStyle.css"/>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        This grid hilites "Population" values greater than 1 billion or less than 50 million
        using a full set of compound styles (with customized background colors). Mouse over or
        click-drag rows to see how these styles apply to different row states.
    </description></Example>
    <Example
        title="Field Picker"
        id="fieldPicker"
        jsURL="grids/layout/fieldPicker.js"><tabs>
        <tab title="CSS" url="grids/layout/cellStyles.css"/>
        </tabs>
        <descriptionHeight>190</descriptionHeight>
        <description><![CDATA[
        Some grids show a small subset of 100s of available fields.  With this many fields,  
        it becomes awkward to choose and arrange fields by drag reordering of
        headers and picking fields from a menu.
        <P>
        Setting <code>useAdvancedFieldPicker</code> causes an alternative field picking and
        ordering interface to be used, shown below.  Drag fields from <i>Available Fields</i>
        to <i>Visible Fields</i> to display them.  Use drag and drop to reorder fields as well.
        <P>
        This interface also allows you to search for fields by name, and optionally to choose
        which are frozen.
        <P>
        The end user can open this dialog via the "Columns.." menu item in the header menu.]]>
    </description></Example>
    <Example
        title="Animated Selection"
        jsURL="grids/formatting/animatedSelection_RollOver.js"><tabs>
        <tab title="CSS" url="grids/formatting/simpleCellStyles.css"/>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
		<![CDATA[
		RollOver, and select the rows in the grid to see rollover and selection indicators fade
        into view. This is achieved via the <code>rollUnderCanvas</code> and <code>selectionUnderCanvas</code> subsystems.
        Note that the opacity setting on the <code>rollUnderCanvas</code> allows true color layering.
        ]]>  
        </description></Example>
    <Example
        title="RollOver Controls"
        jsURL="grids/formatting/rollOverControls.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
		<![CDATA[
		 RollOver the rows in the grid to see row-level control buttons appear embedded in the row.
        This example utilizes the <code>rollOverCanvas</code> subsystem to achieve this effect. 
        ]]>  
        </description></Example>
    
    <Example
        title="Format values"
        id="formatValuesBuiltin"
        descriptionHeight="120"
        jsURL="grids/formatting/formatValuesBuiltin.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        This grid applies formatters to the "Nationhood" and "Area" columns using SmartClient's
        built-in declarative formatting feature, which can format dates and numbers using 
        format strings like "MMM dd yyyy".  If you have Pro+, this formatting will also be 
        exported to Excel.
        &lt;p&gt;
        Click on the "Nationhood" or "Area" column headers to sort the underlying data values.
        </description></Example>
    
    <Example
        title="Format values (custom)"
        id="formatValues"
        descriptionHeight="120"
        jsURL="grids/formatting/formatValues.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        This grid applies custom formatters to the "Nationhood" and "Area" columns.  Custom 
        formatters are written in Javascript; they are useful when you have unusual formatting
        requirements that cannot be achieved with the built-in declarative formatting features
        (as is the case with the "Nationhood" formatting in this sample).
        &lt;p&gt;
        Click on the "Nationhood" or "Area" column headers to sort the underlying data values.
        </description></Example>
    <Example
        title="Empty values"
        id="emptyValues"
        jsURL="grids/formatting/emptyValues.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Double-click any cell, delete its value, and press Enter or click outside the cell to
        save and display the empty value. This grid shows "--" for empty date values, and
        "unknown" for other empty values.
        </description></Example>
    <Example
        title="Empty grid"
        id="emptyGrid"
        jsURL="grids/layout/emptyGrid.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click the buttons to add or remove all data in the grid.
        </description></Example>
        
    <Example
        title="Custom Layout"
        id="gridComponents"
        jsURL="grids/layout/gridComponents.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        ListGrids can be customized by changing the order of standard components, and adding
        entirely custom components. In this example
        the filter row is showing below the ListGrid header bar, and a custom set of controls has
        been added underneath the body.
        ]]></description></Example>
    <Example
        title="Rounded Selection"
        jsURL="grids/formatting/roundedSelection.js"><tabs>
        <tab title="CSS" url="grids/formatting/simpleCellStyles.css"/>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
		<![CDATA[
		Select a row to see a custom selection effect with rounded edges achieved via the
        <code>selectionUnderCanvas</code> subsystem.
        ]]>
        </description>
        <badSkins>BlackOps</badSkins>
        <bestSkin>TreeFrog</bestSkin>
    </Example>
    <Example
        title="RollOver Reticle Effect"
        id="gridRollOverReticleEffect"
        jsURL="grids/formatting/rollOverReticle.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
		<![CDATA[
        RollOver the rows in the grid to see a custom roll over reticle effect,
        achieved via the <code>rollOverCanvas</code> subsystem.
        ]]>  
        </description>
        <badSkins>BlackOps</badSkins>
        <bestSkin>TreeFrog</bestSkin>
    </Example>
</children></ExampleFolder>


<!-- Grids > Interaction (combining with Selection for now) -->
<ExampleFolder
    title="Interaction"
    isOpen="false"><description>
    Selection and drag and drop of data, hovers, and grid events.
</description><children>
    <Example
        title="Rollover"
        visibility="sdk"
        jsURL="grids/interaction/rollover.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Move the mouse over rows in the grid to see rollover highlights.
        Click the buttons to enable or disable this behavior.
        </description></Example>
    <Example
        title="Single select"
        visibility="sdk"
        jsURL="grids/selection/singleSelect.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click to select any single row in the grid.
        </description></Example>
    <Example
        title="Multiple select"
        id="multipleSelect"
        jsURL="grids/selection/multipleSelect.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click to select a single row in the grid. Shift-click to select a continuous range of rows.
        Ctrl-click (&amp;#8984;-click on Mac) to add or remove individual rows from the selection.
        </description></Example>
    <Example
        title="Simple select"
        jsURL="grids/selection/simpleSelect.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click to select or deselect any row in the grid.
        </description></Example>
    <Example
        title="Checkbox Select"
        id="checkboxSelect"
        jsURL="grids/selection/checkboxSelect.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
		<![CDATA[
		 By setting <code>selectionAppearance</code> to "checkbox", the ListGrid can use checkboxes 
        to indicate the selected state of records. Only by clicking on a checkbox will the 
        corresponding record be selected or unselected.
        ]]>  
        </description></Example>
    <Example
        title="Drag select"
        jsURL="grids/selection/dragSelect.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click and drag to select a continuous range of rows in the grid.
        </description></Example>
    <Example
        title="Cell Selection"
        id="cellSelection"
        jsURL="grids/selection/cellSelection.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Grids support cell-level selection.  Click and drag to select a contiguous
        block of cells.  Use Ctrl-Click (Option-Click on Mac) to select or deselect individual
        cells.  Shift-clicking will extend the current selection to include the target cell.
        </description></Example>
    <Example
        title="Value hover tips"
        id="valueHoverTips"
        jsURL="grids/interaction/valueHover.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Move the mouse over a value in the "Government" column and pause (hover) for a
        longer description of that value.
        </description></Example>
    <Example
        title="Header hover tips"
        jsURL="grids/interaction/headerHover.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Move the mouse over a column header and pause (hover) for a longer description
        of that column.
        </description></Example>
    <Example
        title="Drag reorder"
        id="gridsDragReorder"
        jsURL="grids/interaction/dragOrder.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Drag and drop to change the order of countries in this list.
        </description></Example>
    <Example
        title="Drag move"
        id="gridsDragMove"
        jsURL="grids/interaction/dragMove.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Drag and drop to move rows between the two lists. 
        </description></Example>
    <Example
        title="Drag copy"
        id="gridsDragCopy"
        jsURL="grids/interaction/dragCopy.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Drag and drop to copy rows from the first list to the second list.
        </description></Example>
    <Example
        title="Disabled rows"
        id="disabledRows"
        jsURL="grids/interaction/disabled.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Mouse over, drag, or click on any values in this grid.
        All "Europe" country records in this grid are disabled.
        </description></Example>
    <Example
        title="Record clicks"
        id="recordClicks"
        jsURL="grids/interaction/recordClicks.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click, double-click, or right-click any row in the grid.
        </description></Example>
    <Example
        title="Cell clicks"
        id="cellClicks"
        jsURL="grids/interaction/cellClicks.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click, double-click, or right-click any value in the grid.
        </description></Example>
</children></ExampleFolder>


<!-- Grids > Autofit -->
<ExampleFolder
    title="Autofit"
    isOpen="false"><description>
    Various auto-fit behaviors built-in to every Grid
</description><children>
    <Example
        title="Free Space"
        id="autoFitFreeSpace"
        jsURL="grids/autofit/autoFitFreeSpace.js"><tabs>
            <tab title="supplyItem" url="supplyItem.ds.xml"/>
        </tabs><description>
        By default, grids used in a Layout will fill available space, allowing users to show 
        and hide other components on the screen in order to view and interact with more data 
        at once in the grid.  Imagine that the blue outline represents all the space that is
        available for this interface.  Click on the "Details" header to hide the tabs and
        reveal more rows.  Click on the resizebar next to the Navigation tree to hide it,
        allowing more space for columns.
        </description></Example>
    <Example
        title="Cell Values"
        id="autofitValues"
        jsURL="grids/autofit/autoFitValues.js"><tabs>
        <tab title="countryData" url="grids/data/countryDataDetail.js"/>
        </tabs>
		<description>
        Click and drag between the "Background" and "Flag" column headers, or resize the browser
        window to change the size of the entire grid. The rows resize to fit
        the "Background" values.
        </description></Example>
    <Example
        title="Rows"
        id="autofitRows"
        jsURL="grids/autofit/autoFitRows.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click the buttons to show different numbers of records. The grid resizes to fit
        all rows without scrolling.
        </description></Example>
    <Example
        title="Columns"
        id="autofitColumns"
        jsURL="grids/autofit/autoFitColumns.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click and drag between the column headers to resize the columns. The grid resizes to
        fit the new column widths.  The width setting on the grid as a whole acts as a minimum.
        </description></Example>
    <Example
        title="Column Widths"
        id="autofitColumnWidths"
        jsURL="grids/autofit/autoFitColumnWidths.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        ListGrid fields can be set to auto-fit to their titles and/or field values. In this
        example the first two columns are set to auto-fit when the grid is drawn. The first
        field's title exceeds the space used by its values. With the second field, the reverse
        is true. In both cases the column is correctly sized to fit its content.
        Note that the user can also perform one time auto-fit of columns at runtime by
        double-clicking on any header or using
        the context-menu option.
        </description>
    </Example>
    <Example
        title="New Records"
        id="autofitNewRecords"
        jsURL="grids/autofit/autoFitNewRecords.js">
		<description>
        Autofit to rows can be made subject to a maximum. Add new rows to the grid, and note that the
        grid expands to show the new rows. This grid is configured to stop expanding once there are more
        than 5 rows, and begin scrolling instead.
        </description></Example>
    <Example
        title="Filter"
        id="autofitFilter"
        jsURL="grids/autofit/autoFitFilter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs><description>
        Change the filter to show the grid resizing within the constraint of its maximum 
        autofit rows. Enter a "Country" filter of "cook island" to see the grid shrink down to minimum
        size. Change the "Country" filter to "island" to show the grid at almost maximum size, but
        not scrolling.  Change the "Country" filter to "land" to show the grid scrolling because
        its maximum autofit size (10) isn't large enough to display all rows.
        </description></Example>
</children></ExampleFolder>


<!-- Grids > Filter -->
<ExampleFolder
    title="Filtering"
    isOpen="false"><description>
    SmartClient grids provide interactive filtering of standard and custom data types,
    with automatic client/server coordination.
</description><children>
    <Example
        title="Filter"
        id="filter"
        jsURL="grids/filtering/filter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Type "island" above the "Country" column, then press Enter or click the filter button
        (top-right corner of the grid) to show only countries with "island" in their name.
        Select "North America" above the "Continent" column to filter countries by that continent.
        ]]></description></Example>
    <Example
        title="Live Filter"
        id="liveFilter"
        jsURL="grids/filtering/liveFilter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Begin typing a country name into in the filter box for the "Country" column.  Grids can 
        be configured to filter as you type.        
        ]]></description></Example>
    <Example
        title="Adaptive Filter"
        id="adaptiveFilter"
        descriptionHeight="190"
        icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png"
        jsURL="grids/filtering/adaptiveFilter.js"><tabs>
            <tab title="supplyItem" url="supplyItem.ds.xml"/>
        </tabs><description><![CDATA[
        SmartClient combines large dataset handling with adaptive use of
        client-side filtering.  Begin typing an Item name in the filter box above the "Item"
        column (for example, enter "add").  When the dataset becomes small enough, SmartClient
        switches to client-side filtering automatically. Enter more letters, or criteria on
        other columns, to see this.  The label underneath the grid flashes briefly
        every time SmartClient needs to visit the server.
        <P>
        Delete part of the item name to see SmartClient automatically switch back to
        server-side filtering when necessary.  
        <P>
        Adaptive filtering eliminates up to 90% of the most costly types of server contact
        (searching through large datasets), <b>dramatically improving responsiveness and
        scalability</b>.
        ]]></description></Example>
    <Example
        title="Advanced Filter"
        id="advancedFilter"
        jsURL="grids/filtering/advancedFilter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        SmartClient's Advanced Filter feature allows you to create complex, multi-condition 
        filters.  Ordinary <code>DynamicForms</code> can be used to generate AdvancedCriteria objects, as is
        shown here, simply by specifying a valid "operator" on one or more of the form fields.  
        ]]></description></Example>
    <Example
        title="Custom Filter"
        id="filterBuilder"
        jsURL="grids/filtering/filterBuilder.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs><description><![CDATA[
        Use the FilterBuilder to construct custom queries that combine multiple criteria across
        any field in your DataSource.  Note that the operator
        select list only shows operators suitable for the field selected, and the comparison
        field changes to suit the type of the selected field (for example, select field 
        "independence" and note that the comparison field changes to a date). Add clauses to
        your query with the "+" icon. Click "Filter" to see the result in the ListGrid.
        ]]></description></Example>
    <Example
        title="Nested Filter"
        id="filterBuilderBracket"
        jsURL="grids/filtering/filterBuilderBracket.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
        <descriptionHeight>160</descriptionHeight>
        <description><![CDATA[
        Use the FilterBuilder to construct queries of arbitrary complexity.  The FilterBuilder,
        and the underlying <code>AdvancedCriteria</code> system, support building queries with subclauses
        nested to any depth.  The initial criteria in this example is set up to display only
        European countries where either the name ends with "land", or the population is less 
        than 3 million - an unlikely query, perhaps, but one that shows the simplest example of
        the FilterBuilder's flexibility.
        <p>
        Add clauses to the query with the "+" icon. Add nested subclauses with the "+()" button.
        Click "Filter" to see the result in the ListGrid.
        ]]></description></Example>
    <Example
        title="Big Filter"
        id="bigFilter"
        jsURL="grids/filtering/bigFilter.js"><tabs>
        </tabs>
        <descriptionHeight>160</descriptionHeight>
        <description><![CDATA[
        When a FilterBuilder must work with a very large number of fields, it is possible to set 
        <code>FilterBuilder.fieldDataSource</code> to a DataSource containing records that represent the
        fields to display in the FieldPickers in each clause.  The FilterBuilder below is 
        created without a normal DataSource, but specifies a fieldDataSource and the 
        FieldPicker items in each clause are populated dynamically with it's records.  In this 
        mode, the FieldPickers are represented by ComboBoxItems, rather than SelectItems, and 
        have default settings that provide type-ahead auto-completion.
        <P>Note also that, when fieldDataSource is specified and the operator for a clause
        is of a type that uses a field-lookup, the valueField is also populated dynamically by 
        the fieldDataSource.
        ]]></description></Example>
    <Example
        title="Header Spans"
        id="headerSpans"
        jsURL="grids/sorting/headerSpans.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        HeaderSpans are a second level of headers that appears above the normal ListGrid 
        headers, providing a visual cue for grouping. Resize the columns and note that the 
        HeaderSpans change accordingly. Right-click in the header and note that the ability to hide
        and display spanned columns as a group is available, as well as individually.
        ]]></description></Example>
    <Example
        title="Disable filter"
        id="disableFilter"
        jsURL="grids/filtering/disable.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Type "island" above the "Country" column, then press Enter or click the filter button
        (top-right corner of the grid) to show only countries with "island" in their name.
        Select "North America" above the "Continent" column to filter countries by that continent.
        Filtering is disabled on the "Flag" and "Capital" columns.
        ]]></description></Example>
    <Example title="Autofit filter" id="gridFilterAutoFit" ref="autofitFilter"/>
    <Example
        title="Date Range"
        id="dateRangeFilter"
        jsURL="grids/filtering/dateRangeFilter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
        <descriptionHeight>180</descriptionHeight>
        <description><![CDATA[
        Smartclient provides special widgets for filtering date values, including recognised 
        RelativeDate strings that cause filtering relative to some other base date. 
        <P>The <code>RelativeDateRangeItem</code> allows selection of dates in three ways: you can select a
        preset date string, like "Today" or "Tomorrow", or a "ranged" date string, such as 
        "N days from now" and enter a quantity to associate with it, or you can directly enter
        a date string in a recognized format.  You can also select a date from the DateChooser
        by clicking the icon to the right of the widget.
        <P>The first example below demonstrates using a DateRangeItem in a seperate DynamicForm
        to filter a ListGrid.  Select start and end values for the range using one of the 
        methods described above and click the "Search" button to see the data filtered 
        according to the values in the "Nationhood" field.
        <P>The second example below demonstrates filtering grid data using a <code>MiniDateRangeItem</code>
        to filter data when a ListGrid is showing it's FilterEditor.  In
        this example, click the Date icon in the header for the "Nationhood" field to open a 
        popup DateRangeItemDialog.  In the dialog, select start and end values for the range, 
        as described above, and click Ok to close the Window.  Then click the Filter button in
        the top right of the grid to see the data filtered.  You can hover the mouse over the 
        "Nationhood" field-header to see the full date-range string.
        ]]></description></Example>
    <Example
        title="Date Range (Presets)"
        id="dateRangeFilterPresets"
        jsURL="grids/filtering/dateRangeFilterPresets.js"><tabs>
        <tab title="RecentDateRangeItem" url="grids/filtering/recentDateRangeItem.js" canEdit="false" doEval="true" />
        <tab title="presetDateRangeData.js" url="grids/data/presetDateRangeData.js" canEdit="false" doEval="true" />
        </tabs>
        <descriptionHeight>180</descriptionHeight>
        <description><![CDATA[
        SmartClient provides a <code>PresetCriteriaItem</code>, which allows a user to select 
        criteria from a SelectItem using a recognizable display-name, from a list of options
        provided to it.  The item can also include a "Custom..." entry which, when selected, 
        calls the <code>getCustomCriteria()</code> override point, allowing the developer to provide a 
        custom interface for selecting criteria. There's also a simple subclass of this item, 
        <code>PresetDateRangeItem</code>, which has custom code to show a DateRangeDialog for 
        collecting custom-criteria.
        <P>This example demonstrates using a subclass of the second example in both a ListGrid's
        FilterEditor, and in a stand-alone FilterBuilder.A simple subclass of 
        <code>PresetDateRangeItem</code> is created, called <i>RecentDateRangeItem</i>, that lists a number of 
        common options for filtering by recent date ranges.  This is then used as an editor in 
        both UIs.  In the first example, select an option in the "Order Date" field and click 
        the 'Filter' icon to see the filter applied.  In the second example, choose
        a named-range in the "value" field to the right of the FilterBuilder and click the 
        'Filter' button below to have the selected criteria applied to the bottom grid.
        ]]></description></Example>
    <Example
        title="Expression filter"
        id="expressionFilter"
        jsURL="grids/filtering/expressionFilter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
        <descriptionHeight>150</descriptionHeight>
        <description><![CDATA[
        DynamicForms and FormItems are capable of parsing simple expressions entered as part of
        their values, when <code>allowExpressions</code> is true on either entity.  ListGrids use this
        facility, when <code>showFilterEditor</code> and <code>allowFilterExpressions</code> are true, to allow 
        expressions to be entered directly into the FormItems displayed in the filterEditor.
        <P>Below is a ListGrid with a FilterEditor and <code>allowFilterExpressions: true</code>.  Some 
        expression-based filter-criteria has been applied via <code>initialCriteria</code>. The list displays 
        countries with no 'i's in the country name, with a "Capital" that starts with a letter "A"
        through "F" and with a "Population" less than 1 million or more than 100 million.
        <P>See the table on the right for the supported expression-symbols.  Note that 
        logical "and" and "or" expressions are treated as text in text-based fields and ignored.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids > Sort -->
<ExampleFolder
    title="Sorting"
    isOpen="false"><description>
    SmartClient grids provide interactive sorting of standard and custom data types,
    with automatic client/server coordination.
</description><children>
    <Example
        title="Sort"
        id="sort"
        jsURL="grids/sorting/sort.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on any column header to sort by that column. To reverse the sort direction,
        click on the same column header, or the top-right corner of the grid.
        </description></Example>
    <Example
        title="Disable sort"
        visibility="sdk"
        jsURL="grids/sorting/disableSort.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Sorting is disabled on the "Flag" column. Click on any other column header to sort
        on the corresponding column.
        </description></Example>
    <Example
        title="Sort arrows"
        visibility="sdk"
        jsURL="grids/sorting/sortArrow.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click on any column header to sort or reverse-sort by that column.
        This grid shows the sort-direction arrow in the top-right corner only.
        </description></Example>
    <Example
        title="Data-Aware Sort"
        id="dataTypes"
        jsURL="grids/sorting/dataTypes.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on any column header to sort by that column.
        The "Nationhood", "Area", and "GDP (per capita)" columns are sorted as date, number, and
        calculated number values, respectively.
        </description></Example>
    <Example
        title="Multilevel Sort (UI)"
        id="multiLevelSortLG"
        jsURL="grids/sorting/multiLevelSortLG.js"><tabs>
        <tab title="supplyItem" url="supplyItem.ds.xml" canEdit="false" />
        </tabs>
        <descriptionHeight>150</descriptionHeight>
        <description><![CDATA[
        This grid is displayed pre-sorted on two fields: first by "Category" ascending and then
        by "Item Name" descending.  As well as the field's title, the header of each field included 
        in the sort configuration displays a sort-arrow indicating the direction of sort on that 
        field and, when multiple fields are sorted, a small numeral indicating this field's 
        position in the list of fields being sorted.  By using SHIFT-click, 
        an already sorted column-headers direction can be reversed, or an unsorted column
        header can be added to the list of fields being sorted.  Clicking a column header
        without holding down SHIFT clears the current sort configuration and initializes a new
        sort on the selected field.
        <P>SmartClient's SQL and Hibernate adapters support server-side multi-sorting and this
        is in evidence in this example.
        ]]></description></Example>
    <Example
        title="Multilevel Sort (Dialog)"
        id="multiLevelSortDialog"
        jsURL="grids/sorting/multiLevelSort.js"><tabs>
        <tab title="supplyItem" url="supplyItem.ds.xml" canEdit="false" />
        </tabs>
		<description>
		<![CDATA[
		 Click the "Multilevel Sort" button to show a <code>MultiSortDialog</code>.  Select a set of sort
        properties and directions and click "Save" to see the grid re-sorted by those properties.
        ]]>   
        </description></Example>
    <Example
        title="Adaptive Sort"
        id="adaptiveSort"
        icon="[ISO_DOCS_SKIN]/images/silkicons/table_relationship.png"
        jsURL="grids/sorting/adaptiveSort.js"><tabs>
            <tab title="supplyItem" url="supplyItem.ds.xml"/>
        </tabs><description><![CDATA[
        SmartClient combines large dataset handling with adaptive use of
        client-side sort.  Click any header and server-side sort will be used for this
        large dataset.  Check "Limit to Electronics" to limit the dataset and sort again.
        When the dataset becomes small enough, SmartClient switches to client-side
        sorting automatically.  The label underneath the grid flashes briefly 
        every time SmartClient needs to visit the server.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids > Editing -->
<ExampleFolder
    title="Editing"
    isOpen="false"><description><![CDATA[
    SmartClient grids provide inline editing of all data types, with automatic validation and
    client/server updates.<br><br>
    These examples are all bound to the same remote DataSource, so the
    changes are saved on SmartClient.com and will appear in all Grid Editing examples during this
    session. To end the SmartClient.com session and reset the example data on the server, simply
    close all instances of the web browser.
]]></description><children>
    <Example
        title="Edit by row"
        id="editByRow"
        jsURL="grids/editing/editRows.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click on any cell to start editing. Use Tab, Shift-Tab, Up Arrow and Down Arrow to move 
		between cells. Changes are saved automatically when moving to another row. Press Enter to
		save the current row and dismiss the editors, or Esc to discard changes for the current row
		and dismiss the editors.
        ]]></description></Example>
    <Example
        title="Edit by cell"
        id="editByCell"
        jsURL="grids/editing/editCells.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click on any cell to start editing. Use Tab, Shift-Tab, Up Arrow and Down Arrow to move between
		cells. Press Enter to save the current row and dismiss the editors, or Esc to discard changes for
		the current cell and dismiss the editors.
        ]]></description></Example>
    <Example
        title="Enter new rows"
        id="enterNewRows"
        jsURL="grids/editing/enterRows.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click on any cell to start editing, then Tab or Down Arrow past the last row in the grid to create
		a new row. Alternatively, click the "Edit New" button to create a new data-entry row at the end of
		the grid.
        ]]></description></Example>
    <Example title="Autofit new rows" id="editingAutoFitNewRows" ref="autofitNewRecords"/>
    <Example
        title="Mass Update"
        id="massUpdate"
        jsURL="grids/editing/massUpdate.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<descriptionHeight>120</descriptionHeight>
		<description><![CDATA[
        Click on any cell to start editing, then Tab or Down Arrow past the last row in the grid to create 
		a new row. Alternatively, click the "Edit New" button to create a new data-entry row at the end of 
		the grid. Unlike the other editing examples, none of the changes are being automatically saved to 
		the server.  Note how SmartClient highlights changed values, and new rows. Click the "Save" button 
		to save all changes at once, or click the "Discard" button to discard all changes (including any new 
		rows) and revert to the data as it was before editing started.
        ]]></description></Example>
    <Example
        title="Modal editing"
        id="modalEditing"
        jsURL="grids/editing/modalEditing.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Double-click on any cell to start editing. Click anywhere outside of the cell editors to save changes,
		or press the Esc key to discard changes.
        ]]></description></Example>
    <Example
        title="Disable editing"
        id="disableEditing"
        jsURL="grids/editing/disableEditing.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click on any cell to start editing. Use Tab/Arrow keys to move between cells,
        Enter/Esc keys to save or cancel. Editing is disabled for the "Country" and "G8" columns.
        ]]></description></Example>
    <Example
        title="Custom editors"
        id="customEditors"
        jsURL="grids/editing/customEditors.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click on any cell to start editing. The "Government", "Population", and "Nationhood"
        columns specify custom editors. In this example, they are a multiple-line Text Area, a Numeric Spinner
		and a Compound Date Control.
        ]]></description></Example>
    <Example
        title="Data validation"
        id="dataValidation"
        jsURL="grids/editing/validation.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click on any cell to start editing. Delete the value in a "Country" cell, or type a
        non-numeric value in a "Population" cell, to see validation errors.
        ]]></description></Example>

        <Example title="Dependent Selects" id="databoundDependentSelects"
                jsURL="grids/editing/dependentSelects.js">
            <tabs>
                <tab name="supplyItem" dataSource="supplyItem"/>
                <tab name="supplyCategory" dataSource="supplyCategory"/>
            </tabs>
			<descriptionHeight>110</descriptionHeight>
            <description>
                <![CDATA[
                <p />In the first example, Double Click on any row to start editing. Select a value 
                in the "Division" column to change the set of options available in the "Department" 
                column.
                <p />
                <p />In the second example, click the "Order New Item" button to add an editable row 
                to the grid.  Select a "Category" in the second column to change the set of options 
                available in the "Item" column.]]>
            </description></Example>
</children></ExampleFolder>

<!-- Grids > Frozen Columns -->
<ExampleFolder
    title="Frozen Columns"
    isOpen="false"><description><![CDATA[
    SmartClient supports rendering out grids with frozen fields.<br><br>
    Frozen fields are fields that do not scroll horizontally with the other fields, remaining
    visible on the screen while other fields may be scrolled out of view.
]]></description><children>
    <Example
        title="Simple Freeze"
        id="simpleFreeze"
        jsURL="grids/freezeFields/simpleFreeze.js"><tabs>
        <tab name="supplyItem" dataSource="supplyItem"/>
        </tabs>
		<description><![CDATA[
        Setting <code>frozen:true</code> on a column definition establishes a
        frozen column.  Column resize and reorder work normally.
        ]]></description></Example>
    <Example
        title="Dynamic Freeze"
        id="dynamicFreeze"
        jsURL="grids/freezeFields/dynamicFreeze.js"
        descriptionHeight="120"><tabs>
        <tab name="supplyItem" dataSource="supplyItem"/>
        </tabs>
		<description><![CDATA[
        Right click on any column header to show a menu that allows you to freeze
        that column. Multiple columns may be frozen, and frozen columns may be
        reordered.<br>
        Right click on a frozen column to unfreeze it.
        ]]></description></Example>
    <Example
        title="Editing"
        id="canEditFreeze"
        jsURL="grids/freezeFields/freezeEditing.js"><tabs>
        <tab name="supplyItem" dataSource="supplyItem"/>
        </tabs>
		<description><![CDATA[
        SmartClient's inline editing support works normally with frozen columns
        with no further configuration.
        ]]></description></Example>
    <Example
        title="Drag and Drop"
        jsURL="grids/freezeFields/freezeDragDrop.js"><tabs>
        <tab title="countryData" url="grids/data/splitCountryData.js"/>
        </tabs>
		<description><![CDATA[
        SmartClient's drag and drop support works normally with frozen columns
        with no further configuration.  Drag countries within grids to reorder them, or between
        grids to move countries back and forth.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids > Grouping -->
<ExampleFolder
    title="Grouping &amp; Summaries"
    isopen="false"><description><![CDATA[
    List entries can be grouped according to field value.
    ]]></description><children>
    <Example
        title="Dynamic Grouping"
        id="dynamicGrouping"
        jsURL="grids/grouping/dynamicGrouping.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Right click on any column header to show a menu that allows grouping by that 
        column. Right click and select "Ungroup" to return to a flat listing.
        ]]></description></Example>
    <Example
        title="Grouped Editing"
        id="groupedEditing"
        jsURL="grids/grouping/groupedEditing.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Inline editing works normally with grouped data. Edit the field that records 
        are grouped by and notice that the record will move to its new group automatically.
        ]]></description></Example>
    <Example
        title="Custom Grouping"
        id="customGrouping"
        jsURL="grids/grouping/customGrouping.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        You can specify custom grouping behaviors for a field. Group by the "Nationhood" and 
        "Population" fields to see examples of custom grouping.
        ]]></description></Example>
    <Example
        title="Multi Grouping"
        id="multiGrouping"
        jsURL="grids/grouping/multiGrouping.js">
        <tabs>
        <tab title="OrderItem" url="grids/ds/orderItemLocalDS.ds.js" canEdit="false" /></tabs>
        <descriptionHeight>120</descriptionHeight>
        <description><![CDATA[
        Grids support multiple levels of grouping, including a built-in dialog that
        allows users to configure grouping.  This is enabled by a single setting:
        <code>canMultiGroup</code>.
        <P>
        The grid below is grouped by Category, then by Ship Date.  Push the "Configure Grouping"
        button to launch a dialog for configuring multi-level grouping.  This can also be accessed
        from the drop-down menu on any column header, via the "Configure Grouping..." menu item.
        ]]></description>
    </Example>
    <Example
        title="Grouping Modes"
        id="groupingModes"
        jsURL="grids/grouping/groupingModes.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        This sample shows that a single ListGrid field may be grouped in more than
        one way, by setting its groupingModes property, a valueMap.  By default the
        grid is shown grouped by the "Hemisphere" mode of the Continent field--you
        can also group by the Continent Name.  Similarly, there are two ways to
        group by the Nationhood field.  You must define the getGroupValue() method
        of a field to apply logic appropriate to the field's groupingMode.
        ]]></description></Example>
    <Example
        title="Grid Summaries"
        id="summaryGrid"
        jsURL="grids/summaries/gridSummary.js">
        <tabs>
        <tab title="OrderItem" url="grids/ds/orderItemLocalDS.ds.js" canEdit="false" /></tabs>
        
        <descriptionHeight>190</descriptionHeight>
        <description><![CDATA[
        ListGrids support displaying summaries of the current data set in various ways.
        Fields from individual records can be summarized into a single field value. In this
        example the "Total" field displays a summary value calculated by
        multiplying the "Quantity" and "Price" fields.
        <P>
        Summaries can also be displayed for multiple records. This example shows a summary row
        at the end of each group in the grid, as well as an overall summary row with information
        about every record in the grid. Note that in addition to standard summary functions
        such as <code>"sum"</code> to generate a total, or <code>"count"</code> to generate
        a count of records, completely custom functions may be used. This is demonstrated in
        the "Category" field where a custom function determines how many categories exist in this dataset. 
        <P>
        Click to edit and summaries are dynamically re-calculated to reflect the changes made. 
        ]]></description>
    </Example>

    <Example
        title="Grid Header Summary"
        id="gridHeaderSummary"
        jsURL="grids/summaries/gridHeaderSummary.js"><tabs>
        <tab title="OrderItem" url="grids/ds/orderItemLocalDS.ds.js" canEdit="false" />
        </tabs>
        <descriptionHeight>190</descriptionHeight>
        <description><![CDATA[
	ListGrids support displaying summaries of the current data set in various ways.	Fields from individual records can be summarized into a single field value. In this example the "Total" field displays a
	summary value calculated by multiplying the "Quantity" and "Price" fields.<P>

	Summaries can also be displayed for multiple records. This example shows a summary row at the end of each group in the grid as
	well as an overall summary row with information about every record in the grid. Note that in addition to standard summary
	functions such as <code>"sum"</code> to generate a total, or <code>"count"</code> to generate a count of records, completely custom functions may be
	used. This is demonstrated in the "Category" field where a custom function determines how many categories exist in this
	dataset.<P>

	As illustrated in this sample, by calling <code>showGroupSummaryInHeader:true</code> field summary values for each group are
	displayed directly in the group header node, rather than showing up at the bottom of each expanded group.
        ]]></description></Example>
    <Example
        title="Multi Line Summaries"
        id="multiLineSummaries"
        jsURL="grids/summaries/multiLineSummaries.js"><tabs>
        <tab title="OrderItem" url="grids/ds/orderItemLocalDS.ds.js" canEdit="false" />
        </tabs>
        <descriptionHeight>190</descriptionHeight>
        <description><![CDATA[
	ListGrids support displaying summaries of the current data set in various ways.	Fields from individual records can be summarized into a single field value. In this example the "Total" field displays a
	summary value calculated by multiplying the "Quantity" and "Price" fields.<P>

	Summaries can also be displayed for multiple records. This example shows a summary row at the end of each group in the grid as
	well as an overall summary row with information about every record in the grid. Note that in addition to standard summary
	functions such as <code>"sum"</code> to generate a total, or <code>"count"</code> to generate a count of records, completely custom functions may be
	used. This is demonstrated in the "Category" field where a custom function determines how many categories exist in this
	dataset.<P>

	By calling <code>summaryFunction</code> multiple times allows for applying more than one summary function to a field. This allows the
	developer to set up multi-line summaries where each specified summary function result will show up in a separate summary row.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids > Expanding Rows -->
<ExampleFolder
    title="Expanding Rows"
    isOpen="false"><description><![CDATA[
    SmartClient grids support a special <code>expansionField</code>.<br><br>
    When <code>grid.canExpandRecords</code> is true, the expansionField is rendered out at the beginning of
    the field list.  When this field is clicked for a record, the record is expanded and a
    built-in component is embedded into the record's row, beneath it's field values.
    <br><br>
    A variety of components are supported by default, according to the value <code>grid.expansionMode</code>,
    and <code>grid.getExpansionComponent()</code> can also be overriden  to add custom expansion behaviors.
]]></description><children>
    <Example
        title="Detail Field"
        id="expansionDetailField"
        jsURL="grids/expansion/expansionDetailField.js"><tabs>
        <tab title="countryData" url="grids/data/countryDataDetail.js"/>
        </tabs>
		<description><![CDATA[
        This grid displays fields from the Countries DataSource.  Expand a 
        row by clicking the special <code>expansionField</code> to see the details of
        the selected country's background in the expanded section.
        ]]></description></Example>
    <Example
        title="Details"
        id="expansionDetails"
        jsURL="grids/expansion/expansionDetails.js"><tabs>
        <tab name="supplyItem" dataSource="supplyItem" canEdit="false"/>
        </tabs>
		<description><![CDATA[ 
        This grid displays a limited number of fields from the supplyItem DataSource.  Expand
        a row by clicking the special <code>expansionField</code> to see a DetailViewer
        embedded in the expanded portion of the record which displays the rest of the
        data from the DataSource that isn't already visible in the grid.
        ]]></description></Example>
    <Example
        title="Related Records"
        id="expansionRelatedRecords"
        jsURL="grids/expansion/expansionRelatedRecords.js"><tabs>
        <tab name="supplyCategory" dataSource="supplyCategory" canEdit="false"/>
        <tab name="supplyItem" dataSource="supplyItem" canEdit="false"/>
        </tabs>
		<description><![CDATA[ 
        In this grid of Supply Categories, expand a row by clicking the special 
        <code>expansionField</code> to see a sub-grid containing the list of Supply Items 
        applicable to the selected "Category".
        ]]></description></Example>
    <Example
        title="Custom Component"
        id="customExpansionComponent"
        jsURL="grids/expansion/customExpansionComponent.js"><tabs>
        <tab name="supplyCategory" dataSource="supplyCategory" canEdit="false"/>
        <tab name="supplyItem" dataSource="supplyItem" canEdit="false"/>
        </tabs>
		<descriptionHeight>140</descriptionHeight>
		<description><![CDATA[
        This sample uses a Custom Expansion Component to achieve what the
        Related Records sample does with built-in SmartClient Framework functionality.
        <P>
        In this grid of Supply Categories, expand a row by clicking the special 
        <code>expansionField</code> to see a sub-grid containing the list of Supply Items 
        applicable to the selected "Category".
        ]]></description></Example>
    <Example
        title="Limited Data"
        id="expansionLimitedWithDetails"
        jsURL="grids/expansion/expansionLimitedWithDetails.js"><tabs>
        <tab name="supplyItem" dataSource="supplyItemWithOps" canEdit="false" />
        </tabs>
		<descriptionHeight>150</descriptionHeight>
		<description><![CDATA[ 
        This grid displays a limited number of fields from the supplyItem DataSource.  Only the
        visible data values have been returned from the server, via the 
        <code>operationBinding.outputs</code> feature.  Expand a row by clicking the special 
        <code>expansionField</code>. The system will access the server to retrieve the entire record, create a 
        DetailViewer to display that data and expand the row to show the DetailViewer.  See 
        the code in the overridden <code>getExpansionComponent()</code> method.
        <P>
        Note also the use of the <code>maxExpandedRecords</code> attribute to limit the total number 
        of simultaneously expanded records.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids -> Hiliting  -->
<ExampleFolder
    title="Hiliting"
    isOpen="false"><description><![CDATA[
		The "hiliting" system allows end users to visually define data highlighting rules, such 
		as using colors to pick out high values, or using multiple colors to indicate
		ranges of values.
		<P>
		Because "hilites" can be easily stored and re-applied, it's easy to build an interface 
        that allows users to store their own private data highlighting rules, or even build a
		highlighted report to share with other users.		
	]]></description><children>

    <Example
    title="User Defined"
    id="userDefinedHilites"
    jsURL="grids/hiliting/userDefinedHilites.js"><tabs>
    <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
    </tabs>
    <descriptionHeight>240</descriptionHeight>
    <description><![CDATA[
		<code>DataBoundComponents</code> allow end-users to create "hilites" with rules based on the values 
        of data.  There are two sorts of hilites. Simple hilites, which allow a single 
        criterion based on a single field to affect a single target field (the same one) and 
        Advanced hilites, which allow very complex criteria, based on multiple fields, to 
        affect multiple target fields.
		<P>
		Click the "Edit Hilites" button below to show the <code>HiliteEditor</code> interface.  To set up a 
        simple hilite, click on the "Area (km<sup>2</sup>)" record in the list to the left.  
        When the simple hilite rule appears on the right, select the "greater than" operation 
        from the drop-down box, type "5000000" into the value textBox, select a color from the 
        Color picker widget and click "Save".  Notice that all "Area (km<sup>2</sup>)" 
        values in the grid that exceed 5000000 are now highlighted in the chosen color.
        <P>
		Now, add an Advanced criteria.  Again, click the "Edit Hilites" button and then click 
        the "Add Advanced Rule" button in the top left of the <code>HiliteEditor</code> - The 
		<code>AdvancedHiliteEditor</code> window is displayed.  Add a new criterion that specifies "GDP ($M) greater 
        than 1000000".  Click the green plus icon beneath the criterion and add a second criterion, 
        this time specifying "Area (km<sup>2</sup>) less than 500000".  In the list below, 
        select both "GDP ($M)" and "Area (km<sup>2</sup>)" and select a background color.  
        Clicking "Save" now will update the grid, showing both "GDP" and "Area" data in your 
        selected background color, where "GDP" is higher than 1 million and "Area" is less than
		500,000.
		<P>
        It is very easy to provide users with the ability to save and restore their hilite 
        information by simply having the ability to save the data as a string. Click the 
        button below to see the grid's hilite state retrieved and serialized, by calling 
		<code>getHiliteState()</code>, the grid destroyed and it's hilite-state restored to another 
        grid via <code>setHiliteState()</code>. 
    ]]></description></Example>

    <Example
    title="Pre-Defined"
    id="preDefinedHilites"
    jsURL="grids/hiliting/preDefinedHilites.js"><tabs>
    <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
    </tabs>
    <descriptionHeight>140</descriptionHeight>
    <description><![CDATA[
		This example demonstrates producing hilites in code.  The hilites applied to the grid 
        below match those suggested in the <i>User Defined</i> hilites example.  Additionaly, 
        the Advanced Hilite in this example also demonstrates using <code>Canvas.imgHTML()</code> 
        and the <code>htmlAfter</code> attribute of hilite-objects to append a warning icon to the 
        end of each field value, as part of the hilite.
		<P>
		Hilite-objects also support an <code>htmlBefore</code> attribute - These before 
        and after properties can be used to extend color-based hilites to format values, for instance, as 
        <b>bold</b> or <i>italic</i> text using HTML tags.
    ]]></description></Example>

    <Example
    title="Data-Driven"
    id="dataDrivenHilites"
    jsURL="grids/hiliting/dataDrivenHilites.js"><tabs>
    <tab title="countryDataHilites" url="grids/data/countryDataHilites.js" canEdit="false" doEval="true"/>
    <tab title="countryHilitesDS" url="grids/ds/countryHilitesDS.ds.js" canEdit="true" />
    </tabs>
    <description><![CDATA[
		This example demonstrates hiliting in a data-driven fashion, where hilites contain no
        criteria, and instead the data itself is flagged by setting the 
        <code>DataBoundComponent.hiliteProperty</code> attribute on each record.  This method is 
        useful when complex server-based calculation is used to decide which records to 
        hilite, and the client only needs to handle displaying them.
    ]]></description></Example>

    <Example
    title="Formula Hilites"
    id="formulaHilites"
    jsURL="grids/hiliting/formulaHilites.js"><tabs>
    <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
    </tabs>
    <descriptionHeight>190</descriptionHeight>
    <description><![CDATA[
        Hiliting can be applied to any field in a <code>DataBoundComponent</code>, including custom formula
        and summary fields.
        <P>
        Launch the Formula Builder and enter the title of the new field, and the desired 
        formula. In this case, enter "Population Density" for the field title and in the 
        formula field enter "A / B". As indicated in the dialog, "A" represents the 
        "Population" field, and "B" represents the "Area" field. Notice that sorting is now available on this
        newly added "Population Density" field, just like any other field. Click the help 
        icon to view the various supported built-in functions.
        <P>
		Now, click the "Edit Hilites" button to show the HiliteEditor interface.  To set up a 
        simple hilite on the custom "Population Density" field, select it in the list to 
        the left.  When the simple hilite rule appears on the right, select the "greater than" 
        operation from the drop-down box, type "300" into the value textBox, select a color 
        from the Color picker widget and click "Save".  You'll see that all the grid-values 
        in the "Population Density" field that exceed 300 are now hilighted in the chosen color.
    ]]></description></Example>
</children></ExampleFolder> 

<!-- Grids > Cell-Widgets -->
<ExampleFolder
    title="Cell Widgets"
    isOpen="false"><description><![CDATA[
    Examples of SmartClient's ability to embed arbitrary widgets in ListGrid cells.
    ]]></description><children>
    <Example
        title="Grid Cell Widgets"
        id="gridCellWidgets"
        jsURL="grids/cellWidgets/gridCellWidgets.js"><tabs>
        <tab title="countryData" url="grids/data/countryDataDetail.js"/>
        </tabs>
		<description><![CDATA[
        This example illustrates embedding arbitrary widgets in ListGrid cells. Notice how 
        reordering the column with widgets works as any other column. SmartClient uses widget 
        pooling to maximize efficiency.
        ]]></description></Example>
	<Example
        title="Grid Record Widgets"
        id="gridCellWidgetsByRecord"
        jsURL="grids/cellWidgets/gridCellWidgetsByRecord.js"><tabs>
        <tab title="countryData" url="grids/data/countryDataDetail.js"/>
        </tabs>
		<description><![CDATA[
        This example illustrates embedding a row level widget in a ListGrid Record. SmartClient uses widget 
        pooling to maximize efficiency. 
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids > Hover Components -->
<ExampleFolder
    title="Hover Components"
    isOpen="false"><description><![CDATA[
    Any SmartClient Canvas can display a hover label when a user pauses momentarily
    above it.  This is a built-in behavior for showing arbitrary HTML text, configured by
    returning a value from <codei>Canvas.hoverHTML</code>.  In addition to this, the built-in Hover
    Label can be replaced with any other Canvas-based component by overriding and returning
    a component from <code>getHoverComponent()</code>.
    <P>
    This section covers some examples of this feature.
    <P>
    When <code>showHoverComponents</code> is true and the mouse hovers over a field, a built-in 
    component is created and used in place of the standard hover Label.
    <br><br>
    A variety of components are supported by default, according to the value of <code>grid.hoverMode</code>,
    and overriding <code>grid.getHoverComponent()</code> allows for adding custom hover behaviors.
]]></description><children>
    <Example
        title="Related Records"
        id="hoverRelatedRecords"
        jsURL="grids/hover/hoverRelatedRecords.js"><tabs>
           <tab title="customerOrders" url="grids/data/customerOrders.js" canEdit="false" doEval="true"/>
           <tab title ="customerOrderMessages" url="grids/data/customerOrderMessages.js" canEdit="false" doEval="true"/>
           <tab title="orderDS" url="grids/ds/orderDS.ds.js" canEdit="false" doEval="true"/>
           <tab title="orderMessagesDS" url="grids/ds/orderMessagesDS.ds.js" canEdit="false" doEval="true"/>
        </tabs>
		<descriptionHeight>100</descriptionHeight>
		<description><![CDATA[ 
        In this grid of Customer Orders, hover over a row to see a list of messages
        attached to the order.  This gives a quick preview of discussions about the order,
        without the need to leave the list of orders.
        <P>
        In a complete application, clicking the order would lead to a detail screen showing the
        full order details and the ability to add to the discussion.
        ]]></description></Example>
    <Example
        title="Details"
        id="hoverDetails"
        jsURL="grids/hover/hoverDetails.js"><tabs>
        <tab name="supplyItem" dataSource="supplyItemWithOps" canEdit="false" />
        </tabs><description><![CDATA[ 
        This grid displays a limited number of fields from the supplyItem DataSource.  Only the
        visible data values been returned from the server, via the 
        <code>operationBinding.outputs</code> feature.  When hovering over a row, the system returns 
        to the server to retrieve the entire record, creates a DetailViewer to display that data 
        and shows it as the hoverComponent.  See the code in the overridden <code>getCellHoverComponent()</code> method.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Custom Columns (formula/summary) -->
<Example
    title="Custom Columns"
    id="customColumns"
    jsURL="grids/customColumns.js"><tabs>
    <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
    </tabs>
    <descriptionHeight>220</descriptionHeight>
    <description><![CDATA[
        Formula and Summary fields provide built-in wizards for end users to define 
        formula fields that can compute values using other fields, or summary fields that can 
        combine other fields with intervening / surrounding text. Available in all 
        <code>DataBoundComponents</code> and easy to persist as preferences.
        <P>
        The Formula and Summary Builders are accessible from the grid header context menu. They 
        can also be invoked programmatically as demonstrated by clicking the buttons in this 
        sample.
        <P>
        Launch the Formula Builder and enter the title of the new field, and the desired 
        formula. For example, enter "Population Density" for the field title and in the 
        formula field enter "A / B". As indicated in the dialog, <b>A</b> represents the 
        "Population" field, and <b>B</b> represents the "Area" field. Notice sorting is now available on this 
        newly added "Population Density" field just like any other field. Click the help 
        icon to view the various supported built-in functions.
        <P>
        Next, launch the Summary Builder and enter the title of the new field, and the Summary 
        formulation. For example, enter "Country (Flag)" for the field name and enter 
        "#B (#A)" in the summary field.
        <P>
        Once some additional user-fields have been added, all that is needed to persist the column-layout
        for later restoration to another grid, is the ability to save a string.  Click the 
        button below to store the grid's state by calling <code>getFieldState()</code>, destroy the 
        grid and restore it's state to another grid using <code>setFieldState()</code>. 
        
]]></description></Example>

<!-- Grids >  Tiling -->
<ExampleFolder
    title="Tiling"
    isOpen="false"><description>
    Using the TileGrid to display data in a tiled format.
</description><children>
    <Example
        title="Basic"
        id="tilingBasic"
        jsURL="grids/tiling/basic.js"><tabs>
        <tab title="animalData" url="grids/data/animalData.js"/>
        </tabs>
		<description>
       SmartClient can display data in a "tiled" view.  Mouse over widgets to see rollovers, click to
       select (shift- and ctrl-click for multi-select).
        </description></Example>
    <Example
        title="Filter &amp; Sort"
        id="tilingFilter"
        jsURL="grids/tiling/filter.js"
        cssURL="grids/tiling/tileStyle.css"><tabs>
        <tab title="animalsDS" url="grids/ds/animalsSQLDS.ds.xml" canEdit="false"/>
        </tabs>
        <description>
        Tiled views can be filtered and sorted just like ListGrids.  Use the "Search" form to eliminate
        some tiles and watch remaining tiles animate to new positions.  Use the "Sort" form to change
        the sort direction.
        </description></Example>
    <Example
        title="Editing"
        id="tilingEditing"
        jsURL="grids/tiling/editing.js"
        cssURL="grids/tiling/tileStyle.css"><tabs>
        <tab title="animalsDS" url="grids/ds/animalsSQLDS.ds.xml" canEdit="false"/>
        </tabs>
        <description>
       Tiled views can be connected to editors.  The TiledView automatically reacts to changes to the
       underlying dataset.  Change the life span of Gazelle to 2 to see it
       animate to the beginning of the list.
        </description></Example>
    <Example
        title="Customized Tiles"
        id="tilingCustomTiles"
        jsURL="grids/tiling/customTiles.js"
        cssURL="grids/tiling/tileStyle.css"><tabs>
        <tab title="animalsDS" url="grids/ds/animalsSQLDS.ds.xml" canEdit="false"/>
        </tabs>
        <description>
        The tiles in a TileGrid can be customized.  This example demonstrates adding a "Remove"
        button to each tile which, when clicked, executes a DataSource operation to remove the
        selected tile.
        </description></Example>
    <Example
        title="Fully Custom Tiles"
        id="fullyCustomTiles"
        jsURL="grids/tiling/fullyCustomTiles.js"
        cssURL="grids/tiling/tileStyle.css"><tabs>
        <tab title="animalsDS" url="grids/ds/animalsSQLDS.ds.xml" canEdit="false"/>
        </tabs>
        <descriptionHeight>120</descriptionHeight>
        <description><![CDATA[
        TileGrids allow a completely custom component to be used as the tile.  
        <p>
        In this sample, each tile is a DynamicForm (with no editable fields).  The tabular
        layout of the DynamicForm has been used to show each animals' status (Endangered) and
        lifespan adjacent to its image, instead of beneath it.
        ]]></description></Example>
   
</children></ExampleFolder> 

<!-- Export -->
    <Example
        id="export"
        title="Export"
        requiresModules="SCServer"
        jsURL="grids/export.js"><tabs>
        <tab title="worldDSExport" url="grids/ds/worldSQLDSExport.ds.xml" canEdit="false" />
        </tabs>
		<descriptionHeight>130</descriptionHeight>
		<description><![CDATA[
            It's now easy to export data from a DataSource or from <code>DataboundComponents</code>, 
            such as ListGrid, TreeGrid and TileGrid.  In the example 
            below, choose an export format from the "Export Type" list, decide whether to 
            download the results or view them in a window using the checkbox and 
            click the "Export" button.  Because exporting to JSON is allowed only via 
            server-side custom code or via an <code>OperationBinding</code> (for security reasons), choosing
            <b>JSON</b> from the select-item issues the export using the operationId set up in
            the DataSource but still respects the "Show in Window" checkbox.  See the 
            "JS" and "worldDSExport" tabs below.<p>
			
			Try changing the filters and sort-order on the grid to see that the exported data 
            is filtered and sorted according to criteria applied to the grid.
        ]]></description></Example>

<!-- Grids > Data types-->
<ExampleFolder
    title="Data types"
    id="gridsDataTypes"
    isOpen="false"><description>
    Built-in display and editing behaviors for common data types, and how to customize them.
</description><children>
    <Example
        title="Text"
        jsURL="grids/dataTypes/text.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        All fields in this grid are text fields.
        </description></Example>
    <Example
        title="Image"
        id="imageType"
        jsURL="grids/dataTypes/image.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        "Flag" is an image field.
        </description></Example>
    <Example
        title="Long Text"
        id="longText"
        jsURL="grids/dataTypes/longtext.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the data values to edit.
        "Government" is a long text field with a popup editor.
        </description></Example>
    <Example
        title="Date"
        jsURL="grids/dataTypes/date.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        "Nationhood" is a date field.
        </description></Example>        
    <Example
        title="Integer"
        jsURL="grids/dataTypes/integer.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        "Population" is an integer field.
        </description></Example>
    <Example
        title="Decimal"
        jsURL="grids/dataTypes/decimal.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        "GDP" is a decimal (aka float) field.
        </description></Example>
    <Example
        title="Boolean"
        jsURL="grids/dataTypes/boolean.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        "G8" is a boolean (true/false) field.
        </description></Example>
    <Example
        title="Link (text)"
        jsURL="grids/dataTypes/linkText.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the values in the "Info" column to open external links.
        </description></Example>
    <Example
        title="Link (image)"
        id="linkImage"
        jsURL="grids/dataTypes/linkImage.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the book images in the "Info" column to open external links.
        </description></Example>
    <Example
        title="List"
        id="listType"
        jsURL="grids/dataTypes/list.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        "Continent" is a list (aka valueMapped) field.
        </description></Example>
    <Example
        title="Calculated"
        id="calculatedCellValue"
        jsURL="grids/dataTypes/calculated.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Click on the column headers to sort, or on the data values to edit.
        "GDP (per capita)" is calculated from the "GDP" and "Population" fields.
        </description></Example>
</children></ExampleFolder>


<!-- Grids >  Data binding (combining with Data Providers for now)-->
<!-- Grids > Data providers -->
<!-- Techniques for loading data sets into a grid component from local or remote data sources. -->
<ExampleFolder
    id="gridsDataBinding"
    title="Data binding"
    isOpen="false"><description>
    How to bind grids to DataSources to share field (column) definitions with other components,
    and how to load data from local and remote data sources and services.    
</description><children>
    <Example
        title="ListGrid fields"
        id="listGridFields"
        jsURL="grids/dataBinding/fieldsGrid.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description><![CDATA[
        This ListGrid takes its field (column) settings from the <code>fields</code>
        property of the component definition only. This technique is appropriate for
        presentation-only grids that do not require data binding.
        ]]></description></Example>
    <Example
        title="DataSource fields"
        id="dataSourceFields"
        jsURL="grids/dataBinding/fieldsDS.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        <tab title="countryDS" url="grids/ds/countryMergeDS.ds.js"/>
        </tabs>
		<description><![CDATA[
        This ListGrid takes its field (column) settings from the
        "countryDS" DataSource specified in the <code>dataSource</code> property of the
        component definition. This technique is appropriate for easy display of a shared
        data model with the default UI appearance and behaviors.
        ]]></description></Example>
    <Example
        title="Merged fields"
        id="mergedFields"
        jsURL="grids/dataBinding/fieldsMerged.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        <tab title="countryDS" url="grids/ds/countryMergeDS.ds.js"/>
        </tabs>
		<description><![CDATA[
        This ListGrid merges field settings from both the component <code>fields</code>
        (for presentation attributes) and the "countryDS" DataSource (for
        data model attributes). This is the usual approach to customize the look and feel of a
        data-bound component.
        ]]></description></Example>
    <Example
        title="Inline data"
        id="inlineData"
        jsURL="grids/dataProviders/inlineData.js">
		<description><![CDATA[
        This ListGrid uses an inline data array in the component definition. This
        technique is appropriate for very small read-only data sets, typically with static data
        values.
        ]]></description></Example>
    <Example
        title="Local data"
        id="localData"
        jsURL="grids/dataProviders/localData.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description><![CDATA[
        This ListGrid loads data from a local data array (included in a separate
        JavaScript data file). This technique is appropriate for read-only data sets, typically
        with less than 500 records.
        ]]></description></Example>
    <Example
        title="Local DataSource"
        id="localDataSource"
        jsURL="grids/dataProviders/databound.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        <tab title="countryDS" url="grids/ds/countryLocalDS.ds.js"/>
        </tabs><description><![CDATA[
        This ListGrid binds to a client-only DataSource that loads data
        from a local data array. This technique is appropriate for client-only rapid prototyping
        when the production application will support add or update (write operations), switchable
        data providers (JSON, XML, WSDL, Java), arbitrarily large data sets (1000+ records), or
        a data model that is shared by multiple components.
        ]]></description></Example>
    <Example
        title="JSON DataSource"
        id="jsonDataSource"
        jsURL="grids/dataProviders/databound.js"><tabs>
        <tab title="countryDS" url="grids/ds/countryJSONDS.ds.xml"/>
        <tab title="countryData.json" url="grids/data/countryData.json" doEval="false" canEdit="false"/>
        </tabs>
		<description><![CDATA[
        This ListGrid binds to a DataSource that loads data from a
        remote JSON data provider.  This approach of loading simple JSON data over HTTP can be
        used with PHP and other server technologies.
        ]]></description></Example>
    <Example
        title="XML DataSource"
        id="xmlDataSource"
        needXML="true"
        jsURL="grids/dataProviders/databound.js"><tabs>
        <tab title="countryDS" url="grids/ds/countryXMLDS.ds.xml"/>
        <tab title="countryData.xml" url="grids/data/countryData.xml" canEdit="false" doEval="false"/>
        </tabs>
		<description><![CDATA[
        This ListGrid binds to a DataSource that loads data from a
        remote XML data provider.  This approach of loading simple XML data over HTTP can be
        used with PHP and other server technologies.
        ]]></description></Example>
    <Example
        title="WSDL DataSource"
        needXML="true"
        id="WSDLDataSource"
        jsURL="grids/dataProviders/WSDLBound.js"><tabs>
        <!-- Would be nice if we could just specify the WSDL url on a datasource that automatically
        loads the WSDL, configures its fields, and tells the component when it is ready. Currently
        WSDL binding requires different UI code, so it is not simply switchable with the other data
        providers (local, JS, XML, DMI, SmartClient). -->
        <tab title="countryDS" url="grids/ds/countryWSDLDS.ds.xml"/>
        <tab title="soapRequest.xml" url="grids/data/countrySoapRequest.xml" canEdit="false" doEval="false"/>
        <tab title="soapResponse.xml" url="grids/data/countrySoapResponse.xml" canEdit="false" doEval="false"/>
        <tab title="WSDL" url="grids/ds/SmartClientOperations.wsdl" canEdit="false" doEval="false"/>
        </tabs>
		<description><![CDATA[
        This ListGrid binds to a DataSource that loads data via a
        WSDL service.  This example WSDL service supports all 4 basic operation types (fetch,
        add, update, remove) and can be implemented with any server technology.  Sample
        request/response SOAP messages for a "fetch" operation are shown.
        ]]></description></Example>
<!--
    <Example
        title="Java DMI DataSource"
        jsURL="grids/dataProviders/databound.js"><tabs>
        <tab title="countryDS" url="grids/ds/countryJavaDS.ds.xml"/>
        <tab title="countryData.java" url="grids/data/countryData.java" doEval="false"/>
        </tabs><description><![CDATA[
        This <code>ListGrid</code> binds to a <code>DataSource</code> that loads data from a
        remote data provider implemented as a Java class.
        ]]></description></Example>
-->
</children></ExampleFolder>


<!-- Grids >  Data operations -->
<ExampleFolder
    title="Data operations"
    isOpen="false"><description>
    Basic operations on datasets, both local and remote.
</description><children>
    <Example
        title="Local set"
        visibility="sdk"
        jsURL="grids/dataOperations/localSet.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click the buttons to populate the grid with records from a local data set.
        </description></Example>
    <Example
        title="Local add"
        visibility="sdk"
        jsURL="grids/dataOperations/localAdd.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click the buttons to add records to the top and bottom of the list.
        </description></Example>
    <Example
        title="Local remove"
        visibility="sdk"
        jsURL="grids/dataOperations/localRemove.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description>
        Click "Remove first" to remove the first record in the list. Click the other buttons to
        remove records based on your selection (click, Ctrl-click, or
        Shift-click in the list to select records).
        </description></Example>
    <Example
        title="Local update"
        visibility="sdk"
        jsURL="grids/dataOperations/localUpdate.js"><tabs>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs><description><![CDATA[
        Click to select any record in the list, then click one of the buttons to change
        the "Continent" value for that record. Also see the "Grids > Editing" examples
        for automatic update behavior.
        ]]></description></Example>
    <Example
        title="Databound fetch"
        id="databoundFetch"
        jsURL="grids/dataOperations/databoundFetch.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description>
        Click the buttons to fetch (exact match) country records from the server.
        Click the "Fetch All" button to fetch the first "page" of 50 records, then scroll
        the grid to fetch new pages of data on demand.
        </description></Example>
    <Example
        title="Databound filter"
        id="databoundFilter"
        jsURL="grids/dataOperations/databoundFilter.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click the buttons to filter (partial match) records from the server. Also see the
        <b>Grids &gt; Sort &amp; filter &gt; Filter</b> example for automatic databound Filter
        operations triggered by user input.
        ]]></description></Example>
    <Example
        title="Databound add"
        id="databoundAdd"
        jsURL="grids/dataOperations/databoundAdd.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click the "Add new country" button to create a new country record on the server.
        Also see the <b>Grids &gt; Editing &gt; Enter New Rows</b> example for automatic databound
        add operations triggered by user input.
        ]]></description></Example>
    <Example
        title="Databound remove"
        id="databoundRemove"
        jsURL="grids/dataOperations/databoundRemove.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description>
        Click "Remove first" to remove (delete) the first record in the list from the server.
        Click the other buttons to remove records based on your selection (click, Ctrl-click, or
        Shift-click in the list to select records).
        </description></Example>
    <Example
        title="Databound update"
        id="databoundUpdate"
        jsURL="grids/dataOperations/databoundUpdate.js"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click to select any record in the list, then click one of the buttons to change
        the "Continent" value for that record on the server. Also see the <b>Grids &gt; Editing</b>
        examples for automatic databound update operations triggered by user input.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Grids >  Excel/Grid Copy and Paste -->
<ExampleFolder
    title="Copy &amp; Paste"
    isOpen="false"><description>
    Copy and Paste Text between Excel and ListGrids.
</description><children>    
    <Example
        title="Grid to Excel"
        id="gridToExcel"
        jsURL="grids/excel/gridToExcel.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Click and drag to select cells, then either right-click or press the "Copy"
        button to bring up a dialog that can be used to copy and paste values to an Excel
        spreadsheet
        ]]></description></Example>
    <Example
        title="Grid to Grid"
        id="gridToGrid"
        jsURL="grids/excel/gridToGrid.js"><tabs>
        </tabs>
		<description><![CDATA[
        Each tab below holds one data grid component.  Drag to select cells within the
        grid, then use the "Copy" button to copy that data to the clipboard.  Click the "Paste"
        button below any grid to paste the copied data into that grid.
        ]]></description></Example>
    <Example
        title="Excel to Grid"
        id="excelToGrid"
        jsURL="grids/excel/excelToGrid.js"><tabs>
        <tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
        </tabs>
		<description><![CDATA[
        Open an Excel spreadsheet, select some cells, and use "Ctrl-C" to copy them.
        Click the "Paste Cells" button to open a dialog where you can paste the data.
        ]]></description></Example>
</children></ExampleFolder>

<!-- exists to make it more likely for sexier demos to be found on public website -->
<ExampleFolder title="Service Integration" id="serviceDataIntegration" ref="dataIntegration"
               visibility="none"/>

</children></ExampleFolder> <!-- closing parent folder: Grids -->

<!-- Trees >  -->
<ExampleFolder
    title="Trees"
    showSkinSwitcher="true"
    isOpen="false"
    icon="[ISO_DOCS_SKIN]/images/silkicons/chart_organisation.png"><description>
    High-performance interactive tree views
    &lt;BR&gt;
    &lt;BR&gt;
    Trees are based on grid views, and so share all of the appearance, interactivity and
    databinding features of grids, in addition to tree-specific features.
</description>
<children>
<!-- Trees > Appearance -->
    <ExampleFolder title="Appearance" isOpen="false"><description>
        Trees can have dynamic titles, display multiple columns and show connector
        lines.
    </description><children>
        <Example title="Node Titles" id="nodeTitles" dataSource="employees"
            jsURL="trees/appearance/nodeTitles.js">
            <description>
            Formatter interfaces allow you to add custom tree titles.
            </description></Example>
        <Example title="Multiple Columns" dataSource="employees"
                 jsURL="trees/appearance/multipleColumns.js">
				 <description>
            Trees can show multiple columns of data for each node.  Each column has the
            styling, formatting, and data type awareness features of columns in a normal
            grid.

            Try drag reordering columns, or sorting by the "Salary" field.
            </description></Example>
        <Example title="Connectors" id="connectors" jsURL="trees/appearance/connectors.js"
                 dataSource="employees"
                 cssURL="trees/appearance/connectors.css">
        <description>
            Trees can show skinnable connector lines. Toggle the checkbox to show or hide "full"
            connector lines.
        </description>
        <badSkins>BlackOps</badSkins>
        <badSkins>SilverWave</badSkins>
        <bestSkin>TreeFrog</bestSkin></Example>
    </children></ExampleFolder> 
<!-- Trees > Dragging -->
    <ExampleFolder title="Dragging" isOpen="false"><description>
        Trees have built-in drag and drop behaviors and tree-specific events.
    </description><children>
        <Example id="treeDragReparent"
            title="Drag reparent" jsURL="trees/interaction/dragReparent.js">
            <tabs><tab name="employeeData" url="trees/employeeData.js"/></tabs>
			<description>
            Try dragging employees under new managers.  Note that a position indicator line
            appears during drag, allowing employees to be placed in a particular order.
            </description></Example>
        <Example title="Drag nodes" id="treesDragTree" ref="dragTree"/>
        <Example title="Springloaded Folders" id="treesTreeDragReparent" ref="treeDragReparent">
		<description>
            Try dragging employees under new managers.  Note that closed folders automatically
            open if you hover over them momentarily.
            </description></Example>
        <Example title="Drop Events" id="treeDropEvents" jsURL="trees/interaction/dropEvents.js">
            <tabs>
                <tab name="supplyCategory" dataSource="supplyCategory"/>
                <tab name="supplyItem" dataSource="supplyItem"/>
            </tabs> 
            <description>
            Click on any category on the left to show items from that category on the right.  
            Drag and drop items from the list on the right into new categories in the tree on
            the left.
            </description></Example>
    </children></ExampleFolder> 

    <Example title="Cascading Selection"
             id="cascadingSelection"
             jsURL="trees/cascadingSelection.js">
			 <description>
        Tree selection can be automatically propagated up and down the tree. Select a
        parent or child node to see how other nodes are affected.
        </description></Example>
<!-- Trees > DataBinding -->
    <ExampleFolder id="treesDataBinding" title="Data binding" isOpen="false"><description>
        Trees can bind to DataSources and handle all the data formats that grids can, using
        additional properties to control tree structure, open state, and folders.
    </description><children>
        <Example title="Parent Linking"
                 id="parentLinking"
                 jsURL="trees/dataBinding/parentLinking.js">
				 <description>
            Tree data can be specified as a flat list of nodes that refer to each other by
            ID.  This format is also used for load on demand.
            </description></Example>
        <Example title="Children Arrays"
                 id="childrenArrays"
                 jsURL="trees/dataBinding/childrenArrays.js">
				 <description>
            Tree data can be specified as a tree of nodes where each node lists its children.
            </description></Example>
        <Example title="Load XML (Parent Linked)" id="loadXMLParent" jsURL="trees/dataBinding/loadXMLParentLinked.js">
            <tabs>
              <tab title="employeesXMLData" url="trees/dataBinding/employeesDataParentLinked.xml" canEdit="false" doEval="false"/>
            </tabs>
            <description><![CDATA[
            Tree data can be loaded in XML or JSON format.  For a "parent-linked" Tree, the
            <code>primaryKey</code> and <code>foreignKey</code> declarations in the DataSource
            control how nodes are linked together to form the tree structure.
            ]]>
            </description></Example>
        <Example title="Load XML (Child Arrays)" id="treeLoadXML" needXML="true" 
                 jsURL="trees/dataBinding/loadXMLChildrenArrays.js">
            <tabs>
              <tab title="employeesXMLData" url="trees/dataBinding/employeesDataChildrenArrays.xml" canEdit="false" doEval="false"/>
            </tabs>
            <description><![CDATA[
            Tree data can be loaded in XML or JSON format.  For a "children arrays" Tree, one
            DataSource field is marked <code>childrenProperty:true</code>, and the children of
            a node are expected to appear under the same-named XML element or JSON property.
            ]]>
            </description></Example>
        <Example title="Load on Demand" 
				 id="treeLoadOnDemand" 
				 jsURL="trees/dataBinding/loadOnDemand.js"
                 dataSource="employees">
				 <description>
            Begin opening folders and note the prompt which briefly appears during server
            fetches.  Trees can load data one folder at a time.  When a folder is opened for the first
            time, the tree asks the server for the children of the node just opened by passing
            the unique id of the parent as search criteria.
            </description></Example>
        <Example title="Initial Data &amp; Load on Demand"
                 id="initialData"
                 jsURL="trees/dataBinding/initialDataLOD.js"
                 dataSource="employees">
				 <description>
            Begin opening folders and note the load on demand behavior.
            
            Trees that use load on demand can optional specify an initial dataset set up front.  
            </description></Example>
<!--
        <Example title="Filtering" jsURL="trees/dataBinding/initialDataLOD.js"
                 dataSource="employees"><description>
            Trees datasets can be filtered just like list datasets.  The tree below shows only
            full time employees.
            </description></Example>
-->
        <Example title="Multi-Level LOD"
                 id="multiLevelLOD"
                 jsURL="trees/dataBinding/multiLevelLOD.js"
                 dataSource="employeesOpenNodes"
                 requiresModules="SCServer">
            <tabs>
                <tab title="EmployeesOpenNodesDMI.java"
                     url="serverExamples/largetrees/EmployeesOpenNodesDMI.java"
                     canEdit="false"
                     doEval="false" />
            </tabs>
            <description><![CDATA[
                Server logic can return multiple levels of the tree in response to a single
                request when using load on demand.
                <p>
                In the tree below, the nodes "Charles Madigen" and "Tammy Plant" have been
                returned by the server already open.  The server included the children of
                these nodes to avoid the need for the tree to immediately contact the server
                again to load children.
            ]]></description>
        </Example>
        <Example title="Paging for Children"
                 id="pagingForChildren"
                 jsURL="trees/dataBinding/pagingForChildren.js"
                 dataSource="hugeTree"
                 requiresModules="SCServer">
            <description><![CDATA[
                SmartClient supports loading children as they are scrolled into view, which is
                needed for very large trees where the number of children under a single node
                can be very large.
                <p>
                In the tree below, there are thousands of root-level nodes in the dataset
                stored on the server.  Scroll down to cause more nodes to be loaded from the
                server.
                <p>
                Open the folder "Root #4", to reveal another large set of children which can be
                incrementally loaded.  Within these children, open "First #5" to reveal another
                large set of children.
            ]]></description>
        </Example>
        <Example title="Multi-Level Child Paging"
                 id="multiLevelChildPaging"
                 jsURL="trees/dataBinding/multiLevelChildPaging.js"
                 dataSource="hugeTreeOpenNodes"
                 requiresModules="SCServer">
            <tabs>
                <tab title="HugeTreeOpenNodesDMI.java"
                     url="serverExamples/largetrees/HugeTreeOpenNodesDMI.java"
                     canEdit="false"
                     doEval="false" />
            </tabs>
            <description><![CDATA[
                Server logic can return multiple levels of the tree in response to a single
                request when using child paging.
                <p>
                In the tree below, the folders "Root #4" and "First #5" have been returned by
                the server already open.  The server included the children of these nodes to
                avoid the need for the tree to immediately contact the server again to load
                children.
                <p>
                However, both of these nodes have a very large number of children, so they only
                returned a portion of their children, using the <code>childCountProperty</code>
                to tell the tree the total number of children.
            ]]></description>
        </Example>
    </children></ExampleFolder>

    <Example title="Filtering" jsURL="trees/filtering.js" dataSource="employees">
        <description><![CDATA[
        Trees can be filtered without server-side support. Parent nodes can be dropped if they
        don't match the criteria or they can be retained if matching children are present.

        Click on the "filter" buttons to change the filter criteria.

        <br>

        Note that if "keep parents" is not checked, keepParentsOnFilter will be false for
        the TreeGrid in the sample, excluding all nodes not matching the criteria, and all
        nodes below the excluded nodes in the TreeGrid.  (So if the filter excludes the root
        node, no nodes will be visible.)
    ]]>
    </description></Example>

    <Example title="Sorting" jsURL="trees/sorting.js" dataSource="employees">
        <description>
        Trees sort per folder.  Click on the "Name" column header to sort alphabetically by
        folder name, or on the "Salary" column header to sort by Salary.
    </description></Example>

    <Example title="Editing" id="treesEditing" dataSource="employees"
             jsURL="trees/editing.js">
			 <description>
        Click on employees in the tree to edit them, and drag and drop employees to rearrange them.
        Choose an employee via the dropdown picklist menu to see that employee's direct reports in the ListGrid.  Changes
        made in the tree or ListGrid are automatically saved to the server and reflected in the other
        components.
    </description></Example>

    <Example title="Frozen Columns" id="freezeTree" dataSource="employees"
             jsURL="trees/freezeTree.js">
     <description><![CDATA[
     Setting <code>frozen:true</code> enables frozen columns for Trees.  Columns
     can be frozen and unfrozen by right-clicking on column headers.<br>
     Column resize, column reorder, drag and drop and load on demand all function normally.
     ]]></description></Example>

    <Example title="Miller Columns" id="millerColumns" dataSource="employees"
             jsURL="trees/millerColumns.js">
			 <description><![CDATA[
        The <code>ColumnTree</code> provides an alternate navigation paradigm for Tree data,
        sometimes called "Miller Columns" and seen in Apple&trade; iTunes&trade;.
        The <code>ColumnTree</code> provides identical data binding and load on demand facilities to
        normal TreeGrids.
        ]]></description></Example>
    
</children></ExampleFolder> <!-- closing parent folder: Trees -->

<!-- Cubes -->
<ExampleFolder
    title="Cubes"
    id="cubeGrid"
    icon="[ISO_DOCS_SKIN]/images/cube_blue.png"
    isOpen="false">
	<description>
    Multidimensional "cube" data sets as used in BI, Analytics and OLAP applications.
    Load-on-demand, drill-down, roll-up, in-browser dataset pivoting, multiple frozen panes, 
    resizing and reorder of fields, tree dimensions, chart generation, editing and other
    features.
</description><children>
    <Example
        title="Basic Cube"
        id="basicCube"
        requiresModules="Analytics"
        jsURL="cubes/basicCube.js"><tabs>
        <tab title="productData" url="cubes/productData.js"/>
        </tabs>
		<description><![CDATA[
        In this multi-dimensional dataset, each cell value has a series of attributes,
        called "facets", that appear as stacked headers labelling the cell value. 
        ]]></description></Example>
    <Example title="Analytics" id="cubeAnalytics" ref="analytics" requiresModules="Analytics"/>
</children></ExampleFolder>

<!-- ComboBox & Family -->
<ExampleFolder
    title="ComboBox &amp; Family"
    id="comboBoxAndFamily"
    icon="[ISO_DOCS_SKIN]/images/silkicons/combo_box.gif"
    isOpen="false"><description>
</description><children>
    <Example title="Data Binding" id="comboListComboBox" ref="variousControls"/>
    <Example title="Related Records" id="comboRelatedRecords" ref="relatedRecords"/>
    <Example title="Format Related Value" id="formatRelatedValue" 
            jsURL="combobox/formatRelatedValue.js" dataSource="employees">
		<description><![CDATA[
        When using an <code>optionDataSource</code> to allow a user to select a record from
        a related DataSource, it is possible to show a formatted value based on multiple 
        fields in the related record.  When you install a formatValue() method on a 
        <code>ComboBoxItem</code>, you can also set <code>formatOnBlur</code> which, as shown
        in the second item in the example, causes the formatting to be applied only when the 
        item does not have focus - formatting is removed when the item receives focus.
        ]]></description>
    </Example>
    <Example title="Dependent Selects" id="comboFormDependentSelects" ref="formDependentSelectsLocal"/>
    <Example title="Dropdown Grid" id="dropdownGrid" 
            jsURL="combobox/dropDownGrid.js">
        <tabs>
            <tab title="supplyItem" url="supplyItem.ds.xml"/>
        </tabs>
        <description><![CDATA[
        The SelectItem displays multiple fields in a ListGrid.
        Scroll to dynamically load more records.
        This pattern works with any DataSource.
        ]]></description>
    </Example>
    <Example title="Format Dropdown" id="formatDropdown" 
            jsURL="combobox/formatDropDown.js" dataSource="employees">
		<description><![CDATA[
        The dropdown list supports formatting APIs that can use multiple fields
        from related records.
        ]]></description>
    </Example>
    <Example title="Multi-Field Search" id="comboFilterRelated" ref="filterRelated"/>
    <Example title="Multi-Select" id="multiSelect"
        jsURL="combobox/multiSelect.js">
        <description>Demonstration of SelectItems with multiple selections.</description>
    </Example>
    <Example title="Styled ComboBox" id="comboComboBoxStyled" ref="comboBoxStyled"/>
    <Example title="Multi ComboBox" id="multiComboBoxItem"
             jsURL="combobox/multiComboBoxItem.js" dataSource="supplyItem">
        <description><![CDATA[
        A <code>MultiComboBoxItem</code> displays a selection of multiple values as
        buttons along with a combo box that is used to select additional values.
        Clicking on a button removes the value from the selection.
        <p>
        Pressing the Enter/Return key within the combo box selects the first matching value
        without leaving the field, allowing several values to be selected using only the
        keyboard. Pressing the Tab key within the combo box selects the first matching value
        and then leaves the field normally, taking focus to the next focusable item.
        ]]></description>
    </Example>
</children></ExampleFolder>



<!-- Forms -->
<ExampleFolder title="Forms" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/vcard_edit.png"><description>
    Form managers and input controls.
</description><children>

    <ExampleFolder title="Layout" isOpen="false" id="layout" ><description>
        A specialized form layout manager allows forms to grow into available space,
        hide sections, and span across tabs.
    </description><children>
        <Example title="Titles" jsURL="forms/layout/titles.js" id="formLayoutTitles" >
		<description>
            Click on "Swap Titles" to change title orientation.
            
            Form layout automatically places titles next to fields.  Left-oriented titles take
            up a column so that labels line up.  Top oriented titles don't.
            </description></Example>
        <Example title="Spanning" id="columnSpanning"  jsURL="forms/layout/spanning.js">
		<description>
            Drag resize the form from the right edge to see the effect of spanning.
            
            Specifying column widths and column spanning items allows for larger and smaller
            input areas.
            </description></Example>
        <Example title="Filling"
                 id="formLayoutFilling"
                 jsURL="forms/layout/filling.js">
				 <description>
            Click on the "Short Message" and "Long Message" buttons to change the amount of
            space available to the form.
            
            SmartClient form layouts allow for filling available space, even when
            available space cannot be known in advance because it is data-dependant.
            </description></Example>
        <Example title="Splitting"
                 id="formSplitting"
                 jsURL="forms/layout/valuesManager.js"
                 xmlURL="ValuesManager.xml"
                 showSkinSwitcher="true">
				 <description>
            Click "Submit" to jump to a validation error in the "Stock" tab.
            
            Forms which are split for layout purposes can behave like a single logical form for
            validation and saves.
            &lt;BR&gt;&lt;BR&gt;JS and XML tabs show two alternative versions of source, only one is
                required.
            </description></Example>
        <Example title="Sections"
                 id="formSections"
                 jsURL="forms/layout/sectionItem.js"
                 xmlURL="SectionItem.xml"
                 showSkinSwitcher="true">
				 <description>
            Click on "Stock" to reveal fields relating to stock on hand.
            &lt;BR&gt;&lt;BR&gt;JS and XML tabs show two alternative versions of source, only one is
                required.
            </description></Example>

        <Example id="formsValidationFieldBindingV" ref="validationFieldBinding" title="Data Binding"/>
    </children></ExampleFolder>

    <ExampleFolder title="Field Dependencies" isOpen="false">
	<description>
        Common field dependencies within a form, such as fields that are only applicable to
        some users, can be handled by specifying simple expressions.
    </description><children>
        <Example title="Show &amp; Hide" jsURL="forms/fieldDependencies/showAndHide.js" id="formShowAndHide">
		<description>
            Select "On order" to reveal the "Shipping Date" field.
            </description></Example>
        <Example id="fieldEnableDisable" title="Enable &amp; Disable" 
         jsURL="forms/fieldDependencies/enableAndDisable.js">
		 <description>
            Check "I accept the agreement" to enable the "Proceed" button.
            </description></Example>
        <Example title="Conditionally Required"
                 id="conditionallyRequired" jsURL="forms/fieldDependencies/conditionallyRequired.js">
				 <description>
            Select "No" and click the "Validate" button - the reason field becomes required.
            </description></Example>
        <Example title="Match Value"
                 id="matchValue"
                 jsURL="forms/fieldDependencies/matchValue.js">
				 <description>
            Try entering mismatched values for "Password" and "Password Again", then click
            "Create Account" to see a validation error.
            </description></Example>
        <Example title="Dependent Selects (Local)"
                 id="formDependentSelectsLocal"
                 jsURL="forms/fieldDependencies/dependentSelectsLocal.js">
			<descriptionHeight>110</descriptionHeight>
            <description><![CDATA[
            Select a "Division" to cause the "Department" select to be 
            populated with departments from that division.]]>
            </description></Example>
        <Example title="Dependent Selects (Databound)"
                 id="formDependentSelectsDatabound"
                 jsURL="forms/fieldDependencies/dependentSelectsDatabound.js">
            <tabs>
                <tab name="supplyItem" dataSource="supplyItem"/>
                <tab name="supplyCategory" dataSource="supplyCategory"/>
            </tabs>
			<descriptionHeight>110</descriptionHeight>
            <description><![CDATA[
            This example demonstrates two select items, both of which load data "on-the-fly" from
            a DataSource, where the "Category" drop-down controls the list of available items
            in the "Item" drop-down.  Try selecting a value in the "Category" drop-down list to change the set of options 
            available in the "Item" drop-down.]]>
            </description></Example>

    </children></ExampleFolder>

    
    <ExampleFolder title="Form Controls" isOpen="false"><description>
        The form has built-in editors and pickers for common types such as numbers and dates,
        as well as the ability to use the databinding framework to pick from lists and trees of
        related records.
    </description><children>
        <Example title="Various Controls" id="variousControls"
                 aliases="textItem,textAreaItem,spinnerItem,sliderItem,checkboxItem,listComboBox,colorItem"
                 jsURL="forms/dataTypes/variousControls.js" 
                 dataSource="supplyItem">
          <descriptionHeight>130</descriptionHeight>
			<description>
              Demonstration of several form controls. &lt;P&gt;
              For the ComboBoxes at the bottom, start typing in either field to see a list of matching options.
              The field labelled "Item Name" retrieves options dynamically from the SupplyItem DataSource.
            </description>
        </Example>
        <Example title="Text - Masked" id="maskedTextItem" descriptionHeight="350"
                 jsURL="forms/dataTypes/maskedTextItem.js"><description><![CDATA[
            <p>TextItems support a masked entry system to restrict and format data entry.</p>
            <p>Overview of available mask characters</p>
            <p><table class="normal">
            <tr>
                <th>Character</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>0</td>
                <td>Digit (0 through 9) or plus [+] or minus [-] signs</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Digit or space</td>
            </tr>
            <tr>
                <td>#</td>
                <td>Digit</td>
            </tr>
            <tr>
                <td>L</td>
                <td>Letter (A through Z)</td>
            </tr>
            <tr>
                <td>?</td>
                <td>Letter (A through Z) or space</td>
            </tr>
            <tr>
                <td>A</td>
                <td>Letter or digit</td>
            </tr>
            <tr>
                <td>a</td>
                <td>Letter or digit</td>
            </tr>
            <tr>
                <td>C</td>
                <td>Any character or space</td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td>&lt;</td>
                <td>Causes all characters that follow to be converted to lowercase</td>
            </tr>
            <tr>
                <td>&gt;</td>
                <td>Causes all characters that follow to be converted to uppercase</td>
            </tr>
            </table></p>
            <p>Any character not matching one of the above mask characters or that is
            escaped with a backslash (\) is considered to be a literal.</p>
            <p>Custom mask characters can be defined by a standard regular expression
            character set or range. For example, a hexadecimal color code mask could be:
            <UL>
                <LI>Color: \#>[0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F][0-9A-F]</LI>
            </UL></p>
            ]]></description></Example>
        <Example title="Date" id="dateItem" jsURL="forms/dataTypes/dateItem.js" xmlURL="DateItem.xml">
            <description>
            DateItems support direct or pickList-based input of dates, and have a built-in
            pop-up day picker.
            &lt;BR&gt;&lt;BR&gt;JS and XML tabs show two alternative versions of source, only one is
             required.
            </description></Example>
        <Example title="Time" id="timeItem" jsURL="forms/dataTypes/timeItem.js" xmlURL="TimeItem.xml">
            <descriptionHeight>180</descriptionHeight>
			<description>
            TimeItem allows the user to edit a logical time value (stored internally using a JavaScript date
            object). This item understands most standard formats (try entering "14:00" or "2pm", for example).
            &lt;P&gt;
            TimeItems have a second mode where the user picks hour, minute and second from drop-down controls.
            The control can be configured to limit choices of minutes or hours, which can be useful for
            scheduling applications.  Note in the control below, choices have been limited to every 15 minutes.
            &lt;BR&gt;&lt;BR&gt;JS and XML tabs show two alternative versions of source, only one is
             required.
            </description></Example>

        <Example title="List - Select"
                 id="selectItem"
                 jsURL="forms/dataTypes/listSelect.js">
				 <description>
            Note the icons and customized text styling.  Click to reveal the options and note
            the drop shadow.  
            
            The SmartClient SelectItem offers more powerful and consistent control over
            appearance and behavior than the HTML &amp;lt;SELECT&amp;gt; element.
            </description></Example>
        <Example title="List - Select Multiple" id="formControlMultiSelect" ref="multiSelect" />
        <Example id="comboBoxStyled" title="Combo Box - Styled"
                 jsURL="forms/dataTypes/comboBoxStyled.js" dataSource="supplyItem">
				 <description>
           Combo box rows can be styled via HTML to display data in almost any 
           way imaginable. Row hovers are also customized in this example.
        </description></Example>
        <Example id="relatedRecords" title="List - Related Records" showSkinSwitcher="true"
                 jsURL="forms/dataTypes/relatedRecords.js" dataSource="supplyItem">
				 <description>
            Open the picker in either form to select an item to order from the
            "supplyItem" DataSource.  The picker on the left stores the "itemId" from the
            related "supplyItem" records.  The picker on the right stores the "SKU" while
            displaying multiple fields.  Scroll to dynamically load more records.  
            This pattern works with any DataSource.  
            </description></Example>
            
        <Example id="filterRelated" title="List - Multi-Field Search" showSkinSwitcher="true"
                 jsURL="forms/dataTypes/filterPickList.js" dataSource="supplyItem" descriptionHeight="100"><description>
            Click on the SelectItem on the left to see the full set of data. Enter filter
            criteria directly on the drop-down list in either field to filter the set of
            options down to a managable size.&lt;P&gt;
            Now move focus to the ComboBoxItem and start typing. The set of options displayed are
            automatically filtered against both fields as typing occurs. Tab or Enter will complete selection.
            </description></Example>

        <Example title="Tree"  jsURL="forms/dataTypes/pickTree.js" xmlURL="PickTree.xml" id="pickTree" showSkinSwitcher="true"
                 dataSource="supplyCategory"><description>
            Click on "Department" or "Category" below to show hierarchical menus.  The
            "Category" menu loads options dynamically from the "SupplyCategory" DataSource.
            &lt;BR&gt;&lt;BR&gt;JS and XML tabs show two alternative versions of source, only one is
             required.
            </description></Example>

        <Example title="List - Select Other" visibility="sdk" 
                 xmlURL="SelectOtherItem.xml"><description>
            Select "Other.." from the drop down to enter a custom value.
            &lt;BR&gt;&lt;BR&gt;This example source is written in XML. 
            SmartClient supports code written directly in JavaScript, or in this declaritive XML
            format.
            </description></Example>
        <Example id="fControlsRichTextEditor" ref="RichTextEditor" title="HTML"/> 
        <!--
        <Example id="fckEditor" title="fckEditor" jsURL="extending/fckEditorTest.js" requiresModules="Fckeditor">
            <description>
                Third party ajax components can be integrated into smartclient and used within
                smartclient components. In this example, the fckEditor component is integrated
                into DynamicForm, allowing the fckEditor to be a valid form field.
            </description>
            
        </Example>
	-->
	    <Example title="CanvasItem" jsURL="forms/dataTypes/canvasItem.js" dataSource="countryDS" id="canvasItem">
	        <descriptionHeight>140</descriptionHeight>
			<description>
			<![CDATA[
        A special type of form control called a <code>CanvasItem</code> allows any kind of SmartClient widget to
                participate in form layout and values management.
		<p>          
                Drag resize the form (blue bordered area) - notice how the embedded ListGrid fills the available space.
        <p>
                The embedded ListGrid starts out showing the initial value provided to the form ("Germany").
                Click the button titled "Set Value: France" to provide a new value to the form, causing the
                CanvasItem to display this value.
        <p>
                Click on any country in the list - the form picks up the value and fires standard change
                events, causing new values to be displayed in a Label.
        <p>
                This CanvasItem provides functionality similar to an HTML &lt;select multiple&gt;, however, because it's
                based on a ListGrid, any ListGrid behavior could be added (data paging, drag and drop, hovers,
                inline search, inline editing, grouping, etc).
        ]]>          
	        </description>
	    </Example>
	    <Example title="CanvasItem - Nested Editor"
	        jsURL="forms/dataTypes/nestedEditing.js"
	        id="nestedEditor">
			 <descriptionHeight>140</descriptionHeight>
	        <description>	
			<![CDATA[
        This example shows a reusable <code>CanvasItem</code> that edits nested data structures.
        <p>
                Here, a Hibernate entity representing an Order contains OrderItems - in the
                Record for an Order, value of the field "items" in an Array of Records representing OrderItems.
        <p>
                The <code>CanvasItem</code> embeds an editable ListGrid to provide an editing interaction for the
                OrderItems right in the midst of the form.  It can be used with any DataSource that
                has nested records.
        ]]>     
	        </description>
	        <tabs>
                <tab title="masterDetail_orderHB" dataSource="masterDetail_orderHB" canEdit="false"/>
                <tab name="masterDetail_orderItem" dataSource="masterDetail_orderItemHB" canEdit="false" />
            </tabs>
	    </Example>
    </children></ExampleFolder>

    <ExampleFolder id="formsvalidation" title="Validation" isOpen="false"><description>
        Typical validation needs are covered by validators built-in to the SmartClient
        framework.  Validators can be combined into custom type definitions which are reusable
        across all components.
    </description><children>

        <ExampleFolder id="formsvalidationCopy" title="Server-based" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png"><description>
            The SmartClient Server provides powerful support for server-based validation.
        </description><children>
        <Example title="Single Source" id="formsSingleSourceValidation" ref="DBsingleSourceValidation" />
        <Example title="Unique Check" id="formsUniqueCheckValidation" ref="DBuniqueCheckValidation" />
        <Example title="Velocity Expression" id="formsVelocityValidation" ref="DBvelocityValidation" />
        <Example title="Inline Script" id="formsInlineScriptValidation"  ref="DBinlineScriptValidation" />
        <Example title="DMI Validation" id="formsDmiValidation"  ref="DBdmiValidation" />
        <Example title="Related Records" id="formsHasRelatedValidation" ref="DBhasRelatedValidation" />
        <Example title="Blocking Errors" id="formsBlockingErrors" ref="DBblockingErrors" />
        </children></ExampleFolder>
		
		<Example title="Type" id="formsValidationType" ref="DBvalidationType" />j
        <Example title="Built-ins" id="formsValidationBuiltins" ref="validationBuiltins" />
        <Example title="Regular Expression" id="formsRegularExpression" ref="DBregularExpression" />
        <Example title="Value Transform" id="formsValueTransform" ref="DBvalueTransform" />
        <Example title="Custom Types" id="formsCustomSimpleType" ref="DBcustomSimpleType" />
        <Example title="Customized Binding" id="formsValidationFieldBinding" ref="validationFieldBinding" />
</children></ExampleFolder>
    <ExampleFolder title="Details" isOpen="false"><description>
        Hovers and hints explain the form to the user.  Icons provide an easy extension point
        for help, custom pickers and other extensions.  KeyPress filtering allows character
        casing to be forced on entry or invalid keystrokes to be ignored.
    </description><children>
        <Example title="Icons" id="formIcons" jsURL="forms/layout/icons.js">
		<description>
            Click on the help icon below to see a description for severity levels.  Form items
            can show an arbitrary number of icons to do whatever you need.
            </description></Example>
        <Example title="Hovers" jsURL="forms/details/hovers.js" id="itemHoverHTML">
		<description>
            Hover anywhere over the field to see what the current value means.  Change the
            value or disable the field to see different hovers.  Note that the hovers contain
            HTML formatting.  
            </description></Example>
        <Example title="Hints" id="formHints" jsURL="forms/layout/hints.js">
		<description>
            Hints provide guidance to the user filling out the form.  In this case, the "MM/YYYY"
            hint tells the user the expected format for the free-form date field. Note both
            trailing and in-field styles are shown.
            </description></Example>
        <Example title="KeyPress Filters" id="formFilters" 
                 jsURL="forms/details/filters.js">
				 <description>
            KeyPress filters help prevent the user from entering invalid characters.
            Additionally, character casing can be forced to either upper or lowercase.
            </description></Example>
    </children></ExampleFolder>

</children></ExampleFolder>

<!-- Calendars -->
<ExampleFolder title="Calendars" isOpen="false" showSkinSwitcher="true" icon="[ISO_DOCS_SKIN]/images/silkicons/cal.png">
<description>Customizable calendars that display events in day, week, and month views.</description>
<children>
    <Example id="simpleCalendar" title="Simple Calendar" jsURL="calendar/simpleCalendar.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="eventData" url="calendar/calendarData.js"/>
        </tabs>
        <description>
            This calendar is bound to an array of event data. Drag events to alter their start times, and
            resize events to alter their durations. Click and drag in an empty cell to create new events,
            or click on an existing event to edit it. Notice how the red event can't be edited. This has 
            been specified within the event data itself (see the "eventData" tab below).
        </description>
    </Example>
    <Example id="databoundCalendar" title="Databound Calendar" jsURL="calendar/databoundCalendar.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="eventData" url="calendar/calendarData.js"/>
        </tabs>
        <description>
            This calendar is bound to a dataSource. Drag events to alter their start times, and
            resize events to alter their durations. Click and drag in an empty cell to create new events,
            or click on an existing event to edit it. Notice how the red event can't be edited. This has 
            been specified within the event data itself (see the "eventData" tab below).
        </description>
    </Example>
    <Example id="compactCalendar" title="Compact Calendar" jsURL="calendar/compactCalendar.js" 
         requiresModules="Calendar">
        <tabs>
            <tab title="eventData" url="calendar/calendarData.js"/>
        </tabs>
        <description>
            Hover over the days with the check icon in them to see the events for those days.
            Use the "Next" and "Previous" arrows to change months.
        </description>
    </Example>
    <Example id="workdayCalendar" title="Workday Calendar" jsURL="calendar/workdayCalendar.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="eventData" url="calendar/calendarData.js"/>
        </tabs>
        <description>
            The calendar can focus in on workday hours, giving a clearer view of events that occur
            during the working day. The boundaries of the workday itself can also be customized.
        </description>
    </Example>
    <Example id="customCalendar" title="Custom Event Editing" jsURL="calendar/customEventEditing.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="eventData" url="calendar/calendarData.js"/>
        </tabs>
        <description>
            Click in an empty cell or in an event to see custom fields in the quick event editor and in 
            the full event editor. Notice how the red event can't be edited. This has been 
            specified within the event data itself (see the "eventData" tab below).
        </description>
    </Example>
    <Example id="eventAutoArrange" title="Event Auto-Arranging" jsURL="calendar/eventAutoArrange.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="eventOverlapData" url="calendar/calendarOverlapData.js"/>
        </tabs>
        <description>
            The calendar can automatically arrange events that share time so that each is always
            fully visible at its proper location.  Drag one event onto or away from another to 
            see the effect.
        </description>
    </Example>
    <Example id="eventOverlapping" title="Event Overlapping" jsURL="calendar/eventOverlapping.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="eventOverlapData" url="calendar/calendarOverlapData.js"/>
        </tabs>
        <description>
		<![CDATA[
        When <code>eventAutoArrange</code> is true, the Calendar can overlap concurrent 
        events slightly.  The z-order is from left to right and the overlap-size is a 
        percentage of event-width (see the "JS" tab).  If two events start at exactly the 
        same time, the default behavior is to reject the overlap to avoid the first event's 
        close button from being hidden by the second event (see the "JS" tab).  This can be seen
        by dropping one event onto the start-time of another below.
        ]]>             
        </description>
    </Example>
    <Example id="simpleDayLanes" title="Day Lanes" jsURL="calendar/dayLanes.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="taskData" url="calendar/dayLaneData.js"/>
        </tabs>
        <description>
            This example uses individual Day Lanes to show the daily schedules of a number of
            staff simultaneously. 
        </description>
    </Example>
    <Example id="simpleTimeline" title="Simple Timeline" jsURL="calendar/simpleTimeline.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab title="taskData" url="calendar/taskData.js"/>
        </tabs>
        <description>
            This example uses a Timeline, a simple subclass of Calendar, to show a variety of
            development tasks assigned to developers over a 3-week period.  This timeline is 
            bound to an array of event data. Drag events to alter their start dates, and resize 
            events to alter their durations. Hover over an event to see it's details or click 
            to edit them.
        </description>
    </Example>
    <Example id="databoundTimeline" title="Databound Timeline" jsURL="calendar/databoundTimeline.js" 
        cssURL="calendar/calendar.css" requiresModules="Calendar">
        <tabs>
            <tab name="tasks" dataSource="tasks"/>
        </tabs>
        <description>
            This example uses a Timeline, a simple subclass of Calendar, to show a variety of
            development tasks assigned to developers over a 3-week period.  This timeline is 
            bound to an SQL DataSource and demonstrates drag-and-drop editing and saving to a 
            DataSource.  Drag events to alter their start dates, and resize events to alter 
            their durations. Hover over an event to see it's details or click to edit them.
        </description>
    </Example>
    </children>
</ExampleFolder>

<!-- Layout -->
<ExampleFolder title="Layout" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/application_side_list.png"><description>
    Liquid layout managers and user interface containers.
</description><children>
    <Example title="Filling" jsURL="forms/layout/filling.js">
	<description>
        Click on the "Short Message" and "Long Message" buttons to change the amount of
        space available to the form.
        
        Layouts automatically react to resizes and re-apply the layout policy.
        </description></Example>
    <Example title="Nesting"
             id="layoutNesting"
             jsURL="layout/nesting.js"
             showSkinSwitcher="true">
			 <description>
        Use the resize bars to reallocate space between the 3 panes.
        
        Layouts can be nested to create standard application views.  Resize bars are built-in.
        </description></Example>
    <Example title="User Sizing" id="userSizing" jsURL="layout/userSizing.js">
	<description>
        Resize the outer frame to watch "Member 1" and "Member 2" split the space.  Now resize
        either member and resize the outer frame again.
        
        Layouts track sizes which have been set by user action and respect the user's settings.
        </description></Example>
    <Example title="Center Align" id="layoutCenterAlign" jsURL="layout/centerAlign.js"
        icon="[ISO_DOCS_SKIN]/images/silkicons/show_table_row.png" >
        <descriptionHeight>160</descriptionHeight>
        <description>
          <![CDATA[
            <p>
              To center components within layouts, set <code>layout.align</code> to center along the
              length axis (vertical axis for a <code>VLayout</code>, horizontal axis for an 
              <code>HLayout</code>).
            </p><p>
              To center along the breadth axis (horizontal axis for a <code>VLayout</code>, 
              vertical axis for an <code>HLayout</code>), set <code>member.layoutAlign</code> on each 
              member that should be centered, or set <code>layout.defaultLayoutAlign</code> to center 
              all members.
            </p><p>
              Combine both settings to center along both axes.
            </p><p>
              You can also use LayoutSpacers to center components.  This is particularly useful where 
			  there is a layout that has something that needs to be centered in the remaining space after
			  other components have taken the space they require.
            </p>
          ]]>
        </description>
    </Example>
	<Example
        title="Snap To"
        id="snapTo"
        jsURL="layout/snapto.js">
		<descriptionHeight>120</descriptionHeight>
		<description>
		<![CDATA[
        <p>
        Snap-to positioning can be used to place components along a specific edge or corners of a 
		container, or centered in the container.
		The <code>snapTo</code> allows for components to be attached to the edge of the container and
		<code>snapOffsetLeft</code> and <code>snapOffsetTop</code> allows for components to be placed
		at a specific pixel or percentage offset relative to a snap position. 
		</p><p>
		Drag resize the containers below to see a variety of snap-to positioning behaviors. 
		</p>
		]]>
        </description>
	</Example>
	 <Example
        title="Snap-to-grid Dragging"
        id="dragSnapTo"
        showSkinSwitcher="true"
        jsURL="dragdrop/dragSnapTo.js">
		<description>
        Drag the box around the grid. It will snap into alignment according to the values 
        set in the radio buttons below. Snap-to-grid dragging can be enabled separately for 
        moving and resizing. Toggle the checkboxes to see this working.
        </description>
		</Example>

    <ExampleFolder title="Portal Layout" showSkinSwitcher="true" isOpen="false"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png" >
        <description>
           A Portal Layout allows the user to arrange Portlets via drag-and-drop to create
           customized environments.
        </description>
        <children>
            <ExampleFolder title="Drag Rearrange" id="portalDragRearrangeSamples" isOpen="false"
                icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png">
                <children>
                    <Example id="repositionPortlets" title="Repositioning" jsURL="layout/portal/rearranging.js">
                        <description>
                            Rearrange Portlets via drag-and-drop. Try dragging a Portlet by its
                            title bar to a new position above or below another Portlet. Also, 
                            drop a Portlet beside another Portlet to form a row.
                        </description>
                    </Example>
                    <Example id="portalCrossWindowDrag" title="Cross-Window Drag" jsURL="layout/portal/crossWindowDrag.js">
                        <tabs>
                            <tab title="exampleData" url="dragdrop/dragList_data.js"/>
                        </tabs>
                        <description>
                            This sample demonstrates dragging a portlet from one PortalLayout to another PortalLayout
                            in a different browser window.
                            &lt;p&gt;
                            Open a second browser window (or browser tab) with this same sample running.  Drag any
                            portlet to the portal layout shown in the other browser window, then drop.
                            &lt;p&gt;
                            Depending on your browser and operating system, it may be necessary to hover over the
                            second browser tab or over an application icon to cause the tab or browser to come to
                            the front so you can drop on it.
                            &lt;p&gt;
                            Data is transferred directly from one browser instance to another using HTML5
                            techniques.  This allows you to build applications that span multiple browser windows or
                            tabs, which makes it easier to take advantage of multiple physical screens.
                        </description>
                    </Example>
                </children>
            </ExampleFolder>
            <Example title="Add/Remove Columns" id="addRemovePortalColumn" jsURL="layout/portal/addingRemovingColumns.js">
                <description>
                    By default, a PortalLayout displays menus allowing the user to
                    add or remove columns. Try adding a column and moving some Portlets to the new column.
                </description>
            </Example>
            <ExampleFolder title="Portlet Contents" icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png">
                <description>
                    Create the contents of Portlets like Windows, or by dragging components
                    in. <!-- or by using Palettes. -->
                </description>
                <children>
                    <Example title="Window contents" jsURL="layout/portal/windowContents.js">
                        <description>
                            A Porlet is a subclass of Window, so its contents can be defined in any of the
                            ways that work for Windows.
                        </description>
                    </Example>
                    <Example title="Dragging components" id="portletContentsDragging" jsURL="layout/portal/draggingComponents.js">
                        <tabs>
                            <tab title="exampleData" url="dragdrop/dragList_data.js"/>
                        </tabs>
                        <description>
                            Components can be dragged into PortalLayouts, creating Portlets on the fly. Try
                            selecting some records in the ListGrid and drag them into the Portal Layout.
                            A new Portlet will be created on the fly containing the records that were dragged.
                            Try dragging the chess pieces to the layout -- they will be moved into
                            a Portlet created on the fly.
                        </description>
                    </Example>
                    <Example title="Palettes" jsURL="layout/portal/palettes.js" requiresModules="Tools" needEditMode="true">
                        <description>
                            With the Dashboard &amp; Tools module, you can create palettes from which to drag Portlets.
                            Try dragging from the Tree Palette to the Portal Layout ... Portlets will be
                            created on the fly.
                        </description>
                    </Example>
                </children>
            </ExampleFolder>
            <ExampleFolder title="Sizing" icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png">
                <description>
                    Portal Layouts arrange the size of Portlets.
                </description>
                <children>
                    <Example id="portalLayoutColumnHeight" title="Column height" jsURL="layout/portal/columnHeight.js">
					<descriptionHeight>100</descriptionHeight>
                        <description><![CDATA[
                            The Portlets on the left have a height which requires the PortalLayout
                            to scroll. By default, each column scrolls individually. If the large Portlets are dragged
                             to the right column, then it will scroll. PortalLayouts respect the height that has been set for Portlets
							 and scroll columns if necessary.
                            <p>
                            If it is preferred to have the whole PortalLayout scroll together, try setting the
                            columnOverflow to "visible". Other combinations of <code>overflow</code> and <code>columnOverflow</code>
                            are also possible.
                        ]]></description>
                    </Example>
                    <Example title="Column width" id="portalColumnWidth" jsURL="layout/portal/columnWidth.js">
                        <descriptionHeight>160</descriptionHeight>
                        <description><![CDATA[
                            By default, PortalLayouts make their columns equal width. Resize bars can be displayed
                            to allow the user to change column widths.
                            <p>
                            Try dragging the resize bar, and see how the columns change width.
                            <p>
                            Try making both columns smaller. By default, the PortalLayout will extend
                            the last column to fill the available width (preventing underflow). This behavior can
                            be changed with the <code>preventUnderflow</code> attribute.
                            <p>
                            Try making both columns bigger. By default, the PortalLayout will scroll
                            if the columns overflow the available width.
                        ]]></description>
                    </Example>
                    <Example title="Portlet height" id="portletHeight" jsURL="layout/portal/portletHeight.js">
                        <description><![CDATA[
                            PortalLayouts distribute available column height amongst Portlets equally,
                            or by the sizes that are specified (like an ordinary Layout).
                            <p>
                            By default, the PortalLayout will add space to the last Portlet in a column,
                            if needed to fill that column. This can be changed by turning 
                            <code>preventColumnUnderflow</code> off.
                        ]]></description>
                    </Example>
                    <Example title="Portlet width" id="portletWidth" jsURL="layout/portal/portletWidth.js">
                        <description><![CDATA[
                            PortalLayouts distribute available column width amongst Portlets equally,
                            or by the sizes that are specified (like an ordinary Layout).
                            <p>
                            By default, the PortalLayout will add width to the last (or only) Portlet 
                            in a row in order to always fill the row. This can be changed by turning
                            <code>preventRowUnderflow</code> off.
                        ]]></description>
                    </Example>
                    <Example title="Portlet resizing" id="resizingPortlets" jsURL="layout/portal/portletResizing.js">
                        <descriptionHeight>160</descriptionHeight>
                        <description><![CDATA[
                            Portlets can be drag-resized by their edges (just like resizing Windows).
                            <p>
                            Try changing the height of Portlet 4.  Notice how
                            all the Portlets in that row change height
                            together. See how each column will scroll if the
                            height of Portlets is resized to exceed the
                            available space.
                            <p>
                            Try changing the width of Portlet 1. Notice how the
                            width of the entire column changes. Now try
                            changing the width of Portlet 2. See how it takes
                            width from Portlet 3 rather than changing the
                            column's width.
                        ]]></description>
                    </Example>
                </children>
            </ExampleFolder>
            <Example id="portalLayout" title="Portlet Animation" jsURL="layout/portal/portal.js">
                <description>
                    Click on the portlet list to the left to create portlets and see them animate into place. Drag portlets around to new locations and they animate into place. 
                </description>
            </Example>
            <Example id="portletEvents" title="Portlet Events" jsURL="layout/portal/portletEvents.js">
                <description>
                     Explore events fired by the portal and information passed to the event handler.
                </description>
            </Example>
        </children>
    </ExampleFolder>

    <ExampleFolder title="Form Layout" isOpen="false" id="formslayout" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/vcard_edit.png"><description>
        A specialized form layout manager allows forms to grow into available space,
        hide sections, and span across tabs.
    </description><children>
        <Example title="Titles" id="layoutFormTitles" ref="formLayoutTitles" />
        <Example title="Spanning" id="layoutColumnSpanning" ref="columnSpanning" />
        <Example title="Filling"  id="layoutFormFilling" ref="formLayoutFilling" />
        <Example title="Splitting" id="layoutFormSplitting" ref="formSplitting" />
        <Example title="Sections" id="layoutFormSections" ref="formSections" />
        <Example id="layoutValidationFieldBinding" ref="validationFieldBinding" title="Data Binding"/>
    </children></ExampleFolder>


    <ExampleFolder title="Windows" isOpen="false" showSkinSwitcher="true" icon="[ISO_DOCS_SKIN]/images/silkicons/application_cascade.png">
    <description>
        Windows for dialogs, wizards, tools and free-form application layouts.
    </description><children>
        <Example title="Auto Size" 
                 id="windowAutosize"
                 jsURL="layout/window/autoSize.js">
				 <description>
				 <![CDATA[
                            Windows can <code>autoSize</code> to content or can dictate the content's size.
                        ]]>
            
            </description></Example>
        <Example title="Modality" id="windowsModality" ref="modality"/>
        <Example title="Dragging" id="windowsDragging" jsURL="layout/window/dragging.js">
		<description>
            Grab the window by its title bar to move it around.  Resize it by the right or
            bottom edge.
            </description></Example>
        <Example title="Minimize" id="winWindowMinimize" ref="windowMinimize"/>
        <Example title="Header Controls"
                 id="windowHeaderControls"
                 jsURL="layout/window/controls.js">
				 <description>
            Header controls can be reordered and custom controls added.
            </description></Example>
        <Example title="Footer"
                 id="windowFooter"
                 jsURL="layout/window/footer.js">
				 <description>
            Windows support a footer with a visible resizer and updateable status bar.
            </description></Example>
    </children></ExampleFolder>

    <ExampleFolder title="Tabs" isOpen="false" showSkinSwitcher="true" icon="[ISO_DOCS_SKIN]/images/silkicons/tab.png">
    <description>
        Tabs for sectioning applications and forms.
    </description><children>
        <Example title="Orientation"
                 id="tabsOrientation"
                 jsURL="layout/tabs/orientation.js">
				 <description>
            Tabs can be horizontally or vertically oriented.  To select tabs, click on them, or
            click on the "Select Blue" and "Select Green" buttons.
            </description></Example>
        <Example title="Align" id="tabsAlign" jsURL="layout/tabs/align.js">
		<description>
            Tabs can be left or right aligned (for horizontal tabs) or top or bottom aligned
            (for vertical tabs)
            </description></Example>
        <Example title="Add and Remove"
                 id="tabsAddAndRemove"
                 jsURL="layout/tabs/addAndRemove.js">
				 <description>
            Click on "Add Tab" and "Remove Tab" to add and remove tabs.   When too many
            tabs have been added to display at once, a tab scrolling interface will appear.
            </description></Example>
        <Example title="Closeable Tabs"
                 id="closeableTabs"
                 jsURL="layout/tabs/closeableTabs.js">
				 <description>
            Click on the close icons to close tabs.  Tabbed views can have any mixture of
            closeable and permanent tabs.
            </description></Example>
        <Example title="Title Change"
                 id="titleChange"
                 jsURL="layout/tabs/titleChange.js">
				 <description>
            Titles can be changed on the fly.  Type in a name to see the "Preferences" tab
            change its title to include that name.  Note that the tab automatically sizes to
            accommodate the longer title. Automatic sizing also happens at initialization.
            </description></Example>
        <Example title="User-Editable Titles"
                 id="userEditableTitles"
                 jsURL="layout/tabs/userEditableTitles.js">
				 <description><![CDATA[
            Optionally, titles can be directly edited in place by the application's end users.
            This TabSet specifies <code>canEditTabTitles</code>. Double-click a tab title to 
            edit it.  Individual tabs can override the TabSet standard behavior. In this example, the 
            "Can't change me" tab has <code>canEditTitle</code> set to false.  Cancelling the user changes can also be implemented.
			Try editing the "123-Yellow" tab to a title that doesn't begin with "123-" to see this.
            ]]></description></Example>
        <Example title="Selection and Deselection Handling"
                 id="selectionEvents"
                 jsURL="layout/tabs/selectionEvents.js">
				 <description>
				 <![CDATA[
            Developers can apply custom event handler logic to fire when the user selects tabs.
            The preferences pane in this example has a <code>tabSelected</code> handler which will create
            its pane lazily the first time the tab is selected, and a <code>tabDeselected</code> handler
            which returns false to stop the user changing tabs if the form item is unchecked.
            ]]>
            </description></Example>
        <Example title="View Loading" id="viewLoading"
                 needXHR="true" jsURL="advanced/viewLoading.js">
				 <description>
            Click on "Tab2" to load a grid view on the fly.
            
            Declarative view loading allows extremely large applications to be split into
            separately loadable chunks, and creates an easy integration path for applications
            with server-driven application flow.
            </description>
            <tabs><tab title="loadedView" url="advanced/loadedView.js" doEval="false" canEdit="false"/></tabs>
        </Example>
    </children></ExampleFolder>
            

    <ExampleFolder title="Sections" isOpen="false" showSkinSwitcher="true" icon="[ISO_DOCS_SKIN]/images/silkicons/stack_panel.gif">
    <description>
        Sections (also called Accordions) label sections of the application
        and allow users to hide or resize sections.
    </description><children>
        <Example title="Expand / Collapse"
                 id="sectionsExpandCollapse"
                 jsURL="layout/sections/expandCollapse.js">
				 <description>
            Click on any section header showing an arrow to expand and collapse it (the "Green 
            Cube" section is marked not collapsible).  Click on the "Expand Blue" and 
            "Collapse Blue" buttons to expand and collapse sections externally.
            </description></Example>
        <Example title="Resize Sections"
                 id="resizeSections"
                 jsURL="layout/sections/resizeSections.js">
				 <description>
            Drag the "Help 2" header to resize sections, or press "Resize Help 1" to resize to
            fixed height.  The "Blue Pawn" section is marked not resizeable.
            </description></Example>
        <Example title="Custom Controls"
                  id="sectionControls"
                  jsURL="layout/sections/sectionControls.js">
				  <description>
            Custom controls may appear on section headers.
            </description></Example>
        <Example title="Add and Remove"
                  id="sectionsAddAndRemove"
                  jsURL="layout/sections/addAndRemove.js">
				  <description>
            Press the "Add Section" and "Remove Section" buttons to add or remove sections.
            </description></Example>
        <Example title="Show and Hide"
                 id="sectionsShowAndHide"
                 jsURL="layout/sections/showAndHide.js">
				 <description>
            Press the "Show Section" and "Hide Section" buttons to reveal or hide the Yellow
            Section.  Showing and hiding sections makes a SectionStack reusable for slightly
            different purposes, hiding or revealing relevant sections.
            </description></Example>
    </children></ExampleFolder>

</children></ExampleFolder>


<!-- Data Binding -->
<ExampleFolder title="Data Binding" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"><description>
    Data binding allows multiple components to share a central definition of an object (called
    a DataSource), so that all components can consistently retrieve, display, edit, validate
    and save objects of that type.
</description><children>

    <!-- Could link to Grid and Form data types, but would be deepest hierarchy anywhere, and
         only two items
    <ExampleFolder title="Data types" isOpen="false"><description>
    </description><children>
    </children></ExampleFolder>
    -->

    <ExampleFolder  title="Lists" showSkinSwitcher="true" isOpen="false" id="lists" >
	<description>
    How to bind grids to DataSources to share field (column) definitions with other components,
    and how to load data from local and remote data sources and services.    
</description>
	 <children>
    <Example title="ListGrid fields" id="listsListGridFields" ref="listGridFields" />
    <Example title="DataSource fields" id="listsDataSourceFields" ref="dataSourceFields" />
    <Example title="Merged fields" id="listsMergedFields" ref="mergedFields" />
    <Example title="Inline data" id="listsInlineData"  ref="inlineData"     />
    <Example title="Local data"	id="listsLocalData" ref="localData"         />
    <Example title="Local DataSource" id="listsLocalDataSource" ref="localDataSource"  />
    <Example title="JSON DataSource"  id="listsJsonDataSource"  ref="jsonDataSource"   />
    <Example title="XML DataSource"   id="listsXmlDataSource"	ref="xmlDataSource"    />
    <Example title="WSDL DataSource"  id="listsWSDLDataSource"  ref="WSDLDataSource"   />
</children></ExampleFolder>
	
    <ExampleFolder  title="Trees" showSkinSwitcher="true" isOpen="false" id="trees" >
	<description>
        Trees can bind to DataSources and handle all the data formats that grids can, using
        additional properties to control tree structure, open state, and folders.
    </description>
	<children>
        <Example title="Parent Linking" id="treeParentLinking" ref="parentLinking"      />
        <Example title="Children Arrays" id="treechildrenArrays" ref="childrenArrays"   />
        <Example title="Load XML (Parent Linked)" id="treeloadXMLParent" ref="loadXMLParent"  />
        <Example title="Load XML (Child Arrays)" ref="treeLoadXML"	id="treeTreeLoadXML" />
        <Example title="Load on Demand"	id="treeTreeLoadOnDemand"	ref="treeLoadOnDemand"	/>
        <Example title="Initial Data &amp; Load on Demand"  id="treeinitialData" ref="initialData" />
        <Example title="Multi-Level LOD" id="treeMultiLevelLOD" ref="multiLevelLOD" />
        <Example title="Paging for Children" id="treePagingForChildren" ref="pagingForChildren" />
        <Example title="Multi-Level Child Paging" id="treeMultiLevelChildPaging" ref="multiLevelChildPaging" />
    </children></ExampleFolder>
    <!-- TODO: default and custom field binding examples, similar to grids
    <ExampleFolder title="Forms" isOpen="false">
    <description>
    </description><children>
    </children></ExampleFolder>
    -->

    <ExampleFolder id="operations" title="Operations" showSkinSwitcher="true" isOpen="false"><description>
    DataBound Components understand a core set of operations called "Fetch", "Add", "Update"
    and "Remove" (also known as CRUD operations).  These operations can be programmatically
    initiated or automatically initiated in response to user action.
    In either case the integration model and APIs are the same.
    </description><children>
        <Example title="Fetch" id="fetchOperation" dataSource="supplyItem" 
                 xmlURL="databind/operations/fetch.xml" jsURL="databind/operations/fetch.js">
				 <descriptionHeight>210</descriptionHeight>
            <description>
            Rows are fetched automatically as the user drags the scrollbar.  Drag the scrollbar
            quickly to the bottom to fetch a range near the end (a prompt will appear during
            server fetch).  Scroll slowly back up to fill in the middle.
            </description></Example>
        <Example title="Add" id="addOperation" dataSource="supplyItem" 
                 xmlURL="databind/operations/add.xml">
            <description>
            Use the form to create a new stock item.  Create an item in the currently shown
            "Category" to see it appear in the filtered listing automatically.  Create an item in
            any other category and note that it is filtered out.
            </description></Example>
        <Example title="Update" id="updateOperation" dataSource="supplyItem"
                 xmlURL="databind/operations/update.xml">
            <description>
            Select an item and use the form to change its price.  The list updates
            automatically.  Now change the item's category and note that it is removed
            automatically from the list.
            </description></Example>
        <Example title="Remove" id="removeOperation" dataSource="supplyItem"
                 xmlURL="databind/operations/remove.xml">
            <description>
            Click the "Remove" button to remove the selected item.
            </description></Example>
    
    </children></ExampleFolder>

    <!--
    <ExampleFolder title="Transformations" isOpen="false"><description>
    </description><children>
    </children></ExampleFolder>
    -->

    <ExampleFolder id="DBvalidation" title="Validation" isOpen="false"><description>
        Typical validation needs are covered by validators built-in to the SmartClient
        framework.  Validators can be combined into custom type definitions which are reusable
        across all components.
    </description><children>

    <!-- Note: This folder is a duplicate of one elsewhere in the file (scan for "serverValidation").
         Any changes made here should also be made in the copy.  The details are duplicated 
         rather than aliased because the ExampleViewer doesn't cope correctly with an aliased 
         folder nested within another aliased folder  -->

        <ExampleFolder id="DBvalidationCopy" title="Server-based" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png"><description>
            The SmartClient Server provides powerful support for server-based validation.
        </description><children>

        <Example id="DBsingleSourceValidation" title="Single Source" requiresModules="SCServer"
                 dataSource="supplyItem" 
    	         jsURL="dataIntegration/java/serverValidation.js">
			<description>
            Validation rules are automatically enforced on both the client and server-side based on
            a single, shared declaration.  Press "Save" to see errors from the client-side
            validation.  Press "Clear Errors", then "Disable Validation", then "Save" again to see the
            same errors caught by the SmartClient server.
            </description></Example>
    
        <Example id="DBuniqueCheckValidation" title="Unique Check" requiresModules="SCServer"
                 dataSource="queuing_userHB"
    	         jsURL="dataIntegration/java/uniqueCheckValidation.js">
            <description><![CDATA[
            Enter the email address "kamirov@server.com" in the email field and press Tab. Do so with
            any other email address as well.
            <P/>
            The resulting validation error is based upon the server-side <code>isUnique</code> validator that
            checks to see if there is already a record in the DataSource and if so returns a validation failure. 
            ]]></description></Example>

        <Example id="DBvelocityValidation" title="Velocity Expression" requiresModules="SCServer"
                 dataSource="velocity_orderForm"
    	         jsURL="dataIntegration/java/velocityValidation.js">
            <tabs>
                <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
            </tabs>
            <description><![CDATA[
            Use the "Item" ComboBox to select an item,  enter a very large quantity (999999)
            and press the "Submit Order" button.
            <P/>
            The resulting validation error is based upon a server-side condition specified in
            the validator using a Velocity expression. It checks a related DataSource (StockItem)
            to see if there is sufficient quantity in stock to fulfill the order.
            ]]></description></Example>

        <Example id="DBinlineScriptValidation" title="Inline Script" requiresModules="SCServer"
                 dataSource="inlineScript_orderForm"
    	         jsURL="dataIntegration/java/inlineScriptValidation.js">
            <tabs>
                <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
            </tabs>
            <description><![CDATA[
            Use the "Item" ComboBox to select an item,  enter a very large quantity (999999)
            and press the "Submit Order" button.
            <P/>
            The resulting validation error is based upon a server-side condition specified in
            the validator using inline scripting. It checks a related DataSource (StockItem)
            to see if there is sufficient quantity in stock to fulfill the order.
            ]]></description></Example>
    
        <Example id="DBdmiValidation" title="DMI Validation" requiresModules="SCServer"
                 dataSource="validationDMI_orderForm"
    	         jsURL="dataIntegration/java/validationDMI.js">
            <tabs>
                <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
                <tab title="ValidatorDMI.java" 
                     url="serverExamples/validation/ValidatorDMI.java"
                     canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
            Use the "Item" ComboBox to select an item,  enter a very large quantity (999999)
            and press the "Submit Order" button.
            <P/>
            The resulting validation error is based upon server-side logic in <code>ValidatorDMI.java</code>
            that checks a related DataSource (StockItem) to see if there is sufficient quantity in
            stock to fulfill the order.  Hover over the error icon to see the error message and
            note that it includes an indication of the stock level. Error messages are Velocity 
            templates, and DMI validators can easily populate variable values, as 
            <code>ValidatorDMI.java</code> shows
            <P/>
            Validators can use SmartClient DMI to call any server-side method to check the validity
            of data, including methods on Java beans looked up via Spring.
            ]]></description></Example>
    
        <Example id="DBhasRelatedValidation" title="Related Records" requiresModules="SCServer"
                 dataSource="complaint"
    	     jsURL="dataIntegration/java/hasRelatedValidation.js">
            <tabs>
                <tab title="masterDetail_orderHB" dataSource="masterDetail_orderHB" canEdit="false"/>
            </tabs>
			<descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
            Enter a complaint for a received shipment using its tracking number. The tracking
            number must reference an existing tracking number so try with an existing number
            (4110884 or 9631143) and with a random number (like 1234).
            <P/>
            The <code>relatedRecord</code> validator is used to validate that an ID entered by
            a user actually exists.  This is useful in situations where using a ComboBox for record
            lookup is inappropriate (the user should not be able to select against all valid tracking
            numbers, or among other types of IDs, such as license keys or driver's license numbers)
            or in situations such as batch upload of many records.
            <P/>
            The <code>relatedRecord</code> validator can also be used with a ComboBox as the UI in order to
            enforce that related records are checked <b>before</b> a request reaches business logic
            where it would be convenient to assume the ID is already validated, or as a means of
            enforcing referential integrity in systems that don't have built-in enforcement.
            ]]></description></Example>
    
        <Example id="DBblockingErrors" title="Blocking Errors" requiresModules="SCServer"
                 dataSource="complaint"
    	     jsURL="dataIntegration/java/blockingErrors.js">
            <tabs>
                <tab title="masterDetail_orderHB" dataSource="masterDetail_orderHB" canEdit="false"/>
            </tabs>
			<descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
            Enter a complaint for a received shipment using its tracking number. The tracking
            number must reference an existing tracking number so try with an existing number
            (4110884 or 9631143) and with a random number (like 1234). Note that when a
            non-existant value is entered, focus is not allowed to move forwards.
            <P/>
            The <code>relatedRecord</code> validator can be used to validate that an ID entered by
            a user actually exists.  This is useful in situations where using a comboBox for record
            lookup is inappropriate (the user should not be able to select against all valid tracking
            numbers, or among other types of IDs, such as license keys or driver's license numbers)
            or in situations such as batch upload of many records.
            <P/>
            The <code>relatedRecord</code> validator can also be used with a ComboBox as the UI in order to
            enforce that related records are checked <b>before</b> a request reaches business logic
            where it would be convenient to assume the ID is already validated, or as a means of
            enforcing referential integrity in systems that don't have built-in enforcement.
            ]]></description></Example>
    
        </children></ExampleFolder>


        <Example title="Type" id="DBvalidationType" jsURL="databind/validation/type.js" 
                 dataSource="databind/validation/type.ds.xml" >
				 
            <description>
            Type a non-numeric value into the field and press "Validate" to receive a
            validation error.
            
            Declaring field type implies automatic validation anywhere a value is edited.
            </description></Example>
        <Example title="Built-ins"
                 id="validationBuiltins"
                 jsURL="databind/validation/builtins.js"
                 dataSource="databind/validation/builtins.ds.xml">
            <description>
            Type a number greater than 20 or less than 1 and press "Validate" to receive a
            validation error.
            
            SmartClient implements the XML Schema set of validators on both client and server
            </description></Example>
        <Example title="Regular Expression"
                 id="DBregularExpression"
                 jsURL="databind/validation/regularExpression.js"
                 dataSource="databind/validation/regularExpression.ds.xml">
            <description>
            Enter a bad email address (eg just "mike") and press "Validate" to receive a
            validation error.
            
            The regular expression validator allows simple custom field types, with automatic
            enforcement on client and server.
            </description></Example>
        <Example title="Value Transform"
                 id="DBvalueTransform"
                 jsURL="databind/validation/valueTransform.js"
                 dataSource="databind/validation/valueTransform.ds.xml">
            <description>
            Enter a 10 digit US phone number with any typical punctuation. Press "Validate" to see it
            transformed to a canonical format.
            </description></Example>
        <Example title="Custom Types" id="DBcustomSimpleType" 
                 jsURL="databind/validation/customTypes.js"
                 dataSource="databind/validation/customTypes.ds.xml">
			<description>
            Enter a bad zip code (eg just "123") and press "Validate" to receive a
            validation error.
            
            Custom types can be declared based on built-in validators and re-used in multiple
            DataSources
            </description></Example>
        <Example id="validationFieldBinding"
                 title="Customized Binding"
                 jsURL="databind/forms/customBinding.js"
                 dataSource="databind/forms/users.ds.xml">
			<description>
            Click "Validate" to see validation errors triggered by rules both in this form and
            in the DataSource.
            
            Screen-specific fields and validation logic, such as the duplicate password entry
            box, can be added to a particular form while still sharing schema information that
            applies to all views.
            </description>
        </Example>
    </children></ExampleFolder>

    <!-- Note: This folder is a duplicate of one elsewhere in the file (scan for "dataDragging").
         Any changes made here should also be made in the copy.  The details are duplicated 
         rather than aliased because the ExampleViewer doesn't cope correctly with an aliased 
         folder nested within another aliased folder  -->

    <ExampleFolder id="dataDragging" title="Dragging" isOpen="false"><description>
        Databound components have built-in dragging behaviors that operate on persistent
        datasets.
    </description><children>
        <Example title="Tree Reparent" id="dataDragTreeReparent" ref="treeReparent" jsURL="databind/drag/treeReparent.js"
                 dataSource="employees">
				 <description>
            Dragging employees between managers in this tree automatically saves the new
            relationship to a DataSource, without writing any code.  Make changes, then 
            reload the page. The changes persist.
            </description></Example>
        <Example title="Recategorize (Tree)" id="dataDragTreeRecategorize"  ref="treeRecategorize" 
                 jsURL="databind/drag/treeRecategorize.js"
                 dataSource="supplyCategory"><tabs>
                <tab title="supplyItem" url="supplyItem.ds.xml"/>
            </tabs>
			<description>
            Dragging items from the list and dropping them on categories in the tree automatically
            re-categorizes the item, without any code needed.  Make changes, then 
            reload the page. The changes persist.  This behavior is (optionally) automatic where
            SmartClient can establish a relationship via foreign key between the DataSources
            two components are bound to.
            </description></Example>
        <Example title="Recategorize (List)" id="dataDragListRecategorize"  ref="listRecategorize" 
                 jsURL="databind/drag/listRecategorize.js"
                 dataSource="supplyItem">
				 <description>
            The two lists are showing items in different categories.  Drag items from one list to
            another to automatically recategorize the items without writing any code.  Make
            changes, then reload the page. The changes persist.
            </description></Example>
        <Example title="Recategorize (Tile)" id="dataDragRecategorizeTiles"  ref="recategorizeTiles" />
        <Example
            title="Copy"
			id="dataDragDataboundDragCopy" 
            ref="databoundDragCopy" 
            showSkinSwitcher="true"
            dataSource="employees"
            jsURL="databind/drag/listCopy.js"><tabs>
            <tab title="teamMembers" url="teamMembers.ds.xml"/>
            </tabs>
			<descriptionHeight>150</descriptionHeight>
			<description><![CDATA[
            Drag employee records into the Project Team Members list.  SmartClient recognizes that the 
            two dataSources are linked by a <code>foreignKey</code> relationship, and automatically uses that 
            relationship to populate values in the record that is added when the drop occurs. SmartClient
            also populates fields based on current criteria and maps explicit <code>titleFields</code> as 
            necessary.<p>
            In this example, note that SmartClient is automatically populating all three
            of the fields in the "teamMembers" dataSource, even though none of those fields is present 
            in the "employees" dataSource that is being dragged from.  Change the "Team for Project" select 
            box, then try dragging employees across. Note that the "Project Code" column is being 
            correctly populated for the dropped records.
            ]]></description></Example>

    </children></ExampleFolder>

    <Example title="Adaptive Filter" id="dataDragadaptiveFilter" ref="adaptiveFilter"
    icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png"/>
    <Example title="Adaptive Sort" id="dataDragAdaptiveSort" ref="adaptiveSort"
     icon="[ISO_DOCS_SKIN]/images/silkicons/table_relationship.png"/>
    <Example id="dataDragRelatedRecords" ref="relatedRecords" title="Related Records"><description>
        Open the picker in either form to select the item you want to order from the
        "supplyItem" DataSource.  The picker on the left stores the "itemId" from the
        related "supplyItem" records.  The picker on the right stores the "SKU" while
        displaying multiple fields.  Scroll to dynamically load more records.  
        This pattern works with any DataSource.  
    </description></Example>


</children></ExampleFolder>

<ExampleFolder id="dataIntegration" title="Data Integration" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/database_table.png">
<description>
    SmartClient supports declarative, XPath-based binding of visual components to web services
    that return XML or JSON responses.  SmartClient understands XML Schema and can bind
    components directly to WSDL web services.  
</description><children>
    <ExampleFolder id="xmlDataIntegration" title="XML" isOpen="false"><description>
        SmartClient can declaratively bind to standard formats like WSDL or RSS, homebrew
        formats, or simple flat files.  
    </description><children>
        <!-- explicitly set showSkinSwitcher on examples that are used in multiple places -->
        <Example id="rssFeed" title="RSS Feed" needXML="true" showSkinSwitcher="true"
		         jsURL="dataIntegration/xml/rssFeed.js">
			<description>
            DataSources can bind directly to simple XML documents where field values appear as
            attributes or sub-elements.
            </description></Example>

        <Example title="XPath Binding" id="xpathBinding" jsURL="dataIntegration/xml/xpathBinding.js"
            showSkinSwitcher="true" needXML="true">
		    <tabs><tab title="contactsData.xml" canEdit="false" doEval="false"
			           url="dataIntegration/xml/contactsData.xml"/></tabs>
            <description>
            DataSources can extract field values from complex XML documents via XPath
            expressions.  Note how the "address" fields, which are represented in the "contacts"
            data as a sub-element, appear as columns in the grid. This approach of loading
            simple XML data over HTTP can be used with PHP and other server technologies.
            </description></Example>
<!--
        <Example title="Yahoo! Web Services"
                 id="xmlYahooWebServices"
                 jsURL="dataIntegration/xml/yahooWebServices.js" 
         needXML="true" showSkinSwitcher="true">
            <description>
            XPath binding allows declarative integration with web services.  Note how the
            height and width for the thumbnail images have been declaratively extracted from
            the "Thumbnail" subobject.
            </description></Example>
-->
        <!-- explicitly disable the skin switcher on this one - it's not showing anything that
             dramatically changes with a different skin -->
        <!-- this test has been disabled for automated testing because it relies on an external
             service that occasionally fails (creating noise in our test results) -->
        <Example id="wsdlOperation" title="WSDL Web Services" needXML="true"
                 testDisabled="true"
                 showSkinSwitcher="false"
		         jsURL="dataIntegration/xml/wsdlWebServiceOperations.js">
            <description>
            SmartClient can load WSDL service definitions and call web service operations
            with automatic JSON&lt;-&gt;XML translation.
            
            SOAP encoding rules, namespacing, and element ordering are handled automatically
            for the inputs and outputs. 
        </description></Example>

        <Example id="wsdlBinding" title="IP Lookup (SOAP)" needXML="true"
            showSkinSwitcher="true" jsURL="dataIntegration/xml/ipLookupSOAP.js">
            <description>
            Select or enter a valid IP address to find out which Country it relates to. 
            
            DataSources can bind directly to the structure of WSDL messages.
            </description></Example>

        <Example id="xmlEditSave" title="Edit and Save"
            jsURL="dataIntegration/xml/operationBinding_dataURL.js"><tabs>
        <tab title="country_fetch.xml" url="dataIntegration/xml/responses/country_fetch.xml" 
            doEval="false" canEdit="false"/>
        <tab title="country_add.xml" url="dataIntegration/xml/responses/country_add.xml" 
            doEval="false" canEdit="false"/>
        <tab title="country_update.xml" url="dataIntegration/xml/responses/country_update.xml" 
            doEval="false"  canEdit="false"/>
        <tab title="country_remove.xml" url="dataIntegration/xml/responses/country_remove.xml" 
            doEval="false"  canEdit="false"/>
        </tabs>
		<description><![CDATA[
        Demonstrates Add, Update and Remove operations with a server that
        returns simple XML responses, an integration strategy popular with PHP, Ruby and Perl
        backends.
        <br>
        Each operation is directed to a different XML file containing a sample response for
        that <code>operationType</code>.  The server returns the data-as-saved to allow the grid to update
        its cache.
        ]]></description></Example>
        
        <Example id="restEditSave" title="RestDataSource - Edit and Save"
            jsURL="dataIntegration/xml/restDS_operationBinding.js"><tabs>
        <tab title="country_fetch.xml" url="dataIntegration/xml/responses/country_fetch_rest.xml" 
            doEval="false" canEdit="false"/>
        <tab title="country_add.xml" url="dataIntegration/xml/responses/country_add_rest.xml" 
            doEval="false" canEdit="false"/>
        <tab title="country_update.xml" url="dataIntegration/xml/responses/country_update_rest.xml" 
            doEval="false"  canEdit="false"/>
        <tab title="country_remove.xml" url="dataIntegration/xml/responses/country_remove_rest.xml" 
            doEval="false"  canEdit="false"/>
        </tabs>
		<descriptionHeight>110</descriptionHeight>
		<description>
		<![CDATA[
        The <code>RestDataSource</code> provides a simple protocol based on XML or JSON over HTTP.  This
        protocol can be implemented with any server technology (PHP, Ruby, etc) and 
        includes all the features of SmartClient's databinding layer (data paging, server
        validation errors, cache sync, etc).<br>
        In this example, each DataSource operation is directed to a different XML file
        containing a sample response for that <code>operationType</code>.  The server returns the
        data-as-saved to allow the grid to update its cache.
        ]]></description></Example>

        <!-- explicitly disable the skin switcher on this one - it's not showing anything that
             dramatically changes with a different skin -->
        <Example title="Server Validation Errors" id="xmlServerValidationErrors" needXML="true"
            showSkinSwitcher="false"
                 jsURL="dataIntegration/xml/serverValidationErrors/serverValidationErrors.js">
            <tabs>
                <tab title="serverResponse.xml" canEdit="false" doEval="false"
                     url="dataIntegration/xml/serverValidationErrors/serverResponse.xml"/>
            </tabs>
            <description>
            Click "Save" to see validation errors derived from an XML response.
            
            Validation errors expressed in application-specific XML formats can be 
            communicated to visual components by implementing
            &lt;code&gt;DataSource.transformResponse()&lt;/code&gt;.  The resulting validation
            errors will be displayed and tracked by forms and editabled grids.
            </description></Example>

        <Example title="XML Schema Import" id="xmlSchemaImport" needXML="true"
                 showSkinSwitcher="true" url="dataIntegration/xml/xmlSchemaImport.js">
            <tabs>
                <tab title="supplyItem.xsd" canEdit="false" doEval="false"
                     url="dataIntegration/xml/supplyItem.xsd"/>
            </tabs>
            <description>
			<![CDATA[
        Click "Load Schema" to load a version of the "supplyItem"
            DataSource expressed in XML Schema format, and bind the Grid and Form to it.  Note
            that the form and grid choose appropriate editors according to declared XML Schema
            types.  Click "Validate" to see validation errors from automatically imported
            validators.
        ]]>
            </description></Example>
        <Example title="Schema Chaining" id="schemaChaining" needXML="true"
                 showSkinSwitcher="true" url="dataIntegration/xml/schemaChaining.js">
            <tabs>
                <tab title="supplyItem.xsd" canEdit="false" doEval="false"
                     url="dataIntegration/xml/supplyItem.xsd"/>
            </tabs>
            <description>
			<![CDATA[
			Click "Load Schema" to load a version of the "supplyItem" DataSource from
            XML Schema format, then extend that schema with SmartClient-specific presentation
            attributes, and bind the Grid and Form to it.  Note that the internal "itemId"
            field has been hidden from the user, some fields have been retitled, and default
            editors overridden.
        ]]>
            </description></Example>
        <Example title="SmartClient WSDL" showSkinSwitcher="true" needXML="true" id="WSDLDataSource2" ref="WSDLDataSource"/>
    </children></ExampleFolder>

    <ExampleFolder title="JSON" isOpen="false"><description>
        SmartClient brings declarative XPath binding and typed schema (even XML Schema) to the
        simple and convenient JSON format.
    </description><children>

        <Example title="Simple JSON"
            showSkinSwitcher="true"
            id="simpleJSON"
            jsURL="dataIntegration/json/simpleJSON.js">
            <tabs>
                <tab title="countries_small.js" canEdit="false" doEval="false"
                     url="dataIntegration/json/countries_small.js"/>
            </tabs>
            <description>
            DataSources can bind directly to JSON data where records appear as an Array of
            JavaScript Objects with field values as properties.  This approach of loading
            simple JSON data over HTTP can be used with PHP and other server technologies.
            </description></Example>

        <Example title="JSON XPath Binding"
                 id="jsonXPath"
                 jsURL="dataIntegration/json/xpathBinding.js"
                 showSkinSwitcher="true">
		    <tabs><tab title="contactsData.js" canEdit="false" doEval="false"
			           url="dataIntegration/json/contactsData.js"/></tabs>
            <description>
            DataSources can extract field values from complex JSON structures via XPath
            expressions.  Note how the address fields, which are represented in the contacts
            data as a sub-object, appear as columns in the grid.
            </description></Example>
<!--
        <Example title="Yahoo! Web Services" id="jsonYahooWebServices"
            showSkinSwitcher="true" jsURL="dataIntegration/json/yahooWebServices.js">
            <description>
            Enter a search term in the Query input field to see images from Yahoo Image
            Search.&lt;BR&gt;
            XPath binding allows declarative integration with web services.  Note how the
            height and width for the thumbnail images have been declaratively extracted from
            the "Thumbnail" subobject.
            </description></Example>
    
        <Example title="Cross-Site JSON" jsURL="dataIntegration/json/yahooWebServices.js"
            showSkinSwitcher="true">
            <description>
            Using the "scriptInclude" protocol, SmartClient applications can contact compatible
            JSON web services without the need for any intervening server.
            </description></Example>
-->
        <Example title="Server Validation Errors" id="jsonServerValidationErrors"
            showSkinSwitcher="false"
                 jsURL="dataIntegration/json/serverValidationErrors/serverValidationErrors.js">
            <tabs>
                <tab title="serverResponse.js" canEdit="false" doEval="false"
                     url="dataIntegration/json/serverValidationErrors/serverResponse.js"/>
            </tabs>
			<descriptionHeight>110</descriptionHeight>
            <description>
			<![CDATA[
			Click "Save" to see validation errors derived from a JSON response.<br><br>
            
            Validation errors expressed in application-specific JSON formats can be 
            communicated to the SmartClient system by implementing
            <code>DataSource.transformResponse()</code>.  The resulting validation
            errors will be displayed and tracked by forms and editabled grids.
        ]]>     
            </description></Example>
    
    
    </children></ExampleFolder>

</children></ExampleFolder>

<ExampleFolder title="Server examples" isOpen="false" id="serverExamples" 
               icon="[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png">
<description><![CDATA[
    The SmartClient Server framework is a collection of .jar files and optional servlets that work with
    any J2EE or J2SE container and are easily integrated into existing applications.  Its major
    features include:<ul>
    <li><b>Simplified server integration:</b> A pre-built network protocol for browser-server
        communication, which handles data paging, transactions/batch operations, server-side
        sort, automatic cache updates, validation and other error handling, optimistic
        concurrency (aka long transactions) and binary file uploads.<P></li>
    <li><b>SQL, JPA & Hibernate Connectors:</b> Secure, flexible, transactional support for all
        CRUD operations, either directly via JDBC or via Hibernate or JPA beans.<P></li>
    <li><b>Rapid integration with Java Beans:</b> Robust, complete, bi-directional translation
        between Java and Javascript objects for rapid integration with any Java beans-based
        persistence system, such as Spring services or custom ORM implementations.  Send and
        receive complex structures including Java Enums and Java Generics without the need to
        write mapping or validation code.  Declaratively trim and rearrange data so that only
        selected data is sent to the client <b>without</b> the need to create and populate
        redundant DTOs (data transfer objects).<P></li>
    <li><b>Server enforcement of Validators:</b> A single file specifies validation rules
        which are enforced on both the client and server side<P></li>
    <li><b>Declarative Security:</b> Easily attach role or capability-based security rules to
        data operations with server-side enforcement, plus automatic client-side effects such as
        hiding fields or showing fields as read-only based on the user role.<P></li>
    <li><b>Export:</b> Export any dataset to CSV or true Excel spreadsheets, including data
        highlights and formatting rules<br><br></li>
    <li><b>High speed data delivery / data compression:</b> automatically use the fastest 
        possible mechanism for delivering data to the browser<br></li>
    </ul>
    The SmartClient Server framework is an optional, commercially-licensed package.  See the 
    <a href=http://www.smartclient.com/product/index.jsp>products page</a> for details.
    ]]>
</description><children>
    <!-- Note: This folder is a duplicate of one elsewhere in the file (scan for "serverValidation").
         Any changes made here should also be made in the copy.  The details are duplicated 
         rather than aliased because the ExampleViewer doesn't cope correctly with an aliased 
         folder nested within another aliased folder  -->

    <ExampleFolder id="serverValidation" title="Validation" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png"><description>
        The SmartClient Server provides powerful support for server-based validation.
    </description><children>
    <Example id="singleSourceValidation" title="Single Source" requiresModules="SCServer"
             dataSource="supplyItem"
             icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
	         jsURL="dataIntegration/java/serverValidation.js">
        <description>
        Validation rules are automatically enforced on both the client and server-side based on
        a single, shared declaration.  Press "Save" to see errors from the client-side
        validation.  Press "Clear Errors", then "Disable Validation", then "Save" again to see the
        same errors caught by the SmartClient server.
        </description></Example>

    <Example id="dmiValidation" title="DMI Validation" requiresModules="SCServer"
             dataSource="validationDMI_orderForm"
             icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
	         jsURL="dataIntegration/java/validationDMI.js">
        <tabs>
            <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
            <tab title="ValidatorDMI.java" 
                 url="serverExamples/validation/ValidatorDMI.java"
                 canEdit="false" doEval="false"/>
        </tabs>
		<descriptionHeight>140</descriptionHeight>
        <description><![CDATA[
        Use the "Item" ComboBox to select an item,  enter a very large quantity (999999)
        and press the "Submit Order" button.
        <P/>
        The resulting validation error is based on server-side logic in <code>ValidatorDMI.java</code>
        that checks a related DataSource (StockItem) to see if there is sufficient quantity in
        stock to fulfill the order.
        <P/>
        Validators can use SmartClient DMI to call any server-side method to check the validity
        of data, including methods on Java beans looked up via Spring.
        ]]></description></Example>

    <Example id="velocityValidation" title="Velocity Expression" requiresModules="SCServer"
             dataSource="velocity_orderForm"
             icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
	         jsURL="dataIntegration/java/velocityValidation.js">
        <tabs>
            <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
        </tabs>
        <description><![CDATA[
        Use the "Item" ComboBox to select an item,  enter a very large quantity (999999)
        and press the "Submit Order" button.
        <P/>
        The resulting validation error is based on a server-side condition specified in
        the validator using a Velocity expression. It checks a related DataSource (StockItem)
        to see if there is sufficient quantity in stock to fulfill the order.
        ]]></description></Example>

    <Example id="inlineScriptValidation" title="Inline Script" requiresModules="SCServer"
                 dataSource="inlineScript_orderForm"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
    	         jsURL="dataIntegration/java/inlineScriptValidation.js">
            <tabs>
                <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
            </tabs>
            <description><![CDATA[
            Use the "Item Id" ComboBox to select an item,  enter a very large quantity (999999)
            and press the "Submit Order" button.
            <P/>
            The resulting validation error is based on a server-side condition specified in
            the validator using inline scripting. It checks a related DataSource (StockItem)
            to see if there is sufficient quantity in stock to fulfill the order.
            ]]></description></Example>

    <Example id="uniqueCheckValidation" title="Unique Check" requiresModules="SCServer"
             dataSource="queuing_userHB"
             icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
	         jsURL="dataIntegration/java/uniqueCheckValidation.js">
        <description><![CDATA[
        Enter the email address "kamirov@server.com" in the email field and press Tab. Do so with
        any other email address as well.
        <P/>
        The resulting validation error is based on the server-side <code>isUnique</code> validator that
        checks to see if there is already a record in the DataSource and if so fails validation. 
        ]]></description></Example>

    <Example id="hasRelatedValidation" title="Related Records" requiresModules="SCServer"
             dataSource="complaint"
             icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
	     jsURL="dataIntegration/java/hasRelatedValidation.js">
        <tabs>
            <tab title="masterDetail_orderHB" dataSource="masterDetail_orderHB" canEdit="false"/>
        </tabs>
		<descriptionHeight>200</descriptionHeight>
        <description><![CDATA[
        Enter a complaint for a received shipment using its tracking number. The tracking
        number must reference an existing tracking number (use one of the existing numbers
        4110884 or 9631143 and again with a random number like 1234).
        <P/>
        The <code>relatedRecord</code> validator can be used to validate that an ID entered by
        a user actually exists.  This is useful in situations where using a ComboBox for record
        lookup is inappropriate (the user should not be able to select against all valid tracking
        numbers, or among other types of IDs, such as license keys or driver's license numbers),
        or in situations such as a batch upload of many records.
        <P/>
        The <code>relatedRecord</code> validator can also be used with a ComboBox as the UI in order to
        ensure that related records are checked before a request reaches business logic,
        where it would be convenient to assume the ID is already validated, or as a means of
        enforcing referential integrity in systems that don't have built-in enforcement.
        ]]></description></Example>

        <Example id="blockingErrors" title="Blocking Errors" requiresModules="SCServer"
                 dataSource="complaint"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
    	     jsURL="dataIntegration/java/blockingErrors.js">
            <tabs>
                <tab title="masterDetail_orderHB" dataSource="masterDetail_orderHB" canEdit="false"/>
            </tabs>
			<descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
             Enter a complaint for a received shipment using its tracking number. The tracking
        number must reference an existing tracking number (use one of the existing numbers
        4110884 or 9631143 and again with a random number like 1234).
        <P/>
        The <code>relatedRecord</code> validator can be used to validate that an ID entered by
        a user actually exists.  This is useful in situations where using a comboBox for record
        lookup is inappropriate (the user should not be able to select against all valid tracking
        numbers, or among other types of IDs, such as license keys or driver's license numbers),
        or in situations such as a batch upload of many records.
        <P/>
        The <code>relatedRecord</code> validator can also be used with a ComboBox as the UI in order to
        enforce that related records are checked before a request reaches business logic
        where it would be convenient to assume the ID is already validated, or as a means of
        enforcing referential integrity in systems that don't have built-in enforcement.
            ]]></description></Example>
    
    </children></ExampleFolder>


    <ExampleFolder title="SQL" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/database_table.png" ><description>
        The SmartClient Server provides powerful built-in support for codeless connection to
        mainstream SQL databases.
    </description><children>
        <Example
            id="sqlWizard"
            jsURL="serverExamples/sql/vb_Database.js" requiresModules="SCServer"
            title="Database Wizard"
            icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"
            showSkinSwitcher="false"
            showSource="false"
            ><description><![CDATA[
            SmartClient's Visual Builder tool provides an extremely easy and completely codeless 
            way to create DataSources for instantly connecting to existing database tables. 
            Click the "New" button, select "Existing SQL Table", and the Database Browser will
            show the actual tables, column details and the even the data.  Select a table, and 
            Visual Builder will create a fully-functioning DataSource that can perform
            all four CRUD operations on that table, including (if using the Power  or 
            Enterprise Edition), complex searches enabled by SmartClient's <code>AdvancedCriteria</code> system.
            ]]></description></Example>
        <Example
            id="sqlConnector"
            title="Basic Connector"
            icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"
            jsURL="serverExamples/sql/basicConnector.js" requiresModules="SCServer"
            ><tabs>
            <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false"/>
            </tabs>
            <descriptionHeight>180</descriptionHeight>
            <description><![CDATA[
            The basic SQL Connector gives you the ability to immediately connect SmartClient components to
            SQL databases without writing any code.  
            <P>
            Either use the SQL Wizard in Visual Builder to generate a DataSource descriptor
            (*.ds.xml file) from an existing SQL table, or use the Admin Console to generate an SQL table
            from a DataSource descriptor that is manually written.  Either way, gives the immediate ability to perform
            all 4 basic SQL operations (SELECT, INSERT, UPDATE, DELETE) from any of SmartClient's
            data-aware components.
            <P>
            The grid below is connected to an SQL DataSource and has settings enabled to allow this grid to
            perform all 4 of these operations.  Type in the input boxes above each column to do query by example.
            Note that data paging is automatically enabled. Scroll to load data on demand.  Click on
            the red "X" to delete a record.  Click on a record to edit it and click "Add New" to add a new record.
            <P>
            It's easy to add business logic that takes place before and after SQL operations to enforce
            security or add additional data validation rules.
            <P>
            Even if the primary data storage approach is non-SQL or if JPA or other ORM is the chosen
            system for most objects, the SQL connector is still valuable for initial prototypes and for
            lightweight storage when a full ORM approach would be overkill.
            ]]></description></Example>
        <Example
            title="Server Advanced Filtering (SQL)" requiresModules="SCServer,serverCriteria"
			id="filterBuilderBracketSQL"
            ref="filterBuilderBracket"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png">
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
            Use the FilterBuilder to construct queries of arbitrary complexity.  The FilterBuilder,
            and the underlying AdvancedCriteria system, support building queries with subclauses
            nested to any depth. Add clauses to the query with the "+" icon. Add nested subclauses 
            with the "+()" button. Click "Filter" to see the results in the ListGrid.
            <P>
            Note that this example is backed by an "SQL" dataSource. The SmartClient Server is 
            automatically generating the SQL queries required to implement the filters that the 
            FilterBuilder can assemble.  This works adaptively and seamlessly with client-side 
            Advanced Filtering. The generated SQL query will yield exactly the same result-set 
            as the client-side filtering.  This means SmartClient is able to switch to client-side
            filtering when its cache is full, giving a more responsive, more scalable application.
            ]]></description>
        </Example>
        <Example
            title="Large Value Map" requiresModules="SCServer,customSQL"
            id="largeValueMapSQL"
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_relationship.png"
            jsURL="serverExamples/sql/largeValueMap/largeValueMap.js"><tabs>
            <tab name="orderItem" dataSource="largeValueMap_orderItem" canEdit="false" />
            <tab dataSource="supplyItem" canEdit="false" />
            </tabs>
            <descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
            This example shows the simple use of custom SQL clauses to provide a DataSource that
            joins multiple tables while retaining SmartClient's automatic paging and filtering
            behavior.  When trying this example, remember that this is <b>automatic</b> 
            dataset-handling behavior that works without any coding, even though the data is being 
            provided by a custom SQL query.<p>
            
            The list contains order items. Each order item holds an "itemId", which is being used
            to join to the "SupplyItem" table to obtain the "Item Name".  Note that you can filter on
            the "Item Name". Either select a full "Item Name" or just enter a partial value in the 
            combo box.  Pagination is also active. Try quickly dragging the scrollbar down, and
            SmartClient will be seen contacting the server for more records.<p>
           
             Editing is also enabled in this example.  Try filtering to a small sample of items,
             then edit one of them by double-clicking it and choose a different item.  Note how 
             that order item is immediately filtered out of the list. SmartClient's intelligent 
             cache sync also automatically handles custom SQL statements.
            ]]></description>
        </Example>
        <Example
            title="User-Specific Data" requiresModules="SCServer,customSQL"
            id="userSpecificData"
            icon="[ISO_DOCS_SKIN]/images/silkicons/user_orange.png"
            jsURL="serverExamples/sql/userSpecificData/userSpecificData.js"><tabs>
            <tab name="cartItem" dataSource="cartItem" canEdit="false" />
            <tab title="supplyItem" url="supplyItem.ds.xml" canEdit="false"/>
            <tab title="CartDMI.java" url="serverExamples/sql/userSpecificData/CartDMI.java" canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
            This example shows the use of some simple user-written server code in conjunction with
            SmartClient databound dragging features and the SmartClient SQL DataSource to implement
            a simple, but secure, shopping cart example.
            <p>
            Via DMI (Direct Method Invocation), the "cartItem" DataSource declares
            that all DataSource operations should go through a custom Java method
            <code>CartDMI.enforceUserAccess()</code> <b>before</b> proceeding to read or write
            to the database.  &nbsp;&nbsp;<code>CartDMI.enforceUserAccess()</code> adds the current sessionId to the
            DSRequest, so that the user can only read and write their own shopping cart.
            <P>
            Drag items from the left-hand grid to the right-hand grid.  The right hand grid allows for 
            editing quantity and deleting records.  Verify that the example
            is protecting each user's data from others by running the example in two different
            browsers (eg one Firefox and one IE) - this creates distinct sessions with separate
            carts.
            ]]></description>
        </Example>
        <Example
            title="Dynamic Reporting" requiresModules="SCServer,customSQL"
            id="dynamicReporting"
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png"
            jsURL="serverExamples/sql/dynamicReporting/dynamicReporting.js"><tabs>
            <tab name="orderItem" dataSource="dynamicReporting_orderItem" canEdit="false" />
            </tabs>
            <descriptionHeight>215</descriptionHeight>
            <description><![CDATA[
            This example shows the use of custom SQL clauses to build a fairly complex query, including
            both standard and bespoke WHERE conditions and the use of aggregate functions and a 
            GROUP BY.  It is important to note that this can be done, whilst still keeping the normal 
            benefits of SmartClient DataSources, such as automatic dataset paging and arbitrary
            filtering and sorting.  Also note that this example, though it makes heavy use of custom
            SQL clauses, doesn't make use of any database-specific syntax or functions, so it is 
            portable across different database products.<p>
            
            The list contains a summary of orders in a given date range, summarized by item - each
            item appears just once in the list, alongside the total quantity of that item ordered 
            in the given date range.  Change the date range to be more restrictive (all the rows
            in the sample database have dates in February 2009) and click "Filter", Note how
            the quantities change, and items disappear from the list.  Also, use the 
            filter editor at the top of the grid to arbitrarily filter the records, or click
            the column headings to sort.<p>
            
            Scroll the grid quickly to the bottom, and a brief notification will be seen, as 
            SmartClient contacts the server. Pagination still works normally, despite the unusual
            and complex query.
            ]]></description>
        </Example>
        <Example title="Transactions" id="autoTransactionsFS" ref="autoTransactions" />
        <Example
            id="sqlIncludeFrom"
            title="Field Include"
            icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
            requiresModules="SCServer"
            jsURL="serverExamples/sql/relations/sqlIncludeFrom.js">
        >
            <tabs>
                <tab
                    name="cityIncludeFromSQL"
                    dataSource="cityIncludeFromSQL"
                />
                <tab
                    name="countryIncludeFromSQL"
                    dataSource="countryIncludeFromSQL"
                />
                <tab
                    name="continentIncludeFromSQL"
                    dataSource="continentIncludeFromSQL"
                />
            </tabs>
            <descriptionHeight>110</descriptionHeight>
            <description><![CDATA[
                Fields from related data sources can be included by declaring a field with the <code>includeFrom</code>
                property, which points to a field in a related DataSource. The Target field can be included from another
                DataSource. For example "CityDS" includes the field "continentName" from the "CountryDS" DataSource, which is
                included from the "ContinentDS" DataSource.
                <p/>
                Either specify a different field name or omit it altogether. In this case, the field name will default
                to the name of the included field.
            ]]></description>
        </Example>
		<Example
			id="sqlIncludeVia"
			title="Multiple Field Include"
			icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
			requiresModules="SCServer"
			jsURL="serverExamples/sql/relations/sqlIncludeVia.js">
		>
			<tabs>
				<tab
					name="moneyTransfer"
					dataSource="moneyTransfer"
				/>
				<tab
					name="currency"
					dataSource="currency"
				/>
			</tabs>
			<descriptionHeight>110</descriptionHeight>
			<description><![CDATA[
				A DataSource is sometimes related to another DataSource in <b>two</b> ways, for example, a "moneyTransfer" DataSource
				may be related to a "currency" DataSource by two <code>foreignKey</code>s - one representing the source currency, and one 
				representing the payment currency.
				<p>
				When this happens, you can still use the <code>includeFrom</code> feature to include fields from the related DataSource,
				but you need to use the <code>includeVia</code> property to specify which <code>foreignKey</code> should be used.
			]]></description>
		</Example>
        <Example
            id="sqlIncludeFromDynamic"
            title="Dynamic Field Include"
            icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
            requiresModules="SCServer"
            jsURL="serverExamples/sql/relations/sqlIncludeFromDynamic.js">
        >
            <tabs>
                <tab
                    name="cityIncludeFromSQL"
                    dataSource="cityIncludeFromSQL"
                />
                <tab
                    name="countryIncludeFromSQL"
                    dataSource="countryIncludeFromSQL"
                />
                <tab
                    name="continentIncludeFromSQL"
                    dataSource="continentIncludeFromSQL"
                />
            </tabs>
            <descriptionHeight>100</descriptionHeight>
            <description><![CDATA[
                Fields from related DataSources can be included without directly declaring them in the DataSource. "CityDS"
				does not have the declared field "countryCode". This field is specified in the ListGrid with the <code>includeFrom</code>
				property which points to the relevant field in the related "CountryDS" DataSource.
                For this widget only, the system automatically adds the specified fields and retrieves their values.
            ]]></description>
        </Example>
    </children></ExampleFolder>
    <ExampleFolder title="Hibernate / Beans" isOpen="false" icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"><description>
        The SmartClient Server's built-in support for Hibernate
    </description><children>
<!-- 

        <Example
            id="hibernateWizard"
            jsURL="serverExamples/hibernate/vb_Hibernate.js" requiresModules="SCServer"
            title="Hibernate Wizard"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean_view.png"
            showSkinSwitcher="false"
            showSource="false"
            ><description><![CDATA[
            SmartClient's Visual Builder tool provides an extremely easy and completely codeless 
            way to create DataSources for instantly connecting to existing Hibernate mapped 
            entitites.  Just click the "New" button, select "Hibernate Bean", and the Hibernate 
            Browser will show your mapped entities, properties and even the data in the actual 
            table to which the entity is mapped.  Select an entity, and 
            Visual Builder will create a fully-functioning DataSource that can perform
            all four CRUD operations via Hibernate on that entity, including - if you have the
            Power Edition or Enterprise Edition - complex searches enabled by SmartClient's 
            Advanced Criteria system.
            ]]></description></Example>
-->
        <Example
            id="hibernateAutoDerivation"
            jsURL="serverExamples/hibernate/autoDerivation/hibernateAutoDerivation.js" requiresModules="SCServer"
            title="Auto Derivation"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            showSkinSwitcher="false"
            dataSource="supplyItemHBAutoDerive" 
            ><tabs>
            <tab title="SupplyItemHB.java"
                 url="serverExamples/hibernate/autoDerivation/SupplyItemHB.java"
                 canEdit="false" doEval="false"/>
            </tabs>
			<descriptionHeight>180</descriptionHeight>
			<description><![CDATA[
            If you have pre-existing Hibernate beans, SmartClient can automatically derive fully functional
            DataSources given just the Java classname of the Hibernate Bean.  The grid below is connected
            to a Hibernate-managed bean via the simple declarations in <code>supplyItemHBAutoDerive.ds.xml</code>
            - no other configuration or Java code is required beyond the bean itself and possibly Hibernate 
            mappings (<code>.hbm.xml</code> files).  In this sample, the bean is annotated, so no separate 
            mappings are required.
            <p/>
            To search, use the controls above the grid's header. Note that data paging is automatically
            enabled. Scroll down to load data on demand. Click on the red icon next to each record to
            delete it. Click on a record to edit it and click "Add New" to add a new record.  Note that the
            editing controls are type sensitive. A date picker appears for the "Next Shipment" field, and
            the "Units" field shows a picklist as its Java type is an Enum.  Also note that the "Item Name" 
            and "Description" fields have automatically been flagged as <code>required:true</code>; this 
            was derived from annotations on the corresponding members of the bean - see the 
            <code>SupplyItemHB.java</code> tab.
            <p/>
            You can use DMI to add business logic that takes place before and after Hibernate operations to
            enforce security or add additional data validation rules.
            ]]></description></Example>
        <Example
            id="hibernateConnector"
            title="Beanless Mode"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            jsURL="serverExamples/hibernate/hibernateConnector.js" requiresModules="SCServer"
            ><tabs>
            <tab title="worldHB" dataSource="worldHB" canEdit="false"/>
            </tabs>
            <descriptionHeight>210</descriptionHeight>
            <description><![CDATA[
            Beanless mode allows Hibernate to be used for persistence without writing any Java code at all.
            Declare the properties of the object in the DataSource descriptor (*.ds.xml file), and
            SmartClient will generate the Hibernate configuration automatically.  The Admin
            Console can be used to generate the underlying SQL table as well, meaning, the only file that needs to be
			created is the *.ds.xml file.
            <P>
            As with the previous example, the grid below provides the ability to search, edit, and delete
            records.
            <P>
            Beanless mode helps to avoid writing boilerplate Java code (several classes full of getter
            and setter methods that do nothing) for simple entities.  Even in beanless mode, 
            DMI can still be used to add Java business logic that takes place before and after Hibernate operations. The
            Hibernate data is represented as a Java Map. 
            <P>
            A mixture of beanless mode and normal Hibernate beans can also be used, even in the same
            transaction.
            ]]></description></Example>
        <Example
            title="Advanced Filtering" requiresModules="SCServer,serverCriteria"
            id="advancedFilterHibernate"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png"
            jsURL="serverExamples/hibernate/advancedFilter/advancedFilterHibernate.js">
            <tabs>
            <tab name="supplyItemHB" dataSource="supplyItemHB" canEdit="false" />
            </tabs>
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
            Use the FilterBuilder to construct queries of arbitrary complexity.  The FilterBuilder,
            and the underlying <code>AdvancedCriteria</code> system, support building queries with subclauses
            nested to any depth. Add clauses to the query with the "+" icon and add nested subclauses 
            with the "+()" button. Click "Filter" to see the result in the ListGrid.
            <p>
            Note that this example is backed by a "hibernate" DataSource. The SmartClient Server is 
            automatically generating the Hibernate Criteria Queries (including database-specific SQL
            where necessary) to implement the filters that the FilterBuilder 
            can assemble.    This works adaptively and seamlessly with client-side 
            Advanced Filtering. The generated Criteria query will yield exactly the same resultset 
            as the client-side filtering.  This means SmartClient is able to switch to client-side
            filtering when its cache is full, giving a more responsive, more scalable application.
            ]]></description>
        </Example>
        <Example
            id="hbRelationManyToOneSimple"
            title="Many-to-One Relation"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            requiresModules="SCServer"
            jsURL="serverExamples/hibernate/relations/hbRelationManyToOneSimple.js">
        >
            <tabs>
                <tab
                    name="cityManyToOneSimpleHB"
                    dataSource="cityManyToOneSimpleHB"
                />
                <tab
                    name="countryManyToOneSimpleHB"
                    dataSource="countryManyToOneSimpleHB"
                />
                <tab
                    title="CityManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CityManyToOneSimple.java"
                />
                <tab
                    title="CountryManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CountryManyToOneSimple.java"
                />
            </tabs>
            <descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
                SmartClient handles Hibernate Many-to-One relationships transparently, such as cities within
                countries.  Declare a <code>foreignKey</code> field on the "City" DataSource to indicate
                the need to use the related Hibernate bean, "Country".
                <P>
                The grid below shows Cities, but the Country name is automatically shown even though the
                "countryName" is stored in the related Hibernate bean, "Country".  Any fields from any number of
                related beans can automatically be loaded this way.
                <P>
                Click to edit and change the Country of a City.  The list of Countries is automatically
                loaded from the related Hibernate bean, along with their IDs.  
                <P>
                Changing the Country of a City sends the ID of the new Country back to the server, and
                SmartClient automatically makes all the required Hibernate calls to persist the change. No
                server-side code needs to be written beyond the Hibernate beans themselves and their
                annotations.
            ]]></description>
        </Example>
        <Example
            id="hbRelationOneToMany"
            title="One-to-Many Relation"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            requiresModules="SCServer"
            jsURL="serverExamples/hibernate/relations/hbRelationOneToMany.js">
        >
            <tabs>
                <tab
                    name="cityOneToManyHB"
                    dataSource="cityOneToManyHB"
                />
                <tab
                    name="countryOneToManyHB"
                    dataSource="countryOneToManyHB"
                />
                <tab
                    title="CityOneToMany.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CityOneToMany.java"
                />
                <tab
                    title="CountryOneToMany.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CountryOneToMany.java"
                />
            </tabs>
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
                SmartClient handles Hibernate One-to-Many relationships transparently (such as a Country which has
                multiple Cities).  Just declare a collection field (<code>multiple:true</code>) on the Country
                DataSource to indicate loading its list of Cities.
                <P>
                Click on a Country below - its list of Cities is revealed without an additional round trip to the
                server.  Cities can be now edited in the lower grid.  
                <P>
                When data is saved, all changes to the Country and its Cities are sent in one save
                request, and SmartClient automatically makes all the required Hibernate calls to persist the
                changes. No server-side code needs to be written beyond the Hibernate beans themselves and
                their annotations.
            ]]></description>
        </Example>
        <Example
            id="hbIncludeFrom"
            title="Field Include"
            icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
            requiresModules="SCServer"
            jsURL="serverExamples/hibernate/relations/hbIncludeFrom.js">
        >
            <tabs>
                <tab
                    name="cityIncludeFromHB"
                    dataSource="cityIncludeFromHB"
                />
                <tab
                    name="countryIncludeFromHB"
                    dataSource="countryIncludeFromHB"
                />
                <tab
                    name="continentIncludeFromHB"
                    dataSource="continentIncludeFromHB"
                />
                <tab
                    title="CityManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CityManyToOneSimple.java"
                />
                <tab
                    title="CountryManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CountryManyToOneSimple.java"
                />
                <tab
                    title="ContinentManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/ContinentManyToOneSimple.java"
                />
            </tabs>
            <descriptionHeight>135</descriptionHeight>
            <description><![CDATA[
                Fields can be included from other, related DataSources by just declaring the name of the
                DataSource and field to include, using the <code>includeFrom</code> property.
                <p>
                In the example below, a DataSource that stores Cities is shown.  It includes the
                field "Country Name" from a related DataSource that stores Countries.  It also
                includes the field "Continent" from an <i>indirectly</i> related DataSource that stores
                Continents.  At the database layer, this related data is all being fetched using an efficient
                SQL join.
                <p>
                Click to edit the "Country Name" field for a row - this field has been configured as a
                ComboBox that edits which Country a City belongs to.  Try shifting a City to a Country on a
                different Continent, and note how the "Continent" field automatically updates.  This happens
                because <code>includeFrom</code> declarations are automatically applied when the server returns
                data to update the UI.
            ]]></description>
        </Example>
        <Example
            id="hbIncludeFromDynamic"
            title="Dynamic Field Include"
            icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
            requiresModules="SCServer"
            jsURL="serverExamples/hibernate/relations/hbIncludeFromDynamic.js">
        >
            <tabs>
                <tab
                    name="cityIncludeFromHB"
                    dataSource="cityIncludeFromHB"
                />
                <tab
                    name="countryIncludeFromHB"
                    dataSource="countryIncludeFromHB"
                />
                <tab
                    name="continentIncludeFromHB"
                    dataSource="continentIncludeFromHB"
                />
                <tab
                    title="CityManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CityManyToOneSimple.java"
                />
                <tab
                    title="CountryManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/CountryManyToOneSimple.java"
                />
                <tab
                    title="ContinentManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/hibernate/relations/ContinentManyToOneSimple.java"
                />
            </tabs>
            <descriptionHeight>110</descriptionHeight>
            <description><![CDATA[
                Fields can be included from other, related DataSources on-demand, on a screen-specific basis,
                by using the <code>includeFrom</code> attribute on a ListGridField.  
                <p>
                In the grid below, declarations in the DataSource cause the "Country Name" field to appear for
                each City.  However the field "Country Code" is included on-demand, just for this grid, by
                declaring the <code>includeFrom</code> attribute.
            ]]></description>
        </Example>
        <Example
            title="Master-Detail (Batch Load and Save)" requiresModules="SCServer"
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png"
            id="masterDetail"
            jsURL="serverExamples/hibernate/masterDetail/masterDetail.js"><tabs>
            <tab name="masterDetail_order" dataSource="masterDetail_orderHB" canEdit="false" />
            <tab name="masterDetail_orderItem" dataSource="masterDetail_orderItemHB" canEdit="false" />
            <tab title="Order.java" 
                 url="serverExamples/hibernate/masterDetail/Order.java" 
                 canEdit="false" doEval="false"/>
            <tab title="Order.hbm.xml" 
                 url="serverExamples/hibernate/masterDetail/Order.hbm.xml" 
                 canEdit="false" doEval="false"/>
            <tab title="OrderItem.java" 
                 url="serverExamples/hibernate/masterDetail/OrderItem.java" 
                 canEdit="false" doEval="false"/>
            <tab title="OrderItem.hbm.xml" 
                 url="serverExamples/hibernate/masterDetail/OrderItem.hbm.xml" 
                 canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>125</descriptionHeight>
            <description><![CDATA[
            This example shows a simple way to implement an update-able parent-child relationship
            with SmartClient, the SmartClient Server and Hibernate.  Fom the 
            various source tabs, it can be seen that "Order" and "OrderItem" are related via 
            a unidirectional set collection in Hibernate.
            The order DataSource also declares its "items" field as being
            of type <code>masterDetail_orderItemHB</code>, which tells SmartClient to use that 
            DataSource as the schema when processing the detail lines.  With this configuration in
            place, creating a UI capable of updating across this parent-child association becomes
            extremely easy (only two lines of SmartClient code, beyond the creation and layout 
            of the visual components themselves, is required).
            <p>
            Click a record in the top grid to see the order's details and the associated detail 
            lines in the form and grid below.
            Edit the order information using this screen (both header and detail - 
            double-click the grid to edit the details); when "Save" is clicked, SmartClient will 
            submit the master and detail information together, and Hibernate will save all 
            changes as a single operation.
            ]]></description>
        </Example>
        <!-- This example is not feature-complete yet, so hiding it for now
        <Example
            title="Object-Oriented Server Approach with Hibernate" requiresModules="SCServer"
            id="largeValueMapHibernate"
            jsURL="serverExamples/hibernate/largeValueMap/largeValueMapHibernate.js"><tabs>
            <tab name="largeValueMap_orderItemHB" dataSource="largeValueMap_orderItemHB" canEdit="false" />
            <tab title="OrderItem.java" 
                 url="serverExamples/hibernate/largeValueMap/OrderItem.java" 
                 canEdit="false" doEval="false"/>
            <tab title="OrderItem.hbm.xml" 
                 url="serverExamples/hibernate/largeValueMap/OrderItem.hbm.xml" 
                 canEdit="false" doEval="false"/>
            <tab title="ValMapSupplyItem.java" 
                 url="serverExamples/hibernate/largeValueMap/ValMapSupplyItem.java" 
                 canEdit="false" doEval="false"/>
            <tab title="ValMapSupplyItem.hbm.xml" 
                 url="serverExamples/hibernate/largeValueMap/ValMapSupplyItem.hbm.xml" 
                 canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
            This example shows the use of Javabeans and Hibernate.  The OrderItem bean has a 
            Hibernate mapping file, which contains an association to the ValMapSupplyItem bean.
            When we request OrderItem objects (via an ordinary DataSource request from the client),
            Hibernate automatically obtains the associated SupplyItem objects.  In the DataSource,
            we refer to properties of the SupplyItem object with a <code>valueXPath</code> - this
            is how we are telling the ListGrid to contain the item name.<p>
            This is a simple example, but the SmartClient Server knows how to apply an XPath to 
            a server-side object graph of arbitrary complexity.
            ]]></description>
        </Example>
        -->
        <Example id="flattenedBeans" title="Data Selection" requiresModules="SCServer"
                 dataSource="flattenedBeans_flatUserHB"
                 icon="[ISO_DOCS_SKIN]/images/iconexperience/branch.png"
		         jsURL="serverExamples/hibernate/flattenedBeans/flattenedBeans.js">
            <tabs><tab title="FlatUser.java" canEdit="false" doEval="false"
                       url="serverExamples/hibernate/flattenedBeans/FlatUser.java"/>
                  <tab title="FlatUser.hbm.xml" canEdit="false" doEval="false"
                       url="serverExamples/hibernate/flattenedBeans/FlatUser.hbm.xml"/>
                  <tab title="Address.java" canEdit="false" doEval="false"
                       url="serverExamples/hibernate/flattenedBeans/Address.java"/>
                  <tab title="Address.hbm.xml" canEdit="false" doEval="false"
                       url="serverExamples/hibernate/flattenedBeans/Address.hbm.xml"/>
            </tabs>
            <descriptionHeight>130</descriptionHeight>
            <description><![CDATA[
            This example shows the SmartClient Server's support for flattening and reconstructing
            hierarchical data, by use of XPaths.  The ListGrid below shows each user's address,
            city and state as if those fields were part of the user's data.  In fact, this address
            information is held in a separate Address bean. This information is extracted from 
            the separate bean at fetch time by the SmartClient Server, based purely on the XPath
            declarations of those fields in the DataSource.
            <p>
            More interestingly, the SmartClient Server is also able to reconstruct the hierarchical
            data from the flattened version, again transparently by use of the XPath.  This means
            that you can update the flattened fields in this example - (e.g. Change a
            user's city and notice how the changes are correctly persisted).
            <p>
            Note also that the User bean has a <code>password</code> attribute which is being 
            completely excluded from this example.  When you specify <code>dropExtraFields</code>
            on a DataSource, as is done here, SmartClient Server returns just those fields 
            defined in the DataSource.  So, in this example, the existing schema can be used,
            whilst easily retaining tight control over what gets delivered to the client.  This 
            includes related entities as well as simple attributes.
            <p>
            Click a record in the grid to see the order's details in the form.  Edit the user
            details and click "Save Changes".  Using the declared XPaths, the SmartClient Server 
            will populate any changed flattened field back into its correct place in the hierarchy,
            allowing the data provider (Hibernate, in this case) to persist the change.
            ]]></description></Example>
        <Example id="hibernateProduction" title="Spring with Beans" requiresModules="SCServer"
                 dataSource="supplyItemSpringDMI"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/database_save.png"
		         jsURL="dataIntegration/java/hibernateProduction.js">
            <tabs><tab title="Spring applicationContext.xml" canEdit="false" doEval="false"
                       url="dataIntegration/java/applicationContext.xml"/>
                  <tab title="SupplyItemDao.java" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItemDao.java"/>
                  <tab title="SupplyItem.hbml.xml" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItem.hbm.xml"/>
                  <tab title="SupplyItem.java" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItem.java"/>
            </tabs>
            <description><![CDATA[
            This example demonstrates how SmartClient can be used to call pre-existing Spring
            business logic, and provides a general sample of integrating with beans-based
            persistence systems.  <b>NOTE: if you want to use Hibernate in a new application,
            use the built-in HibernateDataSource connector, not this code.</b>  The sample code
            shown here has less features than the built-in connector (which supports
            advanced search, multi-level sort, automatic transactions, and other features).
            <P>
            In this example, Hibernate's <code>Criteria</code> object can be created
            from SmartClient's <code>DSRequest</code> in order to fulfill the
            "fetch" operation, with data paging enabled.  Hibernate-managed beans can be
            populated with inbound, validated data with a single method call.
            ]]></description></Example>
        <Example id="javaBeans" title="Java Beans" requiresModules="SCServer"
                 dataSource="supplyItemDMI"
                 showDataSource="false"
                 icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
		         jsURL="dataIntegration/java/javaBeans.js">
            <tabs><tab title="SupplyItemDMI.java" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItemDMI.java"/>
                  <tab title="SupplyItem.java" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItem.java"/>
            </tabs>
            <description>
			<![CDATA[
            SmartClient DataSource operations can be fulfilled by returning Java Beans (aka EJBs 
            or POJOs) from existing business logic.  When the SmartClient 
            <code>DSResponse.setData()</code> API is called, the Java objects are automatically translated 
            to JavaScript, transmitted to the browser, and provided to the requesting component.
            See the sample implementation of the "fetch" operation in <code>SupplyItemDMI.java</code>.
            ]]>
            </description></Example>
        <Example id="DMI" title="DMI" requiresModules="SCServer"
                 dataSource="supplyItemDMI"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/database_edit.png"
		         jsURL="dataIntegration/java/dmi.js">
            <tabs><tab title="SupplyItemDMI.java" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItemDMI.java"/>
                  <tab title="SupplyItem.java" canEdit="false" doEval="false"
                       url="dataIntegration/java/SupplyItem.java"/>
            </tabs>
            <description>
			<![CDATA[
            Direct Method Invocation (DMI) allows mapping of DataSource operations directly 
            to Java methods, via XML configuration in a DataSource descriptor (*.ds.xml file).
            The arguments of your Java methods are automatically populated from the inbound 
            request.  See the sample implementation in <code>SupplyItemDMI.java</code>.
            ]]>
            </description></Example>
        <Example
            id="autoTransactionsHB"
            jsURL="serverExamples/hibernate/autoTransactions/autoTransactions.js" 
            requiresModules="SCServer, transactions"
            title="Auto Transactions"
            icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"
            showSkinSwitcher="false"
            showSource="true"
            dataSource="supplyItemHB"
            >
			<descriptionHeight>100</descriptionHeight>
            <description><![CDATA[
            SmartClient Hibernate DataSources participate fully in automatic transaction 
            management (Power and Enterprise Editions only).<p>
            Drag multiple records from the left-hand grid to the right.  SmartClient will 
            send the updates to the server in a single queue. SmartClient Server will 
            automatically treat that queue as a single database transaction.  This is the
            default behavior, and requires no code or configuration to enable it. However, if required,
            very flexible, fine-grained control over transactions is possible,
            through configuration, code or a combination of the two.
            ]]></description>
        </Example>
        <Example id="uploadHB" title="Upload" requiresModules="SCServer"
		jsURL="serverExamples/hibernate/upload/upload.js"
		icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png"><tabs>
		<tab name="mediaLibraryHB" dataSource="mediaLibraryHB" canEdit="false" />
        <tab title="MediaItem.java" canEdit="false" doEval="false"
             url="serverExamples/hibernate/upload/MediaItem.java" />
		</tabs>
		    <descriptionHeight>190</descriptionHeight>
		<description><![CDATA[
		This example uses a DynamicForm bound to a DataSource with a field of type <code>imageFile</code> to
		enable files to be uploaded and both a ListGrid and TileGrid to display 
		the existing records, via a shared ResultSet.
		<P>
		Enter a Title and select a local image-file to upload and click "Save" to upload the file.
		Note that the file-size is limited to 50K via the DataSourceField property 
		<code>maxFileSize</code> (see the mediaLibrary tab below).
		<P>
		<code>imageFile</code> fields can either display a download/save icon-pair and title, or can render
		the image directly inline.  Use the buttons below to switch between the TileGrid and 
		ListGrid views to see each of these behaviors.  Note that both components can render
		either UI for <code>imageFile</code> fields and will do so automatically, based on the value of 
		<code>field.showFileInline</code>.
		]]>
		</description></Example>
    
     </children></ExampleFolder>
    <ExampleFolder title="JPA" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/cup.png"><description><![CDATA[
        The SmartClient Server's built-in support for JPA/JPA2 allows you to easily use your JPA annotated entities
        in SmartClient's client-side widgets.<p/>
    ]]></description><children>
        <Example
            id="jpaConnector"
            title="Auto Derivation"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            requiresModules="SCServer"
            dataSource="supplyItemJPAAutoDerive"
            jsURL="serverExamples/jpa/jpaConnector.js">
        >
            <tabs>
                <tab
                    title="SupplyItemHB.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/SupplyItemHB.java"
                />
                <tab
                    title="persistence.xml"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/persistence1.xml"
                />
            </tabs>
            <descriptionHeight>175</descriptionHeight>
            <description><![CDATA[
                If you have pre-existing JPA entities, SmartClient can automatically derive fully functional
                DataSources given just the Java classname of the mapped JPA entity.  The grid below is connected
                to a JPA-managed entity via the simple declarations in supplyItemJPAAutoDerive.ds.xml - no other
                configuration or Java code is required beyond the entity itself with the JPA mapping.
                <p/>
                To search, use the controls above the grid's header. Note that data paging is automatically
                enabled. Scroll down to load data on demand. Click on the red icon next to each record to
                delete it. Click on a record to edit it and click "Add New" to add a new record.  Note that the
                editing controls are type sensitive: a date picker appears for the "Next Shipment" field, and
                the "Units" field shows a picklist because its Java type is an Enum.
                <p/>
                DMI can be used to add business logic that takes place before and after JPA operations to
                enforce security or to add additional data validation rules.
            ]]></description>
        </Example>
        <Example
            id="jpa2Connector"
            title="Advanced Filtering"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/funnel.png"
            requiresModules="SCServer,serverCriteria"
            dataSource="worldJPA2"
            jsURL="serverExamples/jpa/jpa2Connector.js">
        >
            <tabs>
                <tab
                    title="World.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/World.java"
                />
                <tab
                    title="persistence.xml"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/persistence2.xml"
                />
            </tabs>
            <descriptionHeight>140</descriptionHeight>
            <description><![CDATA[
                Use the FilterBuilder to construct queries of arbitrary complexity.  The FilterBuilder,
                and the underlying <code>AdvancedCriteria</code> system, support building queries with subclauses
                nested to any depth. Add clauses to the query with the "+" icon and add nested subclauses
                with the "+()" button. Click "Filter" to see the result in the ListGrid.
                <p/>
                Note that this example is backed by a JPA 2.0 DataSource. The SmartClient Server is 
                automatically generating the JPA Criteria Queries to implement the filters that
                the FilterBuilder can assemble. This works adaptively and seamlessly with client-side 
                Advanced Filtering The generated <code>Criteria</code> query will yield exactly the same resultset 
                as the client-side filtering.  This means SmartClient is able to switch to client-side
                filtering when its cache is full, giving a more responsive, more scalable application.
                <p/>
            ]]></description>
        </Example>
        <Example
            id="jpaRelationManyToOneSimple"
            title="Many-to-One Relation"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            requiresModules="SCServer"
            jsURL="serverExamples/jpa/relations/jpaRelationManyToOneSimple.js">
        >
            <tabs>
                <tab
                    name="cityManyToOneSimpleJPA"
                    dataSource="cityManyToOneSimpleJPA"
                />
                <tab
                    name="countryManyToOneSimpleJPA"
                    dataSource="countryManyToOneSimpleJPA"
                />
                <tab
                    title="CityManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CityManyToOneSimple.java"
                />
                <tab
                    title="CountryManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CountryManyToOneSimple.java"
                />
                <tab
                    title="persistence.xml"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/persistenceManyToOneSimple.xml"
                />
            </tabs>
            <descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
                SmartClient handles JPA Many-to-One relationships transparently, such as Cities within
                Countries.  Declare a <code>foreignKey</code> field on the "City" DataSource to indicate the
                use of the related JPA entity "Country".
                <P>
                The grid below shows Cities, but the Country name is automatically shown even though the
                "countryName" is stored in the related JPA entity "Country".  Any fields from any number of
                related entities can be automatically loaded this way.
                <P>
                Click to edit and change the Country of a City.  The list of Countries is automatically
                loaded from the related JPA entity, along with their IDs.  
                <P>
                Changing the Country of a City sends the ID of the new Country back to the server, and
                SmartClient automatically makes all the required JPA calls to persist the change. No
                server-side code needs to be written beyond the JPA beans themselves and their
                annotations.
            ]]></description>
        </Example>
        <Example
            id="jpaRelationOneToMany"
            title="One-to-Many Relation"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            requiresModules="SCServer"
            jsURL="serverExamples/jpa/relations/jpaRelationOneToMany.js">
        >
            <tabs>
                <tab
                    name="cityOneToManyJPA"
                    dataSource="cityOneToManyJPA"
                />
                <tab
                    name="countryOneToManyJPA"
                    dataSource="countryOneToManyJPA"
                />
                <tab
                    title="CityOneToMany.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CityOneToMany.java"
                />
                <tab
                    title="CountryOneToMany.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CountryOneToMany.java"
                />

                <tab
                    title="persistence.xml"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/persistenceOneToMany.xml"
                />
            </tabs>
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
                SmartClient handles JPA One-to-Many relationships transparently, such as a Country that has
                multiple Cities.  Declare a collection field (<code>multiple:true</code>) on the "Country"
                DataSource to indicate you want to load its list of Cities.
                <P>
                Click on a Country below. It's list of Cities is revealed without a separate round trip to the
                server.  Cities can be now edited in the lower grid.  
                <P>
                When data is saved, all changes to the Country and its Cities are sent in one save
                request, and SmartClient automatically makes all the required JPA calls to persist the
                changes. No server-side code needs to be written beyond the JPA beans themselves and
                their annotations.
            ]]></description>
        </Example>
        <Example
            id="jpaIncludeFrom"
            title="Field Include"
            icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
            requiresModules="SCServer"
            jsURL="serverExamples/jpa/relations/jpaIncludeFrom.js">
        >
            <tabs>
                <tab
                    name="cityIncludeFromJPA"
                    dataSource="cityIncludeFromJPA"
                />
                <tab
                    name="countryIncludeFromJPA"
                    dataSource="countryIncludeFromJPA"
                />
                <tab
                    name="continentIncludeFromJPA"
                    dataSource="continentIncludeFromJPA"
                />
                <tab
                    title="CityManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CityManyToOneSimple.java"
                />
                <tab
                    title="CountryManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CountryManyToOneSimple.java"
                />
                <tab
                    title="ContinentManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/ContinentManyToOneSimple.java"
                />
                <tab
                    title="persistence.xml"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/persistenceManyToOneSimple.xml"
                />
            </tabs>
            <descriptionHeight>135</descriptionHeight>
            <description><![CDATA[
                Fields can be included from other, related DataSources by just declaring the name of the
                DataSource and field to include, using the <code>includeFrom</code> property.
                <p>
                In the example below, a DataSource that stores Cities is shown.  It includes the
                field "Country Name" from a related DataSource that stores Countries.  It also
                includes the field "Continent" from an <i>indirectly</i> related DataSource that stores
                Continents.  At the database layer, this related data is all being fetched using an efficient
                SQL join.
                <p>
                Click to edit the "Country Name" field for a row - this field has been configured as a
                ComboBox that edits which Country a City belongs to.  Try shifting a City to a Country on a
                different Continent, and note how the "Continent" field automatically updates.  This happens
                because <code>includeFrom</code> declarations are automatically applied when the server returns
                data to update the UI.
            ]]></description>
        </Example>
        <Example
            id="jpaIncludeFromDynamic"
            title="Dynamic Field Include"
            icon="[ISO_DOCS_SKIN]/images/silkicons/disconnect.png"
            requiresModules="SCServer"
            jsURL="serverExamples/jpa/relations/jpaIncludeFromDynamic.js">
        >
            <tabs>
                <tab
                    name="cityIncludeFromJPA"
                    dataSource="cityIncludeFromJPA"
                />
                <tab
                    name="countryIncludeFromJPA"
                    dataSource="countryIncludeFromJPA"
                />
                <tab
                    name="continentIncludeFromJPA"
                    dataSource="continentIncludeFromJPA"
                />
                <tab
                    title="CityManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CityManyToOneSimple.java"
                />
                <tab
                    title="CountryManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/CountryManyToOneSimple.java"
                />
                <tab
                    title="ContinentManyToOneSimple.java"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/ContinentManyToOneSimple.java"
                />
                <tab
                    title="persistence.xml"
                    canEdit="false"
                    doEval="false"
                    url="serverExamples/jpa/relations/persistenceManyToOneSimple.xml"
                />
            </tabs>
            <descriptionHeight>110</descriptionHeight>
            <description><![CDATA[
                Fields can be included from other, related DataSources on-demand, on a screen-specific basis,
                by using the <code>includeFrom</code> attribute on a ListGridField.  
                <p>
                In the grid below, declarations in the DataSource cause the "Country Name" field to appear for
                each City.  However the field "Country Code" is included on-demand, just for this grid, by
                declaring the <code>includeFrom</code> attribute.
            ]]></description>
        </Example>
        <Example id="uploadJPA" title="Upload" requiresModules="SCServer"
		jsURL="serverExamples/jpa/upload/upload.js"
		icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png"><tabs>
		<tab name="mediaLibraryJPA" dataSource="mediaLibraryJPA" canEdit="false" />
        <tab title="MediaItem.java" canEdit="false" doEval="false"
             url="serverExamples/jpa/upload/MediaItem.java" />
		</tabs>
		    <descriptionHeight>180</descriptionHeight>
		<description><![CDATA[
		This example uses a DynamicForm bound to a DataSource with a field of type <code>imageFile</code> to
		enable files to be uploaded and for both a ListGrid< and  a TileGrid to display 
		the existing records, via a shared ResultSet.  It demonstrates SmartClient's binary 
        upload and download capabilities when using the built-in JPA DataSource.
		<P>
		Enter a Title and select a local image-file to upload and click "Save" to upload the file.
		Note that the file-size is limited to 50k via the DataSourceField property 
		<code>maxFileSize</code> (see the mediaLibrary tab below).
		<P>
		<code>imageFile</code> fields can either display a download/save icon-pair and title, or can render
		the image directly inline.  Use the buttons below to switch between the TileGrid and 
		ListGrid views to see each of these behaviors.  Note that both components can render
		either UI for "imageFile" fields and will do so automatically, based on the value of 
		<code>field.showFileInline</code>.
		]]>
		</description></Example>
    </children></ExampleFolder>
     <ExampleFolder id="transactionsFolder" title="Transactions" isOpen="false" icon="[ISO_DOCS_SKIN]/images/iconexperience/branch.png"><description><![CDATA[
            SmartClient provides robust support for transactional applications.
            <P>
            Queueing makes combining operations together into a single
            transaction extremely easy, for more efficient data loading and transactional saves.
            <P>
            Automatic Transaction Management support in the SmartClient Server, with 
            specific implementations for the built-in SQL and Hibernate DataSources, allows 
            for queued requests to be committed or rolled back as a single database transaction.
            This feature is only available in Power and Enterprise editions.
            <P>
            Transaction Chaining allows for declarative handling of data dependencies
            between operations submitted together in a queue.  This feature is only available
            in Power and Enterprise editions.
     ]]></description><children>
        <Example
            title="Simple Queueing" requiresModules="SCServer"
            id="queuing"
            jsURL="serverExamples/hibernate/queuing/queuing.js"><tabs>
            <tab name="queuing_user" dataSource="queuing_userHB" canEdit="false" />
            <tab name="queuing_order" dataSource="queuing_order" canEdit="false" />
            <tab title="User.java" 
                 url="serverExamples/hibernate/queuing/User.java" 
                 canEdit="false" doEval="false"/>
            <tab title="User.hbm.xml" 
                 url="serverExamples/hibernate/queuing/User.hbm.xml" 
                 canEdit="false" doEval="false"/>
            </tabs>
            <description><![CDATA[
            Queueing allows any set of DataSource operations to be combined into a single HTTP
            request, without requiring any special code to be written to transport the combined
            inputs and outputs.
            <p>
            Click the "Find Orders" button and the example will load both the selected user's
            details and all the orders associated with that user, as a single request.
            Queueing works transparently to the components involved, so for example, scrolling down
            in the orders grid causes data paging to be activated, exactly as though the grid had
            done a fetch that was not combined into a queue.  
            <P>
            As queueing is transparent to components, a screen full of various components
            which need to load data from different sources can participate in a queue without
            any special component-specific code, and with no need to rework how data is
            transferred if new components are added. Each component can be treated as though
            it were standalone.
            <P>
            On the Server-side, queueing makes it simple to focus on secure, reusable data
            operations and other services, which can then be accessed in arbitrary combinations
            according to the data loading and saving requirements of particular screens, with
            no need to write brittle, screen-specific server code.
            <P>
            Queueing works even when the operations are on different data providers (as in this 
            case, where the user details are coming from Hibernate and the order details are coming
            from the SmartClient Server SQL provider).
            ]]></description>
        </Example>
        <Example
            id="autoTransactions"
            jsURL="serverExamples/transactions/autoTransactions/autoTransactions.js" 
            requiresModules="SCServer, transactions"
            title="Automatic Transaction Management"
            icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"
            showSkinSwitcher="false"
            showSource="true"
            dataSource="supplyItem"
            >
            <description><![CDATA[
            Drag multiple records from the left-hand grid to the right.  SmartClient will 
            send the updates to the server in a single queue; SmartClient Server will 
            automatically treat that queue as a single database transaction.  This is the
            default behavior, and requires no code or configuration to enable it. However, if required,
            very flexible, fine-grained control over transactions is possible,
            through configuration, code, or a combination of the two.
            ]]></description>
        </Example>
        <Example
            title="Master/Detail Add" requiresModules="SCServer, chaining"
            id="queuedAdd"
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_insert.png"
            jsURL="serverExamples/sql/queuedAdd/queuedMasterDetailAdd.js"><tabs>
            <tab name="order" dataSource="queuedAdd_order" canEdit="false" />
            <tab name="orderItem" dataSource="queuedAdd_orderItem" canEdit="false" />
            <tab name="supplyItem" dataSource="supplyItem" canEdit="false" />
            <tab name="supplyCategory" dataSource="supplyCategory" canEdit="false" />
            </tabs>
            <descriptionHeight>100</descriptionHeight>
            <description><![CDATA[
            This example makes use of the SmartClient server's support for setting <code>DSRequest</code> 
            properties dynamically at runtime, based on responses to requests earlier in the 
            same queue.<p>
            Edit the order header details, then add one or more lines.  When "Save Order" is 
            clicked, SmartClient will send multiple DataSource requests to the server. One to
            save the Order Header, and one each for every line that has been entered. However, they will combined
            into a single HTTP request, so that a transactional commit is possible. As
            this sample is backed by SmartClient SQLDataSources, the queue is 
            automatically assembled into a single transaction (in Power Edition and above).<p>
            New orders are given an automatically generated sequence value as a primary
            key, which the "orderItems" use to establish a relationship with
            their order.<P>
            As a result of the <code>values</code> tag in the "queuedAdd_orderItem"
            DataSource definition, the server will set the "orderID" property on each order
            item to the unique sequence value assigned to the order header when it was
            saved.<P>
            This entire interaction is accomplished by simply re-using the capability of the
            DataSource to add new records, without the need to write any server-side
            code.  SQL DataSources are shown, but this interaction works with any DataSource
            that can support CRUD operations, including custom DataSources and even a mix of
            DataSources that use different storage systems.<P>
            The <code>values</code> tag (and the similar 
            property <code>criteria</code> tag) are specified using the Velocity
            Template Language, so the support is very flexible.<P>
            ]]></description>
        </Example>
        <Example title="Mass Update" id="massUpdateFSTrans"  ref="massUpdate" 
            icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png">
        <description><![CDATA[
        Click on any cell to start editing, then Tab or Down Arrow past the
        last row in the grid to create a new row. Alternatively, click the "Edit New" button
        to create a new data-entry row at the end of the grid.  When the "Save" button is clicked,
        all changes (changed rows and new orows) are sent to the server in a queue, as a 
        single HTTP request.<p>
        Because all of the changes arrive on the server at once, committing them as a single 
        transaction becomes possible. If the built-in SQL or Hibernate dataSources are being used,
        and the Power edition or above is used, automatic transactional commit is the default.  Plus,
        because SmartClient's queueing support is completely unobtrusive and requires no extra 
        code on either client or server, as soon there is an operation that can update a 
        single record, then it automatically becomes an operation that can participate in SmartClient
        queued updates and automatic transactional commits.
        ]]></description>
        </Example>
        <Example title="Multi-Row Drag &amp; Save" id="databoundDragCopyFST"  ref="databoundDragCopy" 
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_go.png"> 
        <descriptionHeight>160</descriptionHeight>
        <description><![CDATA[
        Drag employee records into the Project Team Members list.  SmartClient recognizes that the 
        two DataSources are linked by a <code>foreignKey</code> relationship, and automatically uses that 
        relationship to populate values in the records that are added when a drop occurs. SmartClient 
        also populates fields based on current criteria and maps explicit title Fields as necessary.<p>
        Multi-row selection is enabled on the Employees grid, so select multiple employees 
        can be selected and dragged to the Teams grid in one action.  As the grids are databound, this drag and 
        drop action will send data operations to the server automatically, using SmartClient 
        queueing to ensure all the updates arrive on the server together and, as this example
        is backed by a SmartClient SQLDataSource, are committed together in a single database 
        transaction (in Power Edition and above).<p>
        ]]> </description>
        </Example> 
        <Example id="row-drag-save-pivot" title="Many-to-Many Drag &amp; Save" 
                 icon="[ISO_DOCS_SKIN]/images/silkicons/table_go.png"
                 jsURL="serverExamples/transactions/manyToManyDragSave/manyToManyDragSave.js"
                 showSource="true"> 
            <tabs>
                <tab title="employeesByTeam" dataSource="employeesByTeam" canEdit="false"/>
                <tab title="teams" dataSource="teams" canEdit="false"/>
                <tab title="teamMembers2" dataSource="teamMembers2" canEdit="false"/>
            </tabs>
            <descriptionHeight>160</descriptionHeight>
            <description><![CDATA[
            Select a team.  The ListGrid on the left will populate with employees not currently
            in the selected team while the ListGrid on the right will populate with the employees who
            are currently part of the selected team.  Drag employees from the left to the right
            to add the selected employees to the team.
            <p>This sample uses a traditional pivot table design for the many-to-many relationship
            (many employees can be part of a team and an employee can be part of many teams).
            <p>Multi-record selection is enabled on the Employees grid, so multiple employees can be
            selected and dropped into a team in one action.  Because these two grids are databound, 
            SmartClient will automatically utilize queueing to ensure that all updates are performed on
            the server in a single transaction.
            ]]> </description>
        </Example>
        <Example
            id="rollback"
            jsURL="serverExamples/transactions/rollback/rollback.js" 
            requiresModules="SCServer, transactions"
            title="Rollback"
            icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_undo.png"
            showSkinSwitcher="false"
            showSource="true"
            descriptionHeight="140"
            >
            <tabs>
              <tab name="rbCountryTransactions" dataSource="rbCountryTransactions" canEdit="false" />
              <tab name="worldDS" dataSource="worldDS" canEdit="false" />
            </tabs>
            <description><![CDATA[
            SmartClient Server detects when a <code>DSRequest</code> that is part of a transaction fails,
            and automatically rolls the complete transaction back.<p>
            Change several records in the grid, then click "Save".  The underlying DataSource 
            specifies a <code>hasRelatedRecord</code> validation on the country name, looking up against 
            all the countries of the world. if country's name  is changed to something 
            non-existent, that validation will fail and the entire transaction will be rolled
            back.  All of the changes will remain pending (the changed values will still be 
            shown in blue), and if the page is refreshed note that the data is 
            unchanged on the server.<p>
            Correct the validation error and click "Save" again, the transaction will 
            be committed and the changes will be persisted.
            ]]></description>
        </Example>
        <Example
            id="jdbcOperations"
            jsURL="serverExamples/transactions/jdbcOperations/jdbcOperations.js" 
            requiresModules="SCServer, transactions"
            title="Transactional User Operations"
            icon="[ISO_DOCS_SKIN]/images/silkicons/user_go.png"
            showSkinSwitcher="false"
            showSource="true"
            descriptionHeight="215"
            >
            <tabs>
              <tab name="countryTransactions" dataSource="countryTransactions" canEdit="false" />
              <tab name="lastUpdated" dataSource="lastUpdated" canEdit="false" />
              <tab name="JDBCOperations.java" 
                   url="serverExamples/transactions/jdbcOperations/JDBCOperations.java" 
                   canEdit="false" doEval="false" />
            </tabs>
            <description><![CDATA[
            User-written operations, in this example, hand-crafted JDBC updates, can be 
            included in SmartClient automatic transactions, and will be committed or rolled 
            back alongside the normal SmartClient operations.<p>
            Edit rows in the grid, then click "Good Save".  The changes will be 
            persisted to the database as part of a queue that also includes a user-written 
            JDBC update to a "lastChanged" table; the DMI method has been written to use 
            the SmartClient transaction (see the "JS" and "JDBCOperations.java" tabs). 
			The example will then fetch the current value from the lastUpdated table and display it
			in the blue label. Note that it has been updated.<p>
            Now make further changes and click "Bad Save".  This causes a deliberately 
            broken version of the user-written JDBC update to be run, resulting in an SQL error
            and a rolled-back transaction (with an error dialog referring to an unknown column).  
            Note that the changes have not been saved (they are still presented in blue, to show that
			they are pending) and the "lastUpdated" label has not changed. The entire transaction, 
			both SmartClient requests and the user-written query, have all been rolled back. Now click "Good Save",
			and see how the pending changes are persisted and the "lastUpdated" label changes to reflect this.
            ]]></description>
        </Example>
        <!-- Example - *** WORK IN PROGRESS! ***
            id="userTransactions"
            jsURL="serverExamples/transactions/userTransactions/userTransactions.js" 
            requiresModules="SCServer"
            title="User-Created Transactions"
            icon="[ISO_DOCS_SKIN]/images/silkicons/database_gear.png"
            showSkinSwitcher="false"
            showSource="true"
            descriptionHeight="120"
            >
            <tabs>
              <tab name="countryTransactions" dataSource="countryTransactions" canEdit="false" />
              <tab name="lastUpdated" dataSource="lastUpdated" canEdit="false" />
              <tab name="userTransactionsServerSide.jsp" 
                   url="serverExamples/transactions/userTransactions/userTransactionsServerSide.jsp" 
                   canEdit="false" doEval="false" />
            </tabs>
            <description><![CDATA[
            Edit rows in the grid, then click "Good Save".  Your changes will be 
            persisted to the database as part of a transaction that also includes a user-
            written JDBC update to a "lastChanged" table (see the 
            <code>userTransactionsServerSide.jsp</code> tab).  The example will then fetch
            the current value from the lastUpdated table and display it in the blue label;
            you will see that it has been updated.<p>
            Now make further changes and click "Bad Save".  This causes a deliberately 
            broken version of the user-written JDBC update to be run, resulting in a SQL error
            and a rolled-back transaction.  Note that your changes have not been saved (they
            are still presented in blue, to show that they are pending) and the "last updated"
            label has not changed; the entire transaction, both SmartClient requests and 
            user-written query, has been rolled back.  If you now click "Good Save", your pending
            changes will be persisted and the "last updated" label will change to reflect this.
            ]]></description>
        </Example -->
    </children></ExampleFolder>
    <ExampleFolder title="Custom DataSources" isOpen="false" 
                   icon="[ISO_DOCS_SKIN]/images/silkicons/database_edit.png"><description>
        Examples showing how to leverage the SmartClient Server to create partially or completely
        customized DataSource implementations.
    </description><children>
        <Example
            id="javabeanWizard"
            jsURL="serverExamples/other/vb_Javabean.js" requiresModules="SCServer"
            title="Javabean Wizard"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png"
            showSkinSwitcher="false"
            showSource="false"
            ><description><![CDATA[
            SmartClient's Visual Builder tool provides an extremely easy and completely codeless 
            way to create DataSources based on your existing Javabeans and POJOs.  Click
            the "New" button, select "JavaBean", and enter the name of an existing Javabean 
            class.  Visual Builder will create a DataSource descriptor that is almost complete -
            Simply connect it up to the custom DataSource implementation with the 
            <code>serverConstructor</code> property and it's ready to go.
            ]]></description></Example>
        <Example
            title="Simple (Hardcoded)" requiresModules="SCServer"
            id="customDataSource"
            icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_insert.png"
            jsURL="serverExamples/other/customDataSource/customDataSource.js"><tabs>
            <tab name="user" dataSource="customDataSource_user" canEdit="false" />
            <tab title="UserDataSource.java" 
                 url="serverExamples/other/customDataSource/UserDataSource.java" 
                 canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>150</descriptionHeight>
            <description><![CDATA[
            This example shows an entirely custom DataSource.  It is created by extending 
            <code>BasicDataSource</code> and implementing the four core CRUD methods.  In this 
            case, a static List of Maps is maintained that are initialized with hard-coded data
            every time the server starts (although this code could actually do anything). This 
            approach allows completely custom data operations to be simply plugged in to the
            SmartClient Server framework.<p>
            Note also that this code deals directly with Java Maps and 
            Lists, without worrying about format conversions, even custom code 
            leverages the SmartClient Server's automatic and transparent translation of request
            data, from JSON to Java and back to JSON.
            ]]></description>
        </Example>
        <Example
            title="ORM DataSource" requiresModules="SCServer"
            id="ormDataSource"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/objects_exchange.png"
            jsURL="serverExamples/other/ormDataSource/ormDataSource.js"><tabs>
            <tab name="ormDataSource_country" dataSource="ormDataSource_country" canEdit="false" />
            <tab title="ORMDataSource.java" 
                 url="serverExamples/other/ormDataSource/ORMDataSource.java" 
                 canEdit="false" doEval="false"/>
            <tab title="Country.java" 
                 url="serverExamples/other/ormDataSource/Country.java" 
                 canEdit="false" doEval="false"/>
            <tab title="Country.hbm.xml" 
                 url="serverExamples/other/ormDataSource/Country.hbm.xml" 
                 canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>200</descriptionHeight>
            <description><![CDATA[
            This example shows an entirely custom DataSource that connects SmartClient Server to
            Hibernate. It is a very simple implementation created by extending <code>BasicDataSource</code>
            and implementing the four core CRUD methods. In this case, a single DataSource
            implementation handles a single Hibernate entity. Features such as data pagination, server-side sorting
            and filtering are not implemented here.<p>
            Creating an equivalent adapter for Toplink or Ibatis or some other ORM solution would
            be a fairly simple matter of replacing the Hibernate-specific code in this example
            with the equivalent specifics from the other ORM system.
            <p>
            As with the other custom DataSource examples, note how the <code>ORMDataSource.java</code> 
            code deals entirely in native Java objects - even entirely custom DataSources benefit
            from SmartClient Server's robust and comprehensive Javascript<->Java translation.
            ]]></description>
        </Example>
        <Example
            title="Reusable ORM DataSource" requiresModules="SCServer"
            id="reusableORMDataSource"
            icon="[ISO_DOCS_SKIN]/images/iconexperience/objects_exchange.png"
            jsURL="serverExamples/other/reusableORMDataSource/reusableORMDataSource.js"><tabs>
            <tab name="reusableORMDataSource_supplyItem" dataSource="reusableORMDataSource_supplyItem" canEdit="false" />
            <tab name="reusableORMDataSource_country" dataSource="reusableORMDataSource_country" canEdit="false" />
            <tab title="ReusableORMDataSource.java"
                 url="serverExamples/other/reusableORMDataSource/ReusableORMDataSource.java"
                 canEdit="false" doEval="false"/>
            <tab title="SupplyItemHB.java"
                 url="serverExamples/other/reusableORMDataSource/SupplyItemHB.java"
                 canEdit="false" doEval="false"/>
            <tab title="Country.java"
                 url="serverExamples/other/reusableORMDataSource/Country.java"
                 canEdit="false" doEval="false"/>
            <tab title="Country.hbm.xml"
                 url="serverExamples/other/reusableORMDataSource/Country.hbm.xml"
                 canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>220</descriptionHeight>
            <description><![CDATA[
            This example shows an entirely custom DataSource that connects SmartClient Server to
            Hibernate (note that this is just an example of the principles involved - SmartClient
            Server's built-in Hibernate support is considerably more sophisticated than the
            simple adapter shown here).  It is created by extending <code>BasicDataSource</code>
            and implementing the four core CRUD methods.  In this case, the DataSource is connecting
            requests to Hibernate <code>Criteria</code> queries and the <code>saveOrUpdate</code>
            method.<p>
            This implementation, though simple, is fully functional and could be used unchanged
            in a real application.  It supports all four CRUD operations, as well as data pagination,
            server-side sorting and filtering, client cache synchronization and 
            is actually persisting the data to a real database. In this case, the single DataSource
            implementation handles two different entities using Reflection.
            Note that it is a simplified version of the built-in connector that handles <code>AdvancedCriteria</code>
            filtering.<p>
            As with other custom DataSource examples, note how the <code>ORMDataSource.java</code>
            code deals entirely in native Java objects. Even entirely custom DataSources benefit
            from SmartClient Server's robust and comprehensive Javascript<->Java translation.
            ]]></description>
        </Example>
		
		<Example
            title="Editable Server-Side DataSource"
            id="editableServerSideDataSource"
            jsURL="serverExamples/other/editableServerSideDataSource/editableServerSideDataSource.js"
            requiresModules="SCServer"
            dataSource="dynamicDSFields">
            <tabs>
                <tab title="DynamicDSFields.data.xml"
                     url="serverExamples/other/editableServerSideDataSource/dynamicDSFields.data.xml"
                     canEdit="false" doEval="false"/>
                <tab title="GeneratorSetup.java"
	                 url="serverExamples/other/editableServerSideDataSource/GeneratorSetup.java"
                     canEdit="false" doEval="false"/>
            </tabs>
            <descriptionHeight>100</descriptionHeight>
            <description><![CDATA[
           	This example demonstrates a DataSource whose definition is stored in a SQL database rather
		    than in a static *.ds.xml file.  The fields of the DataSource can be editted in the grid
		    below. Pressing "Reload" shows a DynamicForm bound to the modified DataSource.
		    <P>
		    This pattern can be used to allow end users to dynamically change the definition of
		    DataSources in an application. For example, add new fields, or add additional validators
		    to existing fields.
            ]]></description>
        </Example>
    </children></ExampleFolder>

    <ExampleFolder
    showSkinSwitcher="true"
    title="Export"
    isOpen="false"
    icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"><description>
    Exporting Data from DataSources and DataBoundComponents.
    </description><children>

    <Example title="Excel Export" id="exportFS" ref="export" 
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"/>

    <Example
        id="formattedExportBuiltin"
        title="Formatted Export (Declared Formats)"
        requiresModules="SCServer"
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"
        descriptionHeight="160"
        jsURL="grids/formattedExportBuiltin.js"><tabs>
        <tab title="worldDSExport" url="grids/ds/worldSQLDSExport.ds.xml" canEdit="false" />
        </tabs><description><![CDATA[
            Exporting client-side data from a DataBoundComponent is possible with SmartClient using 
            declared format strings that are auto-converted to Excel format at export time. This means that
            data is exported as seen in the component, including all of the effects of client-side formatters
            (except for custom formatters written in Javascript code) and hilites.  Data exported this way
            appears in the spreadsheet with the same formatting seen in the client, but retains its underlying
            date, time or number value - this is usually the ideal scenario.
            <p>In the example below, choose an export format from the list, decide 
            whether to download the results or view them in a window using the checkbox and 
            click the "Export" button.  
            <p>Data is exported according to the filters and sort order on the grid and includes
            the formatted values and field-titles as seen in the grid.
        ]]></description></Example>

    <Example
        id="formattedExport"
        title="Formatted Export (Custom Formatters)"
        requiresModules="SCServer"
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"
        descriptionHeight="160"
        jsURL="grids/formattedExport.js"><tabs>
        <tab title="worldDSExport" url="grids/ds/worldSQLDSExport.ds.xml" canEdit="false" />
        </tabs><description><![CDATA[
            Exporting client-side data from a DataBoundComponent is possible with SmartClient. This means 
            the data as seen in the component, including all of the effects of all client-side formatters 
            (including custom formatters) and hilites.  Data exported this way appears in the spreadsheet
            as formatted text.  In the particular case of dates, this behavior can be overridden for  
            each export, because exporting formatted dates can be undesirable - if the value 
            is exported as a formatted string, Excel is not able to recognize it as a date.<p>
            Custom formatting for dates is often not necessary, because declared FormatStrings are flexible
            enough to handle the majority of formatting requirements.  The example below shows a 
            (rather contrived) case where custom formatters really are required.
            <p>In the example, choose an export format from the list, decide 
            whether to download the results or view them in a window using the checkbox and 
            click the "Export" button.  
            <p>Data is exported according to the filters and sort order on the grid and includes
            the formatted values and field-titles as seen in the grid.  Depending on how you set the
            "export dates as formatted strings" checkbox, you will either see dates with some default
            format, or the actual strings shown in the ListGrid.
        ]]></description></Example>

    <Example
        id="formattedServerExport"
        title="Formatted Server-Side Export"
        requiresModules="SCServer"
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"
        descriptionHeight="160"
        jsURL="grids/formattedServerExport.js"><tabs>
        <tab title="worldDSExportWithFormats" url="grids/ds/worldSQLDSExportWithFormats.ds.xml" canEdit="false" />
        </tabs><description><![CDATA[
            Using format strings declared in your DataSource descriptor files, it is possible to export 
            formatted values to spreadsheet packages like Excel purely server-side.  Declaring formats in the 
            DataSource descriptor also allows you to share formats between client-side and server-side code, so
            a single declaration pervasively affects how a field is formatted, both client-side and for exports.
            Data exported this way appears in the spreadsheet with the same formatting seen in the client
            (assuming you are sharing the format client-side), but retains its underlying date, time or number 
            value - this is usually the ideal scenario.
            <p>In the example below, choose an export format from the list, decide 
            whether to download the results or view them in a window using the checkbox and 
            click the "Export" button.  
            <p>Data is exported according to the filters and sort order on the grid and includes
            the formatted values and field-titles as seen in the grid.
        ]]></description></Example>

    <Example
        id="pdfExport"
        title="PDF Export"
        requiresModules="SCServer"
        icon="[ISO_DOCS_SKIN]/images/silkicons/printer.png"
        jsURL="serverExamples/export/pdfExport.js"><tabs>
        <tab title="countryData" url="grids/data/countryDataDetail.js"/>
        </tabs><description><![CDATA[
        SmartClient provides comprehensive support for rendering UI into a print-friendly
        fashion, and exporting to PDF. 
        <p>        
        Click the "Print Preview" button and note the following things:
        <ul>
        <li>All components have simplified appearance (eg gradients omitted) to be legible in 
        black and white</li>
        <li>The ListGrid had a scrollbar because it wasn't big enough to show all records, 
        but the printable view shows all data</li>
        <li>Buttons and other interactive controls that are not meaningful in print view are omitted</li>
        </ul>
        Click the "Export" button to download a .pdf of the printed view.
        ]]></description></Example>

    <Example
        id="customExport"
        title="Custom Export"
        requiresModules="SCServer"
        icon="[ISO_DOCS_SKIN]/images/silkicons/page_white_excel.png"
		descriptionHeight="125"
        jsURL="serverExamples/sql/customExport/customExport.js"><tabs>
        <tab title="CustomExportDMI.java" 
             url="serverExamples/sql/customExport/CustomExportDMI.java"
             canEdit="false" doEval="false"/>
        <tab title="worldDSExportCustom" 
                url="serverExamples/sql/customExport/worldDSExportCustom.ds.xml" 
                canEdit="false" />

        </tabs><description><![CDATA[
            It is possible to produce a formatted export using DMI and affect the data server-side.
            This example shows a normal export via a DMI in an <code>operationBinding</code>, where the DMI
            enhances the exported data, formatting the "Independence" date field and 
            adding a calculated field "gdppercapita" on the server-side.
            <p>Choose an Export format from the list, decide 
            whether to download the results or view them in a window using the checkbox and 
            click the "Export" button.  In this case, exporting to all formats is achieved via
            <code>operationBindings</code> that specify the server DMI and, in the case of exports to JSON,
            with the <code>exportAs</code> flag.  See the "JS" and "worldDSExportCustom"
            tabs below.
        ]]></description></Example>

    <Example
        id="customExportCustomResponse"
        title="Custom Export (Custom Response)"
        requiresModules="SCServer"
        icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"
        jsURL="serverExamples/sql/customExport/customExportCustomResponse.js"><tabs>
        <tab title="CustomExportCustomResponseDMI.java" 
             url="serverExamples/sql/customExport/CustomExportCustomResponseDMI.java"
             canEdit="false" doEval="false"/>
        <tab title="supplyItemExport.ds.xml" 
                url="serverExamples/sql/customExport/supplyItemExport.ds.xml" 
                canEdit="false" />

        </tabs><description><![CDATA[
            Entirely custom data can be exported via a DMI.  Click the button to issue a call
            to <code>dataSource.exportData()</code> with an <code>operationId</code> that specifies a server DMI.  In
            this example, the DMI method ignores all the regular export parameters, calls
            <code>doCustomResponse()</code> and writes directly into the response output stream.
        ]]></description></Example>

        </children>
    </ExampleFolder>

    <Example id="auditing" title="Auditing" requiresModules="SCServer"
                dataSource="supplyItemAudited" jsURL="serverExamples/auditing/auditing.js"
                icon="[ISO_DOCS_SKIN]/images/silkicons/application_side_boxes.png">
             <descriptionHeight>177</descriptionHeight>
             <description><![CDATA[
                DataSources can automatically capture a log of changes by storing Records in a second
            DataSource, called an "audit DataSource".
            <p>
            Click in the grid below to edit <code>supplyItem</code> records.  Underneath the separator
            labeled "Browse Audit Data" is a second grid that shows the audit data captured as changes
            are made to <code>supplyItem</code> records.
            <p>
            The audit DataSource is automatically created, and because it's a normal DataSource, you
            can simply bind a ListGrid to it to view the audit data, and the audit data is also
            searchable just like any DataSource.
            <p>
            Enabling this feature just requires setting <code>audit="true"</code> in the DataSource
            definition (.ds.xml file); the audit DataSource is created automatically, and for
            SQLDataSource, even the underlying SQL table is automatically created so no other settings
            are needed.
         ]]></description></Example>
    
    <ExampleFolder
            showSkinSwitcher="true"
            title="Upload / Download"
            isOpen="false"
            icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png">
            <description>
                Samples with Upload and Download files
            </description>
       <children>
         <Example id="upload" title="Upload" requiresModules="SCServer"
                  icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png"
                  jsURL="serverExamples/sql/upload/upload.js">
             <tabs>
                  <tab name="mediaLibrary" dataSource="mediaLibrary" canEdit="false" />
             </tabs>
             <descriptionHeight>177</descriptionHeight>
             <description><![CDATA[
                This example uses a DynamicForm bound to a DataSource with a field of type <code>imageFile</code> to
                enable files to be uploaded to both a ListGrid and a TileGrid, to display 
                the existing records, via a shared ResultSet.
                <P>
                Enter a Title and select a local image-file to upload and click "Save" to upload the file.
                Note that the file-size is limited to 50k via the DataSourceField property 
                <code>maxFileSize</code> (see the mediaLibrary tab below).
                <P>
                <code>imageFile</code> fields can either display a download/save icon-pair and title, or can render
                the image directly inline.  Use the buttons below to switch between the TileGrid and 
                ListGrid views to see each of these behaviors.  Note that both components can render
                either UI for <code>imageFile</code> fields and will do so automatically, according to the value of 
                <code>field.showFileInline</code>.
         ]]></description></Example>
                                     
        <Example id="batchUpload" title="Batch Data Upload" requiresModules="SCServer, batchUploader"
                  dataSource="supplyItem"
                  icon="[ISO_DOCS_SKIN]/images/iconexperience/server_from_client.png"
                  jsURL="serverExamples/other/batchUpload/batchUploadExample.js">
                <descriptionHeight>100</descriptionHeight>
                <description><![CDATA[
                 This example shows the BatchUploader in action.  The BatchUploader encapsulates the 
                 end-to-end process of importing flat data into a DataSource, including validation of
                 the import data, all without any client or server-side code required.
                 <P>
                 Follow the instructions in the example.  Note that the download link is provided to 
                 give suitable example data to try with the BatchUploader - this would not
                 normally be downloaded.
         ]]></description></Example>
                                                           
         <Example title="MultiFileItem" id="multiFileItem" jsURL="forms/dataTypes/multiFileItem.js"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/application_get.png">
				 <description>
                     &lt;P&gt;This example shows the behavior of a multiple file upload widget.&lt;/P&gt;
                     &lt;P&gt;When using this, implement cascading record deletion server-side,
                     either with the SQL schema for the table, or with DMI.&lt;/P&gt;
                 </description>
                 <tabs>
                     <tab title="uploadTest" 
                          url="forms/dataTypes/uploadTest.ds.xml" 
                          canEdit="false" />
                     <tab title="uploadedFiles" 
                          url="forms/dataTypes/uploadedFiles.ds.xml" 
                          canEdit="false" />
                 </tabs>
         </Example>
         <Example
                id="customDownload"
                title="Custom Download"
                requiresModules="SCServer"
                icon="[ISO_DOCS_SKIN]/images/silkicons/application_put.png"
                descriptionHeight="100"
                dataSource="supplyItemDownload" showDataSource="true"
                jsURL="serverExamples/other/customDownload/customDownload.js">
            <tabs>
                <tab title="CustomDownload.java" 
                     url="serverExamples/other/customDownload/CustomDownload.java"
                     canEdit="false" doEval="false"/>
            </tabs><description><![CDATA[
                This sample shows a custom download in which server-side Java logic generates data to be downloaded to the user. 
				This pattern can be used to download a file that is derived from DataSource data, such as exporting DataSource
				data in a custom text format, or via third-party libraries that can produce some kind of structured file 
				(such as an .rtf or .pdf file).
                <P>
                Select multiple records in the grid below and press the "Download Descriptions" button. This will produce a simple
				text file with descriptions for all of the selected records.
                ]]></description>
        </Example>
        <Example
                id="customBinaryField"
                title="Custom Binary Field"
                requiresModules="SCServer"
                icon="[ISO_DOCS_SKIN]/images/silkicons/database_save.png"
                dataSource="customBinaryField" showDataSource="true"
                jsURL="serverExamples/other/customBinaryField/customBinaryField.js">
            <tabs>
                <tab title="CustomBinaryFieldDataSource.java" 
                     url="serverExamples/other/customBinaryField/CustomBinaryFieldDataSource.java"
                     canEdit="false" doEval="false"/>
            </tabs><description><![CDATA[
                Support for binary fields is built-in to the framework, including saving binary field values to SQL, Hibernate or JPA,
				for downloading later.
                <P>
                This example shows how to implement a binary field if a Custom DataSource were being built, that does not use the built-in
				support for binary field persistence.
                <P>
                UI controls with built-in support for binary fields will then show controls for uploading and downloading files, which will 
				work with any custom DataSource.
                ]]></description>
        </Example>
       </children>
    </ExampleFolder>
    
    <ExampleFolder showSkinSwitcher="true" title="Real-Time Messaging" isOpen="false"
        icon="[ISO_DOCS_SKIN]/images/silkicons/database_lightning.png">
	    <description>
	     RTM module provides low-latency, high data volume streaming
         capabilities for latency-sensitive applications such as trading desks and operations
         centers.
	    </description>
    	<children>
		    <Example id="portfolioGrid" title="Portfolio Grid" requiresModules="RealtimeMessaging"
		        icon="[ISO_DOCS_SKIN]/images/silkicons/coins.png"
		        jsURL="serverExamples/other/rtm/stockQuotes.js" dataSource="stockQuotes" showDataSource="true" >
		        <tabs>
		            <tab title="stockQuotesData" url="serverExamples/other/rtm/stockQuotes.data.xml" canEdit="false" doEval="false"/>
		        </tabs>
			    <descriptionHeight>115</descriptionHeight>
		        <description><![CDATA[
		        The grid below is receiving simulated, real-time updates of stock data via the Real Time Messaging
		        (RTM) module.  The RTM module provides low-latency, high data volume streaming
		        capabilities for latency-sensitive applications such as trading desks and operations
		        centers.
		        <P>
		        Randomly generated updates will stream from the server for 90 seconds. Click "Generate
		        More Updates" to restart streaming.  
		        <P>
		        The RTM module can connect to Java Message Service (JMS) channels without writing any
		        code, or can be connected to custom messaging solutions with a simple adapter.
		        ]]>
		        </description>
		    </Example>
		        
			<Example id="stockQuotesChart" title="Stock Chart" requiresModules="Drawing,Analytics,RealtimeMessaging"
		        jsURL="serverExamples/other/rtm/stockQuotesChart.js" dataSource="stockQuotes" showDataSource="true" 
		        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_line.png">
		        <tabs>
		            <tab title="stockQuotesData" url="serverExamples/other/rtm/stockQuotes.data.xml" canEdit="false" doEval="false"/>
		        </tabs>
			    <descriptionHeight>120</descriptionHeight>
		        <description><![CDATA[
		        The chart below is receiving simulated, real-time updates to stock values via the Real
		        Time Messaging (RTM) module.  The RTM module provides low-latency, high data
		        volume streaming capabilities for latency-sensitive applications such as
		        trading desks and operations centers.
		        <P>
		        Randomly generated updates will stream from the server for 90 seconds. Click "Generate
		        More Updates" to restart streaming.  
                <P>
                Right click on the chart to switch the type of visualization.
		        ]]>
		        </description>
		    </Example>
        </children>
    </ExampleFolder>
	
	<ExampleFolder title="Server Scripting" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/sc_insertformula.png"><description>
        Simple business logic and validation rules can be embedded directly in *.ds.xml files.  Use Java, or scripting
		languages such as Groovy or JavaScript.
		</description>
		<children>
			<Example
				title="User-Specific Data" requiresModules="SCServer,customSQL"
				id="scriptingUserSpecificData"
				icon="[ISO_DOCS_SKIN]/images/silkicons/user_orange.png"
				jsURL="serverExamples/scripting/userSpecificData/userSpecificData.js"><tabs>
                                <tab name="scripting_cartItem" dataSource="scripting_cartItem" canEdit="false" />
				<tab title="supplyItem" url="supplyItem.ds.xml" canEdit="false"/>
				</tabs>
				<descriptionHeight>180</descriptionHeight>
				<description><![CDATA[
				This example shows the use of some simple user-written server code in conjunction with
				SmartClient databound dragging features and the SmartClient SQL DataSource and Server Scripting,
				to implement a simple, but secure, shopping cart example.
				<p>
				Via Server-side Scripting, the "cartItem" DataSource declares
				that all DataSource operations should go through a custom server script
				<code>DataSource.script</code> before proceeding to read or write
				the database. <code>DataSource.script</code> adds the current sessionId to the
				<code>DSRequest</code>, so that the user can only read and write to their own shopping cart.
				<P>
				Drag items from the left-hand grid to the right-hand grid.  Edit the quantity
				in the right-hand grid, or delete records.  Verify that the example
				is protecting each user's data from others by running the example in two different
				browsers (eg one Firefox and one IE). This creates distinct sessions with separate
				carts.
				]]></description>
			</Example>

                        <Example id="inlineScriptValidation2" title="Validation" requiresModules="SCServer"
                             dataSource="inlineScript_orderForm"
                             icon="[ISO_DOCS_SKIN]/images/silkicons/table_row_delete.png"
                             jsURL="dataIntegration/java/inlineScriptValidation.js">
                        <tabs>
                            <tab title="StockItem" dataSource="StockItem" canEdit="false"/>
                        </tabs>
                        <description><![CDATA[
                        Use the "Item Id" ComboBox to select an item,  enter a very large quantity (999999)
                        and press the "Submit Order" button.
                        <P/>
                        The resulting validation error is based upon a server-side condition specified in
                        the validator using inline scripting. It checks a related DataSource (StockItem)
                        to see if there is sufficient quantity in stock to fulfill the order.
                        ]]></description></Example>
		</children>
	</ExampleFolder>
    
    <Example id="HrssFeed" title="HTTP Proxy" ref="rssFeed" requiresModules="SCServer"
            icon="[ISO_DOCS_SKIN]/images/silkicons/feed.png">
            <descriptionHeight>120</descriptionHeight>
        <description><![CDATA[
            The SmartClient Server includes an HTTP Proxy servlet which supports contacting REST and
            WSDL web services as though they were hosted by a local web server, avoiding the "same origin
            policy" restriction which normally prevents web applications from accessing remote
            services.
            <P>
            The proxy is used automatically whenever an attempt to contact a URL on another host is performed. No
            special code is needed.  In this example, a DataSource is configured to download the
            Slashdot RSS feed, with no server-side code or proxy configuration required.
            <P>
            Configuration files allow for restricting proxying to specific
            services that should be accessible to users through your application.
        ]]></description>
    </Example>
    
</children></ExampleFolder>

<!-- Charts -->
<ExampleFolder title="Charting" requiresModules="Drawing,Analytics" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png">
<description><![CDATA[
    SmartClient supports advanced charting components that work in all supported browsers,
    including mobile browsers, without requiring plugins and without writing browser-specific
    code.
    <P>
    SmartClient charting components are data-aware, and allow end users to switch both the type
    of chart and the placement of data on the fly.
]]></description><children>
        <Example title="Simple Chart" id="simpleChart" jsURL="charts/simpleChart.js" requiresModules="Drawing,Charts"
            icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png">
        <description><![CDATA[
            <p>Charts can be created with inline Javascript data.</p>

            <p>Use the "Chart Type" selector below to see same data rendered by multiple different chart types.
            Right-click on the chart to change the way data is visualized.</p>
        ]]></description>
    </Example>
    <Example title="Multi-Series Chart"
             id="multiSeriesChart"
             icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png"
             jsURL="charts/multiSeriesChart.js"
             requiresModules="Drawing,Charts">
        <tabs>
            <tab url="charts/multiSeriesData.js" title="Data" />
        </tabs>
        <description><![CDATA[
            <p>Multi-series charts can be viewed with "stacked" data (to show totals) or "unstacked" to compare
            values from each series. The "Area" chart type defaults to using stacked data, while the "Line" chart
            type defaults to unstacked. Use the default setting, or explicitly specify whether to stack data.</p>
            <p>Use the "Chart Type" selector to see the same data rendered by multiple different chart types.
            Right-click on the chart to change the way data is visualized.</p>
        ]]></description>
    </Example>
    <Example title="Grid Charting" id="gridCharting" jsURL="charts/gridChart.js" requiresModules="Drawing,Charts"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png">
        <description>
        Data loaded into a ListGrid can be charted with a single API call.
        &lt;P&gt;
        Use the "Chart Type" selector below to see the same data rendered by multiple different
        chart types.  Right-click on the chart to change the way data is
        visualized.
        &lt;P&gt;
        Edit the data in the grid to have the chart regenerated automatically.
        </description>
    </Example>
    <Example title="Dynamic Data"
             id="dynamicDataCharting"
             jsURL="charts/dynamicData.js"
             icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png"
             dataSource="productRevenue"
             requiresModules="Drawing,Charts">
        <descriptionHeight>110</descriptionHeight>
        <description><![CDATA[
            <p>Charts can be created directly from a DataSource without a ListGrid.</p>
            <p>Use the "Time Period" menu to change the criteria passed to the DataSource.</p>
            <p>Use the "Chart Type" selector below to see same data rendered by multiple different chart types.
            Right-click on the chart to change the way data is visualized.</p>
        ]]></description>
    </Example>
    <ExampleFolder title="Multi-Axis" requiresModules="Drawing,Analytics" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png">
        <description><![CDATA[
           ]]></description><children>
        <Example title="Dual Axis" id="dualAxisChartMA" jsURL="charts/multiAxis/dualAxisChartMA.js" requiresModules="Drawing,Charts"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png">
        <description><![CDATA[
            Dual axis charts can be used to create a single chart that shows two data sets with different units (for example: sales in dollars and total units shipped) and/or very different ranges (for example: gross revenue, profit).
            ]]></description>
        </Example>
        <Example title="Multi-Series" id="multiSeriesChartMA" jsURL="charts/multiAxis/multiSeriesChartMA.js" requiresModules="Drawing,Charts"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png">
        <description><![CDATA[
            Multi-Axis charts can show multiple series of data.  Here, a stacked column chart represents multi-series data denominated in percents, while multiple lines show a second multi-series data denominate in number of events</p>
            ]]></description>
        </Example>
        <Example title="3+ Axes" id="threePlusChartMA" jsURL="charts/multiAxis/threePlusChartMA.js" requiresModules="Drawing,Charts"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png">
        <description><![CDATA[
            3+ axis charts can be created to show 3 different types or ranges of data. Right click on "Events" or "Throughput" to bring up a context menu for swapping them.</p>
            ]]></description>
        </Example>
    </children></ExampleFolder>
    <Example title="Mixed Plots"
             id="mixedPlotsChart"
             icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png"
             jsURL="charts/mixedPlots.js"
             requiresModules="Drawing,Charts">
        <tabs>
            <tab url="charts/mixedPlotsData.js" title="Data" />
        </tabs>
        <descriptionHeight>140</descriptionHeight>
        <description><![CDATA[
            <p>In some cases you want to show some data series as one shape and other data series as another shape <i>but use the same axis</i>.  This is commonly used when one series is of a fundamentally different kind than the other series (for example, a projection or average) but still has the same scale.</p>
            <p>This example demonstrates a technique for doing this based on Dual-Axis charts, where the second axis has been explicitly hidden, and data values that do not apply have been omitted from the dataset.</p>
        ]]></description>
    </Example>
    <ExampleFolder title="Zoom Charts" requiresModules="Drawing,Analytics" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png">
        <description><![CDATA[
        These examples show charts that allow users to intuitively
        navigate very large datasets by providing the ability to zoom into parts of the data.
        <p>
        These charts intelligently choose which data labels to show based on whether the data set
        covers a date range, a numeric range, or is simply a large set of unrelated values.
        ]]></description><children>
        <Example title="Stock Prices"
                 id="stockPriceCharting"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png"
                 jsURL="charts/stockChart.js"
                 requiresModules="Drawing,Charts"
                 descriptionHeight="150">
            <tabs>
                <tab url="charts/stockData.js" title="Stock prices DataSource" />
                <tab url="charts/nasdaqSymbolData.js" title="Stock symbol DataSource" />
            </tabs>
            <description><![CDATA[
            This example shows historical pricing data for several well-known stocks.
            The miniature "zoom chart" (underneath the main chart) shows the complete dataset
            and the main chart shows a subset of this range in more detail.
            <P>
            Use the zoom chart to choose a visible range in the main chart, either by dragging the
            scrollbar or by dragging the range boundaries.
            <p>
            Note how the main chart will intelligently use different labels for the horizontal axis
            depending on how much data is shown - years, months or days may be labeled depending on
            how deeply you zoom.
            ]]></description>
        </Example>
        <Example title="Measurement Data"
                 id="bodePlotCharting"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png"
                 jsURL="charts/bodePlots.js"
                 requiresModules="Drawing,Charts">
            <description><![CDATA[
            This example shows about 800 samples points from a continuous varying numerical
            function (a <a href="http://en.wikipedia.org/wiki/Bode_plot">Bode plot</a> of a
            <a href="http://en.wikipedia.org/wiki/Chebyshev_filter">Chebyshev filter</a>).
            <P>
            Use the zoom chart to focus in on small parts of the dataset and note that the line
            remains smooth due to the large number of samples.  Horizontal gradations automatically
            adjust to the range of the dataset being shown.
            <P>
            This zoom mode can be used to show various kinds of measurement data where many samples
            are taken.
            ]]></description>
        </Example>
        <Example title="City Populations"
                 id="populationCharting"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/chart_curve.png"
                 jsURL="charts/populationChangeCharts.js"
                 requiresModules="Drawing,Charts">
            <tabs>
                <tab url="charts/populationData.js" title="Population Data" />
            </tabs>
            <description><![CDATA[
            This example shows population change for 271 U.S. cities, sorted
            alphabetically.
            <P>
            When there are too many cities visible, the chart will label every <b>N</b>th city depending
            on available space.  This allows the end user to rapidly find the desired city since
            the cities are sorted alphabetically; it would also work with other sorting orders such
            as east to west or north to south.
            ]]></description>
        </Example>
    </children></ExampleFolder>
    <ExampleFolder title="Statistics" requiresModules="Drawing,Charts" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png"><children>
        <Example title="Regression Lines"
                 id="regressionLines"
                 jsURL="charts/regressionLines.js"
                 requiresModules="Drawing,Charts">
            <tabs>
                <tab url="charts/regressionLinesData.js" title="Time Series Data" />
            </tabs>
            <description><![CDATA[
            Scatter Charts support calculation of best-fit lines or curves, also known as "trend
            lines" for time series data.  Shown below is a 3rd-degree polynomial regression curve.
            <P>
            Use the controls above the chart to switch between linear or polynomial regression and
            change the regression degree.  Users can also enable or disable regression lines via the
            default context menu.
            ]]></description>
        </Example>
        <Example title="Mean &amp; Deviation"
                 id="meanAndDeviation"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/chart_line.png"
                 jsURL="charts/meanAndDeviation.js"
                 requiresModules="Drawing,Charts">
            <description><![CDATA[
            Charts can show the average value for the data set as well as the standard deviation (a
            measure of how far data points are from the average).
            <P>
            In the chart below, the bright green line shows the average, and the bright blue lines
            show one standard deviation above average and below average.
            <P>
            Use the "Regenerate Random Data" button to see a new random data set.
            ]]></description>
        </Example>
        <Example title="Error Bars" id="errorBars" jsURL="charts/errorBars.js" dataSource="productRevenue" requiresModules="Drawing,Charts"
            icon="[ISO_DOCS_SKIN]/images/silkicons/chart_line.png">
            <description><![CDATA[
                Charts can display error bars showing intervals of values around each data point.
            ]]></description>
        </Example>
    </children></ExampleFolder>
    <Example title="Scatter Plot"
             id="scatterPlotCharting"
             jsURL="charts/scatterPlot.js"
             requiresModules="Drawing,Charts">
        <descriptionHeight>110</descriptionHeight>
        <description><![CDATA[
         Scatter plots can show two axes of continuous numeric data.  Multiple data sets can be plotted in different colors.</p>
		 <p>
		 Connecting lines can optionally be shown for each data series. Use the "Show Lines" drop-down below to choose between no lines,
		 straight lines or smooth lines.
		 </p>
        ]]></description>
    </Example>
    <Example title="Drill Up/Down"
             id="drillCharting"
             icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png"
             jsURL="charts/drill.js"
             dataSource="productRevenue"
             requiresModules="Drawing,Charts">
        <descriptionHeight>150</descriptionHeight>
        <description><![CDATA[
         Click on any swatch in the legend area of the chart below to focus in on data for just one Region.  
         <p>
         Click the red "X" button next to the "Selected Region" text to return to viewing all Regions.
         <p>
         Click on any segment in the stacked columns to likewise focus in on data for just the region that the segment represents.
         <p>
         This simple Drill-down interface is created by responding to the <code>valueClick</code> and <code>legendClick</code> events - see the code for details.
        ]]></description>
    </Example>
    <Example title="CubeGrid Charting" id="chartingAnalytics" ref="analytics" requiresModules="Drawing,Analytics"
       icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png">
       <description>
       This example shows binding to a multi-dimensional dataset, where each cell value has a
       series of attributes, called "facets", that appear as headers labelling the cell value.
       Drag facets onto the grid to expand the cube model.&lt;BR&gt;
       Right click on any cell and pick "Chart" to chart values by any two facets.
       </description>
    </Example>
    <Example title="Log Scaling" id="logScalingChart" jsURL="charts/logScaling.js" requiresModules="Drawing,Charts"
        icon="[ISO_DOCS_SKIN]/images/silkicons/chart_line.png">
        <tabs>
            <tab title="Data" url="charts/sp500.js" />
        </tabs>
        <description><![CDATA[
            Charts can use logarithmic scaling, which shows equal percentage changes as the same
            difference in height.  This is useful for data that spans a very large range.
        ]]></description>
    </Example>
    <Example title="Interactive Data Points"
             id="dataPointsChart"
             icon="[ISO_DOCS_SKIN]/images/silkicons/chart_line.png"
             jsURL="charts/dataPoints.js"
             requiresModules="Drawing,Charts">
        <tabs>
            <tab title="Data" url="charts/animalData.js" />
        </tabs>
        <description><![CDATA[
            <p>The data points in a chart can be interactive. Hover over a data point to see additional information,
            and click to edit.</p>
        ]]></description>
    </Example>
    <Example title="Adding Elements" 
    	id="addingElements" 
    	icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png"
    	jsURL="charts/addingElements.js" 
    	dataSource="productRevenue"
    	requiresModules="Drawing,Charts">
		<description><![CDATA[
            <p>This example show a column chart where the average value is computed and shown as a red line 
            by drawing the line when <code>chartBackgroundDrawn()</code> fires</p>
        ]]></description>
    </Example>
    <ExampleFolder title="Export" requiresModules="Drawing" isOpen="false" id="ChartExportExamples"
        icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png">
        <description>
        Exporting Charts and other widgets based on DrawPane (such as Gauge) as images.
        </description><children>
        <Example title="Chart Image Export"
                 id="chartImageExport"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"
                 jsURL="charts/imageExport.js"
                 requiresModules="Drawing">
            <tabs>
                <tab url="charts/multiSeriesData.js" title="Data" />
            </tabs>
            <description><![CDATA[
            FacetCharts and other widgets based on DrawPane (such as Gauge) can be exported to PNG and other
            image formats.
            <p>
            Click the "Download as Image" button to save an image of the chart.  You can drag resize the
            chart or right-click it to change how it displays so that you can obtain multiple
            different images of the chart.
            <p>
            Click the "Get Data URL" button to display a PNG snapshot of the chart in the blue
            bordered area to the right of the chart.  In most browsers, right-clicking the PNG will
            then provide options to save it.  Note that this particular feature cannot be supported
            for Internet Explorer 7 and earlier.
            ]]></description>
        </Example>
        <Example title="Chart PDF Export"
                 id="chartPDFExport"
                 jsURL="charts/pdfExport.js"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/printer.png"
                 requiresModules="Drawing">
            <description><![CDATA[
            Screens can be exported as PDF (Portable Document Format) files.  This includes
            FacetCharts and other widgets based on DrawPane (such as Gauge).
            <p>
            Press the "View as PDF" button below to view the exported version of the grid and chart
            below in a new browser window.  Press "Download as PDF" to save the generated PDF to
            disk.
            <p>
            Note that the grid is editable and the chart will react to changes in the grid, so you
            can view or download several different PDFs showing the grid and chart.
            ]]></description>
        </Example>
        <Example id="drawingExport"
                 title="Drawing Export"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png"
                 requiresModules="SCServer,Drawing"
                 jsURL="serverExamples/export/drawingExport.js">
            <description><![CDATA[Select an export format and then click the Save button.
            SmartClient will trigger the browser's save dialog allowing the DrawPane to be saved
            as an image in the specified format.]]></description>
        </Example>
    </children></ExampleFolder>
    <Example title="Custom Hovers"
             id="chartCustomHovers"
             icon="[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png"
             jsURL="charts/customHovers.js"
	     css="charts/customHovers.css"
             requiresModules="Drawing,Charts">
        <tabs>
            <tab url="charts/multiSeriesData.js" title="Data" />
	</tabs>
        <description><![CDATA[
    	This example shows a custom hover interaction built using the
    	<code>getNearestDrawnValue()</code> API to identify which point is nearest the mouse
    	cursor.
    	<p>
    	A bright blue marker is placed over the data point nearest the mouse.  Clicking anywhere on
    	the chart shows the information the chart provides about the nearest data point in a
    	DetailViewer under the chart.
    	<p>
    	Note that FacetChart has two built-in hover behaviors - <code>showValueOnHover</code> and
    	<code>showDataPoints</code> (which can show custom hovers).  This example focuses on custom
    	hovers.
        ]]></description>
    </Example>
</children></ExampleFolder>

<ExampleFolder title="Drag &amp; Drop" isOpen="false" id="DDdragDropExamples" >
<description>
    Drag &amp; drop services and built-in drag &amp; drop interactions.
</description><children>
    <Example title="Drag list (copy)" id="DDdragListCopy" ref="dragListCopy"   />
    <Example title="Drag list (move)" id="DDdragListMove" ref="dragListMove"    />
    <Example title="Drag list (select)"  id="DDdragListSelect" ref="dragListSelect"  />
    <Example title="Drag tree (move)"   id="DDdragTree"  ref="dragTree" />
    <Example title="Drag tiles (move)"   id="DDdragTiles" ref="dragTiles" />

    <!-- Note: This folder is a duplicate of one elsewhere in the file (scan for "dataDragging").
         Any changes made here should also be made in the copy.  The details are duplicated 
         rather than aliased because the ExampleViewer doesn't cope correctly with an aliased 
         folder nested within another aliased folder  -->

    <ExampleFolder id="DDdataDraggingCopy" title="Data Binding" isOpen="false"><description>
        Databound components have built-in dragging behaviors that operate on persistent
        datasets.
    </description><children>
        <Example title="Tree Reparent" id="DDtreeReparent"  ref="treeReparent"   />
        <Example title="Recategorize (Tree)" id="DDtreeRecategorize" ref="treeRecategorize" />
        <Example title="Recategorize (List)" id="DDlistRecategorize" ref="listRecategorize" />
        <Example title="Recategorize (Tile)" id="DDrecategorizeTile" ref="recategorizeTiles" />
        <Example title="Copy" id="DDdataboundDragCopy"  ref="databoundDragCopy" />
        <Example title="Persistent Reorder (Grid)" id="DDpersistentReorderableListGrid" ref="persistentReorderableListGrid" />
        <Example title="Persistent Reorder (Tree)" id="DDpersistentReorderableTreeGrid" ref="persistentReorderableTreeGrid" />
    </children></ExampleFolder>

    <Example title="Drag from Menu" id="DDdragMenu" ref="dragMenu" />
    <Example title="Drag move" id="DDdragMove" ref="dragMove" />
    <Example title="Drag reorder" id="DDdragReorder"  ref="dragReorder" />
    <Example title="Drag types" id="DDdragTypes" ref="dragTypes" />
    <Example title="Drag create" id="DDdragCreate" ref="dragCreate" />
    <Example title="Drag effects" id="DDdragEffects" ref="dragEffects" />
    <Example title="Drag reposition" id="DDdragReposition" ref="dragReposition" />
    <Example title="Drag resize" id="DDdragResize" ref="dragResize" />
    <Example title="Drag tracker" id="DDdragTracker" ref="dragTracker"  />   
    <Example title="Drag pan"  id="DDdragPan" ref="dragPan" />
    <ExampleFolder title="Portal Dragging" id="DDportalDraggingSamples" ref="portalDragRearrangeSamples" isOpen="false" />

    <ExampleFolder id="DDcrossWindowDragExamples" title="Cross-Window Drag" isOpen="false"><description>
        HTML5 drag &amp; drop support enabling drag &amp; drop between browser windows.
    </description><children>
        <Example title="Native drag create"  id="DDnativeDragCreate" ref="nativeDragCreate" />
        <Example title="Records across Windows" id="DDrecordsAcrossWindows" ref="recordsAcrossWindows" />
        <Example title="Portlet across Windows" id="DDportletAcrossWindows" ref="portalCrossWindowDrag" />
    </children></ExampleFolder>
</children></ExampleFolder>

<!-- Control -->
<ExampleFolder title="Control" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/brick.png">
<description>
    Navigation and action controls.
</description><children>
    <ExampleFolder title="Buttons" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/brick.png"><description>
    SmartClient buttons are visually appealing, easily skinned, and easy to use.
    </description><children>
        <Example title="Appearance"
                 id="buttonAppearance"
                 jsURL="actions/buttons/appearance.js"
                 showSkinSwitcher="true">
            <description>
            Buttons come in three basic types: CSS buttons, single-image buttons, and 
            multiple-image stretch buttons.  All share a basic set of capabilities.
        </description></Example>
        <Example title="States" id="buttonStates" jsURL="actions/buttons/states.js"
                 css="actions/buttons/states.css">
				 <description>
            Move the mouse over the buttons, and click and hold to see buttons in different
            states.  Click "Disable All" to put all buttons in the disabled state.
            
            Edit the CSS style definitions to change the appearance of various states.
        </description></Example>
        <Example title="Icons" id="buttonIcons" jsURL="actions/buttons/icons.js">
		<description>
            Click and hold on the "Save" button to see the icon change as the button goes
            down.  Note that the binoculars icon does not change when the button goes down.
            Click "Disable Save" to see the icon change to reflect disabled state.
            
            Button icons can be left or right oriented, and can optionally react to the
            state of the button.
        </description></Example>
        <Example title="Auto Fit"
                 id="buttonAutoFit"
                 jsURL="actions/buttons/autoFit.js">
				 <description>
            Buttons can automatically size to accommodate the title and icon, and resize
            automatically when the title is changed, notifying components around them they have
            changed size.
        </description></Example>
        <Example title="Radio / Toggle Behavior"
                 id="buttonRadioToggle"
                 jsURL="actions/buttons/radioCheckbox.js">
				 <description>
            Click on the buttons for Bold, Italic, and Underline and note that they stick in a
            down state.  Click on the buttons for left, center and right justify and note that
            they are mutually exclusive.
        </description></Example>

    </children></ExampleFolder>

    <ExampleFolder title="Menus" isOpen="false" showSkinSwitcher="true" icon="[ISO_DOCS_SKIN]/images/silkicons/combo_box.gif">
    <description>
    Dynamic, appealing menus that can bind directly to data.
    </description><children>
        <Example id="fullMenu" title="Appearance" jsURL="actions/menus/appearance.js">
		<description>
            Click "File" to see a typical File menu with icons, submenus, checks,
            separators, disabled items, and keyboard shortcut hints.  Note the bevelled edge and
            drop shadow.
            </description></Example>
        <Example title="Dynamic Items"
                 id="menuDynamicItems"
                 jsURL="actions/menus/dynamicItems.js">
				 <description>
            Open the "File" menu to see the "New file in.." item initially disabled.  Select a
            project and note that the menu item has become enabled, changed title and changed
            icon.  Pick "Project Listing" to show and hide the project list, and note the item
            checks and unchecks itself.
            </description></Example>
        <Example title="Submenus" id="menuFullMenu" ref="fullMenu">
		<description>
            Click "File" and navigate over "Recent Documents" or "Export as..." to see
            submenus.
            </description></Example>
        <Example id="menuColumns" title="Custom Columns" jsURL="actions/menus/columns.js"
        icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png">
		<description>
            Open the menu to see a standard column showing item titles, and an additional
            column showing an option to close menu items. Clicking in the second column will
            remove the item from the menu.
            </description></Example>
            
        <Example title="Tree Binding" id="treeBinding" jsURL="actions/menus/treeBinding.js"
                 icon="[ISO_DOCS_SKIN]/images/silkicons/chart_organisation.png"
                 dataSource="supplyCategory">
				 <description>
            Click on "Department" or "Category" below to show hierarchical menus.  The
            "Category" menu loads options dynamically from the "SupplyCategory" DataSource.
            </description></Example>
    </children></ExampleFolder>

    <Example id="toolstrip" title="ToolStrips" jsURL="actions/toolStrips.js">
	<description>
        Click the icons at left to see "radio"-style selection.  Click the drop-down to see
        font options.
        </description>       
        <bestSkin>Enterprise</bestSkin>
        <badSkins>BlackOps</badSkins>
        <badSkins>SilverWave</badSkins>        
    </Example>
    <Example id="toolstripVertical" title="ToolStrips (Vertical)" jsURL="actions/toolStripVertical.js">
	<description>
        Toolstrips can also be vertically aligned.
        </description>
        <bestSkin>Enterprise</bestSkin>
        <badSkins>BlackOps</badSkins>
        <badSkins>SilverWave</badSkins>     
    </Example>
    <Example id="ribbonBar" title="RibbonBar" jsURL="actions/ribbonBar.js" descriptionHeight="190"><description><![CDATA[
        A RibbonBar is a customized ToolStrip which displays controls in separately titled
        RibbonGroups.
        <P>
        The RibbonBar controls the overall presence, placement and text-alignment of each 
        group's title and these can be overridden for individual groups.  Groups can have
        multiple rows of controls (<code>group.numRows</code>) and additional columns of rows 
        are automatically added when that number is exceeded.  Controls can also span
        multiple rows (<code>control.rowSpan</code>).
        <P>
        The example below demonstrates a RibbonBar using it's default RibbonGroup and 
        <code>IconButton/IconMenuButton</code> classes to show various groups with different layouts. 
        Groups with horizontal and vertical buttons can be seen, some of each showing their 
        <code>menuIcons</code>.  The "New" and "Undo" buttons also have their <code>showMenuIconOver</code>
        attribute set to false, which disables <code>mouseOver</code> styling on the <code>menuIcon</code>.
        ]]></description>       
        <bestSkin>Enterprise</bestSkin>
        <badSkins>BlackOps</badSkins>
        <badSkins>SilverWave</badSkins>        
    </Example>
    <Example title="Dialogs"
             id="dialogs"
             jsURL="actions/dialogs.js"
             showSkinSwitcher="true">
			 <description>
        Click "Confirm", "Ask" or "Ask For Value" to show three of the pre-built, skinnable 
        SmartClient Dialogs for common interactions.  
        </description></Example>
    <Example title="Login Dialog"
             id="loginDialog"
             jsURL="actions/loginDialog.js"
             showSkinSwitcher="true">
			 <description>
        Click "Login" to show SmartClient's built-in user login dialog.  Try entering both good
        and bad credentials - user "barney", password "rubble" is a valid user.
        </description></Example>
    <!-- At present slider media matches cross skins so don't show the skin-switcher on this one -->
    <Example title="Slider" id="slider" xmlURL="actions/slider.js">
	<description>
        Move either Slider to update the other.  You can change the value by clicking and
        dragging the thumb, clicking on the track, or using the keyboard (once you've focused
        on one of the sliders)
        </description></Example>
    <Example title="ColorPicker"
             id="colorPicker"
             jsURL="actions/colorPicker.js"
             showSkinSwitcher="true">
			 <description>
        Use the radio buttons to set which mode the ColorPicker initially appears in, and the 
        window position policy.  Click "Pick a Color" and select a color from either the simple
        or complex picker - the "Selected color" label changes to reflect your selection.  The 
        ColorPicker also supports selecting semi-transparent colors - this is more easily seen
        in a skin that shows a background image (eg BlackOps).
        </description></Example>
    <Example title="Navigation Bar"
             id="navigationBar"
             jsURL="actions/navigationBar.js"
             showSkinSwitcher="true">
        <description><![CDATA[
        Demonstrates a NavigationBar and configuring the forward and back buttons.
        ]]></description>
        <bestSkin>Enterprise</bestSkin>
        <badSkins>BlackOps</badSkins>
        <badSkins>fleet</badSkins>
        <badSkins>SilverWave</badSkins>
        <badSkins>Simplicity</badSkins>
        <badSkins>standard</badSkins>
        <badSkins>TreeFrog</badSkins>
    </Example>
</children></ExampleFolder>




<!-- PARENT FOLDER: Basics -->
<ExampleFolder
    title="Basics"
    isOpen="false"
    icon="[ISO_DOCS_SKIN]/images/silkicons/overlays.png"><description>
    Basic capabilities shared by all SmartClient visual components.
</description><children>


<!-- Basics > Components -->
<ExampleFolder
    title="Components" 
    isOpen="false"><description>
    Basic capabilities shared by all SmartClient visual components.
</description><children>
    <Example
        id="create"
        title="Create"
        jsURL="basics/create.js">
		<description>
        Click the button to create new cube objects.
        </description></Example>
    <Example
        id="autodraw"
        title="Draw"
        jsURL="basics/draw.js">
		<description>
        Click the button to draw another Label component. The first Label is configured
        to draw automatically.
        </description></Example>
    <Example
        id="showAndHide"
        title="Show &amp; Hide"
        jsURL="basics/show.js">
		<description>
        Click the buttons to show or hide the message.
        </description></Example>
    <Example
        id="move"
        title="Move"
        jsURL="basics/move.js">
		<description>
        Click and hold the arrow to move the van. Click on the solid circle to return to
        the starting position.
        </description></Example>
    <Example
        id="resize"
        title="Resize"
        jsURL="basics/resize.js">
		<description>
        Click the buttons to expand or collapse the text box.
        </description></Example>
    <Example
        id="layer"
        title="Layer"
        jsURL="basics/layer.js">
		<description>
        Click the buttons to move the draggable box above or below the other boxes.
        </description></Example>
    <Example
        title="Stack"
        jsURL="basics/stack.js">
		<description><![CDATA[
        <code>HStack</code> and <code>VStack</code> containers manage the stacked positions
        of multiple member components.
        ]]></description></Example>
    <Example
        title="Layout"
        jsURL="basics/layout.js">
		<description><![CDATA[
        <code>HLayout</code> and <code>VLayout</code> containers manage the stacked positions and
        sizes of multiple member components. Resize the browser window to reflow these layouts.
        ]]></description></Example>
    <Example
        id="inlineComponents"
        title="Inline components"
        iframe="true"
        url="inlineComponents/inlineComponents.html"
        doEval="false"
        ><tabs>
        <tab title="cssLayout.css" url="inlineComponents/cssLayout.css"/>
        </tabs>
		<description><![CDATA[
        SmartClient GUI components are assembled from the same standard HTML and CSS as
        plain old web pages. So SmartClient controls can be added above, below, inline,
        and inside existing web page elements.
        ]]></description></Example>
</children></ExampleFolder>

<!-- Basics > HTML -->
<ExampleFolder
    title="HTML" 
    isOpen="false"><description>
    Mixing SmartClient components with HTML pages, chunks, and elements.
</description><children>
    <Example title="Inline Components" id="htmlInlineComponents" ref="inlineComponents"/>
    <Example title="Back Button"><description>
        SmartClient supports browser history management.  Click the browser's Back button to go
        to a previous example, and click forward to return to this example.  Even
        navigate off the SmartClient site and navigate back.  SmartClient's History module
        allows for picking which application events create history entries.
        </description></Example>
    <Example
        id="htmlFlow"
        title="HTMLFlow"
        jsURL="html/htmlFlow.js" xmlURL="html/htmlFlow.xml">
		<description><![CDATA[
        The <code>HTMLFlow</code> component displays a chunk of standard HTML in a free-form,
        flowable region.
        ]]></description></Example>
    <Example
        id="htmlPane"
        title="HTMLPane"
        jsURL="html/htmlPane.js" xmlURL="html/htmlPane.xml">
		<description><![CDATA[
        The <code>HTMLPane</code> component displays a chunk or page of standard HTML in a
        sizeable, scrollable pane.
        ]]></description></Example>
    <Example
        id="label"
        title="Label"
        jsURL="html/htmlLabel.js" xmlURL="html/htmlLabel.xml">
		<description><![CDATA[
        The <code>Label</code> component adds alignment, text wrapping, and icon support for
        small chunks of standard HTML.
        ]]></description></Example>
    <Example id="RichTextEditor" title="Editing HTML" jsURL="html/richTextEditor.js"    
       xmlURL="html/richTextEditor.xml" requiresModules="RichTextEditor">
       <description>
		<![CDATA[
       The <code>RichTextEditor</code> supports editing of HTML with a configurable set of
       styling controls.
        ]]>
	   </description></Example>
    <Example
        id="img"
        title="Img"
        jsURL="html/htmlImg.js">
		<description><![CDATA[
        The <code>Img</code> component displays images in the standard web formats
        (png, gif, jpg) and other image formats supported by the web browser.
        ]]></description></Example>
    <Example
        id="dynamicContents"
        title="Dynamic HTML (inline)"
        jsURL="html/htmlDynamic1.js">
		<description>
        Embed JavaScript expressions inside chunks of HTML to create simple dynamic elements.
        </description></Example>
    <Example
        id="setContents"
        title="Dynamic HTML (set)"
        jsURL="html/htmlDynamic2.js">
		<description>
        Click the buttons to display different chunks of HTML.
        </description></Example>
    <Example
        id="loadImages"
        title="Load images"
        jsURL="html/htmlLoadImg.js">
		<description>
        Click the buttons to load different images.
        </description></Example>
    <Example
		id="loadHtmlChunks"
        title="Load HTML chunks"
        jsURL="html/htmlLoadChunks.js">
		<description>
        Click the buttons to load different chunks of HTML.
        </description></Example>
    <Example
        id="loadHtmlPages"
        title="Load HTML pages"
        jsURL="html/htmlLoadPages.js">
		<description>
        Click the buttons to display different websites.
        </description></Example>
</children></ExampleFolder>



<!-- Basics > Interaction -->
<ExampleFolder
    title="Interaction" 
    isOpen="false"><description>
    Basic interactive component capabilities.
    &lt;BR&gt;
    &lt;BR&gt;
    SmartClient components provide hundreds of hooks for event handlers, including
    all the standard mouse, keyboard, and communication events.
</description><children>
    <Example title="Mouse events" id="customMouseEvents" jsURL="interact/mouseEvents.js">
	<description>
	<![CDATA[
        Mouse over the blue square to see the color respond to that position.  Click and hold
        to see a fade.  If a mousewheel is present, roll up and down to change size.
        SmartClient components support the standard mouse events in addition to custom events
        like <code>mouseStillDown</code>.
        ]]>
        </description></Example>
    <Example title="Drag events" id="customDrag" jsURL="interact/dragEvents.js">
	<description>
        Click and drag the pawn over "Show Drop Reticle" to see a simple custom drag and drop
        interaction.
        </description></Example>
    <Example title="Hovers / Tooltips" id="customHovers" jsURL="interact/hover.js"
             showSkinSwitcher="true"
             css="interact/hover.css">
			 <description>
        Hover over the button, the image, the "Interesting Facts" field of the grid and the
        "Severity" form label to see various hovers.
        </description></Example>
    <Example title="Context menus" id="contextMenus" jsURL="interact/contextmenu.js" 
             showSkinSwitcher="true">
    <description>
        Right click (or option-click on Macs) on the Yin Yang image to access a context menu.
        Click on the "Widget" button to access the identical menu.
        </description></Example>
    <Example title="Enable / Disable" id="interactionFieldEnableDisable" ref="fieldEnableDisable"/>
    <Example title="Focus &amp; Tabbing" id="focus" jsURL="interact/focus.js">
	<description>
        Press the Tab key to cycle through the tab order starting from the blue
        piece.  Then drag reorder either piece, click on the leftmost piece and use Tab to
        cycle through again. Tab order is automatically updated to reflect the visual order.
        </description></Example>
    <Example title="Cursors" id="cursors" jsURL="interact/cursor.js">
	<description>
        Mouse over the draggable labels for a 4-way move cursor.  Move over drag resizeable
        edges to see resize cursors.  Mouse over the "Save" button to see the hand cursor,
        which is not shown if the "Save" button is disabled.
        </description></Example>
    <!-- Note on keyboard events: click required to put focus onto the arrow. Explicit call to
         this.focus() as part of the label's draw() method doesn't work in the FE. -->
    <Example title="Keyboard events" id="keyboardEvents" jsURL="interact/keyboard.js">
	<description>
        Click the "Move Me" label, then use the arrow keys to move it around.  Hold down keys to see the
        component respond to key repetition. SmartClient unifies keyboard event handling across browsers.
        </description></Example>
    <!--  -->
    <Example title="Modality" id="modality" jsURL="interact/modality.js"  
             showSkinSwitcher="true">
			 <description>
        Click on "Show Window" to show a modal window.  Note that the "Touch This" button no
        longer shows rollovers or an interactive cursor, nothing outside the window can be
        clicked. Clicks outside the window cause the window to flash and tabbing remains in a
        closed loop, cycling through only the contents of the window.
        </description></Example>
</children></ExampleFolder>

    <Example 
        title="Printing" 
        id="printing" 
        jsURL="basics/printing.js"  
        showSkinSwitcher="true"><tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<descriptionHeight>130</descriptionHeight>
		<description><![CDATA[
        SmartClient provides comprehensive support for rendering UI into a print-friendly
        fashion, and exporting to PDF.
        <p>
        Click the "Print Preview" button and note the following things:
        <ul>
        <li>All components have simplified appearance (eg gradients omitted) to be legible in 
        black and white</li>
        <li>The ListGrid had a scrollbar because it wasn't big enough to show all records, 
        but the printable view shows all data</li>
        <li>Buttons and other interactive controls that are not meaningful in print view are omitted</li>
        </ul>
        Click the "Export" button to download a .pdf of the printed view.
        ]]>
        </description></Example>

</children></ExampleFolder> <!-- closing parent folder: Basics -->



<!-- PARENT FOLDER: Effects -->
<ExampleFolder
    title="Effects"
    isOpen="false"
    icon="[ISO_DOCS_SKIN]/images/silkicons/layers.png"><description>
    Effects for creating a polished, branded, appealing application.
    &lt;BR&gt;
    &lt;BR&gt;
    SmartClient supports rich skinning and styling capabilities, drag and drop interactions,
    and built-in animations.
</description><children>


<!-- Effects > Drag & Drop -->
<ExampleFolder
    title="Drag &amp; Drop" 
    id="dragDropExamples"
    isOpen="false"><description>
    Drag &amp; drop services and built-in drag &amp; drop interactions.
</description><children>
    <Example
        title="Drag list (copy)" 
		id="dragListCopy"
        showSkinSwitcher="true"
        jsURL="dragdrop/dragListCopy.js"><tabs>
        <tab title="exampleData" url="dragdrop/dragList_data.js"/>
        </tabs>
		<description>
        Drag and drop to copy items from the first list to the second list.
        Drag over the top or bottom edge of a scrolling list to scroll
        in that direction before dropping.
        </description></Example>
    <Example
        title="Drag list (move)"
        id="dragListMove"
        showSkinSwitcher="true"
        jsURL="dragdrop/dragListMove.js"><tabs>
        <tab title="exampleData" url="dragdrop/dragList_data.js"/>
        </tabs>
		<description>
        Drag and drop to move items within or between the lists.
        Drag over the top or bottom edge of a scrolling list to scroll
        in that direction before dropping.
        </description></Example>
    <Example
        title="Drag list (select)"
        id="dragListSelect"
        showSkinSwitcher="true"
        jsURL="dragdrop/dragListSelect.js"><tabs>
        <tab title="exampleData" url="dragdrop/dragList_data.js"/>
        </tabs>
		<description>
        Drag to select items in the first list. The second list will
        mirror the selection.
        </description></Example>
    <Example
        id="dragTree"
        showSkinSwitcher="true"
        title="Drag tree (move)"
        jsURL="dragdrop/dragTreeMove.js"><tabs>
        <tab title="exampleData" url="dragdrop/dragTree_data.js"/>
        </tabs>
		<description>
        Drag and drop to move parts and folders within and between the trees.
        Open a closed folder by pausing over it during a drag interaction
        (aka "spring loaded folders").
        </description></Example>
    <Example
        id="dragTiles"
        showSkinSwitcher="true"
        title="Drag tiles (move)"
        jsURL="dragdrop/dragTilesMove.js"><tabs>
        <tab title="animalData" url="grids/data/animalData2.js"/>
        </tabs>
		<description>
        Drag and drop animals from the ListGrid on the left to the TileGrid on the right. 
        Animals can also be dragged from the TileGrid back to the ListGrid.
        </description></Example>   

    <!-- Note: This folder is a duplicate of one elsewhere in the file (scan for "dataDragging").
         Any changes made here should also be made in the copy.  The details are duplicated 
         rather than aliased because the ExampleViewer doesn't cope correctly with an aliased 
         folder nested within another aliased folder  -->

    <ExampleFolder id="dataDraggingCopy" title="Data Binding" isOpen="false"><description>
        Databound components have built-in dragging behaviors that operate on persistent
        datasets.
    </description><children>
        <Example title="Tree Reparent" id="treeReparent" jsURL="databind/drag/treeReparent.js"
                 dataSource="employees"><description>
            Dragging employees between managers in this tree automatically saves the new
            relationship to a DataSource, without writing any code.  Make changes, then 
            reload the page. The changes persist.
            </description></Example>
        <Example title="Recategorize (Tree)" id="treeRecategorize" 
                 jsURL="databind/drag/treeRecategorize.js"
                 dataSource="supplyCategory"><tabs>
                <tab title="supplyItem" url="supplyItem.ds.xml"/>
            </tabs><description>
            Dragging items from the list and dropping them on categories in the tree automatically
            re-categorizes the item, without any code needed.  Make changes, then 
            reload the page. The changes persist.  This behavior is (optionally) automatic where
            SmartClient can establish a relationship, via foreign key, between the DataSources
            two components that are bound to it.
            </description></Example>
        <Example title="Recategorize (List)" id="listRecategorize" 
                 jsURL="databind/drag/listRecategorize.js"
                 dataSource="supplyItem"><description>
            The two lists are showing items in different categories.  Drag items from one list to
            another to automatically recategorize the items without writing any code.  Make
            changes, then reload the page. The changes persist.
            </description></Example>
        <Example
            id="recategorizeTiles"
            showSkinSwitcher="true"
            title="Recategorize (Tile)"
            jsURL="dragdrop/recategorizeTile.js"><tabs>
            <tab title="animalsDS" url="grids/ds/animalsSQLDS.ds.xml" canEdit="false"/>
            </tabs>
			<description>
            Drag and drop animals between the grids in either direction, and the status of the dropped tile will change to 
            match the filtered status of the TileGrid in which it was dropped. Select different values
            in the drop down lists above each TileGrid to change the animals that will appear in each grid.
            </description></Example>   
        <Example
            title="Copy"
            id="databoundDragCopy" 
            showSkinSwitcher="true"
            dataSource="employees"
            jsURL="databind/drag/listCopy.js"><tabs>
            <tab title="teamMembers" url="teamMembers.ds.xml"/>
            </tabs>
			<descriptionHeight>155</descriptionHeight>
			<description><![CDATA[
            Drag employee records into the Project Team Members list.  SmartClient recognizes that the 
            two DataSources are linked by a foreign key relationship, and automatically uses that 
            relationship to populate values in the record that is added when the drop occurs. SmartClient
            also populates fields based on current criteria and maps explicit title Fields as 
            necessary.<p>
            In this example, note that SmartClient is automatically populating all three
            of the fields in the teamMembers DataSource, even though none of those fields are present 
            in the employees DataSource being dragged from.  Change the "Team for Project" select 
            box, then try dragging employees across. Note that the Project Code column is being 
            correctly populated for the dropped records.
            ]]></description></Example>
        <Example
            title="Persistent Reorder (Grid)"
            id="persistentReorderableListGrid"
            jsURL="grids/queuing/persistentReorderableListGrid.js" dataSource="employees">
            <descriptionHeight>105</descriptionHeight>
            <description><![CDATA[
            Click on a record to select it, or use Ctrl-Click on several records to select multiple records.  Click on one of 
            the selected records and drag the selection to a new position within the ListGrid.  Release the mouse once the
            selection is in the desired position to drop the selected records.<br><br>
            On the ISC Developer Console, RPC tab, check the "Track RPCs" checkbox to be able to
            monitor DSRequests.  Notice that there is only one request sent per drag &amp; drop operation.
            ]]></description></Example>
        <Example
            title="Persistent Reorder (Tree)"
            id="persistentReorderableTreeGrid"
            jsURL="grids/queuing/persistentReorderableTreeGrid.js" dataSource="employees">
            <descriptionHeight>105</descriptionHeight>
            <description><![CDATA[
            Click on a node to select it, or, use Ctrl-Click on several nodes to select multiple nodes.  Click on one of the 
            selected nodes and drag the selection to a new position among their siblings.  Release the mouse once the
            selection is in the desired position to drop the selected nodes.<br><br>
            On the ISC Developer Console, RPC tab, check the "Track RPCs" checkbox to be able to
            monitor DSRequests.  Notice that there is only one request sent per drag &amp; drop operation.
            ]]></description></Example>
    </children></ExampleFolder>

    <Example
        id="dragMenu"
        showSkinSwitcher="true"
        title="Drag from Menu"
        jsURL="dragdrop/dragFromMenu.js"><tabs>
       <tab title="exampleData" url="dragdrop/dragList_data.js"/>
        </tabs>
		<description>
        Open the parts menu and drag parts from the menu onto the grid.
        Menus support all the drag and drop behaviors supported by grids.
        </description></Example>
    <Example
        title="Drag move"
        id="dragMove"
        jsURL="dragdrop/dragMove.js">
		<description>
        Drag and drop to move pieces between the boxes. The green box sets a thicker green
        "drop line" indicator to match its border. The blue box shows a "drag placeholder"
        outline at the original location of the dragged object while dragging.
        </description></Example>
    <Example
		id="dragReorder"
        title="Drag reorder"
        jsURL="dragdrop/dragReorder.js">
		<description>
        Drag and drop to rearrange the order of the pieces.
        </description></Example>
    <Example
		id="dragTypes"
        title="Drag types"
        jsURL="dragdrop/dragTypes.js">
		<description>
        Drag and drop to move pieces between the three boxes.
        The gray box accepts any piece.
        The blue and green boxes accept pieces of the same color only.
        </description></Example>
    <Example
        title="Drag create"
        id="dragCreate"
        jsURL="dragdrop/dragCreate.js">
		<description>
        Drag the large cubes into the boxes to create new small cubes.
        The blue, yellow, and green boxes accept cubes with the same color only.
        The gray box accepts any color.
        Right-click on the small cubes to remove them from the boxes.
        </description></Example>
    <Example
        title="Drag effects"
        id="dragEffects"
        jsURL="dragdrop/dragEffects.js">
		<description>
        Click and drag to move the labels.
        </description></Example>
    <Example
        title="Drag reposition"
		id="dragReposition"
        jsURL="dragdrop/dragReposition.js">
		<description>
        Click and drag to move the piece.
        </description></Example>
    <Example
        title="Drag resize"
        id="dragResize"
        jsURL="dragdrop/dragResize.js">
		<description>
        Click and drag on the edges of the labels to resize.
        </description></Example>
    <Example
        title="Drag tracker"
        id="dragTracker"
        jsURL="dragdrop/dragTracker.js">
		<description>
        Drag and drop the pieces onto the box.
        </description></Example>
    <Example
        title="Drag pan"
        id="dragPan"
        jsURL="dragdrop/dragPan.js">
		<description>
        Click and drag to pan the image inside its frame.
        </description></Example>
    <ExampleFolder title="Portal Dragging" id="portalDraggingSamples" ref="portalDragRearrangeSamples" isOpen="false" />

    <ExampleFolder id="crossWindowDragExamples" title="Cross-Window Drag" isOpen="false"><description>
        HTML5 drag &amp; drop support enabling drag &amp; drop between browser windows.
    </description><children>
        <Example
            title="Native drag create"
            id="nativeDragCreate"
            jsURL="dragdrop/nativeDragCreate.js">
            <description>
            Drag the large cubes into the boxes to create new small cubes.
            The blue, yellow, and green boxes accept cubes with the same color only.
            The gray box accepts any color.
            &lt;p&gt;
            Try opening this sample in two different tabs or browser windows and dragging
            a cube from one window to the drop boxes of the other.
            </description></Example>
        <Example
            title="Records across Windows"
            id="recordsAcrossWindows"
            jsURL="dragdrop/recordsAcrossWindows.js"><tabs>
            <tab title="exampleData" url="dragdrop/dragList_data.js"/>
            </tabs>
            <description>
            This sample demonstrates dragging data between two different browser windows.
            &lt;p&gt;
            Open a second browser window (or browser tab) with this same sample running.  Drag
            records from the grid and drop them on the grid shown in the other browser.
            &lt;p&gt;
            Depending on your browser and operating system, it may be necessary to hover over the
            second browser tab or over an application icon to cause the tab or browser to come to
            the front so you can drop on it.
            &lt;p&gt;
            Data is transferred directly from one browser instance to another using HTML5
            techniques.  This allows you to build applications that span multiple browser windows or
            tabs, and makes it easier to take advantage of multiple physical screens.
            </description></Example>
        <Example title="Portlet across Windows" id="portletAcrossWindows" ref="portalCrossWindowDrag" />
    </children></ExampleFolder>

</children></ExampleFolder>


<!-- Effects > Animation -->
<ExampleFolder
    title="Animation" 
    isOpen="false"><description>
    Animation services and built-in animation effects.
</description><children>
    <Example
        title="Tree Folders"
        id="animateTree"
        showSkinSwitcher="true"
        jsURL="animate/animateTree.js">
		<description>
        Click the open/close icon for any folder.
        </description>
        <tabs><tab title="exampleData" url="animate/animateTreeData.js"/></tabs>
        </Example>
    <Example
        id="windowMinimize"
        showSkinSwitcher="true"
        title="Window Minimize"
        jsURL="animate/animateMinimize.js">
		<description>
        Click on the minimize button (round button in header with flat line).
        </description></Example>
    <Example
        title="Section Reveal"
        id="animateSections"
        showSkinSwitcher="true"
        jsURL="animate/animateSections.xml">
		<description>
        Click on any section header to expand/collapse sections.
        </description></Example>
    <Example
        title="Layout Add &amp; Remove"
        id="animateLayout"
        jsURL="animate/animateLayout.js">
		<description>
        Click on the buttons to hide and show the green star.
        </description></Example>
    <Example
        title="Fly Onscreen"
        id="animateMove"
        jsURL="animate/animateMove.js">
		<description>
        Click the buttons to move the Label into view or out of view.
        </description></Example>
    <Example
        title="Resize"
        id="animateResize"
        jsURL="animate/animateResize.js">
		<description>
        Click the buttons to expand or collapse the text box.
        </description></Example>
    <Example
        title="Wipe Show &amp; Hide"
        id="animateWipe"
        jsURL="animate/animateWipe.js">
		<description>
        Click the buttons to show or hide the Label with a "wipe" effect.
        </description></Example>
    <Example
        title="Slide Show &amp; Hide"
		id="animateSlide"
        jsURL="animate/animateSlide.js">
		<description>
        Click the buttons to show or hide the Label with a "slide" effect.
        </description></Example>
    <Example
        title="Fade Show &amp; Hide"
        id="animateFade"
        jsURL="animate/animateFade.js">
		<description>
        Click the buttons to fade the image.
        </description></Example>
    <Example
        title="Zoom &amp; Shrink"
        id="animateZoom"
        jsURL="animate/animateZoom.js">
		<description>
        Click the buttons to zoom or shrink the image.
        </description></Example>
    <Example
        title="Sequence (simple)"
		id="animateSeqSimple"
        jsURL="animate/animateSeqSimple.js">
		<description>
        Click the buttons for a 2-stage expand or collapse effect.
        </description></Example>
    <Example
        title="Sequence (complex)"
		id="animateSeqComplex"
        jsURL="animate/animateSeqComplex.js">
		<description>
        Click to select and zoom each piece.
        </description></Example>
    <Example
        title="Custom Animation"
        id="customAnimation"
        jsURL="animate/animateCustom.js">
		<description>
        Click on the globe for a custom "orbit" animation.
        </description></Example>
    <Example title="Tile Filter &amp; Sort" id="tilingFilter2" ref="tilingFilter"/>
    <Example
        id="portalAnimation"
        title="Simple Portal"
        needServer="true"
        jsURL="animate/portal.js"
        fullScreen="true"
        showSkinSwitcher="true"        
        screenshot="animate/portal.png"
        screenshotWidth="480"
        screenshotHeight="337"
        >
        <description>Animations built into SmartClient layouts can be used to create a drag and drop portal
      experience.  Click on the portlet list to the left to create portlets and see them
      animate into place.  Drag portlets around to new locations and they animate into place.
        </description></Example>

</children></ExampleFolder>

<!-- Effects > Look & Feel -->
<ExampleFolder
    title="Look &amp; Feel"
    isOpen="false"><description>
    Apply rich visual styles to SmartClient components.
</description><children>
    <Example
        title="Edges"
        id="edges"
        jsURL="lookfeel/edges.js">
		<description>
        Drag the text boxes. These boxes show customized frame and glow effects
        using edge images.
        </description></Example>
    <Example
        title="Corners"
        id="corners"
        jsURL="lookfeel/corners.js">
		<description>
        Drag the text boxes. These boxes show customized rounded-corner effects
        using edge images.        
        </description></Example>
    <Example
        title="Shadows"
        id="shadows"
        jsURL="lookfeel/shadows.js">
		<description>
        Drag the slider to change the shadow depth for the text box.
        </description> 
        <badSkins>BlackOps</badSkins>
        <bestSkin>TreeFrog</bestSkin></Example>
    <Example
        title="Background color"
		id="backgroundColor"
        visibility="sdk"
        jsURL="lookfeel/bgColor.js">
		<description>
        Click on the color picker to select a background color for the box.
        </description></Example>
    <Example
        title="Background texture"
		id="backgroundTexture"
        visibility="sdk"
        jsURL="lookfeel/bgImage.js">
		<description>
        Click any button to change the background texture for the box.
        </description></Example>
    <Example
        title="Translucency"
        id="translucency"
        jsURL="lookfeel/opacity.js">
		<description>
        Drag the slider to change opacity.
        </description></Example>
<!-- 

-->
    <Example
        title="Box attributes"
        visibility="sdk"
        jsURL="lookfeel/boxAttrs.js">
		<description><![CDATA[
        Drag the sliders to change the CSS box attributes.
        <P>
        Containers in SmartClient automatically react to changes in CSS styling on contained elements
        ]]>
        </description></Example>
    <Example
        title="CSS styles"
        id="styles"
        jsURL="lookfeel/styles.js"><tabs>
        <tab title="CSS" url="lookfeel/styles.css"/>
        </tabs>
		<description>
        Click the radio buttons to apply different CSS styles to the text. Click the CSS tab for
        CSS class definitions.&lt;BR&gt;
        This container auto-sizes to the styled text.
        </description>
        <badSkins>BlackOps</badSkins>
        <bestSkin>TreeFrog</bestSkin></Example>
    <Example
        title="Consistent sizing"
        id="consistentSizing"
        jsURL="lookfeel/consistentSizing.js"
        css="lookfeel/consistentSizing.css">
		<description>
      Drag the slider to resize all three text boxes. The box sizes match despite different
      edge styling specified in CSS, enabling CSS-based skinning without affecting
      application layout.
    </description></Example>
<!--
    <Example
        title="Icons"
        jsURL="lookfeel/icons.js"><description>

        </description></Example>
-->
<!--
    <Example
        title="Form controls"
        jsURL="lookfeel/formStyle.js"><description>

        </description></Example>
-->
    <Example
        title="Grid cells"
        id="gridCells"
        showSkinSwitcher="true"
        jsURL="grids/formatting/cellStyles.js"><tabs>
        <tab title="CSS" url="grids/formatting/cellStyles.css"/>
        <tab title="countryData" url="grids/data/countryData.js"/>
        </tabs>
		<description>
        Mouse over the rows and click-drag to select rows, to see the effects of different
        base styles on these two grids.
        </description></Example>        
</children></ExampleFolder>



</children></ExampleFolder> <!-- closing parent folder: Effects -->


<!-- Drawing -->
<ExampleFolder title="Drawing" requiresModules="Drawing" isOpen="false" 
    icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png" 
       external="true">
<description><![CDATA[
    SmartClient leverages the native browser drawing capabilities to provide a consistent cross
    browser drawing interface.
]]></description><children>
    <Example id="ShapeGallery" title="Shape Gallery" url="drawing/shapeGallery.js"
        requiresModules="Drawing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
        <description><![CDATA[Below is a sample of the shapes available in the SmartClient
        drawing package.
        ]]></description>
    </Example>

    <Example id="Rotation" title="Rotation" url="drawing/rotation.js"
        requiresModules="Drawing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
        <description><![CDATA[A Sample of the Rotation feature of the Drawing module.
        ]]></description>
    </Example>
        
    <Example id="ZoomAndPan" title="Zoom and Pan" url="drawing/zoomAndPan.js"
        icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png"
        requiresModules="Drawing">
        <description><![CDATA[A Sample of the zooming and panning features of the Drawing module. Use
        the slider for zoom and drag the image with the mouse.
        ]]></description>
    </Example>
        
    <Example id="LinesAndArrowheads" title="Lines and Arrowheads" url="drawing/linesAndArrowheads.js"  
        requiresModules="Drawing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
        <description><![CDATA[A Sample of using lines and curves with selects for line width, style, 
        and arrowhead style, generated at random coordinates.
        ]]></description>
    </Example>
       
    <ExampleFolder title="Gradients" isOpen="true" requiresModules="Drawing" icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
        <description>
            Different types of gradients can be used with shapes.
        </description>
        <children>
            <Example id="SimpleGradient" title="Simple" url="drawing/gradients/simpleGradient.js"  
                requiresModules="Drawing"
                icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
                <description><![CDATA[A Sample of using simple types of gradient.
                ]]></description>
            </Example>
            
            <Example id="LinearGradient" title="Linear" url="drawing/gradients/linearGradient.js"  
                requiresModules="Drawing"
                icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
                <description><![CDATA[A Sample of using linear types of gradient.
                ]]></description>
            </Example>
            
            <Example id="RadialGradient" title="Radial" url="drawing/gradients/radialGradient.js"  
                requiresModules="Drawing"
                icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
                <description><![CDATA[A Sample of using radial types of gradient.
                ]]></description>
            </Example>
        </children>
    </ExampleFolder>

    <Example id="Gauge" title="Gauge" url="drawing/gauge.js" requiresModules="Drawing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/color_wheel.png">
        <description><![CDATA[Use the controls below to set the needle position, as well as
        the number of sectors on the dial and their colors.  The Gauge component also supports
        configurable tick marks and labels.]]></description>
    </Example>

    <Example id="circletoCommand" title="&quot;circleto&quot; Command" url="drawing/circletoCommand.js" requiresModules="Drawing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
        <description><![CDATA[
        This example demonstrates the "circleto" DrawShape command. The side form can be used
        to configure the arguments to the "circleto" command except for the circle's center point,
        which is fixed. The filled-gray oval can be dragged to change the last "current point"
        when executing the "circleto" command.
        ]]></description>
    </Example>

    <Example id="drawKnobs" title="DrawItem Knobs" url="drawing/knobs.js" requiresModules="Drawing"
        icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
        <description><![CDATA[
        This example demonstrates the different draw knobs supported by select DrawItem classes
        which support draw knobs.
        <p>
        When both "resize" and "move" knobs are shown, the example utilizes the setMoveKnobOffset()
        API to offset the move knob slightly so that the "TL" resize knob as well as the move knob
        are non-overlapping.
        ]]></description>
    </Example>

</children></ExampleFolder>

<ExampleFolder title="Dashboards &amp; Tools" id="portal" isOpen="false" requiresModules="Tools" showSkinSwitcher="true"
    icon="[ISO_DOCS_SKIN]/images/silkicons/world.png">
    <description><![CDATA[ 
        <p>The Dashboards &amp; Tools framework provides a set of components for building
        customizable user interfaces and tools.  Examples include portals that can persist
        layout, report builders that allow end users to arrange data into a sharable
        "dashboard", diagramming or flow charting tools, and tools for UI creation such as
        form designers.</p>

        <p>The components in the Dashboards &amp; Tools framework are the foundation on which
        Visual Builder was created, and many of the features of Visual Builder can achieved by
        simply creating and configuring components in the Dashboards &amp; Tools framework.</p>
    ]]></description>
    <children>
        <ExampleFolder title="Palettes" isOpen="false" requiresModules="Tools"
            icon="[ISO_DOCS_SKIN]/images/silkicons/palette.png">
            <description>
                Palettes organize and present the components available for the user
                to select and customize. Users choose items from palettes by clicking and/or dragging
                (depending on the palette type).
            </description>
            <children>
                <Example title="Tree Palette" id="treePalette" jsURL="portal/palettes/treePalette.js" needEditMode="true" requiresModules="Tools"
                   icon="[ISO_DOCS_SKIN]/images/silkicons/chart_organisation.png">
                   <description>
                      Tree Palettes organize available components in a tree structure.
                      The user can double-click or drag to create a component.
                   </description>
                </Example>
                <Example title="List Palette" id="listPalette" jsURL="portal/palettes/listPalette.js" needEditMode="true" requiresModules="Tools"
                   icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png">
                   <description>
                      List Palettes organize available components in a list grid structure.
                      The user can double-click or drag to create a component.
                   </description>
                </Example>
                <Example title="Tile Palette" id="tilePalette" jsURL="portal/palettes/tilePalette.js" needEditMode="true" requiresModules="Tools">
                   <description>
                      Tile Palettes organize available components in a tile grid structure.
                      The user can double-click or drag to create a component.
                   </description>
                </Example>
                <Example title="Menu Palette" id="menuPalette" jsURL="portal/palettes/menuPalette.js" needEditMode="true" requiresModules="Tools"
                   icon="[ISO_DOCS_SKIN]/images/silkicons/combo_box.gif">
                   <description>
                      Menu Palettes present available components as a menu.
                      The user can click or drag to create a component.
                   </description>
                </Example>
            </children>
        </ExampleFolder>
        <ExampleFolder title="Edit Contexts" isOpen="false" requiresModules="Tools"
            icon="[ISO_DOCS_SKIN]/images/silkicons/vcard_edit.png">
            <description><![CDATA[
                <p>Edit Contexts manage a set of components that have persistent state.  Edit
                Contexts automatically understand drag and drop from Palettes as a means of
                adding a persistent component; persistent components can also be added
                programmatically.</p>

                <p>Edit Contexts separate persistent state from transient or incidental state
                so that only intentional changes by the user result in changes to persistent
                data.</p>
            ]]></description>
            <children>
                <Example title="Edit Pane" id="tilePalette2" ref="tilePalette" needEditMode="true" requiresModules="Tools">
                    <description>
                        An Edit Pane is a container that allows drag and drop instantiation
                        of visual components from a Palette, and direct manipulation of the 
                        position and size of those components.
                    </description>
                </Example>
                <Example title="Coordinate Persistence" id="automaticPersistence2" ref="automaticPersistence" isOpen="false" needEditMode="true" requiresModules="Tools">
                    <description><![CDATA[
                        <p>By default, an Edit Context will automatically persist the position and size of
                        components.</p>
                        <p>Try dragging some components from the Tile Palette to the Edit Pane, and then move
                        and resize them. Clicking on the "Destroy and Recreate" button will recreate the
                        Edit Pane from saved state. Note how the position and size of components has been
                        preserved.</p>
                    ]]></description>
                </Example>
                <Example title="Portal Layout" descriptionHeight="160" jsURL="portal/contexts/portalLayout.js" id="editPortalLayout" 
                    needEditMode="true" requiresModules="Tools"
                    icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png">
                    <description><![CDATA[
                        <p>With the Tools framework, you can create Palettes from which to drag Portlets.
                        Try dragging from the TreePalette to the PortalLayout. 
                        Portlets will be created on the fly.</p>
                        <p>The PortalLayout in this example is embedded in an EditPane, so that the state of the
                        PortalLayout (and its Portlets) can be persisted. 
                        Here the state is saved to a JavaScript variable, but other persistence mechanisms may be used. 
                        Click the "Destroy and Recreate" button to save the PortalLayout's state, destroy it, and then
                        recreate it. The sequence is animated to illustrate the process.</p>
                        <p>Once you've created some Canvas portlets, try right-clicking on them to change
                        their background color. Notice how code in the example updates the PortalLayout's edited state,
                        so that the colors persist when you "Destroy and Recreate".</p>
                    ]]></description>
                </Example>
                <!-- TODO
                <Example title="Drawing" jsURL="portal/contexts/drawing.js" id="editDrawPane" requiresModules="Drawing, Tools">
                    <description><![CDATA[
                        <p>A sample of mixing the Edit Context interface from the Tools framework with a
                        Draw Pane.  This allows Draw Items to be created from a Palette and dragged
                        onto the Draw Pane, with all position, size, and styling properties of the
                        Draw Items automatically persisted.</p>
                        <p>This sample persists into a JavaScript variable.  Double-click or drag some
                        Draw Items into the Draw Pane, then click the "Destroy and Recreate" button to
                        save the state, destroy the Draw Items, and then recreate them.</p>
                    ]]></description>
                </Example>
                -->
            </children>
        </ExampleFolder>
        <ExampleFolder title="Persistence" isOpen="false" requiresModules="Tools"
            icon="[ISO_DOCS_SKIN]/images/silkicons/database_table.png">
            <description><![CDATA[
                <p>There are several persistence strategies to persist and recreate Edit Contexts.</p>
                <ul>
                    <li>Use a variable to store state, and recreate or duplicate an Edit Context from that variable.</li>
                    <li>Persist state to a DataSource.</li>
                    <li>Use Offline storage to persist state.</li>
                </ul>
            ]]></description>
            <children>
                <Example title="Automatic" jsURL="portal/persistence/automaticPersistence.js" id="automaticPersistence" isOpen="false" 
                    needEditMode="true" requiresModules="Tools"
                    icon="[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png">
                    <tabs>
                        <tab title="Tile Palette" url="portal/palettes/tilePalette.js" />
                    </tabs>
                    <description><![CDATA[
                        <p>The state of an Edit Context can be saved to a variable. That variable can then be used to
                        duplicate or recreate the Edit Context.</p>
                        <p>Try dragging some components from the Tile Palette to the Edit Pane. Click the
                        "Destroy and Recreate" button to save the Edit Pane's state, destroy it, and then
                        recreate it. The process is animated, to illustrate the process
                        (which would otherwise occur instantly).</p>
                    ]]></description>
                </Example>
                <Example title="DataSource" isOpen="false" jsURL="portal/persistence/datasource.js" id="dataSourcePersistence" 
                    icon="[ISO_DOCS_SKIN]/images/silkicons/database_table.png"                    
                    dataSource="editNodes" needEditMode="true" requiresModules="Tools">
                    <tabs>
                        <tab title="Tile Palette" url="portal/palettes/tilePalette.js" />
                    </tabs>
                    <description>
                        The state of an Edit Context can be connected to a DataSource. Try dragging some
                        components from the Tile Palette to the Edit Pane. Click on "Save" to save the state
                        of the Edit Pane to a DataSource. Make some changes to the Edit Pane, and then click
                        "Restore". Note how the state of the Edit Pane is restored to its saved state.
                    </description>
                </Example>
                <Example title="Offline" isOpen="false" jsURL="portal/persistence/offline.js" id="offlinePersistence" needEditMode="true" requiresModules="Tools">
                    <tabs>
                        <tab title="Tile Palette" url="portal/palettes/tilePalette.js" />
                    </tabs>
                    <description><![CDATA[
                        <p>The state of an Edit Context can be connected to Offline storage. Try dragging some
                        components from the Tile Palette to the Edit Pane. Click on "Save" to save the state
                        of the Edit Pane to a DataSource. Make some changes to the Edit Pane, and then click
                        "Restore". Note how the state of the Edit Pane is restored to its saved state.</p>
                        <p>Try reloading the page to see saved state automatically restored. (Note that the
                        example does not automatically save state).</p>
                    ]]></description>
                </Example>
            </children>
        </ExampleFolder>
        <Example title="Portal Dashboard" descriptionHeight="160" jsURL="portal/dashboard.js" id="portalDashboard" needEditMode="true" requiresModules="Tools"
            icon="[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png">
            <tabs>
                <tab name="dashboards" dataSource="dashboards" canEdit="false"/>
                <tab name="animals" dataSource="animals" canEdit="false"/>
                <tab name="supplyItem" dataSource="supplyItem" canEdit="false"/>
                <tab name="supplyCategory" dataSource="supplyCategory" canEdit="false"/>
            </tabs>
        
            <description><![CDATA[
                <p>With the Tools framework, you can create dashboards of portlets.
                This example uses a list of pre-configured grid portlets that can be viewed or edited.</p>
                <p>Double-click a pre-configured dashboard to view the saved portal layout consisting of
                one or more grids. To make changes, select the dashboard and click Edit button.
                Change the criteria, field order or size, sort order, highlights,
                or grouping to see how these properties are persisted.</p>
                <p>Select a dashboard and click Clone button to generate another copy for experimentation.
                Rename the new dashboard by right-clicking on the record and choosing Rename option.
                </p>
            ]]></description>
        </Example>
    </children>
</ExampleFolder>

<!-- Applications -->
<ExampleFolder title="Applications" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/application_osx.png"><description>
    Demos of complete applications based on SmartClient.
</description><children>

    <Example title="Office Supply Catalog" id="applicationShowcaseApp" ref="showcaseApp"/>
        
    <!-- 
    
    -->

    <Example title="Interactive Analytics"
        id="analytics"
        showSkinSwitcher="true" requiresModules="Drawing,Analytics"
        dataSource="productRevenue"
        jsURL="advanced/cubegrid/databound_cubegrid.js"
        fullScreen="true"
        screenshot="advanced/cubegrid/databound_cubegrid.png"
        screenshotWidth="468"
        screenshotHeight="327"

    ><tabs><tab title="facet controls" url="advanced/cubegrid/facet_controls.js" loadAtEnd="true"/>
    </tabs>
	<descriptionHeight>100</descriptionHeight>
	<description><![CDATA[
        This example shows binding to a multi-dimensional dataset, where each
        cell value has a series of attributes, called "facets", that appear as headers
        labelling data values.  Facets can be added to the view, exposing more detail, by
        dragging the menu buttons onto the grid, or into the "Row Facets" and "Column Facets"
        listings.
        <P>
        Facets can be removed from the view by using the menus to set a facet to a fixed
        value.  For example, use the "Time" menu to show just data from 2002: "Time -> Fix Time
        Value -> All Years -> 2002".
        <P>
        Click the turndown controls on facet values to expand tree facets.  Note that data
        loads as it is revealed by expanding and collapsing tree facets, by adding facets, or
        by scrolling in either direction.  This allows users to navigate extremely large data sets.
        <P>
        Right click on any data value or facet value to generate a chart showing how that
        particular value varies along up to two facets.  For example, click on any data
        value for "Office Paper Products" and choose "Chart -> Sales by Time and Region" to see
        how this category of products is selling in different regions and time periods.  Switch to 
		different chart types (eg Radar) on the fly.
        <i><b>(Note: Chart support requires the Drawing Module. 
        If not installed, the Analytics Module, including the CubeGrid and
        the remainder of this sample, will continue to function normally.)</b></i>
        <P>
        Because the CubeGrid uses a DataSource to load data, it can be connected to any kind
        of server or data provider.  This sample loads data from an SQL database.
    ]]></description>
    </Example>
    <!--
    <ExampleFolder title="Internationalization" isOpen="false" external="true"><description>
    Click on "blah" (French for "Validate") to see a validation error message in French.
    &lt;P&gt;
    Messages can be internationalized via the same techniques uses for classic web
    applications.  Here JSP expressions are used to refer to a resource bundle which may 
    differ by locale.
    </description><children>
    </children></ExampleFolder>

    <ExampleFolder title="Flash integration" isOpen="false"><description>
    </description><children>
    </children></ExampleFolder>

    <ExampleFolder title="Applet integration" isOpen="false"><description>
    </description><children>
    </children></ExampleFolder>
    -->
</children></ExampleFolder>

<ExampleFolder title="Extending" isOpen="false" icon="[ISO_DOCS_SKIN]/images/silkicons/arrow_branch.png"><description>
    Examples of extending SmartClient functionality
</description><children>
    <Example title="Component Reuse"
        jsURL="extending/componentReuse.js" css="extending/portlet.css">
		<description>
        The portlets below are a custom component created with less than one page of code
        (see the "JS" tab).  The portlets support drag repositioning, drag resizing, a close
        button, can contain any HTML content, and are skinnable.
    </description>
    </Example>
    <Example id="patternReuse" title="Pattern Reuse"
        dataSource="supplyItem"
        jsURL="extending/patternReuse.js">
    <tabs><tab title="countryDS" url="grids/ds/countrySQLDS.ds.xml" canEdit="false" />
    </tabs>
	<description>
        Click to select a DataSource, click on records to edit them in the adjacent form, then
        click the "Save" button to save changes.&lt;br&gt;
        This custom component combines a databound form and grid into a reusable application
        pattern of side-by-side editing, that can be used with any DataSource.
    </description>
    </Example>
    <Example title="Schema Reuse" id="extSchemaChaining" ref="schemaChaining"/>
    <Example title="Type Reuse" id="extCustomSimpleType" ref="DBcustomSimpleType"/>
    <Example title="Localization"
        id="changeLocales"
        jsURL="extending/changeLocales.js">
       <tabs>
        <tab title="worldDS" url="grids/ds/worldSQLDS.ds.xml" canEdit="false" />
        </tabs>
		<descriptionHeight>105</descriptionHeight>
        <description>
        <![CDATA[ Select a different language from the Locale drop down list, and click the "Change
        Locale" button to change the default language. The following UI elements will change 
        the language in which they are displayed. The month chooser of the date picker, the operator
        chooser of the custom filter, and the header context menus of the ListGrid. 
        SmartClient supports localization via configurable property files. See the 
        documentation under "Internationalization and Localization" for more information about using existing locale files or
        creating custom locales.]]>
        </description>
    </Example>     
     <!-- _local versions of the date format examples will not set the formatters globally, so avoid
         effecting other examples after this example has been viewed
         Note: This means if the user modifies the source in the JS tab, their changes won't actually
         be displayed in the example -->
    <Example title="Standard Date Format"
        showSource="false"
        id="dateFormat"
        jsURL="extending/dateFormat_local.js"><tabs>
        <tab title="JS" url="extending/dateFormat.js" doEval="false"/>
        <tab title="employees" url="extending/employees.js"/>
        </tabs>
		<description>
        <![CDATA[ Dates displayed in the "Hire Date" field in this example are formatted using the
        standard <code>"toJapanShortDate"</code> formatter. Click on a record to edit it in the
        Form, or double click to edit inline in the ListGrid.]]>
        </description>
    </Example>
    <Example title="Custom Date Format"
        showSource="false"
        id="customDateFormat"
        jsURL="extending/customDateFormat_local.js"><tabs>
        <tab title="JS" url="extending/customDateFormat.js" doEval="false"/>
        <tab title="employees" url="extending/employees.js"/>
        </tabs>
		<description>
        <![CDATA[ Dates displayed in the "Hire Date" field in this example are formatted
        using a custom formatting function. Click on a record to edit it in the
        Form, or double click to edit inline in the ListGrid.]]>
        </description>
    </Example>
    <Example title="Custom Data Type"
        id="customDataType"
        jsURL="extending/customDataType.js"
        dataSource="supplyItemCurrency">
        <description>
        <![CDATA[ This example demonstrates using a custom SimpleType to provide standard
        type based validation, formatting and parsing logic across components. The "unitCost"
        field is of type <code>"currency"</code> which is explicitly defined in the source
        as a SimpleType inheriting from float. Both the (editable) ListGrid and the DynamicForm
        respect the settings defined in this type definition.]]>
        </description>
    </Example>
    <Example title="Customize Fields" dataSource="supplyItem"
             jsURL="extending/customizeFields.js">
        <description>
        Edit field definitions in the grid below to override how this form binds to the 
        "supplyItem" DataSource.  This is a simplified example of how
        an application can be delivered that can be customized with organization-specific fields
        and rules. Dynamic schema binding makes building WYSIWYG editing interfaces very
        simple.  
        </description></Example>
    
    
    <Example id="customFormItem" title="Custom Form Items" jsURL="extending/customFormItem.js">
        <description>
            Developers can create a custom item and still hook into the standard "change()" / "changed()" notifications that a normal user interaction would fire.
        </description>
    </Example>
    
    
    <Example title="Drag and Drop" id="extCustomDrag" ref="customDrag"/>
    <Example title="Hovers" id="extCustomHovers" ref="customHovers"/>
    <Example title="Mouse Handling" id="extCustomMouseEvents" ref="customMouseEvents"/>
    <Example title="Animation" id="extCustomAnimation" ref="customAnimation"/>
    <Example title="Simple Portal" id="extPortalAnimation" ref="portalAnimation"/>
    <!--
    <Example title="fckEditor integration" ref="fckEditor"/> 
    -->
</children></ExampleFolder>
</children></root></ExampleTree>
