Hybris Component 创建

为什么80%的码农都做不了架构师？>>>   

一、创建一个图片加文字的Components items

1. 定义Components

   core-items.xml定义Components继承CMSParagraphComponent

2. <itemtype code="CMSMediaParagraphComponent" generate="true"
       jaloclass="de.hybris.platform.yacceleratorcore.jalo.cms2.components.CMSMediaParagraphComponent"
       extends="CMSParagraphComponent" autocreate="true">
       <description>It represents paragraph component with an additional media attribute.</description>
       <attributes>
           <attribute qualifier="media" generate="true" autocreate="true" type="localized:Media">
              <persistence type="property" />
              <description>Attribute that stores the localized media of the paragraph.</description>
           </attribute>
       </attributes>
   </itemtype>

    

3. 配置国际化

   core-locales_en.properties

4. type.CMSMediaParagraphComponent.name=Media Paragraph Component
   type.CMSMediaParagraphComponent.description=It represents paragraph component with an additional media attribute.
   type.CMSMediaParagraphComponent.content.name=Content
   type.CMSMediaParagraphComponent.content.description=
   type.CMSMediaParagraphComponent.media.name=Media
   type.CMSMediaParagraphComponent.media.description=

    

5. 创建jsp

   storefront/web/webroot/WEB-INF/components/cms2创建一个cmsmediaparagraphcomponent.jsp（新组件的code全小写命名)；

   1. 定义Controller

      默认使用DefaultCMSComponentController来支持新的组件，它将组件的所有属性添加到Spring MVC模型中。
      如有特殊要求需创建对应的Controller。
      命名（包）：com.o2o.storefront.controllers.cms
      CMSMediaParagraphComponentController.java

   2. 自定义页面布局 

      <div class="content">
        <img src="${media.url}" alt="${media.altText}"/>
        ${content}
      </div>
      

       

6. 添加组件

   core/import/contentCatalogs/electronicsContentCatalog/cms-content.impex 添加组件$wideContent或$narrowContent；

   $narrowContent=ProductFeatureComponent,CategoryFeatureComponent,CMSImageComponent,SimpleBannerComponent,BannerComponent,ImageMapComponent,RotatingImagesComponent,ProductCarouselComponent,CMSParagraphComponent,CMSMediaParagraphComponent
   

    

7. 创建访问权限

   core/import/cmscockpit/cmscockpit-access-rights.impex

8. Type;UID;MemberOfGroups;Password;Target;read;change;create;remove;change_perm
   ;;;;CMSMediaParagraphComponent;+;+;+;+;+;
   

    

二、cockpit 配置 

    在core/resources/yacceleratorcore-config/cmsmanagergroup文件下

1. editorArea配置

   editorArea_CMSMediaParagraphComponent.xml

   <?xml version="1.0" encoding="UTF-8"?>
   <editor>
   	<group qualifier="General" visible="true" initially-opened="true">
   		<label lang="de">Stammdaten</label>
   		<label lang="en">General</label>
   		<property qualifier="CMSItem.name"/>
   		<property qualifier="CMSItem.catalogVersion" editor="shortListEditor"/>
   		<property qualifier="AbstractCMSComponent.visible"/>
   	</group>
   
   	<group qualifier="editorial" visible="true" initially-opened="false">
   		<label lang="de">Redaktionell</label>
   		<label lang="en">Editorial</label>
   		<property qualifier="CMSParagraphComponent.content" editor="wysiwyg"/>
   		<property qualifier="CMSMediaParagraphComponent.media" editor="simpleMediaReferenceSelector">
   			<parameter>
   				<name>mimeTypes</name>
   				<value>
   					image/jpeg;image/gif
   				</value>
   			</parameter>
   			<parameter>
   				<name>mimeTypes</name>
   				<value>
   					image/jpeg;image/gif
   				</value>
   			</parameter>
   			<parameter>
   				<name>allowCreate</name>
   				<value>true</value>
   			</parameter>
   			<parameter>
   				<name>restrictToCreateTypes</name>
   				<value>Media</value>
   			</parameter>
   			<parameter>
   				<name>celumMediaFormat</name>
   				<value>picture</value>
   			</parameter>
   		</property>
   
   	</group>
   
   	<group qualifier="visibility" visible="true" initially-opened="false">
   		<label lang="de">Context Visibility</label>
   		<label lang="en">Context Visibility</label>
   		<property qualifier="AbstractCMSComponent.restrictions">
   			<parameter>
   				<name>allowCreate</name>
   				<value>true</value>
   			</parameter>
   		</property>
   		<property qualifier="AbstractCMSComponent.onlyOneRestrictionMustApply"/>
   	</group>
   
   	<group qualifier="admin" visible="true" initially-opened="false">
   		<label lang="de">Administration</label>
   		<label lang="en">Administration</label>
   		<property qualifier="CMSItem.uid"/>
   		<property qualifier="AbstractCMSComponent.slots"/>
   		<property qualifier="AbstractCMSComponent.container"/>
   		<property qualifier="Item.pk" />
   		<property qualifier="Item.creationTime" />
   		<property qualifier="Item.modifiedtime" />
   	</group>
   
   	<custom-group
   		class="de.hybris.platform.cockpit.services.config.impl.UnassignedEditorSectionConfiguration"
   		qualifier="unassigned"
   		initially-opened="false"
   		visible="false">
   		<label lang="de">Andere</label>
   		<label lang="en">Other</label>
   	</custom-group>
   </editor>

    

