Craig Shoemaker

3 Essential Tips for ASP.NET Developers Moving to WinJS / Metro Application Development

2012-05-14T21:41:00Z

One of the most exciting announcements surrounding Windows 8 development is the fact that you can create Metro-style applications in HTML 5 and JavaScript. This means that you as a web developer can leverage your existing skills and tools and to develop Windows applications.

However, moving from traditional web development to WinJS (a.k.a. Metro-style or Windows 8 applications) development can be a bit of an adjustment if you are an ASP.NET developer by trade. Therefore here are a few tips to help you keep your head on straight as you make your way into WinJS development.

tl;dr

You can take your existing skills as a web developer and apply them to WinJS, but not everything transfers and you’ll have to fill in some gaps.
Grasping the inherent difference between stateless and stateful applications and learning the new UI framework is at the core of a successful switch from ASP.NET to WinRT applications.

1: There is No Server

As web developers we are used to stateless client-server architecture of our applications. We are used to the concept of a distinction between server-side code and markup. We’re used to the constraints of session, view state and have adapted to the benefits of Ajax to help increase the effectiveness and responsiveness of our applications. It might seem like I am stating the obvious because WinRT development after all is Windows development by definition, but when you use web technologies (that you've grown accustomed to using for the last decade or so) without the existence of a server - it can be a bit of a paradigm shift without a clutch. Further, web servers are expected to be more or less reliable and available. A Windows 8 application can be suspended, resumed or even terminated with very little ceremony.

Practical Implications

Classic stateless challenges disappear
Classic stateful challenges appear (For instance, once you load a CSS file into a page it doesn’t go away just because you navigate to a new page. This could cause problems if you’re not careful.)

2: No Generated Markup

While working with a binding template that wasn’t rendering correctly, I opened the Visual Studio DOM Explorer looking for a value I had applied to an element's class property. The value didn’t get applied because I tried to apply it directly to the class property (which is exactly what you would do if you were working with a server control). Looking back on this face-palm moment I realized that it should have been obvious to me that a JavaScript binding was at play instead of my normal thinking of “generated HTML by the server”. Instead of setting the class property I needed to set the className property as className is the valid JavaScript notation to set the class property of an element.

Practical Implications

WinJS applications use JavaScript exclusively to manipulate the view – all the same rules apply
Technically markup is generated in the view, but it’s not generated into the markup stream. New elements are generated in-memory by JavaScript when you are dynamically manipulating the DOM.

3. There is a Learning Curve

Remember how we said you could write Windows 8 applications with HTML and JavaScript? Well that’s all true, but that doesn't mean that the same .NET framework APIs you’re used to are available. For instance: Want to send an email? Go for it, but you won’t be using System.Net.Mail to make it happen. Have an existing business logic layer that you want to expose to a Metro app? Well, you’ll need to create a WinMD wrapper or expose it via an xhr request. If you are directly referencing managed code, you must make sure you only expose Windows Runtime Types as return types and parameters in your methods.

Further, the WinRT framework comes with a host of new controls, animations and design considerations that were never at play in the past. For instance you may be a wizard at jQuery UI, but those same controls may not present as well in a Metro application as they do in a web application.

Practical Implications

Working with managed code in WinRT is similar to, but not the same as writing the run-of-the-mill .NET application
There are new design considerations and UI patterns to learn and apply appropriately

4. It’s a ‘State’ of Mind (Bonus!)

As I’ve alluded to above, a big part of making the switch is fully grasping stateful application development. Let me give you an example. ASP.NET developers are used to a page event lifecycle where a request comes into the page which is usually first handled by Page_Load then control event handlers fire then you have a final chance to interact with the page at Pre_Render and then you’re done. Many of these events are indicative of the statelessness of a web page. In a Metro application you’ll handle the activation event (roughly equivalent to the jQuery ready event) , the suspended event and the restored event (which coincidentally are indicative of the statefulness of a native application).

Practical Implications

The stateful nature of a native application means that you will interact with controls and data in a different way than you would in an ASP.NET application. Issues like guarding against global variable pollution in JavaScript and allowing your application to gracefully handle being suspended, resumed or terminated become an important part of your development concerns.

What Do You Think?

What other aspects of the transition would you include in this list?

What's in the NetAdvantage for jQuery 2011.2 December Service Release?

2012-01-13T22:31:00Z

Update API Reference

Updated Home Page

The home page of the NetAdvantage for jQuery API reference is updated to include screenshots of featured controls accompanied by direct links to help topics, samples and the individual API reference page.

Updated Control Overview Pages

The Overview tab of each control now features a rich set of content to get you oriented and up and running with the control quickly. The following table lists the improvements available for each control.

Screenshots		You'll quickly know if you're in the right place with screenshots for each control.
Explanation		After the screenshot each Overview tab includes a short description of the control with links to relevant resources.
Code Snippet		Want to quickly get started coding up a basic interaction of the control? You can use the provided code snippet which includes all the necessary references and helps you get a running control on your page in a matter of minutes.
Related Links		Each control is also accompanied by series of links to related samples and conceptual help topics.

2,000 New & Updated API Code Snippets

You can quickly get started with a control by using the copy and paste-ready code snippets. The Options, Events and Methods tabs all feature stubbed out code snippets that demonstrate how to work with each control in the context the option, event or method.

6 New or Updated Samples

igDatePicker: Load and Save Form Values

This sample uses two igDatePicker controls used to demonstrate how to reserve a hotel room. The initial value of the start date is set on the server with the igDatePicker control's ASP.NET MVC helper and entering incorrect values will cause validation to trigger.

View the sample

igEditor: Load and Save Form Values

Multiple igEditor controls are shown together in this sample. The values of the editors are set on the server and the code example demonstrates how the changes are saved back to the server once the “Submit” button is pressed.

View the sample

igGrid: Column Text Alignment

This sample shows how to align text in a column in the igGrid control. This approach can be used to provide other styles to igGrid columns as well.

View Sample

igCombo: Load and Save Form Values

This sample demonstrates how to use the igCombo control in an ASP.NET MVC scenario. The sample contains an input form with three fields: Product name, Product number and Product category which are configured on the server to show product data. Clicking the "Save product" button submits the changes to the server. The code example demonstrates how to persist the data and return a confirmation message to the user.

View Sample

igRating: Load and Save Rating Form Values

This sample shows how to use the igRating control and how the control is configured on the server. The code example demonstrates setting the initial value of the control on the server as well as processing and persisting user input. Once the selection is made, the selected rating is stored in a cookie so that subsequent ratings can be used to calculate the average rating.

View Sample

igGrid: Grid Editor

* Updated to show enhanced MVC helper API

When using the igCombo control as an editor in the igGrid control, a formatter function is necessary to show the display text of the igCombo control. For performance reasons, the grid uses only one instance of the combo. During editing, the igCombo control commits its selected value to the grid and a JavaScript function is used to persist the selected text when the combo is no longer editing a cell.

View Sample

7 New or Updated Help Topics

New
- Using Events in NetAdvantage for jQuery: This topic demonstrates how to handle events raised by NetAdvantage for jQuery controls. Also included is an explanation of the differences between binding events on initialization and after initialization.
- Configuring igEditors at Runtime: The topic explains how to handle events and set options for igEditor based controls.
- Getting started with igGrid, oData and WCF Data Services: This topic demonstrates how to build an application that allows the igGrid to read an oData source exposed by WCF data services.
- Getting started with igDataSource and WCF: This topic demonstrates how to configure the igDataSource component to interact with WCF data services.
- Manually Updating Preview Versions of NetAdvantage for jQuery: This topic demonstrates how to upgrade an existing project using NetAdvantage for jQuery to the latest release.
Updated
- igVideoPlayer Known Issues: This topic is updated with latest known issues.
- igGrid Known Issues: This topic is updated with latest known issues.

Introducing the WebDataGrid / WebHierarchicalDataGrid Cheat Sheet

2011-07-11T21:52:00Z

Allow me to confess something upfront. Saying the WebDataGrid / WebHierarchicalDataGrid Cheat Sheet is anything like a “sheet” is a bit of a stretch. I will say, though, in it’s 51* pages of goodness you have easy access to behaviors, events and common grid customizations. The step-by-step nature of the material demonstrates not only how to implement a specific feature of the WebDataGrid, but also describes the similarities and differences in the WebHieararchicalDataGrid.

Navigating

When you first open the cheat sheet you are presented with a contents list that allows you to jump directly to the areas you are most interested:

Code Snippets

Code snippets, featuring ASPX, JavaScript and C# when applicable, are presented with any required prerequisite configuration for the grids:

Events

Grid events are covered showing which events for are available for each grid:

Beyond standard grid events, each behavior features it’s own set of events on the client and server. The cheat sheet lists all events by behavior complete with links to the event args classes so are easily able to find out what information is available during each event:

What's Available:

At the moment the cheat sheet covers the following areas:

Activation
Ajax: Events
Ajax: Load on Demand (Automatic)
Ajax: Load on Demand (Manual)
Ajax: Loading Indicator
Ajax: Virtual Scrolling
Automatic Load on Demand
Columns: Hidden Columns
Columns: Moving
Columns: Pinned
Columns: Resizing
Columns: Unbound Columns
Columns: Checkbox Columns
Columns: Summary Rows
CRUD: Auto
CRUD: Manual
DataBinding: HeirachicalDataSource
DataBinding: DataSet
DataBinding: DataTable
DataBinding: IEnumerable
DataBinding: AccessDataSource
DataBinding: SqlDataSource
DataBinding: ObjectDataSource
DataBinding: LinqDataSource
Editing: Adding Rows
Editing: Deleting Rows
Editing: Embeddable Editors / Editor Providers
Export to Excel
Export to PDF
Filtering
Row Numbering
Row Summaries
Selection: Cells
Selection: Columns
Selection: Rows
Templating: Column Template
Templating: Empty Rows
Grid Events
Events by Behavior

Download

My hope is that the cheat sheet will save you time while working with the NetAdvantage for ASP.NET grid controls and will prove to be a trusted reference during development.

Note: The cheat sheet is a great place to start if you are looking to migrate from the UltraWebGrid to the new ASP.NET Ajax grids.

* While the cheat sheet stands at 51 pages today, this resource is a work-in-progress and will continue to benefit from periodic updates. The current version is 11.1.2.

Enabling Web Grid Ajax Loading Indicator for WebDataGrid for WebHierarchicalDataGrid

2011-04-29T22:38:00Z

When dealing with asynchronous data processing you often want to give users an indication that action is being performed by displaying some sort of indicator. The WebDataGrid and WebHierarchicalDataGrid controls can easily be configured to display an Ajax indicator to the user.

Configure the AjaxIndicator properties group
1. Open the grid’s properties in the Property window
2. Expand the AjaxIndicator section
3. Set ImageUrl equal to the path of the loading image
4. Set Location equal to the location on the page of the indicator
5. Set RelativeToControl to determine if the location is relative to the grid or the page

Note: The grid must have the EnableAjax property set to True for the loading indicator to work properly.

Join Us on MSDN for the ‘Building Line-of-Business Applications with Silverlight 4’ Webcast

2010-09-07T12:32:00Z

Come learn about the fundamentals of Silverlight 4 in this MSDN webcast titled Building Line-of-Business Applications with Silverlight 4, hosted by Jason Beres (@jasonberes). Many tutorials take you through a cursory view of the Silverlight platform in context of a true-to-life application, but this session will dive deep into the latest capabilities of Silverlight 4 and along the way show you how the Infragistics Silverlight line of business tools may be leveraged to produce a polished application. Here is the description from MSDN:

In this code-focused webcast, you learn first-hand how the Infragistics NetAdvantage Silverlight toolset and Microsoft Silverlight 4 can take an application beyond the typical rich Internet application (RIA) experience of animations, impressive visuals, and high-end multimedia experiences. We highlight enterprise-class application needs, including Silverlight 4 features like out-of-browser installation, local file system access, and peripheral device access combined with the powerful line-of-business capabilities like high-performance data grids and rich charting in the Infragistics NetAdvantage Silverlight toolset.

See you there!

Register here

Resources for High Performance Data Visualizations with Silverlight & WPF Webinar

2010-08-19T15:40:00Z

Thanks to everyone who joined us for the High Performance Data Visualizations with Silverlight & WPF webinar. Below you’ll find links to the resources mentioned during the session.

Resources

Update: Watch the recording here

We hope to see you on Aug 24th for Apps Made Beautiful – Using NetAdvantage AppStylist in ASP.NET & Windows Forms!

Webinar: Building Windows Forms Line of Business Applications with NetAdvantage

2010-07-22T21:52:00Z

Learning about controls and features is great, but seeing our products in the context of a real application truly helps connect the dots. Please join us for the next installment of our monthly webinar series for Building Windows Forms Line of Business Applications with NetAdvantage.

During this one hour webcast, Jason Beres (@jasonberes) will help you become acquainted with:

See how to build a Microsoft Outlook style application with very little code required.

July 27th @ 10:00 AM ET

Register Now

Note: Make sure to check back on this page for updates after the event for links to downloads and a recording of the presentation.

Recording and Downloads for Silverlight 4 Primer Webinar

2010-07-22T20:35:00Z

A big thanks to all of you who were able to join us for the Silverlight 4 Primer webinar this morning. Below you’ll find links to the recording and code downloads.

If you weren’t able to join us during the live broadcast, we’re happy to have you join in the fun as well!

Silverlight 4 Primer – Creating a Business App with NetAdvantage Silverlight Controls

Recording
- Recording ID: Q63HGW-1
- Attendee Key: C6!<:wk
Code Download
Using the Infragistics XamGrid and XamDataChart with Hierarchical Data and WCF RIA Services

Webinar: Silverlight 4 Primer – Creating a Business App with NetAdvantage Silverlight Controls

2010-07-19T16:31:00Z

The fast-paced release scheduled for Silverlight has brought advancements in the framework at a breakneck speed. One of the best ways of getting proficient with all these advancements is to simply have someone show you the ropes. In the latest installment of the Infragistics Webinar Series, Jason Beres (@jasonberes) explains the basics of Silverlight 4 and gives the context of how Infragistics controls fit into the the mix.

I this webinar you’ll learn Silverlight fundamentals of:

Creating an out of browser (OOB) application
Accessing the local file system and peripherals
Integration with RIA services
Implementing a master/detail scenario

Additionally you learn how Infragistics high performance grid and charting controls add just the right touch to your application.

Join us July 22 @ 10am EDT

Register here

Inland Empire .NET User Group Most Valuable Member Event

2010-07-15T17:13:00Z

Infragistics is honored to support a number of user groups throughout the world. One of the stand outs, though is the Inland Empire .NET User Group. Now I say this group is special not just because it’s my local user group, but because of the true sense of community and quality of participation that happens at this group. I recently wrote about the group’s Most Valuable Member event and how the Inland Empire .NET User Group was able to give over $65,000 in prizes to it’s members! Please do check it out.

HTML5 in Internet Explorer: What’s Taking So Long?

2010-07-13T17:52:00Z

I just published a new episode of Pixel8 with Pete LePage where we discuss the upcoming HTML5 and CSS3 support in Internet Explorer. I started off with the first question that I could think of when Pete agreed to meet with me for an interview… so, what’s taking so long? ;)

