Project

General

Profile

« Previous | Next » 

Revision 08f24060

Added by Andreas Kohlbecker almost 7 years ago

ref #6169 abstract page view having header and sub-header

View differences:

src/main/java/eu/etaxonomy/cdm/vaadin/component/phycobank/RegistrationItem.java
77 77

  
78 78
    public void init() {
79 79

  
80
        setId("registration-list");
81 80
        setWidth(100, Unit.PERCENTAGE);
82 81
        addStyleName("registration-item");
83 82

  
84 83
        typeStateLabel.setStyleName(STYLE_LABEL_NOWRAP);
85 84
        addComponent(typeStateLabel, 0, 0);
86
        setComponentAlignment(typeStateLabel, Alignment.MIDDLE_LEFT);
85
        setComponentAlignment(typeStateLabel, Alignment.TOP_LEFT);
87 86

  
88 87
        addComponent(identifierLink, 1, 0);
89 88
        setComponentAlignment(identifierLink, Alignment.TOP_CENTER);
src/main/java/eu/etaxonomy/cdm/vaadin/view/AbstractPageView.java
1
/**
2
* Copyright (C) 2017 EDIT
3
* European Distributed Institute of Taxonomy
4
* http://www.e-taxonomy.eu
5
*
6
* The contents of this file are subject to the Mozilla Public License Version 1.1
7
* See LICENSE.TXT at the top of this package for the full license terms.
8
*/
9
package eu.etaxonomy.cdm.vaadin.view;
10

  
11
import com.vaadin.shared.ui.label.ContentMode;
12
import com.vaadin.ui.CssLayout;
13
import com.vaadin.ui.Label;
14
import com.vaadin.ui.themes.ValoTheme;
15

  
16
import eu.etaxonomy.vaadin.mvp.AbstractPresenter;
17
import eu.etaxonomy.vaadin.mvp.AbstractView;
18

  
19
/**
20
 * A Page based on a <code>CssLayout</code> expanded to full size having a header and sub-header.
21
 *
22
 * The whole header section is build using a single <code>Label</code> for better performance.
23
 *
24
 * @author a.kohlbecker
25
 * @since Mar 20, 2017
26
 *
27
 */
28
public abstract class AbstractPageView<P extends AbstractPresenter> extends AbstractView<P>  {
29

  
30
    private CssLayout layout;
31

  
32
    private Label header;
33

  
34

  
35
    /**
36
     *
37
     */
38
    public AbstractPageView() {
39
        layout = new CssLayout();
40
        layout.setSizeFull();
41

  
42
        header = new Label();
43
        header.setStyleName(ValoTheme.LABEL_HUGE);
44
        header.setWidth(100, Unit.PERCENTAGE);
45
        header.setContentMode(ContentMode.HTML);
46
        header.setValue("<div id=\"header\">" + getHeaderText() + "</div><div id=\"subheader\">" + getSubHeaderText() + "</div>");
47
        layout.addComponent(header);
48

  
49
        setCompositionRoot(layout);
50
        this.setSizeFull();
51
    }
52

  
53
    protected CssLayout getLayout() {
54
        return layout;
55
    }
56

  
57
    /**
58
     * Provides the sub header text
59
     *
60
     * @return
61
     */
62
    protected abstract String getHeaderText();
63

  
64
    /**
65
     * Provides the header text
66
     *
67
     * @return
68
     */
69
    protected abstract  String getSubHeaderText();
70

  
71

  
72

  
73
}
src/main/java/eu/etaxonomy/cdm/vaadin/view/phycobank/ListViewBean.java
18 18
import com.vaadin.data.util.PropertyValueGenerator;
19 19
import com.vaadin.navigator.View;
20 20
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
21
import com.vaadin.shared.ui.MarginInfo;
22 21
import com.vaadin.shared.ui.grid.HeightMode;
23 22
import com.vaadin.spring.annotation.SpringView;
24
import com.vaadin.ui.Alignment;
25 23
import com.vaadin.ui.Component;
24
import com.vaadin.ui.CssLayout;
26 25
import com.vaadin.ui.Grid;
27 26
import com.vaadin.ui.Grid.Column;
28 27
import com.vaadin.ui.Grid.SelectionMode;
29
import com.vaadin.ui.Label;
30
import com.vaadin.ui.Panel;
31
import com.vaadin.ui.VerticalLayout;
32 28
import com.vaadin.ui.renderers.ButtonRenderer;
33 29
import com.vaadin.ui.renderers.DateRenderer;
34 30
import com.vaadin.ui.renderers.HtmlRenderer;
35
import com.vaadin.ui.themes.ValoTheme;
36 31

  
37 32
import eu.etaxonomy.cdm.vaadin.component.phycobank.RegistrationItem;
38 33
import eu.etaxonomy.cdm.vaadin.presenter.phycobank.ListPresenter;
39 34
import eu.etaxonomy.cdm.vaadin.presenter.phycobank.RegistrationDTO;
40 35
import eu.etaxonomy.cdm.vaadin.util.JodaDateTimeConverter;
41 36
import eu.etaxonomy.cdm.vaadin.util.UrlStringConverter;
42
import eu.etaxonomy.vaadin.mvp.AbstractView;
37
import eu.etaxonomy.cdm.vaadin.view.AbstractPageView;
43 38
import eu.etaxonomy.vaadin.ui.navigation.NavigationEvent;
44 39

  
45 40
/**
......
48 43
 *
49 44
 */
50 45
@SpringView(name=ListViewBean.NAME)
51
public class ListViewBean extends AbstractView<ListPresenter> implements ListView, View {
46
public class ListViewBean extends AbstractPageView<ListPresenter> implements ListView, View {
52 47

  
53 48
    private static final long serialVersionUID = 3543300933072824713L;
54 49

  
55 50
    public static final String NAME = "list";
56 51

  
57
    private VerticalLayout layout;
52
    CssLayout listContainer;
58 53

  
59 54
    private Grid grid;
60 55

  
61
    private Panel panel;
62

  
63 56
    public ListViewBean() {
64
        layout = new VerticalLayout();
65
        layout.setSpacing(true);
66
        layout.setSizeFull();
67 57

  
68
        Label title = new Label("Registrations");
69
        title.setStyleName(ValoTheme.LABEL_HUGE);
70
        title.setWidthUndefined();
71
        layout.addComponent(title);
72
        layout.setComponentAlignment(title, Alignment.TOP_CENTER);
58
        super();
73 59

  
74
        Label hint = new Label("This is the list of all your registrations in progress.");
75
        hint.setWidthUndefined();
76
        layout.addComponent(hint);
77
        layout.setComponentAlignment(hint, Alignment.MIDDLE_CENTER);
60
        CssLayout toolBar = new CssLayout();
61
        // toolBar.addComponent(new Button);
78 62

  
79 63
//        grid = buildGrid();
80 64
//        layout.addComponent(grid);
81 65
//        layout.setExpandRatio(grid, 1);
82 66

  
83
        buildPanel();
67
        listContainer = new CssLayout();
68
        listContainer.setId("registration-list");
69
        listContainer.setWidth(100, Unit.PERCENTAGE);
70
        listContainer.setHeight(100, Unit.PERCENTAGE);
71

  
72
        getLayout().addComponent(listContainer);
84 73

  
85
        setCompositionRoot(layout);
86
        this.setSizeFull();
87 74
    }
88 75

  
89
    /**
90
     *
91
     */
92
    private void buildPanel() {
93
        panel = new Panel();
94
        panel.setSizeFull();
95
        panel.setId("registration-list");
96
        layout.addComponent(panel);
97
        layout.setExpandRatio(panel, 1);
76
    @Override
77
    protected String getHeaderText() {
78
        return "Registrations";
79
    }
80

  
81
    @Override
82
    protected String getSubHeaderText() {
83
        return "This is the list of all your registrations in progress.";
98 84
    }
99 85

  
100 86
    private Grid buildGrid() {
......
189 175
     */
190 176
    @Override
191 177
    public void populateList(Collection<RegistrationDTO> registrations) {
192
        VerticalLayout list = new VerticalLayout();
193
        list.setMargin(new MarginInfo(false, true));
194
        list.setSpacing(true);
178

  
195 179
        for(RegistrationDTO regDto : registrations) {
196 180

  
197 181
            Component lazyItem = new RegistrationItem(regDto, this); //new LazyLoadWrapper(new RegistrationItem(regDto, this));
198
            list.addComponent(lazyItem);
182
            lazyItem.setWidth(100, Unit.PERCENTAGE);
183
            listContainer.addComponent(lazyItem);
199 184
//            if(list.getComponentCount() > 10){
200 185
//                break;
201 186
//            }
202 187
        }
203
        panel.setContent(list);
188
        // panel.setContent(listContainer);
204 189

  
205 190
    }
206 191

  
src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
72 72

  
73 73
  // Insert your own theme rules here
74 74
  
75
  // --- AbstractPageView --- // 
76
  #header {
77
    text-align: center;
78
    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing
79
    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)
80
  }
81

  
82
  #subheader {
83
    text-align: center;
84
    margin: round($v-layout-spacing-vertical/2);
85
    font-size: $v-font-size; // valo default font size (16px)
86
  }
87
  // ------------------- // 
88
  
75 89
  .logo_giant {
76 90
    font-size: 400%;
77 91
   }
......
193 207
    }
194 208
    
195 209
    #registration-list {
210
        /* --- for the css layout --- */
211
        overflow: auto;
212
        height: 100%;
213
        padding-left: round($v-unit-size/3);
214
        padding-right: round($v-unit-size/3);
215
        
216
        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);
217
        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
218
        /* ----------------------------------------------- */
219
        
196 220
        // for grid rows
197 221
        .status-REJECTED {
198 222
            color: $status-rejected-color;

Also available in: Unified diff