exampletree.js

javascript 很酷的类库

isc.ExampleTree.create({
    ID:"exampleTree",
    nodeVisibility:"sdk",
    root:{
        name:"root/",
        children:[
            {
                screenshot:"screenshots/tabs_ds_code.png",
                screenshotHeight:"176",
                screenshotWidth:"291",
                description:"\n    Welcome to the SmartClient Feature Tour!\n    <BR>\n    <BR>\n    Click on the name of an example in the tree on the left to load it.\n    <BR>\n    <BR>\n    With an example loaded, you can view source code by clicking on the tabs shown above the\n    running example.\n    <BR>\n    <BR>\n    For an overview of how to use this Feature Explorer, including specific instructions for\n    using code shown here in a standalone application, please see the <a target=_blank\n    href='${isc.ExampleViewer.getRefDocsURL()}#featureExplorerOverview'>\n    Feature Explorer Overview</a> topic in the Reference Docs.\n    \n      \n\n",
                isOpen:true,
                title:"Welcome",
                children:[
                    {jsURL:"welcome/helloButton.js", xmlURL:"welcome/helloButton.xml", 
                     description:"\n        A SmartClient <code>IButton</code> component responds to mouse clicks by showing a\n        modal <code>Dialog</code> component with the \"Hello world!\" message.  Source code is\n        provided in both XML and JS formats.\n        ",showSkinSwitcher:true, 
                     title:"Hello World"},
                    {
                        jsURL:"welcome/helloStyled.js",
                        visibility:"sdk",
                        xmlURL:"welcome/helloStyled.xml",
                        description:"\n        This <code>Label</code> 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 <code>FormLayout</code> 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)"},
                    {
                        dataSource:"supplyCategory",
                        fullScreen:"true",
                        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        ",
                        showSkinSwitcher:true,
                        tabs:[
                            {title:"supplyItem", url:"supplyItem.ds.xml"}
                        ],
                        id:"showcaseApp",
                        title:"Showcase Application"
                    },
                    {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.<BR> \nClick on the name of a screenshot below to see more information about developer\nconsole features.\n        ",showSource:false, 
                     title:"Developer Console"},
                    {jsURL:"docs/docs.js", 
                     description:"\n        SmartClient contains over 100 documented components with more than 2000 documented,\n        supported APIs.  All of SmartClient's documentation is integrated into a\n        SmartClient-based, searchable documentation browser, including API reference, concepts,\n        tutorials, live examples, architectural blueprints and deployment instructions.\n        ",showSource:false, 
                     title:"SmartClient Docs"}
                ]
            },
            {
                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        <code>HStack</code> and <code>VStack</code> containers manage the stacked positions\n        of multiple member components.\n        ",title:"Stack"},
                            {jsURL:"basics/layout.js", 
                             description:"\n        <code>HLayout</code> and <code>VLayout</code> 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 <code>HTMLFlow</code> 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 <code>HTMLPane</code> 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 <code>Label</code> 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 <code>Img</code> 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    <BR>\n    <BR>\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"}
                        ]
                    }
                ]
            },
            {
                description:"\n    Effects for creating a polished, branded, appealing application.\n    <BR>\n    <BR>\n    SmartClient supports rich skinning and styling capabilities, drag and drop interactions,\n    and built-in animations.\n",
                isOpen:true,
                title:"Effects",
                children:[