4.1.1.2. XML-дескриптор экрана

Теперь создадим новый экран для отображения PivotTable.

  1. Выберите New → Screen в контекстном меню элемента Generic UI в дереве проекта. После этого на экране отобразится страница создания стандартных экранов сущности.

  2. В списке доступных шаблонов выберите Blank screen и нажмите Next.

  3. Введите значение pivot-sample-screen в поле Descriptor name field и нажмите Next.

  4. Перейдите на вкладку Text и замените ее содержимое на следующий код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
       caption="msg://caption"
       messagesPack="com.company.sampler.web.screens"
       xmlns:chart="http://schemas.haulmont.com/charts/charts.xsd">
   <data>
       <collection id="tipsDc"
                   class="com.company.sampler.entity.Tip"
                   view="_local"/>
   </data>
   <layout>
       <chart:pivotTable id="tipsPivotTable"
                         dataContainer="tipsDc"
                         renderer="HEATMAP">
           <chart:properties>
               <chart:property name="row"/>
               <chart:property name="totalBill"/>
               <chart:property name="tip"/>
               <chart:property name="sex"/>
               <chart:property name="smoker"/>
               <chart:property name="day"/>
               <chart:property name="time"/>
               <chart:property name="size"/>
           </chart:properties>
           <chart:aggregation mode="SUM_OVER_SUM">
               <chart:property name="tip"/>
               <chart:property name="totalBill"/>
           </chart:aggregation>
           <chart:rows>
               <chart:row value="sex"/>
               <chart:row value="smoker"/>
           </chart:rows>
           <chart:columns>
               <chart:column value="day"/>
               <chart:column value="time"/>
           </chart:columns>
           <chart:sortersFunction>
               function(attr){
               if(attr=="Day"){
               return $.pivotUtilities.sortAs(["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]);
               }
               }
           </chart:sortersFunction>
       </chart:pivotTable>
   </layout>
</window>