Tag Archives: WebAqua 2.0

WebAqua.NET 2.0 for Silverlight 2.0 RTW is here.

Microsoft has finally released Silverlight 2.0 earlier this week. That means it’s busy time for RIA, component and platform vendors to update their applications to run on Silverlight 2.0 RTW.

Our special thanks goes to Scott Guthrie and Silverlight Development team, who have incredibly resolved dozens of bugs that we submitted during Beta 2 phase. One of the most significant fixes is related to performance which is causing CPU usage to 80% – 99%. It’s a pleasure for us to work directly with Silverlight development team!

WebAqua 2.0 is ready for Silverlight 2.0 RTW.

Although our development team managed to upgrade the codes to support Silverlight 2.0 RTW in only several days, it doesn’t mean painless. In fact, there are a lot of breaking changes — from syntaxical errors to storyboard behaviors. Not to mention the API changes from beta 2 to RTW. I’ll post more about the upgrade tips later.

By the way, we have updated Sirius 2 showcase to run on Silverlight 2.0 RTW. Check it out here. Our Developer Network has also been updated so that you can use the docking navigation in Silverlight 2.0 RTW environment.

For existing customers, login to Developer Network to obtain WebAqua 2.0 update, or use Update Manager to download and install the update automatically. For prospects, please send your email to sales@intersoftpt.com to obtain the lightweight Silverlight installer.

Breaking Changes

WebFishEye has no breaking changes. The application that you built using WebFishEye should work flawlessly as soon as you update to the latest version of WebAqua.

Similarly, WebCoverFlow has no breaking changes in general. However, if you’re customizing the ItemsReflection with LinearGradient brush, there is a minor breaking changes that introduced by Silverlight 2.0 RTW. You need to swap the StartPoint and EndPoint. See following example.

Beta 2 codes:

<ISNet_Silverlight_WebAqua:WebCoverFlow.ItemReflection>
      <LinearGradientBrush StartPoint="0.5,0.75" EndPoint="0.5,0.25">
            <GradientStop Offset="0.506"/>
            <GradientStop Color="#33000000" Offset="1"/>
      </LinearGradientBrush>
</ISNet_Silverlight_WebAqua:WebCoverFlow.ItemReflection>

Change it to (RTW codes):

<ISNet_Silverlight_WebAqua:WebCoverFlow.ItemReflection>
      <LinearGradientBrush StartPoint="0.5,0.25" EndPoint="0.5,0.75">
            <GradientStop Offset="0.506"/>
            <GradientStop Color="#33000000" Offset="1"/>
      </LinearGradientBrush>
</ISNet_Silverlight_WebAqua:WebCoverFlow.ItemReflection>

Enhancements 

The updated WebAqua 2.0 for Silverlight 2.0 RTW (Build 210) also includes several top enhancements requested by customers. They are:

  • Improved performance to flow logic and animation.
  • WebCoverFlow now supports item template while enabling VirtualFlow (Load-on-Demand) at the same time. With this feature, you can bind to a larger datasource (let’s say, a list of customers or products) and let WebCoverFlow manages the presentation in blazing-fast speed.

Applying the updates

  • Open your Silverlight 2.0 applications in either Expression Blend 2 or Visual Studio 2008 SP1.
  • Remove ISNet.Silverlight.dll and ISNet.Silverlight.WebAqua.dll from your project reference.
  • Add both new assemblies from the update package to your project reference.
  • Rebuild your project.

We will also release an update to ASP.NET product lines (2008 R2 Service Pack 1) by next week. The new WebAqua bits will also be included in the SP1 release. Stay tuned! 

All the best,
Jimmy.

Advertisements

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.

New Web Design, New Release, New UX!

The beta was over yesterday. Today is a new day, with all things new. We are pleased to announce the immediate availability of WebUI Studio.NET 2008 R2, a much anticipated release that strongly focused on two themes, enterprise-grade Scheduling features and futuristic Silverlight UI components. This release also implements hundreds of enhancements based on our customers’ feedback.

Download the trial here or the full version here, check out our new Website, read the press release and discover What’s new in 2008 R2.

We hope you enjoy the RTM bits and use it to build your next-gen, more-intuitive Web apps. Thanks to our customers for the continuous support and valuable feedback that submitted to us during beta period!

All the best,
Jimmy.

Sirius 2.0 – FAQ

It is getting more exciting as we get more responses and feedback on our Sirius 2.0 Showcase which launched earlier this week. I noticed that there have been several questions on some Sirius 2.0 design aspects in the forum, so I decided to write a quick explanation in this post.

What is the size of Sirius 2.0 showcase?

