JavaScript DHTML/SmartClient/SmartClient Controls

Содержание

1 Component reuse
2 Move object by offset
3 Move to front/back to a layer
4 Position the widgets
5 Refernece object by ID
6 Show/hide a control
7 Three level controls hierarchy and event propagation
8 Use isc namespace to eliminate the possibility of JS name collisions
9 Widget attachment

Component reuse

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
// Define the SimplePortlet class, extending from VLayout
// ------------------------------------------------------
isc.defineClass("SimplePortlet", "VLayout");
isc.SimplePortlet.addProperties({
    defaultWidth:250, defaultHeight:200,
    canDragResize:true, minWidth:150, minHeight:100,
    headerMargin:2, headerHeight:23,
    showEdges:true,
    // use CSS style names to allow CSS-based skinning
    styleName:"portletBackground",
    headerStyleName:"portletHeader",
    titleStyleName:"portletTitle",
    // at init, create subcomponents 
    initWidget : function () {
        this.Super("initWidget", arguments);
        // store a reference to created components in order to 
        // call methods on them later
        this.headerLabel = isc.Label.create({
            contents: this.title, wrap:false,
            styleName: this.titleStyleName,
            overflow:"hidden", width:"*",
            canDragReposition:true,
            dragTarget:this
        });
        this.header = isc.HLayout.create({
            // pass properties through to create configurability
            height:this.headerHeight,
            layoutMargin:this.headerMargin,
            styleName:this.headerStyleName,
            members : [
                this.headerLabel,
                isc.ImgButton.create({
                    // use special path prefixes to allow image skinning
                    src : "[SKIN]Window/close.png", width:18, height:18,
                    layoutAlign:"center",
                    // create interactivity by passing a reference
                    // to the creating component, so subcomponents
                    // can call methods on their creator
                    portlet: this, click:"this.portlet.hide()"
                })
            ]
        });
        // build up the layout programmatically by adding 
        // components as members 
        this.addMember(this.header);
        this.addMember(isc.HTMLFlow.create({
            contents : this.portletContents, padding: 5,
            height:"*"
        // pass a properties object through to 
        // create complete configurability
        }, this.contentProperties));
        // allow additional components to be added
        if (this.customFooter) this.addMembers(this.customFooter);
    },
    // provide dynamic updates by calling methods on subcomponents
    setHeaderTitle : function (newTitle) {
        this.headerLabel.setContents(newTitle);
    }
});
// Use the newly defined component
// --------------------------------------------------
isc.SimplePortlet.create({
    title:"Creating new components",
    portletContents:
           "This portlet is an instance of the "SimplePortlet"" +
           " custom component created in this example<P>" +
           "To creating new, reusable SmartClient components," +
           " simply construct subcomponents at initialization."
});
isc.SimplePortlet.create({
    title:"Configurable components",
    portletContents:
          "This is also an instance of the "SimplePortlet"" +
          " with customized appearance<P>" +
          "To make components configurable, just pass " +
          "properties through to subcomponents.",
    left:300, height:300,
    contentProperties : { padding:5, backgroundColor:"lightblue" },
    customFooter : isc.Label.create({
        contents:"Status: OK",
        height:22, padding:3,
        border:"1px solid black", backgroundColor:"#CCCCCC"
    })
});
isc.SimplePortlet.create({
    ID:"dynamicWindow",
    title:"Dynamic components",
    top:350,
    portletContents:
          "The form to the right will change the title of this " +
          "portlet by calling the custom method <code>setHeaderTitle()</code><P>" +
          "To make components dynamic, create methods " +
          "that change properties on subcomponents."
});
isc.DynamicForm.create({
    ID:"setTitleForm",
    left:260, top:350, 
    fields : [
        { name:"title", type:"text", showTitle:false, defaultValue:"[Enter new title]" },
        { type:"button", title:"Set Title",
          click:"dynamicWindow.setHeaderTitle(setTitleForm.getValue("title"))" }
    ]
});

</SCRIPT>
</BODY>
</HTML>

