Category Archives: 2012 R2

Create Drill Down Chart with UXChart

Quite often, you will need to allow your user to drill-down data from yearly data to monthly or from categories to individual items. Now it’s very easy with our new concept which gives you freedom to create unlimited levels of drill-down charts from a single data source in minutes.

In this blog post, I want to show an example of drilling down chart data, i.e. to display master-detail data in the same chart, by clicking a point of the first series will let another series shown, which represents detailed data related to the selected point. This is critical for creating interesting and fun charts to interact with. This blog entry includes basic knowledge of what you can do with our chart right out of the box. See the following screenshot for the drilling down chart that we want to create.

Drill down chart

To get started, we use the Child properties in UXChart to specify which chart that we want to display as detail of origin chart. Specifically, all charting collections must be defined in View in a first place. On first load, you are allowed to display one chart only, and the others’ visibility must be set to collapse. See the code below:

<dataVisualisation:UXChart x:Name="Chart1" Visibility="Visible" Child="{Binding ElementName=Chart2}"
                        DrillDownCommand="{Binding DrillDownCommand}">
</dataVisualisation:UXChart>

<dataVisualisation:UXChart x:Name="Chart2" Visibility="Collapsed"  >
</dataVisualisation:UXChart>

Next, we need to hook our custom command to control the drilldown action, we called it DrillDownCommand.

  public DelegateCommand DrillDownCommand { get; set; }

And then we assign DrillDownCommand to some execute the method in our ViewModel.

 this.DrillDownCommand = new DelegateCommand(ExecuteDrillDown); 

In the execute method, we can initialize the data from the data source and retrieve detail information about the chart itself.

    
private void ExecuteDrillDown(object parameter)
{
   UXChartDrillDownCommandArgs args = parameter as UXChartDrillDownCommandArgs;

   if (args.Level == 1)
   {
     Data parent = args.DataPointContext as Data;
     if (parent != null)
     {
       InitializeDataByArea(parent.Area);
     }
   }
}

In conclusion, with simple implementation, we already make drill down function very simple and effortless. Now feel free to try and make your very own drill down chart. There’s unlimited level that you can figure out and explore.

For more information about our ClientUI control in Silverlight & WPF, please refer to the online documentation. You can download our sample here. Feel free to drop us any questions or feedback.

Till we meet again.

Cheers,
Yanes

Intersoft Product Survey 2013

The arrival of Windows 8 adds more choices to the platform stack that mobile developers should consider. So my question is, do you plan to build Windows 8 apps, or perhaps you already built one? As we’re planning our roadmap ahead, we’d love to hear from you – which platforms will you build your next apps on, the challenges you’re facing, and what tools you need to get your jobs done right.

Join our 2013 product survey and place your vote so we can align our next product roadmap to your development needs.

Your participation is an effective way to present your thoughts and opinions about our products and service to the management of Intersoft Solutions. I do believe that your valuable feedback would be very useful to help us improve our products and services in the future.

If you have any questions or technical difficulties, please don’t hesitate to drop an email to me at martin@intersoftpt.com.

Thank you for your time and participation.

Regards,
Martin

WebFileUploader: Store Uploaded Files in Database

Last year I posted an article which showed how to store the files which are uploaded using UXFileUpload (ClientUI control for Silverlight and WPF) in database. In this article, I will show a similar scenario which can be done using WebFileUploader, a member of Intersoft Solutions ASP.NET controls.

WebFileUploader is an easy to use; high performance and advanced file upload component which allows you to upload multiple files without page refresh. WebFileUploader uses 100% HTML technology for all its features, and fully supports all modern browsers including Firefox, Safari, Chrome and Opera. Using 100% HTML technology means that WebFileUploader doesn’t require Flash plug-in to support multiple files uploading and many other features.

This scenario, to store the uploaded files in database, can be divided to two parts. The first part is to configure WebFileUploader for IIS application; and the other part, using server-side code to process uploaded files and store them into database.

To configure WebFileUploader for IIS application

