Intersoft Solutions Corporate Blog » 2011 R2

UXFileUpload: Store Uploaded Files in Database

yudhiy — Thu, 26 Apr 2012 04:06:00 +0000

Handling client files which are uploaded to a server is a common requirement for application. Files can be uploaded either to the FileSystem of your server or directly to the database as BLOB.

However, there has been a lot of debate about the best way to store the files. I’m sure there are many people who have strong favor for why one option is better than the other and vice versa.

So there must be interesting differences between the two solutions. Let’s have a brief comparison between these two options.

FileSystem – Pros and Cons

Storing the files on disk is much easier and simple to implement. Having the files in the filesystem allow accesing it from many different standard applications such FTP, web browser etc. and users as well, independent of access to the database itself etc.

Another advantage is that files on disk are easy to backup; you just copy the files to another location. This also makes it easier to do incremental backups; files that have already been backed up don’t need to be copied again.

Probably the most problematic issue is the loosely coupled nature of the files on disk as they have no strong relation with a record in the database. So, when you delete, say, a customer from the database, you may end up with an orphaned customer’s image/photo. There is no direct way to do a JOIN between the customer table and your images folder to determine what orphaned files you have left.

Nevertheless, to store uploaded files on disk, your web server needs permissions to write to the file system. This is easy to overcome by when you run your own server, but may prove to be more problematic in an ISP scenario.

Database – Pros and Cons

The loosely coupled nature of the files on disk problem will not happen when the uploaded files are stored in database. They have strong relation with a record in the database. It will automatically gets deleted when record of an employee is terminated.

Another advantage of storing files in a database is the fact that all data is contained in a single location. Make a backup of your database and you’re ready to go. No need to copy files, set up permission and so on.

Performance is probably one of the disadvantages of storing files in a database. Storing files in a database somehow degrading the performance as putting binary data into the database has obviously some overhead.

Another cons is that whenever you make a full backup of your database, all the files are included, whether they have been changed or not. If you copy your backups to a different machine or network for safety reasons, you need to move the entire backup file. With a file based solution, you can use diff programs that can determine which files have been changed since the last backup, and only download those.

Realizing that both methods have their pros and their cons, the question is: what to choose? Personally, due to its easier and simpler to be implemented, I’d prefer to store the uploaded files on FileSystem.

However, in this occasion, I will not discuss further on the pros and cons of the file storage matter. I’m going to present the solution on how to store the uploaded files of UXFileUpload ClientUI control to database.

UXFileUpload Introduction

UXFileUpload is a feature-rich file upload control supporting Silverlight 3, Silverlight 4, and WPF. It includes all standard features you expected in a file upload control, plus a multitude of innovative features that unique to UXFileUpload such as multiple upload worker process, comprehensive MVVM and commanding support, smart file chunk algorithm, very large file upload support, file-level cancellation, drag-and-drop files from operating system, and more.

Despite of the large number of features, UXFileUpload is designed for an ultimate ease-of-use. The simplest UXFileUpload control can be defined with only two properties set, the ServiceUrl and the TargetFolder property. You set the ServiceUrl property to a value that determines the absolute web address where the server-side handler is configured to accept the file upload requests. The TargetFolder determines where the files should be stored in the server.

ClientUI includes a built-in ASP.NET server-side handler that you can use to accept the file upload requests from the UXFileUpload control. When using the built-in server-side handler, you can set the TargetFolder to a relative path in your web server, for an instance, ~/Upload.

Creating a Simple UXFileUpload Control

The following code shows the most basic configuration of a UXFileUpload control.

You need to register the server-side upload handler in your ASP.NET web project in order for the UXFileUpload control to work properly. For more information configuring the server-side handler for the upload control, see How-to: Configure ASP.NET Server-side Handler for UXFileUpload.

When viewing the control in either design or runtime, you will find the results similar to the illustration in the following:

With the upload control shown above, users can start to add files immediately by clicking the Add Files command in the toolbar and click on the Start Upload command to start uploading the selected files.

Once the Start Upload command is invoked, the file upload request will be handled by UXFileUploadHandler.ashx server-side upload handler. The uploaded files will be stored inside the Upload folder of the server.

In order to store the uploaded files to database instead of keep them in file system, we need to prepare following items.

Add and configure database which will be used as file storage.
Add and configure custom UXFileUpload handler.

Adding and Configuring Database

A database, called Files.mdf, is added into the App_Data folder of the web project. This database has Files table which consist 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
)

Adding and Configuring Custom UXFileUpload Handler

UXFileUpload implements a smart file chunk logic where multiple files can fit into a single upload request thus minimizing the client-server requests. With the smart file chunk logic, UXFileUpload allows you to upload very large files without have to worry about the performance and memory consumption in both client and server side. It is not necessary to change the maximum upload request length or other configuration in the server-side to accommodate the large files upload using the UXFileUpload control.

The built-in UXFileUpload server handler is designed with a great level of customizability, allowing you to inherit the UXFileUploadHandler class and override the properties as necessary. We can also customize the upload post processing logic, by overriding the provided methods.

