October 7, 2011
In this post we explore using the 5ml viewset widget to create an interactive slideshow in minutes without any coding.
The viewset widget belongs to a family of 5ml widgets that are built around the idea of multiple content views.
Put simply, a viewset is a stack of different content views, always showing one view as active.
Create a new project in 5ml and open in the 5ml project editor.
To create a viewset, just drag and drop a viewset widget on to the page canvas. By default, a viewset contains only one view. You can add/remove views by using the add/remove buttons included in the viewset’s overlay menu.
(tip: use center in the X position in order for the viewset to appear always centered on the page)
Each content view can contain one or more 5ml widgets, incl. nesting other viewsets. In that respect, a view is quite similar to a page or a container.
Next, let’s add a unique background color gradient and a label widget in each view to identify them more easily.
To edit the content for each view, select the view in the Page Outline or go to the desired view via the previous/next buttons available on the viewset’s overlay toolbar.
To change the background of the selected view, click on the Appearance tab (second from the left) in the Properties pane. The Background drop-down list contains plenty of options, ranging from solid colors, to color gradients, and custom images. For this example, I have used a simple color gradient based on two colors (default) but you can add as many colors that you want by clicking on the gradient color bar.
Next, drag and drop a label widget inside the first view. Using the label’s Text properties tab you can apply any text formatting of your preference.
(note: In addition to standard fonts, 5ml includes support for the Google Font API, so using web fonts is super easy as 5ml takes away the burden of embedding code snippets)
To add labels and change the background properties in the remaining two views, simply repeat the above process.
Showing a view indicator
With the viewset selected on the canvas, simply check the “Show Dots” property to include a view indicator that shows how many views are available and which one is currently visible (in iOS fashion).
Navigating between views
One way to control navigation between views is via the “Playback” property. By default, this is set to “Manual”, meaning that the user can swipe left or right to navigate between views.
However, you can also set a viewset to automatically cycle through different views at a certain time interval or even combine this with manual control by the user.
Selecting “Automatic” will present a list of additional properties that you can configure. This list includes the delay between changing views as well as a default transition effect.
5ml provides you with great flexibility when setting transition effects. For example, if you select to set a “slide” effect, you may specify the desired direction, acceleration mode, and overall durationof the effect, via the 5ml properties panel, without any custom coding.
But wait, what if you want to have different transition effects for each view? Luckily, with 5ml you can override the default transition effect, simply by specifying a different one for the view you are interested to modify. To do so, first select the view you want from the Page Outline pane or navigate there via the viewset’s overlay menu. Doing so will now allow you to specify “Transition” properties only for that specific view!
This is particularly helpful, when you want to create slideshows, rotating banners, and much more.
You can also do very interesting things by setting the viewset’s playback property to “None”. This is particularly useful when you want to create a page element that includes one or more states and change between them based on some condition or action (more on that in a minute).
Controlling a viewset via other widgets or external actions
Navigating to a different view can also be controlled by other widgets or events.
For example you can create a series of buttons, where tapping/clicking on one can cause the viewset to display a different view.
In our example, we are going to add “Previous” and “Next” buttons to display (when clicked) the previous and next views respectively.
Let’s see how this is done. To begin with, select the viewset and specify a unique ID in the General properties tab. We will refer to to this ID when specifying the button behaviors.
Drag and drop two button widgets on the canvas and change their labels to read Next and Previous respectively.
(tip: in my example, the two buttons are grouped inside a container that is then centered horizontally on the page and placed below the viewset)
Select the “Previous” button and go to the Behavior properties tab. Initially, you’ll see an empty list. Click the plus icon to add a new behavior.
A behavior is defined as an action that is triggered on a target when a specific event takes place.
So, to specify the behavior for the “Previous” button:
- Select the desired event from the list of available options in the Event drop-down menu. For example, a typical case is the onclick event.
- Select the desired action from the list of available options in the Action drop-down menu. In this case, choose “Show Previous View”.
- Select the target viewset ID from the drop-down list below the Action menu.
- Optionally, you can specify a transition effect too.
- Click Add to apply changes and finish creating this behavior.
In a similar fashion, you can add behaviors to the “Next” button.
Note that you may also choose to display a specific view. In this case, you must specify a “Show View” action and select the target view ID (instead of the viewset ID).
That’s it! Try the example at http://www.fiveml.com/5ml/qFtgNdb4
Share your own creations by replying to this post!