Portal animation
<!--
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><TITLE>SmartClient portal animation example</TITLE>
<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/BlackOps/load_skin.js></SCRIPT>
</HEAD><BODY CLASS="pageBackground">
<SCRIPT>
// global for convenient single setting of multiple animation times in this example
var gAnimatePortletTime = 750; // milliseconds
// fake portlet list for self-contained example
// The real list could be included inline, or loaded on the fly from the server.
// This data can include whatever attributes you want to use for these portlet,
// e.g. feed URLs, icons, update frequency...
var gPortletData = [
{portletName:"Portlet 1"},
{portletName:"Portlet 2"},
{portletName:"Portlet 3"},
{portletName:"Portlet 4"},
{portletName:"Portlet 5"},
{portletName:"Portlet 6"},
{portletName:"Portlet 7"},
{portletName:"Portlet 8"},
{portletName:"Portlet 9"},
{portletName:"Portlet 10"}
];
var gViewIconHTML = Canvas.imgHTML("[SKIN]actions/view.png");
var gAddToColumn = 0;
</SCRIPT>
<!-- load customized components for this example -->
<SCRIPT>
// SmartClient portal example -- customized components
// Portlet, PortalColumn, and PortalLayout
//
// ISOMORPHIC SOFTWARE CONFIDENTIAL MATERIAL
// Portlet class definition
isc.defineClass("Portlet", "Window").addMethods({
autoDraw:false,
showShadow:false,
// enable predefined component animation
animateMinimize:true,
// Window is draggable with "outline" appearance by default.
// "target" is the solid appearance.
dragAppearance:"outline",
canDrop:true,
// customize the appearance and order of the controls in the window header
// (could do this in load_skin.js instead)
headerMembers:["minimizeButton", "headerLabel", "closeButton"],
// show either a shadow, or translucency, when dragging a portlet
// (could do both at the same time, but these are not visually compatible effects)
//showDragShadow:true,
dragOpacity:30,
// these settings enable the portlet to autosize its height only to fit its contents
// (since width is determined from the containing layout, not the portlet contents)
vPolicy:"none",
overflow:"visible",
bodyProperties:{overflow:"visible"}
});
// PortalColumn class definition
isc.defineClass("PortalColumn", "VStack").addMethods({
// leave some space between portlets
membersMargin:6,
// enable predefined component animation
animateMembers:true,
animateMemberTime:gAnimatePortletTime,
// enable drop handling
canAcceptDrop:true,
// change appearance of drag placeholder and drop indicator
dropLineThickness:4,
dropLineProperties:{backgroundColor:"aqua"},
showDragPlaceHolder:true,
placeHolderProperties:{border:"2px solid #8289A6"}
});
// PortalLayout class definition
isc.defineClass("PortalLayout", "HLayout").addMethods({
numColumns:2,
membersMargin:6,
initWidget : function () {
this.Super("initWidget", arguments);
// create multiple PortalColumn components
for (var i = 0; i < this.numColumns; i++) {
this.addMember(isc.PortalColumn.create({autoDraw:false, width:"*"}));
}
},
addPortlet : function (portlet, addToTop) {
var fewestPortlets = 999999,
fewestPortletsColumn;
// find the column with the fewest portlets
for (var i=0; i < this.members.length; i++) {
var numPortlets = this.getMember(i).members.length;
if (numPortlets < fewestPortlets) {
fewestPortlets = numPortlets;
fewestPortletsColumn = this.getMember(i);
}
}
fewestPortletsColumn.addMember(portlet, (addToTop ? 0 : null));
return fewestPortletsColumn;
}
});
</SCRIPT>
<SCRIPT>
// PORTLET LIST
isc.ListGrid.create({
ID: "portletList",
autoDraw: false,
height: 20,
width: 120,
// autosize to fit the list, instead of scrolling
overflow: "visible",
bodyOverflow: "visible",
leaveScrollbarGap: false,
// hide the column headers
showHeader:false,
// disable normal row selection behaviors
selectionType: "none",
fields: [ {name:"portletName", formatCellValue:"return gViewIconHTML + ' ' + value"} ],
// see above for fake data used by this self-contained example
data: gPortletData,
//------------------------------------------------------------
// OPEN PORTLET logic -
// Called whenever you click on an enabled row in this list.
//------------------------------------------------------------
rowClick: function (record, rowNum) {
// disable the row -- this will prevent subsequent clicks, and will also change the
// row style, to indicate that this portlet is already in the viewing area
record.enabled = false;
this.refreshRow(rowNum);
// create a new portlet
var newPortlet = isc.Portlet.create({
title: record.portletName,
items:[
// simple fake portlet contents - could put anything here
isc.Label.create({
autoDraw:false, align:"center", layoutAlign:"center",
contents: record.portletName+" contents"
})
],
portletRecord: record,
portletList: this,
// callback to the portletList when this portlet is closed (see closePortlet below)
closeClick: function () {this.portletList.closePortlet(this, this.portletRecord)}
});
// insert the portlet in the content area, but keep it hidden for now
newPortlet.hide();
var column = portalContentArea.addPortlet(newPortlet, true); // add to top
// also insert a blank spacer element, which will trigger the built-in
// animateMembers layout animation
var placeHolder = isc.LayoutSpacer.create();
placeHolder.setRect(newPortlet.getRect());
column.addMember(placeHolder,0); // add to top
// create an outline around the clicked row
var outline = isc.Canvas.create({
left:this.getPageLeft(), top:this.getRowPageTop(rowNum),
width:this.getVisibleWidth(), height:this.getRowSize(rowNum),
border:"2px solid #8289A6"
});
// animate the outline from the clicked row, to the desired position of the new portlet
// (this will execute in parallel with the placeHolder animation)
outline.animateRect(
newPortlet.getPageLeft(), newPortlet.getPageTop(),
newPortlet.getVisibleWidth(), newPortlet.getVisibleHeight(),
function () {
// callback at end of animation - destroy placeholder and outline; show the new portlet
placeHolder.destroy();
outline.destroy();
newPortlet.body.hPolicy = "fill";
newPortlet.show();
},
gAnimatePortletTime
);
},
//------------------------------------------------------------
// CLOSE PORTLET logic -
// Called when you click the close control in the top-right
// corner of a portlet (see closeClick above).
//------------------------------------------------------------
closePortlet: function (portlet, portletRecord) {
var rowNum = portletList.data.indexOf(portletRecord);
// create an outline around the portlet
var outline = isc.Canvas.create({autoDraw:false, border:"2px solid #8289A6"});
outline.setRect(portlet.getPageRect());
// swap the portlet with a blank spacer element
// (disabling relayout temporarily to prevent animation during the swap)
var portalColumn = portlet.parentElement;
portlet.hide();
var spacer = isc.LayoutSpacer.create();
spacer.setRect(portlet.getRect());
portalColumn.addMember(spacer, portalColumn.getMemberNumber(portlet), true);
// animateHide (shrink) the spacer to collapse this space in the content area
spacer.animateHideTime = gAnimatePortletTime;
spacer.animateHide();
// simultaneously animate the portlet outline down to the row in this portletList
outline.draw();
outline.animateRect(
this.getPageLeft(),
this.getRowPageTop(rowNum),
this.getVisibleWidth(),
this.getRowSize(rowNum),
function () {
// callback at end of animation - destroy outline, portlet, and spacer;
// also enable and refresh the row in the portletList so it does not show the special
// style (and so it can be clicked again)
outline.destroy();
spacer.destroy();
portlet.destroy();
portletRecord.enabled = true;
portletList.refreshRow(rowNum);
},
gAnimatePortletTime
);
}
});
// PAGE LAYOUT
isc.HLayout.create({
ID: "portalExamplePage",
width: "100%",
height: "100%",
layoutMargin: 10,
membersMargin: 10,
members: [
portletList,
isc.PortalLayout.create({
ID: "portalContentArea",
autoDraw: false,
numColumns: 3
})
]
});
</SCRIPT></BODY></HTML>
Related examples in the same category