Target Group Feature in WebCallOut

The latest WebCallout control introduces a new capability to target a group of elements. Although it may seem simple, it’s indeed a nice time-saving feature which eliminates a lot of codes. With this group targeting feature, you can easily specify the “group name” of multiple WebCallOuts in the page. The callout instances with same “group name” will only appear once per show.

To get a better picture, let’s assume we have three WebCallout instances in a page where each callout is bound to each image element to be shown. The scenario that we’d like to achieve here is to show a callout on an image and automatically hide the other callouts that may still be displayed in the previous show.

Certainly the above scenario can be achieved using traditional way by handling the OnShow client-side event where custom codes are required to hide the other callouts. The new “group name” feature is a much more elegant approach to achieve this scenario, where you can simply specify the group name of all callout instance to an identical value.

For a quick instance, I have three callout instances where each callout is bound to a car image. Each callout will be shown when its associated image is hovered. Ultimately, you’ll see all the three callouts displayed at the same time when you hover on each car image quickly – which isn’t the behavior that users desire. To prevent this to happen, now I simply set all the GroupName property of all callout instances to “automobile”. Please see the following screenshot.

Here’s an example of the WebCallout markup declaration used in the above sample:

<ISWebDesktop:WebCallOut ID=”WebCallOut1″ runat=”server” Height=”69px” Width=”300px” TargetControlId=”chrysler” Title=”Chrysler 300 Touring” GroupName=”automobile” ContentMode=”UseTemplate”>

<ContentTemplate>

……. create the WebCallout template here…….

</ContentTemplate>

</ISWebDesktop:WebCallOut>

That’s all for now, hopefully this new time-saving feature is useful for your web development. Please visit our forum for feedback and questions.

Best regards,

Budianto Muliawan

Create WebCallOut control in client-side

One of the most requested features for WebCallOut that we’ve received in the past months is the ability to create callout control in the client side programmatically. If you haven’t heard about WebCallOut, it is a nice replacement for standard tooltip, which allows you to display contextual information in an eye-catching, stylish callout interface. To learn more, please head to WebCallOut product page.

Several benefits of client-side instance creation include zero server-side footprint which means less page output and faster page load performance. It’s also very useful in dynamic, on-demand runtime scenarios where the callout needs to be displayed based on certain results. For instance, create a callout with flexible error message to notify the error in user’s input.

In this post, I’ll guide you how to create callout instance programmatically from the client-side. First, make sure the required callout script is registered in your page. If there is no WebDesktop’s control existed in your ASPX page, you should register callout script by calling EnsureWebCallOutScripts method in the Page_Load server-side event which is shown below.

protected void Page_Load(object sender, EventArgs e)
{
      WebCallOut.EnsureWebCallOutScripts(this);
}

Note that the above code is not required if you already have one or more WebDesktop controls in your page, such as ToolBar, Menu, DialogBox or others.

The next step to create callout from the client-side is by invoking CreatAtClient client-side method. See the step-by-step guide below.

1. Drop a ASP.NET TextBox to your page. This textbox will become the callout’s target control which means the callout will appear when your mouse is hover on the textbox.
2. Drop a HTML Button. Attach the onclick client side event and set it to Button1_onclick function such as shown below.

   <input id="Button1" onclick="return Button1_onclick()" type="button" 
   value="Create WebCallOut client side" />

3. Create Button1_onclick function to create the callout.

   <script language="javascript">
   function Button1_onclick()
   {
       var callout = new WebCallOut("WebCallOut1");
       callout.TargetControlIdResolved = "TextBox1";
       callout.Text = "Hello World";
       callout.CreateAtClient();
   }
   </script>

That’s it. Now run your page and you will see something similar to the screenshot below.

In the first page load, notice that there will be no effect on the textbox since the callout is not yet created. Now, click on the button and then hover on the textbox to see the callout in action. See the screenshot below.

That’s all — you should be now able to create callout instances programmatically whenever you need it in the client — without requiring server postback. Hopefully this little feature is handy and useful in your web development.

If you have questions or feedback on this feature or other callout-related stuff, please feel free to post your questions in our forum.

Best Regards,
Budianto Muliawam

WebCallOut Integration with FlyPostBack in SP2

WebUI Studio.NET 2008 Service Pack 2 has delivered many nice enhancements and features. One of the enhancements available in this later service pack is the integration between WebCallOut and FlyPostBack (AJAX) functionality.

I have received feedback from our customers mentioning that WebCallOut is merely a UI component without AJAX/server-side featuer in behind. By integrating WebCallOut and Intersoft’s FlyPostBack architecture, I’m glad to announce and prove that the newly-born WebCallOut is not as simple as it looks, but rather a pure, real and powerful similar to the other Intersoft’s components so far.

