Tag Archives: DevForce

DevForce 2012 Support in ClientUI for Silverlight & WPF

Since 2010, we’ve partnered with IdeaBlade to provide our customers with a comprehensive and robust solution for building highly scalable line-of-business applications. The successful integration between IdeaBlade’s DevForce and our flagship ClientUI toolset significantly improves developer’s productivity – allowing them to leverage the MVVM pattern to build beautiful interface and at the same time enjoying the client-side LINQ query capability as well as many other advanced features available in DevForce.

As DevForce 2012 is now officially released to the market, we’re committed to continue supporting the latest DevForce version and leverage its new features in our toolset.  DevForce 2012 is the sevent-generation of the DevForce n-tier architecture released by IdeaBlade. This version has supported some noteworthy features such as .NET 4.5 asynchronous programming support, Entity Framework 5 support, and Windows Store Apps support. For more details, please visit DevForce 2012 information page.

DevForce 2012 Support

The latest suite of Intersoft WebUI Studio 2012 R2 ships with DevForce 2010 (version 6.1.7.0). In the next release, we’ll include full support for DevForce 2012. However, we’ll make available the new DevForce 2012 support assemblies so you can start using them today. In this blog post, I’ll share how to implement DevForce 2012 support in your existing applications.

We provide two kind of support for DevForce 2012 which are detailed in the following sections.

Using Backward Compatibility

This solution is intended for existing DevForce 2010 .NET and Silverlight projects which uses the “operation/callback” asynchronous API.

Migrating from existing DevForce 2010 projects to DevForce 2012 are made easy by applying the following rule.

  • Add a using/Imports statement to your code file for IdeaBlade.EntityModel.Compat.
  • Add a using/Imports statement to your code file for the new Intersoft data provider of DevForce 2012, Intersoft.Client.Data.Provider.DevForce2012.
  • Add a using/Imports statement of Intersoft.Client.Data.Provider.DevForce2012.Compatibility.

With this approach, you don’t need to change a single line of code in your project, while enjoying the benefits and new features available in DevForce 2012 and Entity Framework 5. I recommend you to go with this approach if your existing application is considerably large and you prefer to do the transition in progressive fashion.

Click here to browse the sample project which was created using Intersoft ClientUI MVVM Data Application using DevForce 2010. The project was later modified by migrating the DevForce 2010 to DevForce 2012.

Using Native DevForce 2012 API

Asynchronous patterns

The Task-based Asynchronous Pattern (TAP) is based on the Task and Task<TResult> types in the System.Threading.Tasks namespace, which are used to represent arbitrary asynchronous operations. TAP is the recommended asynchronous design pattern for new development.

DevForce 2012 has implemented the use of TAP. By implementing this, we are able to use the await keyword, which makes asynchronous method calls feel synchronous when we’re writing code.

Instead of writing callback, lambda expressions, or coroutines, we now use await. Here is an example about the implementation of await.

Using lambda expression in DevForce 2010

public virtual void GetData(Action<IEnumerable> onSuccess, Action<Exception> onFail)
{
    if (Intersoft.Client.Framework.ISControl.IsInDesignModeStatic)
        return;

    var query = this.EntityQuery;

    query.ExecuteAsync(
        op =>
        {
            if (op.CompletedSuccessfully)
            {
                if (onSuccess != null)
                    onSuccess(op.Results);
            }
            else
            {
                if (onFail != null)
                {
                    op.MarkErrorAsHandled();
                    onFail(op.Error);
                }
            }
        });
}

Using await in DevForce 2012

public virtual async Task<IEnumerable> GetData()
{
    if (Intersoft.Client.Framework.ISControl.IsInDesignModeStatic)
        return null;

    var query = this.EntityQuery;

    IEnumerable results = await query.ExecuteAsync();
    return results;
}

GetData() method which previously doesn’t return anything (void) now returns Task. The lambda expression is replaced with following line of code.

IEnumerable results = await query.ExecuteAsync();
return results;

onSuccess and onFail parameters – the callback to invoke when the operation succeeded or failed – are no longer available. You handle them in the same way and manner as you wrote synchronous code, that is by wrapping them in a try-catch syntax.