Move object by offset

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.IButton.create({
    ID:"van",
    title:"obj",
    left:50, top:50, width:96, height:96,
    src:""
})
isc.IButton.create({
    title :"left", 
    width:48, 
    height:48, 
    showRollOver:true,
    click:"van.moveTo(50,50)"
})
isc.IButton.create({
    title:"right", left:50, width:48, height:48, showRollOver:true,
    mouseStillDown:"van.moveBy(20,20)"
})


</SCRIPT>
</BODY>
</HTML>

Move to front/back to a layer

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY>
<SCRIPT>
Canvas.create({
    ID:"red",
    left:50,
    top:75,
    width:100,
    height:100,
    backgroundColor:"red"
});
Canvas.create({
    ID:"green",
    left:100,
    top:125,
    width:100,
    height:100,
    backgroundColor:"green"
});

Canvas.create({
    ID:"blue",
    left:150,
    top:175,
    width:100,
    height:100,
    backgroundColor:"blue"
});
Canvas.create({
    ID:"widget",
    left:200,
    top:225,
    width:100,
    height:100,
    backgroundColor:"khaki",
    contents:"widget<BR>(drag me)",
    canDragReposition:true,
    dragAppearance:"target"
});

//
//    buttons to manipulate the above
//
Button.create({    left:350,    top:75,    width:175,    height:30,    
    title:"widget.bringToFront()",click:"widget.bringToFront()"
});

Button.create({    left:350,    top:125,    width:175,    height:30,
    title:"widget.sendToBack()",    click:"widget.sendToBack()"
});

Button.create({    left:350,    top:175,    width:175,    height:30,
    title:"widget.moveAbove(green)",    click:"widget.moveAbove(green)"
});

Button.create({    left:350,    top:225,    width:175,    height:30,
    title:"widget.moveBelow(green)",    click:"widget.moveBelow(green)"
});
</SCRIPT>
</BODY>
</HTML>

Position the widgets

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY>
<SCRIPT>
Canvas.create({
    ID:"widget",
    left:200,
    top:225,
    width:100,
    height:100,
    overflow:"hidden",
    backgroundImage:"http://www.wbex.ru/style/logo.png"
});

// --------------------------------------------------
// top move/grow/shrink buttons
// --------------------------------------------------
Button.create({    left:150,    top:75,    width:50,    height:50,    title:"Move",
    //mouseStillDown:function(){widget.setTop(widget.getTop()-20)}
    mouseStillDown:function(){widget.moveBy(0,-20)}
});
Button.create({    left:225,    top:75,    width:50,    height:50,    title:"Grow",
    //mouseStillDown:function(){widget.setRect(null, widget.getTop()-20, null, widget.getHeight()+20)}
    mouseStillDown:function(){widget.moveBy(0,-20); widget.resizeBy(0,20);}
});
Button.create({    left:300,    top:75,    width:50,    height:50,    title:"Shrink",
    //mouseStillDown:function(){widget.setRect(null, widget.getHeight() > 0 ? widget.getTop()+20 : null, null, Math.max(widget.getHeight()-20,0))}
    mouseStillDown:function(){widget.moveBy(0, widget.getHeight() > 0 ? 20 : 0); widget.setHeight(Math.max(widget.getHeight()-20,0));}
});

// --------------------------------------------------
// bottom move/grow/shrink buttons
// --------------------------------------------------
Button.create({    left:150,    top:425,    width:50,    height:50,    title:"Move",
    //mouseStillDown:function(){widget.setTop(widget.getTop()+20)}
    mouseStillDown:function(){widget.moveBy(0,20)}
});
Button.create({    left:225,    top:425,    width:50,    height:50,    title:"Grow",
    //mouseStillDown:function(){widget.setBottom(widget.getBottom()+20);}
    mouseStillDown:function(){widget.resizeBy(0,20)}
});
Button.create({    left:300,    top:425,    width:50,    height:50,    title:"Shrink",
    //mouseStillDown:function(){widget.setBottom(Math.max(widget.getBottom()-20,widget.getTop()));}
    mouseStillDown:function(){widget.setHeight(Math.max(widget.getHeight()-20,0))}
});

