普元EOS开发总结—

目前在一家公司实习，公司用的就是普元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>

普元EOS开发总结——前端框架相关推荐

普元EOS开发积累第一篇（常见错误解决方法）持续更新
普元EOS开发积累第一篇(常见错误解决方法) 持续更新参考文章: (1)普元EOS开发积累第一篇(常见错误解决方法) 持续更新 (2)https://www.cnblogs.com/tangjing ...
普元eos开发手册_名词解释--统一应用(开发)平台Unified Application Platform
国内有些企业项目开发当中,可能会遇到UAP的概念,UAP指的是Unified Application Platform,即统一应用平台. UAP,简单的理解,就是公司层面,统一的技术平台,涉及整个公司 ...
普元EOS开发学习（一）
EOS开发和原有的JAVA开发有很大的不同,在开发的过程中,只能看到JSP页面的源代码,如果想要了解到操作类型的代码,那么你只能看到XML文件中的数据和值. EOS开发的基本流程:数据准备--> ...
14个适合后台管理系统快速开发的前端框架
1.D2admin 开源地址:https://github.com/d2-projects/d2-admin 文档地址:https://d2.pub/zh/doc/d2-admin/ 效果预览:htt ...
WEB开发之前端框架搭建-庞永旺-专题视频课程
WEB开发之前端框架搭建-34人已学习课程介绍本课程主要教大家如何整理出常用的代码,编写前端常用的功能,课程的最大亮点就是数据模板的使用,此数据模板均为本人原创,此数据模板也经过几 ...
普元 EOS Platform 7.6 集群部署在BES9.5.2.4692，重启集群节点偶发报错：java.util.ConcurrentModificationException
[问题描述] 普元EOS Platform 7.6 集群部署在BES9.5.2.4692,重启集群节点偶发报错: [com.primeton.runtime.resource.impl.Contrib ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
java开发平台普元_java开发平台的两种实现模式
从目前国内主流的java开发平台看,主要有两种实现模式:引擎模式及生成源代码模式.引擎模式比较有代表性的是华丹平台(https://www.huadaninfo.com),生成源代码模式比较有名是的普 ...
普元EOS/BPS为什么没有安装成功？
原文连接在实际的Platform/BPS的产品安装使用中,经常会遇到安装不成功的场景,运行版不成功多于开发版,运行版中集群安装不成功又多于单机版.手工部署安装问题也会多于安装介质的安装.下面说明一下 ...
普元eos使用svn_普元DevOps介绍
普元DevOps是通过工具链与集成.发布.反馈与优化进行端到端整合,完成无缝的跨团队.跨系统协作.其目标是建立开发与运维之间的桥梁,履行开发运维协作.自动化.基础设施即代码.持续集成.持续测试.持续发 ...

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

普元EOS开发总结——前端框架相关推荐

最新文章

热门文章