We now provide a new version of DevForce data provider that supports async and await operations which conforms to DevForce 2012 native API. For example, you can now use the following code to query a list of customers from the repository.

private async void LoadCustomers()
{
    try
    {
        var customers = await this.CustomersSource.GetData();
        this.Customers = customers;
        this.IsCustomersLoaded = true;
    }
    catch (Exception ex)
    {
        this.Presenter.ShowErrorMessage(
                "An exception has occurred during data loading\n." +
                "Message: " + ex.Message +
                "Stack Trace: " + ex.StackTrace);
    }
}

Click here to browse the sample project in github which was created using Intersoft ClientUI MVVM Data Application using DevForce 2012. Note that the new DevForce support assemblies can be found in the sample project.

Definitely there are so much exciting stuff in the continuing collaboration of ClientUI and DevForce 2012. Let me know if you have any questions or feedback about the DevForce 2012 support, or how we can improve it better for you.

Warm Regards,
Yudi

New Silverlight Tutorials: Building business applications with ClientUI and DevForce

By the latest release, we’ve shipped a whopping 300+ rich controls for Silverlight and WPF development – and that’s not to mention the included advanced frameworks like MVVM, commands, event aggregators and more! Fortunately, we included a comprehensive documentation and dozens of new tutorial videos to help you getting on the board fast. If those are still not enough, make sure you check out the new ClientUI tutorials focusing on line-of-business application development – thanks to our friend, Bill Gower, for such the great contributions.

In the first series of his post, Bill overviews the application that he’s going to build using Intersoft ClientUI for the presentation layer and IdeaBlade DevForce for the data service layer. And Bill picks up the line just right, you’ll be surely excited to explore through the steps of creating a fully-functional sales/retail application – from the Customers, Inventory, Sales Invoices to Purchases and more.

Best of all, you can learn how to build the applications right using the best design and architectural patterns. You can check out the post here.

Furthermore, Bill has written a series of great articles to share his experiences while developing in Silverlight and WPF. Some of the noteworthy links are as follows.

Best,
Jimmy

ClientUI & DevForce Part 3: Enhance Editing Experiences with MVVM Advanced Input Controls

In the previous series of the joint ClientUI and DevForce sample, you have learnt how to build a simple Contacts application that runs in both Silverlight and WPF using the architectural best practice such as MVVM design pattern. The first series discussed about the fundamental data access architecture, while the second series talked about sandboxed editing. You can read the first blog post here, and the second post here.

In this blog post, I’m pleased to introduce the third series of our joint Contacts sample which is strongly focused on improving the editing experiences. The upgraded Contacts sample guides you how to add rich editing capabilities to your Silverlight and WPF applications using the new ClientUI’s advanced input controls. More interestingly, it also addresses a number of challenging technical implementation such as adding a nice photo upload capability using MVVM design pattern. Let’s get it started!

Eliminate Input Errors with UXMaskedInput

In the original Contacts application, the Contact Editor uses basic textbox controls to capture the data input such as the Id, name and address of the contact. However, using basic textboxes to accept patterned data input – such as found in zip code or a phone number – is often prone of entry errors which lead to data inconsistency and corruption in the application’s functionality.

Fortunately, the latest ClientUI release now comes with dozens of advanced input controls with various built-in features, each designed to address different needs. For example, UXMaskedInput is designed to restrict data input with patterned format such as zip code or SSN, UXCurrencyEditor for entering number and currency input, and UXDateTimePicker for entering date and time.

Back to our Contacts application, the Contact Editor definitely needs some improvements to provide users with richer editing capabilities which ultimately minimize data entry errors. Some of the possible improvements are as following:

  • Add automatic uppercase conversion to the ID input
  • Limit the zip code to accept only five optional digits
  • Add phone number masking to Phone, Cell and Fax input

Most of the above requirements can be achieved with UXMaskedInput, thanks to its powerful and comprehensive masking features. Its MVVM-ready architecture also enable us to implement rich masked editing complete with validation in just a few minutes – all without writing code.

The following example shows how to use UXMaskedInput to accept only input with phone number pattern.

