UAP 从前端到后端 详细教程 (三) WebLet里的代码

直接上代码了,这里是 一个比较 简单的 weblet 增删改查的 表单.

项目名为 holiday ,weblet 也叫 holiday.

主要代码在 模块 holiday-basic 里.

我 的数据库 里也有 holiday 这个表.

字段是:

MainView 是列表视图(点击新增时触发事件,弹出的对话框),DetailView 是表单视图

提一点,访问 weblet 的 默认地址是, ip:port/项目名/模块名/weblet名/index.jsp

例如: http://localhost:9000/holiday/holiday-basic/holiday/index.jsp

先放 项目截图:

 ------------------------------------------------------ ------------------------------------------------------ ------------------------------------------------------

MainView.js

$ns("holiday.views");

$import("mx.controls.ToolBar");
$import("mx.datacontrols.DataGrid");

holiday.views.MainView = function() {
	// 这里有一部分,是自动生成的 
	var me = $extend(mx.views.View);
	var base = {};

	me.dataGrid = null;

	base.init = me.init;
	me.init = function() {
		base.init();

		_initControls();
	};

	function _initControls() {
		/* 初始化 ToolBar,这里是 显示出页面的 工具栏,items 里的字段是自定义的 */
		me.toolBar = new mx.controls.ToolBar({
			width : "100%",
			items : [ {
				name : "new",
				text : "添加记录",
				// mx.msg("NEW")跟 直接写 "新建" 效果一样
				toolTip : mx.msg("NEW"),
				// 这是框架自带 图片,可以自己指定
				imageKey : "add",
				// me.controller._btnNew_onclick 是你自己写的,要在 MainViewController 
				// 里面有这个方法,方法实现 你自己写
				onclick : me.controller._btnNew_onclick
			}, "-", {
				name : "delete",
				text : "删除记录",
				toolTip : mx.msg("DELETE"),
				imageKey : "delete",
				onclick : me.controller._btnDelete_onclick
			}, "-", {
				name : "edit",
				text : mx.msg("EDIT"),
				toolTip : mx.msg("EDIT"),
				imageKey : "edit",
				onclick : me.controller._btnEdit_onclick
			} ]
		});

		me.addControl(me.toolBar);
		 var gridEntity = new mx.datacontainers.GridEntityContainer({
		 // ~/rest 是代表本项目地址
		// 这个 URL 是 你向 后台获取数据 生成表单的 地址,后台会有对应的 方法,返回数据
		 baseUrl : holiday.mappath("~/rest/holiday/list"),
		 // primariy 在这里 和下面 写效果一样都是,ID 这列被隐藏
		// primaryKey : "ID",
		 loadMeta : false
		 });
		/* 初始化 DataGrid */
		me.dataGrid = new mx.datacontrols.DataGrid({
			displayCheckBox : true,
			allowEditing : false,
			//这里指定了 容器实体(entityContainer),就只需要在 entityContainer 写 url 就可以了
			entityContainer : gridEntity,
			//  指定主键列名,指定的 ID 在 列表中会被隐藏
			//primaryKey : "ID",
			// 这个 height 不写,会默认 100% 
			// 然后... 翻页的工具就会被隐藏.所以一定要自己写下这个
			height:"60%",
			// 默认的一页显示多少条记录
			pageSize: 5,
			// 一页最多显示 多少条记录 ,这里指定了 5 10 15 20 这几个选项
			pageSizeOptions : [ 5, 10, 15, 20 ],
			// 这下面几个属性,只是做 微调用的 ,没什么重要性
			enableCellTip : true,// 是否显示单元格title提示
			displayColSplitLine: false,
		    autoWrap : true,
		    
			//  设置显示列的字段,也就是 每一列 最上面那个
			columns : [{
				name : "ID", // 这个就是上面指定的 	primaryKey : "ID",
				caption : "请假编号",
				readOnly : true,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "100"
			},{
				name : "USERID",
				caption : "请假员工编号",
				readOnly : true,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "100"
			}, {
				name : "REQUEST_DATE",
				caption : "申请发起日",
				readOnly : true,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "100"

			}, {
				name : "REQUEST_REASON",
				caption : "请假理由",
				readOnly : false,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "135"

			}, {
				name : "REQUEST_DAYS",
				caption : "假期申请号",
				readOnly : true,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "100"

			}, {
				name : "APPROVER_UID",
				caption : "审批人编号",
				readOnly : false,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "100"

			}, {
				name : "STATE",
				caption : "审批状态",
				readOnly : false,
				editorType : "TextEditor",
				align : "center",
				dataAlign : "center",
				width : "100"
			} ],
			//  设置查询条件。
			searchBox : new mx.datacontrols.DataGridSearchBox({
				fields : [
				         //这里是查询栏,字段自定义.我这里没写.页面也就不会显示出来
				]
			})
		});
		//下面 是自动生成的 不必管它
		me.addControl(me.dataGrid);

		me.on("activate", me.controller._onactivate);
	}

	return me.endOfClass(arguments);
};

MainViewController.js