WebRating HTML5 Support, CSS Based Layouts, Custom Images and More...

2010-07-12T22:22:00Z

I just published a new article in the ASP.NET section of the community site where I discuss the WebRating's support for HTML5 and some of the other great features of the control. Please check it out!

Infragistics jQuery Rating Control in WebMatrix with Razor

2010-07-07T22:32:00Z

The guys in Engineering are hard at work and are experimenting with native jQuery plug-in controls for the web. With the recent release of WebMatrix and the Razor view engine I thought this might be a good time to show off some of what’s to come.

Note: This code is pre-beta and is not yet available for download. I will post again when we are ready to announce release dates.

The following screenshot shows the client rating control rendered with associated movies and their rating values:

The sample is very easy to construct and gave me good reason to show off how you might use it in WebMatrix/Razor:

To dig in a bit, let’s zoom in just on the code. The image below depicts how I am pulling movie information from the Movies table and setting the rows aside in a variable. Then, after including the required CSS and JavaScript files, the rating control is configured during the jQuery ready handler:

The control is fed a few arguments to get it set up. The voteCount parameter represents the total number of possible votes for the rating, the value is the actual rating value and valueAsPercent tells the control whether or not to treat the value as a percent of the total or as a numeric value in the range.

In the body of the document, I prepared a table to have its contents constructed from a loop that injects the appropriate values from each row in the query result.