We will create a custom UXFileUpload handler that will store the uploaded files into the database by overriding the OnUploadCompleted method. Within this method, we can find all the information we need, such as: the number of uploaded files; the file path of uploaded files; saved name of the uploaded files; etc. In OnUploadCompleted we have files that has been completely uploaded. This is important to ensure that there is no file problem such as corrupted files or incomplete files during the saving of the files to the database.

Generally, the custom handler will process each of uploaded files and do the following:

Read and manipulate the file using FileStream class.
Invoke sprocFilesInsertSingleItem stored procedure to store the file on Files.mdf database.
Delete the specified file from the location specified in TargetFolder property of UXFileUpload.

Open the UXFileUpload project and add a class library project, named as ExtendedUXFileUploadHandler.

Add the following code into the DatabaseFileUploadHandler.cs file.

public class DatabaseFileUploadHandler : UXFileUploadHandler
{
    protected override void OnUploadCompleted(List uploadedFiles)
    {
        if (uploadedFiles.Count > 0)
        {
            int FilesNumber = uploadedFiles.Count;

            for (int i = 0; i < FilesNumber; i++)
            {
                byte[] fileData = ReadFile(uploadedFiles[i].TargetFilePath);
                string originalName = uploadedFiles[i].SavedName;

                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);

                    prmId.Value = uploadedFiles[i].ID;
                    myCommand.Parameters.Add(prmId);

                    // 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 = uploadedFiles[i].SavedName;
                    myCommand.Parameters.Add(prmOriginalName);

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

                File.Delete(uploadedFiles[i].TargetFilePath);
            }
        }            

        base.OnUploadCompleted(uploadedFiles);
    }

    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;
    }
}

The ReadFile function will reads the source file into a byte array. The Read method of FileStream object returns zero only after reaching the end of the stream. Otherwise, Read always reads at least one byte from the stream before returning. Finally, close the current stream and releases any resources associated with the current stream when Read method returns zero.

After completing the read process and set up the required parameter, fileData byte array will then be inserted into Files table by invoking the sprocFilesInsertSingleItem stored procedure.

Finally, delete the uploaded file from the specified path after execute the stored procedure.

Before running the solution, build the project and add the reference of ExtendedUXFileUploadHandler.dll into the web project. Then re-define the handler in Web.Config file into the following.


  ...
  
        
      
                     type="ExtendedUXFileUploadHandler.DatabaseFileUploadHandler, ExtendedUXFileUploadHandler"/>
      
    
  
    
                 type="ExtendedUXFileUploadHandler.DatabaseFileUploadHandler, ExtendedUXFileUploadHandler" />      
    
  
  ...

Save all the changes and run the project.

Add files to be uploaded and click Start Upload. After the uploading process completed, the uploaded files is no longer available in the TargetFolder location. The file is now stored in database.

In this post, we have learnt how to store uploaded files of UXFileUpload to database by overriding the UXFileUpload handler.

Click here to download the sample project and feel free to drop me a line in the comment box if you find that this post useful, or have any questions and feedback regarding this topic.

Regards,
Yudi Ariawan

Create Rich Outlook Style Silverlight Application in Minutes

yudhiy — Mon, 16 Apr 2012 10:04:52 +0000

Recently I was assigned to create a simple Silverlight project that shows a list of data with full editing support. The first thing that comes to my mind is using the ClientUI project template as a first step to start working on this task.

After spending about 30 minutes trying all the project templates that come with Intersoft WebUI Studio 2011 R2 SP1, I decided to start the project using Intersoft ClientUI Ribbon Application template. This project template allows the creation of rich Silverlight application with rich Ribbon interface and integrated navigation interfaces.

Intersoft ClientUI Ribbon Application template is ideal to build business applications with relatively large modules and features. The template ships with predefined MVVM infrastructure that demonstrates how to use UXRibbonBar as a command placeholder that dynamically change its content based on the active module. It also includes fully-functional MVVM examples such as Mail and Calendar which are implemented with the advanced data controls available in ClientUI.

Building rich application using this Ribbon project template is easy and straightforward. In this blog post, I’ll share some of my experiences building the project such as adding the navigation, customizing the ribbon through XML configuration file, and drop-in the data grid to display data.

Let’s get started!

Creating a new project from the Ribbon Application project template

We’ll start by creating a new Silverlight project using Intersoft ClientUI Ribbon Application project template. This project template is available after install the Premier edition or Intersoft WebUI Studio 2011 R2 (or newer) for Silverlight and WPF. To create a new Intersoft ClientUI Ribbon Application project, open Visual Studio and select File > New > Project… (or press Ctrl+Shift+N) from the menu bar. Select Intersoft ClientUI Ribbon Application from New Project window. Enter the appropriate details to create the new application project.

One nice feature of Intersoft project template on New Project window of Visual Studio is that you can have the Intersoft project template grouped under Intersoft Solutions node of Installed Templates tree view.

The project template contains several predefined configuration, assembly references, and code files such as Assets, Factory, Selectors and several XAML files. Click here to learn more about the structure of this project template.

When you run the project for the first time, you’ll see a fully-functional user interface such as shown below.

Creating Inventory UXRibbon Structure