$ns("holiday.views");
$import("holiday.views.MainView");
$import("holiday.views.DetailViewController");

holiday.views.MainViewController = function()
{
    var me = $extend(mx.views.ViewController);
    var base = {};
    
    me.getView = function()
    {
        if (me.view == null)
        {
            me.view = new holiday.views.MainView({ controller: me });
        }
        return me.view;
    };
    
    me._onactivate = function(e)
    {
        // 窗体**时的逻辑。
	if (me.view != null && typeof(me.view.dataGrid) != "undefined")
	{
 	    me.view.dataGrid.load();
	}	
    };
    
    /** 点击删除时的逻辑 */
    me._btnDelete_onclick = function(){
    	//被选定的主键ID
        //me.view.dataGrid.removeItems(me.view.dataGrid.getCheckedIDs());
        var param_data = me.view.dataGrid.getCheckedIDs();
        if (param_data.length<1) {
			mx.indicate('info','请先选择记录');
		}else {
			me.view.dataGrid.removeItems(param_data);
			mx.indicate('info','删除成功');
		}
    };
    /** 创建几个新建表单时要用的变量 */
    var deView = null;
    var deViewController = null;
    var deWin = null;
    /** 创建表单的函数 */
    var createDeView = function(flag_inf){
    	if (deViewController==null) {
			console.log('try to define a Controller');
			deViewController = new holiday.views.DetailViewController();
		}
    	deView = deViewController.getView();
    	// 改变了 objID 使用 Detail 使用 remote 获取数据直接向后台传递ID 值
    	deView.objID = flag_inf;
    	console.log('create over');
    }
    
    //下面两个事件是 MainView 里面  工具栏 里的 点击方法实现
    /** 点击新建时的逻辑 */
    me._btnNew_onclick = function(){
    	/** 新建的标识参数,新建 和编辑 都是用一个 DetailView
    	 *  用 这个参数区分 是 新建还是 编辑
    	 *  objID 会在 Detail 获取数据时被加入到 请求中 */
    	// 点击新建的 请求url 这里 我换行了
    	// http://localhost:9000/holiday/holiday-basic/rest/holiday/info/new
    	// ?rnd=7096021947873800&params={"columns":"ID,USERID,REQUEST_DATE,REQUEST_REASON,
    	 // REQUEST_DAYS,APPROVER_UID,STATE"}&_=1532837278101
    	var flag_inf = 'new';
		// 调用下弹窗函数
		createDeView(flag_inf);
		/** 给deWin 赋值,把表单视图作为参数  */
		/** 获取上下文,窗体管理,创建表单视图 参数为创建的表单 */
		deWin = me.getContext().windowManager.createFromView(deView);
		/** 可再次使用 true */
		deWin.reusable = true;
		/** 关闭事件 */
		deViewController.closeWin = function(){
			deWin.close();
			me.view.dataGrid.load();
		};
		/** 将当前窗口以独占对话框的形式打开。该方法会依次触发 onactivate 和 onshown 事件。 */
		deWin.showDialog();
	
    };
    
    
    var _detailView = null;
    var _win = null;
    /** 点击编辑时的逻辑 */
    me._btnEdit_onclick = function(){
    	
    	/** 默认新建 增加 一条 数据格 (dataGrid) */
    	// 被选中的 那一条数据对象
    		console.log(me.view.dataGrid.selection);
    		// 选择的 与字段相应的数据对象
    		//console.log(me.view.dataGrid.selection.values);
    	// 被选中的所有数据对象数组  >> 该数组不是勾选项的集合。
    		console.log(me.view.dataGrid.selections);
    		
    		console.log(me.view.dataGrid.getCheckedIDs());
    		console.log(me.view.dataGrid.getCheckedItems());
    		// 勾选的 与字段相应的数据对象
    		//console.log(me.view.dataGrid.getCheckedItems.values);
    	//me.view.dataGrid.appendItem();
    		
    	var checked_ids = me.view.dataGrid.getCheckedIDs();
    	//console.log(Select_values)
    	if (checked_ids !=null && checked_ids.length==1) {
    		var flag_inf = me.view.dataGrid.getCheckedItems()[0].values.ID;
    		// 调用下弹窗函数
    		createDeView(flag_inf);
    		/** 给deWin 赋值,把表单视图作为参数  */
    		deWin = me.getContext().windowManager.createFromView(deView);
    		/** 可再次使用 true */
    		deWin.reusable = true;
    		
    		deViewController.closeWin = function(){
    		deWin.close();
    		me.view.dataGrid.load();
    		};
    		/** 将当前窗口以独占对话框的形式打开。该方法会依次触发 onactivate 和 onshown 事件。 */
    		deWin.showDialog();
		}else{
			mx.indicate('info','您的选择有误');
		}
    };
    
    return me.endOfClass(arguments);
};

这里贴一张 效果图片,下篇 贴 DetailView (表单)的代码.

其中 会显示,请假编号 这一列 ,是我 注释掉了 primaryKey: "ID" 的效果

DetailView (弹出表单的代码见 下一篇)