There you have it - simple and effective.

More to Come!

Soon you’ll have access to an array of controls that will work great in ASP.NET WebForms, ASP.NET MVC, WebMatrix and on down the line to PHP and even static HTML files.

Fun times!

Introducing Infragistics Startup Solutions

2010-06-30T17:19:00Z

How do you learn new technologies? I like to get my hands on some working code and re-write it. This really helps me see how it should be done, but allows me to make my mistakes with the API to see where I’m not understanding how things work.

Often developers have many avenues for learning available to them. Learning options often include product documentation, blogs, articles, videos, webinars, training and the list goes on. The common denominator of each of these methods is the the code. Since developers seem to learn best by reading, editing and often re-writing code, we want to make it as easy as possible for you to interact with our controls in the context of a working project – something we call a Startup Solution.

What Are Startup Solutions?

Startup Solutions are projects assembled specifically with the intent of getting you quickly acquainted with new controls and features found in each release of the toolset. When you open a Startup Solution you find the controls placed in the context of a working application along side some helpful hints as to how to interact with the control. The following image demonstrates a page from the ASP.NET Startup Solution that teaches you how to enable editing in the WebHierarchicalDataGrid:

Along with the instructions found in the file, you’ll find code commented out that will show you exactly how the API should be used:

Between the to-do tasks and the code comments, you have a solid foundation of which to start working with the NetAdvantage controls.

