Таблица размеров в Vaadin 12 (при использовании Vaadin Designer) - PullRequest
Новая
       53

Таблица размеров в Vaadin 12 (при использовании Vaadin Designer)

0 голосов
/ 04 февраля 2019

Итак, я смог создать фиктивную диаграмму, просто перетаскивая диаграммы Vaadin 12 с помощью Vaadin Designer.Тем не менее, я не могу заставить его использовать 100% ширины и высоты?Я сделал обычную настройку стиля так, чтобы ширина и высота были 100% или фиксированный REM, но ничего не работает ... Кажется, это должно быть тривиальным очевидным шагом?(Кроме того, я бы подумал, что по умолчанию будет использоваться 100% ширины и высоты, верно?)

Кроме того, я чувствую , хотя я могу ошибаться, так как труднонайти документацию и примеры использования диаграмм при использовании режима html ... в режиме Java API документирован.Но в режиме html (т. Е. При создании шаблонов с помощью Vaadin Designer) я чувствую, что схожу с ума, как сумасшедший, чтобы посмотреть, какие настройки доступны для меня ... До сих пор мое приближение к Google привело меня к «высоким диаграммам», но (и я могу ошибатьсяздесь) кажется, что это не взаимно-однозначная корреляция между синтаксисом «highcharts» и синтаксисом html / template дизайнера vaadin, так как простое добавление параметра «heights», похоже, не работает в vaadin (хотя это работало вHighcharts).Если я прав, это "хорошая идея / лучшая практика" - просто использовать java для построения графиков и пропустить попытки сделать это в шаблонах Vaadin desginer / html?Мысли?

ОБНОВЛЕНИЕ № 1: Я проследил часть проблемы, чтобы поместить диаграмму во вкладку Vaadin ... Кажется, вкладка заставляет диаграмму не использовать 100% ширины ...не знаю почему ....

ОБНОВЛЕНИЕ №2: Кроме того, я не знаю, если это имеет значение в этом случае, но я заметил, что дизайнер Vaadin создает операторы "import", которые добавляютслово "src", как в: <link rel="import" href="bower_components/vaadin-charts/src/vaadin-chart.html">, но, хотя оно будет правильно отображаться в представлении плагина vaadin designer, при фактическом запуске вашего приложения на пристани диаграмма НЕ будет отображаться, и исправление заключается в удалении слова "src"в операторе импорта, то есть он должен читать: <link rel="import" href="bower_components/vaadin-charts/vaadin-chart.html"> (согласно документу).Похоже, что дизайнер Vaadin не на 100% соответствует API?

Обновление № 3: я создал тестовый пример, который показывает проблему.Я обнаружил, что проблема не существует, если график находится на первой вкладке;тем не менее, если на диаграмме расположена вторая вкладка, а вторая переходит на вторую вкладку, диаграмма небольшая ... Так что я думаю, что она имеет какое-то отношение к «порядку, в котором происходят события», чтобы указать диаграмме, что на самом делеРазмер экрана составляет.Вот рабочий пример, который показывает проблему: 

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart.html">
<link rel="import" href="../bower_components/vaadin-tabs/vaadin-tabs.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">

<dom-module id="test-charts">
    <template>
<style include="shared-styles">
            :host {
                display: block;
            }
        </style>