With this new enhancement added into WebCallOut, you can now assign WebCallOut’s Text or Title not only from client side, but also from server side via FlyPostBack. This new enhancement will certainly add flexibilities in using WebCallOut and therefore results in more advanced scenarios supported.

In order to perform FlyPostBack, simply add OnShow server side event in WebCallOut. In OnShow server side event, add the below code. 
protected void WebCallOut1_Show(object sender, ISNet.WebUI.WebDesktop.WebCallOutEventDataArgs e)
{
        e.Title = "New Title with FlyPostBack";
        e.Text = "New Text with FlyPostBack";
}


OnShow server side event will be triggered when just before WebCallOut is about to appear/show.

If you are using WebCallOut with ContentMode = “UseTemplate”, then you can change the control(s) in the template with this below approach.    
protected void WebCallOut1_Show(object sender, WebCallOutEventDataArgs e)
{
        WebCallOut callout = sender as WebCallOut;
        Label label = callout.FindControl("Label1") as Label;
        label.ForeColor = System.Drawing.Color.Green;
        label.Text = "New Text with FlyPostBack";
}


For better understanding, I provide WebCallOut’s lifecycle illustration.

Standard lifecycle	FlyPostBack lifecycle

Hopefully this integration can help developers to gain better web experience. Quoting Intersoft’s motto, we are striving to deliver the best WebUI components that have “insights for a better web experience” for both developers and users.

Best Regards,
Budianto Muliawan.
Software Architect, Intersoft Solutions Corp.

Fresh from the kitchen. Meet WebScheduler.

Hi all,

This is probably my first post with more details on WebScheduler.NET, a much anticipated product in our soon-to-come WebUI Studio.NET 2008 release. You may also notice our absent in blog site since the last month, that’s because everyone in the team is extremely busy preparing the most advanced and sophisticated products for you 🙂

Allright, now straight to WebScheduler. After playing on the latest WebScheduler build for a while, I have nothing to say, but simply feel amazed. I don’t want to be a marketer here, but believe me, no features are too minor in WebScheduler.

Out of hundreds of advanced features, one of my favorite feature is the built-in Editing Form that we will ship along with the product. To provide a sophisticated and rich Editing experience, the Editing Form is fully powered with the company’s own WebUI Studio components. This means, everything in the Editing form is truly integrated with the WebUI’s concept, in the term of styles, appearances as well as behaviors. Take a sneak peek of the WebScheduler Editing in the following screenshot.

WebScheduler is not only visually beautiful in its design, it is also technologically advanced. For instance, we support complete range of Recurrence features. You can set the Recurrence pattern, such as whether the event should recur in daily basis, or monthly, or weekly, or yearly. There are even several settings associated with each pattern. For example, you can set an Event to recur on weekly basis by every [x] number of weeks on specific days. Additionally, WebScheduler also support Range of Recurrence in conjunction with Recurrence Pattern feature.

Furthermore, WebScheduler includes numerous enterprise-level features (which most vendors avoid to develop due to its high level of complexity and difficulty), such as:

1. Editing recurrence event, and provide options to either break the recurrence as an individual recurrence info, or update all series of the recurrence.
2. Support for multiple resources and multiple categories, with relationship to event. We also include built-in interface for managing the resources, and ability to display or hide certain resources with a simple click.
3. Support advanced calendaring options, such as customizing the FirstDayOfWeek, and even the FirstWeekOfYear. Two of these settings work perfectly in conjunction with the rest of features, such as the Week numbering, Event binding, Show work week or full week option, and many more.
4. Support Quarter and Year view to let you view your plan for the entire year in a shot.
5. TripeLoad™ loading mechanism. This allows you to navigate calendar and switch between views instantly (in less than 1 second).
6. Elegant data binding architecture. WebScheduler is capable to connect and bind to your existing physical database, regardless of its structure. It works and binds with the database in an elegant way, that means it used multiple tables to separate your data in a more logical way (instead of forcing all fields into a single table). All you need to know is to drop an instance of the company’s flagship datasource control (ISDataSourceControl), configure it to connect to your database tables, and it will do the rest.

User experience, as one of the most important aspects in Intersoft’s WebUI philosophy, is a major feature in WebScheduler. It provides intuitive user interface and interaction, such as ability to resize and move the event by simply using drag and drop. The WebCallOut integration shows the information of currently selected event in balloon tooltip manner. I will post another series of blog regarding the user experience that we have invested heavily in WebScheduler.

Now that the first beta has been out for a month and we would like to thanks for the tremendous feedback and praise from our customers and the community. Please be informed that the first beta will expire on March 1st, 2008. But, dont worry so much about that, as we’re going to deliver the RC version shortly, just before the first beta expired.

The RC version will include the full-featured WebScheduler, complete with samples and white paper. So I believe it worths the wait. Stay tuned, as we will post more information about WebScheduler and the upcoming RC!

All the best,
Jimmy.