Print Preview renders my VStack incorrectly

[Sytematic]

Hello,

Using (SC_SNAPSHOT-2012-02-27_v8.2p/PowerEdition Deployment 2012-02-27) in Firefox 10, on Mac OS X.


I have created a little overview from two RecordLists showing an order in my e-Commerce system. I use VStacks and HLayouts to create the overview shown in the attachment.

When I pass this widget into the Print functionality of SmartGWT, it looks like on the other screenshot.

Here is the code that renders everything:

protected class OrderOverview extends VStack {
	private RecordList orderedPackagesRecs = null;
	private RecordList orderedDishesRecs = null;
	VStack container = new VStack(5);
	public OrderOverview(){
		super(10);
		refresh();
	}
	
	public void refresh(){
		//fetch the data from the Order__orderedDishes_Dish and Order__orderedPackages_Package
		final Criteria c = new Criteria();
		c.setAttribute("Order__id", order.getAttribute("Order__id"));
		DSRequest req = new DSRequest();
		orderedPkgs.fetchData(c,  new DSCallback(){
			public void execute(DSResponse response, Object rawData,DSRequest request) {
				orderedPackagesRecs = response.getDataAsRecordList();
				dataSource.fetchData(c, new DSCallback(){
					public void execute(DSResponse response,Object rawData, DSRequest request) {
						orderedDishesRecs = response.getDataAsRecordList();
						
						//call the method to render the thing.
						render();
					}
				});
			}
		},req);
	}
	
