Category Archives: 2009 R1

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

Enhancements in WebScheduler 2 SP1

Striving to deliver the world’s best WebScheduler product, we continue to enhance and add more new features based on your feedback with the objectives to provide more advanced scheduling functionality — making your web development faster and easier than ever. In this post, I will share some new features and enhancements that we’ve made in the latest service pack. These new enhancements and features are included  in Intersoft WebUI Studio 2009 R1 SP1 or the latest build of WebScheduler released this month.

New Client Side Events

  1. OnCalendarCellClicked
    This client side event will be invoked when a calendar date is clicked.

New Client Side API

  1. SetCallOutWidth(width)
    This method is used to set the width of WebScheduler’s callout. Please note that the “width” parameter should be integer.
  2. SetCallOutHeight(height)
    This method is used to set the height of Webscheduler’s callout. Please note that the “height” parameter should be integer.

New Properties

  1. UseAgendaDetailsCollection
    This property indicates whether WebScheduler should use the AgendaDetailsCollection property instead of the default/built-in details. For an instance, we can hide the default details completely by simply setting the UseAgendaDetailsCollection property to true and leave the AgendaDetailsCollection empty. This property exist in ViewSettings >> AgendaView. To learn more, please head to Customize Agenda View in WebScheduler.
  2. DisplayViewOnMyCalendarLink
    This property indicates whether “View on my calendar” button should appear or not in Agenda view. This property exist in ViewSettings >> AgendaView. To learn more, please refer to Customize Agenda View in WebScheduler.
  3. DateHeaderMode
    This property determines which date header mode that should be used in Timeline view. When displayed, this property introduces 5 options. Since WebScheduler build 220, there are 2 new options (DayNameAndDateNumber and ShortestDayNameAndDateNumber) added to DateHeaderMode. This property can be found  in ViewSettings >> TimelineView. To learn more, please refer to Customize date header in WebScheduler Timeline View.

That’s all for now — hopefully you find these new features and enhancements useful for your scheduling web application development. As usual, please feel free to post your questions, thoughts or feedback about WebScheduler in our forum.

Best Regards,
Budianto Muliawan

New Properties, Events, and Client-side API added in WebTextEditor

As published previously, we have released WebUI Studio 2009 R1 SP1 which includes many enhancements, especially to WebTextEditor and WebScheduler 2. Specifically in WebTextEditor, some new properties, client-side events, and client-side API are included.

New Properties

  • ToolBarSettings >> SerializationMode, determines the serialization mode used for toolbars definition. When set to Client, the page output will be much reduced. Read the complete explanation here
  • ToolBarSettings >> SynchronizeCommandLatency, determines the latency used to synchronize the toolbar commands with the format of selected content. When users navigate through contents that has different format, the toolbar commands will be synchronized to the selected content. This property determines the latency used before the synchronization action is invoked.
  • PreventScriptInjection, determines whether WebTextEditor should detect whether the content contains script injection. If this property is enabled, all script tags and its content will be removed when the content is saved.
  • ShowCallOutOnMediaInsert, determines whether callout should be automatically displayed when a media is inserted as editor content.
  • ShowMediaActionOnMediaSelect, determines whether media action should be displayed when a media is selected.

New client-side events

  • OnKeyDown, will be invoked when there is a key down input in editor.
    function WebTextEditor1_OnKeyDown(controlId, keyCode)
    {
         var rte = ISGetObject(controlId);
         //implement your codes here
    }
  • OnMediaSelected, will be invoked when a media is selected. Users can input media to editor content from Media Gallery. When the media is selected, this event will be invoked when specified.
    function WebTextEditor1_OnMediaSelected(contolId, element)
    {
         var rte = ISGetObject(controlId);
         //implement your codes here
    }
  • OnBeforeResize and OnAfterResize, will be invoked before and after editor is resized using the footer resize element.
    function WebTextEditor1_OnBeforeResize(controlId)
    {
         var rte = ISGetObject(controlId);
         //implement your codes here
    } 
    
    function WebTextEditor1_OnAfterResize(controlId)
    {
         var rte = ISGetObject(controlId);
         //implement your codes here
    }
  • Integrated file-uploader client side events, which are OnBeforeUpload, OnUploaderValidate, OnUploading, OnAfterUpload, OnCancelUpload, OnUploaderInitialize, OnUploaderError, OnUploaderFileAdded, and OnUploaderFileRemoved. When WebFileUploader is integrated to WebTextEditor and users perform specific action related to it, the above events will be invoked when specified.