Some configuration is needed in the web.config to run WebFileUploader in IIS. The list below shows how to configure WebFileUploader for IIS 7 application.

  1. By default, ASP.NET application restricts maximum request length to 4 MB. To enable our application to accept larger files, please configure the maxRequestLength in web.config to higher value. The maxRequestLength value is measured in kilobytes. Here is a snippet to increase your file size to 100MB.
    <configuration>
      <system.web>
        <httpRuntime maxRequestLength="102400" />
      </system.web>
    </configuration>
  2. Add WebFileUploader handler to <handlers> section under <system.webServer>. Here is the snippet.
    <add name="WebFileUploaderHttpHandler" verb="GET"
      path="WebFileUploaderHttpHandler.axd"
      type="ISNet.WebUI.WebTextEditor.WebFileUploaderHttpHandler, ISNet.WebUI.WebTextEditor"
      preCondition="integratedMode" />
  3. Add WebFileUploader module to <modules> section under <system.webServer> in our project web.config. Here is the snippet.
    <add name="WebFileUploaderHttpModule" preCondition="managedHandler"
      type="ISNet.WebUI.WebTextEditor.WebFileUploaderHttpModule, ISNet.WebUI.WebTextEditor" />
  4. Set maxAllowedContentLength to a higher value, which is measured in bytes, to 100MB in web.config. This attribute specifies the maximum length of content in a request. The default value is 30000000, which is approximately 28.6 MB.
    <system.webServer>
      <security>
        <requestFiltering>
          <requestLimits maxAllowedContentLength="104857600" />
        </requestFiltering>
      </security>
    </system.webServer>
  5. Unlock the mode override in applicationHost.config. Open IIS 7 application configuration file, the default location is in C:\windows\system32\inetsrv\config, and change the overrideModeDefault to Allow.
    <section name="requestFiltering" overrideModeDefault="Allow" />

Save the changes and then try to upload a file. If WebFileUploader has been successfully uploaded the file to the designated folder, it means that we are on half way to achieve the goal and ready to proceed to the next step.

Using server-side code to process uploaded files and store them into database

A database, called Files.mdf, is added into the App_Data folder of the web project. This database has Files table which consists of following fields.

Column Name Data Type Allow Nulls
Id uniqueidentifier False
FileData varbinary(MAX) True
OriginalName nvarchar(50) False
DateCreated datetime False

A Stored Procedure, sprocFilesInsertSingleItem, will be used to insert a single item of file into Files.mdf database.

INSERT INTO Files
(
	Id,
	FileUrl,
	FileData,
	OriginalName
)
VALUES
(
	@id,
	@FileUrl,
	@FileData,
	@originalName
)

Next, we are going to use the OnAfterUpload server-side event of WebFileUploader. It is the server-side event which fired when a file upload is succeeded. Generally, there are three processes to be performed on this event.

  • Read and manipulate the uploaded file using FileStream class.
  • Invoke and execute sprocFilesInsertSingleItem stored procedure to store the uploaded file on Files.mdf database.
  • Delete the specified file from the UploadPath folder.
