Introducing Studio for ASP.NET Wijmo

Our release of two Wijmo-powered ASP.NET studios represents a new day in ASP.NET development, and I’m particularly excited about our Studio for ASP.NET Wijmo. Server controls have been a staple of ASP.NET WebForms development since its inception, and we’ve rewritten our ASP.NET WebForms components to use our Wijmo jQuery UI widgets. Studio for ASP.NET Wijmo contains over 45 controls, including interactive SVG charts(bar, line and pie), a supercharged GridView, and an SSRS-compatible report viewer. To truly experience these components, visit the live demo at http://demo.componentone.com/ASPNET/ControlExplorer/. Try it on any browser, even an iPad. You can build cross-browser, cross-platform applications using the ASP.NET WebForms skills you have.

The great thing about these components is they work exactly like server controls should—drag onto the form, configure via the smart tag and property window. What gets rendered on the client side is standards compliant HTML 5/CSS/jQuery/SVG. From the toolbox to the form designer to code-behind, the development experience is completely familiar, but the end result is the latest standards compliant HTML 5/CSS 3/jQuery code. Let’s take a brief tour.

After installation, a set of controls are installed in the toolbox; these controls are the usual ASP.NET server controls. These controls A set of extenders are installed in the toolbox under a separate tab. The extenders operate similarly to the the extenders in the ASP.NET Ajax Toolkit.

After installation, you’ll have the option to download and install the documentation. Installed help is found locally under Start >> All Programs >> ComponentOne >> Studio for ASP.NET Wijmo >> Integrated Help. Online help is found at http://our.componentone.com/wiki/index.php?title=Studio_for_ASP.NET_Wijmo.

developing with the ASP.NET Wijmo components is extremely easy for the beginner ASP.NET developer, and familiar to the experienced developer. We’ll use a GridView in this overview.

Start by opening the C1 Wijmo Controls 3.5 tab, and dragging a GridView onto the form. the default view will be visible on the form.

To begin the configuration, open the Smart Tag. We’ll just configure a Data Source here.

Data sources are configured as in previous ASP.NET versions, and allow for binding to Access, SQL Server, Entity Framework, LINQ query results, CLR objects, and XML files. With these components, jQuery enhanced HTML elements can be bound to a number of data sources on the server, no web services required.

Once the data source is configured, the grid is bound and the designer updates.

The Properties Window exposes more properties and events to set.

Now build and run your sample app, and behold your new GridView. There are a tremendous number of features in the GridView we didn’t cover here (sorting, filtering, editing, etc), but you can see how easy and familiar the development experience is using these new components.

Some of the advantages of our Wijmo powered components are:

1. Create highly responsive web pages with clean and lightweight client side code.
2. Server controls render standards compliant HTML 5, CSS 3, jQuery, jQuery UI and SVG.
3. Linked CSS and JS files are minified and gzipped for small page sizes and fast download.
4. Configurable use of CDN to reliably deliver linked files, and save on bandwidth.
5. No new skills required for experienced WebForms devs—drag onto your page and configure with smart tags, wizards and the property window .
6. Themeroller compatible. In fact, you can integrate Themeroller across your site by adding the appropriate classes to the UI elements.
7. Extensible on the client side using the popular jQuery library .
8. Well documented and supported.
9. Designed for ASP.NET 3.5 or better (CLR 2 or 4).