window.js

javascript 很酷的类库

    //> @attr window.maximizeButton (AutoChild : null : R)
    // Button that will make this Window fill the browser via +link{maximize()}.
    // @visibility external
    //<

    //>	@attr	window.showMaximizeButton		(boolean : false : [IRW])
    // If true, show a maximize button in the header - clicking it maximizes the Window
    //      @visibility external
    //      @group  appearance, header
    //<
    showMaximizeButton:false,
    
	maximizeButtonConstructor:"ImgButton",

	maximizeButtonDefaults:{				
		width:16,				
		height:14,						
		src:"[SKIN]/Window/maximize.gif",		
        layoutAlign:"center",
		click:function () { this.creator.maximize();return false }
	},	


	// Footer and Footer Components
	// ------------------------------------------------------------------------------------------

    //> @attr window.footer (AutoChild : null : R)
    // Optional footer for the window, providing space for a resizer and status bar.
    // @visibility external
    //<
	
    //>	@attr	window.showFooter		(boolean : true : [IRW])
    // If true, show a footer for this Window, including resizer, statusBar, etc.
    // This setting is commonly overridden for skinning purposes.
    //      @visibility external
    //      @group  appearance, footer
    // @example windowFooter
    //<
	showFooter:true,
    
	footerConstructor:"HLayout",		

    //>	@attr	window.footerHeight		(number : 18 : IR)
    //
    // The height of the footer, in pixels.
    //
    // @group  appearance, footer
    // @visibility external
    //<
	footerHeight:18,	
										
	// StatusBar settings
	// ----------------------------------------------------------------------------------------

    //> @attr window.statusBar (AutoChild : null : R)
    // Simple Canvas-based status bar, shown in the footer.  +link{setStatus()} can be used to
    // show text here.
    // @visibility external
    //<
    
    //>	@attr	window.showStatusBar		(boolean : true : [IRW])
    // If true, show a statusBar for this Window, including resizer.
    //      @visibility external
    //      @group  appearance, footer
    //<
	showStatusBar:true,
    
	statusBarConstructor:"Canvas",		

	statusBarDefaults:{					
		overflow:isc.Canvas.HIDDEN,
		styleName:"windowStatusBar",
        addAsChild:true,
        width:"100%",
		wrap:false,
		leftPadding:5
	},
	

	// Resizer
	// --------------------------------------------------------------------------------------------
    
    //> @attr window.resizer (AutoChild : null : R)
    // ImgButton-based resizer, shown in the footer.
    // @visibility external
    //<

    //>	@attr	window.showResizer		(boolean : true : [IRW])
    // If true, show a button in the lower right corner that allows users to resize the Window.
    // Note that the resizer will only be displayed if the footer is showing for the window
    // (+link{window.showFooter}) and +link{window.canDragResize} is true.
    // @group  appearance, dragging
    // @visibility external
    //<
	showResizer:true,
    
	resizerConstructor:"Img",

	resizerDefaults:{
        canDragResize:true,
		getEventEdge:function(){return "BR"},
		src:"[SKIN]/Window/resizer.gif",
		width:16,
		height:16
	},
	
	// Toolbar
	// ----------------------------------------------------------------------------------------------

    // NOTE: only documented on Dialog

    showToolbar:false,

    toolbarConstructor:"Toolbar",

	toolbarDefaults:{
		height:40,
        layoutMargin:10,
		membersMargin:5,
        overflow:"visible"
	},

    // Edges
    // ---------------------------------------------------------------------------------------
    // show custom edges as a child Canvas, top and bottom only by default.
    customEdges:["T", "B"],

    // alternate mode where we create the edgedCanvas as a child and use layoutMargins to place
    // members.  No known advantages.
    //edgesAsChild:true,

    // ---------------------------------------------------------------------------------------

	// set overflow to hidden; nothing should ever overflow the Window.  We need to be overflow
    // "hidden" even if the body clips, since the Window can be minimized.
    overflow:"hidden"
    	
});	// END	Window.addProperties()



//!>Deferred

