15. Cockpit Basics

动机

    Cockpits 是最好的实践方法，为您的应用程序提供用户界面。要创建一个全新的驾驶舱，你应该使用Cockpit NG框架(Trail ~ Customizing Backoffice - Cockpit NG).在项目中，你可能会遇到扩展现有的驾驶舱（productcockpit, cmscockpit等）的情况。这些驾驶舱取决于驾驶舱框架(Cockpit Framework Overview)并且还驾驶舱具备cuppy一样有用。你会扩展这个驾驶舱在这个 Trail 让cuppyadmins还可以在管理员的角度来管理球场的实例。

任务

    创建cuppytrailcockpit扩展

        创建一个新的扩展在以前的Trail步骤

            

        导入新的扩展到Eclipse

        创建新的文件夹

            cuppytrailcockpit/resources/cuppytrailcockpit/cuppy

        创建空文件

            cuppytrailcockpit/resources/cuppytrailcockpit/cuppy/cuppy-web.xml

        添加下面代码到project.properties

cuppytrailcockpit/project.properties

# Inject additional config into cuppy cockpit
cuppy.additionalWebSpringConfigs.cuppytrailcockpit=classpath:/cuppytrailcockpit/cuppy/cuppy-web.xml

            现在，我们可以从cuppy web应用程序挂接到cuppy-web.xml上下文中。

    管理员从cuppy驾驶舱修改视角

        当我们要编辑体育场，我们需要重新定义相关类型选择部分：

cuppytrailcockpit/resources/cuppytrailcockpit/cuppy/cuppy-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">
 
    <bean id="CuppyTypeSelectorSection" class="de.hybris.platform.cockpit.components.navigationarea.NavigationPanelSection"
        scope="prototype">
        <property name="localizedLabel" value="navigationarea.types" />
        <property name="visible" value="true" />
        <property name="renderer">
            <bean class="de.hybris.platform.cockpit.components.navigationarea.renderer.TypeSelectorSectionRenderer" autowire="byName">
                <property name="typeCodes" value="Competition,Match,MatchBet,Group,Team,Player,News,Stadium"></property>
            </bean>
        </property>
    </bean>
 
</beans>

        添加cuppytrailcockpit到 localextensions.xml 

            ant all or ant clean all

        重新启动服务器

            重新启动服务器登录 http://localhost:9001/cuppy （账号pp，密码1234）并切换到管理视角。这是我们将要使用整个演习的URL。您应该看到现在体育场的类型选择部分。

            

            如果你没有看到它球场可能是指缺少类型的访问权限。请从仔细在观看一遍该Trail。

    添加一个驾驶舱UI配置"Stadium"类型

            创建该文件夹（convention again）cuppytrailcockpit/resources/cuppytrailcockpit-config.这将是您的自定义用户界面驾驶舱配置的基本文件夹。该“Stadium”类型现已成为类型列表的一部分。你可以 - 根据您的用户权限 - 浏览，搜索，编辑和创建新的体育场,你甚至可以添加一个UI配置指定哪些属性显示的应该是类型为“Stadium”。

            PS: 增加新的XML配置文件后，建立并进行system update，选择project data 的cuppytrailcockpit.

            编辑区域(Editor Area)配置

                创建新的文件

                    "editorArea_Stadium.xml"在 cuppytrailcockpit/resources/cuppytrailcockpit-config/cuppyadmins.文件夹下

                    PS：

                    如果你没有看到的变化在编辑区域，该系统可能会存储个性化设置您的观点。要重置这些设置，点击菜单（左上角的Cuppy驾驶舱），然后用户设置和重置个性化设置。注销并重新还可以帮助强制更新。

                    这个名字以及路径是非常重要的，必须遵循驾驶舱UI配置导入文件的约定。命名和路径附着于约定可以确保文件系统初始化或更新项目中的数据阶段期间自动导入。“editorArea” - 文件名的第一部分讲述了系统的配置是编辑器区域。下划线后的第二部分 - “Stadium”指定类型代码的配置应适用于。最后一部分
路径 - “cuppyadmins” - 确定用户或用户组的配置。这种模式适用于所有下面的配置文件。为了进行测试，登录PP密码1234。

                给editorArea_Stadium.xml文件加上代码

cuppytrailcockpit/resources/cuppytrailcockpit-config/cuppyadmins/editorArea_Stadium.xml

<?xml version="1.0" encoding="UTF-8"?>
<editor> 
    <group qualifier="General" visible="true" initially-opened="true">
        <label key="cockpit.config.label.properties"/>
        <property qualifier="Stadium.code"/>
        <property qualifier="Stadium.capacity"/>
        <property qualifier="Stadium.matches"/>
    </group>
     
    <group qualifier="admin" visible="true" initially-opened="false">
        <label key="cockpit.config.label.administration"/>
        <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">
        <label key="cockpit.config.label.other"/>
    </custom-group>
</editor>

                这定义了它们是在编辑区域中可见的部分

            列表视图(List View)配置

                创建文件 listViewContentBrowser_Stadium.xml

cuppytrailcockpit/resources/cuppytrailcockpit-config/cuppyadmins/listViewContentBrowser_Stadium.xml

<?xml version="1.0" encoding="UTF-8"?>
<list-view unassigned-group-name="Other">
  <group name="General">
        <property qualifier="Stadium.code" visible="true"/>
        <property qualifier="Stadium.capacity" visible="true"/>
    </group>
</list-view>

 

           您还可以创建与“listViewSelector_Stadium.xml”具有相同的内容。此配置将被用来当执行搜索的参考编辑Stadium。

            高级搜索(Advanced Search)配置

                创建 advancedSearch_Stadium.xml

cuppytrailcockpit/resources/cuppytrailcockpit-config/cuppyadmins/advancedSearch_Stadium.xml

<?xml version="1.0" encoding="UTF-8"?>
<advanced-search>
    <group name="root" type="Stadium">
            <property qualifier="Stadium.code" sort-enabled="true" visible="true"/>
            <property qualifier="Stadium.capacity" sort-enabled="true" visible="true"/>
            <property qualifier="Stadium.matches" sort-enabled="true" visible="true"/>     
        </group>     
</advanced-search>

            基本(Base)配置

                创建 base_Stadium.xml 文件

cuppytrailcockpit/resources/cuppytrailcockpit-config/cuppyadmins/base_Stadium.xml

<?xml version="1.0" encoding="UTF-8"?>
<base>
    <search>
        <search-properties>
            <property qualifier="Stadium.code" />
        </search-properties>
        <sort-properties>
            <property qualifier="Stadium.code" />
            <property qualifier="Stadium.capacity" />
        </sort-properties>
    </search>
    <label>
        <property qualifier="Stadium.code"/>
    </label>
</base>