While football players are restricted by the field area (watching the championship, eh?), web developers compete with each other in an even smaller battlefield called viewport. And the one wins who manages to occupy every inch of it wisely.
Still, you can always add one more layer to your application and choose content you’d like to show first. No doubt, Webix is always at hand with ready-made solutions for multiple-view layouts:
- Accordion widget
- Carousel widget
- Multiview widget
All of them allow showing parts of content (views) in turn while offering different navigation patterns. We have already played the accordion a month ago and now I suggest to balance on the border line between Carousel and Multiview that look very similar at first sight.
With both widgets you can create a stack of views and show & hide them on demand. Still widget possibilities and the implied purpose are not the same.
Multiview and Carousel widgets in touch environment
Here you face the most crucial argument during choosing the right widget. Webix Carousel offers touch scrolling out of the box, which means that the views inside can be switched by swiping the finger on the device screen.
Multiview control comes without this possibility, but you can can attach custom logic to onSwipeX and onSwipeY events and do some API gymnastics to switch to the next cell.
Multiview and Carousel navigation
Webix Carousel comes with built-in navigation controls that lie within a Carousel container in a transparent layer above the active view. They include direction arrows and round buttons linked to the views. You can disable them if not needed.
Multiview control, on the contrary, doesn’t have any built-in navigation and requires a separate control for switching between views. Tabbar and Segmented button are normally used for these means. Tabbar is a highly customizable control – you can embed active icons to it, hide and show its options, etc.
For the most common use case Webix team saved your time and created an integral control, Tabview, that consists of a Tabbar and Multiview and does all the binding work automatically.
Multiview and Carousel API
And of course, you can navigate by API!
From my point of view Carousel features more flexible API that allows getting and setting IDs or indices of active views as well as offers special methods for showing the next and the previous view.
Multiview works with IDs mainly, but on the positive side it has a useful .back() method to return to the previously visible view.
Animation with Multiview and Carousel
Here Multiview definitely wins. You can use all the animation settings with it: “slide” and “flip” types with their corresponding subtypes, or even totally disable animation.
Webix Javascript Carousel has only “slide” animation with the necessary scrolling direction.
Filling Multiview and Carousel with content
Both Carousel and Multiview can house all Webix widgets in their cells. Images and HTML content are also easily embedded with the help of Webix Template control.
As to view arrangement, you can define Carousel layout by placing views into rows or columns. But note that default navigation controls are well suited only to horizontal layout (cols).
The cells in Multiview are arranged horizontally, but you can change animation direction to create visual impression of a vertical layout:
animate:{ type:"slide", direction:"top" },
cells:[...]
});
To cut a long story short..
- Multiview is designed for displaying views different in purpose, e.g. a data list, form, or text content, in one Multiview;
- Carousel is better for a homogeneous set of views like images as it looks more like a scrollable list with one item visible at a moment;
- Multiview is designed for small quantity of views (3-5 of them, but nothing stops you from adding more) while Carousel can be as long as a snake;
- Only Carousel implies non-stop circular navigation, while Multiview is finite;
- Only Carousel views can be swiped by a finger on touch devices.
Still, practice may lead you to more profound experience than theory, so check the samples of Multiview and Carousel and use documentation (here and there) to overcome customization challenges. Good news – all the features are available in GPL edition!
