Last year, we successfully redesigned our website and brought account management together in a single, authentic Intersoft experience. Today, I’m pleased to announce that we’ve completed a major milestone in our roadmap to migrate Developer Network to the main Intersoft’s website which features greater usability and latest web standards support such as HTML5 and CSS3.

Introducing the all-new, redesigned Team Developer, you can now easily manage the licenses for your developer team, create new company account for your team, assign and remove subscriptions for your team, and quickly review the summary of your licenses such as the total and occupied licenses. Now, you can also see your account and license information through mobile, so you don’t have to question on its portability. Finally, you can also delegate the Developer Manager role to someone in your team, if you prefer.

Let’s tour the new Team Developer!

Team and Licenses Management Simplified.

The all-new Team Management is now fully integrated to the Intersoft Account portal under the Team tab which can be easily enabled if you’ve purchased multiple licenses. It features an intuitive and easy-to-use interface that conforms to Intersoft’s aesthetic standards, allowing you to conveniently manage your licenses and team developers in a much streamlined interface.

With just a button click, you can easily add your developer into the team, or remove them as they’re no longer in charge. You’ll be presented with a new account dialog – now revamped with only important fields in cleaner interface, such as shown below.

Once registered, the Team Management smartly detect available licenses that can be assigned to the new member. You can  now simply check the subscriptions or individual licenses, and tap the Assign button to finish. It’s that easy – see the following illustration.

Streamlined Corporate Info Management.

If you have not registered as Developer Manager, you will need to enable your account as Developer Manager and setup corporate information before you can add members to your team. Setting up the corporate information is now easy and painless – thanks to the clean, intuitive form design which now shows only relevant fields. The new corporate information screen can be seen below.

As seen in the above illustration, you can delegate the developer manager role to the other registered team member if you prefer. However, once you delegated the role, you are no longer able to manage the Team Developer as you are no longer the ‘Developer Manager’.

In the last section of the page, you can now easily review the ‘License Summary’ which shows information the total licenses that you have under your team. The summary will also show the amount of available and occupied licenses. This will help you in distributing the licenses effectively among the members.

As you see above, the new Team Developer features incredibly intuitive user experience with modern look and feel. Everything is thoughtfully designed – from the icons, styles, and layout. You can easily add product or remove it by simply hover on the item in the list.

In this redesign, a lot of unnecessary and tedious steps have been removed. Our goal is to make it easy and simple for you to manage your account and licenses for your development team. I hope you loved the new Team Developer as much as we love building it.

We have released a new, easy-to-understand video tutorial that shows how you can easily extend Crosslight and leverage the sophisticated IoC (injection of container) feature into your application. In this video, we will show how you can create your own custom presenters to integrate into Crosslight-powered solution, all in easy to follow step-by-step tutorial.

You have seen how easy and straightforward it is to customize and extend Crosslight functionalities to match your business process. Imagine how you can unleash your ideas and creativity to implement them across multiple mobile platforms to give the best of user experience.

Using this approach, not only you have the freedom of creating message presenter natively, also a manageable code maintenance, since the caller is a single, centralized call from the view model, with native implementations in each platform. In the next video, I will discuss how you can create your own custom mobile services to use with Crosslight while still leveraging the IoC feature.

You can find the source code for this video at our GitHub: http://github.com/IntersoftSolutions/CustomPresenter. Don’t forget to subscribe to our channel for more videos weekly! For more information, visit our site at: http://www.intersoftpt.com/Crosslight.

Cheers,
Nicholas Lie

In the previous HTML5 development part 1, we have shared our development roadmap for several WebDesktop components which were redesigned to fully support HTML5. As you may already aware, the WebDesktop UI suite contains dozens of standalone components ranging from tab control, navigation panes, to desktop and windowing controls.

In this blog post, we’re going to discuss more about the explorer pane and some windowing controls that have been redesigned for HTML5. WebExplorerPane is a well-known UI component to create rich user interface where a series of navigation items are divided into sections.

