用户想查看通知公告，同时通知公告是以列表详细展示，列表界面带有用户自定义上传的图标。在此处，由于使用的场景不同。前端UI2 使用两种方式展示，BizData和Baas。
1 内网系统存在只有系统内的用户可以查看的数据， 此时用户必须登录之后才能查看，使用BizData
2 还有一种业务场景，信息是发布到公网，不需要登录，公众用户可以直接查看，此时不需要用户登录。使用Baas
那么信息维护的界面是系统管理员维护，使用统一的维护界面。维护界面是需要登录系统的所以直接使用UI2 的BizData 做的，同时组件blobImage 只支持BizData
X5 中维护的界面如下。
X5 前端UI2 支持使用BizData，Baas ，cdata(不描述)
需要登录的页面UI2 的展示效果：
公众页面，不需要登录的页面UI2 的展示效果。实际上使用Baas做页面展示，图片显示的时候 需要使用BaasService获取Blob字段返回InputStream来显示。
其实从界面展示的实际效果来看根本就没有设么区别，都是列表显示，列表前面带有自定义图标。
那么下面重点贴出 对于blobImage 组件上传图片存在数据库表中的一个blob类型的字段中。
在X5 中blbo类型字段的值需要自己实现获取字段
那么在需要登录的界面如何获取blob字段，并且通过image展示出来呢？
主要使用了list组件做列表，那么blob在image中显示使用的代码如下
<div component="$UI/system/components/justep/list/list" class="x-list"
data="applicationResult" limit="-1" xid="list1" style="overflow: auto;height:calc(100% - 150px);">
<ul class="x-list-template resourcesDialogUL" xid="listTemplateUl1">
<!-- bind-style="{'background-color':$object===$model.newsData.getCurrentRow() ? '#428bca':''}" -->
<li xid="li1" class="media" bind-click="selectRowClick">
<div xid="mediaLeft2" class="media-left">
<img src="" alt="" xid="image4" class="img-rounded" bind-attr-src="$model.setImg($object, $element)"/>
</div>
<div class="media-body media-body-cus" xid="mediaBody2" bind-click="mediaBody2Click">
<div component="$UI/system/components/bootstrap/row/row" class="row"
xid="row1">
<div class="col col-xs-6" xid="col2">
<h4 class="media-heading serviceName" xid="h42" bind-text="ref("SERVICE_NAME")"><![CDATA[服务名称]]></h4>
</div>
<div class="col col-xs-3" xid="col3">
<div xid="div1">
<span xid="span2"><![CDATA[申请时间：]]></span>
<span xid="span7" bind-text="$model.applyTimeformatDate($object)"/>
</div>
</div>
<div class="col col-xs-3" xid="col4">
<div xid="div2">
<span xid="span8">审批时间：</span>
<span xid="span9" bind-text="$model.approvalTimeformatDate($object)"/>
</div>
</div>
</div>
<div xid="div4">
<span xid="span15" bind-text="ref("DESCRIPTION")" class="cus_des"/>
</div>
</div>
<div class="media-right" xid="mediaRight2">
<div component="$UI/system/components/justep/button/buttonGroup"
class="btn-group" tabbed="true" xid="buttonGroup4" style="width:72px;">
<a component="$UI/system/components/justep/button/button"
class="btn btn-link" label="测试" xid="button3" onClick="testBtnClick"
style="display:inline-block;" icon="dataControl dataControl-format">
<i xid="i7" class="dataControl dataControl-format"/>
<span xid="span16">测试</span>
</a>
</div>
</div>
</li>
</ul>
</div>
2 setImg 方法代码如下：
Model.prototype.setImg = function(row, element) {
var loginDate = new Date();
var fid = row.val("fServiceID");
var imageAvatar = getImageAvatar(fid, loginDate.getTime());
$(element).one('error', function() {
$(this).attr('src', defaultAvatar);
});
return imageAvatar;
};
```
getImageAvatar 方法如下
```var getImageAvatar = function(personID, lastModified) {
var params = {
process : '/natures/service/process/serviceBrowsing/serviceBrowsingProcess',
activity : 'mainActivity',
action : 'blobDownloadAction',
blobDataModel : '/natures/service/data', //要查询的blob字段所在的data
blobConcept : 'NA_ServiceRegister', //要查询的blob字段对应的概念名称
blobRelation : 'fServiceImage',//要查询的blob字段对应的字段名称
blobConceptValue : personID,//对应的blob所在的概念的主键的 取值的字段。其实可以理解成 where条件后面的值。
$lastModified : lastModified
};
var url = new justep.URL(require.toUrl("$UI/system/components/justep/blob/server/download.j"));
//$UI/system/components/justep/blob/server/download.j 系统字段的
url.setParam(params);
return url.toString();
};
blobDownloadAction 这个是系统自带的action 返回InputStream
public static InputStream query(String blobDataModel, String blobConcept, String blobRelation, String blobConceptValue) throws Exception {
return BlobUtils.query(blobDataModel, blobConcept, blobRelation, blobConceptValue);
}
在不能直接调用Action，不需要登录的界面要显示带blob 的列表。此时我们需要自己动手写service。然后前端调用baasService
使用baas data 做的带显示blob的list 上面的差不多，代码如下
<ul component="$UI/system/components/justep/list/list" class="x-list x-list-template bdc-news-list"
xid="list3" data="tzggList">
<li xid="li2" bind-click="openDetial">
<div xid="mediaLeft2" class="media-left">
bind-attr-src="$model.setImg($object, $element)" alt="" xid="showImage" class="img-rounded"
/>
</div>
<div class="media-body media-body-cus" xid="mediaBody2" >
<a bind-text="val("FTITLE")" xid="a1"/>
<span bind-text="val("FOPENTIME")" xid="span5"/>
</div>
</li>
</ul>
setImg 方法如下
Model.prototype.setImg = function(row, element) {
var loginDate = new Date();
var fid = row.getID();
var imageAvatar = this.getImageAvatar(fid);
return imageAvatar;
};
getImageAvatar 方法如下：
Model.prototype.getImageAvatar = function(FID) {
var self=this;
debugger;
var showImage = this.getElementByXid("showImage");
var url = window.location.origin+require.toUrl("/baas/taszrzy/tzgg/getBlobColumn?FID=" + FID);
return url;
};
其中 getBlobColumn 是自己定义的一个baasService 如下
package taszrzy;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.sql.Blob;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.naming.NamingException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONObject;
import com.justep.baas.Utils;
import com.justep.baas.action.ActionContext;
public class Tzgg {
public static JSONObject getBlobColumn(JSONObject params, ActionContext context) throws Exception,ServletException, IOException {
HttpServletRequest request = (HttpServletRequest)context.get(ActionContext.REQUEST);
HttpServletResponse response = (HttpServletResponse)context.get(ActionContext.RESPONSE);
if(request.getMethod().equals("GET")){
doGet(request, response,params, context);
}
return null;
}
/**
get为获取文件 浏览或者下载
* @throws NamingException
* @throws SQLException
**/
private static void doGet(HttpServletRequest request, HttpServletResponse response,JSONObject params,ActionContext context)
throws ServletException, IOException, SQLException, NamingException {
getFile(request,response,params, context);
}
private static final int BUFFER_SIZE = 32768 * 8;
private static void getFile(HttpServletRequest request,
HttpServletResponse response,JSONObject params,ActionContext context) throws IOException, SQLException, NamingException {
String FID = request.getParameter("FID");
InputStream fis = getFListImage( FID,context);
response.setHeader("Cache-Control", "pre-check=0, post-check=0, max-age=0");
String fileNameKey = "filename";
String realFileName="列表.png";
response.addHeader("Content-Disposition", "inline; "+fileNameKey+"=\"" + realFileName + "\"");
OutputStream os = response.getOutputStream();
byte[] buffer = new byte[BUFFER_SIZE];
try {
if(null!=fis){
int read;
while ((read = fis.read(buffer)) != -1) {
os.write(buffer, 0, read);
}
}
} finally {
if(null!=fis){
fis.close();
}
}
}
// 通过条件查询blob字段的值
private static InputStream getFListImage(String FID, ActionContext context)throws SQLException, NamingException {
String str = "SELECT FLISTIMAGE FROM WW_INFOPUBLICITY WHERE FID='"+FID+"'";
Connection connection = null;
Statement statement = null;
try {
connection = context.getConnection("system");
statement = connection.createStatement();
ResultSet resultSet = statement.executeQuery(str);
if(resultSet.next()){
Blob blob=resultSet.getBlob("FLISTIMAGE");
if (Utils.isNotNull(blob)) return blob.getBinaryStream();
}
return null;
} finally {
try {
if (statement != null)
statement.close();
} catch (Exception exception) {
}
try {
if (connection != null)
connection.close();
} catch (Exception exception) {
}
}
}
}
