This morning we launched an App Studio release including several powerful new features, a few bug fixes, and a slew of enhancements. Read on for the details!

Containers

With this release we've replaced our simple Group feature with Containers. You create Containers in the same way that you did groups: select multiple components, right-click, and select "Group in new container". Containers function as standard components: they have their own dimensions, position, background color, background image, border, corner radius, and opacity, and can be modified via the Actions panel. They also have layout constraints. Layout constraints let you anchor components a certain distance away from the sides and axes of their containers. Components with layout constraints set will maintain these offset distances when their containers are resized. In the image below, a button component is anchored to the left side of its container with an offset of 10px. In the next image, its container has been enlarged, but it remains 10px away from its container's left side.

A button component anchored to the left side of its container The button component maintains its 10px offset from the container's left side

When a component is anchored to both the top and bottom sides of its container, or to both the left and right sides, it will expand and contract to maintain its offset distances. In the images below, a button component is anchored to the top and bottom sides of its container. It expands to maintain these offsets when its container is resized.

Button component anchored to the top and bottom of its container The button expands to maintain its offsets from the container's top and bottom sides

Learn more about Containers and Layout Constraints.

Text component enhancements

Granular scrollbar controls
Set vertical and/or horizontal scrollbars to "On", "Off", or "Auto" to show only when needed.
Scrollbar color controls
Set colors for the scroll bar and scroll bar track.
Wordwrap
Toggle Wordwrap when you don't want to use a vertical scrollbar on your text component. If the last line of text in your component runs past its right bound, it will be truncated and an ellipsis will be appended.
New text component properties

Text Input component

Along with the other enhancements to the text component, we've added a new text input component. Learn how to use this component to search and play videos from YouTube, all from within your widget!

Text input component

Fixes

  • Volume level no longer resets after each song is played in the audio player.
  • Multiple lists that have the "Enable selection" option activated but are not set to play in players are working fine again.
  • Some titles in list components that had word wrapping enabled were not being truncated correctly. They are now.

Other enhancements

Video players now parse SMIL
Our new SMIL parsing enables you to play video streams formatted in SMIL.
Roll over and roll out events for video players
Now you can trigger actions when the user mouses over, and outside of, the video player. You can use the new Roll over and Roll out events to do things like hide play controls when the user's cursor isn't over the video player, and swoop them in when it is.
Optional preloaders on list and image components
Add preloader animations to list and image components to let your users know that they're loading.
Text padding in lists
Now you can customize the text padding in each of your lists
Robust HTML encoded character decoding
Widgets now automatically decode HTML encoded characters (like &). If that sounds like gibberish, all you need to know is that you won't see any code-like gibberish in your list widgets or text components any more.
Added rollover color for list items
Now when a user hovers her cursor over a list item in one of your lists, its background color will be 10% lighter than the selected list item's background color.
Increased embed code compatibility
Some sites (like blogger.com) have trouble with the self-enclosing <param/> tag, so we've replaced the one that used to be in our embed code with a proper pair.
Fullscreen option for Slideshow
The slideshow component now sports a fullscreen option