<Intersoft:UXMaskedInput Width="120" EditMask="0-000-000-0000"
     ErrorMessage="Please enter a valid phone number, i.e., 1-510-555-1212"
     Value="{Binding Contact.Phone, ValidatesOnDataErrors=true, Mode=TwoWay}" 
     Intersoft:DataBinding.ClearErrorOnTextInput="True" 
     IsSaveLiteral="True" />

And the results below.

Rich Contact Editor with Masked Input

To learn more about the features available in UXMaskedInput, please see UXMaskedInput Documentation.

Implement MVVM Photo Upload with UXFileUpload

Most of modern web applications today leverage the power of multimedia such as images and videos more than ever before to create more engaging user experiences. Even Twitter, the 140 character-limited microblogging social tool, has now evolved allowing people to post and share their photos – announced two days ago.

While file upload might sound easy and is something already common in the web, it’s not so common in Silverlight. The complexity grows up particularly when you’re tasked to implement it using MVVM pattern, not to mention you still have bunch of other things to take care such as the user experiences and the reliability of the file upload process itself. This could take weeks, or  months of coding time just to add a file upload capability that really works. The good news is that we have a solution for you. Read on.

In this third joint Contacts sample, we’d love to share how easy it is to add an impressive photo upload feature to the Contact Editor. With UXFileUpload, we’ve got everything we needed – from multiple files upload, progress indicator, upload cancellation, to a fully customizable look and feel. Better yet, it fully supports MVVM pattern which means that you can start the uploading process, identify the progress and capture the uploaded results – all within the ViewModel.

With photo upload implementation that satisfies the MVVM pattern, it enables us to easily reflect the changes to the DevForce’s entity through a two-way data binding. The following code snippet shows the photo upload implementation with UXFileUpload using MVVM pattern.

<Intersoft:UXFileUpload ServiceUrl="http://localhost:1215/UXFileUploadHandler.ashx" 
     TargetFolder="~/Assets/Photos" TargetWebUrl="./" MaxFileSize="512000" 
     OverwriteExistingFiles="True" IsAutomaticUpload="True" CanSelectMultiple="False" 
     ShowStatisticsOnCompleted="False" FileTypeFilter="Image Files (*.jpg)|*.jpg" 
     EnforceFileTypeValidation="True" 
     UploadedFileUrl="{Binding Contact.PhotoUrl, Mode=TwoWay}"/>

Notice that the UploadedFileUrl is bound two-way to the contact’s PhotoUrl property. When the upload completes, the PhotoUrl reflects the changes immediately. As the results, you don’t even have to add any code in the ViewModel, because the existing SaveChanges function will automatically take account the changes in the PhotoUrl property.

The following screenshot shows the polished Contact Editor with photo upload capability.

Contact Editor with photo upload capability

When saved, the newly uploaded photo in the Contact List will be automatically updated as well without any additional effort, this is made possible with a two-way binding between the image source and the image property in the DevForce’s entity, see below.

image

All in all, the advanced input controls with solid MVVM architecture combined are true productivity booster! It helps make development faster, easier and more maintainable.

To learn more how to implement the advanced input controls and the photo upload in depth details, please read the PDF walkthrough.

Download the Solution

Click here to download the latest Contacts project source code along with the walkthrough document. Please note that the download package contains updated files and a number of bug fixes, thus is newer than the one installed in ClientUI 5. The latest project source will be shipped in the upcoming ClientUI 5 service pack.

As usual, the release includes both Silverlight and WPF projects which are built with identical codebase. Feel free to play around with the code and use it in your apps! Note that you will need the latest version of ClientUI and DevForce to run this sample. You can download the latest ClientUI release here, and DevForce here.

Any feedback and thoughts are warmly welcomed.

Best,
Jimmy

ClientUI 5: Unlock The Amazing Possibilities

The latest ClientUI brings so many new innovations and technology advancement available no-where else. The release debuts with a host of various data visualization controls like grid view, tree view, document viewers, and more. Even better, the deep integration with IdeaBlade’s DevForce provides the fastest way to build MVVM-enabled business applications. All of this innovations are geared towards a better development experience to build any business applications of any size and any complexity.

In this blog post, I will review the new shinny samples demonstrating the new products and the features, as well as sharing my top favorite new samples.