Rendering WebExplorerPane

Rendering layout in HTML5 is much more complex than HTML4. The new specification in HTML5 introduces a number of  limitations of TABLE usage thus we spend extra efforts to modify the layout rendering that use TABLE into DIV. In other words, we’re going to create a new WebDesktop version that fully supports HTML5 and CSS3. The goal is to create rich controls with less foot print to improve the overall performance.

Tweaking WebExplorerPane to HTML5 is quite challenging. Most of the issues are coming from the layout and behaviors. As seen in the below figures, the Fig 1.1 shows the rendering problems – notice the padding and the layout issues. The Fig 1.2. shows the tweaked version with pixel-perfect layout and structure.

Moving on, we found that expand and collapse behaviors in WebExplorerPane are no longer working in HTML5. Initially, the explorer pane is set to collapse. However, the script behind explorer pane doesn’t work as instructed. This caused the expand/collapse function to fail, which you can see in Fig 2.1 and Fig 2.2 screenshots below.

At the current state, the WebExplorerPane has been completely revamped with the expected behaviors and smooth animation. It’ll be shipped as part of WebDesktop 4.0 in the upcoming release.

Rendering WebDesktopManager

Layout and behavior issues are also found when rendering WebDesktopManager in HTML5. As you can see in Fig 3.1 screenshot below, the desktop window is gone from the screen.

The taskbar is rendered well in WebDesktop, but the others are not. This issue occurs because the height’s configuration in HTML5 is more complex. However, this problem can be solved by changing the height of DIV container to 100%.

As a result, the window which is normally visible now becomes invisible due to overflow in the table. When the overflow is removed, it still fails rendering the window as you can see in Figure 3.3.

After exploring a lot of sources and references, we’ve decided to eliminate the usage of TABLE because it will produce more complex issues in the future development. Therefore, we decided to use the DIV markup as the main layout rendering in all the windowing controls.

In conclusion, there are several things that we’ve modified in rendering layout, such as WebDesktopManager uses DIV structure so that it’s expandable as well as its window, and the window header’s height is adjustable. The taskbar and shortcut structures are stay the same for now, but we will look forward their next development in the future.

In overall, the result can be seen in the figure below:

The enhancement also applies to WebDesktop’s UI interaction such as resizing or moving the window. As you can see in Fig 4.1 below, the layout structure is not well-rendered and it is again due to table structure issue in HTML5.

After several modification on the layout and structure by using the DIV markup, the issue in the window controls can be elegantly solved. See the following figure.

In addition, we’ve successfully tweaked the entire user interaction features such as window moving, resizing, and drag-drop. With these enhancements, the shadow mode is rendered well when you move or resize the window. See Fig 4.3 and Fig 4.4 for moving and resizing window.

In this blog post, we’ve just scratched the surface of the next chapter of our UI tools. Our goal is to revamp all WebDesktop family members to fully support HTML5, and watch out for the brand-new themes that we will ship in R2. Stay tuned for our next development series!.

Cheers,
Handy

WebUI Studio 2012 R1 has been released a month ago and we’ve developed several new controls and enhancements to the existing controls. As you know, we already delivered WebGrid 8 and WebCombo 6 in the release which includes full support for HTML5 and CSS3.

For the R2 release, we’re putting major efforts on supporting HTML5 to the rest of our ASP.NET components, including the 30+ WebDesktop UI components and WebEssentials suite.  Even though HTML5 is still in the development phase, nowadays many developers are speeding up their web development to HTML5 technology. Looking into HTML5 capability and advantages, it’s surely promising for web development in the future.

Layouting in HTML5

The biggest challenge that we found during development in HTML5 is its layout. Rendering layout in HTML5 is more complex than HTML4. Based on HTML5 discussion forum, in order to make the layout’s size in percentage (%), the parent level height must be defined as well. Mostly, both <html> and <body> tags are set to 100% for its height.

We realize that WebDesktop structures are mostly using table. However, using table is not recommended because it has a limitation in HTML5. Therefore, we decided to revamp/modify WebDesktop’s structures to fit user’s requirement.