protected void WebFileUploader1_AfterUpload(object sender, ISNet.WebUI.WebTextEditor.WebFileUploaderFileEventArgs e)
{
    byte[] fileData = ReadFile(e.WebFileUploadInfo.Path + "\\" + e.WebFileUploadInfo.FileName);
    string originalName = e.WebFileUploadInfo.FileName;

    using (SqlConnection mySqlConnection = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Files.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True"))
    {
        // Set up the Command object
        SqlCommand myCommand = new SqlCommand("sprocFilesInsertSingleItem", mySqlConnection);
        myCommand.CommandType = CommandType.StoredProcedure;

        // Set up the ID parameter
        SqlParameter prmId = new SqlParameter("@id", SqlDbType.UniqueIdentifier);

        Guid id = Guid.NewGuid();
        prmId.Value = id;
        myCommand.Parameters.Add(prmId);

        // Set up the FileUrl parameter
        SqlParameter prmFileUrl = new SqlParameter("@fileUrl", SqlDbType.NVarChar, 255);

        prmFileUrl.Value = DBNull.Value;
        myCommand.Parameters.Add(prmFileUrl);

        // Set up the FileData parameter
        SqlParameter prmFileData = new SqlParameter("@fileData ", SqlDbType.VarBinary);

        prmFileData.Value = fileData;
        prmFileData.Size = fileData.Length;
        myCommand.Parameters.Add(prmFileData);

        // Set up the OriginalName parameter
        SqlParameter prmOriginalName = new SqlParameter("@originalName", SqlDbType.NVarChar, 50);
        prmOriginalName.Value = e.WebFileUploadInfo.FileName;
        myCommand.Parameters.Add(prmOriginalName);

        // Execute the command, and clean up.
        mySqlConnection.Open();
        bool result = myCommand.ExecuteNonQuery() > 0;
        mySqlConnection.Close();
    }

    File.Delete(e.WebFileUploadInfo.Path + "\\" + e.WebFileUploadInfo.FileName);
}

private static byte[] ReadFile(string filePath)
{
    byte[] buffer;
    FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);

    try
    {
        int length = (int)fileStream.Length; // get file length
        buffer = new byte[length];           // create buffer
        int count;                           // actual number of bytes read
        int sum = 0;                         // total number of bytes read

        // read until Read method returns 0 (end of the stream has been reached)
        while ((count = fileStream.Read(buffer, sum, length - sum)) > 0)
        {
            sum += count; // sum is a buffer offset for next reading
        }
    }
    finally
    {
        fileStream.Close();
    }

    return buffer;
}

That’s it! Now the files uploaded by WebFileUploader control will be stored in database. It’s pretty easy and straightforward, don’t you think so?

WebFileUploader

Click here to download the sample and feel free to drop me a line in the comment box if you find this post useful.

WebUI Studio 2012 R2 Installer Refresh

Today, we have posted an update to the WebUI Studio 2012 R2 installer which addressed a few glitches related to samples and installation. In addition, the installer “refresh” also includes newer product builds across ASP.NET, Silverlight and WPF tools for enhanced cross-platform compatibility and improved reliability. It’s highly recommended to install WebUI Studio 2012 R2 using the latest installer which you can download here.

The installer “refresh” includes numerous updates that are focused around the new technical samples for Silverlight and WPF. In case you didn’t aware, we now include comprehensive technical samples starting from this release. The difference with the live samples is that technical samples are strongly focused on the product features – and there are no fancy stuff such as decorator graphics or complex styling – so you can quickly and easily discover the “how-to” and knowledge to implement a particular feature of the new products.

If you haven’t seen the technical samples yet, now is a good time to take a look at it. It’s installed by default, and can be found in the Intersoft WebUI Studio program group under the respective platform group. In this release, the technical samples include over 150 samples for charting and 40 samples for the other new products such as Query Builder, Property Grid and BreadCrumb.

Each feature of the new product is covered in each separate sample, making it easy for you to learn the context of a particular feature. With simple interface and intuitive navigation, getting around with the samples is easy and fast – you should try it for yourself.

ClientUI Technical Samples (Silverlight)

Note that the technical samples is available in both Silverlight and WPF platform with the same codebase. The WPF samples demonstrate that the same features available in Silverlight are also working flawlessly in WPF – from the basic features to the animation and user experiences. Here’s the screenshot for the technical samples in WPF.

ClientUI Technical Samples (WPF)

Again, the technical samples is installed by default when you install WebUI Studio for Silverlight and WPF, so there’s no additional download needed. It can be found in the Intersoft WebUI Studio program group under the respective platform group.

I hope you enjoyed the comprehensive learning resources we added in this release. Any questions or feedback are highly welcomed. Thank you for reading!

2012 R2 Online Samples and Documentation Updated

First of all, Happy New Year! I hope you enjoyed building apps with our tools in the past year, and we look forward to work with you again in 2013! We’ve plenty of exciting new products that we’re planning in this new year, and we’ll update our roadmap shortly in the next few weeks.

