detailviewer.js

javascript 很酷的类库

//>	@method	detailViewer.getInnerHTML()	(A)
//			return the HTML for this widget
//		@return	(string)	HTML to display
//<
getInnerHTML : function () {
	// get the data to display
	var valueList = this.getData();

    // If the data is a result set, poke the ResultSet to fetch data and return the loading
    // message.  FIXME: DV needs to do paging to show large datasets meaningfully
    if (isc.ResultSet != null && isc.isA.ResultSet(valueList) && !valueList.lengthIsKnown()) {
        valueList.getRange(0, 10000);
        return this.loadingMessageHTML();
    }

	if ((valueList == null || (isc.isAn.Array(valueList) && valueList.getLength() == 0)) 
         && this.showEmptyMessage) {
		return this.emptyMessageHTML();		
	}
	
	//>DEBUG
	if (this.fields == null || this.fields.length == 0) {
		return "Note: you must define detailViewer.fields to specify what to display!";
	}
	//<DEBUG
	
	// normalize the data into an array
	if (!isc.isA.List(valueList)) valueList = [valueList];

	// if there's only one item or we're supposed to show all columns together
	if (valueList.getLength() == 1 || this.recordsPerBlock == "*") {
		// call the blockHTML routine with all items
		return this.getBlockHTML(valueList);
	} else {
		// otherwise call it for each item separately
		var output = isc.StringBuffer.newInstance();
		for (var startRow = 0; startRow < valueList.getLength(); startRow += this.recordsPerBlock) {
			output.append(this.getBlockHTML(valueList.getRange(startRow, startRow + this.recordsPerBlock)), this.blockSeparator);
		}
		return output.toString();
	}
},

//>	@method	detailViewer.getBlockHTML()	(A)
//			return the HTML for either a single object or a set of objects expressed as columns
//		@return	(string)	HTML to display
//<
getBlockHTML : function (valueList) {

	// how many separate value objects are we dealing with ?
	var numValues = valueList.getLength();
	
	// start the table to display the output
	var output = "<TABLE WIDTH=" + this.getInnerWidth() + " CELLPADDING=" + this.cellPadding;

	// if showing a border 
    // FIXME ditch in favor of CSS style for overall table
	if (this.showBorder) {
		// show a nicer border for IE since it can handle it
		output += (isc.Browser.isIE ? " CELLSPACING=1 BORDER=0 STYLE='background-color:gray;'"//position:absolute;left:-1;top:-1;'"
								: " CELLSPACING=0 BORDER=1")
	}
	output += ">";

	// output the data
	
	// get the list of fields to output
	var fields = this.fields;
	
	// iterate through each of the keys in detailFields and output the info for each field
	for (var fieldNum = 0, fieldLength = fields.length; fieldNum < fieldLength; fieldNum++) {
		var field = fields[fieldNum];
		if (!field) continue;

		// if the field has a showIf property
		if (field.showIf) {
			// CALLBACK API:  available variables:  "viewer,valueList"
			// Convert a string callback to a function

			if (!isc.isA.Function(field.showIf)) {
				isc.Func.replaceWithMethod(field, "showIf", "viewer,valueList");
			}

			// skip this if the showIf returns false
			if (field.showIf(this, valueList) == false) continue;
		}

		// MAE: if we don't want to show fields that have empty/null values
		// check the appropriate values and skip if they are all empty/null
		// This does not apply to headers and separators
		var type = field.type ? field.type : "";
		if (type != "separator" && type != "header" && !this.showEmptyField) {
			var valuesAreEmpty = true;
			for (var i = 0; i < valueList.getLength(); i++) {
				var value = valueList.get(i)[field[this.fieldIdProperty]]
				if (!(value == null || value == "")) {
					valuesAreEmpty = false;
					break;
				}
			}
			// if no values were found, continue to the next field
			if (valuesAreEmpty) continue;
		}

		// if there is a specific output function for this field, call that
		if (field.output) {
			// CALLBACK API:  available variables:  "fieldNum,field,valueList"
			// Convert a string callback to a function
			if (!isc.isA.Function(field.output)) {
				isc.Func.replaceWithMethod(field, "output", "fieldNum,field,valueList");
			}	
			output += field.output(fieldNum, field, valueList);
		} else {
			// output this particular field
			output += this.outputItem(fieldNum, field, valueList);
		}
	}
	// end the table
	output += "</TABLE>"
	// and return the output
	return output;
},


