目前有很多网站都提供javascript脚本供其他网站来引用自己的内容,像广告,新闻等等。典型案例如 “google adsense” 。
最近用seam实现了一个比较简易的应用,耗费了3个工作日,实现上面也是由繁入简,目前这个实现应该是比较简单了。在此愿意与大家分享。
由于我的例子比较简单,因此只用了一个类ConsumerEmbeddedJavascriptAction。既输出javascript和css,由其他网站来应用;而当其他网站引用javascript时,实际调用的还是这个类来产生相应的内容。
@Name("consumerEmbeddedJavascriptAction")
@Scope(ScopeType.PAGE)
public class ConsumerEmbeddedJavascriptAction implements Serializable {
private static final long serialVersionUID = -7550289081159249326L;
@In
UserBean sessionUser;
@In (create=true)
private EntityManager entityManager;
@RequestParameter("contentType")
String contentType;
/**
* 生成嵌入的css和js脚本,JS脚本的生成就在当前类的getEmbeddedJsText()方法
* 中,css稍后我会列出。形如
* <link rel="stylesheet" href="http://localhost:8080/embeddedjs.css" />
* <script src=="http://localhost:8080/embedded_javascript.seam?contentType=AD" />
* @return
*/
@Factory(value = "embeddedJsReferenceForContents", scope = ScopeType.PAGE, autoCreate = false)
public String getEmbeddedJsReference() {
HttpServletRequest request = FacesUtil.getServletRequest();
String requestPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
StringBuilder remoteReference = new StringBuilder();
remoteReference.append("<link rel=\"stylesheet\" href=\""+requestPath+"ver20/embeddedjs.css\" />");
remoteReference.append("<script src=\""+requestPath+"ver20/embedded_javascript.seam?contentType="+EntityTWContent.TYPE_NEWS+"\"></script>");
return remoteReference.toString();
}
@Factory(value = "embeddedJsForContents", scope = ScopeType.PAGE, autoCreate = false)
public String getEmbeddedJsText() {
String query = "";
/**
* 构造查询语句....
*/
Query q = this.entityManager.createQuery(query);
Collection<EntityTWContent> contentList = q.getResultList();
return getHtmlContent(contentList);
}
/**
* 根据数据库的数据产生输出的html,并由js脚本document.write()输出。
*
* @return
*/
private String getHtmlContent(Collection<EntityTWContent> contentList){
HttpServletRequest request = FacesUtil.getServletRequest();
String requestPath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
StringBuilder html = new StringBuilder();
html.append("document.write(\"<div id='twid_container'>\");");
for(EntityTWContent content:contentList){
html.append("document.write(\"<div id='subjectColumn'>");
html.append("<a href='"+requestPath+"c/"+content.getContentId()+"'>"+content.getSubject()+"</a>");
html.append("</div>\");");
html.append("document.write(\"<div id='publishTimeColumn'>");
html.append(content.getPublishTime());
html.append("</div>\");");
html.append("document.write(\"<div style='clear:both;'></div>\");");
html.append("document.write(\"<div id='summaryColumn'>");
html.append(content.getSummary());
html.append("</div>\");");
html.append("document.write(\"<div style='clear:both;'></div>\");");
}
html.append("document.write(\"</div>\");");
return html.toString();
}
public String getContentType() {
return contentType;
}
public void setContentType(String contentType) {
this.contentType = contentType;
}
}
然后是输出javascript引用的xhtml文件,其他网站可以从文本框中将类似的内容拷贝到自己的html页面中( <link rel="stylesheet" href="http://localhost:8080/embeddedjs.css" /> <script src=="http://localhost:8080/embedded_javascript.seam?contentType=AD" />):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jstl/core">
<body>
<h:form>
<h:inputTextarea value="#{embeddedJsReferenceForContents}" cols="80"
rows="5" />
</h:form>
</body>
</html>
当<script src=="http://localhost:8080/embedded_javascript.seam?contentType=AD" />被执行时,另一个xhtml页面:embedded_javascript.xhtml将会被调用,这个页面更简单。
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="application/x-javascript" />
<h:outputText value="#{embeddedJsForContents}" escape="false"/>
</f:view>
到此,所有的工作全部完成。噢,还差一个,css文件:embeddedjs.css,其他网站可以仿照这个css加入自己的css。
#twid_container { width:400px; } #subjectColumn{ float: left; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; font-weight: bold; font-size: 14px; } #publishTimeColumn{ margin-top: 0px; margin-bottom: 0px; padding-right: 10px; padding-top: 0px; font-size: 11px; vertical-align: top; float: right; } #summaryColumn{ float: left; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; font-size: 13px; }