Below are the top 10 my favorite picks of new ClientUI 5 samples

  1. Assets Management

    The assets managements sample is a good demonstration of the latest UXGridView with many features enabled such as Column Freezing, data grouping, column sorting, and the powerful data editing capability.

    Data editing is a crucial feature in any grid view control. You can add a new row, edit, or delete a row. UXGridView extends this behavior further with many innovative features such as custom editing control, data validation, read-only binding, value list, and more.

    Read-only binding is a unique feature that lets you lock certain columns or a row based on a column’s edited value. For example when an asset status is sold, the Service Date column is lock for editing. Value list is a unique feature which translates a foreign key column into a more meaningful data. For example Department column refers to DepartmentId from  Department table. Instead of showing the number, the department name is showed instead. This feature also works with data editing.

    In addition, various user experience features are also demonstrated like column freezing, paging, and more. UXGridView’s column freezing is closely similar to the on in Excel. You can lock certain columns from the left side and prevent it from being horizontally scrolled when the available viewport can’t accommodate all columns. Explore the sample.Assets management with rich UI/X features

  2. eMagazine Viewer
    Like to read books, magazine in your portable inch+ thick digital reader? With the latest XPSDocumentViewer, you can add the same rich reading experience to your Silverlight or WPF applications. Try to click on the Browse Library to select and load different magazine.
     
    The high-performance rendering engine displays the document brilliantly. Images are vibrant and text is crisp. Especially when using the various zooming feature, you will notice that the document is displayed at its best quality even during the zooming process. Explore the sample.e-Magazine Reader
     
  3. Getting Started Viewer
    If the above scenario shows XPSDocumentViewer loading rich media content, this specific sample demonstrate its powerful multiple page document loading capability without any slow down.
     
    The innovative feature behind all this is the load-on-demand engine. It prioritizes visible pages to be loaded and rendered while the rest are loaded conditionally. Another great feature is the background loading. It allows pages to be preloaded in the background during application’s idle time. In this sample, you will notice that both document and applications is loaded at the same time.
     
    You should try the built-in page navigation. There are two types, thumbnail and outline. Thumbnail mode displays a small preview image of every page, while outline provide the entire document’s TOC hierarchically (depending on the document’s structure). Explore the sample.Getting Started Document Viewer
     
  4. Baseball Player
    Rejoice baseball fan, now you can see your all-time favorite baseball player attractively in UXGridView. Try to select a row and notice that the detailed information is displayed under. This row detail feature is enhanced with selector functionality to easily incorporate certain business rules. You can also change the row detail behavior, whether it is shown all the time or on selected item only. Explore the sample.UXGridView Baseball Sample
  5. Employee Leave Records
    One of the most unique sample in UXGridView is the Employee Leave Records – emphasizing on the grid’s various data interaction features. Click on the filter button on a column to reveal the filter box. You can use the check box to filter the row or type, or use type in the textbox to narrow down the available filter options.
     
    Sorting feature is available out-of-the-box controlled by a property. In addition to single column sorting, UXGridView is enhanced to support multiple sorting. Click on the first column to sort. Hold shift and click on the second column, and so on. To change the sort direction, click on the same column while holding shift to maintain the multiple sorting behavior or UXGridView will discard the previous sorting order.
     
    The loosely coupled architecture adoption enables users to externally execute certain grid view features. The most notable implementation is the Export and Refresh button. The default location is on the grid footer, but in this sample a second button is added above the grid.
     
    Try the sample here to discover more features.Employee Leave Records
     
  6. My Outlook
    UXNavigationPane is a flexible, space-saving navigation control adopted after Office 2010. User can easily collapse the entire control to when more screen estate is required and restore it when needed. It also feature real-time resizing feature with “snapping” feature. You can also try to explore various pane items and see its content. Explore the sample.My Outlook
     
  7. Corporate File Explorer
    In most business applications, tree view is often used as the primary navigation system for its hierarchical display – enabling users to directly jump into a sub page. And in most cases, it gets sluggish when the structure gets too complex with many nodes.
     
    This sample demonstrates UXTreeView with its blazing-fast loading regardless of the structure. Using a custom Load-on-Demand technique, UXTreeView allows developer to custom-code the child node retrieval process. When enabled, the expand toggle indicator will be shown. Explore the sample.File Explorer
  8. Online Book Store
    Despite the nature as a navigation control, UXTreeView can be used to display a list of items in hierarchical order, just like the following online book store sample. User can use the checkbox to select or deselect the desired category.
     
    UXTreeView’s checkbox is designed to accommodate non-linear structure selection with three-state mode, checked, unchecked, and indeterminate. Indeterminate is a state indicating a parent, whose child nodes are partially checked. If all child nodes are selected, the parent’s checked status is checked. You can also check on the parent to select all of its child nodes. Explore the sample.TreeView Bookstore
     
  9. My Tasks and Events
    This “My Tasks and Events’ sample uses UXTreeView as its category navigator. Click on a node to select different category. You can also move an event to different category by dragging it and drop it on the desired node. Explore the sample.My Events
     
  10. Order List
    This sample demonstrates UXGridView displaying data in hierarchical order. Depending on your data structure, you can have unlimited nested table with on-demand data retrieval. You can click on the plus sign to expand the child table.This sample also demonstrate the visual customizability. You can easily experiment and apply any custom color and theme to UXGridView, for example the black color. Explore the sample.UXGridView OrderList

