With Bixby Watch and TV coming to the Marketplace, the automatic view change for different device target is great but may not provide the best desirable effect. Consider the following screenshot from the movie agent sample capsule on GitHub. While the movie agent capsule has been updated to have dedicated views, the original view, which worked great on mobile, did not information in a user-friendly manner as shown below.
Due to the screen size limit of watch, it is very logical for cross device developers to consider defining a separate view for the watch target.
There are two ways to do different view models of same concept:
- Create separate view model file under specific folders under resource. Unlike different views for same concept but from different action that could be handled by different match pattern. Different views for same concept but from different device must be placed under specific folders as described in the documentation.
Bixby Developer Studio will automatically generate the correct folder when creating a new view file from scratch as shown in the following screenshot.
However, it is very important to make sure the folder name is correct. Currently, Bixby Developer Studio would not issue warning or error if typo is presented in the folder name, for example bixby-wath instead of bixby-watch. It would just ignore this folder as the device type is not supported. Developers that use other text editors for Bixby development should ensure the folder name is defined correctly.
- Use if ($can.device == target_device) in the primary view to construct different view layouts for minor view changes across devices. Consider the following code change to the movie agent capsule.
if($can.device == 'bixby-watch'){
hbox{
content{
vbox{
...
...
text{
value("#{dateTime(movie.releaseDate, 'MMM dd, yyyy')}")
style(Detail_M)
...
Comments
0 comments
Please sign in to leave a comment.