2. LiveEdit模式

   支持将下面的代码添加到contentEditor_CMSMediaParagraphComponent.xml文件

   <?xml version="1.0" encoding="UTF-8"?>
   <content-editor hideEmpty="true" hideReadOnly="true" groupCollections="false">
     <template>
       <![CDATA[
       	<table width="100%" style="margin:0px;padding:0px">
   			<tbody>
   				<tr>
   					<td colspan="2"><div style="height:6px"/></td>
   				</tr>
   				<tr>
   					<td colspan="2"><div class="contentEditorHeader" style="background-color:#C3C3C3;font-size:11px;padding:3px;"><b>$label</b></div></td>
   				</tr>
   				<tr>
   					<td style="width:900px"><cockpit code="property" value="CMSParagraphComponent.content"/></td>
   					<td><div style="height:6px"/></td>
   				</tr>
   				<tr>
   					<td style="width:900px"><cockpit code="property" value="CMSMediaParagraphComponent.media"/></td>
   					<td><div style="height:6px"/></td>
   				</tr>
   			</tbody>
   		</table>
       ]]>
     </template>
     <custom-editors>
       <property qualifier="CMSParagraphComponent.content" editorCode="wysiwyg">
       	<parameter>
       		<name>inline</name>
       		<value>true</value>
       	</parameter>
       	<parameter>
       		<name>fckToolbarConfiguration</name>
       		<value>
       			[['Bold', 'Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','OrderedList','UnorderedList','-','Outdent','Indent','-','Table'],'/',['FontName','FontSize','TextColor','-','Source']]
   		  </value>
       	</parameter>
       	<parameter>
       		<name>editorWidth</name>
       		<value>700px</value>
       	</parameter>
       	<parameter>
       		<name>editorHeight</name>
       		<value>200px</value>
       	</parameter>
       	<parameter>
       		<name>labelWidth</name>
       		<value>120px</value>
       	</parameter>
       </property>
   		<property qualifier="CMSMediaParagraphComponent.media" editorCode="simpleMediaReferenceSelector">
   			<parameter>
   				<name>mimeTypes</name>
   				<value>image/jpeg;image/gif</value>
   			</parameter>
   			<parameter>
   				<name>allowCreate</name>
   				<value>true</value>
   			</parameter>
   			<parameter>
   				<name>restrictToCreateTypes</name>
   				<value>Media</value>
   			</parameter>
   			<parameter>
   				<name>imageHeight</name>
   				<value>80px</value>
   			</parameter>
   			<parameter>
   				<name>celumMediaFormat</name>
   				<value>picture</value>
   			</parameter>
   		</property>
     </custom-editors>
   </content-editor>

    

3. wizard配置

   wizardConfig_CMSMediaParagraphComponent.xml

4. <?xml version="1.0" encoding="UTF-8"?>
   
   <wizard-config showPrefilledValues="false" selectMode="true" createMode="true" displaySubtypes="true">
   	<displayed-properties>
   		<group qualifier="General" visible="true" initially-opened="true">
   			<label lang="en">General</label>
   			<label lang="de">General</label>
   			<property qualifier="CMSItem.name"/>
   		</group>
   		<group qualifier="Properties" visible="true" initially-opened="true">
   			<label lang="en">Properties</label>
   			<label lang="de">Eigenschaften</label>
   			<property qualifier="CMSParagraphComponent.content" editorCode="wysiwyg" />
   			<property qualifier="CMSMediaParagraphComponent.media" editorCode="simpleMediaReferenceSelector" />
   		</group>
   	</displayed-properties>
   </wizard-config>

    

三、创建组件模板数据

1. ImpEx文件

   cms-content_en.impex

   # Macros / Replacement Parameter definitions
   $contentCatalog=electronicsContentCatalog
   
   INSERT_UPDATE Media;$contentCV[unique=true];code[unique=true];@media[translator=de.hybris.platform.impex.jalo.media.MediaDataTranslator];mime[default='image/jpg'];altText;folder(qualifier)[default='images']
   ;;sampleCMSParagraphImage.jpg;$siteResource/images/sampleCMSParagraphImage.jpg;;
   
   # CMS Media Paragraph Component
   INSERT_UPDATE CMSMediaParagraphComponent;$contentCV[unique=true];uid[unique=true];name;content[lang=$lang];&componentRef
   ;;SampleCMSMediaParagraphComponent;Sample MediaParagraphComponent;"Sample content";SampleCMSMediaParagraphComponent
   # Component for sontentSlot
   INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];active;cmsComponents(&componentRef)
   ;;Section1Slot-Homepage;true;SampleCMSMediaParagraphComponent
   

    

转载于:https://my.oschina.net/penfin/blog/994832