OperaMasks在电子商务网站中的运用

2012-08-26

OperaMasks在电子商务网站中的应用?AjaxPageRenderer.java:@Overridepublic String[] getDependedJSPackag

OperaMasks在电子商务网站中的应用

AjaxPageRenderer.java: @Override public String[] getDependedJSPackages(FacesContext context, UIComponent component) { return new String[] {"Ext.Base"}; } @Override public String[] getDependedCSSPackages(FacesContext context, UIComponent component) { return new String[] {"All"};} NSECPageRenderer.java: @Override public String[] getDependedJSPackages(FacesContext context, UIComponent component) { return null; } @Override public String[] getDependedCSSPackages(FacesContext context, UIComponent component) { return null; }?

<render-kit> <render-kit-id>AJAX</render-kit-id> <renderer> <component-family>org.operamasks.faces.HtmlDocument</component-family> <renderer-type>org.operamasks.faces.HtmlPage</renderer-type> <renderer-class>com.apusic.nsec.renderer.NSECPageRenderer</renderer-class> </renderer></render-kit>

?这些完成之后编写一个只包含w:page构件的faces页面，然后在客户端查看这个页面的源代码时就再也看不到EXTJS的影子了。

<facelet-taglib> <namespace>http://www.nsec.com</namespace> <tag> <tag-name>creditIcon</tag-name> <source>composition/creditIcon.xhtml</source> </tag></facelet-taglib>?

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:nsec="http://www.nsec.com" xmlns:ui="http://java.sun.com/jsf/facelets" renderKitId="AJAX"> <ui:decorate template="template.xhtml"> <ui:param name="message" value="会员级别图标控件演示：会员级别图标控件"/> <ui:define name="content"> <nsec:creditIcon credit="1"></nsec:creditIcon> <nsec:creditIcon credit="2"></nsec:creditIcon> <nsec:creditIcon credit="4"></nsec:creditIcon> <nsec:creditIcon credit="8"></nsec:creditIcon> </ui:define> </ui:decorate></f:view>??

<om:useBean value="composition.gradeIconBean"></om:useBean>

@ManagedBean(name = "composition.gradeIconBean", scope = ManagedBeanScope.REQUEST)public class GradeIconBean {    WebApplicationContext wac = WebApplicationContextUtils            .getWebApplicationContext((ServletContext) FacesContext                    .getCurrentInstance().getExternalContext().getContext());    private CreditPointLevelService creditPointSvc;    private CreditPointsLevelEnum creditPointLevel;    public void setCreditPointLevel(CreditPointsLevelEnum creditPointLevel) {        this.creditPointLevel = creditPointLevel;    }    public CreditPointsLevelEnum getCreditPointLevel() {        return creditPointLevel;    }    public CreditPointLevelService getCreditPointSvc() {        return (CreditPointLevelService) wac.getBean("creditPointLevelService");    }}

<om:elite> <![CDATA[composition.gradeIconBean.setCreditPointLevel(composition.gradeIconBean.creditPointSvc.getCreditPointLevel(gradePoint)); ]]></om:elite>

?这样每个复合构件在渲染之前都会执行这段Elite把查询结果赋予creditPointLevel属性。

使用效果：

OperaMasks在电子商务网站中的运用
?

? public class UIAutocomplete extends HtmlInputText{ /** 静态数据源 **/ protected String jsonSource; /** 动态数据源 **/ protected MethodExpression listSource;}

public class AjaxAutocompleteHandler extends ComponentHandler { private TagAttribute listSource; public AjaxAutocompleteHandler(ComponentConfig config) { super(config); this.listSource=this.getAttribute("listSource"); } @Override protected void onComponentCreated(FaceletContext ctx, UIComponent c, UIComponent parent) { if(this.listSource != null){ ((UIAutocomplete)c).setListSource(this.listSource.getMethodExpression(ctx, List.class, null)); } }}

?这个Handler的onComponentCreated()方法会在facelets构建构件树的时候被自动调用。

public String[] getDependedCSSPackages(FacesContext context, UIComponent component) { return new String[] {"jquery-ui-autocomplete-css"}; } public void encodeInitScriptEnd(FacesContext context, ResourceManager rm, UIComponent component) throws IOException { … … // 此次省略初始化代码 fmt.format("%s={};", jsvar); fmt.format("%s.data=%s;", jsvar, jsonSource); fmt.format("$(function() {"); fmt.format("$( '#%s' ).autocomplete({ source: %s.data, minLength:0 });", clientId, jsvar); fmt.format("$('#%s').bind('focus',function(){$(this).autocomplete('search','');});", clientId); fmt.format("%s.source=function(data){$('#%s').autocomplete( 'option' , 'source' , data );%s.data=data;};", jsvar, clientId, jsvar); fmt.format("});"); ComponentResource resource = ComponentResource.getResourceInstance(rm); resource.addInitScript(fmt.toString());}

最后配置一下taglib和faces-config文件就可以运行了，值得注意的是配置taglib的时候需要配置<handler-class>为AjaxAutocompleteHandler:

composition_component.taglib.xml

         <tag>                   <tag-name>autocomplete</tag-name>                   <component>          <component-type>com.apusic.nsec.component.autocomplete.autocomplete</component-type>          <renderer-type>com.apusic.nsec.component.autocomplete.autocomplete</renderer-type>          <handler-class>com.apusic.nsec.component.autocomplete.AjaxAutocompleteHandler</handler-class>                   </component>          </tag>

?faces-config.xml

          <component>          <component-type>com.apusic.nsec.component.autocomplete.autocomplete</component-type>          <component-class>com.apusic.nsec.component.autocomplete.UIAutocomplete</component-class>          </component>          <renderer>          <component-family>com.apusic.nsec.component.autocomplete.autocomplete</component-family>          <renderer-type>com.apusic.nsec.component.autocomplete.autocomplete</renderer-type>          <renderer-class>com.apusic.nsec.component.autocomplete.AjaxAutocompleteRenderer</renderer-class>          </renderer>

?运行效果：

OperaMasks在电子商务网站中的运用

更多示例请参看：http://www.dt1688.com

http://demo.operamasks.org/bpdemos/index.faces

热点排行

软件架构设计

OperaMasks在电子商务网站中的运用