Tag Archives: WebDesktop

Introducing WebDesktop 4 – Final Part

Continuing my blog series on our upcoming release, I’m pleased to share the final part of WebDesktop’s development for HTML5 and CSS3. In my previous posts, I’ve shared the development progress of converting WebDesktopManager controls into HTML5. You can check the previous posts here: Part 1 and Part 2. In this final part of my post, I’m going to cover the new features for the rest of WebDesktop controls such as WebDesktopManager, WebDialogBox, WebPaneManager, WebSplitter, WebNotification and many others.

In version 4, WebDesktop has been refined to fully support the latest web standards. This allows you to use many of the advanced WebDesktop features in your next-generation web applications and at the same time leveraging cutting-edge technologies such as HTML5 and CSS3. With our latest innovation of “Windows 8 ready” Component Designer, you can easily configure every properties and styles using the latest Visual Studio 2012.

WebNavPane

WebNavPane is one of the many UI controls demanded by application developers. Unfortunately, the existing WebNavPane was designed for HTML4 which mainly uses table for layouting. The first time when we convert WebNavPane to HTML5, we encountered issues with the layout such as shown below:

WebNavPane before modified in HTML5

As you can see, WebNavPane’s border doesn’t get rendered properly and the container becomes smaller. After improving the control to support HTML5, the layout and rendering now shows a perfect results, such as shown below:

WebNavPane after modified in HTML5.

Furthermore, we’ve also added a metro style in the latest WebNavPane. This control has been redesigned and developed to fully inherit the styles in Windows 8. And of course, we’re ready to give the best UI in styles and performance in the latest Windows 8.

WebNavPaneMetro

WebCallOut

Previously, we’ve discussed about the layout issues occurring in WebCallOut when it is set to HTML5 in the beginning. The rendering is completely messed up and the pointer is also offset from the correct position. After numerous improvements made, we’re happy to introduce metro styling in the latest WebCallOut. The metro styles consist of Metro Orange, Metro Silver and metro Simple such as shown below:

WebCallOut Metro Simple

WebCallOut Metro Silver

WebCallOut Metro Orange

WebExplorerPane

We’ve extremely improved WebExplorerPane from its layout. Rendering its layout in HTML5 is much more complex than HTML4. However, we’ve managed to overcome these obstacles and proudly introduced the new metro style in the latest WebExplorerPane.

WebExplorerPane Metro Style

It perfectly renders and matches the “Windows 8-ready” styling starting from its layout, font color and style and many others.

WebDesktopManager

As we’ve discussed in previous Part 2, there are numerous enhancements in the window and desktop rendering. Since the new specification in HTML5 introduces a number of limitations of TABLE usage, therefore we’ve decided to remove all TABLE usage and use DIV instead.

WebDesktop 4 has added 3 new features to give users freedom in perform styling over WebDesktopManager. Now, the icon in Taskbar is no longer depending on window or shortcut. They can be determined by defining the TaskBarImage property in WebDesktopWindow or WebDesktopShortcut.

You can perform styling to container when using complex image border type. In the previous version, the container’s style will not be assigned in the container itself when using complex image. Starting from WebDesktop 4, you can easily perform styling by setting the ApplyContainerStyle property to true.

WebDesktopManager Metro Style

WebDialogBox

The changes made in WebDialogBox is almost similar to WebDesktopWindow. By inheriting WebDesktopWindow’s structure, WebDialogBox is rendered using DIV instead of TABLE. With HTML5, the rendering of each browser will be more consistent and more solid than HTML4. WebDialogBox also supports CSS3 for its styling.

Introducing Metro theme for WebDesktop

Since the invention of “Metro” design language, Microsoft has been redesigning all its software products toward the modern UI design, including the recently released Microsoft Windows 8. As a leading tool vendor, we’re pleased to be the among the first to support Metro design language.

That said, our designer team has designed a comprehensive Metro theme that can be easily applied to all existing WebDesktop controls such as WebDesktopManager, WebDialogBox, WebTab and so on. Each control theme is thoughtfully designed to get the right look and feel particularly when it comes to contrast colors. See the screenshot below.

WebDesktop Metro Style

The following screenshots show the Metro theme running on WebDesktop 4. Remember, these are real web applications built on ASP.NET, and run on your favorite browsers.