I’m going to add a new module which will show list of products. The module will have its own ribbon bar control which employs three buttons: add new data; edit selected item; and delete selected item.

Three image files are added into the [SilverligthProject]AssetsImagesInventory folder as the icon for each of the button.

Instead of declaring the ribbon structure directly in the xaml page, the ribbon structure is defined in an xml file, RibbonInventoryData.xml. The file is located inside the [SilverlightProject]AssetsData folder.

RibbonFactory.cs class will read each element, attributes of the xml file; parse them to the appropriate object; and create the ribbon to be displayed.

Once the ribbon structure is configured, we need to initialize the ribbon data source and register the Inventory module so that the ribbon tab will be dynamically updated when user select Inventory module.

To initialize the ribbon data source, find InitializeRibbonBar() method in the RibbonPageViewModel.cs class and add a line as shown in the following code. *The class can be found in [SilverlightProject]ViewModels folder.

private void InitializeRibbonBar()
{
    // Initializes application menu
    this.RibbonApplicationMenu = RibbonFactory.CreateMenu(RibbonDataFolder + "RibbonBarData.xml");

    // Initializes ribbon data sources
    this.RibbonData = new Dictionary();
    this.RibbonData.Add(ModuleType.Overview, "RibbonOverviewData.xml");
    ...
    this.RibbonData.Add(ModuleType.Inventory, "RibbonInventoryData.xml");
}

Before running the project and showing the ribbon structure of Inventory module, we need to register the Inventory module in the UpdateRibbonTab method. UpdateRibbonTab is the method that will be invoked when users select a module.

internal void UpdateRibbonTab(ModuleType moduleType, object context)
{
    ...

    switch (moduleType)
    {
        case ModuleType.Calendar:
        case ModuleType.Contacts:
        case ModuleType.Inventory:
        case ModuleType.Mail:
            this.RibbonContextualGroups = RibbonFactory.CreateRibbonContextualTabGroups(RibbonDataFolder + this.RibbonData[moduleType]);
            this.RibbonTabs = RibbonFactory.CreateRibbonTabs(RibbonDataFolder + this.RibbonData[moduleType], context);
            break;

        default:
            this.RibbonTabs = RibbonFactory.CreateRibbonTabs(RibbonDataFolder + this.RibbonData[ModuleType.Overview], context);
            break;
    }

    this.ActiveModule = moduleType;
}

Save all the changes and run the Silverlight application project.

The ribbon structure for Inventory module has been successfully added. When users click/select the Inventory module from the navigation pane, the Add New button; Edit button; and Delete button will be shown.

Displaying The Product List with UXGridView

In this part, we are going to display a list of products. The list will be presented in an UXGridView control.

In this project, UXGridView is bound to WCF RIA Services. In this post, I will not describe in detail about how to configure the application to become WCF RIA Services-enabled; creating the data model; etc. I’d like to suggest you to refer to Intersoft ClientUI MVVM Data Application (WCF RIA SP1) project template. To learn more, see Walkthrough: Create New Intersoft ClientUI MVVM Data Application (WCF RIA SP1) Template.

Once the data repository of Products is completely added, Add UXGridView control and bind the ItemsSource property with Items property from ProductsViewModel; and bind each column of the UXGridView to their corresponding property of ProductsViewModel respectively.

Save all the changes and run the project.

The Inventory module now has had a ribbon structure and will display a list of product in the ContentFrame.

Adding Commanding and Enabling/Disabling UXRibbon Button Based on UXGridView Selected Item.

In this part, I’d like to set the enable/disable state of each ribbon button based on the selected item of UXGridView. By default, the Add New UXRibbonButton is enabled since user should be able to add new item at any time. When no item is selected in UXGridView, Edit and Delete button should be disabled. They will be enabled when item(s) are selected.

In UXGridView, when a row is selected, the SelectedItem property will be automatically synchronized. I can bind this property to my ViewModel to capture the currently selected item. This property is then converted to a Visible/Collapsed and then consumed by IsEnabled property of UXRibbon button to determine whether the UXRibbon button is enabled or not.

Several questions arise when I started to check the feasibility to implement this approach.

The Inventory.xaml page and the UXRibbon are located in different view. Each of them has their own ViewModel. Implementing converter seems not as easy as I thought earlier.
The xml file of ribbon structure is processed by RibbonFactory.cs class by implementing parser. I need to ensure whether the ribbon button parser is equipped with binding parser or not.

I’m pretty sure there must be an elegant solution for a simple scenario such as this. So I decided to explore this project and hope to find an example that can be applied to my scenario.

After spending about 15 minutes exploring the project, clues are spotted when Mail module is opened. Some of the ribbon buttons are disabled when no message is selected.

This is exactly what I’m looking for!

It turns out that DelegateCommand play an important role in such scenario as shown in the Mail module. ClientUI provides DelegateCommand, a specialized command object that can be used to handle a delegate directly in the view model, and still can be bound to the view through binding. Furthermore, the DelegateCommand takes advantage of the routed command concept in which the IsEnabled state of the command sources will be automatically synchronized depending on whether the command can execute.

