apibrowser.js

Bindows 1.01 完全版 Bindows 框架提供给你： 基于类的面向对象 API； 一个完整的窗口系统

/*
 * ApiBrowser
 *
 * This is a sample application that creates a tree from the class tree xml
 * file. Selecting an item in the tree changes the source of an iframe. The
 * tree is synced to the src of the iframe
 *
 */

function ApiBrowser() {
	var win = application.getWindow();

	// Set up tabs pane
	this.tabPane = new BiTabPane();
   	this.listpage = new BiTabPage("All classes");
	this.tabPane.add(this.listpage);
   	this.treepage = new BiTabPage("Class Tree");
	this.tabPane.add(this.treepage);

	this.listpage.setBorder( new BiBorder(0) );
	this.treepage.setBorder( new BiBorder(0) );

	this.tabPane.setLocation(0,0);
	this.tabPane.setRight(0);
  	this.tabPane.setBottom(0);
	this.tabPane.setMinimumWidth(200);

	// Set up content pane
	this.iframe = new BiIframe();
	if ( BiBrowserCheck.moz )
		this.iframe.setBorder( new BiBorder( 2, "inset" ) );
	this.iframe.setMinimumWidth(400);

	// Setup split pane
	this.splitPane = new BiSplitPane("horizontal", this.tabPane, this.iframe);
	this.splitPane.setContinuousLayout( false );
	this.splitPane.setLocation(0,0);
	this.splitPane.setRight(0);
	this.splitPane.setBottom(0);
	this.splitPane.setDividerLocation(200);

	win.add(this.splitPane);

	// Add alphabeticized class list to tab pane
	this.classList = new ClassList;
	this.classList.setLocation(0,3);
	this.classList.setBottom(0);
 	this.classList.setRight(0);
 	this.classList.setShowHeaders(false);
	this.classList.addEventListener("change", this.onTreeChange, this);
	this.listpage.add(this.classList);

	// Add hierarcy class list to tab pane
	this.classTree = new ClassTree;
	this.classTree.setLocation(0,3);
	this.classTree.setBottom(0);
 	this.classTree.setRight(0);
	this.classTree.addEventListener("change", this.onTreeChange, this);
	this.treepage.add(this.classTree);

	// Load API TOC
	this._xmlLoader = new BiXmlLoader;
	this._xmlLoader.setAsync(true);
	this._xmlLoader.addEventListener("load", this.onApiLoad, this);
	this._xmlLoader.load(ApiBrowser.CLASS_TREE_PATH);

	// this timer is used to wait a while before changing the iframe src
	// making it easier to navigate the treeu sing the keyboard
	this.selectTimer = new BiTimer(500);
	this.selectTimer.addEventListener("tick", this.onTreeChangeTimer, this);

	this.iframe.addEventListener("load", this.syncSelection, this);
	this.tabPane.addEventListener("change", this.onTabChange, this);

	this.splitPane.addEventListener( "dividerlocationchanged", this.classList.syncSize, this.classList );
	this.splitPane.addEventListener( "dividerlocationchanged", this.classTree.syncSize, this.classTree );

	win.layoutAllChildren();
	win.layoutComponent();
}

ApiBrowser.main = function () { new ApiBrowser(); };

ApiBrowser.prototype.onApiLoad = function ()
{
   // Let the list process the XML
   this.classList.loadFromXmlDocument(this._xmlLoader.getDocument());

   // Let tree process XML
   this.classTree.loadFromXmlDocument(this._xmlLoader.getDocument());
   //this.classTree.setColumnWidths( [this.classTree.getClientWidth()] );
};


ApiBrowser.prototype.onTabChange = function (e) {
	//this.tabPane.getSelected().getFirstChild().syncSize();
};

ApiBrowser.prototype.syncSelection = function () {
	try {	// in case of different domain
		var p = this.iframe.getContentDocument().location.pathname;
		var re = new RegExp("^.*\\/(.+)" + ApiBrowser.API_EXTENSION_RE + "$", "i");
		var className = p.replace(/\\/g, "/").replace(re, "$1")
		var n = this.classTree.findNode(className)
		if (n) {
			this.classTree.removeEventListener("change", this.onTreeChange, this);
			n.reveal();
			n.setSelected(true);
			n.scrollIntoView();
			this.classTree.addEventListener("change", this.onTreeChange, this);
		}
		n = this.classList.findNode(className);
		if (n) {
			this.classList.removeEventListener("change", this.onTreeChange, this);
			n.setSelected(true);
			n.scrollIntoView();
			this.classList.addEventListener("change", this.onTreeChange, this);
		}
	}
	catch (ex) {
		// if failed to to security reason do nothing
	}
};


ApiBrowser.BASE_API_PATH = "../../docs/api/";
ApiBrowser.API_EXTENSION = ".html";
ApiBrowser.API_EXTENSION_RE = "\\.html";
ApiBrowser.CLASS_TREE_PATH = ApiBrowser.BASE_API_PATH + "classtree.xml";

