普元EOS开发总结——前端框架

最新推荐文章于 2024-04-04 11:35:25 发布

淡年华零

最新推荐文章于 2024-04-04 11:35:25 发布

阅读量4.5k

点赞数 3

分类专栏：普元EOS 文章标签：普元EOS

本文链接：https://blog.youkuaiyun.com/weixin_44415209/article/details/114867235

版权

普元EOS 专栏收录该内容

2 篇文章

订阅专栏

目前在一家公司实习，公司用的就是普元EOS开发，一种之前没有见过的java框架，全新的设计理念，刚开始学习也是很不适应，也有很多东西也不理解，从网上找一些教程和博客的资源也比较少，所以我就记录一下自己学习普元的经验，近期都会不间断更新。
我想先展示一下普元自带的一些前端框架，普元有两个版本，一个是richWEB，一个是NUI，NUI版本可以调用普元的一些集成的应用于表单的一些控件，下面展示一下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false" %>
<%@include file="/common/common.jsp"%>
<%@include file="/common/skins/skin0/component.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- 
  - Author(s): admin
  - Date: 2021-03-15 10:09:05
  - Description:
-->
<head>
<title>表单控件</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script>
  
</head>
<body>
  <h4>Only Text</h4>
    <a class="nui-button" onclick="onClick" enabled="false" >增加</a>
    <a class="nui-button" onclick="onClick" >修改</a>
 
    <h4>Text and Icon</h4>
    <a class="nui-button" iconCls="icon-add" onclick="onClick" >增加</a>
    <a class="nui-button nui-button-iconRight" iconCls="icon-edit" onclick="onClick" >修改</a>
 
    <h4>Only Icon</h4>
    <a class="nui-button" iconCls="icon-add" onclick="onClick"></a>
    <a class="nui-button" iconCls="icon-edit" onclick="onClick"></a>
 
    <h4>Plain</h4>
    <a class="nui-button" plain="false" iconCls="icon-add" onclick="onClick">增加</a>
    <a class="nui-button" plain="true" iconCls="icon-edit" onclick="onClick">修改</a>
    <a class="nui-button" plain="true" iconCls="icon-remove" onclick="onClick">删除</a>
 
    <h4>Icon Position</h4>
    <a class="nui-button nui-button-iconTop" iconCls="icon-add" onclick="onClick" >增加</a>
    <a class="nui-button nui-button-iconTop" iconCls="icon-edit" onclick="onClick" >修改</a>
 
    <h4>A Link</h4>
    <a class="nui-button" href="http://www.google.com">Google</a>
    <a class="nui-button" href="http://www.baidu.com">Baidu</a>
     <h4>菜单按钮</h4>
    <a class="nui-menubutton" menu="#popupMenu" >选择...</a>
 
    <ul id="popupMenu" class="nui-menu" style="display:none;">
        <li>
            <span >操作</span>
            <ul>
                <li iconCls="icon-new" onclick="onItemClick">新建</li>
                <li class="separator"></li>
                <li iconCls="icon-add" onclick="onItemClick">增加</li>
                <li iconCls="icon-edit" onclick="onItemClick">修改</li>
                <li iconCls="icon-remove" onclick="onItemClick">删除</li>
                
            </ul>
        </li>
        <li class="separator"></li>
        <li iconCls="icon-open" >打开</li>
        <li iconCls="icon-remove" >关闭</li>
    </ul>
       <h4>工具栏按钮</h4>
    <div class="nui-toolbar">
    <a class="nui-button" iconCls="icon-add">增加</a>
    <a class="nui-button" iconCls="icon-edit">修改</a>
    <a class="nui-button" iconCls="icon-remove">删除</a>
    <span class="separator"></span>
    <a class="nui-button" plain="true">增加</a>
    <a class="nui-button" plain="true">修改</a>
    <a class="nui-button" plain="true">删除</a>
    <span class="separator"></span>
    <input class="nui-textbox" />
    <a class="nui-button" plain="true">查询</a>
</div>
 <h4>文本输入框</h4>