Many thanks to ClientUI development team who has extended the commanding framework to support MVVM through built-in DelegateCommand class. Not only this, they also have made this project template brilliantly. I mean it and don’t intend to exaggerate about what I say. Building Silverlight application based on Intersoft’s project template is considerably easy, even for beginners. I started to learn the implementation of DelegateCommand on Mail module and reset the plan to implement this scenario to be as follow.

There are three UXRibbon button: Add New; Edit; and Delete. Each button is bound to the AddAction; EditAction; and DeleteAction DelegateCommand respectively.

RibbonInventoryData.xml

...

ProductsViewModel.cs

public class ProductsViewModel : EditableGridViewModelBase
{
    public ProductsViewModel()
    {
        this.AddAction = new DelegateCommand(AddCommandAction, CanAddAction);
        this.EditAction = new DelegateCommand(EditCommandAction, CanEditAction);
        this.DeleteAction = new DelegateCommand(DeleteCommandAction, CanDeleteAction);
    }

    public DelegateCommand AddAction
    {
        get;
        set;
    }

    public DelegateCommand EditAction
    {
        get;
        set;
    }

    public DelegateCommand DeleteAction
    {
        get;
        set;
    }

    ...

    private bool CanAddAction(object obj)
    {
        //this method validate whether or not AddNew button is active
        //In this sample, I will keep this button to be always active
        return true;
    }

    private bool CanEditAction(object obj)
    {
        if (this.SelectedProductItem != null)
            return true;
        return false;
    }

    private bool CanDeleteAction(object obj)
    {
        if (this.SelectedProductItem != null)
            return true;
        return false;
    }

    private void AddCommandAction(object obj)
    {
        MessageBoxServiceProvider.Show("add new row is performed", "Information",
                    Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null);
    }

    private void EditCommandAction(object obj)
    {
        MessageBoxServiceProvider.Show("edit selected row is performed", "Information",
                    Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null);
    }

    private void DeleteCommandAction(object obj)
    {
        MessageBoxServiceProvider.Show("delete selected row is performed", "Information",
            Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxButton.OK, Intersoft.Client.UI.Aqua.UXDesktop.MessageBoxImage.Information, null);
    }
}

In the next series of my blog post, I will add a final touch to this Ribbon application by displaying detail information of data (for adding and editing operation) in a form.

Download Sample Code

For your reference, the demo project can be downloaded here.

I hope that this project will help you to prepare a simple demo project and provide you with insights about how easy to start developing Silverlight project using Intersoft Silverlight project template.

I’d love to hear your feedback so be sure to drop your comments in the box below.

Regards,
Yudi

Deploy ClientUI Report Application Separately from Report Server

yudhiy — Thu, 01 Mar 2012 11:22:17 +0000

Today I start to create a simple Silverlight project that uses Intersoft SqlReportViewer. This project will be used to display Microsoft SQL Server 2008 Reporting Services (further abbreviated as SSRS) document. The objective is to create SqlReportViewer application where the SSRS is located in different server.

The first step begins with creating a new project using Intersoft ClientUI MVVM Application project template.

After the project creation completed, you need to configure SqlReportViewer at first. Specifically, the following tasks are required in order to start using SqlReportViewer in your application:

Register the SqlReportViewer rendering engine in SQL Reporting Services.
Register the SqlReportViewer handler and SQL Reporting Services web service in the web project.
Set the SqlReportViewer proxy and web service property.

For more information on how to configure SqlReportViewer for first time use, it is suggested to check ClientUI documentation, Walkthrough: Configuring SqlReportViewer for First Time Use.

As you may see on the XAML code, the ReportProxyHandler and the ReportServer properties are set to different location of server. The project will be deployed on the deployment server, Saturn-PC. There will be another server, Uranus-PC, which will act as the SSRS server.

For this kind of scenario, you need to create a custom SqlReportViewer handler. The reason is because by default, the Intersoft SqlReportViewer handler uses Impersonate as the TokenImpersonationLevel. This means that the server process can impersonate the client’s security context on its local system. The server cannot impersonate the client on remote server.

The screenshot below shows what will happen when we use the default SqlReportViewer handler.

The impersonation level and network credential are handled by the SqlReportViewer handler. We need to add a class which inherits SqlReportViewerHandler, then set the ImpersonationLevel and NetworkCredential to the proper value.

Open the project and add a class library project, named as ExtendedSqlReportServer.

Add the following code into the Class1.cs file.

//NewClass1 inherits from Intersoft.SqlReportViewer.Server.SqlReportViewerHandler
class Class1:Intersoft.SqlReportViewer.Server.SqlReportViewerHandler
{
    private System.Security.Principal.TokenImpersonationLevel newImpersonationLevel;
    private System.Net.NetworkCredential newWindowsClientCredential;

    //Override the ImpersonationLevel property
    //modify the default Impersonation to None
    public override System.Security.Principal.TokenImpersonationLevel ImpersonationLevel
    {
        get
        {
            newImpersonationLevel = System.Security.Principal.TokenImpersonationLevel.None;
            return newImpersonationLevel;
        }
        set
        {
            newImpersonationLevel = value;
        }
    }