WebNavPane Metro Style

Outlook Metro Style

The new WebDesktop 4 will be available in the upcoming R2 release which is going to be shipped anytime soon in this December 2012. Be sure to stay updated with the next announcement.

Cheers,
Handy

Improve Page Performance in WebGrid When Used With WebMenuBar

Recently some customers reported that they experienced performance issue in their page which contains WebGrid along with WebMenuBar control. The issue is noticable when using Internet Explorer browser to view the page. After further research, this performance issue occured only when the Grid has AutoFitColumns property set to true while the WebMenuBar is using predefined styles that produced from the server-side settings.

Apparently, Internet Explorer has a serious flaw in performance when a script is trying to add styles programmatically while loading, and at the same time when layouting is performed by other scripts.

To eliminate the performance issue, all styles in WebMenuBar should be defined as CssClass instead of using server-side predefined styles.

For comparison, I have attached two samples (with and without CssClass). Run the samples and compare the performance difference between them.

Note: This technique also works on standalone WebToolBar which causes the same issue.

Regards,
Handy.
Support Engineer.

How-to: Use WebTab with XHTML doctype

When Ajax Update Panel is used in a page, mostly you will need to use XHTML doctype. Some of earlier Intersoft controls that are not designed for XHTML doctype, such as WebTab, will be displayed incorrectly due to the different styles rendering between HTML and XHTML doctype.

The layout issue in WebTab can be easily fixed to support XHTML by tweaking the default styles available in WebTab. For instance, removing padding, margin and overflow property from the FrameStyle will fix the main layout of the control.

With this workaround, you can use WebTab control along with its built-in features in XHTML pages without issues.

Hint: When complex image is used, you need to maintain and customize the style appropriately.

Please refer to the sample to see how it works.

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.

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

Implement Drag and Drop to WebScheduler using WebDragDropExtender

In WebScheduler, events can be dragged and dropped from one cell to another cell in scheduler area. Related to this functionality, we have received requests to support drag and drop behavior from another control to WebScheduler where a new event will be created upon the drop action. Using Build 217 or higher, it is now possible to implement drag and drop behavior from another control to WebScheduler, with the help of WebDragDropExtender control.

WebDragDropExtender allows you to add drag and drop behavior between server or HTML controls. When implementing drag and drop behavior to WebScheduler, you can use any controls as DragControl as long as the drag behavior has been implemented in that control. In this blog, WebGrid is used as DragControl, as the drag behavior is a built-in implementation in WebGrid.

First, add WebScheduler and WebGrid to a page. Ensure all the events and data is displayed properly in both controls before you continue to the next step.

Both WebScheduler and WebGrid are configured to display data

Both WebScheduler and WebGrid are configured to display data

In WebScheduler, the AllowDropFromExtender property needs to be enabled and the editing capabilities need to be enabled as well.

Next, add WebDragDropExtender control to the page. Add WebGrid in DragControls collection and WebScheduler in DropControls collection of WebDragDropExtender.

The following steps are needed to add WebGrid in DragControls collection:

  1. Choose DragControls property and open WebDragControl Collection Editor dialog box.
  2. Set WebGrid’s ID as the value of ControlID property.
  3. Choose AdvancedProperties and AdvancedProperties dialog box will be opened.
  4. Check Enable special integration with Intersoft control checkbox and check Allow dragging on checked rows checkbox. Note that WebGrid should have rowchecker-typed column.
  5. Press OK in both dialog boxes.

    WebDragControl Collection Editor dialog box

    WebDragControl Collection Editor dialog box

 
The following steps are needed to add WebScheduler in DropControls collection:

  1. Choose DropControls property and open WebDropControl Collection Editor dialog box.
  2. Set WebScheduler’s ID as the value of ControlID property.
  3. Type the following attributes: Type=Custom,ComponentType=WebScheduler,DropableOnCell=True, in AdvancedProperties property.
  4. Press OK.

    WebDropControl Collection Editor dialog box

    WebDropControl Collection Editor dialog box

 
Finally, add OnDragStart and OnDragDrop client-side events in WebDragDropExtender control. 

