Version 6 vs Version 7

Michael180 · March 15, 2013, 12:00pm

Hi,

I was doing the project. I was trying to add HorizontalLayout to VerticalLayout in version7 and it did not work. It worked in version 6. I’ll illustrate what I had done as below;

VERSION 6

public class MySampleVaadinApplication extends Application {
@Override
public void init() {
setTheme(“bcx”);
Window mainWindow = new Window(“Vaadin Application”);
VerticalLayout verticalLayout = new VerticalLayout();

    HorizontalLayout horizontalLayout = new HorizontalLayout();
    verticalLayout.addComponent(horizontalLayout);

    Embedded embedded = new Embedded(null, new ThemeResource("img/polka.gif"));
    embedded.setType(Embedded.TYPE_IMAGE);
    horizontalLayout.addComponent(embedded);

    Label label = new Label("Hello Vaadin user");
    horizontalLayout.addComponent(label);

    mainWindow.addComponent(verticalLayout);
    setMainWindow(mainWindow);
}

}

It came out as label situated beside icon as per version 6.doc

I did same way in verion 7. The picture did not come out right.

VERSION 7

@Theme(“bcx”)
@Title(“Test”)
public class MySampleVaadinApplication extends UI {
@Override
public void init(VaadinRequest request) {
VerticalLayout verticalLayout = new VerticalLayout();
setContent(verticalLayout);
HorizontalLayout horizontalLayout = new HorizontalLayout();
verticalLayout.addComponent(horizontalLayout);

    Embedded embedded = new Embedded(null, new ThemeResource("img/polka.gif"));
    horizontalLayout.addComponent(embedded);
    Label label = new Label("Hello Vaadin user");
    horizontalLayout.addComponent(label);
}

}

It did not come out correctly. The label appeared below the icon, NOT label appeared beside icon. as per version 7.doc.
How can I overocme the problem?

Regards,

Michael
12864.docx (106 KB)
12865.docx (102 KB)

Henri2 · March 15, 2013, 12:32pm

A first guess: maybe some layout sizes are invalid but happened to work the way you expected in Vaadin 6 anyway.

Add “?debug” to the URL and click “AL” (Analyze layouts), and check the debug console for any messages about invalid layouts.

Michael180 · March 15, 2013, 3:27pm

I did debug and found nothing. I set all layout to undefinded size. Nothing worked. Here is the report of debug as below; I could not make out of it.