Above are only some small collection of business-inspiring samples featured on ClientUI live demo page. Please visit live.clientui.com to experience all. Want to build an amazing application such as shown above? Grab the 30-day trial now. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

Happy developing.

Best regards,
Jemmy Haryono

WebUI Studio 2011 Goes Gold!

The past few weeks were probably the busiest days in this first quarter as we are preparing for the huge 2011 volume release. Even sparing a few minutes to write blogs seems to be uneasy to the team due to super tight schedules. Nevertheless, our diligent works are well paid off as we managed to (still) release on schedule. 

The wait is over! The highly-anticipated WebUI Studio 2011 finally goes gold today, which includes the new data controls lineup that have been made available in several beta releases. It delivers a total of 30 new controls for ASP.NET, Silverlight and WPF development – another fantastic release! To see what the new WebUI Studio has in store for you, please head to What’s New in WebUI Studio 2011.

Next, please refer to the following links for more details on the new release.

In addition, major sites such as Intersoft Support Site, Online Documentation   and ASP.NET live demos have been updated as well to reflect the new releases. Be sure to check out the updated ClientUI demos too where we have added around 80   business-inspiring samples with amazing user experiences. To try the demos now, jump to ClientUI live demos.

In this blog post, I will share a quick recap on the key highlight of the new release. In addition to many new exciting stuff as you can read in the 2011 Tour page, the new 2011 release is highly focused in improving the overall user experiences in an end-to-end approach – from the installation and getting started to licensing and deployment.

To that end, WebUI Studio 2011 now ships with a new installation experience that integrates with the operating system’s look and feel. So if you’re using Windows 7 with Aero-glass enabled, you will see the new WebUI Studio setup to use the same glass theme. The overall user interface has also been redesigned for simplicity and elegancy. To stimulate your appetite, let’s see some of the new installation shots below.

WebUI Studio 2011 New Installation Experiences

WebUI Studio 2011 New Installation Experiences

However, the new installation experience isn’t just about the glassy user interface. More importantly, the new WebUI Studio setup has been further simplified to require only a few clicks to complete a common installation – reducing from 8 to 4 in the total number of clicks. In this “automatic” setup mode, the installer detects your computer configuration and smartly decides the best settings to apply to your installation session. For instances, if you have Visual Studio 2011 installed, then all the samples and help files for Visual Studio 2010 will be automatically chosen.

Of course, you can still customize the installation the way you accustomed to, by checking the customize checkbox in the initial screen before hitting the Next button, see the screenshot below for a close-up.

WebUI Studio 2011 Setup Customization

All in all, WebUI Studio 2011 is our best release yet. It ships with a dramatically improved user experience, 12 new time-saving business project templates, native DevForce integration, and delivers over 30 new and essential business controls to the already comprehensive portfolio – positioning it as the developer’s top choice for all .NET application development needs.

Definitely there are so much exciting stuff to share in this new release, but I decided to not polluting this blog post with product-specific and new samples coverage. I’ll surely recap those topics in my next post. For now, download the new WebUI Studio if you haven’t done so.

Last but not least, we hope you enjoy the new release as much as we enjoy building it!

All the best,
Jimmy