IButton component responds to mouse clicks by showing a\n modal Dialog component with the \"Hello world!\" message. Source code is\n provided in both XML and JS formats.\n ", title:"Hello World"},
{
jsURL:"welcome/helloStyled.js",
visibility:"sdk",
xmlURL:"welcome/helloStyled.xml",
description:"\n This Label component is heavily styled with a combination of CSS class,\n CSS attribute shortcuts, and SmartClient attributes. Source code is\n provided in both XML and JS formats.\n ",
tabs:[
{title:"CSS", url:"welcome/helloStyled.css"}
],
title:"Hello World (styling)"
},
{jsURL:"welcome/helloForm.js", visibility:"sdk", xmlURL:"welcome/helloForm.xml",
description:"\n This SmartClient FormLayout provides a text field and a button control.\n Type your name in the field, then click the button for a personalized message.\n Source code is provided in both XML and JS formats.\n ", title:"Hello You (form)"},
{icon:"[ISO_DOCS_SKIN]/images/silkicons/cal.png", ref:"databoundCalendar",
title:"Databound Calendar"},
{icon:"[ISO_DOCS_SKIN]/images/silkicons/application_put.png",
ref:"fetchOperation", description:"\n Rows are fetched automatically as the user drags the scrollbar. Drag the \n scrollbar quickly to the bottom to fetch a range near the end (a prompt will appear \n during server fetch).
\nScroll slowly back up to fill in the middle.
\nAnother key unique feature of SmartClient is lazy rendering of columns. Most \n browsers cannot handle displaying a large number of column and have serious \n performance issues. SmartClient, however, does not render all columns outside the \n visible area by default and only renders them as you scroll horizontally. You can \n however disable this feature if desired.
\nYou can control how far ahead of the currently visible area rows should be \n rendered. This is expressed as a ratio from viewport size to rendered area size. \n The default is 1.3.
\nTweaking drawAheadRatio allows you to make tradeoffs between continuous \n scrolling speed vs initial render time and render time when scrolling by large \n amounts.
", title:"Live Grid"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/sc_insertformula.png", ref:"filterBuilderBracket", title:"Advanced Filter"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_view_detail.png", ref:"adaptiveFilter", title:"Adaptive Filter"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_side_tree.png", ref:"dynamicGrouping", title:"Dynamic Grouping"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_view_detail.png", ref:"dynamicFreeze", title:"Dynamic Frozen Columns"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png", ref:"massUpdate", title:"Mass Update"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_split.png", ref:"relatedRecords", title:"Related Records"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png", ref:"databoundDependentSelects", title:"Dependent Selects (Grid)"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_view_columns.png", ref:"formDependentSelects", title:"Dependent Selects (Form)"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/database_link.png", ref:"databoundDragCopy", title:"Databound Dragging"}, { dataSource:"supplyCategory", fullScreen:"true", icon:"[ISO_DOCS_SKIN]/images/silkicons/application_osx.png", jsURL:"demoApp/demoAppJS.js", needServer:"true", screenshot:"demoApp/demoApp.png", screenshotHeight:"337", screenshotWidth:"480", xmlURL:"demoApp/demoAppXML.xml", description:"Demonstrates a range of SmartClient GUI components, data binding operations,\n and layout managers in a single-page application.\n ", tabs:[ {title:"supplyItem", url:"supplyItem.ds.xml"} ], id:"showcaseApp", title:"Complete Application" }, {ref:"serverExamples", isOpen:true, title:"Server Examples"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/application_view_tile.png", ref:"tilingFilter", title:"Tile Sort & Filter"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/cube_simple.png", ref:"basicCube", title:"Simple Cube"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/cube_simple.png", ref:"analytics", title:"Advanced Cube"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/pencil.png", ref:"Drawing", showSkinSwitcher:false, title:"Drawing Preview"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/world.png", ref:"portal", title:"Portal Preview"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/printer.png", ref:"printing", title:"Printing"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/database_table.png", ref:"patternReuse", title:"Pattern Reuse"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/arrow_in.png", ref:"xmlSchemaImport", title:"Metadata Import"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/bug.png", jsURL:"devConsole/devConsole.js", description:"\nThe Developer Console is a suite of development tools implemented in SmartClient itself. The\nConsole runs in its own browser window, parallel to your running application, so it is always\navailable: in every browser, and in every deployment environment.frozen:true on a column definition establishes a\n frozen column. Column resize and reorder work normally.\n ",
tabs:[
{dataSource:"supplyItem", name:"supplyItem"}
],
id:"simpleFreeze",
title:"Simple Freeze"
},
{
jsURL:"grids/freezeFields/dynamicFreeze.js",
description:"\n Right click on any column header to show a menu that allows you to freeze\n that column.\n The Formula and Summary Builders are accessible from the grid header context menu. They \n can also be invoked programatically as demonstrated by clicking the buttons in this \n sample.\n
\n Launch the Formula Builder and enter the title of the new field, and the desired \n formula. For example, enter Population Density for the field title and in the \n formula field enter A / B. As indicated in the dialog, A represents the \n Population field, and B represents the Area field. Notice that you can now sort on this \n newly added Population Density field just like any other field. Click the help \n icon to view the various supported inbuilt functions.\n
\n Next launch the Summary Builder and enter the title of the new field, and the Summary \n formulation. For example, enter County (Flag) for the field name and enter \n #B (#A) in the summary field.\n
\n Once some additional user-fields have been added, all you need to persist the column-layout\n for later restoration to another grid, is the ability to save a string. Click the \n button below to store the grid's state by calling getFieldState(), destroy the \n grid and restore it's state to another grid using setFieldState(). \n \n ", tabs:[ {canEdit:"false", title:"countryDS", url:"grids/ds/countrySQLDS.ds.xml"} ], id:"customColumns", title:"Custom Columns" }, { description:"\n Using the TileGrid to display data in a tiled format.\n", isOpen:false, title:"Tiling", children:[ { jsURL:"grids/tiling/basic.js", description:"\n SmartClient can display data in a \"tiled\" view. Mouse over widgets to see rollovers, click to\n select (shift- and ctrl-click for multi-select).\n ", tabs:[ {title:"animalData", url:"grids/data/animalData.js"} ], id:"tilingBasic", title:"Basic" }, { cssURL:"grids/tiling/tileStyle.css", jsURL:"grids/tiling/filter.js", description:"\n Tiled views can be filtered and sorted just like ListGrids. Use the \"Search\" form to eliminate\n some tiles and watch remaining tiles animate to new positions. Use the \"Sort\" form to change\n the sort direction.\n ", tabs:[ {canEdit:"false", title:"animalsDS", url:"grids/ds/animalsSQLDS.ds.xml"} ], id:"tilingFilter", title:"Filter & Sort" }, {jsURL:"grids/tiling/loadOnDemand.js", description:"\n Tiled views can load data from services via DataSources, just like other data-aware components.\n Enter a search term to search Yahoo Images and display available images as tiles. \n ", id:"tilingLoadOnDemand", title:"Load on Demand"}, { cssURL:"grids/tiling/tileStyle.css", jsURL:"grids/tiling/editing.js", description:"\n Tiled views can be connected to editors. The TiledView automatically reacts to changes to the\n underlying dataset. Change the life span of Gazelle to 2 to see it\n animate to the beginning of the list.\n ", tabs:[ {canEdit:"false", title:"animalsDS", url:"grids/ds/animalsSQLDS.ds.xml"} ], id:"tilingEditing", title:"Editing" } ] }, { jsURL:"grids/export.js", requiresModules:"SCServer", description:"\n It's now easy to export data from a DataSource or from DataboundComponents, \n such as ListGrid, TreeGrid and TileGrid. In the example \n below, choose an Export-Format from the select-list, decide whether to \n download the results or view them in a window using the checkbox and \n click the Export button. Because exporting to JSON is allowed only via \n server-side custom-code or via an OperationBinding, choosing JSON\n from the select-item issues the export using the operationId set up in\n the DataSource but still respects the \"Show in Window\" checkbox. See the \n JS and worldDSExport tabs below.\n
Try changing the filters and sort-order on the grid to see that the exported data \n is filtered and sorted according to criteria applied to the grid.\n ",
tabs:[
{canEdit:"false", title:"worldDSExport",
url:"grids/ds/worldSQLDSExport.ds.xml"}
],
id:"export",
title:"Export"
},
{
description:"\n Built-in display and editing behaviors for common data types, and how to customize them.\n",
isOpen:false,
id:"gridsDataTypes",
title:"Data types",
children:[
{
jsURL:"grids/dataTypes/text.js",
description:"\n Click on column headers to sort, or data values to edit.\n All fields in this grid are text fields.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Text"
},
{
jsURL:"grids/dataTypes/image.js",
description:"\n \"Flag\" is an image field.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"imageType",
title:"Image"
},
{
jsURL:"grids/dataTypes/longtext.js",
description:"\n Click on data values to edit.\n \"Government\" is a long text field with a popup editor.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"longText",
title:"Long Text"
},
{
jsURL:"grids/dataTypes/date.js",
description:"\n Click on column headers to sort, or data values to edit.\n \"Nationhood\" is a date field.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Date"
},
{
jsURL:"grids/dataTypes/integer.js",
description:"\n Click on column headers to sort, or data values to edit.\n \"Population\" is an integer field.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Integer"
},
{
jsURL:"grids/dataTypes/decimal.js",
description:"\n Click on column headers to sort, or data values to edit.\n \"GDP\" is a decimal (aka float) field.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Decimal"
},
{
jsURL:"grids/dataTypes/boolean.js",
description:"\n Click on column headers to sort, or data values to edit.\n \"G8\" is a boolean (true/false) field.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Boolean"
},
{
jsURL:"grids/dataTypes/linkText.js",
description:"\n Click on the values in the \"Info\" column to open external links.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Link (text)"
},
{
jsURL:"grids/dataTypes/linkImage.js",
description:"\n Click on the book images in the \"Info\" column to open external links.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"linkImage",
title:"Link (image)"
},
{
jsURL:"grids/dataTypes/list.js",
description:"\n Click on column headers to sort, or data values to edit.\n \"Continent\" is a list (aka valueMapped) field.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"listType",
title:"List"
},
{
jsURL:"grids/dataTypes/calculated.js",
description:"\n Click on column headers to sort, or data values to edit.\n \"GDP (per capita)\" is calculated from the \"GDP\" and \"Population\" fields.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"calculatedCellValue",
title:"Calculated"
}
]
},
{
description:"\n How to bind grids to DataSources to share field (column) definitions with other components,\n and how to load data from local and remote data sources and services. \n",
isOpen:false,
id:"gridsDataBinding",
title:"Data binding",
children:[
{
jsURL:"grids/dataBinding/fieldsGrid.js",
description:"\n This ListGrid takes its field (column) settings from the \"fields\"\n property of the component definition only. This technique is appropriate for\n presentation-only grids that do not require data binding.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"listGridFields",
title:"ListGrid fields"
},
{
jsURL:"grids/dataBinding/fieldsDS.js",
description:"\n This ListGrid takes its field (column) settings from the\n countryDS DataSource specified in the \"dataSource\" property of the\n component definition. This technique is appropriate for easy display of a shared\n data model with the default UI appearance and behaviors.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"},
{title:"countryDS", url:"grids/ds/countryMergeDS.ds.js"}
],
id:"dataSourceFields",
title:"DataSource fields"
},
{
jsURL:"grids/dataBinding/fieldsMerged.js",
description:"\n This ListGrid merges field settings from both the component \"fields\"\n (for presentation attributes) and the countryDS DataSource (for\n data model attributes). This is the usual approach to customize the look and feel of a\n data-bound component.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"},
{title:"countryDS", url:"grids/ds/countryMergeDS.ds.js"}
],
id:"mergedFields",
title:"Merged fields"
},
{jsURL:"grids/dataProviders/inlineData.js",
description:"\n This ListGrid uses an inline data array in the component definition. This\n technique is appropriate for very small read-only data sets, typically with static data\n values.\n ", id:"inlineData",
title:"Inline data"},
{
jsURL:"grids/dataProviders/localData.js",
description:"\n This ListGrid loads data from a local data array (included in a separate\n JavaScript data file). This technique is appropriate for read-only data sets, typically\n with less than 500 records.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"localData",
title:"Local data"
},
{
jsURL:"grids/dataProviders/databound.js",
description:"\n This ListGrid binds to a client-only DataSource that loads data\n from a local data array. This technique is appropriate for client-only rapid prototyping\n when the production application will support add or update (write operations), switchable\n data providers (JSON, XML, WSDL, Java), arbitrarily large data sets (1000+ records), or\n a data model that is shared by multiple components.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"},
{title:"countryDS", url:"grids/ds/countryLocalDS.ds.js"}
],
id:"localDataSource",
title:"Local DataSource"
},
{
jsURL:"grids/dataProviders/databound.js",
description:"\n This ListGrid binds to a DataSource that loads data from a\n remote JSON data provider. This approach of loading simple JSON data over HTTP can be\n used with PHP and other server technologies.\n ",
tabs:[
{title:"countryDS", url:"grids/ds/countryJSONDS.ds.xml"},
{canEdit:"false", doEval:"false", title:"countryData.json",
url:"grids/data/countryData.json"}
],
id:"jsonDataSource",
title:"JSON DataSource"
},
{
jsURL:"grids/dataProviders/databound.js",
needXML:"true",
description:"\n This ListGrid binds to a DataSource that loads data from a\n remote XML data provider. This approach of loading simple XML data over HTTP can be\n used with PHP and other server technologies.\n ",
tabs:[
{title:"countryDS", url:"grids/ds/countryXMLDS.ds.xml"},
{canEdit:"false", doEval:"false", title:"countryData.xml",
url:"grids/data/countryData.xml"}
],
id:"xmlDataSource",
title:"XML DataSource"
},
{
jsURL:"grids/dataProviders/WSDLBound.js",
needXML:"true",
description:"\n This ListGrid binds to a DataSource that loads data via a\n WSDL service. This example WSDL service supports all 4 basic operation types (fetch,\n add, update, remove) and can be implemented with any server technology. Sample\n request/response SOAP messages for a \"fetch\" operation are shown.\n ",
tabs:[
{title:"countryDS", url:"grids/ds/countryWSDLDS.ds.xml"},
{canEdit:"false", doEval:"false", title:"soapRequest.xml",
url:"grids/data/countrySoapRequest.xml"},
{canEdit:"false", doEval:"false", title:"soapResponse.xml",
url:"grids/data/countrySoapResponse.xml"},
{canEdit:"false", doEval:"false", title:"WSDL",
url:"grids/ds/SmartClientOperations.wsdl"}
],
id:"WSDLDataSource",
title:"WSDL DataSource"
}
]
},
{
description:"\n Basic operations on datasets, both local and remote.\n",
isOpen:false,
title:"Data operations",
children:[
{
jsURL:"grids/dataOperations/localSet.js",
visibility:"sdk",
description:"\n Click the buttons to populate the grid with records from a local data set.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Local set"
},
{
jsURL:"grids/dataOperations/localAdd.js",
visibility:"sdk",
description:"\n Click the buttons to add records to the top and bottom of the list.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Local add"
},
{
jsURL:"grids/dataOperations/localRemove.js",
visibility:"sdk",
description:"\n Click \"Remove first\" to remove the first record in the list. Click the other buttons to\n remove records based on your selection (click, Ctrl-click, or\n Shift-click in the list to select records).\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Local remove"
},
{
jsURL:"grids/dataOperations/localUpdate.js",
visibility:"sdk",
description:"\n Click to select any record in the list, then click one of the buttons to change\n the \"Continent\" value for that record. Also see the Grids > Editing examples\n for automatic update behavior.\n ",
tabs:[
{title:"countryData", url:"grids/data/countryData.js"}
],
title:"Local update"
},
{
jsURL:"grids/dataOperations/databoundFetch.js",
description:"\n Click the buttons to fetch (exact match) country records from the server.\n Click the \"Fetch All\" button to fetch the first \"page\" of 50 records, then scroll\n the grid to fetch new pages of data on demand.\n ",
tabs:[
{canEdit:"false", title:"worldDS",
url:"grids/ds/worldSQLDS.ds.xml"}
],
id:"databoundFetch",
title:"Databound fetch"
},
{
jsURL:"grids/dataOperations/databoundFilter.js",
description:"\n Click the buttons to filter (partial match) records from the server. Also see the\n Grids > Sort & filter > Filter example for automatic databound Filter\n operations triggered by user input.\n ",
tabs:[
{canEdit:"false", title:"worldDS",
url:"grids/ds/worldSQLDS.ds.xml"}
],
id:"databoundFilter",
title:"Databound filter"
},
{
jsURL:"grids/dataOperations/databoundAdd.js",
description:"\n Click the \"Add new country\" button to create a new country record on the server.\n Also see the Grids > Editing > Enter new rows example for automatic databound\n Add operations triggered by user input.\n ",
tabs:[
{canEdit:"false", title:"worldDS",
url:"grids/ds/worldSQLDS.ds.xml"}
],
id:"databoundAdd",
title:"Databound add"
},
{
jsURL:"grids/dataOperations/databoundRemove.js",
description:"\n Click \"Remove first\" to remove (delete) the first record in the list from the server.\n Click the other buttons to remove records based on your selection (click, Ctrl-click, or\n Shift-click in the list to select records).\n ",
tabs:[
{canEdit:"false", title:"worldDS",
url:"grids/ds/worldSQLDS.ds.xml"}
],
id:"databoundRemove",
title:"Databound remove"
},
{
jsURL:"grids/dataOperations/databoundUpdate.js",
description:"\n Click to select any record in the list, then click one of the buttons to change\n the \"Continent\" value for that record on the server. Also see the Grids > Editing\n examples for automatic databound Update operations triggered by user input.\n ",
tabs:[
{canEdit:"false", title:"worldDS",
url:"grids/ds/worldSQLDS.ds.xml"}
],
id:"databoundUpdate",
title:"Databound update"
}
]
},
{ref:"dataIntegration", visibility:"www", title:"Service Integration"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/chart_organisation.png",
showSkinSwitcher:"true",
description:"\n High-performance interactive tree views\n
\n
\n Trees are based on grid views, and so share all of the appearance, interactivity and\n databinding features of grids, in addition to tree-specific features.\n",
isOpen:false,
title:"Trees",
children:[
{
description:"\n Trees can have dynamic titles, display multiple columns and show connector\n lines.\n ",
isOpen:false,
title:"Appearance",
children:[
{dataSource:"employees", jsURL:"trees/appearance/nodeTitles.js",
description:"\n Formatter interfaces allow you to add custom tree titles.\n ", id:"nodeTitles",
title:"Node Titles"},
{dataSource:"employees", jsURL:"trees/appearance/multipleColumns.js",
description:"\n Trees can show multiple columns of data for each node. Each column has the\n styling, formatting, and data type awareness features of columns in a normal\n grid.\n\n Try drag reordering columns, or sorting by the Salary field.\n ", title:"Multiple Columns"},
{
cssURL:"trees/appearance/connectors.css",
dataSource:"employees",
jsURL:"trees/appearance/connectors.js",
description:"\n Trees can show skinnable connector lines. Toggle the checkbox to show or hide \"full\"\n connector lines.\n ",
badSkins:["BlackOps", "SilverWave"],
bestSkin:"TreeFrog",
id:"connectors",
title:"Connectors"
}
]
},
{
description:"\n Trees have built-in drag and drop behaviors and tree-specific events.\n ",
isOpen:false,
title:"Interaction",
children:[
{
jsURL:"trees/interaction/dragReparent.js",
description:"\n Try dragging employees under new managers. Note that a position indicator line\n appears during drag, allowing employees to be placed in a particular order.\n ",
tabs:[
{name:"employeeData", url:"trees/employeeData.js"}
],
id:"treeDragReparent",
title:"Drag reparent"
},
{ref:"dragTree", title:"Drag nodes"},
{ref:"treeDragReparent",
description:"\n Try dragging employees under new managers. Note that closed folders automatically\n open if you hover over them momentarily.\n ", title:"Springloaded Folders"},
{
jsURL:"trees/interaction/dropEvents.js",
description:"\n Click on any category on the left to show items from that category on the right. \n Drag and drop items from the list on the right into new categories in the tree on\n the left.\n ",
tabs:[
{dataSource:"supplyCategory", name:"supplyCategory"},
{dataSource:"supplyItem", name:"supplyItem"}
],
id:"treeDropEvents",
title:"Drop Events"
}
]
},
{
description:"\n Trees can bind to DataSources and handle all the data formats that grids can, using\n additional properties to control tree structure, open state, and folderness.\n ",
isOpen:false,
id:"treesDataBinding",
title:"Data binding",
children:[
{jsURL:"trees/dataBinding/parentLinking.js",
description:"\n Tree data can be specified as a flat list of nodes that refer to each other by\n ID. This format is also used for load on demand.\n ", id:"parentLinking",
title:"Parent Linking"},
{jsURL:"trees/dataBinding/childrenArrays.js",
description:"\n Tree data can be specified as a tree of nodes where each node lists its children.\n ", id:"childrenArrays",
title:"Children Arrays"},
{
jsURL:"trees/dataBinding/loadXMLParentLinked.js",
description:"\n Tree data can be loaded in XML or JSON format. For a \"parent-linked\" Tree, the\n primaryKey and foreignKey declarations in the DataSource\n control how nodes are linked together to form the tree structure.\n \n ",
tabs:[
{canEdit:"false", doEval:"false", title:"employeesXMLData",
url:"trees/dataBinding/employeesDataParentLinked.xml"}
],
title:"Load XML (Parent Linked)"
},
{
jsURL:"trees/dataBinding/loadXMLChildrenArrays.js",
needXML:"true",
description:"\n Tree data can be loaded in XML or JSON format. For a \"children arrays\" Tree, one\n DataSource field is marked childrenProperty:true, and the children of\n a node are expected to appear under the same-named XML element or JSON property.\n \n ",
tabs:[
{canEdit:"false", doEval:"false", title:"employeesXMLData",
url:"trees/dataBinding/employeesDataChildrenArrays.xml"}
],
id:"treeLoadXML",
title:"Load XML (Child Arrays)"
},
{dataSource:"employees", jsURL:"trees/dataBinding/loadOnDemand.js",
description:"\n Begin opening folders and note the prompt which briefly appears during server\n fetches. Trees can load data one folder at a time. When a folder is opened for the first\n time, the tree asks the server for the children of the node just opened by passing\n the unique id of the parent as search criteria.\n ", title:"Load on Demand"},
{dataSource:"employees", jsURL:"trees/dataBinding/initialDataLOD.js",
description:"\n Begin opening folders and note the load on demand behavior.\n \n Trees that use load on demand can optional specify an initial dataset set up front. \n ", id:"initialData",
title:"Initial Data & Load on Demand"}
]
},
{dataSource:"employees", jsURL:"trees/sorting.js",
description:"\n Trees sort per folder. Click on the \"Name\" column header to sort alphabetically by\n folder name, or on the \"Salary\" column header to sort by Salary.\n ", title:"Sorting"},
{dataSource:"employees", jsURL:"trees/editing.js",
description:"\n Click on employees in the tree to edit them, and drag and drop employees to rearrange them.\n Choose an employee via the menu to see that employee's direct reports in the ListGrid. Changes\n made in the tree or ListGrid are automatically saved to the server and reflected in the other\n components.\n ", id:"treesEditing",
title:"Editing"},
{dataSource:"employees", jsURL:"trees/freezeTree.js",
description:"\n Setting frozen:true enables frozen columns for Trees. Columns\n can be frozen and unfrozen by right-clicking on column headers.
\n Column resize, column reorder, drag and drop and load on demand all function normally.\n ", id:"freezeTree",
title:"Frozen Columns"},
{dataSource:"employees", jsURL:"trees/millerColumns.js",
description:"\n The ColumnTree provides an alternate navigation paradigm for Tree data,\n sometimes called \"Miller Columns\" and seen in Apple™ iTunes™.\n The ColumnTree provides identical data binding and load on demand facilities to\n normal TreeGrids.\n ", id:"millerColumns",
title:"Miller Columns"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/cube_blue.png",
description:"\n Multidimensional \"cube\" data sets as used in BI, Analytics and OLAP applications.\n Load-on-demand, drill-down, roll-up, in-browser dataset pivoting, multiple frozen panes, \n resizing and reorder of fields, tree dimensions, chart generation, editing and other\n features.\n",
isOpen:false,
id:"cubeGrid",
title:"Cubes",
children:[
{
jsURL:"cubes/basicCube.js",
requiresModules:"Analytics",
description:"\n In this multi-dimensional dataset, each cell value has a series of attributes,\n called \"facets\", that appear as stacked headers labelling the cell value. \n ",
tabs:[
{title:"productData", url:"cubes/productData.js"}
],
id:"basicCube",
title:"Basic Cube"
},
{ref:"analytics", requiresModules:"Analytics", title:"Analytics"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/vcard_edit.png",
description:"\n Form managers and input controls.\n",
isOpen:false,
title:"Forms",
children:[
{
description:"\n A specialized form layout manager allows your forms to grow into available space,\n hide sections, and span across tabs.\n ",
isOpen:false,
id:"formsLayout",
title:"Layout",
children:[
{jsURL:"forms/layout/titles.js",
description:"\n Click on \"Swap Titles\" to change title orientation.\n \n Form layout automatically places titles next to fields. Left-oriented titles take\n up a column so that labels line up. Top oriented titles don't.\n ", id:"formLayoutTitles",
title:"Titles"},
{jsURL:"forms/layout/spanning.js",
description:"\n Drag resize the form from the right edge to see the effect of spanning.\n \n Specifying column widths and column spanning items allows for larger and smaller\n input areas.\n ", id:"columnSpanning",
title:"Spanning"},
{jsURL:"forms/layout/filling.js",
description:"\n Click on the \"Short Message\" and \"Long Message\" buttons to change the amount of\n space available to the form.\n \n SmartClient form layouts allow you to fill available space, even when\n available space cannot be known in advance because it is data-dependant.\n ", id:"formLayoutFilling",
title:"Filling"},
{xmlURL:"ValuesManager.xml",
description:"\n Click \"Submit\" to jump to a validation error in the \"Stock\" tab.\n \n Forms which are split for layout purposes can behave like a single logical form for\n validation and saves.\n ", showSkinSwitcher:true,
id:"formSplitting", title:"Splitting"},
{xmlURL:"SectionItem.xml",
description:"\n Click on \"Stock\" to reveal fields relating to stock on hand.\n ", showSkinSwitcher:true,
id:"formSections", title:"Sections"},
{ref:"validationFieldBinding", title:"Data Binding"}
]
},
{
description:"\n Common field dependencies within a form, such as fields that are only applicable to\n some users, can be handled by specifying simple expressions.\n ",
isOpen:false,
title:"Field Dependencies",
children:[
{jsURL:"forms/fieldDependencies/showAndHide.js",
description:"\n Select \"On order\" to reveal the \"Shipping Date\" field.\n ", id:"formShowAndHide",
title:"Show & Hide"},
{jsURL:"forms/fieldDependencies/enableAndDisable.js",
description:"\n Check \"I accept the agreement\" to enable the \"Proceed\" button.\n ", id:"fieldEnableDisable",
title:"Enable & Disable"},
{jsURL:"forms/fieldDependencies/conditionallyRequired.js",
description:"\n Select \"No\" and click the \"Validate\" button - the reason field becomes required.\n ", id:"conditionallyRequired",
title:"Conditionally Required"},
{jsURL:"forms/fieldDependencies/matchValue.js",
description:"\n Try entering mismatched values for \"Password\" and \"Password Again\", then click\n \"Create Account\" to see a validation error.\n ", id:"matchValue",
title:"Match Value"},
{
jsURL:"forms/fieldDependencies/dependentSelects.js",
description:"\n
\n In this example, note that SmartClient is automatically populating all three\n of the fields in the teamMembers dataSource, even though none of those fields is present \n in the employees dataSource we are dragging from. Change the \"Team for Project\" select \n box, then try dragging employees across; note that the Project Code column is being \n correctly populated for the dropped records.\n ",
showSkinSwitcher:true,
tabs:[
{title:"teamMembers", url:"teamMembers.ds.xml"}
],
title:"Copy"
}
]
},
{ref:"adaptiveFilter", title:"Adaptive Filter"},
{ref:"adaptiveSort", title:"Adaptive Sort"},
{ref:"relatedRecords",
description:"\n Open the picker in either form to select the item you want to order from the\n \"supplyItem\" DataSource. The picker on the left stores the \"itemId\" from the\n related \"supplyItem\" records. The picker on the right stores the \"SKU\" while\n displaying multiple fields. You can scroll to dynamically load more records. \n This pattern works with any DataSource. \n ", title:"Related Records"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/database_table.png",
description:"\n SmartClient supports declarative, XPath-based binding of visual components to web services\n that return XML or JSON responses. SmartClient understands XML Schema and can bind\n components directly to WSDL web services. \n",
isOpen:false,
id:"dataIntegration",
title:"Data Integration",
children:[
{
description:"\n SmartClient can declaratively bind to standard formats like WSDL or RSS, homebrew\n formats, or simple flat files. \n ",
isOpen:false,
id:"xmlDataIntegration",
title:"XML",
children:[
{jsURL:"dataIntegration/xml/rssFeed.js", needXML:"true",
description:"\n DataSources can bind directly to simple XML documents where field values appear as\n attributes or subelements.\n ", showSkinSwitcher:true,
id:"rssFeed", title:"RSS Feed"},
{
jsURL:"dataIntegration/xml/xpathBinding.js",
needXML:"true",
description:"\n DataSources can extract field values from complex XML documents via XPath\n expressions. Note how the address fields, which are represented in the contacts\n data as a subelement, appear as columns in the grid. This approach of loading\n simple XML data over HTTP can be used with PHP and other server technologies.\n ",
showSkinSwitcher:true,
tabs:[
{canEdit:"false", doEval:"false", title:"contactsData.xml",
url:"dataIntegration/xml/contactsData.xml"}
],
id:"xpathBinding",
title:"XPath Binding"
},
{jsURL:"dataIntegration/xml/yahooWebServices.js", needXML:"true",
description:"\n XPath binding allows declarative integration with web services. Note how the\n height and width for the thumbnail images have been declaratively extracted from\n the \"Thumbnail\" subobject.\n ", showSkinSwitcher:true,
id:"xmlYahooWebServices", title:"Yahoo! Web Services"},
{jsURL:"dataIntegration/xml/wsdlWebServiceOperations.js", needXML:"true",
description:"\n SmartClient can load WSDL service definitions and call web service operations\n with automatic JSON<->XML translation.\n \n SOAP encoding rules, namespacing, and element ordering are handled automatically\n for your inputs and outputs. \n ", showSkinSwitcher:false,
id:"wsdlOperation", title:"WSDL Web Services"},
{jsURL:"dataIntegration/xml/googleSOAPSearch.js", needXML:"true",
description:"\n Enter a search in the \"q\" field to search the web with Google. \n \n DataSources can bind directly to the structure of WSDL messages.\n ", showSkinSwitcher:true,
id:"wsdlBinding", title:"Google SOAP Search"},
{
jsURL:"dataIntegration/xml/operationBinding_dataURL.js",
description:"\n Demonstrates Add, Update and Remove operations with a server that\n returns simple XML responses, an integration strategy popular with PHP, Ruby and Perl\n backends.\n
\n Each operation is directed to a different XML file containing a sample response for\n that operationType. The server returns the data-as-saved to allow the grid to update\n its cache.\n ",
tabs:[
{canEdit:"false", doEval:"false", title:"country_fetch.xml",
url:"dataIntegration/xml/responses/country_fetch.xml"},
{canEdit:"false", doEval:"false", title:"country_add.xml",
url:"dataIntegration/xml/responses/country_add.xml"},
{canEdit:"false", doEval:"false", title:"country_update.xml",
url:"dataIntegration/xml/responses/country_update.xml"},
{canEdit:"false", doEval:"false", title:"country_remove.xml",
url:"dataIntegration/xml/responses/country_remove.xml"}
],
id:"xmlEditSave",
title:"Edit and Save"
},
{
jsURL:"dataIntegration/xml/restDS_operationBinding.js",
description:"\n The RestDataSource provides a simple protocol based on XML or JSON over HTTP. This\n protocol can be implemented with any server technology (PHP, Ruby, ..) and \n includes all the features of SmartClient's databinding layer (data paging, server\n validation errors, cache sync, etc).
\n In this example, each DataSource operation is directed to a different XML file\n containing a sample response for that operationType. The server returns the\n data-as-saved to allow the grid to update its cache.\n ",
tabs:[
{canEdit:"false", doEval:"false", title:"country_fetch.xml",
url:"dataIntegration/xml/responses/country_fetch_rest.xml"},
{canEdit:"false", doEval:"false", title:"country_add.xml",
url:"dataIntegration/xml/responses/country_add_rest.xml"},
{canEdit:"false", doEval:"false", title:"country_update.xml",
url:"dataIntegration/xml/responses/country_update_rest.xml"},
{canEdit:"false", doEval:"false", title:"country_remove.xml",
url:"dataIntegration/xml/responses/country_remove_rest.xml"}
],
id:"restEditSave",
title:"RestDataSource - Edit and Save"
},
{
jsURL:"dataIntegration/xml/serverValidationErrors/serverValidationErrors.js",
needXML:"true",
description:"\n Click \"Save\" to see validation errors derived from an XML response.\n \n Validation errors expressed in application-specific XML formats can be \n communicated to visual components by implementing\n DataSource.transformResponse(). The resulting validation\n errors will be displayed and tracked by forms and editabled grids.\n ",
showSkinSwitcher:false,
tabs:[
{canEdit:"false", doEval:"false", title:"serverResponse.xml",
url:"dataIntegration/xml/serverValidationErrors/serverResponse.xml"}
],
id:"xmlServerValidationErrors",
title:"Server Validation Errors"
},
{
needXML:"true",
url:"dataIntegration/xml/xmlSchemaImport.js",
description:"\n Click \"Load Schema\" to load a version of the supplyItem\n DataSource expressed in XML Schema format, and bind the Grid and Form to it. Note\n that the form and grid choose appropriate editors according to declared XML Schema\n types. Click \"Validate\" to see validation errors from automatically imported\n validators.\n ",
showSkinSwitcher:true,
tabs:[
{canEdit:"false", doEval:"false", title:"supplyItem.xsd",
url:"dataIntegration/xml/supplyItem.xsd"}
],
id:"xmlSchemaImport",
title:"XML Schema Import"
},
{
needXML:"true",
url:"dataIntegration/xml/schemaChaining.js",
description:"\n Click \"Load Schema\" to load a supplyItem DataSource from\n XML Schema format, then extend that schema with SmartClient-specific presentation\n attributes, and bind the Grid and Form to it. Note that the internal \"itemId\"\n field has been hidden from the user, some fields have been retitled, and default\n editors overriden.\n ",
showSkinSwitcher:true,
tabs:[
{canEdit:"false", doEval:"false", title:"supplyItem.xsd",
url:"dataIntegration/xml/supplyItem.xsd"}
],
id:"schemaChaining",
title:"Schema Chaining"
},
{needXML:"true", ref:"WSDLDataSource", showSkinSwitcher:true,
title:"SmartClient WSDL"}
]
},
{
description:"\n SmartClient brings declarative XPath binding and typed schema (even XML Schema) to the\n simple and convenient JSON format.\n ",
isOpen:false,
title:"JSON",
children:[
{
jsURL:"dataIntegration/json/simpleJSON.js",
description:"\n DataSources can bind directly to JSON data where records appear as an Array of\n JavaScript Objects with field values as properties. This approach of loading\n simple JSON data over HTTP can be used with PHP and other server technologies.\n ",
showSkinSwitcher:true,
tabs:[
{canEdit:"false", doEval:"false", title:"countries_small.js",
url:"dataIntegration/json/countries_small.js"}
],
id:"simpleJSON",
title:"Simple JSON"
},
{
jsURL:"dataIntegration/json/xpathBinding.js",
description:"\n DataSources can extract field values from complex JSON structures via XPath\n expressions. Note how the address fields, which are represented in the contacts\n data as a subobject, appear as columns in the grid.\n ",
showSkinSwitcher:true,
tabs:[
{canEdit:"false", doEval:"false", title:"contactsData.js",
url:"dataIntegration/json/contactsData.js"}
],
id:"jsonXPath",
title:"JSON XPath Binding"
},
{jsURL:"dataIntegration/json/yahooWebServices.js",
description:"\n Enter a search term in the Query input field to see images from Yahoo Image\n Search.
\n XPath binding allows declarative integration with web services. Note how the\n height and width for the thumbnail images have been declaratively extracted from\n the \"Thumbnail\" subobject.\n ", showSkinSwitcher:true,
id:"jsonYahooWebServices", title:"Yahoo! Web Services"},
{jsURL:"dataIntegration/json/yahooWebServices.js",
description:"\n Using the \"scriptInclude\" protocol, SmartClient applications can contact compatible\n JSON web services without the need for any intervening server.\n ", showSkinSwitcher:true,
title:"Cross-Site JSON"},
{
jsURL:"dataIntegration/json/serverValidationErrors/serverValidationErrors.js",
description:"\n Click \"Save\" to see validation errors derived from a JSON response.
\n \n Validation errors expressed in application-specific JSON formats can be \n communicated to the SmartClient system by implementing\n DataSource.transformResponse(). The resulting validation\n errors will be displayed and tracked by forms and editabled grids.\n ",
showSkinSwitcher:false,
tabs:[
{canEdit:"false", doEval:"false", title:"serverResponse.js",
url:"dataIntegration/json/serverValidationErrors/serverResponse.js"}
],
id:"jsonServerValidationErrors",
title:"Server Validation Errors"
}
]
}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png",
description:"\n The SmartClient Server framework is a collection of .jar files and optional servlets that works with\n any J2EE or J2SE container and is easily integrated into existing applications. Its major\n features include:
\n You can either use the SQL Wizard in Visual Builder to generate a DataSource descriptor\n (.ds.xml file) from an existing SQL table, or use the Admin Console to generate a SQL table\n from a DataSource descriptor you write. Either way, you get the immediate ability to perform\n all 4 basic SQL operations (select, insert, update, delete) from any of SmartClient's\n data-aware components.\n
\n The grid below is connected to a SQL DataSource and has settings enabled to allow this grid to\n perform all 4 operations. Type in the input boxes above each column to do query by example.\n Note that data paging is automatically enabled - just scroll to load data on demand. Click on\n a red X to delete a record. Click on a record to edit it and click \"Add New\" to add a new record.\n
\n It's easy to add business logic that takes place before and after SQL operations to enforce\n security or add additional data validation rules.\n
\n Even if your primary data storage approach is non-SQL or if you choose to use JPA or other ORM\n systems for most objects, the SQL connector is still valuable for initial prototypes and for\n lightweight storage when a full ORM approach would be overkill.\n ", tabs:[ {canEdit:"false", title:"worldDS", url:"grids/ds/worldSQLDS.ds.xml"} ], id:"sqlConnector", title:"Basic Connector" }, {icon:"[ISO_DOCS_SKIN]/images/iconexperience/funnel.png", ref:"filterBuilderBracket", requiresModules:"SCServer,serverCriteria", descriptionHeight:"150", description:"\n Use the FilterBuilder to construct queries of arbitrary complexity. The FilterBuilder,\n and the underlying AdvancedCriteria system, support building queries with subclauses\n nested to any depth. Add clauses to your query with the \"+\" icon; add nested subclauses \n with the \"+()\" button. Click \"Filter\" to see the result in the ListGrid.\n
\n Note that this example is backed by a \"sql\" dataSource; the SmartClient Server is \n automatically generating the SQL queries required to implement the filters that the \n FilterBuilder can assemble. This works adaptively and seamlessly with client-side \n Advanced Filtering: the generated SQL query will yield exactly the same resultset \n as the client-side filtering. This means SmartClient is able to switch to client-side\n filtering when its cache is full, giving a more responsive, more scalable application.\n ", title:"Server Advanced Filtering (SQL)"}, { icon:"[ISO_DOCS_SKIN]/images/silkicons/table_relationship.png", jsURL:"serverExamples/sql/largeValueMap/largeValueMap.js", requiresModules:"SCServer,customSQL", descriptionHeight:"180", description:"\n This example shows the simple use of custom SQL clauses to provide a DataSource that\n joins multiple tables while retaining SmartClient's automatic paging and filtering\n behavior. When trying this example, remember that this is automatic \n dataset-handling behavior that works without any coding, even though the data is being \n provided by a custom SQL query.
\n \n The list contains order items; each order item holds an itemID, which is being used\n to join to the supplyItem table and obtain the itemName. Note that you can filter on\n the itemName - either select a full item name or just enter a partial value in the \n combo box. Pagination is also active - try quickly dragging the scrollbar down, and\n you'll see SmartClient contacting the server for more records.\n ", tabs:[ {canEdit:"false", dataSource:"largeValueMap_orderItem", name:"orderItem"} ], id:"largeValueMapSQL", title:"Large Value Map (SQL)" }, { icon:"[ISO_DOCS_SKIN]/images/silkicons/user_orange.png", jsURL:"serverExamples/sql/userSpecificData/userSpecificData.js", requiresModules:"SCServer,customSQL", descriptionHeight:"200", description:"\n This example shows the use of some simple user-written server code in conjunction with\n SmartClient databound dragging features and the SmartClient SQL DataSource to implement\n a simple, but secure, shopping cart example.\n
\n Via DMI (Direct Method Invocation), the cartItem DataSource declares\n that all DataSource operations should go through a custom Java method\n CartDMI.enforceUserAccess() before proceeding to read or write\n the database. CartDMI.enforceUserAccess() adds the current sessionId to the\n DSRequest, so that the user can only read and write his own shopping cart.\n
\n Drag items from the left-hand grid to the right-hand grid. You can edit the quantity\n in the right-hand grid, and you can delete records. You can verify that the example\n is protecting each user's data from others by running the example in two different\n browsers (eg one Firefox and one IE) - this creates distinct sessions with separate\n carts.\n ", tabs:[ {canEdit:"false", dataSource:"cartItem", name:"cartItem"}, {canEdit:"false", title:"supplyItem", url:"supplyItem.ds.xml"}, {canEdit:"false", doEval:"false", title:"CartDMI.java", url:"serverExamples/sql/userSpecificData/CartDMI.java"} ], id:"userSpecificData", title:"User-Specific Data" }, { icon:"[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png", jsURL:"serverExamples/sql/dynamicReporting/dynamicReporting.js", requiresModules:"SCServer,customSQL", descriptionHeight:"210", description:"\n This example shows the use of custom SQL clauses to build a fairly complex query, including\n both standard and bespoke WHERE conditions and the use of aggregate functions and a \n GROUP BY. It is important to note that we can do this whilst still keeping the normal \n benefits of SmartClient DataSources, such as automatic dataset paging and arbitrary\n filtering and sorting. Also note that this example, though it makes heavy use of custom\n SQL clauses, doesn't make use of any database-specific syntax or functions, so it is \n portable across different database products.
\n \n The list contains a summary of orders in a given date range, summarized by item - each\n item appears just once in the list, alongside the total quantity of that item ordered \n in the given date range. Change the date range to be more restrictive (all the rows\n in the sample database have dates in February 2009) and click \"Filter\", and you will see\n the quantities change, and items disappear from the list. You can also use the \n filter editor at the top of the grid to arbitrarily filter the records, or click\n the column headings to sort.
\n \n Scroll the grid quickly to the bottom, and you will see a brief notification as \n SmartClient contacts the server - pagination is still working, despite the unusual\n and complex query.\n ",
tabs:[
{canEdit:"false", dataSource:"dynamicReporting_orderItem",
name:"orderItem"}
],
id:"dynamicReporting",
title:"Dynamic Reporting"
}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png",
description:"\n The SmartClient Server's built-in support for Hibernate\n ",
isOpen:false,
title:"Hibernate / Beans",
children:[
{icon:"[ISO_DOCS_SKIN]/images/iconexperience/coffeebean_view.png",
jsURL:"serverExamples/hibernate/vb_Hibernate.js", requiresModules:"SCServer",
description:"\n SmartClient's Visual Builder tool provides an extremely easy and completely codeless \n way to create DataSources for instantly connecting to existing Hibernate mapped \n entitites. Just click the \"New\" button, select \"Hibernate Bean\", and the Hibernate \n Browser will show your mapped entities, properties and even the data in the actual \n table to which the entity is mapped. Select an entity, and \n Visual Builder will create a fully-functioning DataSource that can perform\n all four CRUD operations via Hibernate on that entity, including - for systems with \n the Enterprise license - complex searches enabled by SmartClient's Advanced \n Criteria system.\n ", showSkinSwitcher:false,
showSource:false, id:"hibernateWizard", title:"Hibernate Wizard"},
{dataSource:"supplyItemHB",
icon:"[ISO_DOCS_SKIN]/images/iconexperience/coffeebean_delete.png", jsURL:"dataIntegration/java/hibernatePrototyping.js",
requiresModules:"SCServer", description:"\n SmartClient supports beanless integration with Hibernate for rapid prototyping.\n Simply declaring a DataSource with serverType:\"hibernate\" enables you\n to automatically generate tables, import sample data and perform all four\n DataSource operations, without writing any Java code or creating Hibernate mapping\n files. The DataSource is the only file you create.\n
\n As with all SmartClient DataSources, you can later add business logic that executes\n before or after SmartClient's default Hibernate behavior, or, you can switch this\n DataSource to use an actual Java bean, or switch to a completely different data\n provider (eg a WSDL web service). In all of these cases nothing in your UI needs\n to be updated.\n ", id:"hibernatePrototyping", title:"Hibernate (Beanless)"}, { icon:"[ISO_DOCS_SKIN]/images/iconexperience/funnel.png", jsURL:"serverExamples/hibernate/advancedFilter/advancedFilterHibernate.js", requiresModules:"SCServer,serverCriteria", descriptionHeight:"150", description:"\n Use the FilterBuilder to construct queries of arbitrary complexity. The FilterBuilder,\n and the underlying AdvancedCriteria system, support building queries with subclauses\n nested to any depth. Add clauses to your query with the \"+\" icon; add nested subclauses \n with the \"+()\" button. Click \"Filter\" to see the result in the ListGrid.\n
\n Note that this example is backed by a \"hibernate\" dataSource; the SmartClient Server is \n automatically generating the Hibernate Criteria Queries (including database-specific SQL\n where necessary) to implement the filters that the FilterBuilder \n can assemble. This works adaptively and seamlessly with client-side \n Advanced Filtering: the generated Criteria query will yield exactly the same resultset \n as the client-side filtering. This means SmartClient is able to switch to client-side\n filtering when its cache is full, giving a more responsive, more scalable application.\n ",
tabs:[
{canEdit:"false", dataSource:"supplyItemHB", name:"supplyItemHB"}
],
id:"advancedFilterHibernate",
title:"Server Advanced Filtering (Hibernate)"
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/table_multiple.png",
jsURL:"serverExamples/hibernate/masterDetail/masterDetail.js",
requiresModules:"SCServer",
descriptionHeight:"150",
description:"\n This example shows a simple way to implement an updatable parent-child relationship\n with SmartClient, the SmartClient Server and Hibernate. As you can see from from the \n various source tabs, Order and OrderItem are related via \n a unidirectional Set collection in Hibernate.\n The order dataSource also declares its items field as being\n of type masterDetail_orderItemHB, which tells SmartClient to use that \n dataSource as schema when processing the detail lines. With this configuration in\n place, creating a UI capable of updating across this parent-child association becomes\n extremely easy - only two lines of SmartClient code, beyond the creation and layout \n of the visual components themselves, is required.\n
\n Click a record in the top grid to see the order's details and the associated detail \n lines in the form and grid below.\n You can edit the order information using this screen (both header and detail - \n double-click the grid to edit the details); when you click Save, SmartClient will \n submit the master and detail information together, and Hibernate will save all \n changes as a single operation.\n ", tabs:[ {canEdit:"false", dataSource:"masterDetail_orderHB", name:"masterDetail_order"}, {canEdit:"false", dataSource:"masterDetail_orderItemHB", name:"masterDetail_orderItem"}, {canEdit:"false", doEval:"false", title:"Order.java", url:"serverExamples/hibernate/masterDetail/Order.java"}, {canEdit:"false", doEval:"false", title:"Order.hbm.xml", url:"serverExamples/hibernate/masterDetail/Order.hbm.xml"}, {canEdit:"false", doEval:"false", title:"OrderItem.java", url:"serverExamples/hibernate/masterDetail/OrderItem.java"}, {canEdit:"false", doEval:"false", title:"OrderItem.hbm.xml", url:"serverExamples/hibernate/masterDetail/OrderItem.hbm.xml"} ], id:"masterDetail", title:"Master-Detail (Batch Load and Save)" }, { dataSource:"flattenedBeans_flatUserHB", icon:"[ISO_DOCS_SKIN]/images/iconexperience/branch.png", jsURL:"serverExamples/hibernate/flattenedBeans/flattenedBeans.js", requiresModules:"SCServer", descriptionHeight:"150", description:"\n This example shows the SmartClient Server's support for flattening and reconstructing\n hierarchical data, by use of XPaths. The ListGrid below shows each user's address,\n city and state as if those fields were part of the user's data. In fact, this address\n information is held in a separate Address bean; this information is extracted from \n the separate bean at fetch time by the SmartClient Server, based purely on the XPath\n declarations of those fields in the dataSource.\n
\n More interestingly, the SmartClient Server is also able to reconstruct the hierarchical\n data from the flattened version, again transparently by use of the XPath. This means\n that you can update the flattened fields in this example - for example, changing a\n user's city - and your changes will be correctly persisted.\n
\n Click a record in the grid to see the order's details in the form. Edit the user\n details and click \"Save Changes\". Using the declared XPaths, the SmartClient Server \n will populate any changed flattened field back into its correct place in the hierarchy,\n allowing the data provider (Hibernate, in this case) to persist the change.\n ",
tabs:[
{canEdit:"false", doEval:"false", title:"FlatUser.java",
url:"serverExamples/hibernate/flattenedBeans/FlatUser.java"},
{canEdit:"false", doEval:"false", title:"FlatUser.hbm.xml",
url:"serverExamples/hibernate/flattenedBeans/FlatUser.hbm.xml"},
{canEdit:"false", doEval:"false", title:"Address.java",
url:"serverExamples/hibernate/flattenedBeans/Address.java"},
{canEdit:"false", doEval:"false", title:"Address.hbm.xml",
url:"serverExamples/hibernate/flattenedBeans/Address.hbm.xml"}
],
id:"flattenedBeans",
title:"Flattened Data Model"
},
{
dataSource:"supplyItemSpringDMI",
jsURL:"dataIntegration/java/hibernateProduction.js",
requiresModules:"SCServer",
description:"\n Hibernate's Criteria object can be created from SmartClient's \n DSRequest in order to fulfill the \"fetch\" operation, with data paging \n enabled. Hibernate-managed beans can be populated with inbound, validated data\n with a single method call.\n ",
tabs:[
{canEdit:"false", doEval:"false",
title:"Spring applicationContext.xml", url:"dataIntegration/java/applicationContext.xml"},
{canEdit:"false", doEval:"false", title:"SupplyItemDao.java",
url:"dataIntegration/java/SupplyItemDao.java"},
{canEdit:"false", doEval:"false", title:"SupplyItem.hbml.xml",
url:"dataIntegration/java/SupplyItem.hbm.xml"},
{canEdit:"false", doEval:"false", title:"SupplyItem.java",
url:"dataIntegration/java/SupplyItem.java"}
],
id:"hibernateProduction",
title:"Hibernate and Spring"
},
{
dataSource:"supplyItemDMI",
icon:"[ISO_DOCS_SKIN]/images/iconexperience/coffeebean.png",
jsURL:"dataIntegration/java/javaBeans.js",
requiresModules:"SCServer",
showDataSource:"false",
description:"\n SmartClient DataSource operations can be fulfilled by returning Java Beans (aka EJBs \n or POJOs) from your existing business logic. When you call SmartClient's \n DSResponse.setData() API, your Java objects are automatically translated \n to JavaScript, transmitted to the browser, and provided to the requesting component.\n See the sample implementation of the \"fetch\" operation in SupplyItemFetch.java\n ",
tabs:[
{canEdit:"false", doEval:"false", title:"SupplyItemFetch.java",
url:"dataIntegration/java/SupplyItemFetch.java"},
{canEdit:"false", doEval:"false", title:"SupplyItem.java",
url:"dataIntegration/java/SupplyItem.java"}
],
id:"javaBeans",
title:"Java Beans"
},
{
dataSource:"supplyItemDMI",
icon:"[ISO_DOCS_SKIN]/images/iconexperience/code_java.png",
jsURL:"dataIntegration/java/dmi.js",
requiresModules:"SCServer",
description:"\n Direct Method Invocation (DMI) allows you to map DataSource operations directly \n to Java methods via XML configuration in a DataSource descriptor (.ds.xml file).\n The arguments of your Java methods are automatically populated from the inbound \n request. See the sample implementation in SupplyItemDMI.java\n ",
tabs:[
{canEdit:"false", doEval:"false", title:"SupplyItemDMI.java",
url:"dataIntegration/java/SupplyItemDMI.java"},
{canEdit:"false", doEval:"false", title:"SupplyItem.java",
url:"dataIntegration/java/SupplyItem.java"}
],
id:"DMI",
title:"DMI"
}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png",
description:"\n SmartClient provides robust support for transactional applications.\n
\n Queuing allows you to easily combine operations together into a single\n transaction, for more efficient data loading and transactional saves.\n
\n Transaction Chaining allows you to declaratively handle data dependencies\n between operations submitted together in a queue.\n ", isOpen:false, id:"transactionsFolder", title:"Transactions", children:[ { jsURL:"serverExamples/hibernate/queuing/queuing.js", requiresModules:"SCServer", descriptionHeight:"150", description:"\n Queuing allows any set of DataSource operations to be combined into a single HTTP\n request, without requiring any special code to be written to transport the combined\n inputs and outputs.\n
\n Click the \"Find Orders\" button and the example will load both the selected user's\n details and all the orders associated with that user, as a single request.\n Queuing works transparently to the components involved, so for example, scrolling down\n in the orders grid causes data paging to be activated, exactly as though the grid had\n done a fetch that was not combined into a queue. \n
\n Since queuing is transparent to components, a screen full of various components\n which need to load data from different sources can participate in a queue without\n any special component-specific code, and with no need to rework how data is\n transferred if new components are added - each component can be treated as though\n it were standalone.\n
\n Server-side, queuing allows you to focus on simple, secure, reusable data\n operations and other services, which can then be accessed in arbitrary combinations\n according to the data loading and saving requirements of particular screens, with\n no need to write brittle, screen-specific server code.\n
\n Queuing works even when the operations are on different data providers (as in this \n case, where the user details are coming from Hibernate and the order details are coming\n from the SmartClient Server SQL provider).\n ", tabs:[ {canEdit:"false", dataSource:"queuing_userHB", name:"queuing_user"}, {canEdit:"false", dataSource:"queuing_order", name:"queuing_order"}, {canEdit:"false", doEval:"false", title:"User.java", url:"serverExamples/hibernate/queuing/User.java"}, {canEdit:"false", doEval:"false", title:"User.hbm.xml", url:"serverExamples/hibernate/queuing/User.hbm.xml"} ], id:"queuing", title:"Simple Queuing" }, { icon:"[ISO_DOCS_SKIN]/images/silkicons/table_row_insert.png", jsURL:"serverExamples/sql/queuedAdd/queuedMasterDetailAdd.js", requiresModules:"SCServer, chaining", descriptionHeight:"150", description:"\n This example makes use of the SmartClient server's support for setting DSRequest \n properties dynamically at runtime, based on responses to requests earlier in the \n same queue.
\n Edit the order header details, then add one or more lines. When you click \"Save \n Order\", SmartClient will send multiple DataSource requests to the server - one to\n save the order header, and one each for however many lines you enter - but it will combine\n them into a single HTTP request, so that a transactional commit is possible.
\n New orders are given an automatically generated sequence value as a primary\n key, and the orderItems need this value in order to establish a relationship with\n their order.
\n As a result of the <values> tag in the queuedAdd_orderItem\n DataSource definition, the server will set the \"orderID\" property on each order\n item to the unique sequence value assigned to the order header when it was\n saved.
\n This entire interaction is accomplished by simply re-using the capability of the\n DataSource to add new records, without the need to write any server-side\n code. SQL DataSources are shown, but this interaction works with any DataSource\n that can support CRUD operations, include custom DataSources and even a mix of\n DataSources that use different storage systems.
\n The <values> tag (and the similar \n property <criteria> tag) are specified using the Velocity\n Template Language, so the support is very flexible.
\n ", tabs:[ {canEdit:"false", dataSource:"queuedAdd_order", name:"order"}, {canEdit:"false", dataSource:"queuedAdd_orderItem", name:"orderItem"}, {canEdit:"false", dataSource:"supplyItem", name:"supplyItem"}, {canEdit:"false", dataSource:"supplyCategory", name:"supplyCategory"} ], id:"queuedAdd", title:"Master/Detail Add" }, {icon:"[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png", ref:"massUpdate", descriptionHeight:"120", description:"\n Click on any cell to start editing, then Tab or Down Arrow past the\n last row in the grid to create a new row. Alternatively, click the Edit New button\n to create a new data-entry row at the end of the grid. When you click the \"Save\" button\n all your changes - changed rows and new ones - are sent to the server in a queue, as a \n single HTTP request.
\n Because all your changes arrive on the server at once, committing \n them as a single transaction becomes possible. And because SmartClient's queuing support\n is completely inobtrusive and requires no extra code on either client or server, as soon\n as you have an operation that can update a single record, you automatically have an \n operation that can participate in SmartClient queued updates and potentially transactional\n commits.\n ", title:"Mass Update"}, {icon:"[ISO_DOCS_SKIN]/images/silkicons/database_link.png", ref:"databoundDragCopy", descriptionHeight:"160", description:"\n Drag employee records into the Project Team Members list. SmartClient recognizes that the \n two dataSources are linked by a foreign key relationship, and automatically uses that \n relationship to populate values in the records that are added when you drop. SmartClient \n also populates fields based on current criteria and maps explicit titleFields as necessary.
\n Multi-row selection is enabled on the Employees grid, so you can select multiple employees \n and drag them to the Teams grid in one go. Because the grids are databound, this drag and \n drop action will send data operations to the server automatically, using SmartClient \n queuing to ensure all the updates arrive on the server together.
\n All of this just works, there is no coding needed to enable it.\n ", title:"Multi-Row Drag & Save"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/server_lightning.png",
description:"\n Examples showing how to leverage the SmartClient Server to create partially or completely\n customized DataSource implementations.\n ",
isOpen:false,
title:"Custom DataSources",
children:[
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/table_row_insert.png",
jsURL:"serverExamples/other/customDataSource/customDataSource.js",
requiresModules:"SCServer",
descriptionHeight:"150",
description:"\n This example shows an entirely custom DataSource. It is created by extending \n BasicDataSource and implementing the four core CRUD methods. In this \n case, we maintain a static List of Maps that is initialized with hard-coded data\n every time the server starts; but of course, this code could do anything. This \n approach allows completely custom data operations to be simply plugged in to the\n SmartClient Server framework.
\n Note also that this code deals directly with Java Maps and \n Lists, without worrying about format conversions - even custom code \n leverages the SmartClient Server's automatic and transparent translation of request\n data, from JSON to Java and back to JSON.\n ",
tabs:[
{canEdit:"false", dataSource:"customDataSource_user", name:"user"},
{canEdit:"false", doEval:"false", title:"UserDataSource.java",
url:"serverExamples/other/customDataSource/UserDataSource.java"}
],
id:"customDataSource",
title:"Simple (Hardcoded)"
},
{
icon:"[ISO_DOCS_SKIN]/images/iconexperience/objects_exchange.png",
jsURL:"serverExamples/other/ormDataSource/ormDataSource.js",
requiresModules:"SCServer",
descriptionHeight:"200",
description:"\n This example shows an entirely custom DataSource that connects SmartClient Server to\n Hibernate (note that this is just an example of the principles involved - SmartClient \n Server's built-in Hibernate support is considerably more sophisticated than the \n simple adapter shown here). It is created by extending BasicDataSource\n and implementing the four core CRUD methods. In this case, we connect DataSource\n requests to Hibernate Criteria queries and the saveOrUpdate \n method.
\n This implementation, though simple, is fully functional and could be used unchanged\n in a real application. It supports all four CRUD operations, plus data pagination,\n server-side sorting and filtering, client cache synchronization, and of course it \n is actually persisting the data to a real database. Creating an equivalent adapter \n for Toplink or Ibatis or some other ORM solution would be a fairly simple matter of \n replacing the Hibernate-specific code in this example with the equivalent specifics \n from the other ORM system.\n
\n As with the other custom DataSource examples, note how the ORMDataSource.java \n code deals entirely in native Java objects - even entirely custom DataSources benefit\n from SmartClient Server's robust and comprehensive Javascript<->Java translation.\n ",
tabs:[
{canEdit:"false", dataSource:"ormDataSource_country",
name:"country"},
{canEdit:"false", doEval:"false", title:"ORMDataSource.java",
url:"serverExamples/other/ormDataSource/ORMDataSource.java"},
{canEdit:"false", doEval:"false", title:"Country.java",
url:"serverExamples/other/ormDataSource/Country.java"},
{canEdit:"false", doEval:"false", title:"Country.hbm.xml",
url:"serverExamples/other/ormDataSource/Country.hbm.xml"}
],
id:"ormDataSource",
title:"ORM DataSource"
}
]
},
{icon:"[ISO_DOCS_SKIN]/images/silkicons/arrow_out.png", ref:"export",
title:"Excel Export"},
{ref:"rssFeed", descriptionHeight:"150",
description:"\n The SmartClient Server includes an HTTP Proxy servlet which allows you to contact REST and\n WSDL web services as though they were hosted by your web server, avoiding the \"same origin\n policy\" restriction which normally prevents web applications from accessing remote\n services.\n
\n The proxy is used automatically whenever you attempt to contact a URL on another host - no\n special code is needed. In this example, a DataSource is configured to download the\n Slashdot RSS feed, with no server-side code or proxy configuration required.\n
\n Configuration files allow you to restrict proxying to specific\n services you wish to allow users to contact through your application.\n ", title:"HTTP Proxy"}
]
},
{ref:"dragDropExamples", isOpen:false, title:"Drag & Drop"},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/overlays.png",
description:"\n Basic capabilities shared by all SmartClient visual components.\n",
isOpen:false,
title:"Basics",
children:[
{
description:"\n Basic capabilities shared by all SmartClient visual components.\n",
isOpen:false,
title:"Components",
children:[
{jsURL:"basics/create.js",
description:"\n Click the button to create new cube objects.\n ", id:"create",
title:"Create"},
{jsURL:"basics/draw.js",
description:"\n Click the button to draw another Label component. The first Label is configured\n to draw automatically.\n ", id:"autodraw",
title:"Draw"},
{jsURL:"basics/show.js",
description:"\n Click the buttons to show or hide the message.\n ", id:"showAndHide",
title:"Show & Hide"},
{jsURL:"basics/move.js",
description:"\n Click and hold the arrow to move the van. Click on the solid circle to return to\n the starting position.\n ", id:"move",
title:"Move"},
{jsURL:"basics/resize.js",
description:"\n Click the buttons to expand or collapse the text box.\n ", id:"resize",
title:"Resize"},
{jsURL:"basics/layer.js",
description:"\n Click the buttons to move the draggable box above or below the other boxes.\n ", id:"layer",
title:"Layer"},
{jsURL:"basics/stack.js",
description:"\n HStack and VStack containers manage the stacked positions\n of multiple member components.\n ", title:"Stack"},
{jsURL:"basics/layout.js",
description:"\n HLayout and VLayout containers manage the stacked positions and\n sizes of multiple member components. Resize the browser window to reflow these layouts.\n ", title:"Layout"},
{
doEval:"false",
iframe:"true",
url:"inlineComponents/inlineComponents.html",
description:"\n SmartClient GUI components are assembled from the same standard HTML and CSS as\n plain old web pages. So you can add SmartClient controls above, below, inline,\n and inside your existing web page elements.\n ",
tabs:[
{title:"cssLayout.css", url:"inlineComponents/cssLayout.css"}
],
id:"inlineComponents",
title:"Inline components"
}
]
},
{
description:"\n Mixing SmartClient components with HTML pages, chunks, and elements.\n",
isOpen:false,
title:"HTML",
children:[
{ref:"inlineComponents", title:"Inline Components"},
{description:"\n SmartClient supports browser history management. Click your browser's Back button to go\n to a previous example, and click forward to return to this example. You can even\n navigate off the SmartClient site and navigate back. SmartClient's History module\n allows you to pick which application events create history entries.\n ",
title:"Back Button"},
{jsURL:"html/htmlFlow.js", xmlURL:"html/htmlFlow.xml",
description:"\n The HTMLFlow component displays a chunk of standard HTML in a free-form,\n flowable region.\n ", id:"htmlFlow",
title:"HTMLFlow"},
{jsURL:"html/htmlPane.js", xmlURL:"html/htmlPane.xml",
description:"\n The HTMLPane component displays a chunk or page of standard HTML in a\n sizeable, scrollable pane.\n ", id:"htmlPane",
title:"HTMLPane"},
{jsURL:"html/htmlLabel.js", xmlURL:"html/htmlLabel.xml",
description:"\n The Label component adds alignment, text wrapping, and icon support for\n small chunks of standard HTML.\n ", id:"label",
title:"Label"},
{jsURL:"html/richTextEditor.js", requiresModules:"RichTextEditor",
xmlURL:"html/richTextEditor.xml", description:"RichTextEditor supports editing of HTML with a configurable set of\n styling controls",
id:"RichTextEditor", title:"Editing HTML"},
{jsURL:"html/htmlImg.js",
description:"\n The Img component displays images in the standard web formats\n (png, gif, jpg) and other image formats supported by the web browser.\n ", id:"img",
title:"Img"},
{jsURL:"html/htmlDynamic1.js",
description:"\n Embed JavaScript expressions inside chunks of HTML to create simple dynamic elements.\n ", id:"dynamicContents",
title:"Dynamic HTML (inline)"},
{jsURL:"html/htmlDynamic2.js",
description:"\n Click the buttons to display different chunks of HTML.\n ", id:"setContents",
title:"Dynamic HTML (set)"},
{jsURL:"html/htmlLoadImg.js",
description:"\n Click the buttons to load different images.\n ", id:"loadImages",
title:"Load images"},
{jsURL:"html/htmlLoadChunks.js",
description:"\n Click the buttons to load different chunks of HTML.\n ", title:"Load HTML chunks"},
{jsURL:"html/htmlLoadPages.js",
description:"\n Click the buttons to display different websites.\n ", id:"loadHtmlPages",
title:"Load HTML pages"}
]
},
{
description:"\n Basic interactive component capabilities.\n
\n
\n SmartClient components provide hundreds of hooks for event handlers, including\n all the standard mouse, keyboard, and communication events.\n",
isOpen:false,
title:"Interaction",
children:[
{jsURL:"interact/mouseEvents.js",
description:"\n Mouse over the blue square to see the color respond to your position. Click and hold\n to see a fade. If you have a mousewheel, roll up and down to change size.\n SmartClient components support the standard mouse events in addition to custom events\n like \"mouseStillDown\".\n ", id:"customMouseEvents",
title:"Mouse events"},
{jsURL:"interact/dragEvents.js",
description:"\n Click and drag the pawn over \"Show Drop Reticle\" to see a simple custom drag and drop\n interaction.\n ", id:"customDrag",
title:"Drag events"},
{css:"interact/hover.css", jsURL:"interact/hover.js",
description:"\n Hover over the button, the image, the \"Interesting Facts\" field of the grid, and the\n \"Severity\" form label to see various hovers.\n ", showSkinSwitcher:true,
id:"customHovers", title:"Hovers / Tooltips"},
{jsURL:"interact/contextmenu.js",
description:"\n Right click (or option-click on Macs) on the Yin Yang image to access a context menu.\n You can also click on the \"Widget\" button to access the identical menu.\n ", showSkinSwitcher:true,
id:"contextMenus", title:"Context menus"},
{ref:"fieldEnableDisable", title:"Enable / Disable"},
{jsURL:"interact/focus.js",
description:"\n Press the Tab key to cycle through through the tab order starting from the blue\n piece. Then drag reorder either piece, click on the leftmost piece and use Tab to\n cycle through again. Tab order is automatically updated to reflect the visual order.\n ", id:"focus",
title:"Focus & Tabbing"},
{jsURL:"interact/cursor.js",
description:"\n Mouse over the draggable labels for a 4-way move cursor. Move over drag resizeable\n edges to see resize cursors. Mouse over the \"Save\" button to see the hand cursor,\n which is not shown if the \"Save\" button is disabled.\n ", id:"cursors",
title:"Cursors"},
{jsURL:"interact/keyboard.js",
description:"\n Click the \"Move Me\" label, then use the arrow keys to move it around. Hold down keys to see the\n component respond to key repetition. SmartClient unifies keyboard event handling across browsers.\n ", id:"keyboardEvents",
title:"Keyboard events"},
{jsURL:"interact/modality.js",
description:"\n Click on \"Show Window\" to show a modal window. Note that the \"Touch This\" button no\n longer shows rollovers or an interactive cursor, nothing outside the window can be\n clicked, clicks outside the window cause the window to flash, and tabbing remains in a\n closed loop cycling through only the contents of the window.\n ", showSkinSwitcher:true,
id:"modality", title:"Modality"}
]
},
{
jsURL:"basics/printing.js",
description:"\n SmartClient provides comprehensive support for rendering your UI in a print-friendly\n fashion. Click the \"Print Preview\" button and note the following things:\n
\n In this example, note that SmartClient is automatically populating all three\n of the fields in the teamMembers dataSource, even though none of those fields is present \n in the employees dataSource we are dragging from. Change the \"Team for Project\" select \n box, then try dragging employees across; note that the Project Code column is being \n correctly populated for the dropped records.\n ", showSkinSwitcher:true, tabs:[ {title:"teamMembers", url:"teamMembers.ds.xml"} ], id:"databoundDragCopy", title:"Copy" } ] }, { jsURL:"dragdrop/dragFromMenu.js", description:"\n Open the parts menu and drag parts from the menu onto the grid.\n Menus support all the drag and drop behaviors supported by grids.\n ", showSkinSwitcher:true, tabs:[ {title:"exampleData", url:"dragdrop/dragList_data.js"} ], id:"dragMenu", title:"Drag from Menu" }, {jsURL:"dragdrop/dragMove.js", description:"\n Drag and drop to move pieces between the boxes. The green box sets a thicker green\n \"drop line\" indicator to match its border. The blue box shows a \"drag placeholder\"\n outline at the original location of the dragged object while dragging.\n ", id:"dragMove", title:"Drag move"}, {jsURL:"dragdrop/dragReorder.js", description:"\n Drag and drop to rearrange the order of the pieces.\n ", title:"Drag reorder"}, {jsURL:"dragdrop/dragTypes.js", description:"\n Drag and drop to move pieces between the three boxes.\n The gray box accepts any piece.\n The blue and green boxes accept pieces of the same color only.\n ", title:"Drag types"}, {jsURL:"dragdrop/dragCreate.js", description:"\n Drag the large cubes into the boxes to create new small cubes.\n The blue, yellow, and green boxes accept cubes with the same color only.\n The gray box accepts any color.\n Right-click on the small cubes to remove them from the boxes.\n ", id:"dragCreate", title:"Drag create"}, {jsURL:"dragdrop/dragEffects.js", description:"\n Click and drag to move the labels.\n ", id:"dragEffects", title:"Drag effects"}, {jsURL:"dragdrop/dragReposition.js", visibility:"sdk", description:"\n Click and drag to move the piece.\n ", title:"Drag reposition"}, {jsURL:"dragdrop/dragResize.js", description:"\n Click and drag on the edges of the labels to resize.\n ", id:"dragResize", title:"Drag resize"}, {jsURL:"dragdrop/dragTracker.js", description:"\n Drag and drop the pieces onto the box.\n ", id:"dragTracker", title:"Drag tracker"}, {jsURL:"dragdrop/dragPan.js", description:"\n Click and drag to pan the image inside its frame.\n ", id:"dragPan", title:"Drag pan"}, {jsURL:"dragdrop/dragSnapTo.js", description:"\n Drag the box around the grid. It will snap into alignment according to the values you \n set in the radio buttons below. Snap-to-grid dragging can be enabled separately for \n moving and resizing; toggle the checkboxes to see this working.\n ", showSkinSwitcher:true, id:"dragSnapTo", title:"Snap-to-grid Dragging"} ] }, { description:"\n Animation services and built-in animation effects.\n", isOpen:false, title:"Animation", children:[ { jsURL:"animate/animateTree.js", description:"\n Click the open/close icon for any folder.\n ", showSkinSwitcher:true, tabs:[ {title:"exampleData", url:"animate/animateTreeData.js"} ], id:"animateTree", title:"Tree Folders" }, {jsURL:"animate/animateMinimize.js", description:"\n Click on the minimize button (round button in header with flat line).\n ", showSkinSwitcher:true, id:"windowMinimize", title:"Window Minimize"}, {jsURL:"animate/animateSections.xml", description:"\n Click on any section header to expand/collapse sections.\n ", showSkinSwitcher:true, id:"animateSections", title:"Section Reveal"}, {jsURL:"animate/animateLayout.js", description:"\n Click on the buttons to hide and show the green star.\n ", id:"animateLayout", title:"Layout Add & Remove"}, {jsURL:"animate/animateMove.js", description:"\n Click the buttons to move the Label into view or out of view.\n ", id:"animateMove", title:"Fly Onscreen"}, {jsURL:"animate/animateResize.js", description:"\n Click the buttons to expand or collapse the text box.\n ", id:"animateResize", title:"Resize"}, {jsURL:"animate/animateWipe.js", description:"\n Click the buttons to show or hide the Label with a \"wipe\" effect.\n ", id:"animateWipe", title:"Wipe Show & Hide"}, {jsURL:"animate/animateSlide.js", description:"\n Click the buttons to show or hide the Label with a \"slide\" effect.\n ", title:"Slide Show & Hide"}, {jsURL:"animate/animateFade.js", description:"\n Click the buttons to fade the image.\n ", id:"animateFade", title:"Fade Show & Hide"}, {jsURL:"animate/animateZoom.js", description:"\n Click the buttons to zoom or shrink the image.\n ", id:"animateZoom", title:"Zoom & Shrink"}, {jsURL:"animate/animateSeqSimple.js", description:"\n Click the buttons for a 2-stage expand or collapse effect.\n ", title:"Sequence (simple)"}, {jsURL:"animate/animateSeqComplex.js", description:"\n Click to select and zoom each piece.\n ", title:"Sequence (complex)"}, {jsURL:"animate/animateCustom.js", description:"\n Click on the globe for a custom \"orbit\" animation.\n ", id:"customAnimation", title:"Custom Animation"}, {ref:"tilingFilter", title:"Tile Filter & Sort"}, {fullScreen:"true", jsURL:"animate/portal.js", needServer:"true", screenshot:"animate/portal.png", screenshotHeight:"337", screenshotWidth:"480", description:"Animations built into SmartClient layouts can be used to create a drag and drop portal\n experience. Click on the portlet list to the left to create portlets and see them\n animate into place. Drag portlets around to new locations and they animate into place.\n ", showSkinSwitcher:true, id:"portalAnimation", title:"Simple Portal"} ] }, { description:"\n Apply rich visual styles to SmartClient components.\n", isOpen:false, title:"Look & Feel", children:[ {jsURL:"lookfeel/edges.js", description:"\n Drag the text boxes. These boxes show customized frame and glow effects\n using edge images.\n ", id:"edges", title:"Edges"}, {jsURL:"lookfeel/corners.js", description:"\n Drag the text boxes. These boxes show customized rounded-corner effects\n using edge images. \n ", id:"corners", title:"Corners"}, {jsURL:"lookfeel/shadows.js", description:"\n Drag the slider to change the shadow depth for the text box.\n ", badSkins:"BlackOps", bestSkin:"TreeFrog", id:"shadows", title:"Shadows"}, {jsURL:"lookfeel/bgColor.js", visibility:"sdk", description:"\n Click on the color picker to select a background color for the box.\n ", title:"Background color"}, {jsURL:"lookfeel/bgImage.js", visibility:"sdk", description:"\n Click any button to change the background texture for the box.\n ", title:"Background texture"}, {jsURL:"lookfeel/opacity.js", description:"\n Drag the slider to change opacity.\n ", id:"translucency", title:"Translucency"}, {jsURL:"lookfeel/boxAttrs.js", visibility:"sdk", description:"\n Drag the sliders to change the CSS box attributes.\n
\n Containers in SmartClient automatically react to changes in CSS styling on contained elements\n \n ", title:"Box attributes"},
{
jsURL:"lookfeel/styles.js",
description:"\n Click the radio buttons to apply different CSS styles to the text. Click the CSS tab for\n CSS class definitions.
\n This container auto-sizes to the styled text.\n ",
badSkins:"BlackOps",
bestSkin:"TreeFrog",
tabs:[
{title:"CSS", url:"lookfeel/styles.css"}
],
id:"styles",
title:"CSS styles"
},
{css:"lookfeel/consistentSizing.css",
jsURL:"lookfeel/consistentSizing.js", description:"\n Drag the slider to resize all three text boxes. The box sizes match despite different\n edge styling specified in CSS, enabling CSS-based skinning without affecting\n application layout.\n ",
id:"consistentSizing", title:"Consistent sizing"},
{
jsURL:"grids/formatting/cellStyles.js",
description:"\n Mouse over the rows and click-drag to select rows, to see the effects of different\n base styles on these two grids.\n ",
showSkinSwitcher:true,
tabs:[
{title:"CSS", url:"grids/formatting/cellStyles.css"},
{title:"countryData", url:"grids/data/countryData.js"}
],
id:"gridCells",
title:"Grid cells"
}
]
}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/chart_bar.png",
requiresModules:"PluginBridges,Analytics",
description:"\n SmartClient supports a pluggable Charting API that can be easily connected to multiple\n charting systems, with out of the box integration with the FusionCharts package (sold\n separately by Infosoft Global).\n",
isOpen:false,
title:"Charting",
children:[
{jsURL:"charts/gridChart.js", requiresModules:"PluginBridges,Analytics",
description:"\n Data loaded into a ListGrid can be charted with a single API call.\n
\n Use the \"Chart Type\" selector below to see same data rendered by multiple different\n chart types. Edit the data in the grid to have the chart regenerated automatically.\n ", id:"gridCharting",
title:"Grid Charting"},
{ref:"analytics", requiresModules:"PluginBridges,Analytics",
description:"\n This example shows binding to a multi-dimensional dataset, where each cell value has a\n series of attributes, called \"facets\", that appear as headers labelling the cell value.\n Drag facets onto the grid to expand the cube model.
\n Right click on any cell and pick \"Chart\" to chart values by any two facets.\n ", title:"CubeGrid Charting"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/cube_blue.png",
requiresModules:"Drawing",
description:"\n SmartClient leverages the native browser drawing capabilities to provide a consistent cross\n browser drawing interface via the optional Drawing module.\n
\n This is a preview of unreleased SmartClient functionality. \n Contact\n Isomorphic to get\n early access to this technology.\n", isOpen:false, title:"Drawing", children:[ {externalWindowConfig:"height=675,width=740,toolbar=no,resizable=no", requiresModules:"Drawing", screenshot:"drawing/drawing_screenshot.png", screenshotHeight:"336", screenshotWidth:"386", url:"drawing/Drawing.html", description:"Click on the buttons at the top to create (or erase) shapes using\n the SmartClient drawing module. Drawn objects may be manipulated at runtime - drag the\n control points, or change the control form values to update them.\n
\n This is a preview of unreleased SmartClient functionality. \n Contact\n Isomorphic to get\n early access to this technology.\n ", external:true, id:"Drawing", title:"Shape Playground"} ] }, { icon:"[ISO_DOCS_SKIN]/images/silkicons/application_osx.png", description:"\n Demos of complete applications based on SmartClient.\n", isOpen:false, title:"Applications", children:[ {ref:"showcaseApp", title:"Office Supply Catalog"}, { dataSource:"productRevenue", fullScreen:"true", jsURL:"advanced/cubegrid/databound_cubegrid.js", requiresModules:"PluginBridges,Analytics", screenshot:"advanced/cubegrid/databound_cubegrid.png", screenshotHeight:"327", screenshotWidth:"468", description:"\n This example shows binding to a multi-dimensional dataset, where each\n cell value has a series of attributes, called \"facets\", that appear as headers\n labelling the cell value. Facets can be added to the view, exposing more detail, by\n dragging the menu buttons onto the grid, or into the \"Row Facets\" and \"Column Facets\"\n listings. \n Click grid turndown controls to expand tree facets. Note that data loads as it is\n revealed.\n ", showSkinSwitcher:true, tabs:[ {loadAtEnd:"true", title:"facet controls", url:"advanced/cubegrid/facet_controls.js"} ], id:"analytics", title:"Interactive Analytics" }, {fullScreen:"true", jsURL:"portal/smartclientPortal.js", requiresModules:"PluginBridges,Analytics", screenshot:"portal/salesPortal.png", screenshotHeight:"327", screenshotWidth:"468", description:"\n Going beyond basic portal layout, SmartClient's portalling framework allows users to\n build a customized layout from a palette of available components, and automatically\n persist both the layout and customizations made to components.\n
\n This is a preview of unreleased SmartClient functionality. \n Contact\n Isomorphic to get\n early access to this technology.\n ", showSkinSwitcher:true,
id:"portal", title:"Portal (Preview)"}
]
},
{
icon:"[ISO_DOCS_SKIN]/images/silkicons/arrow_branch.png",
description:"\n Examples of extending SmartClient functionality\n",
isOpen:false,
title:"Extending",
children:[
{css:"extending/portlet.css", jsURL:"extending/componentReuse.js",
description:"\n The portlets below are a custom component created with less than one page of code\n (see the \"JS\" tab). The portlets support drag repositioning, drag resizing, a close\n button, can contain any HTML content, and are skinnable.\n ", title:"Component Reuse"},
{
dataSource:"supplyItem",
jsURL:"extending/patternReuse.js",
description:"\n Click to select a DataSource, click on records to edit them in the adjacent form, then\n click the \"Save\" button to save changes.
\n This custom component combines a databound form and grid into a reusable application\n pattern of side-by-side editing, that can be used with any DataSource.\n ",
tabs:[
{canEdit:"false", title:"countryDS", url:"grids/ds/countrySQLDS.ds.xml"}
],
id:"patternReuse",
title:"Pattern Reuse"
},
{ref:"schemaChaining", title:"Schema Reuse"},
{ref:"customSimpleType", title:"Type Reuse"},
{
jsURL:"extending/dateFormat_local.js",
description:"\n Dates displayed in the \"Hire Date\" field in this example are formatted using the\n standard \"toJapanShortDate\" formatter. Click on a record to edit it in the\n Form, or double click to edit inline in the ListGrid.\n ",
showSource:false,
tabs:[
{doEval:"false", title:"JS", url:"extending/dateFormat.js"},
{title:"employees", url:"extending/employees.js"}
],
id:"dateFormat",
title:"Standard Date Format"
},
{
jsURL:"extending/customDateFormat_local.js",
description:"\n Dates displayed in the \"Hire Date\" field in this example are formatted\n using a custom formatting function. Click on a record to edit it in the\n Form, or double click to edit inline in the ListGrid.\n ",
showSource:false,
tabs:[
{doEval:"false", title:"JS", url:"extending/customDateFormat.js"},
{title:"employees", url:"extending/employees.js"}
],
id:"customDateFormat",
title:"Custom Date Format"
},
{dataSource:"supplyItem", jsURL:"extending/customizeFields.js",
description:"\n Edit field definitions in the grid below to override how this form binds to the \n supplyItem DataSource. This is a simplified example of how\n you can deliver an application that can be customized with organization-specific fields\n and rules. Dynamic schema binding makes building WYSIWYG editing interfaces very\n simple. \n ", title:"Customize Fields"},
{ref:"customDrag", title:"Drag and Drop"},
{ref:"customHovers", title:"Hovers"},
{ref:"customMouseEvents", title:"Mouse Handling"},
{ref:"customAnimation", title:"Animation"},
{ref:"portalAnimation", title:"Simple Portal"}
]
}
]
},
openProperty:"isOpen"
})