<div>
 <vaadin-tabs selected="{{page}}">
  <vaadin-tab>
    Page 1 
  </vaadin-tab>
  <vaadin-tab>
    Page 2 
  </vaadin-tab>
  <vaadin-tab>
    Page 3 
  </vaadin-tab>
  <vaadin-tab>
    Page 4 
  </vaadin-tab>
 </vaadin-tabs>
 <iron-pages selected="[[page]]">

  <page>
   <h3>Page 1</h3>Hi All
  </page>
     <page>
         <vaadin-chart  title="Solar Employment Growth by Sector, 2010-2016" subtitle="Source: thesolarfoundation.com" categories="[2010, 2011, 2012, 2013, 2014, 2015, 206, 2017]">
             <vaadin-chart-series title="Installation" unit="Number of Employees" values="[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]"></vaadin-chart-series>
             <vaadin-chart-series title="Manufacturing" unit="Number of Employees" values="[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]"></vaadin-chart-series>
             <vaadin-chart-series title="Sales &amp; Distribution" unit="Number of Employees" values="[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]"></vaadin-chart-series>
             <vaadin-chart-series title="Project Development" unit="Number of Employees" values="[null, null, 7988, 12169, 15112, 22452, 34400, 34227]"></vaadin-chart-series>
             <vaadin-chart-series title="Other" unit="Number of Employees" values="[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]"></vaadin-chart-series>
         </vaadin-chart>
     </page>
  <page>
   <h3>Page 3</h3>Good Morning 
  </page>
  <page>
   <h3>Page 4</h3>Welcome 
  </page>
 </iron-pages>
</div>
</template>

    <script>
        class TestCharts extends Polymer.Element {
            static get is() {
                return 'test-charts';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(TestCharts.is, TestCharts);
    </script>
</dom-module>

Итак, просто запустите код выше (в конструкторе) и затем нажмите на 2-ю вкладку (т. Е. Стр. 2).По крайней мере, это один сценарий, в котором проблема кажется воспроизводимой.

Обновление № 4: мне удалось создать очень простую вертикальную компоновку с кнопкой, диаграммой и другой кнопкой, и я (наконец) справилсячтобы заставить диаграмму «расти» ... однако я заметил две проблемы: если одна из них вручную изменяет размеры вкладки браузера, диаграмма изменит размер НЕ , тогда как кнопки Vaadin автоматически изменят размеры сами;и во-вторых, мне пришлось установить высоту самого верхнего вертикального макета на «100vh», чтобы использовать весь видовой экран.Это лучший способ сделать это?Что если этот шаблон будет существовать в другом компоненте?Почему «height: 100%» автоматически просто не использует 100% высоты родительского контейнера, а если родительский контейнер является корнем области просмотра, то просто использует 100%?Вот код: 

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/vaadin-vertical-layout.html">
<link rel="import" href="../bower_components/vaadin-button/vaadin-button.html">
<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart.html">

<dom-module id="test-vlbutton">
    <template>
<style include="shared-stylesXXXX">
            :host {
                display: block;
            }
        </style>
<vaadin-vertical-layout size-full theme="spacing" style="width: 100%; height: 100vh;" id="vl">
 <vaadin-button id="but1" theme="primary">
   Primary1 
 </vaadin-button>
 <vaadin-chart style="width: 100%; flex-grow: 1" id="chart1" title="Solar Employment Growth by Sector, 2010-2016" subtitle="Source: thesolarfoundation.com" categories="[2010, 2011, 2012, 2013, 2014, 2015, 206, 2017]">
  <vaadin-chart-series title="Installation" unit="Number of Employees" values="[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]"></vaadin-chart-series>
  <vaadin-chart-series title="Manufacturing" unit="Number of Employees" values="[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]"></vaadin-chart-series>
  <vaadin-chart-series title="Sales &amp; Distribution" unit="Number of Employees" values="[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]"></vaadin-chart-series>
  <vaadin-chart-series title="Project Development" unit="Number of Employees" values="[null, null, 7988, 12169, 15112, 22452, 34400, 34227]"></vaadin-chart-series>
  <vaadin-chart-series title="Other" unit="Number of Employees" values="[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]"></vaadin-chart-series>
 </vaadin-chart>
 <vaadin-button  style="width: 100%" id="but3" theme="primary">
   Primary3 
 </vaadin-button>
</vaadin-vertical-layout>
</template>

    <script>
        class TestVlbutton extends Polymer.Element {
            static get is() {
                return 'test-vlbutton';
            }

            static get properties() {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(TestVlbutton.is, TestVlbutton);
    </script>
</dom-module>

Кроме того, я думаю , что все еще есть проблемы, если график находится в одной из вкладок Ваадина ....

...