In this first series of my blog post, I’ll be sharing our experiences on the HTML5 development for the 2 members of WebDesktop family, WebCallOut and WebTab. Let’s take a deep look of what we’re currently doing with them.

Rendering WebCallOut

The first time when we convert WebCallOut to HTML5, we got numerous issues with the layout such as shown below.

Notice that the rendering is completely messed up, and the pointer is also offset from the correct position.

After improving the control to support HTML5, the layout and rendering now shows perfect results, such as shown below.

In the HTML5 migration, we tried our best to achieve pixel-identical results when comparing to the HTML4 implementation. So, if you host the control back to HTML4 doc type, the results will be identical – all with the same codebase.

Rendering WebTab

For the WebTab control, we decided to revamp the structure only for the content because the content itself needs to be in fluid. You’ll see numerous layout issues when using WebTab control in HTML5 such as shown below.

During the research phase, we found that the usage of table no longer support fluid content in HTML5. The percentage height of fluid content is getting smaller or rather bigger than its container. When we tried to specify height in fluid content to pixels, it works like charm. Unfortunately, this method makes WebTab’s performance slower than before. Ultimately, we decided to revamp the entire rendering structure and no longer using table as the container to achieve the fluid layout.

In addition, our team pay detailed attention on the UI aspects such as the tab header position and alignment, fixing the animation for active and normal tab header, adjusting style for complex image, and improving the style caused by the tab header’s height.

The tab header that uses complex images will also produce undesired results, which is caused by the table structure that involves multiple rows, shown below.

Thankfully, we found that it is possible to use one row in order to fix the WebTab and put additional final touching. After applying the new technique, the WebTab control now renders perfectly.

Hopefully this post gives you insights and big picture of what we’re doing for the HTML5 initiatives. I will share our development progress for the other controls in the next series of blog posts. So, be sure to keep updated with the next series of our development story.

Cheers,
Handy

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.

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.

Hi all,

We have recently updated the live demo of Intersoft Presenter with the latest beta bits. Check it out now at http://sirius2.intersoftpt.com/presenter

In the previous CTPs, we have introduced three presenter views – ListPresenter, IconPresenter, GridPresenter, as well as extensible custom presenters such as ChartPresenter and more. In this release, let’s welcome back CoverFlow – the most innovative multimedia player for Silverlight. Now with even more advanced, data-aware features.

The upcoming beta release includes final-near quality and complete feature sets, and will include the new CoverFlowPresenter. Intersoft Presenter’s extensible architecture enables you to consume CoverFlowPresenter in the same way and manner as in the other presenters. Simply drop in a new instance and set the data member and binding fields. It’s that easy! Here’s a sample result that you’ll get.

We have implemented dozens of interesting new features in this release, such as comprehensive data editing that works flawlessly with WcfDataSource and AstoriaDataSource, and tons of customizable editing behaviors including input validation, lost focus action, update mode and ultimately, great UX!

More details are coming soon. For now, just sit back and enjoy the updated live demo.

All the best,
Jimmy.

First of all, you need to add Copy Event and Paste Event menu items in context menu. They can be easily added in OnContextMenu client side event. The Copy Event menu item should be added in event’s context menu, while Paste Event menu item should be added in the cell area.

Copy Event menu item

Paste Event menu item

Next, you need to implement the copy and paste action. When you create the menu items, you can specify a function that will be invoked when the menu items are clicked. In that function, you can implement the needed code for copy and paste action. To retrieve the scheduler object in this function, you can simply use
ISGetObject([scheduler id]) or use menuItem.OwnerMenu.MenuControl.Scheduler.

When user selects Copy Event menu item, the selected event can be stored to a global variable that can be used when user selects Paste Event menu item.Â

var evt = s.GetSelectedEvent();
if (evt != null)
     copiedEvent = evt;

When user selects Paste Event menu item, you can retrieve the copied event from the stored global variable and create a new event programmatically.