	/**
	 * @require make sure the orderedPackagesRecs / orderedDishesRecs are not null 
	 */
	private void render(){
		if(orderedPackagesRecs == null || orderedDishesRecs == null) {
			Log.warn("orderedPackagesRecs || orderedDishesRecs == null, violation precondition, returning.");
			return;
		}
		if(hasMember(container)){
			Log.debug("Removing previous container");
			container.destroy();
			container = null;
			//removeMember(container);
		}
		
		Label title = new Label();
		title.setAutoHeight();
		title.setWidth("*");
		title.setContents("<h2>Bestellingsoverzicht</h2>");
		
		container = new VStack(5);
		container.setAutoHeight();
		
		container.addMember(title);

		Label pkgTitle = new Label();
		pkgTitle.setHeight(25);
		pkgTitle.setWidth("*");
		pkgTitle.setContents("<strong>Pakketten</strong>");
		
		container.addMember(pkgTitle);
		
		double sumPrice = 0.0;
		for(int i = 0; i < orderedPackagesRecs.getLength(); i++){
			Record cur = orderedPackagesRecs.get(i);
			VStack pkgBlock = new VStack(0);
			pkgBlock.setAutoHeight();
			HLayout row = new HLayout(5);
			row.setAutoHeight();
			Label amnt = new Label();
			amnt.setAutoHeight();
			amnt.setContents(cur.getAttribute("amountOrderedPkg")+" x");
			amnt.setWidth(75);
			
			Label pkgName = new Label();
			pkgName.setAutoHeight();
			pkgName.setContents("<strong>"+cur.getAttribute("pkgName")+"</strong>");
			pkgName.setAlign(Alignment.LEFT);
			pkgName.setWidth("*");
			
			Label pkgPrice = new Label();
			pkgPrice.setAutoHeight();
			
			
			Double pkgPriceVal = cur.getAttributeAsDouble("packagePrice");
			
			if(pkgPriceVal==null)
				pkgPriceVal = 0.0;
			
			
			pkgPrice.setContents(formatPrice(pkgPriceVal  * (double) cur.getAttributeAsInt("amountOrderedPkg")));
			pkgPrice.setWidth(75);
			pkgPrice.setAlign(Alignment.RIGHT);
			row.addMember(amnt);
			row.addMember(pkgName);
			row.addMember(pkgPrice);
			pkgBlock.addMember(row);
			pkgBlock.setStyleName("packageBlock");
			sumPrice += (double) pkgPriceVal * (double) cur.getAttributeAsInt("amountOrderedPkg");
			
			//get all dishes from this package
			Map<String, Object> crit = new HashMap<String,Object>();
			crit.put("Order__id", order.getAttribute("Order__id"));
			crit.put("Package_id", cur.getAttribute("Package_id"));
			Record[] dishes= orderedDishesRecs.findAll(crit);
			
			VStack subDishes = new VStack(0);
			subDishes.setAutoHeight();
			for(int j = 0; j < dishes.length; j++){
				Record curDish = dishes[j];
				
				HLayout row2 = new HLayout(5);
				
				Label amnt2 = new Label();
				amnt2.setAutoHeight();
				amnt2.setContents("&nbsp;&nbsp;"+curDish.getAttribute("amountOrdered")+" x");
				amnt2.setWidth(75);
				
				Label dishName = new Label();
				dishName.setAutoHeight();
				dishName.setContents(curDish.getAttribute("dishName"));
				dishName.setWidth("*");
				dishName.setAlign(Alignment.LEFT);

				row2.addMember(amnt2);
				row2.addMember(dishName);
				row2.setAutoHeight();
				subDishes.addMember(row2);
			}
			
			pkgBlock.addMember(subDishes);
			container.addMember(pkgBlock);
		}
		
		//do the 'separate dishes'
		VStack looseDishesContainer = new VStack(5);
		Label looseDishTitle = new Label();
		looseDishTitle.setHeight(25);
		looseDishTitle.setWidth(300);
		looseDishTitle.setContents("<strong>Losse gerechten</strong>");
		looseDishesContainer.setHeight(20);
		looseDishesContainer.addMember(looseDishTitle);
		
		for(int i = 0; i < orderedDishesRecs.getLength(); i++){
			
			Record cur = orderedDishesRecs.get(i);
			
			if(cur.getAttribute("Package_id") != null){ //skip this
				continue;
			}
	
			sumPrice += cur.getAttributeAsDouble("dishPrice") * (double) cur.getAttributeAsInt("amountOrdered");
			
			HLayout row2 = new HLayout(5);
			
			Label amnt2 = new Label();
			amnt2.setAutoHeight();
			amnt2.setContents("&nbsp;&nbsp;"+cur.getAttribute("amountOrdered")+" x");
			amnt2.setWidth(75);
			
			Label dishName = new Label();
			dishName.setAutoHeight();
			dishName.setContents(cur.getAttribute("dishName"));
			dishName.setWidth("*");
			dishName.setAlign(Alignment.LEFT);

			Label dishPrice = new Label();
			dishPrice.setAutoHeight();
			dishPrice.setContents(formatPrice(cur.getAttributeAsDouble("dishPrice")* (double) cur.getAttributeAsInt("amountOrdered")));
			dishPrice.setWidth(75);
			dishPrice.setAlign(Alignment.RIGHT);
			
			row2.addMember(amnt2);
			row2.addMember(dishName);
			row2.addMember(dishPrice);
			row2.setAutoHeight();
			
			looseDishesContainer.addMember(row2);
		}
		
		container.addMember(looseDishesContainer);
		
		
		VStack totalRow = new VStack(5);
		totalRow.setAutoHeight();
		HLayout subTotal = new HLayout(5);
		Label subtotalTitle = new Label();
		subtotalTitle.setAutoHeight();
		subtotalTitle.setWidth("*");
		subtotalTitle.setAlign(Alignment.LEFT);
		subtotalTitle.setContents("Totaal excl.BTW:");
		
		subTotal.setAutoHeight();
		Label subtotalPrice = new Label();
		subtotalPrice.setAutoHeight();
		subtotalPrice.setWidth(70);
		subtotalPrice.setAlign(Alignment.RIGHT);
		
		subtotalPrice.setContents(formatPrice(sumPrice - (0.06 * sumPrice)));
		
		HLayout vatRow = new HLayout(5);
		vatRow.setAutoHeight();
		
		
		Label vatTitle = new Label();
		vatTitle.setWidth("*");
		vatTitle.setAutoHeight();
		vatTitle.setContents("BTW (6%):");
		
		Label vatPrice = new Label();
		vatPrice.setAlign(Alignment.RIGHT);
		vatPrice.setWidth(75);
		vatPrice.setContents(formatPrice(sumPrice *0.06));
		
		subTotal.addMember(subtotalTitle);
		subTotal.addMember(subtotalPrice);
		
		vatRow.addMember(vatTitle);
		vatRow.addMember(vatPrice);

		HLayout total = new HLayout(5);
		total.setAutoHeight();
		
		Label totalTitle = new Label();
		totalTitle.setAutoHeight();
		totalTitle.setWidth("*");
		totalTitle.setContents("<strong>Totaal incl. BTW:</strong>");
		
		Label totalValue = new Label();
		totalValue.setAutoHeight();
		totalValue.setWidth(75);
		totalValue.setAlign(Alignment.RIGHT);
		totalValue.setContents("<strong>"+formatPrice(sumPrice)+"</strong>");
		
		total.addMember(totalTitle);
		total.addMember(totalValue);
	
		container.addMember(subTotal);
		container.addMember(vatRow);
		container.addMember(total);
		
		addMember(container);
	}
	
	
	private  String formatPrice(Double value) {
		if (value == null)
			return null;

		String val = null;
		try {
			NumberFormat nf = NumberFormat.getCurrencyFormat("EUR");
			val = nf.format(((Number) value).floatValue());
		} catch (Exception e) {
			return value.toString();
		}

		return val;
	}
}

I know my approach generates a lot of markup, i know, but in terms of Java it 's nicer code maybe?

Am I doing something wrong / in a bad way, resulting in the incorrect printview? Any info/ideas are welcome!

[Isomorphic]

The print system doesn't try to guarantee sizes match between the live and printed view (this is not generally possible), so two vertically stacked HStacks that have same size members will not be guaranteed to line up in print view.

Instead, you should the middle part of this display with a formatted grid (at least everything but the header and totals). In this case the various product names will be in the same grid column and will still line up in the printed view.

[Sytematic]

Okay thanks.

With a grid, would you suggest rendering a HTML Flow with a normal <table>?
Or do you mean like a stripped down ListGrid?

[Isomorphic]

If by "stripped down" you mean showHeader:false, then yes, a stripped down ListGrid.

[Sytematic]

Yeah i just want to get the cleanest look possible :-)

Thanks!