ofbiz学习——ecommerce项目主页面

ofbiz电商平台首页源码逻辑

1.访问url： https://10.100.1.240:8443/ecommerce/control/main

2. 打开文件 ${Ofbiz_Home}\specialpurpose\ecommerce\webapp\ecommerce\WEB-INF\controller.xml 

查看第124行和1881行。

于是我们知道，控制器将返回视图路径是： page="component://ecommerce/widget/CommonScreens.xml#main"

3.打开文件${Ofbiz_Home}\specialpurpose\ecommerce\widget\CommonScreens.xml。 找到name为main的screen定义。

set标签是赋值。

script表示加载脚本，并运行脚本。

decorator-screen  装饰器视图。相关逻辑可以查看  对模板使用装饰器screen widget

CommonScreens.xml文件中找到如下装饰器的定义：

    <screen name="main-decorator">
        <section>
            <actions>
                <!-- base/top/specific map first, then more common map added for shared labels -->
                <property-map resource="EcommerceUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="ContentUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="ProductUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="AccountingUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="PartyUiLabels" map-name="uiLabelMap" global="true"/>
                <property-map resource="OrderUiLabels" map-name="uiLabelMap" global="true"/>

                <set field="MainColumnStyle" value="nocolumns" global="true"/>

                <!-- The default (global) shortcut icon -->
                <set field="layoutSettings.shortcutIcon" value="/images/ofbiz.ico" global="true"/>

                <!-- The default (main) java scripts -->
                <!-- NOTE: this should be included on each screen that uses it to avoid including it in all screens: -->
                <set field="layoutSettings.javaScripts[]" value="/images/OfbizUtil.js" global="true"/>
                <set field="initialLocaleComplete" type="String" value="${groovy:parameters?.userLogin?.lastLocale}" default-value="${groovy:locale.toString()}"/>
                <set field="layoutSettings.javaScripts[+0]" value="${groovy: org.apache.ofbiz.common.JsLanguageFilesMapping.dateTime.getFilePath(initialLocaleComplete)}" global="true"/>

                <set field="layoutSettings.javaScripts[+0]" value="/images/jquery/plugins/datetimepicker/jquery-ui-timepicker-addon.min-1.4.3.js" global="true"/>
                <set field="layoutSettings.javaScripts[+0]" value="/images/jquery/ui/js/jquery-ui-1.10.3.min.js" global="true"/>
                <set field="layoutSettings.javaScripts[+0]" value="/images/jquery/plugins/validate/jquery.validate.min.js" global="true"/>
                <set field="layoutSettings.javaScripts[+0]" value="/images/jquery/jquery-migrate-1.2.1.js" global="true"/>
                <set field="layoutSettings.javaScripts[+0]" value="/images/jquery/jquery-1.11.0.min.js" global="true"/>
                <set field="layoutSettings.javaScripts[]" value="/images/jquery/plugins/Readmore.js-master/readmore.js" global="true"/>
                <set field="layoutSettings.javaScripts[]" value="/images/jquery/plugins/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js" global="true"/>
                <set field="layoutSettings.styleSheets[+0]" value="/images/jquery/plugins/jquery-jgrowl/1.4.1/jquery.jgrowl.min.css" global="true" />

                <script location="component://ecommerce/groovyScripts/EcommerceSetup.groovy"/>

                <!-- Get the store VisualTheme -->
                <set field="visualThemeId" from-field="productStore.visualThemeId" default-value="EC_DEFAULT"/>
                <service service-name="getVisualThemeResources">
                    <field-map field-name="visualThemeId"/>
                    <field-map field-name="themeResources" from-field="layoutSettings"/>
                </service>
                <set field="layoutSettings" from-field="themeResources" default-value="${layoutSettings}" global="true"/>
                <set field="headerTemplateLocation" from-field="layoutSettings.VT_HDR_TMPLT_LOC[0]" default-value="component://ecommerce/template/includes/Header.ftl"/>
                <set field="footerTemplateLocation" from-field="layoutSettings.VT_FTR_TMPLT_LOC[0]" default-value="component://ecommerce/template/includes/Footer.ftl"/>
                <entity-and entity-name="WebAnalyticsConfig" list="webAnalyticsConfigs">
                    <field-map field-name="webSiteId"/>
                </entity-and>
                <set field="layoutSettings.javaScripts[]" value="/images/miscAjaxFunctions.js" global="true" />
            </actions>
            <widgets>
               <section>
                  <condition>
                     <not><if-empty field="globalContext.productStore"/></not>
                  </condition>
                  <widgets>
                     <platform-specific><html><html-template location="component://ecommerce/template/includes/HeaderHead.ftl"/></html></platform-specific>
                     <platform-specific><html><html-template location="component://common/template/includes/OpenHtmlBody.ftl"/></html></platform-specific>
                     <!-- render header -->
                     <container id="header"><platform-specific><html><html-template location="${headerTemplateLocation}"/></html></platform-specific></container>

                     <container id="ecom-mainarea">
                        <!-- by default will render left-bar only if left/rightbarScreenName value not empty -->
                        <container id="div1" style="left"><include-screen name="${leftbarScreenName}" location="${leftbarScreenLocation}"/></container>
                        <container id="div2" style="right"><include-screen name="${rightbarScreenName}" location="${rightbarScreenLocation}"/></container>

                        <container id="div3" style="${MainColumnStyle}">
                           <!-- render messages -->
                           <platform-specific><html><html-template location="component://common/template/includes/Messages.ftl"/></html></platform-specific>
                           <decorator-section-include name="body"/>
                        </container>

                        <container id="div4" style="endcolumns"/>
                    </container>

                    <!-- render footer -->
                    <container id="footer"><platform-specific><html><html-template location="${footerTemplateLocation}"/></html></platform-specific></container>
                    <platform-specific><html><html-template location="component://common/template/includes/CloseHtmlBody.ftl"/></html></platform-specific>
                  </widgets>
                  <fail-widgets>
                     <label text="A Product Store has not been defined for this ecommerce site.  A Product Store can be created using the ofbizsetup wizard."/>
                  </fail-widgets>
               </section>
            </widgets>
        </section>
    </screen>