    //Override the WindowsClientCredential property
    //set the NetworkCredential to the proper credential of SqlReport Report Server
    public override System.Net.NetworkCredential WindowsClientCredential
    {
        get
        {
            newWindowsClientCredential = new System.Net.NetworkCredential("username", "password", "Saturn-PC");
            return newWindowsClientCredential;
        }
        set
        {
            newWindowsClientCredential = value;
        }
    }
}

As seen in the code above, the ImpersonationLevel property is overridden to return TokenImpersonationLevel.None, while the WindowClientCredential property is overriden to return the NetworkCredential object with proper user credential who has sufficient security permission to access the SSRS server. Of course, you should encrypt or obfuscate your code for the best security, especially when it contains security sensitive information.

After building the ExtendedSqlReportServer project, add the ExtendedSqlReportServer assembly file as References into the Web project. Finally, you redefine the SqlReportViewer handler using the new handler assembly.

In this post, you have learnt how to configure SqlReportViewer where the SqlReport service is deployed on remote server.

Should you find this post useful, or have any questions or feedback, please feel free to drop me a line in the comment box.

Best Regards,
Yudi Ariawan

Enable HTTPS mode in SqlReportViewer and SQL Report Service

handy23 — Thu, 01 Mar 2012 07:30:23 +0000

Normally, SQL Report Service (SSRS) is configured to run in HTTP by default. In this blog post, I will show you the steps required to configure the SSRS to use HTTPS mode, and how to configure the SqlReportViewer control to target the HTTPS-enabled report server.

First, you can set HTTPS mode in SSRS by clicking Advanced button.

When configuring HTTPS, please use a valid Certificate for HTTPS. In this case, please contact your Certificate vendor.

Once SSRS has been configured HTTPS, it will look like the following screenshot.

Now that the SSRS server has been changed to HTTPS, the ReportServer property of the SqlReportViewer needs to be changed as well.

Example:

ReportServer=”https://win7-x32-1:443/ReportServer”/>

Finally, in order to support HTTPS mode completely, you need one more additional setting in the web.config of the web application that hosts the Silverlight application. Otherwise, you will get the error below.

To resolve the error, change the security mode from TransportCredentialOnly to Transport in web.config. These changes are important due to the nature of HTTPS which requires more secure communication channel.

The code in the web.config looks like the following.

If you have any difficulties or issues regarding this scenario, please feel free to leave your comment, or post your questions to Intersoft Community.

Warm Regards,
Handy

Customize UXFlow Appearance Based on Item Position

handy23 — Wed, 29 Feb 2012 12:45:18 +0000

The latest ClientUI release (2011 R2 SP1) introduces several enhancements for UXFlow control. Some of the significant enhancements are the new AutoReflection property and PositionStates visual states. They are introduced to set different styles in UXFlowItem according to its position.

The new PositionStates enhancement enables you to customize the layout and appearance of the item based on the flow position. See the following illustration.

In this blog, I’m going to share how to achieve the above scenario in a step-by-step walkthrough.

1. Put additional text to the UXFlowItem.

You will need Microsoft Expression Blend to edit the ItemContainerStyle of the UXFlow control.

After the generated template is shown, put the text in CoverElementPerspective. CoverElementPerspective contains the ImageLoader of UXFlowItem. That’s the reason why the text requires to be put in that element. In this case, TextBlock is used as the text.

To easily maintain the layout, let’s use Grid and StackPanel container with configuration as shown below:

2. Implement the visual state and switch the position by using PositionStates in VisualStateGroup.

As stated before, PositionStates is available only in the SP1 release.

The PositionStates is automatically generated after you use EditItemContainer template.

Center is the default state when an item is selected. Therefore, you only need to customize position, animations and styles for the LeftSide and RightSide.

3. Set AutoRefreshReflection to true.

When using the default UXFlow configuration, the reflection will be automatically cached. This may cause a reflection issue while switching the styles. To avoid this issue, simply set AutoRefreshReflection to true.

You can also download the sample project for your references.

I hope this post can give you some insights about styling with UXFlow control. As usual, feedback and comments are always welcome.

Warm Regards,
Handy

Introducing ImageAbsolutePath Feature in SqlReportViewer

glayaar — Wed, 25 Jan 2012 04:12:00 +0000

The recently released service pack includes a number of enhancements to the SqlReportViewer control. One of the enhancements is the addition of ImageAbsolutePath property. This property is introduced for use in scenario involving multiple server environment.

In the initial release, ImageAbsolutePath is inferred from ImageVirtualPath. In this case, the control always assume that the SqlReportViewer and SQL Reporting Service is located on the same server. However, based on customer feedback, scenarios involving multiple server location is common in enterprise application deployment.

For example, the SqlReportViewer service is hosted on ssrs-1 server while the SqlReportingService is located on web-1. The scenario requires user to set both the ImageVirtualPath and ImageAbsolutePath properties, because the inferred absolute path from a remote location will not return a correct result. A code snippet to address such scenario would be:

The above code snippet assumes that the report images will be stored to the C:inetpubwwwrootTempImages folder on the ssrs-1 server and virtually hosted on http://ssrs-1/TempImages. In this case, you need to configure ssrs-1 as the image server by creating the TempImages virtual directory.