In case you missed the news, we’ve shipped the 2012 R2 volume release last month. You can download it here, and check out the what’s new list here. In addition to the new products listed in the “what’s new” list, the R2 release actually ships much more new features and enhancements that weren’t listed in the website. For instances, we also introduced sophisticated “cell locking” feature in UXGridView, brand-new theme manager, performance improvements in all combobox-variant controls, new usability feature in UXRibbon, and much more.

Where can I see all the new features and enhancements, you might asked. It’s in the documentation that you can access online today. The online product documentation features lightweight navigation interface similar to those in Help Viewer. You can easily browse through each topic from the left-side tree navigation, or from the breadcrumb at the top.

ClientUI Online Documentation

I’ve compiled several interesting topics that I think you should check out:

In addition to the online documentation, we’ve also recently updated the online samples for ASP.NET. The online samples now reflect the latest release which includes all-new WebDesktop samples demonstrating HTML5 and CSS3 support. In addition, many of the samples have been updated to the latest Modern UI styles.

ASP.NET Live Samples

Among dozens of WebDesktop controls that receive full HTML5 support, one that is quite noteworthy is the WebPaneManager control which undergone major surgery in order to achieve “fluid layout” that works in HTML5 browsers. If you’ve worked with layouting in HTML5, I trust you already foresee the difficulty level to create “fluid layout” that supports dynamic width/height, not to mention the support for nested groups and resizing and other UX features. Luckily, you can easily achieve complex layout now using the enhanced WebPaneManager control. See the following screenshot for example.

WebPaneManager supports fluid layout in HTML5

The beauty of the new WebPaneManager is that it’s very lightweight – thanks to the revamped layout from TABLE to DIV, and more importantly, it supports combination of fluid and static width/height – all without requiring scripting! This means that when users resize the browser, they’ll see real-time response. We haven’t seen a control with such capabilities thus far in the market, so we’re pleased to be the first delivering such innovative controls to you.

Well, you can check out the WebPaneManager samples and the rest of updated ASP.NET online samples here. Enjoy!

Best,
Jimmy

New Business-inspiring Samples in ClientUI 8

We’re excited to announce the latest WebUI Studio 2012 R2 release which is now immediately available for download here. In this R2 release, we’ve added dozens of new powerful controls for Silverlight and WPF that users have been waiting for. For ASP.NET, we’ve completely redesigned the new WebDesktop from the ground up to support the latest web standards such as HTML5 and CSS3.

To discover new controls and features that we’ve included in R2 release, you can visit What’s New in 2012 R2. In this blog post, I will share some of the featured reference samples demonstrating the new products, as well as reviewing the key features.

