--- title: ProgressBar order: 29 layout: page --- [[components.progressbar]] = ProgressBar ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/progress-bar"] endif::web[] The [classname]#ProgressBar# component allows visualizing progress of a task. The progress is specified as a floating-point value between 0.0 and 1.0. [[figure.components.progressbar.basic]] .The [classname]#ProgressBar# component image::img/progressbar-basic.png[width=30%, scaledwidth=70%] To display upload progress with the [classname]#Upload# component, you can update the progress bar in a [interfacename]#ProgressListener#. When the position of a progress bar is done in a background thread, the change is not shown in the browser immediately. You need to use either polling or server push to update the browser. You can enable polling with [methodname]#setPollInterval()# in the current UI instance. See <> for instructions about using server push. Whichever method you use to update the UI, it is important to lock the user session by modifying the progress bar value inside [methodname]#access()# call, as described in <>. [source, java] ---- ProgressBar bar = new ProgressBar(0.0f); layout.addComponent(bar); layout.addComponent(new Button("Increase", click -> { float current = bar.getValue(); if (current < 1.0f) bar.setValue(current + 0.10f); })); ---- [[components.progressbar.indeterminate]] == Indeterminate Mode In the indeterminate mode, a non-progressive indicator is displayed continuously. The indeterminate indicator is a circular wheel in the built-in themes. The progress value has no meaning in the indeterminate mode. [source, java] ---- ProgressBar bar = new ProgressBar(); bar.setIndeterminate(true); ---- [[figure.components.progressbar.indeterminate]] .Indeterminate progress bar image::img/progressbar-indeterminate.png[width=15%, scaledwidth=40%] [[components.progressbar.thread]] == Doing Heavy Computation The progress bar is typically used to display the progress of a heavy server-side computation task, often running in a background thread. The UI, including the progress bar, can be updated either with polling or by using server push. When doing so, you must ensure thread-safety, most easily by updating the UI inside a [methodname]#UI.access()# call in a [interfacename]#Runnable#, as described in <>. [[components.progressbar.css]] == CSS Style Rules [source, css] ---- .v-progressbar, v-progressbar-indeterminate {} .v-progressbar-wrapper {} .v-progressbar-indicator {} ---- The progress bar has a [literal]#++v-progressbar++# base style. The progress is an element with [literal]#++v-progressbar-indicator++# style inside the wrapper, and therefore displayed on top of it. When the progress element grows, it covers more and more of the animated background. The progress bar can be animated (some themes use that). Animation is done in the element with the [literal]#v-progressbar-wrapper# style, by having an animated GIF as the background image. In the indeterminate mode, the top element also has the [literal]#++v-progressbar-indeterminate++# style. The built-in themes simply display the animated GIF in the top element and have the inner elements disabled. n> Apache XML Graphics FOP: https://github.com/apache/xmlgraphics-fopwww-data
aboutsummaryrefslogtreecommitdiffstats
path: root/test/layoutengine/standard-testcases/table_keep-with-next.xml
blob: a30d7713cdd6d16f3fe13aeab515d6ff3eea278c (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<?xml version="1.0" encoding="UTF-8"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- $Id$ -->
<testcase>
  <info>
    <p>
      This test checks that keep-with-next works on tables.
    </p>
  </info>
  <fo>
    <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
      <fo:layout-master-set>
        <fo:simple-page-master master-name="page" page-height="6cm" page-width="15cm"
          margin-top="1cm" margin-bottom="0" margin-left="1cm" margin-right="1cm">
          <fo:region-body/>
        </fo:simple-page-master>
      </fo:layout-master-set>
      <fo:page-sequence master-reference="page" font-family="serif" font-size="14pt">
        <fo:flow flow-name="xsl-region-body">
          <fo:block space-after="40pt">First line</fo:block>
          <fo:table width="100%" table-layout="fixed" border-collapse="separate" border="4pt solid black"
            keep-with-next="always" keep-together="always">
            <fo:table-column number-columns-repeated="2" column-width="proportional-column-width(1)"/>
            <fo:table-body>
              <fo:table-row>
                <fo:table-cell border="2pt solid blue">
                  <fo:block>Cell 1.1 Line 1</fo:block>
                  <fo:block>Cell 1.1 Line 2</fo:block>
                </fo:table-cell>
                <fo:table-cell border="2pt solid teal">
                  <fo:block>Cell 1.2 Line 1</fo:block>
                  <fo:block>Cell 1.2 Line 2</fo:block>
                </fo:table-cell>
              </fo:table-row>
              <fo:table-row>
                <fo:table-cell border="2pt solid green">
                  <fo:block>Cell 2.1 Line 1</fo:block>
                  <fo:block>Cell 2.1 Line 2</fo:block>
                </fo:table-cell>
                <fo:table-cell border="2pt solid olive">
                  <fo:block>Cell 2.1 Line 1</fo:block>
                  <fo:block>Cell 2.1 Line 2</fo:block>
                </fo:table-cell>
              </fo:table-row>
            </fo:table-body>
          </fo:table>
          <fo:block>After the table</fo:block>
        </fo:flow>
      </fo:page-sequence>
    </fo:root>
  </fo>
  <checks>
    <!-- Two pages -->
    <eval expected="2" xpath="count(//pageViewport)"/>
    <!-- Only one line on the first page -->
    <eval expected="1" xpath="count(//pageViewport[@nr=1]//flow/block)"/>
    <eval expected="First line" xpath="//pageViewport[@nr=1]//flow/block[1]/lineArea/text[1]"/>
    <!-- Line "Before the table" plus the table itself on the second page -->
    <eval expected="2" xpath="count(//pageViewport[@nr=2]//flow/block)"/>
    <eval expected="After the table" xpath="//pageViewport[@nr=2]//flow/block[2]/lineArea/text[1]"/>
  </checks>
</testcase>