If opening up the SQL report server as public web server is not option, simply set the ImageVirtualPath property to the web-1 server. Everything else should remain the same. In this case, you need to configure the IIS in the web-1 server by creating a virtual directory and map it to the network path in the ssrs-1 server.

I hope this post gives you insights on the new ImageAbsolutePath feature and how it can be used along with other properties to achieve advanced deployment scenarios. Any questions or feedback are welcomed.

For the complete list of enhancements and fixes in the latest ClientUI release, please visit our support page.

Regards,
Glenn Layaar

Working with SqlReportViewer Parameter

glayaar — Tue, 24 Jan 2012 01:22:00 +0000

The latest ClientUI release comes up with a host of new amazing controls that have been awaited by many developers. One of the new controls is SqlReportViewer, which is used to display SQL Reporting Service reports in Silverlight or WPF applications.

In this blog post, I will share how to work with the report parameter features in SqlReportViewer, e.g. fill the parameter with default value, hide some parameters, and use custom validation to validate the inserted parameter value.

Consider this scenario, we have a holiday request form that a user needs to fill. The report by default requires these parameters to be filled:

Company Name
Username
First Name
Last Name
Start Date
End Date
Holiday Name

In this scenario, the Silverlight application will retrieve the Company Name, Username, First Name, and Last Name based on the user login information. Since these information are already predefined, SqlReportViewer has the capabilities to hide and automatically fill these parameters value.

As shown in the above image, Company Name, Username, First Name, and Last Name by default has been set programmatically. Company Name and Username is hidden as well, since we would like the value not to be modified by the user.

In order to achieve this behavior, you need to bind the ReportParameters property to a ObservableCollection using TwoWay mode.

The default value and Visible property is modified during ObservableCollection collection changed event, see the code snippet below.

void _reportParameters_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    if (e.NewItems != null)
    {
        foreach (object paramObj in e.NewItems)
        {
            SqlReportParameterMetadata sqlParamObj = paramObj as SqlReportParameterMetadata;
            if (sqlParamObj != null)
            {
                switch(sqlParamObj.Name)
                {
                    case "CompanyName":
                        sqlParamObj.Value = this._companyName;
                        sqlParamObj.Visible = Visibility.Collapsed;
                        break;
                    case "Username":
                        sqlParamObj.Value = this._userName;
                        sqlParamObj.Visible = Visibility.Collapsed;
                        break;
                    case "FirstName":
                        sqlParamObj.Value = this._firstName;
                        break;
                    case "LastName":
                        sqlParamObj.Value = this._lastName;
                        break;
                }
            }
        }
    }

    OnPropertyChanged("ReportParameters");
}

public ObservableCollection ReportParameters
{
    set
    {
        if (_reportParameters != value)
        {
            _reportParameters = value;
            _reportParameters.CollectionChanged += new System.Collections.Specialized.
                NotifyCollectionChangedEventHandler(_reportParameters_CollectionChanged);
            OnPropertyChanged("ReportParameters");
        }
    }
    get
    {
        return _reportParameters;
    }
}

For simplicity, the sample is using a static value to retrieve the default parameter value.

this._companyName = "Intersoft Solutions";
this._userName = "jdoe@intersoft.com";
this._firstName = "John";
this._lastName = "Doe";

A custom validation which does not allow StartDate earlier than EndDate has also been provided.

This behavior is achieved by using a custom SubmitParameterCommand and binding IsReportParameterError property to a boolean property with TwoWay mode. Setting IsReportParameter property to False aborts the report execution to the reporting services.

During command execution, the code below will validate if the EndDate is later than StartDate. It will also set the IsReportParameter to False if the validation fail.

public ReportSampleViewModel()
{
    _submitParameterCommand = new DelegateCommand(ExecuteSubmitParameter, CanSubmitParameter);
}

public DelegateCommand SubmitParameterCommand
{
    get { return _submitParameterCommand; }
}

private bool CanSubmitParameter(object parameter)
{
    return true;
}

private void ExecuteSubmitParameter(object parameter)
{
    ObservableCollection sqlParams = parameter as ObservableCollection;

    if (sqlParams != null)
    {
        ISqlParameterMetadata sqlStartParam = sqlParams.Where(x => x.Name == "StartDate").FirstOrDefault();
        ISqlParameterMetadata sqlEndParam = sqlParams.Where(x => x.Name == "EndDate").FirstOrDefault();

        if (sqlStartParam != null && sqlStartParam.Value != null &&
            sqlEndParam != null && sqlEndParam.Value != null)
        {

            DateTime startDate = (DateTime)sqlStartParam.Value;
            DateTime endDate = (DateTime)sqlEndParam.Value;

            if (endDate.CompareTo(startDate) > 0)
            {
                this.IsReportParameterError = false;
                sqlStartParam.ClearError("Value");
            }
            else
            {
                this.IsReportParameterError = true;
                sqlStartParam.SetError("Value", "Start date must be earlier than End date");
            }
        }
    }
}

Here is the link to the sample project and the link to the RDL used in this sample.

Conclusion