isc.Window.addMethods({
//>	@method	Window.initWidget()	(A)
//			Initialize this window. 
//<
initWidget : function () {
    if (this.minimized && this.maximized) {
        this.logWarn("Window initialized with maximized and minimized both set to true. " +
                     "This is unsupported. The Window will be rendered minimized.");
        this.maximized = false;
    }

    // If this.minimized is true, call this.minimize() to set up minimized height, etc.
    if (this.minimized) {
        // clear out the property to avoid any confusion (currently we don't have a no-op check
        // in there but we may introduce one at some point)
        this.minimized = null;
        this.minimize();
    } else if (this.maximized) {
        this.maximized = null;
        this.maximize();
    }

    /*
    // edges as child mode.  Currently, no known advantages.
    if (this.showEdges) {
        var edge = this._createEdges(),
            edgesAsChild = this.edgesAsChild;

        // if edgesAsChild is true, we have no automatically created native margins, so we need
        // to use the Layout margin settings to cause our members (eg the header) not to
        // overlap the edges we are configured to show.
        if (edgesAsChild) {
            this.layoutLeftMargin = edge._leftMargin;
            this.layoutRightMargin = edge._rightMargin;
            this.layoutTopMargin = edge._topMargin;
            this.layoutBottomMargin = edge._bottomMargin;
        }
    }
    */

    if (this.autoSize) {
        this.vPolicy = "none";
        this.overflow = "visible";
    }

	this.Super(this._$initWidget);

    // if we're not drawn, clear any specified items that are currently drawn
    // (Note: we could use 'addItems' to achieve this too)
    if (!this._isInitialized && this.items != null) {
        for (var i = 0; i < this.items.length; i++) {
            if (isc.isA.Canvas(this.items[i]) && this.items[i].isDrawn()) this.items[i].clear();
        }
    }        
    
},

createChildren : function () {

	this.makeHeader();
    
	// make the body of the Window, and set up the items in the Window as children of the body
	this.makeBody();

    this.makeToolbar();
    
	this.makeFooter();

    this._isInitialized = true;
},

makeToolbar : function () {
    this.addAutoChild("toolbar", {
			buttons:this.toolbarButtons,
            // hide initially if we're minimized
            visibility : this.minimized ? isc.Canvas.HIDDEN : isc.Canvas.INHERIT
    });
},

//>	@method	Window.draw()	(A)
//		@group	drawing
//			Override draw to create the various sub-components and arrange their zOrder appropriately
//
//		@return	(boolean)	true if drawn successfully; false if not drawn for some reason
//<
draw : function (a,b,c,d) {
    if (isc._traceMarkers) arguments.__this = this;

	if (!this.readyToDraw()) return this;

    // create children (unless we've been clear()d and are being drawn for a second time)
    if (!this._isInitialized) this.createChildren();

	// call the superclass draw to actually draw the components, including the body
	return this.invokeSuper(isc.Window, "draw", a,b,c,d);
},


// Because we lazily add our items as children on draw, if we've never been drawn we will have
// to explicitly destroy members of our items array.
destroy : function () {
    if (!this._isInitialized) {
        var items = this.items;
        if (!isc.isAn.Array(items)) items = [items];
        for (var i = 0; i < items.length; i++) {
            if (isc.isA.Canvas(items[i])) items[i].destroy();
        }
    }
    
    this.items = null;
    this.destroyModalMask();
    
    return this.Super("destroy", arguments);
},

// Bring Windows to front on mouseUp.

mouseUp : function () {
    this.bringToFront();
    this.Super("mouseUp", arguments);
},

// Header Methods
// -----------------------------------------------------------------------------------------------
// These are methods that construct the header. Window.setHeader() is the main method. 
// It calls the make() methods of its constituent components to set them up and lay
// them out.
//

// declare relationships of children of header
autoChildParentMap : {
    resizer : "footer",
    statusBar : "footer",
    headerBackground : "header",
    headerIcon : "header",
    headerLabel : "header",
    minimizeButton : "header",
    maximizeButton : "header",
    closeButton : "header",
    toolbar : "body"
},

//>	@method	window.setHeader()
//		@group	appearance
//			initialize the header and its components.
//			if placement parameters are given, then lay out the header.
//
//		@param left		(number) left position of header
//		@param top		(number) right position of header
//		@param width	(number) width of header
//		@param height	(number) height of header
//<
makeHeader : function () {
	// the header is first created, then its children.
    var header = this.addAutoChild("header", {styleName:this.headerStyle});

    if (header == null) return; // not showing a header
	
	// create children once the header has been created
	if (header != null) {
        var headerBackground = this.addAutoChild("headerBackground", {
            // src will be picked up only by an Img/StretchImg
        	src:this.headerSrc
        });
        if (headerBackground) headerBackground.sendToBack();

        // if the window is in minimized state before we draw, swap in the restore button
        // autoChild defaults so we get the restore button to draw instead.
        if (this.minimized) {
            this._minimizeButtonDefaults = this.minimizeButtonDefaults;
            this._minimizeButtonProperties = this.minimizeButtonProperties;
            this.minimizeButtonDefaults = this.restoreButtonDefaults;
            this.minimizeButtonProperties = this.restoreButtonProperties;

        // Ditto with the maximize button
        } else if (this.maximized) {
            this._maximizeButtonDefaults = this.maximizeButtonDefaults;
            this._maximizeButtonProperties = this.maximizeButtonProperties;
            this.maximizeButtonDefaults = this.restoreButtonDefaults;
            this.maximizeButtonProperties = this.restoreButtonProperties;
        }
        
        // instantiate the header buttons in left-> right order so the tab order is appropriate
        // when we allow tabbing through them.
        this.addAutoChildren(this.headerControls, this.header);
        if (this.minimized) {
            this.minimizeButtonDefaults = this._minimizeButtonDefaults;
            this.minimizeButtonProperties = this._minimizeButtonProperties;
            this._minimizeButtonDefaults = this._minimizeButtonProperites = null;
        } else if (this.maximized) {
            this.maximizeButtonDefaults = this._maximizeButtonDefaults;
            this.maximizeButtonProperties = this._maximizeButtonProperties;
            this._maximizeButtonDefaults = this._maximizeButtonProperites = null;
        }        
	}
},


// The way auto-children work is that if show[childName] is false, they aren't created as
// part of addAutoChild()
// This means that simply setting the show[headerControl] attributes after initial call to 
// makeHeader will fail to ever create / show these controls.
// Therefore have a method to explicitly create and show the header controls at runtime
setShowHeaderControl : function (controlName, show, showControlAttrName) {
    var headerControls = this.headerControls;
    if (!headerControls.contains(controlName)) {
        this.logWarn("request to show/hide header control with name:" + controlName + 
                     ". No such control is present in this.headerControls - ignoring.");
        return;
    }
    if (!showControlAttrName)
        showControlAttrName = "show" + 
                              controlName.substring(0,1).toUpperCase() + controlName.substring(1);
                              
    if (this[showControlAttrName] == show) return;
    this[showControlAttrName] = show;
    
    // If we've never created our header - don't worry - our headerControls will be updated
    // if/when we do create the header
    if (this.header == null) return;
    
    if (this[controlName]) {
        if (show) this[controlName].show();
        else this[controlName].hide();