Tag Archives: WebFishEye 2.0

Two new features in WebAqua 2.0 RTM

One of the nice things about RIA platform is its wide support for audio and video format, and that applies to Silverlight as well. Silverlight supports MP3 audio format out-of-the-box, which means that you can now add more interactivity to your rich web application by adding sound effect or background music.

There are couple of nice features that we added in WebAqua 2.0 RTM:

  • Play a sound file when the WebFishEye button is clicked.
     
    To enable this feature, simply specify the mp3 file to the AudioSource property of the WebFishEye control. See following screenshot.
     

     
    When this property is assigned, WebFishEye will automatically play the specified sound file when a WebFishEye button is clicked. Thanks to Ben Hayat who suggested this nice feature 🙂
     
  • Auto adaptive mechanism on WebFishEye.
     
    As a good citizen of RIA, WebFishEye is designed with comprehensive support for resolution independence scenarios. Firstly, you can design the WebFishEye to use auto width. This means the control will take all available horizontal space relative to the container. There would be no problem if the available horizontal space is wide enough, as the application designer expected. The challenge is, what if the user’s screen is smaller and the number of buttons exceeded the available horizontal space?A new property MinimumButtonSize has been added in RTM version to resolve this challenge. Simply set it to a minimum size that the button could shrink down to. A good sample would be 32 pixels, or 24 pixels, so that users can still see the button clearly even when the control is in collapsed state.

    The auto adaptive mechanism automatically detects the width that WebFishEye control occupy versus the width of WebFishEye’s container. When there are sufficient space, the control will use the normal size as specified in ButtonSize property. Otherwise, it will scale down (shrink) the button size proportionally in order to show all available buttons within the container dimension. The scale down process will stop until it reach the smallest button size specified in MinimumButtonSize property. 

    This feature is especially useful in dynamic data scenarios, eg, when the WebFishEye is databound to a collection of data, which count is unknown.

Regards,
Jimmy.

First Look – WebAqua.NET 2.0

Our upcoming major release, WebUI Studio.NET 2008 R2, will include a new version of WebAqua.NET as originally planned in our published roadmap. As the beta date drew near, we have received tremendous emails from developers asking how the development progress with WebAqua.NET 2.0, will it be included with complete features, and so on. So here is the first post discussing on WebAqua.NET 2.0. 

Let’s start with Expression Blend 2.5 support. One of our main objectives for WebAqua 2.0 is the ability to design WebAqua components in Expression Blend 2.5. So, no matter whether you are purely designer or developer, you can design rich user interface using WebAqua components without writing any codes. 

WebAqua 2.0 will support full design-time experience in Blend 2.5, even in the upcoming beta release. Full design-time experience means you won’t see an empty, ugly box while playing with the style and appearance properties of the control. Instead, you will see rich, WYSIWYG designer, that automatically reflects itself as you design. I’m not sure why, but it turns out that many 3rd party vendors didn’t put any efforts in supporting design-time experience. Probably they made it too hurry, I guess. 

The following screenshot demonstrates a very simple, yet nice looking WebFishEye control which sit nicely in the Expression Blend designer.  

WebFishEye 2.0 in Expression Blend Designer.

The above sample shows a WebFishEye that docked to Bottoom (Docking = Bottom). One of our lists that we always wish to have is the ability to control the layout completely in the designer — and you guess, we managed to made it. So, if you change the Docking to Left, Top, or Bottom, the designer will reflect it automatically. In the above screenshot, you can also pay attention on the Properties window (at the right side panel). We have exposed a lot of new “designer-related” properties so that you can customize the control’s elements in a snap.  

Next, let’s see what we can do with the control in Blend. WebFishEye 2.0 introduces designtime properties that enable designers to change the styles of each element easily. For an example, I will show how you can customize the style of the Dock’s background. Let’s say we want to change the background color to a more colorful Gradient in nice semi-transparent fashion, and have a round corner and different border styles. First, select the WebFishEye control, and pay attention to the Properties list. Find BackgroundObject property, and expand it such as shown in the following.  

FishEye Properties

FishEye Properties

Then, click on the Fill area such as shown in the red-circle marked in following image. You will see Blend’s Color Designer which allows you to create gradient stops, set its color using color picker, and set the Opacity such as shown in the red-circle marked area. Finally, to make it round-cornered, I simply set the RadiusX and RadiusY to something larger, such as 50.  

   

After customizing the styles using above steps, your WebFishEye control should look more or less like the following screenshot.  

WebFishEye result in Blend Designer.

So, what do you think so far? Isn’t it much easier, faster and more convenient to use Blend Designer to design user interface? I believe you will agree so.  

As a full-featured component that push the potential of Blend Designer to the max, you can expect to be able to design and utilize the WebAqua controls entirely from Blend. Next, I will show how easy it is for you to manage the WebFishEye’s buttons directly in Blend. You can even define the StackButtons, and modify button’s level properties directly in Blend Designer.  

   

The above image shows the Buttons property in WebFishEye control. Simply click on the “…” button, and the Collection Editor will appear, such as shown in the following.  

  

As shown above, the Collection Editor is an intuitive way for designers to easily inspect the properties of an object, such as WebFishEyeButton. You can notice that we also have done a pretty much solid object model and value inheritance in this release, such as you can set the TargetUrl, TargetWindow of the button, and even customize the individual styles of the button. To define StackButtons of a WebFishEyeButton, simply click on the StackButtons property to launch another Collection Editor, shown in the following.  

  

WebAqua 2.0 will be the first in the industry that ship with commercial quality, eventhough Blend itself is still in Beta. That is made possible because we have designed a rock solid Framework and architecture that run flawlessly in Silverlight’s runtime and Blend’s designtime. Furthermore, our architecture have been well designed to challenge the upcoming changes in Silverlight API, so that everything will work properly after the update with very minimal breaking changes (or zero) at WebAqua API side.  

The following image shows the result of the design in browser (simply press F5).  

WebFishEye 2.0 in IE8 browser.

There are definitely more exciting features in WebAqua 2.0, that I can’t write to fit in this single post. Some of obvious features include ability to “Edit Template” on the control’s elements. For instance, sometimes ago a customer asked me if they can put something else inside the FishEyeButton, maybe Checkbox or something else. Hmm, while I personally think that it’ll be a bit funny to have a Checkbox in the button, the customer may have their own reasons to do that. So well, yeah, it’s now possible in WebAqua 2.0. Perhaps, one can also put a video inside a button, nice idea huh?  

The conclusion, in overall, is that Blend gives more power and flexibility for designers and developers to build richer user interface in more effective and efficient manner, allowing designers and developers to collaborate using the same toolset and platform. Intersoft, as a tool vendor specialized in UI and UX technologies, all we can do is to take advantage of these new technologies, creates new innovation based on these platforms, and push it to the max.  

Well, I hope it won’t be too long for you guys to get the beta bits of WebAqua 2.0, so you can play and test drive it yourself.  

All the best,
Jimmy.