In this post, I have discussed the report parameter feature in SqlReportViewer. The feature allows you to insert default parameters value, hide parameters, and use custom validation to validate the parameter. If you would like to learn more about SqlReportViewer, please see SqlReportViewer Overview.

As an extra note, hiding parameter feature is an enhancement in the latest SqlReportViewer build and requires the latest ClientUI hotfix.

SqlReportViewer is available in the latest 2011 R2 release which you can download here. If you have questions or feedback regarding SqlReportViewer or other ClientUI controls, feel free to post them to our community forum.

Regards,
Glenn Layaar

Native Silverlight 5 Support and 100+ Enhancements

Jimmy Petrus — Fri, 20 Jan 2012 16:19:56 +0000

Just a month ago, the Silverlight team has finally released the long awaited Silverlight 5. The latest Silverlight release simply signals that the technology is still of interest by huge number of developers. With dozens of exciting features in Silverlight 5 such as full trust support for in-browser apps, vector printing support, 64 bit support and hundreds more, it’s obvious that Silverlight will still be the preferred line-of-business application platform for many years to come.

Ever since Silverlight 5 was released, we’ve been bombarded with emails and forum posts asking when we will upgrade our tools to support it. And I’m pleased to answer that the day is today. You can download WebUI Studio 2011 R2 Service Pack 1 here which is a free upgrade for all existing subscribers.

Speaking about Silverlight 5 support, we shipped not only about “compatibility” support with the Silverlight 5 runtime, but to the extent of “native” Silverlight 5 support where we improved many areas of our components to leverage the new features introduced in Silverlight 5. Once you installed the service pack, noticed that ClientUI assemblies for Silverlight 5 are now available in the separate folder.

Among the most significant enhancements is the vector printing support. All document viewer lineup in ClientUI – such as Fixed Document Viewer, XPS Document Viewer, Flow Document Viewer, and SQL Report Viewer – now automatically leverage vector printing by default, and fallback to the bitmap printing if unsupported by the printer.

The Flow Document Viewer has been significantly enhanced to support the improved graphic stack introduced in Silverlight 5 which enables the images to dynamically loaded in different UI thread while at the same time maintaining the layout consistency.

Upgrading your existing project to Silverlight 5 is as easy as few clicks away – thanks to the seamless integration to the Silverlight 5 developer tools. Simply bring up the project properties and change the Silverlight target version to Silverlight 5. Once you ok’ed the changes, Visual Studio will refresh the project’s references and automatically pick up the Silverlight 5 version of ClientUI assemblies. To ensure that your project is now upgraded, select a ClientUI assembly and press F4 to see the assembly properties, as shown in the following figure.

Note that ClientUI supports side-by-side development with Silverlight 3, Silverlight 4 and Silverlight 5 – by far the industry’s most comprehensive toolset for Silverlight development.

Another major effort that our team have put in this latest release is a brand-new wizard for Silverlight and WPF templates. Previously, some ClientUI templates depend on the installed Silverlight version. Several templates also have to be made separately to target different version of WCF RIA Services (i.e., RTM, SP1 and SP2). In this latest release, the ClientUI project templates no longer depend on the Silverlight version. A single project template now works flawlessly regardless of the WCF RIA Services, see the shot below.

For data-driven project templates, you can now choose the target Silverlight version when creating a new project, see the shot below.

In addition, the service pack also throws in nearly 100+ enhancements and fixes across all Silverlight, WPF and ASP.NET controls. To see the complete list, please download the release notes here.

So what’re you waiting for? Kick-off the new year with this exciting release, and build some amazing apps fast.

Note: Existing customers can also download the service pack from Intersoft Developer Network, under My Components link.

Best,
Jimmy Petrus

Intersoft 2011 Holiday Offers Start Today

martinlie — Fri, 16 Dec 2011 09:07:25 +0000

Great news for all of you! During this holiday season, I’m very excited to announce that our most popular holiday offer is back. An interesting offer – Purchase a 1-year full subscription of any WebUI Studio editions, and you’ll get another subscription – free of charge. Of course you can use this moment to send the gift to someone you care the most – your colleagues, friends or relatives – or reserve it for a new team member for the next projects.

This great offer is not forever, means that it is limited only until 31st December 2011. So Hurry up! Don’t miss out this great opportunity! Time to save your money – take advantage of this special holiday offer and get two subscription licenses for the price of one. For more information about this promo, click here.

Visit our online store to get your copy along with the free second copy gift today, or feel free to contact me at martin@intersoftpt.com for any questions.

Thank you and happy holiday!

Regards,
Martin

New Business-Inspiring Samples in ClientUI 6

martinlie — Fri, 09 Dec 2011 09:29:13 +0000

The latest ClientUI release comes up with new amazing controls that have been awaited by many developers, such as UXScheduleView with its scheduling capabilities, UXRibbon with its rich styling features, UXFlowDocumentViewer with its unique viewing performance and much more. Click here to find out more about the new controls in ClientUI 6.

In this blog post, I will share some of the new samples demonstrating the new products, as well as reviewing the key features.

Below are the top 10 new samples that goes to my favorite list.

Hospital Medical Scheduler
UXScheduleView is a powerful, MVVM-ready scheduling control that offers many advanced features and rich user experiences in a single box. This sample is a good demonstration of the latest UXScheduleView with many features enabled such as adding, editing and deleting events.