单行输入框：<input class="nui-textbox" value="0" /> <br /><br />
密码输入框：<input class="nui-password" value="12345"  /> <br /><br />
多行输入框：<input class="nui-textarea" value="中国"  /> <br />
 <h4>下拉选择框</h4>
 <input id="combo1" class="nui-combobox" style="width:150px;" textField="text" valueField="id"
    url="../data/countrys.txt" dataField=countrys value="cn" showNullItem="true" />
 <h4>多选 + 多列</h4>
<div class="nui-combobox" style="width:300px;"  popupWidth="300" textField="text" valueField="id"
    url="../data/countrys.txt" dataField=countrys value="cn,usa" multiSelect="true"  >
    <div property="columns">
        <div header="ID" field="id"></div>
        <div header="国家" field="text"></div>
    </div>
</div><br>
<h4>联动选择：ComboBox</h4>
<span>部门</span><br />
<input id="deptCombo" class="nui-combobox" style="width:150px;" textField="name" valueField="id"
    onvaluechanged="onDeptChanged" url="org.gocom.components.nui.demo.newdataset.impl.TDepartment.getDepartment.biz.ext"
    dataField="department" showNullItem="true"
        />
<br /><br />
<span>职位</span><br />
<input id="positionCombo" class="nui-combobox" style="width:150px;" textField="name" valueField="id" />

<h4>日期选择框</h4>
<input id="date1" class="nui-datepicker"  />
<input id="date2" class="nui-datepicker" style="width:200px;" format="yyyy-MM-dd H:mm" showTime="true" />

<h4>数字输入框</h4>
<input id="sp1" class="nui-spinner"  minValue="200" maxValue="250"/>
	
<h4>树形选择框</h4>
<input id="select1" class="nui-treeselect" url="../data/listTree.txt"
    textField="text" dataField="treeNodes" valueField="id" parentField="pid"/>
    
<h4>输入智能提示框</h4>
<input id="tbl1" class="nui-autocomplete" required="true" style="width:200px;"
    valueField="id" textField="text" url="org.gocom.components.nui.demo.TCountry.queryCountry.biz.ext"
    dataField="countrys" value="cn" text="中国"
/>
<h4>复选框</h4>	
<div id="ck1" name="product" class="nui-checkbox" checked="true" text="NUI CheckBox" ></div>

<h4>列表控件</h4> 
<div id="listbox1" class="nui-listbox" style="width:150px;height:100px;"
    textField="text" dataField="countrys" valueField="id"
    url="../data/countrys.txt">
</div>
<h4>多列列表控件</h4> 
<div id="listbox2" class="nui-listbox" style="width:400px;height:120px;"
    value="cn" onvaluechanged="onListBoxValueChanged"
    url="../data/countrys.txt" dataField="countrys" showCheckBox="true" multiSelect="true" >
    <div property="columns">
        <div header="ID" field="id"></div>
        <div header="国家" field="text"></div>
    </div>
</div>

<h4>复选框组</h4> 
<div id="cbl1" class="nui-checkboxlist" repeatItems="1" repeatLayout="table"
    textField="text" valueField="id" value="cn,usa" onload="onLoad"
    url="../data/countrys.txt" dataField="countrys"  >
</div>

<h4>单选框组</h4> 
<div id="rbl" class="nui-radiobuttonlist" repeatItems="2" repeatLayout="table" repeatDirection="vertical"
    textField="text" dataField="countrys" valueField="id" value="cn"
    url="../data/countrys.txt" >
</div>
<h4>文件上传控件</h4> 
<input id="fileupload1" class="nui-fileupload" name="Fdata" limitType="`*.txt`"
    flashUrl="swfupload/swfupload.swf"
    uploadUrl="upload.jsp"
    onuploadsuccess="onUploadSuccess"
    />

	<script type="text/javascript">
    	nui.parse();

    </script>
</body>
</html>

对应界面展示：
在这里插入图片描述

这里需要注意几点：

1.在最开始需要引用这两个组件，才能调用普元的控件

<%@include file="/common/common.jsp"%>
<%@include file="/common/skins/skin0/component.jsp"%>

2 url="…/data/countrys.txt" 这个文件是放在D:\EOS\Developer\apache-tomcat-7.0.94\webapps\default 这个目录下的data文件夹下的

3.要是想要写js代码，必须要写这段代码：

 <script type="text/javascript">
    	nui.parse();    
 </script>