/*
ApiBrowser.BASE_API_PATH = "../../docs/apixml/";
ApiBrowser.API_EXTENSION = ".xml";
ApiBrowser.API_EXTENSION_RE = "\\.xml";
ApiBrowser.CLASS_TREE_PATH = ApiBrowser.BASE_API_PATH + "classtree.xml";
*/


ApiBrowser.prototype.onTreeChange = function (e) {
	this.selectTimer.start();	// stops a running timer
        this.useCtl = e.getTarget();
};

ApiBrowser.prototype.onTreeChangeTimer = function (e) {
	this.selectTimer.stop();

	var item = this.useCtl.getSelectedClass();

        if (item)
		this.iframe.setSrc(ApiBrowser.BASE_API_PATH + item +
						   ApiBrowser.API_EXTENSION);
};

/**
 * ClassTree extends BiTree
 *
 */

function ClassTree() {
	BiTree.call(this);
	this.setColumnCount(1);
	this.setIndentColumn(0);
	this.setIconColumn(0);
	this.setColumnWidths([200]);
	this.setColumnOrders([0]);
	this.setShowHeaders(false);
	this.setMinimumWidth(200);
	this.setOverflowX("hidden");
	this.setOverflowY("scroll");
	this.addEventListener( "create", function ( e )
	{
		this.syncSize();
		this.updateData();	// sync size will update columns
	} );
};

var _p = ClassTree.prototype = new BiTree;

_p.loadFromXmlDocument = function (oDoc) {
	if (oDoc == null || oDoc.documentElement == null) {
		alert("Error loading tree");
		return;
	}

	var cs = oDoc.documentElement.childNodes;
	var l = cs.length;
	for (var i = 0; i < l; i++) {
		if (cs[i].nodeType == 1)
			this._buildNodeFromElement(cs[i], this);
	}

	if ( this.getCreated() )
	{
		this.updateData();
	}
};

// creates a BiTreeNode from an XmlElement and adds that to the tree
_p._buildNodeFromElement = function (oElement, oParentNode) {
	var treeNode = new BiTreeNode([oElement.getAttribute("name")]);
	oParentNode.addNode(treeNode);
	var cs = oElement.childNodes;
	var l = cs.length;
	for (var i = 0; i < l; i++) {
		if (cs[i].nodeType == 1)
			this._buildNodeFromElement(cs[i], treeNode);
	}
};

_p.syncSize = function ()
{
	if (this.getParent().getSelected() && this.getCreated())
	{
		this.setColumnWidths([this.getClientWidth()]);
	}
};

_p.findNode = function (sClassName) {
	var ns = this.getNodes();
	var n;
	for (var i = 0; i < ns.length; i++) {
		n = ClassTree._findNode(sClassName, ns[i]);
		if (n)
			return n;
	}
	return null;
};

ClassTree.findNode = function (sClassName, oNode) {
	var ns = oNode.getNodes();
	var n;
	for (var i = 0; i < ns.length; i++) {
		n = ClassTree._findNode(sClassName, ns[i]);
		if (n)
			return n;
	}
	return null;
};

ClassTree._findNode = function (sClassName, oNode) {
	if (oNode.getData(0) == sClassName)
		return oNode;
	return ClassTree.findNode(sClassName, oNode);
};

_p.getSelectedClass = function()
{
   return this.getSelectedNodes()[0].getData(0);
};

/**
 * Class list
 */
function ClassList()
{
	BiGrid.call(this);

	this.setColumnNames(["Class"]);
	this.setColumnCount(1);
	this.setIconColumn(0);
	this.setSelectionMode("row");
	this.setOverflowX("hidden");
	this.setOverflowY("scroll");
	this.addEventListener( "create", function ( e )
	{
		this.syncSize();
		this.updateData();	// sync size will update columns
	} );
};

var _p = ClassList.prototype = new BiGrid;

_p.loadFromXmlDocument = function(aDoc)
{
   var lClassNodes = aDoc.selectNodes("//class");
   for(var i=0; i<lClassNodes.length; i++)
   {
      lClassRow = new BiGridRow([lClassNodes[i].getAttribute("name")]);
      this.addRow(lClassRow);
   }

   this.sort(0,true);
   this.syncSize();
   this.updateData();
};

_p.getSelectedClass = function()
{
   return this.getSelectedRow().getCell(0).getData();
};

_p.syncSize = function ()
{
	// only update if parent is selected
	if ( this.getParent().getSelected() && this.getCreated() )
		this.setColumnWidths([this.getClientWidth()]);
};

_p.findNode = function (sClassName) {
	var ns = this.getRows();
	for (var i = 0; i < ns.length; i++) {
		if (ns[i].getData(0) == sClassName)
			return ns[i];
	}
	return null;
};