12.0p: HLayout design problem in Print preview

[Blama]

Hi Isomorphic,

please see this sample (v12.0p_2019-03-23) and how different the same class looks as Window and as Print preview.
IMHO there is something wrong with HLayout positioning.



BuiltInDS.java:

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class BuiltInDS implements EntryPoint {

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        final HLayout labelHL = new HLayout() {
            {
                setHeight(25);
                Label lb1 = new Label("label one");
                lb1.setAlign(Alignment.LEFT);
                lb1.setWidth100();

                Label lb2 = new Label("label two");
                lb2.setAlign(Alignment.CENTER);
                lb2.setWidth100();

                Label lb3 = new Label("label three");
                lb3.setAlign(Alignment.RIGHT);
                lb3.setWidth100();

                addMembers(lb1, lb2, lb3);
            }
        };

        final HLayout dynamicHL = new HLayout() {
            {
                DynamicForm df1 = new DynamicForm();
                df1.setWidth100();
                TextItem ti1 = new TextItem();
                ti1.setValue("text one");
                df1.setFields(ti1);

                DynamicForm df2 = new DynamicForm();
                df2.setWidth100();
                TextItem ti2 = new TextItem();
                ti2.setValue("text two");
                df2.setFields(ti2);

                addMembers(df1, df2);
            }
        };

        IButton windowButton = new IButton("Window");
        windowButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Window testWindow = new Window() {
                    {
                        setHeight100();
                        setWidth100();
                        setOverflow(Overflow.AUTO);
                        setTitle("Test window");
                    }
                };
                testWindow.addItem(labelHL);
                testWindow.addItem(dynamicHL);
                testWindow.show();
                testWindow.focus();
            }
        });

        IButton printPreviewButton = new IButton("Print preview");
        printPreviewButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                Object[] components = { labelHL, dynamicHL };
                Canvas.showPrintPreview(components);
            };
        });

        VLayout mainLayout = new VLayout();
        mainLayout.addMembers(windowButton, printPreviewButton);
        mainLayout.show();
    }
}

Also, is it somehow possible to get the contents of the print preview Canvas in the Developer Console Watch-tab, like for Window? Please see the screenshot.
This would make debugging way more easy.


Best regards
Blama

[Isomorphic]

We intentionally don't try to preserve spacing when printing, because in the general case, you really can't - especially with all the ambiguities introduced by various controls that need to be omitted for print.

It's not clear how you want this to look, but you could consider an HTML table inside a single Label.

As far as retrieving the print contents, you can get it as a string by just calling getPrintHTML(), or you could access the PrintCanvas via JavaScript after finding its ID in the Watch Tab, or just use the built-in browser tools to inspect the DOM. Whatever is most comfortable.

[Blama]

Hi Isomorphic,

thanks, this is working for our header (ID very left, Title center, date very right).

It is *not* working for Dynamic Forms, as I can't seem to get the DF markup in order to put it into Label. Also, I don't know if this would even work.

I'll describe the use case, perhaps there is a better practice:
We show many details of an object in many tabs of an window. Now, many users of ours are still "paper"-people and would like a printout for calls etc.
Of course, the printout should be data-dense, so we would e.g. need DynamicForms next to each other, as one form will never use a full page's width.
But if we put them in a HLayout, then this should look decently formatted, so for example the Forms should be top-aligned inside the HLayout. But it seems that all sizing and aligning attempts result in NOPs in print preview.

Then the issue with the page title that your solution from #2 solves.

I think that dumbing down H/VLayout to H/VStacks (if that is, what is effectively happening(?)) is not a good idea here.
Of course I'm open to any solution.

DynamicForms themselves do look good, so it seems some (internal(?)) formatting is preserved. And as you reuse your classes a lot, I assume that a DF will make a lot of use of Layouts(?), so this has to be possible somehow.

Best regards
Blama

[Isomorphic]

DynamicForm does not internally use Layouts. It uses an HTML table and an enormous number of browser workarounds.

You seem to be saying that you're happy with the printed output of the forms per se but not how they print when combined into HLayouts. However the only example you've given is a form that is not top-aligned as expected... but that doesn't make much sense. The printed output would be top-aligned simply because top alignment is what you get when you don't do anything to place HTML content.

So please make another attempt at explaining what's wrong.

[Blama]

Hi Isomorphic,

please see this post with a test case describing the problem in detail.

Best regards
Blama