您的位置:首页 > 产品设计 > UI/UE

js玩具——UI组件:View UI公共基类

2011-09-19 17:12 267 查看
/*
*  UI公共基类
*  定义UI基础属性。所有页面UI继承此类,完成页面显示。
*   author: 吴安国
*  version: 1.0
*/
function View() {

//弹出式菜单 PopupMenu
this.popupMenu = null;

//父element View
this.parent = null;

//事件监听器列表
this.eventListeners = new EventCache();

this.addPropertyChangeListener(new PropertyChangeEventListenerImpl());
};

/**
* 获取htmlUI
* @return HtmlUI
*/
View.prototype.getHtmlUI = function() {
return this.htmlUI;
};

/**
* 设置背景色
* @param color 颜色
*/
View.prototype.setBackgroundColor = function(color) {
this.firePropertyChangeHandle("BackgroundColor", color);
};

/**
*  设置大小
*  @param width,height:宽度和高度 or Dimension:尺寸大小 *
*/
View.prototype.setSize = function() {
var dimension = null;
if(arguments.length === 1 && arguments[0] instanceof Dimension) {
dimension = arguments[0];
} else if(arguments.length === 2) {
dimension = new Dimension(arguments[0], arguments[1]);
} else {
throw new Error("setSize方法参数错误!");
}
this.firePropertyChangeHandle("Size", dimension);
};

/**
*  设置位置
*  @param x,y:x坐标和y坐标 or Point:坐标
*
*/
View.prototype.setPoint = function() {
var point = null;
if(arguments.length === 1 && arguments[0] instanceof Point) {
point = arguments[0];
} else if(arguments.length === 2) {
point = new Point(arguments[0], arguments[1]);
} else {
throw new Error("setPoint方法参数错误!");
}
this.firePropertyChangeHandle("Point", point);
};

/**
* 设置定位方式
* @param position 定位方式:static、absolute、relative
*/
View.prototype.setPosition = function(position) {
this.firePropertyChangeHandle("Position", position);
};

/**
* @param float left or right
*/
View.prototype.setFloat = function(float) {
this.firePropertyChangeHandle("Float", float);
};

/**
* 设置边框
* @param border 边框
*/
View.prototype.setBorder = function(border) {
this.firePropertyChangeHandle("Border", border);
};

/**
* 设置外边距
* @param margin 外边距
*/
View.prototype.setMargin = function(margin) {
this.firePropertyChangeHandle("Margin", margin);
};

/**
* 设置内边距
* @param padding 内边距
*/
View.prototype.setPadding = function(padding) {
this.firePropertyChangeHandle("Padding", padding);
};

/**
* 设置文字高度
* @param lineHeight 文字高度
*/
View.prototype.setLineHeight = function(lineHeight) {
this.firePropertyChangeHandle("LineHeight", lineHeight);
};

/**
* 设置字体
* @param font 字体
*/
View.prototype.setFont = function(font) {
this.firePropertyChangeHandle("Font", font);
};

 

/**
*  添加属性改变事件监听
*   @param propertyChangeListener 属性改变事件监听器
*/
View.prototype.addPropertyChangeListener = function(propertyChangeListener) {
if(!(propertyChangeListener instanceof PropertyChangeEventListener)) {
throw new Error("类型转换错误," + propertyChangeListener + " 不是PropertyChangeEventListener类型");
} else {
this.addEventListener(EventObject.EVENT_PROPERTYCHANGE, propertyChangeListener);
}
};

/**
* 设置显示文字
* @param text 显示文字
*/
View.prototype.setText = function(text) {
this.firePropertyChangeHandle("Text", text);
};

/**
* 设置文字颜色
* @param color 文字颜色
*/
View.prototype.setColor = function(color) {
this.firePropertyChangeHandle("Color", color);
};

/**
* 设置指针外观
* @param cursor
*/
View.prototype.setCursor = function(cursor) {
this.firePropertyChangeHandle("Cursor", cursor);
};

/**
* 设置运行时model
* @param model
*/
View.prototype.setModel = function(model) {
this.model = model;
};

/**
* 获取运行时model
* @param model
*/
View.prototype.getModel = function() {
return this.model;
};

/**
* 添加键盘事件监听
* @param keyEventListener 键盘事件监听器
*/
View.prototype.addKeyEventListener = function(keyEventListener) {
if(!(keyEventListener instanceof KeyEventListener)) {
throw new Error("类型转换错误," + keyEventListener + " 不是KeyEventListener类型");
} else {
this.addEventListener(EventObject.EVENT_KEY, keyEventListener);
}
};

/**
* 添加鼠标事件监听
* @param mouseEventListener 鼠标事件监听器
*/
View.prototype.addMouseEventListener = function(mouseEventListener) {
if(!(mouseEventListener instanceof MouseEventListener)) {
throw new Error("类型转换错误," + mouseEventListener + " 不是MouseEventListener类型");
} else {
this.addEventListener(EventObject.EVENT_MOUSE, mouseEventListener);
}
};

/**
* 添加事件监听
* @param type 事件类型
* @param eventListener 事件监听器
*/
View.prototype.addEventListener = function(type, eventListener) {
this.eventListeners.addEventListener(type, eventListener);
};
 
/**
*  执行属性改变事件
*  @param propertyName 属性名称
*  @param newValue 属性值
*/
View.prototype.firePropertyChangeHandle = function(propertyName, newValue) {
var propertyChangeEvent = new PropertyChangeEvent(this, propertyName, newValue);

var propertyChangeListeners = this.eventListeners.getEventListener(EventObject.EVENT_PROPERTYCHANGE);
var propertyChangeListener = null;
for(var i = 0; i < propertyChangeListeners.size(); i++) {
propertyChangeListener = propertyChangeListeners.get(i);

//执行事件
propertyChangeListener.propertyChange(propertyChangeEvent);
}
};

/**
*  执行鼠标事件
*  @param propertyName 属性名称
*  @param newValue 属性值
*/
View.prototype.fireMouseHandle = function(eventType, button) {
var mouseEvent = new MouseEvent(this, eventType, button);

var mouseEventListeners = this.eventListeners.getEventListener(EventObject.EVENT_MOUSE);
var mouseEventListener = null;
for(var i = 0; i < mouseEventListeners.size(); i++) {
mouseEventListener = mouseEventListeners.get(i);

//执行事件
mouseEventListener.mouseOpt(mouseEvent);
}
};


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ui function border float button