//>	@method	detailViewer.outputItem()	(A)
// Output one row of the data as HTML
//		@param	fieldNum		(number)		number of the field to output
//		@param	field		(object)		pointer to the field to output
//		@param	valueList	(array)			list of values to output
//
//		@return	(string)	HTML output
//<
outputItem : function (fieldNum, field, valueList) {
    
	var type = (field.type ? field.type : "value"),
		// functionName == name of a function to call to ouput this particular type of object
		functionName = "output_"+type,
		output = ""
	;
	// if a function by that name cannot be found, default to output_value
	if (!this[functionName]) functionName = "output_value";
	// start the table row
	output += "<TR" 
			+ (this.rowClass != null ? " CLASS='" + this.rowClass + "'" : "")
			+ ">";

	// output 
	output += this[functionName](fieldNum, field, valueList);
	
	// end the row
	output += "</TR>\r";

	// return the output
	return output;
},


//
//	OUTPUT HTML FOR DIFFERENT TYPES OF OBJECTS
//


//>	@method	detailViewer.output_value()	(A)
//			output a normal value for each field in valueList
//		@param	fieldNum		(number)		number of the field to output
//		@param	field		(object)		pointer to the field to output
//		@param	valueList	(array)			list of values to output
//
//		@return	(string)	HTML output
//<
output_blob : function (fieldNum, field, valueList) {
    return this.output_binary(fieldNum, field, valueList);
},
output_upload : function (fieldNum, field, valueList) {
    return this.output_binary(fieldNum, field, valueList);
},
output_binary : function (fieldNum, field, valueList) {
	// output the label
	var output = "<TD WIDTH=10% CLASS='" + this.labelStyle + "' ALIGN=RIGHT"
			+ (this.wrapLabel ? ">" : " NOWRAP><NOBR>")
			+ this.labelPrefix + (field.title ? field.title : field[this.fieldIdProperty]) + this.labelSuffix 
			+ "<\/NOBR><\/TD>"
	;

	// iterate for each object in valueList, outputing the object[field[this.fieldIdProperty]]
	for (var i = 0; i < valueList.getLength(); i++) {

        var record = valueList.get(i);
        var index = this.getData().indexOf(record);
        var name = record[field.name+"_filename"];
        var viewIconHTML = isc.Canvas.imgHTML("[SKIN]actions/view.png", 16, 16, null,
                        "style='cursor:"+isc.Canvas.HAND+"' onclick='"+this.getID()+".viewRow("+index+")'");
        var downloadIconHTML = isc.Canvas.imgHTML("[SKIN]actions/download.png", 16, 16, null,
                        "style='cursor:"+isc.Canvas.HAND+"' onclick='"+this.getID()+".downloadRow("+index+")'");

        var value = viewIconHTML + "&nbsp;" + downloadIconHTML + "&nbsp;" + name;

		// output the value as a cell
		output += "<TD CLASS='" + this.cellStyle + "'>" + value + "<\/TD>";
	}
	return output;

},

viewRow : function (index) {
    isc.DS.get(this.dataSource).viewFile(this.getData().get(index));
},

downloadRow : function (index) {
    isc.DS.get(this.dataSource).downloadFile(this.getData().get(index));
},

output_value : function (fieldNum, field, valueList) {

    // Note: valueList is really a record object, or an aray of record objects.

	// output the label
	var output = "<TD WIDTH=10% CLASS='" + this.labelStyle + "' ALIGN=RIGHT"
			+ (this.wrapLabel ? ">" : " NOWRAP><NOBR>")
			+ this.labelPrefix + (field.title ? field.title : field[this.fieldIdProperty]) + this.labelSuffix 
			+ "<\/NOBR><\/TD>"
	;
    
    // resolve field level valueMap reference strings to objects before going into the for loop
    if (field.valueMap && isc.isA.String(field.valueMap)) 
        field.valueMap = this.getGlobalReference(field.valueMap);
	
	// iterate for each object in valueList, outputing the object[field[this.fieldIdProperty]]
	for (var i = 0; i < valueList.getLength(); i++) {

        var value = this.getCellValue(valueList.get(i), field);
    
		// output the value as a cell
		output += "<TD CLASS='" + this.cellStyle + "'>" + value + "<\/TD>";
	}
	return output;
},

// getCellValue - method to actually get the value for a record.
// Called from 'output_value', which handles writing the <TD> tags around the value and
// outputting a whole block of records.
// Can be overridden by a user.
// Also if 'getCellValue()' is specified at a field level, will apply it to this cell.

