I've got a user interface that is meant to be viewed on a tablet so there is not much room.
It contains a data entry and a menù with some buttons.
The idea is to create a separate view for the buttons; this way not only saves space on the data entry page, but also prevents to press the buttons inadvertently.
Now it would be nice that the transition between data entry and menus was animated, like the one in the carousel container.
So i tried to use that one; the only gotcha is that there has to be an explicit "Menù" button (or the hamburger) to launch the menù page and not the standard button of the carousel.
Luckily those buttons (the arrows and the dots) can be disabled, and I can put a Button on the form that causes the carousel to show the menù page.
This can be done with the following code:
self.getSibling("Carousel").props.activePane = 1
This works but unfortunately setting the activePane via code causes the carousel to switch to the menù view without transition.
Obviously this is not a 'blocking' problem, however we are trying to 'modernize' the UI and this kind of animations are what we were looking for.
Is it a way to fix this? Is there a way to introduce a similar transitions on another type of container?
Use the View Canvas instead. It will allow you to specify any number of different Views to be used, and you determine their location at any given time. With your layout, you would position the "Menu" item at 100% (off-screen), and then clicking the button would change the location to 0% while simultaneously moving the "Main Form" View to -100% (or you could just overlay the Menu onto the Main Form if it has a true background color applied at the rot node. Just make sure you set the overflow style property of the View Canvas to "hidden".
Thanks cmallonee; using the canvas solves the problem.
Unfortunately embedding my main view in a view canvas breaks my layout.
That because the main view should be resizable based on the screen size. When i embed it into a Canvas, it 'looses' this ability. Let me show you.
I implemented a dummy view with a green background (called "detail").
There is then a main view with a View Canvass that has a couple of instances of my detail view, one that represents my main content view and the other one that represents my menù view.
I used the solution you suggested, so the menù view starts with a left of 100% and i played with different ways of showing the menù and they all works great.
The problem is that the main view no longer gets stretched to fill all the canvass visibile area (that in turn is bound to the screen because it's into a coordinate view in percentage mode).
I tried to change with and height of the instance from auto to 100% or even to fixed-pixel-size, but it seems that it doesn't consider that value.
So if there is no solution to this, I must rollback to a different solution because even if the animation is nice, the resizing behavior is a non expendable feature.
Set ViewCanvas.props.useDefaultViewWidth and ViewCanvas.props.useDefaultViewHeight to false.