// --------------------------------------------------
// left move/grow/shrink buttons
// --------------------------------------------------
Button.create({    left:50,    top:175,    width:50,    height:50,    title:"Move",
    //mouseStillDown:function(){widget.setLeft(widget.getLeft()-20)}
    mouseStillDown:function(){widget.moveBy(-20,0)}
});
Button.create({    left:50,    top:250,    width:50,    height:50,    title:"Grow",
    //mouseStillDown:function(){widget.setRect(widget.getLeft()-20, null, widget.getWidth()+20, null)}
    mouseStillDown:function(){widget.moveBy(-20,0); widget.resizeBy(20,0);}
});
Button.create({    left:50,    top:325,    width:50,    height:50,    title:"Shrink",
    //mouseStillDown:function(){widget.setRect(widget.getWidth() > 0 ? widget.getLeft()+20 : null, null, Math.max(widget.getWidth()-20,0), null)}
    mouseStillDown:function(){widget.moveBy(widget.getWidth() > 0 ? 20 : 0, 0); widget.setWidth(Math.max(widget.getWidth()-20,0));}
});

// --------------------------------------------------
// right move/grow/shrink buttons
// --------------------------------------------------
Button.create({    left:400,    top:175,    width:50,    height:50,    title:"Move",
    //mouseStillDown:function(){widget.setLeft(widget.getLeft()+20)}
    mouseStillDown:function(){widget.moveBy(20,0)}
});
Button.create({    left:400,    top:250,    width:50,    height:50,    title:"Grow",
    //mouseStillDown:function(){widget.setRight(widget.getRight()+20);}
    mouseStillDown:function(){widget.resizeBy(20,0)}
});
Button.create({    left:400,    top:325,    width:50,    height:50,    title:"Shrink",
    //mouseStillDown:function(){widget.setRight(Math.max(widget.getRight()-20,widget.getLeft()));}
    mouseStillDown:function(){widget.setWidth(Math.max(widget.getWidth()-20,0))}
});

</SCRIPT>
</BODY>
</HTML>

Refernece object by ID

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.IButton.create({
    ID:"van",
    title:"obj",
    left:50, top:50, width:96, height:96,
    src:""
})
isc.IButton.create({
    title :"left", 
    width:48, 
    height:48, 
    showRollOver:true,
    click:"van.moveTo(50,50)"
})
isc.IButton.create({
    title:"right", left:50, width:48, height:48, showRollOver:true,
    mouseStillDown:"van.moveBy(20,20)"
})


</SCRIPT>
</BODY>
</HTML>

Show/hide a control

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT>
isc.Label.create({
    ID:"textbox", align:"center", showEdges:true, padding:5,
    left:50, top:50, width:200,
    contents:"The future has a way of arriving unannounced.",
    visibility:"hidden"
})
isc.IButton.create({
    title:"Show", left:40,
    click:"textbox.show();"
})
isc.IButton.create({
    title:"Hide", left:160,
    click:"textbox.hide();"
})


</SCRIPT>
</BODY>
</HTML>

Three level controls hierarchy and event propagation

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY>
<SCRIPT>
Canvas.create({
    ID:"topWidget",
    left:50,
    top:75,
    width:300,
    height:300,
    contents:"top",
    backgroundColor:"skyblue",
    click:"return confirm("top received click event. Continue?")",
    children:[
        Canvas.create({ 
            ID:"parentWidget",
            autoDraw:false,
            left:50,
            top:50,
            width:200,
            height:200,
            contents:"parent",
            backgroundColor:"khaki",
            click:"return confirm("parent received click event. Continue?")",
            children:[
                Canvas.create({
                    ID:"targetWidget",
                    autoDraw:false,
                    left:50,
                    top:50,
                    width:100,
                    height:100,
                    contents:"target",
                    backgroundColor:"lightgreen",
                    click:"return confirm("target received click event. Continue?")"
                })          
            
            ]
        })
    ]
});
</SCRIPT>
</BODY>
</HTML>

Use isc namespace to eliminate the possibility of JS name collisions

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
<SCRIPT>
  var isc_useSimpleNames = false;
  var isomorphicDir = "isomorphic/";
</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
  <SCRIPT>
/*---------->    SimpleSlider_9.js    <----------*/
// Step 9
//  * use "isc" namespace to eliminate the possibility of JS name collisions
isc.ClassFactory.defineClass("SimpleSlider", isc.Canvas);