Where Are Startup Solutions Located?

There’s no need to download the Startup Solutions separately, starting with 10.2 they are installed with the product and available via the start menu. You can find a shortcut for the start solution by using the following path:

Start > Infragistics NetAdvantage [Version] > [Platform] > [Platform] Startup Solution

The image below demonstrates how you would navigate to the ASP.NET Startup Solution.

Note that while this image shows the location for the ASP.NET Startup Solution, each product on each platform has their own solution.

What’s Available in the Startup Solutions?

Each product will highlight different controls and features and the contents will change from release to release. To give you an idea of what’s available in 10.2 for each platform you’ll find screenshots below representing the “home” screen of the project and a peek into the contents of the application through Solution Explorer.

ASP.NET

Silverlight Line of Business

Silverlight Data Visualization

WPF Line of Business

WPF Data Visualization

WinForms

We hope you find these resources useful! Please feel free to comment below if you have any suggestions of ways to better improve the Startup Solutions for you.

Improved Collaboration, More Customization and Other New Features in Quince

2010-06-28T17:00:00Z

The Quince team has done it again with a number of new features aimed at team workflow. This round of additions is heavy on helping make the assets in Quince more accessible and easier to maintain. Read on for full details on what’s new!

Subscription Manager

To provide greater security for your subscription, we’ve created the role of Subscription Manager. These folks manage everything at the subscription level, and now librarians simply manage their libraries at that level. The owner of the subscription starts out as the very first Subscription Manager and they are able to promote more managers by visiting View Subscriptions.

Members Can Annotate

Members are now able to contribute on examples in a greater degree because now they can create their own annotations. To change this permission, simply visit the Design Library’s Preferences.

Customize Notifications

Not only have we expanded the types of notifications you receive from Quince so that your can stay current with the activities in your design libraries, but we’ve also allowed you to customize them so that you’re getting just the ones you’re interested in. Visit Customize Account to check out these options.

Organize Libraries

Customize the design libraries that display in Quince so that way you can focus only on libraries that you are active in, instead of all libraries available to you in the subscription.

Add Public Patterns to Design Libraries

Add public patterns to your private design libraries to encourage their usage amongst your team in the context of your projects.

Share Private Patterns between Design Libraries

Patterns in your design libraries can now be shared between them in order to improve consistency across projects and teams.