Below are some of the top new samples that go to my favorite list.

  1. Sales Dashboard
    UXChart is a collection of advanced charting control coupled with powerful MVVM data-binding capability for your Silverlight and WPF business application. UXChart takes any kind of data and transform them into beautiful charts that can leverage your business presentation.In this sample, UXChart is used to display the sales overview of Northwind’s merchandise over time while demonstrating its selection ability. Notice that there are 4 different types of chart, which are pie, doughnut, smooth lines and multiple series column charts. If you select one of the pie area in the upper left corner chart, the selected pie area exploded as the rest of the charts moves fluently to show the data corresponding to the selected area. Explore the sample.
    UXChart - Sales Dashboard
  2. Revenue Analysis
    UXChart is created on top of an advanced canvas that provides reliable support for interactivity features such as zooming, panning, and box selection.This sample shows UXChart amazing zoom capability in a Profit / Loss analysis scenario. The zoom options are enabled by default which allows users to easily zoom into specific area of the chart. You can move the zoom slider or scroll your mouse wheel to zoom in/out on the cursor position. See that the content seamlessly shrink and grow while maintaining the perfect gridline thickness thanks to UXChart advanced rendering technique. Pan through your data while maintaining your zoom level by dragging the slider or canvas to any direction. Try double clicking on the chart canvas to activate the step zoom feature. Explore the sample.UXChart - Revenue Analysis
  3. Sales Drill Down
    UXChart supports data drill down. In a drilldown chart, the data plots in each chart (for example pie slieces in Pie chart or columns in Column chart) act as hotspots to reveal the breakdown values of the selected data. With UXChart’s solid architecture you can even create multiple levels of drilldown.This sample created to showcase UXChart built-in drill down capability in a Product List scenario. Along with presenting exquisite charts, UXChart also pays close attention to every element involved in the charting control in order to bring state-of-the-art user experiences. Enjoy smooth animation as UXChart loads your data for the first time or during value changes. Both axis intervals are capable of shrinking and growing dynamically to cope with fluctuating data during zooming operation. Explore the sample.SalesDrilDown
  4. Hospital Management
    UXChart is a suite of business-oriented charting toolset equipped with a diverse list of chart types. It comes with more than 20 different chart types including bar, column, line, area, smooth line, smooth area, step area, donut, pie, bubble, radar, polar, scatter, stacked bar, stacked column, and more.In this sample, UXChart is used to present a hospital bed management dashboard. The Weekly Accuracy of Discharge Prediction chart shows how UXChart can bring more dynamics in data illustration by customizing the x-axis into percentage display. With UXChart, you don’t have to move your cursor on top of a particular data point to view its value. Try to move your cursor near any data points and the intelligent nearest-point-finder feature will trigger the intuitive tooltips to reveal the exact value behind the chart for accurate data reading. Explore the sample.HospitalManagement
  5. Web Analytics
    UXChart is engineered from the ground up with solid architecture to ensure blazing-fast performance and maximum scalability. It offers full support for MVVM data binding which unlocks the possibility of real-time chart update within your business application.This sample shows how UXChart can be used to display real-time traffic data and its associated data. With UXChart you don’t have to try hard pointing your cursor in order to read values behind a data point. Try to move your cursor near any data point and the intelligent nearest-point-finder feature will trigger the intuitive tooltips to reveal the exact value behind the chart for accurate data reading. Notice how the tooltip glides smoothly from one data point to another as you move your cursor around. Explore the sample.WebAnalytic
  6. Housing Filter
    UXQueryBuilder is an advanced data filtering control that allows user to dynamically build complex queries through an intuitive user interface. UXQueryBuilder also supports server-side filtering through QueryDescriptor, FilterDescriptors or client-side filtering through CollectionView. In this sample, uses QueryBuilder to filter a collection of houses in a house finder scenario. Explore the sample.HousingFilter
  7. Heritage Property Finder
    UXPropertyGrid is a versatile editor control that displays the properties of an object, which support all kinds of data types including text, boolean, date-time and even advanced data types such as enumeration.UXPropertyGrid allows multiple object properties to be displayed and edited. Therefore, this sample uses this control to edit a collection of house properties. Try holding Shift key while selecting several houses and notice how UXPropertyGrid lists all properties that are common to the two objects.PropertyFinder
  8. Customer List
    UXPropertyGrid provides built-in data binding support to read property values from a data source. With full MVVM support, you can easily populate a data collection property from a ViewModel. In addition, the component model annotation support allows the control to read the property’s settings automatically based on the specified attributes, such as the display caption, format string, maximum length, and many others.CustomerList
  9. Windows-style File Explorer
    UXBreadCrumb is an advanced navigation control that allows users to easily navigate between pages, with the familiar look of Windows Explorer navigation. UXBreadCrumb combines the address bar and menu functionality in an elegant single interface, enabling users to perform navigation in simple point-and-click manner.This sample shows how to emulate Windows-style file explorer while highlighting UXBreadCrumb’s powerful features such as load-on-demand and full MVVM support. Try to navigate around different nodes and notice that the icon and address are automatically synchronized to the current navigation target. Thanks to smart resizing feature, UXBreadCrumb automatically resize and adjust the URI into ellipsis text when the URI is exceeding the limit.FileExplorer
  10. Help Viewer
    UXBreadCrumb unleashes its maximum potential when a sitemap data is provided. It is automatically synchronized to the current navigation page. Users will also appreciate the sleek interface, ISO-compliance modal input and intuitive keyboard navigation.This sample demonstrates the UXBreadcrumb’s dynamic sitemap reading capability by populating the navigation nodes from external XML file. This control full supports both mouse and keyboard for navigating and editing. Try to use keyboard arrows to navigate between items and press F2 to enter editing mode where you can directly type in the target URL. Alternatively, you also can click the arrow down icon to enter the editing mode.HelpViewer