isc.SimpleSlider.addClassProperties({
  VERTICAL_SRC_PREFIX:"v",
  HORIZONTAL_SRC_PREFIX:"h",
  DOWN:"down",
  UP:"",
  ON:"",
  OFF:"off",
  EVENTNAME:"sliderMove"
});

isc.SimpleSlider.addProperties({
  length:200,
  vertical:true,
  
  thumbThickWidth:23,
  thumbThinWidth:17,
  trackWidth:7,
  trackCapSize:6,
  skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
  thumbSrc:"thumb.gif",
  trackSrc:"track.gif",
  
  value:0,
  sliderTarget:null,
    initWidget : function () {
        this.Super("initWidget",  arguments);
    
        var width, height;
    
        if (this.vertical) {
            width = Math.max(this.thumbThickWidth, this.trackWidth);
            height = this.length;
        } else {
            width = this.length;
            height = Math.max(this.thumbThickWidth, this.trackWidth);
        }
        
        this.setWidth(width);
        this.setHeight(height);
        
        this._usableLength = this.length-this.thumbThinWidth;
        
        this._track = this.addChild(this._createTrack());
        this._thumb = this.addChild(this._createThumb());
        
        this.setValue(this.value);
        this.setDisabled(this.disabled);
    },
    
    
    _createTrack : function () {
        return isc.StretchImg.create({
            autoDraw:false,
            left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
            top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
            width:(this.vertical ? this.trackWidth : this.getWidth()),
            height:(this.vertical ? this.getHeight() : this.trackWidth),
            vertical:this.vertical,
            capSize:this.trackCapSize,
            src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
            skinImgDir:this.skinImgDir
        });
    },
    
    
    _createThumb : function () {
        return isc.Img.create({
            autoDraw:false,
            left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
            top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
            width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
            height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
            src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
            skinImgDir:this.skinImgDir,
            canDrag:true,
            dragAppearance:isc.EventHandler.NONE,
            cursor:isc.Canvas.HAND,
            dragMove:"this.parentElement._thumbMove(); return false",
            dragStart:isc.EventHandler.stopBubbling,
            dragStop:"this.setState(isc.SimpleSlider.UP); return false",
            mouseDown:"this.setState(isc.SimpleSlider.DOWN)",
            mouseUp:"this.setState(isc.SimpleSlider.UP); return false"
        });
    },
    
    
    _thumbMove : function () {
        var thumbPosition;
        
        if (this.vertical) {
            thumbPosition = isc.EventHandler.getY() - this.getPageTop();
            thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
            if (thumbPosition == this._thumb.getTop()) return;
            this._thumb.setTop(thumbPosition);
        } else {
            thumbPosition = isc.EventHandler.getX() - this.getPageLeft();
            thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
            if (thumbPosition == this._thumb.getLeft()) return;
            this._thumb.setLeft(thumbPosition);
        }
        
        this.value = thumbPosition/this._usableLength;
        
        this.valueChanged();
        
        if (this.sliderTarget) isc.EventHandler.handleEvent(this.sliderTarget, isc.SimpleSlider.EVENTNAME, this);
    },
    
    
    setValue : function (newValue) {
        if (!isc.isA.Number(newValue)) return;
        this.value = Math.max(0, Math.min(newValue, 1));
        
        var thumbPosition = this.value * this._usableLength;
        if (this.vertical)
            this._thumb.setTop(thumbPosition);
        else
            this._thumb.setLeft(thumbPosition);
        
        this.valueChanged();
        
        if (this.sliderTarget) isc.EventHandler.handleEvent(this.sliderTarget, isc.SimpleSlider.EVENTNAME, this);
    },
    
    
    getValue : function () {
        return this.value;
    },
    
    
    valueChanged : function () {
    },
    
    
    setDisabled : function (disabled) {
        this.Super("setDisabled",arguments);
        
        if (!disabled) {
            this._track.setState(isc.SimpleSlider.ON);
            this._thumb.setState(isc.SimpleSlider.UP);  
            this._thumb.setCursor(isc.Canvas.HAND);
        } else {
            this._track.setState(isc.SimpleSlider.OFF);
            this._thumb.setState(isc.SimpleSlider.OFF);  
            this._thumb.setCursor(isc.Canvas.DEFAULT);
        }
    }
    
    
});
  </SCRIPT>