New client-side APIs

  • SetValueToCurrentPosition, used to set value on the last active cursor position. When users navigate through the content and lost focus from editor, a specific value can be added to editor. When this API is used, the value will be added to the last active cursor position before users lost focus from editor.
    var rte = ISGetObject(“WebTextEditor1”);
    rte.SetValueToCurrentPosition(“new value”);
  • SetFocus, used to set focus to WebTextEditor. When watermark is enabled, this function will remove the watermark and set focus to editor content.
    var rte = ISGetObject(“WebTextEditor1”);
    rte.SetFocus();
  • ToggleToolBar, used to toggle or un-toggle a specific toolbar.
    var rte = ISGetObject(“WebTextEditor1”);
    var toolbar = rte.ClientToolBar[1];
    rte.ToggleToolBar(toolbar, false);
  • ResetEditorState, used to reset the editor state to default state. This API will set the content to empty, close the task pane, reset the state of commands in all toolbars, reset the undo and redo collections, and reset the integrated uploader status.
    var rte = ISGetObject(“WebTextEditor1”);
    rte.ResetEditorState();
  • HideCallOut, used to hide the callout. You can specify whether the hide action will be performed using animation.
    var rte = ISGetObject(“WebTextEditor1”);
    rte.HideCallOut(false); //hide callout without animation
  • RegisterIFrameBehavior and UnregisterIFrameBehavior, used to register and unregister the behavior attached to IFrame element of WebTextEditor. When WebTextEditor element is removed and placed in various elements in the page, the behavior attached to the IFrame element will be lost. These new APIs can be used to re-register or unregister the behavior when needed.

If you have installed WebUI Studio 2009 R1 SP1, you can read the complete version history of the enhancements and fixes in Intersoft WebUI Studio 2009 R1 SP1 Release Notes.pdf.

Bind Value to WebTextEditor When Used As Template

WebTextEditor can be used as editing tool in many scenarios. If you have details view or other data list control, WebTextEditor can be used as the item or edit template and the related data can be displayed in WebTextEditor.

DetailsView control is used to demonstrate this capability. After it is bound properly to Employees table, users can navigate through employee data using the navigation links provided. Data can be bound to WebTextEditor when it is used as item or edit template. Simply set the Content property to the related data.

<asp:TemplateField HeaderText="Notes" SortExpression="Notes">
   <ItemTemplate>
      <ISWebTextEditor:WebTextEditor ID="WebTextEditor1" runat="server" Height="200px"
      	   Width="500px" Content='<%# Bind("Notes") %>'>
         <ViewSettings EnableHTMLView="false" EnableSplitView="false" />
         <ToolBarSettings ToolBarMode="None" />
         <RootTextEditor ReadOnly="true">
         </RootTextEditor>
      </ISWebTextEditor:WebTextEditor>
   </ItemTemplate>
   <EditItemTemplate>
      <ISWebTextEditor:WebTextEditor ID="WebTextEditor1" runat="server" Height="200px"
	    Width="500px" Content='<%# Bind("Notes") %>'>
         <ViewSettings EnableHTMLView="false" EnableSplitView="false" />
	 <ToolBarSettings ToolBarMode="Minimal" />
         <TaskPaneSettings>
 	    <MediaGallery Enabled="false" />
 	 </TaskPaneSettings>
      </ISWebTextEditor:WebTextEditor>
   </EditItemTemplate>
</asp:TemplateField>

As item template, the related Notes data will be displayed in WebTextEditor. As item template, users are unable to edit the content. Read-only status can be set in WebTextEditor when it is used as item template.

WebTextEditor used as item template

When users click Edit, the related Notes data will be displayed in WebTextEditor. Users can easily modify the content and save the update.

WebTextEditor used as edit template
WebTextEditor used as edit template

When used as either template, WebTextEditor configuration can be customized based on your requirement. Please browse to this sample in Intersoft Live Demo to try it yourself.

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.

WebCallOut

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.

WebCallOut2

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

Integrate WebSpellChecker to ASP.NET Controls

In addition to its easy integration with our own WebTextEditor, WebSpellChecker can also be used to target standard ASP.NET controls such as simple textbox, multiline textarea as well as IFRAME. Similar to the WebTextEditor integration, using WebSpellChecker with ASP.NET controls is very easy and requires no coding at all.

