基于seam框架的嵌入式广告(embedded javascript)实现

jackle_liu

浏览: 147991 次

最近访客更多访客>>

JeffWing

jk88388

JohnnyDell

sdulss

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (55)

社区版块

存档分类

嵌入式 Seam JavaScript 框架 CSS

目前有很多网站都提供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;
}

1
顶

0
踩

分享到：

节约数据库空间的一个小技巧 | 关于google wave的总结，思考

2010-04-17 09:50
浏览 1170
评论(0)
分类:企业架构
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论