</HEAD><BODY BGCOLOR="powderblue">
<SCRIPT>

// override default skin directory to pick up local slider images
isc.Page.setSkinDir("");

//--------------------------------------------------
//  display area for targeted sliderMove events
//--------------------------------------------------
isc.Label.create({
  ID:"display",
  left:150,
  top:50,
  height:20,
  sliderMove:function(event,slider){
    this.setContents("sliderMove event<br>" +
                         slider.getID() + ": " + slider.value);
  }
});

//--------------------------------------------------
//  global handler for sliderMove events
//--------------------------------------------------
isc.Label.create({
    ID:"globalDisplay",
    left:300,
    top:50,
    height:20
});
isc.Page.setEvent(
    "sliderMove", 
    "globalDisplay.setContents("Global handler<br>" + eventInfo.ID + ": " + eventInfo.value);"
);
//--------------------------------------------------
//  sliders
//--------------------------------------------------
isc.SimpleSlider.create({
  ID:"vSlider",
  left:100,
  top:100,
  value:0.3,
  sliderTarget:display
});
isc.SimpleSlider.create({
  ID:"hSlider",
  left:300,
  top:180,
  vertical:false,
  value:0.5,
  sliderTarget:display
});

//--------------------------------------------------
//  display areas for observed slider values
//--------------------------------------------------
isc.Label.create({
  ID:"vSliderObserver",
  left:20,
  top:320,
  height:20
});
vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");

isc.Label.create({
  ID:"hSliderObserver",
  left:300,
  top:320,
  height:20
});
hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");

//--------------------------------------------------
//  buttons to enable/disable sliders
//--------------------------------------------------
isc.Button.create({
  left:70,
  top:20,
  width:120,
  title:"Enable sliders",
  click:"vSlider.enable();hSlider.enable()"
});

isc.Button.create({
  left:220,
  top:20,
  width:120,
  title:"Disable sliders",
  click:"vSlider.disable();hSlider.disable()"
});

</SCRIPT>
</BODY>
</HTML>