This sample defines the views as Daily, Next 3 Days and Week which can be elegantly defined through property sets in the XAML. It also demonstrates UXScheduleView’s strong customization support which allows you to redefine the styles, appearances and templates to fit your requirements, for instances, displaying the photo of the respective doctors.

In addition, many key features can also be seen in this sample such as high-performance grouping, real-time interactivity and drag-drop support, sophisticated editing capability, ISO usability standards conformance, and more. You can drag-drop the event without having to manually modify the time schedule. Explore the sample.
Software Project Schedule
One of the most advanced features in UXScheduleView is its extensible view architecture which enables you to create your own custom views and easily instantiate the custom views into the UXScheduleView control. This sample includes a custom Agenda view which displays events in a simple list view. Notice that the custom view takes advantage of the automatic calendar synchronization which highlights the days covered by the view. Explore the sample.
Nested Grouping
If the above scenario shows about standard grouping, this sample demonstrates several advanced grouping features such as multi-level (nested) grouping using UXScheduleView. You can flexibly define the group items and orders through the GroupCollection property. Explore the sample.
TextPad Editor
This sample demonstrates a complete overview of the unique features available in UXRibbon such as fluid group and button resizing, state-of-the-art UI design and pixel-perfect layout rendering. It also shows the key ribbon features such as dozen of button variants, fluid tab group, ordered tab group, application menu, backstage view, quick access toolbar, key tips, and much more.

Despite of the rich features, UXRibbonBar is designed with lightweight and blazing-fast fluent resizing in mind. Explore the sample.
CRM
One of the unique metaphors in Ribbon UI is the contextual tab concept which lets you display certain groups of commands based on a certain condition or context. For example, instead of showing schedule-related commands with disabled state initially, it is more intuitive to hide them initially, then show them on-demand when the context is available such as when a follow-up record is selected.
UXRibbonBar includes full support on this unique “contextual tab” metaphor which is well demonstrated in this business-inspiring CRM sample. Try to select a record in the Follow-up Schedule grid, notice that the “Schedule” contextual group will be shown with the “Follow Up” tab automatically selected.

UXRibbonBar also supports multiple contextual groups to be activated at the same time. With the “Schedule” contextual group shown, try to click on the Search text box. Notice that a “Search” contextual group will be displayed along side with the “Schedule” contextual group. When the context is out (i.e., tab out from the Search text box), the contextual group will automatically disappear and then select the first tab of the UXRibbonBar. Explore the sample.
News Buzz
In this sample, UXFlowDocumentViewer is used to display the latest news documents. Try to select a category in the left navigation and the related news will be displayed in the viewer.
UXFlowDocumentViewer has multiple view mode switching capability. Try to switch between Page view and Scroll view using the view mode tool commandsand the content will be adjusted to the selected view mode.

Also, you can perform zooming using either the zoom bar or zoom level. Click the “Show Actual Size” button to reset back to 100%. Or, toggle the full screen mode for maximum reading experience. Click the Print button to directly print the document exactly as user views it.

Try the search feature to search a text. Try to type “the” and note that all the matched words will be highlighted. When you switch to scroll view, the search text will be persisted and all the matched words will be highlighted as well. Explore the sample.
Personal Email Viewer
UXFlowDocumentScrollViewer allows users to view flow content in scroll mode. In scroll mode, the content will flow based on the viewer size.

In this sample, UXFlowDocumentScrollViewer is used as a personal email viewer, which loads an email (in HTML format) when user selects an item from the top navigation. Explore the sample.
Product Sales Report per Customer

SQLReportViewer is a SQL report viewer for Silverlight with sophisticated rendering engine – conforming to SQL reporting services rendering. In this sample, SQLReportViewer provides users with the capability to view the product sales report.

You can perform zooming using either zoom bar or zoom level. Click the “Show Actual Size” button to reset back to 100%. Or, toggle the full screen mode for maximum reading experience. Click the Print button to directly print the report exactly as users views it. Explore the sample.
Sales Order Invoice
This sample demonstrates on how SQLReportViewer is able to accurately parse and render any SQL reporting service report, such as a sales order invoice. The thumbnail navigation could be used to jump between pages. Explore the sample.

You can perform zooming using either zoom bar or zoom level. Click the “Show Actual Size” button to reset back to 100%. Or, toggle the full screen mode for maximum reading experience. Click the Print button to directly print the report exactly as users views it. Explore the sample.
Data LookupBox
This sample demonstrates how to implement data lookup using the UXDataLookUpBox control. UXDataLookupBox is an intuitive data input control that combines the ease of auto-complete and the flexibility of custom lookup.

Try to click the “Search” icon and type “ca” to search customers based on Contact Name. Finally, it will automatically list all orders purchased by the selected customer. Explore the sample.

There are many other samples collection which you can visit in our ClientUI Live Samples. You are welcome to evaluate our 30-days trial in here. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

Should you have any questions regarding sales, you can contact martin@intersoftpt.com. Any comments or feedbacks are welcome.

Thank you and have a nice day.

Regards,
Martin