To use WebSpellChecker in standard ASP.NET controls, simply pay attention on these two properties, TargetControlId and TargetControlIdValue. The properties are explained in the following.

  • TargetControlId
    This property is required to determine the target control for spell check.For instance, TargetControlId should be filled with “TextBox1” value if you would like to spell check on TextBox1 control.
  • TargetControlIdValue
    This property determines the client-side property of the element from which WebSpellChecker should obtain the value for spell check. It’s important to note that the value or content property should be accessible from client-side.For instance, if WebSpellChecker is targetting TextBox server side control, then the TargetControlIdValue property should be set to “value” instead of “Text”.

When WebSpellChecker is not integrated to WebTextEditor or editable IFrame, it will use the built-in DialogBox interface instead of “red wave underline highlight” mode. For further information about WebSpellChecker interface mode, you can find read the detail explanation in here.

To integrate WebSpellChecker to a ASP.NET TextBox, please follow the step-by-step guide below.

  1. Drag and drop ASP.NET TextBox control and TextBox control with ID’s TextBox1 will appear.
  2. Drag and drop HTML Button control and Button control with the ID’s Button1 will appear. This button is used to start the spell checking from TextBox’s value.
  3. Drag and drop Intersoft WebSpellChecker control and WebSpellChecker control with ID’s WebSpellChecker1 will appear.
  4. Set WebSpellChecker’s TargetControlId to TextBox1 and TargetControlIdValue to value.
  5. Attach onclick client side event to Button1 and set it to CheckSpell function.
    <input id=”Button1″ type=”button” value=”button” onclick=”CheckSpell()” /><script language=”javascript” type=”text/javascript”>
    function CheckSpell()
    {
    var sp = ISGetObject(“WebSpellChecker1”);
    sp.CheckSpell();
    }
    </script>
  6. Integration is finished.

The above sample can be found here. Other samples about WebSpellChecker and the explanation can be found in Intersoft’s live sample.

If you have any questions or feedback, please don’t hesitate to post your questions in Intersoft Forums.

Best Regards,
Budianto Muliawan

Rich Features in Low Client Footprint

Continuing an existing discussion on client footprint optimization especially when a lot of features in WebGrid are enabled, I’ve decided to do a little research on the best way to compress these client resources with a balanced server load yet acceptable compression result.

In this research, I’m running on Windows 7 Professional, IIS 7.5, Visual Studio 2008 SP1, and HttpWatch Professional installed with WebGrid Enterprise’s samples.

The Challenges

Using the Enterprise sample with all features enabled, the total size of client resources — including javascript and styles —  is around 1.2 mb with all compression disabled. This would be a potential issue for users in remote area with slower internet connection.

No_Compression

Without compression, the client resources size is around 1.2 mb.

The Solutions

SmartWebResources’ Compression Technology

SmartWebResources™ technology not only introduces unique architecture for hassle-free deployment, it also comes with built-in compression feature with a reasonable result. Simply put the key below in your web.config to enable the compression:

<add key="ISNet.WebUI.ISRes_Compressed" value="true" />

The result will look like the screenshot below.

SWR_Compression

The SmartWebResources’ squeezes client resources to 680 kb, saves roughly 60%.

IIS 7 Dynamic Compression

The latest IIS now offers easy customizability in more user friendly format. Unlike its previous version, compression can be enabled without having to edit a certain .config file. You can enable/disable the compression directly in the IIS Manager.

IIS_Manager

If you wish to learn more about IIS 7’s compression, please click here.

The default compression level is 7. The compression level in IIS is, fortunately, customizable although you won’t find this setting anywhere else in the documentation.

To change the compression level in IIS 7, run the following syntax from command line:

[WinDir]\System32\inetsrv\appcmd set config /section:httpCompression
/[name='gzip'].staticCompressionLevel:[CompressionLevel]

The acceptable value for compression level is 1 – 10. Setting the compression level to 10 will instruct the IIS to use the best compression quality which produces the smallest output. While it’s great to be able to compact the client resources and deliver very small output to client, it requires a more powerful server for heavier processing and overhead.

In my opinion, the default level is the best option for web applications that run on moderate servers. It doesn’t compress as much as level 9 or 10, but offer less overhead on the server.

IIS_Compression

IIS 7 Compression (level 7)

Conclusion

If you have the direct access to the deployment server which used IIS 7, IIS compression is definitely the best solution to keep your applications speedy with low client resources footprint. However, if you’re hosting your web applications in a shared server, or if you don’t use IIS 7 yet, then SmartWebResources compression is your best choice. It may not compress as much as IIS, but it still offers reasonable compression result with much lower server overhead.