接下来查看Main.ftl

4.打开文件${Ofbiz_Home}\specialpurpose\ecommerce\template\Main.ftl

<#-- Render the category page -->
<#if requestAttributes.productCategoryId?has_content>
  ${screens.render("component://ecommerce/widget/CatalogScreens.xml#bestSellingCategory")}
  ${screens.render("component://ecommerce/widget/CatalogScreens.xml#category-include")}
<#else>
  <center><h2>${uiLabelMap.EcommerceNoPROMOTIONCategory}</h2></center>
</#if>

5.打开文件 ${Ofbiz_Home}\specialpurpose\ecommerce\widget\CatalogScreens.xml

查看名称为bestSellingCategory 和  category-include 的screens

    <screen name="bestSellingCategory">
        <section>
            <widgets>
                <section>
                    <widgets>
                        <!--<label style="h1" text="Popular Categories"/>-->
                        <include-screen name="showBestSellingCategory"/>
                    </widgets>
                </section>
            </widgets>
        </section>
    </screen>
    <screen name="showBestSellingCategory">
        <section>
            <actions>
                <script location="component://ecommerce/groovyScripts/catalog/BestSellingCategory.groovy"/>
            </actions>
            <widgets>
                <platform-specific><html><html-template location="component://ecommerce/template/catalog/ShowBestSellingCategory.ftl"/></html></platform-specific>
            </widgets>
        </section>
    </screen>

    <screen name="category-include">
        <section>
            <widgets>
                <section>
                    <condition>
                        <not><if-empty field="productCategory"/></not>
                    </condition>
                    <widgets>
                        <include-screen name="${detailScreen}"/>
                    </widgets>
                    <fail-widgets>
                        <label style="head2">${uiLabelMap.ProductCategoryNotFoundForCategoryID} ${productCategoryId}!</label>
                    </fail-widgets>
                </section>
            </widgets>
        </section>
    </screen>

以上基本上主页的相关视图都在上面了，熟悉ofbiz框架的基本流程后，接下来针对主页上各个模块的具体实现方法。如：选择目录，搜索目录，分类，Popular Categories等。