Quantcast
Channel: SmartClient Forums
Viewing all articles
Browse latest Browse all 4756

PrintPreview - several Layout issues - 2

$
0
0
I'm back, unfortunately the problem of http://forums.smartclient.com/showthread.php?t=29577 is not fully done yet.

In IE8, all fields (with the exception of DateItems) are displayed too small :-(

Please take a look at the screenshots.

Code:

package com.smartgwt.sample.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DSCallback;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DSResponse;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.fields.DataSourceBooleanField;
import com.smartgwt.client.data.fields.DataSourceDateField;
import com.smartgwt.client.data.fields.DataSourceFloatField;
import com.smartgwt.client.data.fields.DataSourceIntegerField;
import com.smartgwt.client.data.fields.DataSourceLinkField;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
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.FormItem;
import com.smartgwt.client.widgets.form.fields.HiddenItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.events.RecordClickEvent;
import com.smartgwt.client.widgets.grid.events.RecordClickHandler;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.viewer.DetailViewer;

public class Showcase implements EntryPoint {
        @Override
        public void onModuleLoad() {

                RootPanel.get().add(getViewPanel());
        }

        public Canvas getViewPanel() {


                CountryXmlDS countryDS = CountryXmlDS.getInstance();

                SectionStack printStack = new SectionStack();
                printStack.setVisibilityMode(VisibilityMode.MULTIPLE);
                printStack.setWidth(400);
                printStack.setHeight(600);

                // START 1
                final DynamicForm dynamicForm = new DynamicForm();
                dynamicForm.setDataSource(countryDS);
                TextItem df_countryCode = new TextItem("countryCode", "Code");
                SelectItem df_continentField = new SelectItem("continent", "Continent");
                TextItem df_countryName = new TextItem("countryName", "Country");
                HiddenItem df_capital_hidden = new HiddenItem("capital");
                dynamicForm.setFields(df_countryCode, df_continentField, df_countryName, df_capital_hidden);

                for (FormItem item : dynamicForm.getFields()){
                        item.setDisabled(true);
                }

                // END1

                final DetailViewer printViewer = new DetailViewer();
                printViewer.setDataSource(countryDS);
                printViewer.setWidth100();
                printViewer.setMargin(15);
                printViewer.setEmptyMessage("Select a country to view its details");

                final ListGrid printGrid = new ListGrid();
                printGrid.setHeight(150);
                printGrid.setAlternateRecordStyles(true);

                printGrid.setDataSource(countryDS);

                ListGridField countryCode = new ListGridField("countryCode", "Code", 50);
                ListGridField countryName = new ListGridField("countryName", "Country");
                ListGridField capital = new ListGridField("capital", "Capital");
                ListGridField continent = new ListGridField("continent", "Continent");
                printGrid.setFields(countryCode, countryName, capital, continent);

                printGrid.addRecordClickHandler(new RecordClickHandler() {
                        @Override
                        public void onRecordClick(RecordClickEvent event) {
                                printViewer.setData(new Record[]{event.getRecord()});
                                dynamicForm.editRecord(event.getRecord());

                        }
                });

                SectionStackSection countriesSection = new SectionStackSection("Countries");
                countriesSection.setExpanded(true);
                countriesSection.addItem(printGrid);
                printStack.addSection(countriesSection);

                SectionStackSection detailsSection = new SectionStackSection("Country Details");
                detailsSection.setExpanded(true);
                detailsSection.addItem(printViewer);
                printStack.addSection(detailsSection);


                // START 2
                SectionStackSection dfSection = new SectionStackSection("Dynamic Form");
                dfSection.setExpanded(true);
                dfSection.addItem(dynamicForm);
                printStack.addSection(dfSection);
                // END 2

                final VLayout printContainer = new VLayout(10);


                HLayout printButtonLayout = new HLayout(5);

                IButton newButton = new IButton("New");
                newButton.setDisabled(true);
                IButton changeButton = new IButton("Change");
                changeButton.setDisabled(true);
                IButton printPreviewButton = new IButton("Print Preview");
                printPreviewButton.addClickHandler(new ClickHandler() {
                        @Override
                        public void onClick(ClickEvent event) {
                                Canvas.showPrintPreview(printContainer);
                        }
                });
                printButtonLayout.addMember(newButton);
                printButtonLayout.addMember(changeButton);
                printButtonLayout.addMember(printPreviewButton);

                printContainer.addMember(printStack);
                printContainer.addMember(printButtonLayout);


                // The filter is just to limit the number of records in the ListGrid - we don't want to print them all
                printGrid.filterData(new Criteria("CountryName", "land"), new DSCallback() {
                        @Override
                        public void execute(DSResponse response, Object rawData, DSRequest request) {
                                printGrid.selectRecord(0);
                                printViewer.setData(new Record[]{printGrid.getSelectedRecord()});
                        }
                });

                return printContainer;

        }

}


class CountryXmlDS extends DataSource {

        private static CountryXmlDS instance = null;

        public static CountryXmlDS getInstance() {
                if (instance == null) {
                        instance = new CountryXmlDS("countryDS");
                }
                return instance;
        }

        public CountryXmlDS(String id) {

                setID(id);
                setRecordXPath("/List/country");
                DataSourceIntegerField pkField = new DataSourceIntegerField("pk");
                pkField.setHidden(true);
                pkField.setPrimaryKey(true);

                DataSourceTextField countryCodeField = new DataSourceTextField("countryCode", "Code");
                countryCodeField.setRequired(true);

                DataSourceTextField countryNameField = new DataSourceTextField("countryName", "Country");
                countryNameField.setRequired(true);

                DataSourceTextField capitalField = new DataSourceTextField("capital", "Capital");
                DataSourceTextField governmentField = new DataSourceTextField("government", "Government", 500);

                DataSourceBooleanField memberG8Field = new DataSourceBooleanField("member_g8", "G8");

                DataSourceTextField continentField = new DataSourceTextField("continent", "Continent");
                continentField.setValueMap("Europe", "Asia", "North America", "Australia/Oceania",
                                "South America", "Africa");

                DataSourceDateField independenceField = new DataSourceDateField("independence", "Nationhood");
                DataSourceFloatField areaField = new DataSourceFloatField("area", "Area (km²)");
                DataSourceIntegerField populationField = new DataSourceIntegerField("population", "Population");
                DataSourceFloatField gdpField = new DataSourceFloatField("gdp", "GDP ($M)");
                DataSourceLinkField articleField = new DataSourceLinkField("article", "Info");

                setFields(pkField, countryCodeField, countryNameField, capitalField, governmentField,
                                memberG8Field, continentField, independenceField, areaField, populationField, gdpField,
                                articleField);

                setDataURL("ds/test_data/country.data.xml");
                setClientOnly(true);
        }
}

Code:

<!DOCTYPE HTML>
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set    -->
<!-- the browser's rendering engine into          -->
<!-- "Quirks Mode". Replacing this declaration    -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.  -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--                                          -->
    <!-- Any title is fine                        -->
    <!--                                          -->
    <title>BuiltInDS</title>
   
    <!-- IMPORTANT : You must set the variable isomorphicDir to [MODULE_NAME]/sc/ so that the SmartGWT resource are
          correctly resolved -->       
        <script> var isomorphicDir = "builtinds/sc/"; </script>
       
    <!--                                          -->
    <!-- This script loads your compiled module.  -->
    <!-- If you add any GWT meta tags, they must  -->
    <!-- be added before this line.                -->
    <!--                                          -->     
    <script type="text/javascript" language="javascript" src="builtinds/builtinds.nocache.js"></script>
  </head>

  <!--                                          -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                          -->
  <body>

    <!--load the datasources-->
    <script src="builtinds/sc/DataSourceLoader?dataSource=supplyItem,animals,employees"></script>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

  </body>
</html>

the DOCTYP does not matter here.
<!DOCTYPE HTML> vs. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
the appearance is the same.


best regards,
mirko

i used: Isomorphic SmartClient/SmartGWT Framework (v9.0p_2014-03-02/PowerEdition Deployment 2014-03-02)


Viewing all articles
Browse latest Browse all 4756

Trending Articles