The Sirius 2.0 showcase itself is a Silverlight 2.0 application package with 6.5 MB size. That’s why we made a nicer preloader so users don’t get bored while waiting for the download. This Showcase is designed to explore all Silverlight functions, and combining it with scenarios that made possibly with our upcoming UI components.

Almost 2/3 of the Showcase’s content is images, such as those used for FishEye and CoverFlow samples. If those images are stripped out, the Showcase package is only something about 600 KB.

One nice thing about Silverlight application is that it can take advantage of browser caching mechanism. Although your application might be a bit large in size (but try to make it affordable such as below 10 MB), it still can stand out by caching it to user’s browser. As the results, the application will load in matter of seconds on the subsequent request (no more download). This is in fact very good, and in some degree, even better than HTML concept (where it has to download a lot of different resources, eg, javascripts, images, css).

Sirius 2.0 is designed with this caching architecture. So, you can see that subsequent visits will load the application in only several seconds. And thus, this resolves the usability and initial download issue.

How much will Sirius 2.0 Components add to my XAP application?

Our UI components are designed with best componentizing practice and fully optimized for performance. That translates to unbelievably small size of assemblies. Sirius 2.0 components will add only around 300+ KB to your XAP application package. Note: Please don’t misread it as 3MB 🙂

This is certainly fantastic. Even the Javascript version of our previous WebAqua already exceeded 500 KB in size, while this new version is only something around 300 KB, plus double the features.

How to consume and use Sirius 2.0 Components? (aka, Getting Started)

First of all, get yourself a copy of 2008 R2 Beta. If you haven’t aware of the beta, read the news here.

After you’ve done with the installation, straight go to the 2008 R2 program group, and expand WebAqua 2.0. If you would like to open the sample in Blend, right click on the Silverlight Samples item, point to Open With menu, and choose Expression Blendl. See following screenshot.

When you open the sample for the first time, the references to the Aqua assemblies are missing (in this beta), so let’s get it fixed by re-referencing it. Follow the steps below:

  • Remove both ISNet.Silverlight.dll and ISNet.Silverlight.WebAqua.dll from the reference.
  • Add Reference “ISNet.Silverlight.dll” from C:\Program Files\Intersoft Solutions Beta\WebUI.NET Framework 3.0\Bin
  • Add Reference “ISNet.Silverlight.WebAqua.dll” from C:\Program Files\Intersoft Solutions Beta\WebAqua.NET 2.0\Bin

Now we should be all set. Pay attention on the Project tab which is usually docked at right side. Expand the Samples folder, and here you go. For the first start, you can try WebCoverFlow, FirstExperience.xaml. See following screenshot.

Explore the control by selecting the control instance in the Object panel. Then, switch to Properties tab, and scroll down to bottom then expand Miscellaneous group. In Blend June preview, all custom properties are still located in Miscellanous group, however, Microsoft’s ScottGu has promised us that this is going to be fixed in the next preview of Blend.

When you’ve done testing or configuring a sample, just hit F5 to preview it in browser. We’ve made a nice Sample Explorer so that you can explore the samples conveniently. You should see something as shown in the following.

There is an annoying known issue in Blend Designer (although it doesn’t happen in VS 2008), that is the relative images which pointed to upper level of the sample (eg, “../../Images/Button.png”) will not show up properly in the control. Microsoft Silverlight team has acknowledged that as a bug. At the meantime, if you want to try out the controls in Blend, try to have the images inside the subfolder of your sample. (eg, “Images/Button.png”).

Please feel free to ask should you have further questions, and I will add it to the FAQ in this post.

All the best,
Jimmy.

Sirius 2.0 Showcase is live.

Sirius 2.0, the codename of our next-generation UI Components for Silverlight 2.0, is now live. After months of extensive research, development and testing, we are pleased to announce the availaibility of Sirius 2.0 Showcase featuring high, commercial-quality release of the upcoming WebAqua 2.0 components.

Sirius 2.0 is now targetting Silverlight 2.0 Beta 2, and is designed entirely using Expression Blend. As the result, you should be able to experience our new UX concept in any browsers that currently supported by SL 2.0 Beta 2, such as IE 7/8, FF 3, Opera 9.5+, and Safari.

We have put together several reference samples in the Sirius 2.0 Showcase, such as the usage of FishEye and CoverFlow in nice “LOB” scenarios. Needless to say more, simply jump into Sirius 2.0 Showcase now to experience it yourself. We hope you like and enjoy our new UX and design.

We’re going to make the samples available in the upcoming 2008 R2 beta release, which is due later this week. Keep checking and stay tuned!

All the best,
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.