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.com) 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.com/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>
Related examples in the same category