BCX Security Dashboard
Debug window
Autoscroll Dev SDev
Drag title=move, shift-drag=resize, doubleclick title=min/max.Use debug=quiet to log only to browser console.
17:15:22:442 Starting Vaadin client side engine. Widgetset: com.vaadin.DefaultWidgetSet
17:15:22:443 Widget set is built on version: 7.0.2
17:15:22:477 Starting application securitydashboard-1126865748
17:15:22:478 Using theme: bcx
17:15:22:479 Vaadin application servlet version: 7.0.2
17:15:22:481 inserting load indicator
17:15:22:482 Scheduling heartbeat in 300 seconds
17:15:22:483 JSON parsing took 1ms
17:15:22:484 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:517 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:555 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:597 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:646 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:706 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:762 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:813 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:860 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:907 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:22:956 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:009 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:061 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:113 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:163 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:212 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:262 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:313 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:363 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:413 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:476 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:524 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:572 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:621 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:670 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:722 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:773 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:823 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:873 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:924 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:23:973 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:024 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:075 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:125 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:175 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:225 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:275 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:325 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:375 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:426 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:476 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:526 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:576 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:628 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:677 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:728 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:777 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:828 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:879 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:929 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:24:980 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:030 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:080 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:131 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:180 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:231 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:281 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:332 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:382 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:432 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:482 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:532 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:582 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:633 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:683 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:733 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:784 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:834 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:884 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:934 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:25:984 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:035 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:085 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:135 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:185 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:235 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:286 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:336 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:386 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:436 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:486 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:537 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:587 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:637 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:687 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:737 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:788 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:840 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:890 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:940 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:26:990 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:041 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:091 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:142 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:193 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:243 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:295 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:344 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:395 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:444 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
17:15:27:494 Handling message from server
17:15:27:495 * Handling resources from server
17:15:27:495 * Handling type inheritance map from server
17:15:27:496 Handling type mappings from server
17:15:27:497 Handling resource dependencies
17:15:27:498 * Handling locales
17:15:27:498 * Handling meta information
17:15:27:498 * Creating connectors (if needed)
17:15:27:501 * Updating connector states
17:15:27:505 * Updating connector hierarchy
17:15:27:506 * Sending hierarchy change events
17:15:27:510 * Running @DelegateToWidget
17:15:27:511 * Sending state change events
17:15:27:514 * Passing UIDL to Vaadin 6 style connectors
17:15:27:515 * Unregistered 0 connectors
17:15:27:516 handleUIDLMessage: 18 ms
17:15:27:516 Starting layout phase
17:15:27:516 Measured 0 non connector elements
17:15:27:522 Pass 1 measured 2 elements, fired 1 listeners and did 0 layouts.
17:15:27:524 Did overflow fix for 1 elements
17:15:27:525 Pass 2 measured 1 elements, fired 0 listeners and did 0 layouts.
17:15:27:525 No more changes in pass 3
17:15:27:526 Total layout phase time: 10ms
17:15:27:526 * Dumping state changes to the console
-Response:
-change pid=5
-com.vaadin.client.ui.ui.UIConnector id=5 location=http://localhost:8085/securitydashboard/?debug
-change pid=8
-com.vaadin.client.ui.embedded.EmbeddedConnector id=8 type=image src=theme://img/polka.gif mimetype=image/gif
-shared state
-HorizontalLayoutConnector (7)
-childData=object
-9=object
expandRatio=0
alignmentBitmask=5
-8=object
expandRatio=0
alignmentBitmask=5
-VerticalLayoutConnector (6)
height=“100.0%”
width=“100.0%”
-styles=array
0=“rootPanel”
-childData=object
-7=object
expandRatio=0
alignmentBitmask=5
-UIConnector (5)
height=“100.0%”
width=“100.0%”
-LabelConnector (9)
text=“BCX Security Dashboard”
-styles=array
0=“headLabel”
17:15:27:537 Processing time was 43ms for 1909 characters of JSON
17:15:27:538 Referenced paintables: 5
17:15:27:538 CSS files may have not loaded properly.
17:15:27:545 Embeddable onload
17:15:27:644 Starting layout phase
17:15:27:646 Measured 0 non connector elements
17:15:27:653 Pass 1 measured 3 elements, fired 0 listeners and did 0 layouts.
17:15:27:655 Did overflow fix for 1 elements
17:15:27:656 Pass 2 measured 1 elements, fired 0 listeners and did 0 layouts.
17:15:27:656 No more changes in pass 3
17:15:27:656 Total layout phase time: 11ms
17:16:32:911 Making UIDL Request with params: 52868045-00fd-408b-af8c-7cbc8f2e342d
17:16:32:926 Server visit took 16ms
17:16:32:928 JSON parsing took 0ms
17:16:32:928 Handling message from server
17:16:32:929 * Handling resources from server
17:16:32:930 * Handling type inheritance map from server
17:16:32:930 Handling type mappings from server
17:16:32:932 Handling resource dependencies
17:16:32:933 * Handling locales
17:16:32:933 * Handling meta information
17:16:32:934 * Updating connector hierarchy
17:16:32:937 * Sending hierarchy change events
17:16:32:939 * Unregistered 4 connectors
17:16:32:940 * Creating connectors (if needed)
17:16:32:942 * Updating connector states
17:16:32:945 * Updating connector hierarchy
17:16:32:945 * Sending hierarchy change events
17:16:32:949 * Running @DelegateToWidget
17:16:32:949 * Sending state change events
17:16:32:952 * Passing UIDL to Vaadin 6 style connectors
17:16:32:954 * Unregistered 0 connectors
17:16:32:954 handleUIDLMessage: 14 ms
17:16:32:955 Starting layout phase
17:16:32:955 Measured 0 non connector elements
17:16:32:960 Pass 1 measured 2 elements, fired 1 listeners and did 0 layouts.
17:16:32:961 Did overflow fix for 1 elements
17:16:32:963 Pass 2 measured 1 elements, fired 0 listeners and did 0 layouts.
17:16:32:963 No more changes in pass 3
17:16:32:963 Total layout phase time: 8ms
17:16:32:964 * Dumping state changes to the console
-Response:
-change pid=5
-com.vaadin.client.ui.ui.UIConnector id=5 location=http://localhost:8085/securitydashboard/?debug
-change pid=8
-com.vaadin.client.ui.embedded.EmbeddedConnector id=8 type=image src=theme://img/polka.gif mimetype=image/gif
-shared state
-HorizontalLayoutConnector (7)
-childData=object
-9=object
expandRatio=0
alignmentBitmask=5
-8=object
expandRatio=0
alignmentBitmask=5
-VerticalLayoutConnector (6)
height=“100.0%”
width=“100.0%”
-styles=array
0=“rootPanel”
-childData=object
-7=object
expandRatio=0
alignmentBitmask=5
-UIConnector (5)
height=“100.0%”
width=“100.0%”
-LabelConnector (9)
text=“BCX Security Dashboard”
-styles=array
0=“headLabel”

Layouts analyzed on server, total top level problems: 0
Client side notifications
The following relative sized components were rendered to a zero size container on the client side. Note that these are not necessarily invalid states, but reported here as they might be.

Vertically zero size:

UIConnector inside (null)
17:16:32:976 ************************
17:16:32:976 Processing time was 49ms for 1869 characters of JSON
17:16:32:977 Referenced paintables: 5
17:16:32:985 Embeddable onload
17:16:33:080 Starting layout phase
17:16:33:083 Measured 0 non connector elements
17:16:33:089 Pass 1 measured 3 elements, fired 0 listeners and did 0 layouts.
17:16:33:091 Did overflow fix for 1 elements
17:16:33:092 Pass 2 measured 1 elements, fired 0 listeners and did 0 layouts.
17:16:33:092 No more changes in pass 3
17:16:33:093 Total layout phase time: 11ms
17:20:22:483 Sending heartbeat request…
17:20:22:491 Heartbeat response OK
17:20:22:493 Scheduling heartbeat in 300 seconds

Michael180 · March 18, 2013, 7:45am

Any response?

Michael180 · March 18, 2013, 4:00pm

I solved the problem.