To find out more samples and experience it for yourself, please visit ClientUI Live Samples.

Feel free to download your copy here. And while waiting for the download, be sure to check out the complete what’s new list here. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

Any comments or feedbacks are welcome. If you have any questions regarding your account and subscriptions, please feel free to reach me by email.

Thank you and have a nice day.

Cheers,
Martin Lie

ClientUI 8 Goes RTM with Redesigned Live Samples

Finally, the wait is over! The new WebUI Studio 2012 R2 release is here with tons of new exciting tools and templates that will surely boost up your development productivity. Despite of the slight delay, I trust the new release worth the wait. First off, we don’t just release new controls to add to your toolbox, we also ship a number of new templates to help you quickly getting started with your projects. Furthermore, we’ve added over 175 new technical samples and over 75 new reference samples – all with brand-new look and feel and completely redesigned user experiences. With these inspiring samples, we wanted to help you unleash your big ideas and creativity and take them to the next level.

Alright, before we gone too far, here are some important links that you’ll need for this new release.

All-new, Completely Redesigned Live Samples.

In addition to many new controls we shipped in this release, we’re pleased to announce the all-new ClientUI live samples with completely redesigned user interface. It’s now featuring larger screen real estate, clean and modern design that allows one to focus better on content, and more intuitive navigation. And for the first time since its first debut 4 years ago, all controls now perform 70% faster than before – thanks to the continuous performance tuning and memory usage optimization.

More importantly, the new live samples puts some of the new R2 controls in action, so you can see how they can be leveraged in your own apps. I’m particularly referring to the new breadcrumb navigation control which completely redefines the overall navigation experiences. Combining hybrid address bar and menu functionality into an elegant user interface, you can now perform navigation in a simple “point-and-click” manner. Let’s take a look at the overview of the redesigned live samples below.

Introducing the all-new ClientUI live samples

And because we loved this intuitive navigation control so much, we decided to release it as a standalone reusable control to our valued customers. Feel free to unleash your big ideas and make it work your own way. Desktop application developers may rejoice! The navigation control is also available in WPF version, so you can be the first to build Windows 8 Explorer style business applications! We also shipped a WPF project template that leverages this versatile navigation control. More on that later.

In addition to the intuitive navigation, you can notice a whole new user experience that our designer team have put into this new live samples, for instances, it sports the improved CoverFlow with realistic depth shadow, better coverage on What’s New and Featured section – thanks to the fluid design allowing you to see more items in larger screen and adapts to reduced items in smaller screen.

Fluid design and improved CoverFlow

And now to the core part, the entire sample canvas has been revamped as well. Unnecessary toolbars and buttons are gone, fancy gradients are wiped out, options and other navigation elements are centralized to a collapsible pane. Embracing on the modern design, it’s now possible for us to create beautiful, full-screen user experience. See the following screenshot for details.

Experience beautiful, full-screen samples.

Enough said, visit the new ClientUI live samples now and experience it for yourself.

In this blog post, I only scratched the surface of the new exciting stuff that we delivered in this release. We’re fully passionate about design and user experiences that balance very well with functionality – and we carefully put that into the engineering process. That said, you can find that all our controls are engineered with thoughtful user experiences, in addition to the rich features and functionalities of course – that’s what sets us apart from other products in the market.

Last but not least, enjoy WebUI Studio 2012 R2! Hopefully this release comes just in time, so you can play around it now and make some planning for your big ideas in the next year. Again, here’s the link to download in case you haven’t done so, and make sure you check out the complete what’s new list here.

All the best,
Jimmy