getCellValue : function (record, field) {

    // get the value of this key for that field
    var value = record[field[this.fieldIdProperty]];
    if (isc.isA.String(field.formatCellValue)) {
        field.formatCellValue = isc.Func.expressionToFunction("value, record, field",
                                                                field.formatCellValue);
    }
    if (field.getCellValue != null) {
        if (isc.isA.String(field.getCellValue)) {
            field.getCellValue = isc.Func.expressionToFunction("value, record, field",
                                                                field.getCellValue);
        }
        // note the 'value' passed into field.getCellValue() is the raw value, not valueMapped, etc.
        // This matches the ListGrid's field-level getCellValue behavior.
        value = field.getCellValue(value, record, field);
        if (field.formatCellValue) value = field.formatCellValue(value, record);
    } else {
        
        // if the col has an 'valueMap' parameter, treat the value as a key in the valueMap
        if (field.valueMap != null) value = isc.getValueForKey(value, field.valueMap);    
    
        if (field.formatCellValue) value = field.formatCellValue(value, record);

        // if no value was specified, output the emptyCellValue
        if (value == null || isc.is.emptyString(value)) value = this.emptyCellValue;
    }

    // Support formatCellValue if specified
    if (this.formatCellValue) {
        value = this.formatCellValue(value, record, field);
    } else {
        // _formatDataType ensures that non string values get formatted as strings as appropriately    
        value = this._formatDataType(record, field, value);
        
        // field.asHTML is a boolean - if true, escape HTML chars in the value such as "<".
        if (field.asHTML) value = value.asHTML();
    }
    return value;
},

_$date:"date",
_formatDataType : function (record, field, value) {
    var type = field.type,
        baseType = (type != null ? isc.SimpleType.getBaseType(type) : null),
        formatter;
        
    // If the field has an explicitly specified formatter, use it
    
    if (baseType == this._$date)  
        formatter = (field.dateFormatter || field.formatter || this.dateFormatter);
    
    if (formatter != null) {
        if (isc.isA.Date(value)) value = value.toNormalDate(formatter);
    } else {
        
        if (field._normalDisplayFormatter != null) {
            value = field._simpleType.normalDisplayFormatter(value, field, this, record);
        }
        
        else if (field.type == null && isc.isA.Date(value)) value = value.toNormalDate();
    }
    
    return isc.iscToLocaleString(value);
},


//>	@method	detailViewer.output_header()	(A)
//			output a header field
//		@param	fieldNum		(number)		number of the field to output
//		@param	field		(object)		pointer to the field to output
//		@param	valueList	(array)			list of values to output
//
//		@return	(string)	HTML output
//<
output_header : function (fieldNum, field, valueList) {
	return "<TD COLSPAN=" + (valueList.getLength() + 1) + " CLASS='" + this.headerStyle + "'>"+field.value+"</TD>";
},


//>	@method	detailViewer.output_separator()	(A)
//			output a separator field
//		@param	fieldNum		(number)		number of the field to output
//		@param	field		(object)		pointer to the field to output
//		@param	valueList	(array)			list of values to output
//
//		@return	(string)	HTML output
//<
output_separator : function (fieldNum, field, valueList) {
	var width = (field.width == null ? field.defaultSeparatorWidth : field.width),
		height = (field.height == null ? field.defaultSeparatorHeight : field.height)
	;
	return "<TD COLSPAN=" + (valueList.getLength() + 1) + " CLASS='" + this.separatorStyle + "'>"
			+ isc.Canvas.spacerHTML(width, height)
			+ "</TD>";
},


//>	@method	detailViewer.getEmptyMessage()	(A)
//			return the empty message to display when no data was specified
//			this is a function so you can override it in complex cases
//			in simple cases, just returns this.emptyMessage
//
//		@return	(string)	HTML output
//<
getEmptyMessage : function () {
	return this.emptyMessage;
},
getLoadingMessage : function () {
	return this.loadingMessage;
},


//>	@method	detailViewer.emptyMessageHTML()	(A)
//			return the message to show if the list is empty
//
//		@return	(string)	HTML output
//<
emptyMessageHTML : function () {
	return "<TABLE WIDTH=100%>"
			+ "<TR><TD CLASS='" + this.emptyMessageStyle + "' ALIGN=CENTER><BR><BR>"
			+ this.getEmptyMessage()
			+ "<\/TD><\/TR><\/TABLE>";
},

//>	@method	detailViewer.loadingMessageHTML()	(A)
//			return the message to while the data is loading
//
//		@return	(string)	HTML output
//<
loadingMessageHTML : function () {
	return "<TABLE WIDTH=100%>"
			+ "<TR><TD CLASS='" + this.loadingMessageStyle + "' ALIGN=CENTER><BR><BR>"
			+ this.getLoadingMessage()
			+ "<\/TD><\/TR><\/TABLE>";
}



});	// END isc.DetailViewer.addMethods()

// Register stringMethods for this class - instance methods that can be defined as strings using
// specified keywords (replaced by arguments in the function created)
isc.DetailViewer.registerStringMethods({
    
    getCellValue:"record,field",
    formatCellValue:"value,record,field"
});