How to desing a screen/control in composer which is bigger than the screen?

Question

Hello there

I want to create a system menu which is bigger than the actual screen. Then embedd it via a outline box to a screen (with header and footer). In the picture below you will see 2 Core::Group elements. One on the left (black). One on the right (green).

Inside the composer I want to be able to design and arrange the menu (green) and see all the content. But right now the composer is cutting off everything outside the screen size.

It works this way. But it is a nightmare to create the menu while half of it not being visible when arranging.

I am using the version 9.2 right now.

Answer 1

Hello TreeView,

actually the Composer clips the shown component contents at the blue border indicating the components area (so-called Canvas Area). Also if the component is larger than the screen in the target device (configured in the attribute ScreenSize), the contents are clipped at this ScreenSize area. From your image I suppose you have resized the GUI component so that it is larger than the screen size. The contents lying outside this area are not visible.

We fully agree that this behavior is confusing the user and we have already planed to redesign and improve the Composer in the next release.

For now, you can try to implement the menu without creating such large GUI component. For this purpose:

Step 1: Create a GUI component containing the header, footer and the Outline Box. This is what you already done as I see in the image.

Step 2: Within the component (or if you plan to create several different menus within another component derived from it) add all the items you want to be displayed. Don't worry about the arrangement of the items. You can place them chaotically one item above the other.

Step 3: Configure the property Embedded of all items to the value true. This is essential to put the items below the management of the Outline Box.

Step 4: Within the Outline Box configure the property Formation to the value Core::Formation.TopToBottom.

Now when you start the Prototyper you see the Outline Box arranges the items automatically one below the other. The order in which the items appear corresponds to the Z-order of the items. Ceating a large GUI component was not necessary in this case.

Does the workaround help you further?

Best regards

Paul Banach

Comments

actually the Composer clips the shown component contents at the blue border indicating the components area (so-called Canvas Area). Also if the component is larger than the screen in the target device (configured in the attribute ScreenSize), the contents are clipped at this ScreenSize area. From your image I suppose you have resized the GUI component so that it is larger than the screen size. The contents lying outside this area are not visible.

Yes. You are correct.

For now, you can try to implement the menu without creating such large GUI component. For this purpose: 

...

Does the workaround help you further?

I do understand what you are telling me, thank you. It would have been great to have a view within the composer to actually see the result of this menu as a whole, and you already got that idea. While I would have liked to have a better solution to this, there is one mayor issue I have with the outline box. On Vertical and horizontal lists I have the possibility to define padding on top and bottom. On the outline box I would have to add "invisible" rect views to add paddings.

It is just that I, personally, do not like workarounds that much.

Thank you for your help. This answer makes sense.

Regards
Treeview

---

Hello TreeView,

Thank you for your understanding. I hope with the next release we can provide better mechanisms in the Composer as mentioned above. Concerning the padding at the top/bottom of the Outline Box, I will take this on our request list. This should not be a big problem.

Best regards

Paul Banach