Widget attachment

 
<!--
Isomorphic SmartClient
Copyright(c) 1998 and beyond Isomorphic Software, Inc.
"SmartClient" is a trademark of Isomorphic Software, Inc.
All rights reserved.
Open Source License
SmartClient source code, located under the source/ directory, and the resulting assembled modules 
in isomorphic/system/modules/, as well as JavaScript and CSS files under the isomorphic/skins directory are 
licensed under the terms of the GNU Lesser General Public License, version 3. 
The text of the LGPLv3 license is available online at http://www.gnu.org/licenses/lgpl-3.0.html
If your project precludes the use of this license, or if you"d like to support SmartClient LGPL, 
we encourage you to buy a commercial license.
Icon Experience Collection
Selected 16x16 icons within the isomorphic/skins directory are part of the Icon Experience collection 
(http://www.iconexperience.ru) and may be freely used with any SmartClient components without charge, 
but may not be used as part of screen designs separate from SmartClient components without a purchase 
of a license from Icon Experience. We are working to replace these icons as soon as possible.
All other media found under the isomorphic/skins directory may be used under the LGPLv3.
Commercial Licenses
A number of commercial licenses are available for purchase. Please see http://smartclient.ru/license.
Warranty Disclaimer
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even 
the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General 
Public License for more details.
Copyright 2001 and beyond Isomorphic Software, Inc. Last revised July 20, 2008. 

-->
<!-- The following code is revised from SmartClient demo code(SmartClient_70rc2_LGPL.zip).-->

<HTML><HEAD>
  <SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
  <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="papayawhip" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
<TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=5 BORDER=0><TR><TD CLASS=pageHeader BGCOLOR=WHITE>
  Dynamic containment and attachment example
</TD><TD CLASS=pageHeader ALIGN=RIGHT BGCOLOR=WHITE>
  Isomorphic SmartClient
</TD></TR></TABLE><TABLE WIDTH=100% CELLSPACING=0 CELLPADDING=0 BORDER=0><TR>
<TD BGCOLOR=336666><IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4></TD></TR></TABLE>

<!--------------------------
  Example code starts here
---------------------------->
<SCRIPT>
//
// widgets you manipulate on the page
//
// the big gray fields
Canvas.create({
    ID:"P1",
    left:300,
    top:50,
    width:200,
    height:200,
    overflow:"hidden",
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"lightgrey",
    contents:"P1"
});
Canvas.create({
    ID:"P2",
    left:550,
    top:50,
    width:200,
    height:200,
    overflow:"hidden",
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"lightslategray",
    contents:"P2"
});

// the smaller colored boxes
Canvas.create({
    ID:"M1",
    left:75,
    top:100,
    width:50,
    height:50,
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"khaki",
    contents:"M1"
});
Canvas.create({
    ID:"A1",
    left:25,
    top:50,
    width:50,
    height:50,
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"lightseagreen",
    contents:"A1"
});
Canvas.create({
    ID:"A2",
    left:125,
    top:50,
    width:50,
    height:50,
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"lightskyblue",
    contents:"A2"
});
Canvas.create({
    ID:"B1",
    left:25,
    top:150,
    width:50,
    height:50,
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"lightsalmon",
    contents:"B1"
});
Canvas.create({
    ID:"B2",
    left:125,
    top:150,
    width:50,
    height:50,
    canDragReposition:true,
    dragAppearance:"target",
    backgroundColor:"yellow",
    contents:"B2"
});
//B1.addPeer(B2);

//
//    labels and buttons to manipulate the above
//
Label.create({    left:80,    top:295,    width:150,    height:20,    contents:"<B>A1 Parent/Peer:</B>",    align:"center" });
Button.create({    left:80,    top:325,    width:150,    height:30,    title:"P1.addChild(A1)",    click:"P1.addChild(A1)" });
Button.create({    left:80,    top:365,    width:150,    height:30,    title:"P2.addChild(A1)",    click:"P2.addChild(A1)" });
Button.create({    left:80,    top:405,    width:150,    height:30,    title:"M1.addPeer(A1)",    click:"M1.addPeer(A1)" });
Label.create({     left:240,    top:295,    width:150,    height:20,    contents:"<B>B1 Parent/Peer:</B>",    align:"center" });
Button.create({    left:240,    top:325,    width:150,    height:30,    title:"P2.addChild(B1)",    click:"P2.addChild(B1)" });
Button.create({    left:240,    top:365,    width:150,    height:30,    title:"P1.addChild(B1)",    click:"P1.addChild(B1)" });
Button.create({    left:240,    top:405,    width:150,    height:30,    title:"M1.addPeer(B1)",    click:"M1.addPeer(B1)" });
Label.create({    left:400,    top:295,    width:150,    height:20,    contents:"<B>A2 Peer:</B>",    align:"center" });
Button.create({    left:400,    top:325,    width:150,    height:30,    title:"A1.addPeer(A2)",    click:"A1.addPeer(A2)" });
Button.create({    left:400,    top:365,    width:150,    height:30,    title:"B1.addPeer(A2)",    click:"B1.addPeer(A2)" });
Button.create({    left:400,    top:405,    width:150,    height:30,    title:"M1.addPeer(A2)",    click:"M1.addPeer(A2)" });
Label.create({    left:560,    top:295,    width:150,    height:20,    contents:"<B>B2 Peer:</B>",    align:"center" });
Button.create({    left:560,    top:325,    width:150,    height:30,    title:"B1.addPeer(B2)",    click:"B1.addPeer(B2)" });
Button.create({    left:560,    top:365,    width:150,    height:30,    title:"A1.addPeer(B2)",    click:"A1.addPeer(B2)" });
Button.create({    left:560,    top:405,    width:150,    height:30,    title:"M1.addPeer(B2)",    click:"M1.addPeer(B2)" });
</SCRIPT>
</BODY>
</HTML>

JavaScript DHTML/SmartClient/SmartClient Controls

Содержание

Component reuse

Move object by offset

Move to front/back to a layer

Position the widgets

Refernece object by ID

Show/hide a control

Three level controls hierarchy and event propagation

Use isc namespace to eliminate the possibility of JS name collisions

Widget attachment

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты