Four Js Development Tools Forum

Hi all,

I have a few questions around layout...

1) How do I reorder fields/elements within a container? If I drag the field/element to a different location it becomes a child of the field/element where I drop it, whereas I only want it to change the order...

2) In terms of the designer all my fields fit into the container as a single line. But when printed they do not and a field ends up on a 2nd line. What causes this? It's hard to design something which looks right if the design does not 100% match the output!

3) I drag a field onto a container and can't move it's position with the mouse until I change the X and/or Y properties and then I can move it. What causes this?

4) Normally when I adjust a field size I only want to alter its width and not it's width and height. I can do this by clicking on the field twice, but it's easy to forget this and only do it once. Is there someway to swap this behaviour around or some other way to make a single click just alter the width always?

5) Whilst working on a report yesterday the 2 sections in my onEveryRow section disappeared in the design view but the report still printed just fine. As I could no longer see them I could not make any furthe layout changes to those sections as I could not see how those changes might look. I ended up creating new containers which I could see ok and transferring over all the properties I had on the hidden ones and all of their children. I checked all the properties of the containers were identical and yet 2 were hidden and 2 not! Once fully transferred I deleted the hidden ones and touch wood it's been ok since. Any ideas what might have caused this?

TIA,

David

Hi David,

>1) How do I reorder fields/elements within a container?

I take it that you mean reorder visually (e.g. swap field positions in a list)?
This question can be answered with several ifs and buts (e.g. is y set on the objects or is the element dragged in the document view or in the structure).
Therefore I need to first know if you are already familiar with the difference between "layouted" objects (object that have no fixed value for y) and positioned/floating objects that have a fixed y value?

>2) In terms of the designer all my fields fit into the container as a single line. But when printed they do not and a field ends up on a 2nd line.

This is caused by "propagation". You are likely using a horizontal MiniPage or a Stripe as the container that represents the line. When the content of the line exceeds the paper width, the line "propagates" (creates a clone of itself) and pushes the excess material to the clone. The parent of the line (typically a vertical box) then arranges the clone below the original thereby creating a second line. The process is then repeated for the clone so that multiple lines can be created.
If you don't want that to happen then you should use a horizontal box (LayoutNode) instead. These do not propagate but you risk that object will be placed in the margin or even off the page.
All of the sample reports and template reports cater for the fact that strings can have different sizes at runtime and they try to avoid truncating data. The reports can be internationalized at runtime, they can be run remotely on machines where the fonts possibly do not have the same metrics and they work with different paper formats.

>What causes this? It's hard to design something which looks right if the design does not 100% match the output!

This typically happens when you use the "New Report/List Report" template for your reports. This report design uses a horizontal Minipage as lines and defines a space character an "ItemSeparator" (Section attribute). This is a nice trick to make it easy to populate the line with fields without having to worry about putting separators between each of the items but you have to know that the runtime will do that eventually and then the line will grow by n-1 spaces if the line has n elements.

>3) I drag a field onto a container and can't move it's position with the mouse until I change the X and/or Y properties and then I can move it. What causes this?

You can move it but it doesn't move pixel exact. Open for example the "OrderList" report from the OrderReport demo and drag a data field in the list to the left or the right. It will swap position with other fields as you drag it across and in in vertical direction it will snap to the various alignment positions. An object that doesn't have x and y set tells the system "please compute x and y for me". We call them "Layouted Objects" and their attachment point is green. A a report that handles size changes well, consists of 99% layouted objects. All the demo reports are like that but for the OrderStock" report which is a form report where all items are at predefined positions.

I think that you are at a point where you could get a lot out of the online videos or a training. They both explain the concepts and the things that matter a lot which might otherwise be hard to discover.

I hope that this helps a little.

Best regards,

Alex

>5) Whilst working on a report yesterday the 2 sections in my onEveryRow section disappeared in the design view but the report still printed just fine. As I could no longer see them I could not make any furthe layout changes to those sections as I could not see how those changes might look. I ended up creating new containers which I could see ok and transferring over all the properties I had on the hidden ones and all of their children. I checked all the properties of the containers were identical and yet 2 were hidden and 2 not! Once fully transferred I deleted the hidden ones and touch wood it's been ok since. Any ideas what might have caused this?

No, it sounds like a bug but it doesn't ring a bell. If this happens again, please send us the .4rp file so that we can have a look.

 
 

 

As a beginner, you are probably adding objects by dropping them into the Design View and hard-coding and manipulating the X, Y, X-Size, Y-Size properties.

Two pieces of high-level advice...
learn howto interpret the Report Structure View (Windows->Views->Report Structure) and how to change the report design by dragging objects onto and moving objects in the Report Structure View
learn the difference between absolute and relative positioning.

It is covered in first two sections here http://4js.com/online_documentation/fjs-gst-manual-html/#gst-topics/c_grd_reportdesign_005.html

I have a saying, Green Dot good, Red Dot bad.  A red dot on the report object in the design view indicates absolute positioning and the X,Y properties have been set.  A green dot on the report object in the design view indicates relative positioning and the X,Y properties have not been set.   (if you see a blue or yellow dot, it indicates one of X and Y have been set).    Use of absolute positioning should be rare and it is appropriate when something needs to appear in certain position of a page e.g. an address to line up in the window of an envelope, or if you are printing onto pre-printed paper, or getting in a certain position relative to the parent e.g. X=0 + Anchor X= 0, X=max/2 + Anchor X = 0.5, X=max + Anchor X = 1.0

With Relative Positioning, you can use the Report Structure View to reorder children of a parent.  So to swap the order of two relatively positioned objects, in the Report Structure View drag the child up or down

Object size is determined by the X-Size or Y-Size properties.  You may see values such as "max(width("{"Orderid".translate()}"),width("-0000000000"))" which basically says the size of the object is either the width required to render "Orderid" using the current font properties,  or the width required to render "-0000000000".  You may see values such as width("M")*20 which is size of the object wide enough to display 20 characters.  If the property is blank, it will be sized by content.  If the content changes on each page/row then the size of that object will change.  If that object is positioned relatively then the position of any younger siblings will change.  With columns as in OrderList make sure X-Size is same value for each row.

So to answer quickly your 5 points I would have said

1) Drag and Drop in the Report Structure View

2) I would say look at the X-size, Y-size property of the objects on the line.  My guess would be that it varies based on the data, either because it is blank or you have something like width(fieldname).  Alex covers the case when overflow occurs but chances are you want to stop it getting to the point of overflow occuring in the first place.  That can be done by setting X-size to values e.g. 2cm and making sure they sum to less than width of page.

3) I suspect relative positioned (green dot) and maybe only child.

4) When the report object has focus, you will see 8 blue rectangles, 4 on the corners, 4 in the center of each border.  If you drag the blue rectangle in the center, it will only resize in that dimension, drag the blue rectangle in the corner it will resize in two dimensions.    (actually this was new in 3.20 , see entry 8 Table 8 http://4js.com/online_documentation/fjs-gst-manual-html/#gst-topics/gst_whatsnew_320_2.html so you maybe using 3.10 or older?).  In most cases you would want to be setting the size by setting value in X-Size, Y-Size property rather than using mouse.

5) I bet you would have found the missing objects in your Report  Structure view.  Reason you did not see them in Design View is perhaps their X,Y properties are hard-coded to a value off the Design View, or their parent had changed, or Parent or LayoutDirection has been changed so what was a good value is no longer a good value.