Add the following code in OnDragStart client-side event. The code will reinitialize drop controls every time the drag behavior started. This is needed because the selected view mode in WebScheduler might be different every time a drag behavior started, e.g: when user first drags a row and drop it to WebScheduler, the active view mode is Day view. Then, he changes the view mode to Month view. In this case, the drop controls needs to be reinitialized in order for the drag and drop behavior to work perfectly.

function DragStart(controlId, e)
{
      var obj = ISGetObject(controlId);
      obj.ReinitializeDropControls();
}

In OnDragDrop client-side event, you can implement the drop action according to your scenario. In this case, we will implement the code to add a new event according to the active view mode.

function DragDrop(controlId, e, dropObject)
{
  if (dropObject.IsSubObject)
  {
     var dropItem = dropObject.SubObjectContext;

     if (dropItem.ItemType == "Cell" || dropItem.ItemType == "AllDayCell")
     {
        var s = ISGetObject("ws1");

        var subject = e.DragObject.Data.Rows[0].GetCell("Subject").Text;
        var startTime = "";
        var endTime = "";
        var allDayEvent = false;
        var resourceID = "1"; //currently hardcoded
        var el = dropItem.Element;

        switch (s.ViewSettings.SelectedViewMode)
        {
           case "Day":
           case "Week":
              if (dropItem.ItemType == "AllDayCell")
              {
                 allDayEvent = true;
                 startTime = endTime = s.GetDateTimeByCellElement(el, "Date");
              }
              else
              {
                 startTime = s.GetDateTimeByCellElement(el.children[0], "DateTime");
                 endTime = AddMinutes(startTime, 30);
              }

              if (s.IsInSplitViewMode)
                 resourceID = s.GetResourceByCellElement(el.children[0]).ResourceID;

              break;

              case "Month":
                 allDayEvent = true;
                 startTime = endTime = s.GetDateTimeByCellElement(el, "Date");
              break;
        }

        CreateNewEvent(resourceID, subject, startTime, endTime, allDayEvent);

        return true;
     }
  }
  return false;
}

Now, you can drag a row from WebGrid and drop it to WebScheduler in any cell area that you want. The selected dropped area is indicated by a dashed line border in the cell, enabling user to easily see whether or not the selected droppable area is the correct date and time to drop the object.

WebGridRow is dragged to WebScheduler

WebGridRow is dragged to WebScheduler

When the row is dropped, a new event will be created in the selected cell area. Note that previously abc row is dragged from WebGrid and dropped to 12 PM cell area. After it’s dropped, a new event with abc as its subject, will be created in 12 PM cell area with 30 minutes duration (can be specified in the code).

A new event is created when the row is dropped to WebScheduler

A new event is created when the row is dropped to WebScheduler

This drag and drop behavior is applicable in view modes that include cells in its layout, so Agenda, Year, and Quarter views are not supported. You can download the sample here. Feel free to give feedback or comments. Have a great day !

Create NavBar and NavBarItem via client side

WebDesktop 2.5 enhances its feature to allow user to create NavBar and NavBarItem from client side.

Here is the simple steps you need to follow:

– First of all, you simply need to simply drag WebNavPane control and HTML button from Toolbox to the WebForm.

WebNavPane control

– Then, switch to Source code to create a javascript function called Create_ClientSide(). The code will look like following:

<script type=”text/javascript”>

        function Create_ClientSide()

        {

            var nav = ISGetObject(“WebNavPane1”);

           

            var navbar = new WebNavBar();

            navbar.Text = “test”;

            navbar.Name = “test”;

            nav.AddBar(navbar);

           

            var item = new WebNavBarItem();

            item.Text = “1”;

            item.Name = “1”;

            navbar.AddBarItem(item);

           

            navbar.Click();

        }
    </script>


– Invoke function Create_ClientSide() using onclick event in HTML button. 

<input type=”button” onclick=”Create_ClientSide()” value=”Click to create NavBar from client side” />

– Compile and run the sample.  When you click the button, it will automatically add the NavBar along with its NavBarItem.

Run in browser

The sample is available to be downloaded in here. For more information, you can also access our knowledge base from the following link:
http://support.intersoftpt.com/KBArticle.aspx?aid=255

Should you have any comment please feel free to give one 🙂

Cheers.