var newEvent = s.CreateNewEvent();
var newOriginalObject = newEvent.GetOriginalObject();

newEvent.StartTime = newOriginalObject.StartTime = selDate;
newEvent.EndTime = newOriginalObject.EndTime = endTime;

//call the function that copy the original object from the copied event to the new original object
CopyOriginalObject(originalObject, newOriginalObject);

s.InitializeEventView(newEvent);
s.InsertEvent(newOriginalObject);

The new event will be created in the selected cell area. That means the datetime of the selected cell area will be used as the new event’s start time. To get the date time of the selected cell area, you can use s.GetDateTimeByCellElement(s.GetSelectedDateArea(), "DateTime") method.

To calculate the end time of the new event, the start time must be added with the event’s duration. In time-based event, the event.Duration property already stores the duration value in miliseconds. However, in all-day event, the event.Duration property stores the duration value in days. In this case, the duration of all-day event must be converted to miliseconds.

Finally now, not only you can copy and paste event in the same view, you can also copy event during navigation.

Event Copied

In the following screenshot, the event is pasted in the next week. The original event that is copied starts at March 3rd 2008; and the event is pasted to March 10th 2008.

Copied event during navigation

The event can also be copied to other view. For example: user can copy “Review documentation” event in Week view, navigates to Day view and paste the event.

Copied event in Day view

I’ve provided a sample that can be downloaded here. In the sample, you can copy switch-event too. Switch event is actually a time-based event that occurs in multiple days and is displayed in all-day-event area. Additional code is needed to support copy and paste switch event. 

Note that time based event can only be pasted as time-based event and so are the other event types, so if, for example, an all-day event is pasted to a time-based cell area, the new event will not be added properly.

If you wish to implement copy and paste event in other views, you need to properly convert the duration of event to miliseconds. I plan to describe more about this in the future, so stay tune ! ^^

WebScheduler provides comprehensive APIs that allows you to perform functions programmatically. Often times, developers need the ability to create new events programmatically — such as from their own user interface or business logic. In this post, I’ll show you how you can create an event programmatically by using client-side API, without the need to use built-in CallOut or Editing Form.

The following Javascript codes show you how:

    function Button1_onclick()

    {

            var s = ISGetObject(“WebScheduler1″);

            var eventView = s.CreateNewEvent();                    

            var originalObject = eventView.GetOriginalObject();

 

            originalObject.ResourceID = “1”;

            originalObject.Subject = “Support Meeting”

            originalObject.Location = “Office”;

            originalObject.StartTime = new Date(2009, 1, 9, 10, 0, 0); // Feb—is entered as 1
            originalObject.EndTime = new Date(2009, 1, 9, 10, 30, 0);Â
            originalObject.AllDayEvent = false;

 

            s.InitializeEventView(eventView);                      

            s.InsertEvent(originalObject);

    }

When you click the Button, the result should look like the screenshot below:

 

To learn more, you can download the attached sample by clicking this link and try it out yourself. Happy scheduling!

Regards,Handy.

Few weeks ago I got interesting inquiry from one of our customers, about how to set different color for each group header in WebGrid, and I think that it’s an interesting topics to be post on our corporate blogs.

Ok, first of all you need to bind your Webgrid and at the code behind inside WebGrid1_InitializeRow event, you can add the following code:

protected void WebGrid1_InitializeRow(object sender, ISNet.WebUI.WebGrid.RowEventArgs e)
{
        if (e.Row.Type == ISNet.WebUI.WebGrid.RowType.GroupHeader) 
       {
             if (e.Row.Cells.GetNamedItem("your column name").Text == "the content of your cell")        
                 e.Row.Style.BackColor = Color.Red;
             else
                 e.Row.Style.BackColor = Color.Yellow;
       }
}

For more information, you can download the sample here. The sample used Northwind.mdb and the WebGrid bind to AccessDataSource.

If you have questions regarding this solution, please don’t hesitate to post the question in here.

Cheers,

Gordon Tumewu