Today, March 23, 2013 Microsoft with the support of Infragistics Inc organized the second in Bulgaria Hackathon for Windows 8 and Windows Phone 8.
The event is held at the office of Infragistics Bulgaria. This hackathon confirms the very good partnership between Microsoft and Infragistics.

Lecturers are:

Ventsy Popov : Technical Evangelist @ Microsoft

Konstantin Dinev: Principal Software Engineer jQuery/WinJS  @ Infragistics

In the program of the event included three lectures

• Starting with Windows Store Apps - speaker: Konstantin Dinev (Infragistics)
• Contacts in Windows Store Apps - speaker: Ventsy Popov (Microsoft)
• Tiles&Notifications - speakers: Ventsy Popov (Microsoft) and Konstantin Dinev (Infragistics)

Among the awards for the participants were Pack-man style Infragistics t-shirts.

The event continues with the development of applications for Windows Store and Windows Phone that will be completed after the Hackathon and assessed in May 2013

Pack-man style Infragistics t-shirts

Elevators:

Just before the conference

Konstantin Dinev in action

Ventsy Popov in action

You could also visit the Hackathon 2.0 event Facebook page

Pictures from this event are available here.

As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook,Google+andLinkedIn!

We had an awesome time at the C# corner MVP Summit 2013, Noida. Every year C# corner MVPs, authors and the experts in this forum meet up and share their knowledge with others. We are glad that we are part of this event this year by being the platinum sponsors. And I had a fantastic time doing the demos for Jason’s session on HTML5 & jQuery. Jason explained about HTML5 – new HTML elements, CSS3 and JavaScript API followed by some amazing features of jQuery library, jQuery widgets, data access & styling. He also demoed the HTML5 video player which seamlessly plays in the browser without having to worry about the plugins.

So here’s a glimpse of the event followed by a quick recap of the demos that I did!

C# Corner MVP awards being announced!

It was a packed room with super experts!

Jason giving out the C# Corner MVP awards!

It’s all about HTML5, jQuery and Ignite UI!

Getting started with my Ignite UI demos!

Expert advice!

Demo: Ignite UI – igGrid & igPieChart

I showed how quickly you can add igGrid& igPieChart on the page, add features, and bind data to it.

Before you get started with igGrid& igPieChart, remember I showed you an awesome feature that Ignite UI provides – the igLoader.

The igLoader is used to load scripts and styles modules. You should specify the CssPath and ScriptPath relative to the page that instantiates the loader and add the loader in jQuery. Also do not forget to set the resources appropriately. In this demo I set the resources to “igGrid.*” so that I get all the features of the grid and loaded. Since I was also showing the demo on igPieChart, I included that too. If you want to know more about igLoader, have a look at the link – getting started with igLoader.

$.ig.loader({

   scriptPath: 'scripts/ig',

    cssPath: 'css/',

    theme: 'Metro',

    resources: 'igGrid.*,igPieChart'

})

Make sure you add HTML elements that will render your grid, piechart, & a slider (jQuery UI slider is used here to show how easy it is to access the api of igPieChart ):

<p >Radius :

Now here is the full source code of

1. igGrid – bound to a local json data with full features enabled,
2. igPieChart – bound to the same data,
3. jQuery Slider – used to demo accessing the api of igPieChart

$.ig.loader(function(){var data= [
        { "Budget": 60, "Label": "Administration" },
        { "Budget": 40, "Label": "Sales" },
        { "Budget": 60, "Label": "IT" },
        { "Budget": 40, "Label": "Marketing" },
        { "Budget": 60, "Label": "Development" },
        { "Budget": 20, "Label": "Support"}]
    $('#grid').igGrid({
        dataSource: data,
        features: [
            {
                name: "Paging",
                type: "local",
                pageSize: 13
            },
            {
                name: "Sorting",
                type: "local"
            },
            {
                name: "Selection"
            },
            {
                name: "Filtering",
                type: "local",
                filterDropDownItemIcons: false,
                filterDropDownWidth: 200
            },
            {
                name: "Updating",
                enableDataDirtyException: false
            },
            {
                name: "Tooltips"
            },
            {
                name: "RowSelectors"

            },
            {
                name: "Resizing"
            },
            {
                name: "Summaries"
            },
            {
                name: "Hiding"
            },
            {
                name: "GroupBy"
            },
            {
                name: "MultiColumnHeaders"
            }
        ]
    });

    $('#chart').igPieChart({
        dataSource: data,
        valueMemberPath: 'Budget',
        labelMemberPath: 'Label',
        explodedSlices: '0 2'
    });

    $('#slider').slider({
        slide: function(evt, ui)
        {
          $('#chart').igPieChart('option','radiusFactor', ui.value / 1000);
        },
        min: 0,
        max: 1000,
    });
});

With Ignite UI you can do a lot more stuffs than you just saw! Check Craig’s blog post for get started videos.

If you have any questions email me nish@infragistics.com or find me on twitter @nishanil.

-Nish

Your wait is over!  NetAdvantage for Windows UI is HERE!  Since the announcement of Windows 8 at the Microsoft //BUILD/ event in Anaheim, CA back in 2011, Infragistics has been watching the market trends, listening to customers, and working closely with Microsoft to create the best Windows 8 control toolset available.  No matter what your UI preference, we have leveraged our existing codebase to create a familiar and unified development experience for both XAML and HTML.

Whether you are a line of business developer writing internal applications, or a developer writing consumer based applications that will be published in the Windows Store; NetAdvantage for Windows UI provides the tools you need to create fast and fluid, rich, touch enabled, true Windows 8 experiences.  Now is the time to choose your path to Windows 8!

XAML

If you are a XAML developer, then our XAML based Windows UI controls are for you.  Our WinUI XAML controls are based off our ever popular NetAdvantage for WPF and Silverlight, so if you currently use our XAML controls, then moving into developing for Windows 8 just got a lot easier.  With the same feature set, same API, and same great controls, you can take the knowledge and experience you already have and start writing touch enabled Windows Store applications without skipping a beat.

I bet you’re wondering what you get for the XAML stack.  Well, let’s check out the controls.

• Data Chart
• Grid – CTP
• Barcode
• Calendar
• Currency Input
• DateTime Input
• Masked Input
• Numeric Input
• Excel Framework – CTP
• Persistence Framework – CTP

Wow, that’s a lot of XAML!  Let’s check these controls out in a little more detail.

Data Chart

The xamDataChart is a next-generation high-performance charting control designed for handling a live data feed coming in with over tens of thousands of data points every several milliseconds. It is also designed to facilitate the overlay of multiple series in a single chart plot area so that users can add statistical and technical indicators to their analyses with ease. The xamDataChart control provides financial features similar to those found on Google and Yahoo! finance websites. It also provides a set of charts and a framework for creating charting applications, or adding charting capability to existing data or information-driven applications.  Easily set up common chart series types, such as an area, line, spline, and column chart series.  This is hands down the most powerful, feature rich, and highest performance chart on the market.

Grid – CTP

Obviously, one of the most popular controls for line of business applications is the data grid.  If you need one, we got one!  The xamGrid is currently being released as a CTP because we just weren’t ready to call it perfect.  Though, don’t let the CTP label fool you.  Even as a CTP, the xamGrid allows you to display complex hierarchical data with master/detail data relation ships with different column layouts at each level.  It utilizes UI virtualization which makes the XamGrid extremely lightweight and extremely fast when handling large amounts of data.  With powerful features such as column sorting, filtering, column moving and grouping, as well as fixed columns; this xamGrid is the most feature rich grid for Windows 8 on the market.

Barcode

From shipping containers, to medical records, to a can of beans at the grocery store, barcodes have become the universal mechanism for affixing identifying data to physical assets. Industries have created standards around barcode technology such as creating barcodes that provide capabilities unique to their industries.  With support for over 10 different symbologies including Code 39, Code 128, Ean/Upc, Interleaved 2 Of 5, GS1 Databar, Intelligent Mail, Royal Mail, PDF 417, Mxi Code, and QR Code; We have you covered for all your barcode needs.  Who else has that?  I’ll tell you… No one!

Calendar

A calendar control is a must have for any line of business application.  The ability to display the days of the month, day headings for the days of the week, a title with the month name and year, links for selecting individual days of the month, and links for moving to the next and previous month and year is a must have.  Luckily for you we have one of those too.  The xamCalendar is not just a simple calendar but a feature rich calendar that allows you to display multiple calendars in rows and columns.  It supports different views for day, month, year, decade, and even century views.  The xamCalendar supports single date selection, as well as multiple date selection.

Editors

We know you need editors, and editors you shall have.  Four to be exact.  This first release of WinUI XAML controls ships with the xamDateTimeInput, xamMaskedInput, and xamNumericInput for all your editor needs.  With the xamDateTimeInput, not only can you select a date from the built-in drop down calendar, but you can also restrict direct user input to a specific mask.  The xamNumericInput should be used for all your numerical data values in which you can assist your users in entering their numeric values by restricting their input or by formatting it to predefined valid formats.  If you deal with money, then you will need the xamCurrencyInput.  The xamCurrencyInput uses a mask to prepend a value with a given cultures currency symbol.  You can also ensure that the fraction portion of the value remains intact up to the hundredths place, even if there is no remainder.  All of the editors I just discussed are built on top of our xamMaskedInput which uses a mask to restrict user’s input to a valid text format.

Excel Framework – CTP

It’s no secret.  Excel runs most companies today.  Now, getting excel data in and out of your Windows 8 application has never been easier.  Using the Infragistics Excel Framework, you can work with spreadsheet data using familiar Microsoft Excel spreadsheet objects like Workbooks, Worksheets, Cells, Formulas and many more. The Excel Framework makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application.  One of the unique features of our Excel  Framework is that it is a class library that runs completely independently of Microsoft Excel, so you do not require it to be installed.  Once again, don’t let the CTP label fool you.  This is a very capable framework that supports the follow versions of Excel:

• Microsoft Excel 97
• Microsoft Excel 2000
• Microsoft Excel 2002
• Microsoft Excel 2003
• Microsoft Excel 2007
• Microsoft Excel 2010

Persistence Framework – CTP

The Infragistics Persistence Framework library provides a unified API that can be used to save and load the current state of controls. You can manage every phase of the persistence process. You can define which DependencyObjects get persisted and which DependencyObjects properties can be saved and loaded. The save and load process can be easily customized. The static Save method returns a MemoryStream which can be further processed. It is up to you where it will be stored – e.g. Isolated Storage.  I know what you’re thinking, “Another CTP?”.  This is one of those frameworks we felt would be extremely useful, so we decided to provide it to you as soon as we could.  This was a massive release of XAML controls, and we just ran out of time near the end of our cycle.  Never the less, we were able to give you something to get your mouth watering.

HTML

What’s that you say?  You’re not a XAML developer?  You come from the world of HTML and jQuery?  Give you a DIV and a CSS style any day?  Well, okay I will!  Our NetAdvantage for Windows UI also ships with some great butt-kicking HTML controls.  If you currently use our IgniteUI product, that’s our HTML and jQuery controls, then you’re going to love this.  Our WinUI HTML controls are based off our IgniteUI controls.  Don’t use our IgniteUI controls?  No problem, f you know HTML and jQuery then you already know how to use our controls.  Either way, you are ready to start writing stunning, finger burning, touch enabled HTML Windows Store applications with our HTML based WINUI controls.

So what did we give you in our first release of WinUI HTML?  Let’s take a looksy…

• Grid
• Hierarchical Grid
• Data Chart
• Map
• Pie Chart
• Date Picker
• Date Editor
• Currency Editor
• Numeric Editor
• Masked Editor
• Text Editor

Say Whhhaaaaatttt!  Yeah, that’s a ton of great HTML controls.  Everything you need to get started writing your app.  Let’s dig a little deeper into these babies!

Grid

If you’re going to use a grid in your Windows Store application, you should use the fastest HTML grid on the market.   Let your users customize and combine data for their Outlook applications simply by dragging and dropping the column header to group (and ungroup) common values and conditions.  Enter data within the cell, using templates with custom editors that match the column’s data type. Yes, you can easily add new rows and delete existing rows from within the grid. In addition, validations can be done real-time within the grid cell.  Display column summaries showing aggregates of values in the cell. It comes with the standard sum, average, max, min and count aggregate formulas built-in.  The merge cells feature allows for sorted cells which have the same values to be merged into a single visual cell, for easier and more context-oriented data visualization.  Need unbound columns?  We got them.  Add fields to your grids that are not bound to a data source, or display custom data in addition to what is available in the data source.  If you need hierarchy then keep reading.

Hierarchical Grid

Can you guess what the hierarchical grid does?  That’s right!  It shows hierarchy!  The hierarchical grid builds on our grid control to show multiple parent-child relationships in an expandable, hierarchical data grid, that stands as the backbone of your data-centric Windows Store applications. Users can drill down, as well as add, edit, delete, select, sort, group and filter rows using their mouse, keyboard, or touch.  No need to stop at one parent-child data relationship. The Hierarchical Grid lets you have as many as you want, related by a data key from one level to the next.  Combine and customize data for your applications by simply grouping (and ungrouping) common values or conditions by simply dragging and dropping the column header to the group-by area.  Display column summaries showing aggregates of values in the cell. It comes with the standard sum, average, max, min and count aggregate formulas built-in.

Data Chart

Let your data tell the story, with the broadest range of interactive, high-performance data charts that include support for a full range of business, scientific and financial charting scenarios, as well as trend line capabilities "right out of the box."  The data chart control offers a full set of dynamic business charts right out of the box, including bar, line, polar, range, step, spline, OHLC and candlestick charts, as well as technical and financial indicators.  With  full support for panning & zooming, you can navigate chart data using the mouse, keyboard, and especially touch.  The data chart control makes it easy to bind the chart to more than one series so that you can compare data from two difference sources.  Need a legend?  Of course you do.  You can apply a legend to help with the understanding of data being presented from different series.  Need trend lines?  We got them!  Built directly into the charts, trend lines show visual projections of data based on the trend formula selected, making it easy for the reader to get a snapshot of the trending data.  Our data chart has the highest performance rendering, and can display millions of data points, and update with high frequency to handle real-time data feeds.

Map

The map control plots generic map data from map providers (e.g. OpenStreetMap, Bing Maps, and CloudMade Maps) and exposes the ability to render additional map layers. Create highly detailed, thematic geographical maps using an innovative feature set that includes custom shape templates, the ability to render polyline and polyshapes, Map Progression, Scatter Area Plots, and an intuitive Overview Pane and much more.  Show thousands of data points on a map, such as precipitation measurements from thousands of weather stations in the USA. The colors are smoothly interpolated around the shape by creating a triangulation of the original data and by applying a pixel-wise triangle rasterizer to determine where the rain was heaviest.  Just like Scatter Area Maps, Contour Line Maps can be used to show thousands of data points by joining points of equal value, such as elevations, precipitation levels, etc.  Use a shape series to visualizes enclosed areas on a map like countries or regions.  Some geographic series require a triangulation of XY+Value data in order to render, which can be a very time-consuming process when massive amounts of data points are involved. The new triangulation feature enables applications to avoid this computation at run-time by pre-triangulating the data and providing the triangulation to the GeoMap series.  To put it simply, this map has it all!

Pie Chart

Have your pie and eat it too!  Create simple or exploded pie charts, text labels, and images that can be displayed within or outside of the boundaries of the pie in a manner that avoids overlapping. Users can click or drill down to view underlying data, explode out a section of the pie, and get information via tooltips.  This pie will have your users craving for information!

Date Picker

The date editor extends the features of the Date Editor control, which we’ll talk about in a minute, by adding a calendar drop down using the well-known jQuery UI date picker features. With complete control over the drop down calendar, you can easily turn on and off the calendar features your application requires with a familiar API.

Editors

HTML apps need editors too, and we got them.  Editing date values has never been easier with the new date editor control. Easily constrain a dates input as well as its display. You can configure minimum and maximum dates accepted by the control as well as provide a default date for a null value. You are not restricted to just a date. The date editor also support time input as well. Easily recover from an invalid date input by reverting to the last good date with a single property setting. Add spin increment and decrement capabilities to various elements of a date by turning on the spin button feature of the date editor.

The numeric editor is an editor that provides editing capabilities for numeric input. If you want to edit doubles, floats, integers, or bytes, the numeric editor handles them all. Provide your own decimal and group separators. You can even control the length of a group. Limit your input to a minimum value up to a maximum value and even provide a default value in cases where the value is null. Controlling the number of decimal places for floating points is no problem for the numeric editor. Simply set the minimum and/or maximum number of decimal places allowed for your value. For those really large numbers, support for the scientific format is also provided. With a single property, you can easily add spin button capabilities to increment and decrement the numeric values within the numeric editor.

The currency editor expands on all the great functionality provided by the numeric editor and provides advanced features for dealing with currency based input. The currency editor only accepts numeric digits that can be formatted as various currency types. Easily control formatting options such as the decimal separator, currency symbol, positive and negative patterns, and group length and separator to name a few.

The masked editor control gives you complete control over the format and constraints of the input text using configurable mask rules. Easily restrict user input to a format of your choice. Read data as the raw text with required prompts and literals, or just the raw text. Customize your prompt and pad characters, and easily add auto complete functionality with the masked editor.

The text editor control takes text input to the next level by providing advanced capabilities not available from other text input controls. The text editor supports auto complete to help speed up the text input process based on values you provide to the control. You can also easily add spinner or dropdown button capabilities with a single setting. The text editor can be formatted to support single or multiline input, as well as provide null text to be shown where the editor has no value. Restrict the text input to a specific maximum length. It also has built in features to restrict specific character input to automatically control the case of the text.

I Want It! When Can I Get it?

I know I covered a lot in this post, but believe it or not, I couldn’t even come close to covering everything feature we have.  You can expect to find these control publically available to you in mid April.  Probably around April 15th-ish.  If you can’t wait to get your hands on the NetAdvantage for Windows UI XAML or HTML controls outlined here, drop me an email me at blagunas@infragistics.com, tell me what control and/or feature you really want to work with now and I might give you early access.  If you ask nicely.

If you have ideas about new controls, new features we should add to our controls, or important issues we need to fix with our controls, please let me know.  Be sure to follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. Also make sure to connect with our various teams via our Community Forms where you can interact with Infragistics engineers and also other customers.

For specific feedback regarding our awesome data visualization controls, such as our data chart, pie chart, and map, feel free to contact the master of DV Nick Landry at activenick@infragistics.com, and follow him on Twitter at @ActiveNick.

Lastly, when you do build a cool Windows Store application with these controls, please make sure to let me know.  Just send me the link to the app in the Windows Store, and you may get a nice little surprise in return.

As we start rolling out the blogs today on the new features for 13.1., we hope you get as excited as we are about the new stuff we are shipping in 13.1. We are continuing to solidify and expand our story of delivering the only toolset on the market that lets you design & build enterprise-ready applications for every major platform and device. With Ignite UI, you can build high performance enterprise class HTML5 & jQuery based controls that can power desktop, tablet & mobile phone applications.

If you asked me what the key messages are for the 13.1 release, I would say we focused in these areas:

• Touch Touch Touch & Mobile Mobile Mobile Everywhere– all controls are touch supported with touch friendly styles. In our jQuery mobile set of controls, we ship 6 adaptive jQuery Mobile themes and an all new responsive UI framework to deliver the most modern touch & tablet experiences.
• HTML / jQuery & ASP.NET MVC Pivot Grid– Infragistics now completes the trifecta in web based data grids – customers have a choice of a Flat, Hierarchical, or OLAP Pivot Grid to deliver high-performance, data intensive experiences in their browser based applications.
• Responsive Web Design & Controls Support– Grid & Chart are now enabled with a responsive web design capability that allows you to control in CSS how a control behaves when the screen is resized for different devices.
• Tile Manager UI– Based on our popular XAML Tile Manager UI, we’ve built a similar control for web based interactive layouts. Based on our new Layout Manager component, this popular desktop UI pattern comes to the Web with a container based grid layout that allows the end user to expand, collapse & rearrange their screen.
• Data Visualization- Ignite UI features market-leading Data Visualization controls for Business Charting, Financial Charting and Geospatial Mapping applications & dashboards. 13.1 provides even better parity across development platforms for Data Visualization using HTML5 & jQuery, iOS, WPF and Silverlight. Ignite UI now supports new Data Chart types and features, and introduces the following new controls:
  • Doughnut Chart
  • Funnel Chart
  • Sparkline
  • Radial Gauge
• KnockoutJS- Support for the popular KnockoutJS MVVM library key controls like Grid, Tree, Combo, Editors
• MVC Controls– Every control we ship includes a server-side MVC counterpart, so if you are an ASP.NET developer building MVC applications, you get all features.

That’s the high level, so lets get into the details of what we are shipping in 13.1.

New Control – Doughnut Chart

The Doughnut Chart – just like the Pie Chart – is primarily used to show statistics expressed in percentages. Both consist of a circular area divided into sections, where each section has an arc length proportional to its underlying data value. Both are used for representing categorical data, are most effective when there are only a few categories, and when each category makes up a relatively large percentage of the data as a whole.

The primary difference between the Pie Chart and the Doughnut Chart is that the latter has a “hollow” or “empty” center, and will typically display multiple series. A given data series is represented by a ring that is drawn around the “hole” and the data in any given ring totals 100%. These rings are displayed in a concentric pattern where each ring representing a data series, either independent from one another or linked via a hierarchy. The sections that make up each ring may differ in size or each section within a ring may be the same size.

Key Features of the Doughnut Chart

• Multiple Ring Series & Data-Binding– The Doughnut Chart supports one or more rings surrounding a hollow or empty center. The center may either be a “blank circle” or may contain a label. Each ring can either represent a separate data series that you data-bind to a collection via the ItemSource property, or can be a ring within a parent-child hierarchy.
• Configurable Inner Radius– The inner radius of the Doughnut Chart center is configurable, allowing the developer to select the center as an object and extend the boundary or set the inner radius via a property setting.
• Slice / Section Labeling– The Doughnut Chart allows developers to control how each slice or section is labeled. Options are available to automatically select how the labels are displayed inside or outside of the chart, or using the BestFit method.
• Legend Support– The Doughnut Chart supports the automatic display of a legend which identifies each series displayed as a data ring, as well as each slice / section within a data ring. The legend can be configured and docked to any of the chart’s corners or borders.
• Slice Selection – Allow users to select slices and change the color of selected slices.
• Others” Category– The underlying data for any Doughnut Chart can often contains small value items, too numerous to display in a significant manner via separate slices. For such occasions, the “Others” category allows for automatic aggregation of several data values into a single slice. Developers can set the OthersCategoryThreshold property to separate which values get their own slice, and which values will get rolled under “Others”.
• Styling & Themes– The look & feel of the Doughnut Chart is completely customizable, allowing you to style it to your app design and your brand. Simple properties are exposed to easily style the outlines and brush fill colors of the pie slices, allowing you to use solid colors as well as gradients. Alternatively you can use chart themes to give your pie charts and other charts a consistent and color-coordinated look and feel. Simply set the theme property to one of the predefined themes or create your own.

New Control – Funnel Chart

Visually showcase diminishing values in your HTML5 Web applications and sites with our new funnel chart, a single series chart that displays data in a funnel shape with a variable number of sections, each representing the data as different portions of 100%. The funnel chart control uses the new HTML5 Canvas tag to plot funnel charts on web pages and makes it easy for end users to illustrate value "fallout" in the sales process or bottlenecks in the flow of a multi-step process.

Funnel charts are very similar to pie charts in that that they display the values associated to different categories of items. They are different though because the sum of values shown on a funnel chart is not necessary to be the total of some larger entity. Funnel slices are usually displayed sorted by value from the largest down to the smallest or in reverse. They can appear with the same height or the height may be proportional to item value. The funnel chart usually has a conic shape but it allows a Bezier curve to form the contour of its left and right sides.

Key Features of the Funnel Chart

• Weighted Slices– You can configure slices to be displayed with different height based on their value. This display option allows for a more obvious visual clue for the value of a slice compared to other slices.
• Slice Selection– You can enable slices to be selected and configure selected and unselected style for slices. Slice selection functionality can be enabled for the igFunnelChart control allowing the user to select slices with a single mouse click or screen tap. Another click or tap deselects the slice. Additionally, selected and unselected styles can be defined and applied to the slices depending on their state.
• Bezier Curve Shape– You can add more visual appeal to a funnel chart by configuring the sides of the chart to take shape in the form of a Bezier curve as opposed to the regular trapezoid shape. Developers can also configure the position of the Bezier control points in order to control the exact shape.
• Inverted Funnel– The funnel chart allows to be displayed with smallest value and on top as opposed to the regular view with largest value on top. By default a funnel chart displays the largest slice (the largest data value) on top and the rest of the slices going down sorted in descending order by value.
• Styling– Built-in control styling where the Funnel chart attempts to obtain default values for some of its properties from CSS classes. The control, sub-controls and attributes can all be styled to match the desired look & feel of your Web application or site. This includes colors, fonts, borders, padding, opacity, background, text alignment and more.

New Control – Sparkline Charts (SparkLine, SparkBar, SparkArea, Win/Loss)

The new Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations and patterns in data in a clear and compact representation. What sets the Sparkline chart apart from its full DataChart cousin is its lightweight nature which allows dozens or even hundreds or Sparkline charts to be loaded without a list or grid, enabling quick trend lookup in Web applications and sites.

Key Features of the Spark Charts

• Multiple Display Choices– The Sparkline Chart can be configured to display one of four baseline microchart types: Line, Area, Column and Win/Loss.
• Data binding– Each Sparkline chart can be populated automatically by data-binding it to an igDataSource for both static and live data scenarios.
• Markers Support– Display markers such as First/Last, High/Low, Negative and Normal.
• Trend Lines– Many different trend lines can be applied to help users analyze their data, including linear, weighted, quadratic, cubic, quartic, quantic, logarithmic, exponential and more.
• Adjust Ranges– Apply Normal, Minimum and Maximum ranges to any Spark Chart type.
• Styling– Built-in control styling where the Sparkline chart attempts to obtain default values for some of its properties from CSS classes. The control, sub-controls and attributes can all be styled to match the desired look & feel of your Web application or site. This includes colors, fonts, borders, padding, opacity, background, text alignment and more.

New Control – Radial Gauge

Make your data visualizations and dashboards more engaging with radial gauges for iOS that show your key performance indicators (KPI) with rich style and interactivity. Create highly configurable, round or semi-round dials and gauges for your information dashboard with the look and feel of a clock, industrial control panel, automotive dashboard or aircraft cockpit. The Ignite UI Radial Gauge is powerful yet simple to use. Just drop it in your page and you’re ready to go with the default look & feel. Simply tweak the configuration options to your liking to meet whatever custom look you desire in your application.

The Ignite UI Radial Gauge for HTML5 & jQuery is compatible with the NucliOS (i.e. native iOS) and XAML (i.e. WPF & Silverlight) versions of the same Radial Gauge, both visually and in features, that Infragistics is introducing on multiple platforms.

Key Features in the Gauge control

• Fully Configurable Radial Scale– The Radial Gauge control lets you control the Start and End positions of the scale, major and minor tick marks, labels, color ranges and sweep direction. You can create full 360 degree scales, or half circular gauges with 180 degree scales, 90 degrees, 45 degrees or any custom value you want.
• Fully Configurable Needle– The Radial Gauge control lets you control various attributes of the needle, including the needle color, length, point, base, and cap. The following needle shapes are built-in:
  • None
  • Rectangle
  • Triangle
  • Needle
  • Trapezoid
  • Rectangle With Bulb
  • Triangle With Bulb
  • Needle With Bulb
  • Trapezoid With Bulb
• Configurable Backing– The Radial Gauge backing can be configured to control various visual attributes such as the colors, shape around the gauge edges (fitted or circular), over sweep and corner radius. You can additionally control the transparency and display any custom image from within your CSS.
• Motion Framework Animations Support– The Radial Gauge control supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range and more. You can control the speed of the animations by setting the desired Transition Duration.

New Series & Chart Types in Data Chart

The Ignite UI jQuery Data Chart is already the most powerful charting control for HTML5 developers. Release 13.1 brings even more goodness to Web and Hybrid app developers with new data series.

New Chart Series

This latest release of Ignite UI introduces 17 new chart types in the Data Chart control, enabling you to easily implement heavy-duty data visualization and analysis on large volumes of data with high performance in Web and hybrid HTML5 applications. The Ignite UI igChart now supports a total of 39 chart types, including the following new chart series introduced in release 13.1:

Category Series– The igChart’s collection of baseline Category series is being expanded to support the following chart type:

• Category Point
• Stacked Chart Category Series – The jQuery igChart now supports a whole range of stacked series for every day scenarios.
• Stacked Area Series
• Stacked Bar Series
• Stacked Column Series
• Stacked Line Series
• Stacked Spline Area Series
• Stacked Spline Series
• Stacked 100 Area Series
• Stacked 100 Bar Series
• Stacked 100 Column Series
• Stacked 100 Line Series
• Stacked 100 Spline Area Series
• Stacked 100 Spline Series

Scientific Charts– From wind patterns to performance metrics, Polar & Radial series can expose new insights in many scientific data sets. The new scientific charts supported include:

• Polar Spline Area Series
• Polar Spline Series
• Radial Area Series

Chart Scatter Series - Also known as Scatter Plots or Scatter Graph, you can benefit from this type of mathematical diagram in your Web and hybrid apps using Cartesian coordinates to display values for two variables for a set of data. You can also enable trend lines to facilitate data analysis. The new scatter type supported is:

• Scatter Spline Series

The Ignite UI data chart control for HTML5 and jQuery developers is designed for modularity using chart series. Multiple chart series are supported to create composite charts for better data comparisons on the same surface.

New Control – Pivot View

The new igPivotView is a two-panel control that combines  the new igPivotGrid control and the new igPivotDataSelector controls, separated by the new igSplitter control. The igPivotGrid, igPivotDataSelector, and igSplitter – assembled together to provide in one place all needed tools for manipulating multidimensional (OLAP data) in a pivot grid.

Key Features in the Pivot View

• Browser Based Business Intelligence– Bind to server-side XMLA data sources like Oracle, SAP & SQL Server Analysis Services, or server & client-side Flat data sources.
• Rich Data Discovery– Enable rich data discovery with drilldown, sorting & data filtering.
• Multiple layouts- Change how the row headers are arranged for display with regards to the amount of space they occupy with the Standard or default Compact View.
• Data Selection- The igPivotDataSelector provides drop-downs to select a database to connect to, cube to extract data from, and a set of measure groups.
• Metadata Tree– Display available dimensions with their respective hierarchies along with a list with all the available measures are loaded in a tree once the user chooses a database, cube, and measure group.
• Deferred Update– Immediate and Deferred mode are supported, which give control to the user on the frequency of the grid updates.
• Configurable Panel Views - Swap the pivot grid and the selector using the dataSelectorPanel properties of the igPivotView.

New Control – Pivot Data Selector

The new igPivotDataSelector is an interactive jQuery based UI control that enables users to select data slices, typically, when data is being visualized in an igPivotGrid. All of the UI features that you would expect to be used to interact with an actual OLAP or flat data source are wrapped up in this control. They include:

• Drop-downs for selecting database, cube and measure group
• A metadata tree displaying all dimensions, measures, hierarchies and levels
• Drop areas for selecting of hierarchies and measures
• A deferred update checkbox
• An update button to refresh the view connected to the data selector

Key Features in the Pivot Data Selector

• Data Selection- The igPivotDataSelector provides drop-downs to select a database to connect to, cube to extract data from, and a set of measure groups.
• Metadata Tree– Display available dimensions with their respective hierarchies along with a list with all the available measures are loaded in a tree once the user chooses a database, cube, and measure group.
• Deferred Update– Immediate and Deferred mode are supported, which give control to the user on the frequency of the grid updates.
• Visualize Your Cube - Use the same data source instance as other Ignite UI controls, such as igPivotGrid, which enables you to build complete OLAP data visualization applications.

New Control - Pivot Grid

The igPivotGrid control is a jQuery based data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data. The igPivotGrid uses the Online Analytical Processing (OLAP) approach to present the results of multi-dimensional queries in an easy to comprehend manner. The igPivotGrid control uses an instance of either igFlatDataSource™ or igXmlaDataSource™ component as data source.

Key Features in the Pivot Grid

• Rich Data Discovery– Enable rich data discovery with drilldown, sorting & data filtering.
• Multiple layouts- Change how the row headers are arranged for display with regards to the amount of space they occupy with the Standard or default Compact View.
• Build the Complete Experience - Combine with the igPivotDataSelector control to provide users with the ability to add/remove hierarchies and measures to/from the pivot grid.

Grid New Features & Enhancements

We are not resting on our laurels as the market leader in performance and features in our HTML / jQuery Data Grid. In 13.1. we are continuing to match the pace of the fast and furious Web world with new features and enhancements to existing grid features.

Key Features

• Responsive Design– Taking from popular responsive UI frameworks like Twitter Bootstrap, we’ve added support that allows CSS classes to trigger visibility of columns based on the size of the grids container. A developer can also that the row template based on the container size.
• Cell Merging CTP to RTM– Enable a slick hierarchical view based on the sort of a column.

• Column Fixing CTP– Deliver an Excel like, interactive fixed column view.

• KnockoutJS CTP to RTM– let KO do the data binding magic for you with the Grid.

WebUpload Enhancements

WebUpload gets one of the most sought after feature requests in 13.1 – we’ve added support for multiple file selection.

KnockoutJS Support

We’ve added / updated Knockout support to the following controls:

• WebCombo
• Editors
• Tree
• Grid

I know your next question is “what about Chart”? I’ve talked to the team about this, and we are going to get that into a checkpoint release very soon. So stay tuned. I want it as much as you do.

New Control - Splitter

The splitter is a component which create dynamic layout with resizable and collapsible panels. This component is a nice addition for Ignite UI’s toolbox because it is not available in the jQuery UI’s toolset and customers have no alternatives for acquiring this component from another source for free. The Splitter control can be horizontal or vertical, can include buttons for Left, Right or Collapse, and can be dragged accordingly to resize a containers widget. The Splitter is designed with programmable events for Collapse, Expand & Resize, and has full keyboard support for interactions.

Key Features in Splitter

• Horizontal & Vertical Splitters
• Nested Splitters

New Control - Layout Manager

The Layout Manager is a jQuery UI widget, which implements several major layout modes, and does not have any UI on its own. The layouts can be used for laying out web pages, as well as single page applications. All of the layout modes that are implemented are responsive and fluid by design, meaning the layout adjusts based on the resize events on the browser.

Key Features in Layout Manager

• Layout Customization– Design Flow, Border, Vertical or Column layouts based on the resizing algorithm that suites your needs.
• Interactive Grid - Create an absolute positioned layout that can be interactively minimized & maximized in a non-visual Tile Manager like UI.

New Control – Tile Manager

The web has evolved into richer experiences for end users. No longer is a static, even responsive UI enough for high-end user experiences. Controls like the new Tile Manager deliver on this new type of richness that can be delivered in HTML pages. Based on our new LayoutManager control, the TileManager gives a touch friendly, tablet-ready, interactive UI that allows the end user to expand, collapse and move widgets on the page. This is enabled by giving developers the ability to create a grid based layout in HTML that allows widgets to be hosted in defined column spans & row spans.

Key Features in Tile Manager

• Tile Layout- Arrange tiles explicitly as regimented columns and rows like in a Grid panel, even span multiple columns and rows or display them as a data-bound Items Control that automatically creates a series of tiles.
• State-Based Customization - Define different item templates and size constraints to your tiles and have them automatically applied when the state changes between minimized, minimized expanded, normal and maximized.

jQuery Mobile Enhancements

We are continuing to polish our mobile control offering with enhancements to the jQuery Mobile List control. In 13.1 we’ve implemented events as properties on list view MVC wrapper and the ability to create a collapsible listing on the Mobile List control.

Release 13.1 Looks Awesome! When Can I Get it?

So hopefully you see the same awesomeness as I do in this release. I can’t wait for you to start using it and most of all giving us feedback. We are about 3 weeks away from the official marketing release of April 16th. If you can’t wait to get your hands on the controls, you can shoot me an email at jasonb@infragistics.comand let me what control and/or feature you really want to work with now and we’ll get you early access to the bits.

If you have ideas about new features we should bring to our controls, important issues we need to fix or even brand new controls you’d like us to introduce, please let us know. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @jasonberes or shoot me an email at jasonb@infragistics.com. Also make sure to connect with our various teams via our Community Formswhere you can interact with Infragistics engineers and also other customers.

Lastly, when you do build something cool with our controls, please make sure to let us know, we always love to hear from you.

It was barely more than a year ago that I joined Infragistics as Senior Product Manager, and here I am, already writing about a third exciting release since I started working here. Signed, sealed & delivered. Well, almost delivered. The release is done and our official launch is in mid-April. I’m here today to tell you more about all the XAML goodness in this release. Our Engineering, Quality Engineering and product Guidance teams have been hard at work for the past 6 months, and this release doesn’t disappoint.

This post applies to all users of our NetAdvantage for WPF and NetAdvantage for Silverlight products. Both products benefit from the changes and new features described since our Infragistics Shared XAML strategy allows us to target both WPF and Silverlight with the same XAML controls.

If you’re an enterprise developer building applications with WPF and/or Silverlight and haven’t had a chance to try our controls yet, read on to see all the new reasons for adopting our controls, and download a free & fully-supported evaluation version: WPF | Silverlight.

If you haven’t had a chance to review everything we added in our 12.2 XAML controls, you can catch-up and read the 12.2 Line of Business controls post by my colleague Brian Lagunas and my post on 12.2 Data Visualization controls.

13.1 XAML In a Nutshell

So what’s new in terms of XAML controls for WPF and Silverlight in this release? Here’s the skinny:

• Doughnut Chart: New control!
• Geographic Map: New features including support for Esri geographic imagery and server-side data tiles, support for multiple map imagery layers, and more
• Data Chart: New advanced features and series, allowing developers to show even more data points in a single chart, and interact with those points more easily using the mouse and touch gestures
• Pie Chart: New feature to add a hole in the middle
• Treemap Chart: New built-in tooltip support
• Syntax Editor: New features added, including SQL parsing, visible whitespace, current line highlight, ruler margin and more
• WPF Ribbon: Backstage feature added
• Gantt Chart: New feature to save projects to XML
• Menu/Context Menu: Support for MVVM
• Radial Gauge: Preview version of a newer, easier to use Radial Gauge control

I’m sure you’re curious to know more about the details? Keep on reading…

Hello GIS Developers!

Geographic Information Systems (aka Geospatial Information Systems, or GIS) are software systems designed to capture, store, manipulate, analyze, manage, and present all types of geographical data. Hardware peripherals and devices are often used, but the core of GIS lies in software. In the simplest terms, GIS is the merging of cartography, statistical analysis, and database technology.

GIS developers specialize in the design and development of GIS software. Just like enterprise developers, GIS developers rely on external libraries, cloud services and custom controls to augment their productivity and reach new heights in their applications. One such key component of every GIS developer is a full-featured map control.

With the xamGeographicMap control for WPF and Silverlight developers, our goal is to continue to deliver a rich thematic mapping solution to our customers. Redesigned from the ground up based on our Data Chart foundation, the xamGeographicMap shipped a year ago in release 12.1, providing powerful geospatial development capabilities, allowing you to display multiple geographic data series on top of mapping imagery. In release 13.1, we’re taking the mapping game to the next level, allowing you to mix & match tile imagery, server-side data tiles and client-side data layers.

Infragistics Teams-Up with Esri

Thanks to a new partnership between Infragistics and Esri, developers can now benefit from new advanced features in the Geographic Map control normally reserved for dedicated geospatial developers, such as new geographic imagery sources, server-side data tiles, and more. The result is a uniquely powerful geographic map control capable of displaying both client-side and server-side data on various sources of imagery, enabling very advanced geospatial scenarios.

Esri is the leading worldwide supplier of GIS software and geodatabase management applications that function as an integral component in nearly every type of organization.

New xamGeographicMap Features

The rundown of new features in the xamGeographicMap includes:

New Geographic Map Series

• Geographic Proportional Symbol Series
• Geographic Tile Series
• High Density Geographic Scatter Series (updated CTP)

New Geographic Map Features

• Support for multiple layers of tile imagery in addition to the baseline tiles via the new Geographic Tile Series
• New built-in support for all Esri ArcGIS 256x256 Mercator geographic imagery tiles
• Simplified API to support various geographic imagery providers, including:
  • OpenStreetMap
  • Bing Maps
  • Esri ArcGIS
  • Cloudmade maps
• Brand-new Geographic Map Browser sample

Geographic Proportional Symbol Series

Similar to the Scatter Area Map Series, the Proportional Symbol Series allows you to show thousands of data points on a map where symbols of different sizes and colors are used to represent geospatial data associated with different areas or locations within the map. This feature was introduced as a preview last year and we are now pleased to release officially as part of the product in 13.1.

Geographic Tile Series and Multiple Tile Layers

Similar to the baseline imagery of the control, the Geographic Tile Series allows developers to overlay multiple layers of geographic imagery, create cutouts to see underlying imagery or use transparency to see through one layer of imagery and exposing the layer underneath. This new feature allows GIS developers to load multiple tile data layers from Esri ArcGIS sources within the Geographic Map control. You can also control the opacity of one layer to see through to the underlying imagery from another layer.

High Density Geographic Scatter Series (updated CTP)

A High Density Geographic Scatter Series in the Geographic Map control can be used to show millions of data points without sacrificing performance. The map plot area with more densely populated data points are represented by condensed color pixels and loosely distributed data points are represented by pixels of another color. Options are available to control the palette of colors used and to change the min/max heat properties of the series in order to adjust how heat colors are mapped.

The HD Geographic Scatter series was made available as a CTP feature in release 12.2, and we are now providing you with an updated CTP in release 13.1, which includes multiple stability and performance improvements. As a preview feature, be sure to try it and take it out for a spin. Give us your feedback so we can address it before we release it later this year.

Support for Esri ArcGIS Imagery

Developers can now use Esri tile sets within the Geographic Map control. Imagery sets based on Mercator projections and tiles of 256x256 pixels in size are supported and are compatible with the tile sets from the other supported providers, such as OpenStreetMap, Bing Maps and Cloudmade. Other tile sizes and projections are not yet supported.

The screenshot above illustrates an example of an Esri overlay containing the Soil Survey Geographic (SSURGO) layered on top of Bing Maps road imagery. Another geographic proportional symbol series layer displays select major cities based on population size. This demonstrates the power of the xamGeographicMap control by combining commercial imagery from Bing Maps, server-side data tiles from Esri ArcGIS and client-side data bound to the application code.

Simplified Geographic Imagery Providers API

The Geographic Map control supports a simplified API to use the various geographic imagery providers. Instead of writing extensive code to load the proper geographic imagery, developers need only set a few properties to display tiles from OpenStreetMap, Bing Maps, Esri ArcGIS, and Cloudmade maps either as the baseline imagery or as part of a Geographic Tile Series.

New Geographic Map Browser

In addition to the Silverlight Samples Browser and WPF Samples Browser, Infragistics is introducing a new standalone Geographic Map Browser sample project that lets you experiment with the capabilities of the XAML Geographic Map at runtime. The standalone Geographic Map Browser ships with full source code for you to explore, and includes the following features:

• Over 55 geographic tile imagery options for the baseline map and additional Geographic Tile Series layers, from various providers like OpenStreetMap, Bing Maps, Esri ArcGIS, Cloudmade and MapQuest
• Additional Geographic Tile Series that can be overlaid on top of baseline map imagery or as composite of multiple tiles from different imagery sources
• Navigation pane with pan & zoom controls
• Location coordinates pane with latitude and longitude of the mouse cursor
• Overview + Detail (OPD, aka “Mini Map”) panel to see your current zoom level, pan the map, change the zoom slider as well as toggle between Drag/Pan or Drag/Zoom modes
• Support for built-in geographic series with configurable spatial data, including:
  • Country Shape Files (using the Geographic Shape series)
  • Sample Cities and Population Levels (using Geographic Proportional Symbol series)
  • Earthquakes (using Geographic Proportional Symbol series)
  • U.S. Airline Traffic (featuring the Infragistics Motion Framework)
  • Precipitation measurements from U.S. weather stations (using the Geographic Scatter Area series)

The following screenshots illustrate some of the great features of the Geographic Map Browser and the xamGeographicMap control itself.

The Best Data Charts Get Better

The Data Chart is Infragistics’ star control in our suite of Data Visualization controls. The NetAdvantage xamDataChart is already the most powerful XAML charts & graphs control for your custom WPF or Silverlight applications. With over 50 supported chart types, over a dozen built-in trend lines, dozens of financial indicators, and the ability to customize the interactions and style the charts to any look & feel, this already a very mature control in use in thousands of applications today.

Release 13.1 sees the introduction of new features in the Data Chart to improve the experience as to how users interact with their data in their chart – using the mouse or touch gestures. We also continue to strive for the best performance possible, making the fastest XAML chart on the market even faster.

Beyond the new xamDataChart control features, we’re also introducing a brand new Doughnut Chart control, and new features in the Pie Chart and Treemap controls.

New Doughnut Chart Control

The Doughnut Chart – just like the Pie Chart – is primarily used to show statistics expressed in percentages. Both consist of a circular area divided into sections, where each section has an arc length proportional to its underlying data value. Both are used for representing categorical data, are most effective when there are only a few categories, and when each category makes up a relatively large percentage of the data as a whole.

The primary difference between the Pie Chart and the Doughnut Chart is that the latter has a “hollow” or “empty” center, and will typically display multiple series. A given data series is represented by a ring that is drawn around the “hole” and the data in any given ring totals 100%. These rings are displayed in a concentric pattern where each ring representing a data series, either independent from one another or linked via a hierarchy. The sections that make up each ring may differ in size or each section within a ring may be the same size.

Key Features of the Doughnut Chart

• Multiple Ring Series & Data-Binding – The Doughnut Chart supports one or more rings surrounding a hollow or empty center. The center may either be a “blank circle” or may contain a label. Each ring can either represent a separate data series that you data-bind to a collection via the ItemSource property, or can be a ring within a parent-child hierarchy. Support for hierarchical data rings is a CTP feature in this release.
• Configurable Inner Radius– The inner radius of the Doughnut Chart center is configurable, allowing the developer to select the center as an object and extend the boundary or set the inner radius via a property setting.
• Slice / Section Labeling– The Doughnut Chart allows developers to control how each slice or section is labeled. Options are available to automatically select how the labels are displayed inside or outside of the chart, or using the BestFit method.
• Legend Support– The Doughnut Chart supports the automatic display of a legend which identifies each series displayed as a data ring, as well as each slice / section within a data ring. The legend can be configured and docked to any of the chart’s corners or borders.
• Slice Selection & Slice Explosion– Allow users to select slices and change the color of selected slices. Exploded slices are disconnected and drawn at a distance from the origin. This distance is controlled via a configurable property. Slices can be selected or exploded either programmatically or using touch & mouse gestures.
• “Others” Category– The underlying data for any Doughnut Chart can often contains small value items, too numerous to display in a significant manner via separate slices. For such occasions, the “Others” category allows for automatic aggregation of several data values into a single slice. Developers can set the OthersCategoryThreshold property to separate which values get their own slice, and which values will get rolled under “Others”.
• Styling & Themes– The look & feel of the Doughnut Chart is completely customizable, allowing you to style it to your app design and your brand. Simple properties are exposed to easily style the outlines and brush fill colors of the pie slices, allowing you to use solid colors as well as gradients. Alternatively you can use chart themes to give your pie charts and other charts a consistent and color-coordinated look and feel. Simply set the theme property to one of the predefined themes or create your own.

New Pie Chart Features

What’s the difference between a Pie Chart and a Doughnut Chart that only has one series of data? The hole. Period. Some customers have been requesting the ability to insert a hole in the pie chart. You asked, we delivered. You can now turn a Pie Chart into what visually looks like a single-series Doughnut Chart by setting the new InnerExtent property to a positive value. Or you can turn a single-series Doughnut Chart into a Pie Chart by setting the InnerExtent property to zero.

It’s mostly a cosmetic feature, but if you’ve been using Pie Charts all along in your applications and you’ve been missing the hole in them, you can now dig one in without replacing any controls.

New Data Chart Interaction Features

The Data Chart control supports new interactions you can activate when users hover over chart data series using the mouse or touch gestures. These hover interactions can display crosshairs or bar/column highlights that can snap to actual data points. You can also attach tooltips to these hover interactions and lock them on crosshairs or to axes. An image may be worth a thousand words, but you have to see this feature in action to truly appreciate it.

New High Density Scatter Series

A high density scatter series in the Data Chart control can be used to bind and show scatter data ranging from thousands to millions of data points without sacrificing performance. Developers can change the series resolution in order to adjust the performance level of rendering when dealing with massive amounts of data points in the chart. This control was made available as a CTP feature in release 12.1, and now ships as a final RTM feature in release 13.1.

Data Chart Performance Optimization

At Infragistics, we always strives to achieve better performance in our controls. The Data Chart is a real work horse capable of displaying millions of data points in real-time with refresh rates measured in a few milliseconds. When we do identify bottle necks or fringe scenarios where performance can be improved, we introduce new techniques to optimize performance. Release 13.1 of the Data Chart does feature improved performance compared to prior releases thanks to some of those optimization techniques.

New Simplified Treemap Tooltips

The Treemap control is a key component for advanced data visualization dashboards. It lets you show users the relative weighting of data points at more than one level, supporting strip, squarified and slice and dice algorithms. The sheer amount of data you can display in a Treemap can sometimes make it harder to read, and this is where tooltips come into play. Adding tooltips to our Treemap control was always supported but required a certain amount of custom application code. The new Treemap control in release 13.1 introduces the new TooltipStyle, TooltipContentTemplate and TooltipMemberPath properties to let developers display and customize tooltips with no effort at all.

New Syntax Editor Features

We first introduced the xamSyntaxEditor in v12.2, and since then it has been getting even more love. The XamSyntaxEditor is a highly customizable text editing control that provides syntax highlighting and editing behaviors much like the Visual Studio code editor. The XamSyntaxEditor is provided in both WPF and Silverlight versions with an API that is common across both platforms, enabling you to incorporate code editing capabilities into your cross platform applications. In this latest release, the xamSyntaxEditor received even more features to give your users more options for authoring their code documents.

Transact-SQL Language support

The xamSyntaxEditor has provided language support for C#, VB, and PlainText since its release. The xamSyntaxEditor now supports a subset of the T-SQL language to give visual cues, such as colorization, to the user on how the text is being interpreted so that comments, keywords, and language specific entities can be easily differentiated. With support for over 26 different statements, the xamSyntaxEditor can handle the most commonly used SQL statements.

Visible whitespace

Some users may wish to show hidden formatting symbols so that they can clearly see spaces, tabs, and other white space characters. With this latest release of the xamSyntaxEditor, you can now enable the visible whitespace property to have the editor visualize spaces, tabs, and word wrap indicators.

Current Line highlight

When editing and navigating a large document with a lot of text, it can sometime be difficult to keep track of the line you are editing. To help alleviate this issue, we introduced a new feature which allows you to provide a highlight for the current line that contains the caret. You can customize the highlight by modifying the visibility, background brush, and border brush.

Ruler Margin

Losing the current line you are editing is longer a problem when editing large documents with lots of text, but what about keeping track of the character position. It is still possible to lose track of the current character position of the caret. Now, by setting a single property, you can enable the new ruler margin to display a character position ruler at the top edge of each view, and highlight the current caret position. You can easily customize the color of the caret indicator to match the theme of your application.

WPF Ribbon gets the Backstage

Our WPF XamRibbon control received a highly request feature in 13.1 that the Silverlight brother has had for a while now. The XamRibbon now ships with the ever popular Microsoft Office Application Menu 2010, aka “Backstage”. If you have ever used any Microsoft Office product, then you already know what the backstage menu is. If not, let me explain it to you. The xamRibbon contains buttons, menu items, and other tools that allow you to perform actions on a view. While the backstage menu lets you have menu items and tools to do something to a view. The backstage can be used to display controls, and invoke actions on a view like save and print. The backstage can also provide a list of recent documents, access to application options, and actions to exit an application.

XamMenu/XamContextMenu MVVM support

Do you use the MVVM (Model-View-ViewModel) design pattern to develop your applications? Have you been waiting patiently while we added ICommand support to our xamMenu and xamContextMenu? Well, your wait is over! We have improved our xamMenu and xamContextMenu to support the ICommand interface. This allows a developer to data bind a command that is defined in a ViewModel to the Command property that has been added to the xamMenu and xamContentMenu items. As you would expect, we also provide a CommandParameter property for you to pass parameters to your command implementation.

XamGantt save project to XML

One of the coolest features of our xamGantt control is the ability to load a Microsoft Project XML file directly into the xamGantt control. Now this feature becomes even more powerful with the added ability to save the xamGantt project data (i.e. the calendars, resources and tasks) to an xml file that follows the MS Project 2010 xml file format. This does not assume round tripping a Microsoft Project XML file. For example; if you used the LoadFromProjectXml method to load a Microsoft Project XML file into the xamGantt, made changes to the project, and then saved the project data using the new SaveAsProjectXml method, the original file would be overwritten and some information could potentially be lost/changed based on the things we support (e.g. we don't support task types, per task/resource calendars, wbs outline codes, empty rows, timephase data, etc.). If you are creating your data and saving your data from within the xamGantt control exclusively, then you have no worries about potentially losing data during the translation process.

Preview of the New Radial Gauge Control

Infragistics is introducing a new Radial Gauge control available on multiple platforms, including WPF, Silverlight, HTML5 & jQuery (packaged with Ignite UI controls) and iOS (packaged with NucliOS controls). The xamRadialGauge is a preview of the XAML version of this new control available to WPF and Silverlight developers, and is compatible with the Ignite UI and NucliOS versions of the Radial Gauge, both visually and in features. This new Radial Gauge is powerful yet simple to use. Just drop it on your page and you’re ready to go with the default look & feel. Simply tweak the configuration options to your liking to meet whatever custom look you desire in your application.

Key Features

• Fully Configurable Radial Scale – The Radial Gauge control lets you control the Start and End positions of the scale, major and minor tick marks, labels, color ranges and sweep direction. You can create full 360 degree scales, or half circular gauges with 180 degree scales, 90 degrees, 45 degrees or any custom value you want.
• Fully Configurable Needle – The Radial Gauge control lets you control various attributes of the needle, including the needle color, length, point, base, and cap. The following needle shapes are built-in:
  • None
  • Rectangle
  • Triangle
  • Needle
  • Trapezoid
  • Rectangle With Bulb
  • Triangle With Bulb
  • Needle With Bulb
  • Trapezoid With Bulb
• Fully Configurable Backing – The Radial Gauge backing can be configured to display any custom image. You can also control the transparency level of the backing, colors, shape around the gauge edges (fitted or circular), oversweep and corner radius.
• Motion Framework Animations Support – The Radial Gauge control supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range and more. You can control the speed of the animations by setting the desired Transition Duration.

Compatibility Notes

• The new xamRadialGauge is currently introduced as a preview control (CTP) and will eventually replace the existing xamRadialGauge that was already available in release 12.2 and prior releases.
• The current xamRadialGauge is still available in release 13.1. This current xamRadialGauge will eventually be deprecated in an upcoming release and replaced with this new one.
• The new xamRadialGauge CTP API is NOT compatible with the current xamRadialGauge API.

Release 13.1 Looks Awesome! When Can I Get it?

There’s more coming since I can’t cover every single new feature, there’s too many of them. As you an see by now, release 13.1 of NetAdvantage for WPF and NetAdvantage for Silverlight is filled to the brim with new controls and new features. Whether you’re a corporate developer building intranet applications for your workforce, an ISV developer writing software for consumers worldwide, or an independent developer looking to create the next big thing, we have the controls to make you more productive and take your applications to the next level.

If you are not using our WPF controls yet, remember that a free evaluation download is only a click away (click here for the Silverlight download).

If you can’t wait to get your hands on the XAML 13.1 controls outlined here, drop me an email me at activenick@infragistics.com or my fellow XAML LOB Product Manager Brian Lagunas at blagunas@infragistics.com, tell us what control and/or feature you really want to work with now and we just may give you early access.

If you have ideas about new features we should bring to our controls, important issues we need to fix or even brand new controls you’d like us to introduce, please let us know. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @ActiveNick, and Brian Lagunas at @brianlagunas. Also make sure to connect with our various teams via our Community Forms where you can interact with Infragistics engineers and also other customers.

Lastly, when you do build something cool with our controls, please make sure to let us know, we always love to hear from you.

Are you an iOS developer? Maybe you’re starting to learn how to build apps for the iPhone or iPad and you want some help? Maybe you’ve already published some apps and you want to take your current and future projects to the next level with a killer UI and advanced visualizations? Tired of undocumented, unsupported, feature-poor, buggy Open Source Cocoa controls?

NucliOS is your answer.

Whether you build your iOS apps in Objective C with Xcode or AppCode, or using C# with Xamarin.iOS (aka MonoTouch), NucliOS has the native iOS controls every Apple developer needs. Coming this April in just a few short weeks, NucliOS 13.1 will bring you more controls, more features, more productivity.

Why Does Infragistics Care About iOS Development?

iOS was initially introduced as a platform for consumer devices. As more and more businesses are adopting Bring Your Own Device programs, iPhones and iPads are starting to dominate within the enterprise. With this shift comes a need for corporate applications designed & built for iPhones and especially iPads.

I get to see this shift in technical interest first hand at conferences. Last Fall I started doing a new conference talk titled “iOS Development Survival Guide for the .NET Guy (or Gal)” at HDC in Omaha. The talk was an immediate hit. .NET developers are hungry for iOS knowledge. It got scheduled again for Prairie DevCon in Regina, VSLive in Orlando, Dallas Day of .NET, and I’m doing it again this week at VSLive in Vegas, and in May at Prairie DevCon in Winnipeg and VSLive in Chicago. You can even catch the webinar version I recently recorded here.

The Microsoft .NET ecosystem is rich in partners, component vendors and ISVs. The Apple world? Not so much. It’s a world dominated by Open Source developers. A world where the enterprise can’t get the premium components, full documentation, quick start samples and top-notch developer support they expect and need. This is where Infragistics comes into play.

For over two decades, enterprise developers have turned to Infragistics controls for help in building the best in state of the art user interfaces for the Windows platforms and the Web. For the first time in its history, Infragistics introduced in 2012 a suite of native iOS controls named NucliOS, continuing our tradition of excellence and bringing over 20 years of UI controls design experience to Apple iOS developers.

Our controls are designed and engineered with versatility, extensibility, scalability and forward-compatibility in mind. They are fully supported, fully documented, and ship with dozens of samples to get developers up to speed quickly.

The initial release of NucliOS was just a first step for Infragistics in a long journey within the Apple world. Infragistics is committed to the iOS platform, and Apple developers can expect new features and controls from us in 2013 and beyond. As iPhones and iPads keep evolving, users expect richer experiences. The iTunes App Store has more than 750,000 apps and the competition is fierce. Developers need to push the envelope. NucliOS helps developers create more advanced applications in less time, increasing their productivity and lowering their costs and time to market.

What’s New for iOS Developers in NucliOS 13.1?

NucliOS provides the core controls developers need to build high performance, highly interactive iPad & iPhone applications with stunning visuals. The initial NucliOS 2012 release included the two most requested types of controls regardless of developer platform:

• an advanced Data & Layout Grid
• a set of powerful & versatile Data Charts

In this new 13.1 release, Infragistics is introducing even more new features in these already powerful controls.

Our iOS Grid now supports:

• Fixed Columns
• Column Resizing & Reordering
• Inserting & Deleting Columns
• Infinite Scrolling
• Filtering Attributes
• New Slide Row Options
• Better Theming

Our iOS Data Charts control now supports 17 additional chart types, for a total of 39 chart types and more features, striving for full parity with its XAML cousin.

Release 13.1 of NucliOS also sees the introduction of brand new controls, including:

• a new Pie Chart control you can easily bind to your data
• a powerful and fully configurable light weight high performance Radial Gauge control
• the new Rich-Text Label, allowing you to easily display fully formatted text in your apps

We’re also extending the reach of NucliOS on the international scene, with a new localized version for the Japanese market. Japanese iOS developers now benefit from fully translated & localized NucliOS product, samples, help and documentation.

New iOS Control – Pie Chart

Pie Charts are a staple of virtually every report and data visualization dashboard. Thanks to the new Pie Chart control for iOS, you can now easily add simple or exploded pie charts in your iPad and iPhone applications. Connect the Pie Chart to your data with the Data Class Helper, set a customizable threshold for inclusion in the "Other" category, and configure text labels and images that can be displayed within or outside the pie in a manner that avoids overlapping. Users can tap or drill down to view underlying data, explode out a section of the pie, and get information via tooltips using touch gestures.

Key Pie Chart Features

• Pie Chart Data Binding & Data Source Helper – To get data into the Pie Chart, we’ve implemented a Helper class that will make it easier to bind data, similarly to the Data Chart & Grid Data Source Helper classes. Developers provide an interface that implements a protocol that the view knows about, and the protocol methods provide the information that the IG Pie Chart needs to display data.
• Slice Selection & Slice Explosion – Selected slices use selectedBrush and selectedOutline properties to color the pie slice with distinct colors. Exploded slices are disconnected and drawn at a distance from the origin. This distance is controlled via the explodedRadius property. Slices can be selected or exploded either programmatically or using touch gestures.
• Touch Gestures – The NucliOS Pie Chart is optimized for touch interactions on iOS devices like the iPhone and the iPad. The Pie Chart supports tap, long press (aka “tap & hold”) and rotate gestures.
• “Others” Category – The underlying data for any Pie Chart can often contains small value items, too numerous to display in a significant manner via separate pie slices. For such occasions, the “Others” category allows for automatic aggregation of several data values into a single slice. Use the othersCategoryThreshold to separate which values get their own slice, and which values will get rolled under “Others”.
• Styling & Themes – The look & feel of the NucliOS Pie Chart is completely customizable, allowing you to style it to your app design and your brand. Simple properties are exposed to easily style the outlines and brush fill colors of the pie slices, allowing you to use solid colors as well as gradients. Alternatively you can use chart themes to give your pie charts and other charts a consistent and color-coordinated look and feel. Simply set the theme property to one of the predefined themes or create your own.

New iOS Control – Radial Gauge

Make your data visualizations and dashboards more engaging with radial gauges for iOS that show your key performance indicators (KPI) with rich style and interactivity. Create highly configurable, round or semi-round dials and gauges for your information dashboard with the look and feel of a clock, industrial control panel, automotive dashboard or aircraft cockpit. The NucliOS Radial Gauge is powerful yet simple to use. Just drop it in your view and you’re ready to go with the default look & feel. Simply tweak the configuration options to meet whatever custom look you desire in your application.

The iOS Radial Gauge is compatible with the Ignite UI (i.e. HTML5 & jQuery) and XAML (i.e. WPF & Silverlight) versions of the same Radial Gauge, both visually and in features, that Infragistics is introducing on multiple platforms, helping you create a consistent look & feel across platforms.

Key iOS Radial Gauge Features

• Fully Configurable Radial Scale– The Radial Gauge control lets you control the Start and End positions of the scale, major and minor tick marks, labels, color ranges and sweep direction. You can create full 360 degree scales, or half circular gauges with 180 degree scales, 90 degrees, 45 degrees or any custom value you want.
• Fully Configurable Needle– The Radial Gauge control lets you control various attributes of the needle, including the needle color, length, point, base, and cap. These easy configuration options allow you to create over 50 needle types without the need for any external graphics. The following needle shapes are built-in:
  • None
  • Rectangle
  • Triangle
  • Needle
  • Trapezoid
  • Rectangle With Bulb
  • Triangle With Bulb
  • Needle With Bulb
  • Trapezoid With Bulb

• Fully Configurable Backing– The Radial Gauge backing can be configured to display any custom image. You can also control the transparency level of the backing, colors, shape around the gauge edges (fitted or circular), oversweep and corner radius.
• Motion Framework Animations Support– The Radial Gauge control supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range and more. You can control the speed of the animations by setting the desired Transition Duration.

New iOS Control – Rich-Text Label

The IGLabel is a Rich Text label that works similarly to the generic UILabel and applies styles to text in a similar fashion that is done when using attributed strings. It is based on Core Text to boost performance and functionality over the generic UILabel.

Key Rich-Text Label Features

• Rich Text Attributes– Attributes allow you to adjust text characteristics within the IGLabel, including the font type, bold, italic, and underline characters, text color, kern spacing, text stroke color and width, interaction of text through tap, and more.
• Paragraph and Text Styling - Paragraph and text styling options allow the developer to customize the paragraph formatting and layout of the label’s content. This includes word wrapping, clipping, truncating with automatic insertion of ellipsis glyphs, alignment to the left, center, right or justified, margins, paragraph spacing, indentation and more.
• Overflow Indicator - The overflow indicator is used to display a custom view in a preset location for when the text overflows the label’s bounds. The most common scenario is to add an overflow indicator at the bottom right of the label when the text is too large to be displayed in the allotted space in the view.
• Text Variables– Text variables are used to allow for dynamic text using custom variables to automatically fill in the necessary values when a label is updated.
• RegEx– Use Regular Expressions to identify and style text within the IGLabel.

New Features – GridView

The NucliOS Grid is more than your typical tabular grid: it’s a powerful control that can be used either as a data-focused grid for both consumer and business applications, or as a versatile layout tool that allows developers to create compelling user experiences on the iPhone, but especially on the iPad. With this control, developers get the ability to style & template the grid to look like almost anything.

The NucliOS Grid can also be used as a single column list when other important elements need to be shown on the iPad, similarly to the native iOS Mail client, or when the screen real estate is precious, such as is the case in iPhone applications.

Release 13.1 of NucliOS builds on this strong foundation and adds even more features to our native iOS Grid, making it the most ubiquitous UI control for all iPad and iPhone applications.

New GridView Features

• Slide Row Options– The NucliOS grid now supports new built-in behaviors to respond to a horizontal sliding gesture (i.e. swipe left / right). Simply set the swipeRowAction property to one of the following options:
  • Swipe left or right and a Delete button is displayed (already available in release 2012)
  • Swipe left or right and a row will slide to the right
  • Swipe left or right and a row will slide to the left
  • Swipe left and the row will slide to the left, swipe right and the row will slide to the right
  • No action

• Column Reordering – Column reordering allows users to rearrange the position of visible columns within their data source helper, by using simple drag and drop techniques. It is also possible to trigger a column move programmatically, without any manual dragging gesture.
• Inserting / Deleting Columns – Inserting and deleting columns is very similar to inserting and deleting rows and cells. Methods are now provided for inserting and deleting normal columns using a data source helper.
• Fixed Columns – The NucliOS Grid control recognizes two distinct column types, normal and fixed. A normal column is any column that is not pinned in place, while the fixed column feature allow for one or more columns to be frozen / pinned to stay in view on either the left or right side of the grid, while allowing horizontal scrolling of the other columns. New methods are available to specify how many columns to freeze on the left or right of the grid.
• Column Resizing – The grid now supports resizing a column by setting the columnResizing property, thus allowing column resizing directly in the UI. You can also toggle column resizing on and off.
• Infinite Scrolling – Infinite scrolling allows the grid to scroll the contents of the grid continuously, without the need to scroll back to the top or left most cell. Infinite scrolling is a popular UI paradigm that allows for a more fluid navigation. You can choose to enable infinite scrolling horizontally, vertically, both or none at all.

• Filtering Attributes – Filter attributes allow you to apply a customized visual appearance to text matching a filtered text string. This makes it easy for users to find specific keywords or phrases using highlights within a grid that contains a lot of text data, just like you would with a colored marker on paper. You can control the color of the text highlight to insure that the filtered text stands out regardless of your app or brand colors.
• Grid Theming – From photo albums and slide shows to movie collections and sales reports, the NucliOS grid can be styled to look like almost anything. As an iOS developer, you benefit from complete styling flexibility within the grid, allowing you to emulate first party iOS apps, match your own brand, or design any custom look & feel desired. Theming is now even easier. New to this release, you can create your styles in one place and toggle between multiple styles very easily. You can create your own themes, which consist of multiple properties that control various styling attributes such as font, background color, text color and more.

New Features – ChartView

The initial release of NucliOS introduced a powerful iOS control that lets you render charts with hundreds of thousands of data points that are capable of millisecond updates, sparing nothing to achieve blazing speed. Support for the Motion Framework™ within the Data Chart control allows developers to build highly engaging visualizations and provide smooth playback of changes in data over time, giving life to your data through fluid animations.

New Chart Series

Release 13.1 of NucliOS introduces 17 new chart types in the ChartView control, enabling you to easily implement heavy-duty data visualization and analysis on large volumes of data with high performance in iPad and iPhone applications.

The NucliOS ChartView control now supports a total of 39 chart types, including the following new chart series introduced in release 13.1:

• Stacked Chart Category Series– ChartView now supports a whole range of stacked series for every day scenarios.
  • Stacked Area Series
  • Stacked Bar Series
  • Stacked Column Series
  • Stacked Line Series
  • Stacked Spline Area Series
  • Stacked Spline Series
  • Stacked 100 Area Series
  • Stacked 100 Bar Series
  • Stacked 100 Column Series
  • Stacked 100 Line Series
  • Stacked 100 Spline Area Series
  • Stacked 100 Spline Series

• Scientific Charts– From wind patterns to performance metrics, Polar & Radial series can expose new insights in many scientific data sets. The new scientific charts supported include:
  • Polar Spline Area Series
  • Polar Spline Series
  • Radial Area Series

• Chart Financial Series & Financial Indicators– Financial charting scenarios were already supported for both Candlestick and OHLC bar charts. Release 13.1 now introduces 29 new financial indicators, including:
  • Bollinger Band Overlay
  • Bollinger Band Width Indicator
  • Chaikin Oscillator Indicator
  • Chaikin Volatility Indicator
  • Commodity Channel Index Indicator
  • Detrended Price Oscillator Indicator
  • Ease Of Movement Indicator
  • Fast Stochastic Oscillator Indicator
  • Force Index Indicator
  • Full Stochastic Oscillator Indicator
  • Market Facilitation Index Indicator
  • Mass Index Indicator
  • Median Price Indicator
  • Money Flow Index Indicator
  • Moving Average Convergence Divergence Indicator
  • Negative Volume Index Indicator
  • On Balance Volume Indicator
  • Percentage Price Oscillator Indicator
  • Percentage Volume Oscillator Indicator
  • Positive Volume Index Indicator
  • Price Channel Overlay
  • Rate of Change and Momentum Indicator
  • Relative Strength Index Indicator
  • Slow Stochastic Oscillator Indicator
  • Standard Deviation Indicator
  • StochRSI Indicator
  • TRIX Indicator
  • Ultimate Oscillator Indicator
  • Weighted Close Indicator
  • Williams Percent Range Indicator

• Chart Scatter Series: Also known as Scatter Plots or scattergraph, you can benefit from this type of mathematical diagram in your iOS apps using Cartesian coordinates to display values for two variables for a set of data. You can also enable trend lines to facilitate data analysis. The new scatter types supported include:
  • Scatter Line Series
  • Scatter Spline Series

The iOS data chart control is designed for modularity using chart series. Multiple chart series are supported to create composite charts for better data comparisons on the same surface.

New Chart Features

Value Overlay – A Value Overlay uses the value property to bind a numeric value to display as a line superimposed over other types of series in order to highlight important values such as a data set’s mean, median, mode etc…. The Value Overlay uses either the horizontal or the vertical axis, as a reference, when bound to an IGNumericXAxis and IGNumericYAxis respectively, as a line segment emanating from the center of the chart when bound to an IGNumericAngleAxis, or a circle when bound to IGNumericRadiusAxis.

Support for Gradients – Enhance the look of all your charts thanks to added support for gradients. Gradients are exposed by a new brush type called IGGradientBrush, and we’re also introducing new themes specifically showcasing the use of gradients. Take a look at the various screenshots in this post to see the gradient support across many of our charts types.

Xamarin Support for iOS Development in C#

Objective C is the default language for iOS development. It’s been used to developer hundreds of thousands of applications for the iPhone and iPad. However, not all developers are ready to learn Objective C. We all have to juggle multiple technologies, languages and frameworks in our toolset. It’s perfectly normal to look for opportunities to reuse existing skills when jumping into a new environment.

iOS developers can use NucliOS controls in native iOS projects built with Objective C and Xcode, and we equally provide bindings to use all our controls within C# projects built with Xamarin.iOS (formerly known as MonoTouch), a product from Infragistics partner Xamarin. Xamarin’s products let developers write their apps entirely in C# and share your code on iOS, Android, Windows and Mac, using either Microsoft Visual Studio or Xamarin’s own IDE – Xamarin Studio.

Release 13.1 of NucliOS includes final Xamarin.iOS bindings for all five iOS controls, complete with API documentation, allowing you to build native iOS applications using C#.

Learning iOS Development and NucliOS

if you’re new to iOS development and/or NucliOS, here are a few quick references to help you get started:

	iOS Development Survival Guide for the .NET Guy (or Gal) Webinar by Nick Landry
	Going Native: How to Develop Native iOS Applications with NucliOS 2012 Webinar by Nick Landry and Brent Schooley
	Creating iOS Applications using C# with Xamarin.iOS Webinar by Brent Schooley
	Getting Started using NUCLiOS with MonoTouch Part 1: IGChartView Technical Blog Post by Brent Schooley
	Code by SteveZ Technical Blog series by Steve Zaharuk, NucliOS Lead Product Architect, covering topics like: - Moving from C# to Objective-C - Creating a Bookshelf for your iOS App - Creating a Netflix Style iOS Grid - Using TFS on a Mac - Creating Nightly Builds of Your iOS Projects from TFS - Creating Your own iOS Framework - and much more!

Let Us Know About Your Apps

NucliOS 13.1 is an exciting release. Our grid control got better with even more data manipulation and layout features. We already had the most powerful & versatile charts on iOS, and we made them better, with more chart types, more features, covering more scenarios, regardless of your industry or app consumer target. Not stopping there, we introduced new controls with the Pie Chart, Radial Gauges and Rich-Text Label.

So when can you get this awesome release? Soon! NucliOS 13.1 is scheduled to be release in mind-April in just a few weeks. If you can’t wait to get your hands on our new iOS controls detailed above, drop me an email me at activenick@infragistics.com, tell me what control and/or feature you really want to work with now and I just may give you early access.

NucliOS is truly THE PREMIER suite of native iOS controls for professional app developers, enterprise developers, indie developers, enthusiasts and weekend warriors. We already started work on our next release coming out later this year. Expect more features in existing controls, more chart types, entirely new controls, more samples, more of everything. If there are specific controls you'd like us to prioritize, be sure to let us know on the NUCLiOS forums.

Get started today! Download the NUCLiOS trial on your Mac, fire up Xcode and take your iOS apps to the next level.  When you end up publishing cool new apps based on NucliOS, make sure to let us know, we would love to showcase your work on our website.

Take our controls for a spin on your iPhone or iPad and try the NUCLiOS Samples Browser by downloading it from the Apple App Store here. This free browser app currently showcases our grid and charts initially released in October 2012. We’ll be publishing an updated version at release time in mid-April so you can play with all the new controls and features.

We value your feedback. Make sure to post your comments, feedback and questions on the NUCLiOS forums. You can also follow @infragistics on Twitter. As the product manager for NUCLiOS, you can reach me at activenick@infragistics .com or on Twitter via @ActiveNick.

When we are mobile, it is often the case that we work with only a subset of the SharePoint lists that are available to us.  Two methods may be employed to hide unused Lists and Subsites.  The first method requires administrative privileges and is described in the following article: http://www.infragistics.com/community/blogs/anand_raja/archive/2012/04/03/how-to-disable-the-viewing-of-specific-lists-in-shareplus.aspx . 

This online video describes an alternative method that can be used by any SharePlus user. 

In every UX Design project, the most important part is the requirements gathering process. This is an overview of some of the possible methods of requirements gathering.

Good design will take into consideration all business, user and functional requirements and even sometimes inform new functionality & generate new requirements, based on user comments and feedback. Without watertight requirements specification to work from, much of the design is left to assumptions and subjectivity. Requirements put a project on track & provide a basis for the design. A robust design always ties back to its requirements at every step of the design process.

Although there are many ways to translate project requirements, Use cases, User Stories and Scenarios are the most frequently used methods to capture them. Some elaborate projects may have a comprehensive Business Requirements Document (BRD), which forms the absolute basis for all deliverables for that project.

I will get a bit deeper into what each of this is and in which context each one is used…

What is a Use Case ?

Use Cases are a great way to elicit, analyze, and model interaction requirements. Also, they help generate related requirements for interfaces, data, process, and business rules. Use cases describe functionality that explains how users interact with a system. They are written as text and divided into sections. Use cases follow a format such as this one :

Name: Name of the Use Case

Description: Description of the Use Case

Primary Actor: The main user this is targeted at

Precondition: What must already exist for this use case to begin

Trigger: What starts this use case

Basic Flow: The ideal flow of events

Alternate Flow: Other possible flows that may occur

Post Condition: The result of the flow that was carried out.

There could be one or multiple use cases per system function and one use case may refer to another use case establishing a relationship. Analyzing them as a whole - for example, through a Use case diagram or flow chart that shows their relationships provides a solid foundation of valid requirements to start the design process with.

After: Matt Terski  Master the Use Case Include Relationship

What is a User Story ?

Many development teams who are making the shift from Waterfall to Agile, like to use User Stories. While a use case is highly structured and enumerates the steps, the User Story sets the stage by stating the need. User stories are typically worded in short sentences and in an informal language, such as this : “As a teacher, I would like to upload study materials to the school portal, so that my student can access and work off them”.

After: Derek Huether  What is a Qualified User Story?

User Stories are great as an activity in collecting and prioritizing the high level features. They are skeletal in nature and need more detail built in. Yet learning about this initial task from the user is a simple way of trying to get all of their needs identified and prioritized. These User Stories will then morph themselves into the business requirements and use cases.

What is a Scenario ?

A scenario is a narrative description of a person’s interaction with a system. These are typically linked to a User Persona that represents a group of users who exhibit similar behavioral patterns in their purchasing decisions, use of technology or products, lifestyle choices etc. When scenarios are built around a target group of users, it helps focus design efforts on the user’s needs, which are distinct from functional or business requirements. Scenarios are similar to user stories as they both are written in an informal, non-technical language. Scenarios are typically longer and provide additional contextual information. The level of detail featured by scenarios is comparable to use cases, yet scenarios lack the formal structure that use cases have. This can make it cumbersome to resolve a scenario into its relevant parts. Unlike use cases, however, scenarios can be both authored and understood by people who do not have any technical background.

After: Eric Schaffer  UI Design Newsletter , HFI

The following are examples of all three ways describing a sales manager’s day to day activities:

Scenario

John wants to manage his sales team better. For that, he needs to see a list of people on his team. He wants to search by sales person name or geo location or by customer.He finds Adam through his search. He wants to see Adam’s customers and his sales records.

User Story

As a Sales Manager, I would like to login and look up a list of my team members. I would like a search option to look up my team members and sales records associated with it.

Use Case

All these techniques for writing requirements are ways to consolidate and present them in an effective manner and do not dictate any specific way to include them in the design. For example, the look up list in this use case can be addressed in the UI as a drop-down menu or a list-box or a grid which is up to the designer to decide…that said, requirements only ask for a set of abilities that a user must have, to carry out a task.

Personally, I like to use a combination of use cases and scenarios for my designs. There are exceptions to this where I have had to work with verbal briefings from clients, who either don’t have the expertise or the time & interest to generate elaborate requirements for a project. And then there are situations when clients don’t always know their detailed requirements. Not a great project start for designers but …the best way to help such clients, is to guide them through the design process, use brainstorming to generate ideas, and then translate those ideas into concrete requirements, along the way !

I spent the last week of my Brent Goes South for the Winter Tour traveling around the state of Florida.  Armed with nothing but my laptop bag and a black 2013 Camaro it was my mission to spread the word of Windows 8 design to the user groups of three Florida areas: Tampa, Naples, and Miami.  Since I gave the same talk at each of these user groups I figured one post would suffice for wrapping up the tour.

The Ride

Hard to complain, so I won’t.

Tampa Win Dev User Group

When I was in Key West for the Southern Most User Group, I met Brian Kassay who tipped me off to the Tampa Win Dev User Group.  This group, hosted at the AgileThought Tampa office, was a very engaging group that asked a lot of insightful questions.  One of the things we discussed was the reel-to-reel tape deck replica in Apple’s Podcasts app when talking about skeuomorphism.  I regret to inform you that Apple released an update to this application that removed the tape deck.  I know you will all be thoroughly disappointed.  When we weren’t talking about Apple, we were talking about designing for Windows 8.  I would highly recommend this group to Windows developers living in the Tampa area.  Congrats to Kelvin McDaniel for winning the book giveaway at this event.

Southwest FL User Group

I met John Dunagan last year when my boss asked me if I could go to the Southwest FL Code Camp.  I had so much fun there with John and my family that I really couldn’t wait to head back to Naples to speak at his user group.  Due to changing the schedule and a few personal conflicts, the group was smaller than usual.  However, a small group is sometimes a great thing.  I got the opportunity to try a few things different with my presentation that I wouldn’t have tried with a larger group.  If nothing else, it was a great change of pace.  Definitely check out the SW FL .NET Developers Group if you are in the Naples, FL area.

dotNet Miami

Picture this: a guy on a Mac presenting in a place called Planet Linux Caffe talking about Windows 8 design.  Bizarre right?  Well, that was exactly what went down for dotNet Miami’s March meeting.  Richie Rump runs a great group down in Miami and we had a lot of fun with this presentation.  I like the feel of having a user group meeting in a coffee shop.  I think more coffee shops should have setups for this kind of thing.  What was great about this particular venue is it was the perfect spot for a photo op for Brian Lagunas’ user group photo competition.  Armed with upside-down Linux magazines, this group tried to look excited (with mixed results).

Summary

Spending almost a week and a half away from the northeast in March by escaping to Florida is something I’d recommend to anyone.  But, while you’re there you should definitely check out the developer communities you will find there.  No matter where you are in the state there are developers just like you that would be dying to discuss the latest trends and tech over a beer or coffee. 

Contact

If you have any questions or comments, please comment below or find me on Twitter @brentschooley.  You can also email me at bschooley@infragistics.com.

Yesterday - 26 March 2013 was held the final of Bulgarian Microsoft Imagine Cup 2013.

For this competition  were registered 25 teams. Only 17 teams reached the final round in 3 categories:

• Innovations
• World Citizenship
• Games

One of those teams was composed of Infragistics guys who still are students:

• Nikolay Archangelov
• Deyan Kamburov
• Martin Stoev
• Damyan Petev

Their mentor is Mihail Trifonov who also works for Infragistics

Infragistics Imagine Cup Team: Nikolay, Martin, Deyan and Damyan

The team mentor: Mihail Trifonov

Drive Mate Project

Infragistics Imagine Cup Team presented the project “Drive Mate”.

Drive Mate is an innovative social app that encourages drivers to drive more economically. This project requires a cheap hardware device and Windows Phone 8 device. The system communicates with the rim of the car through OBD protocol. Drive M8 ( drive Mate) includes also a social part – drivers will be encouraged to participate in a healthy competition – if they drive more economically they will win more points and could receive discounts from different sponsors: car washes, gas stations, car services, auto parts warehouses etc.

More information about Drive M8 project you could find from the video and from the presentation (link to presentation is available here)

Click on this image to watch the video:

Bulgarian Imagine Cup Final:

In the first round of finals the team won in the category "World Citizenship"

In the second round there was direct elimination was among the winners in the three categories and the champion team will present Bulgaria on Microsoft Imagine Cup World Finals in St. Petersburg, Russia.

Infragistics guys demonstrated economic and environmental benefits of their project and won first place.

Infragistics Imagine Cup team is Bulgarian absolute champion for all categories!!! They will present Bulgaria in St. Petersburg!!! Congratulations!!!

The Imagine Cup 2013 Worldwide Finals will be held in St. Petersburg, Russia 8-11 July 2013.

Expecting World Citizenship Winner Award:

Final presentation:

Awards ceremony:

Drive Mate presentation is available here.

As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch onFacebook,Google+andLinkedIn!

The Ignite UI igTree is a powerful client-side jQuery UI widget which has a ton of great features baked right into the control. One of the most valuable features of any tree is its ability to support load-on-demand from a remote server. On a recent project I used the tree to read through a series of XML files which represented many megabytes of data – a remote load-on-demand configuration was must in this situation.

In this example I strip away all the complexities of the file system and server and just isolate the tree to demonstrate how to configure the control for a remote load-on-demand scenario. Along the way I’ll also demonstrate how to use a few very handy JavaScript and JSON mocking libraries to help isolate work with the tree.

The following image shows how the tree works configured for load-on-demand where each node click initiates a request for its children, the node is auto-expanded and selected and the node’s URL data member is shown in the box above the tree.

Note: The URLs used in this example are generated lorem ipsum text. The particulars of how the sample data is generated is detaild in the section Mocking Ajax Requests and Data.

Code Download

If you would like to work directly with the source files used in this example, you can download them here.

Getting Started

The first step is to create a self-executing anonymous function which then sets up the Ignite UI loader. Inside the function, the loader is configured to have known locations for the dependent JavaScript and CSS files. As represented by the comments, when the ready event fires the code to configure the tree is run. The setup for the tree is detailed in the next section.

(function () {

    $.ig.loader({
        scriptPath: 'http://localhost/js/',
        cssPath: 'http://localhost/css/',
        resources: 'igTree',
        ready: function () {

	   // add rest of code here

        }
    });
})();

Setting Up the Tree

Now that the page is ready and all the scripts and styles are loaded, the next step is to set up the tree control. The tree is instantiated by selecting the root element via the #toc selector and calling the igTree function. Next, there are a handful of options required to set the tree in a load-on-demand state. The singleBranchExpanded option tells the tree to only allow one branch of the tree to remain expanded at one time (this feature isn’t load-on-demand specific, but does make the tree easier to use for the user). The dataSourceUrl option tells the tree which URL to use to request data items in the tree. The value of remoteUrl the dataSourceType option designates to the tree that data is coming from a remote source. The loadOnDemand option tells the tree that child items in the tree will only be bound to the tree once a request for the child items is made.

The comments represent a place where the event handlers will go which allow the grid to load data when a node is expanded. Finally, incoming data is bound to the tree based on the mappings defined by the bindings object literal found at the end of the control definition.

var tree = $('#toc').igTree({
    singleBranchExpand: true,
    dataSourceUrl: '/api/items',
    dataSourceType: 'remoteUrl',
    loadOnDemand: true,

    // Add event handlers here

    bindings: {
        textKey: 'title',
        navigateUrlKey: 'url',
        childDataProperty: 'items',
        valueKey: 'url'
    }
});

Event Handlers

The previous code configured the tree for load-on-demand, but the implementation found in the event handlers is what gives the tree the desired behavior.

The nodePopulating event fires when the tree is attempting to load the child nodes of a selected node. The implementation of this event handler sets the dataSourceUrl to a location specific for the selected node each time a new node is being populated. (When the tree is configured for load-on-demand, nodes are only populated when a node is being expanded.)

    nodePopulating: function (event, ui) {
        tree.igTree('option', 'dataSourceUrl', '/api/items?id=' + ui.data.id);
        return true;
    }

The next event is the nodeClick event. The nodeClick event is handled in order to add behavior to automatically expand and select the clicked node. The first line, e.preventDefault(), is needed in order to stop the browser from attempting to navigate away from the page. Next, the tree is given commands to toggle the clicked node (where it will open if it’s closed, and vice versa) and then select it.

The call to the clicked function simply takes the current ui.node.data.url value and prints it on the screen. The last operation is to return false, again to make sure that the control stops any further processing.

    nodeClick: function (e, ui) {
        e.preventDefault();
        tree.igTree('toggle', ui.node.element);
        tree.igTree('select', ui.node.element);
        clicked(ui.node.data.url);
        return false;
    }

Note: Since the settings are being passed to the tree as an object literal, the event functions must be followed by a comma after the closing brace to the function. The full code listing at the bottom of this post shows each of the event handlers in context of the object literal.

Once the tree is set up with these options and the event handlers are implemented, the tree is fully configured for remote load-on-demand.

Mocking Ajax Requests and Data

While the tree is in working order, providing data to the tree can get involved if you need to set up a server side counterpart to handle serving data to the client. A technique I used in this example was to mock the JSON data that is provided to the tree. This is made possible by leveraging two JavaScript libraries. The first library is Mockjax which intercepts Ajax requests made by the tree and allows them to be fulfilled locally - all the while returning an identical response a server would send back to the tree.

The second library I used was mockJSON which is an engine responsible for generating mock data in JSON format based on some rules you provide. The nice thing that once the mocking is setup, all the mocking logic is easily separated from the standard executing code. In this example, moving all the mocking code into a separate file is trivial. When you are ready to remove mocked requests and data, all you have to do is simply remove the reference to the file and the tree will then go back to contacting the server just like normal using the URLs configured in the dataSourceUrl option.

Full Code Listing: Load-on-Demand Demo (index.html)

(function () {

    $.ig.loader({
        scriptPath: 'http://localhost/js/',
        cssPath: 'http://localhost/css/',
        resources: 'igTree',
        ready: function () {

            var tree = $('#toc').igTree({
                singleBranchExpand: true,
                dataSourceUrl: '/api/items',
                dataSourceType: 'remoteUrl',
                loadOnDemand: true,

                nodePopulating: function (event, ui) {
                    tree.igTree('option', 'dataSourceUrl', '/api/items?id=' + ui.data.id);
                    return true;
                },

                nodeClick: function (e, ui) {
                    e.preventDefault();
                    tree.igTree('toggle', ui.node.element);
                    tree.igTree('select', ui.node.element);
                    clicked(ui.node.data.url);
                    return false;
                },

                bindings: {
                    textKey: 'title',
                    navigateUrlKey: 'url',
                    childDataProperty: 'items',
                    valueKey: 'url'
                }
            });

            var clicked = function (msg) {
                $("#result").text(msg.toLowerCase());
            }
        }
    });
})();

Full Code Listing: Mocking Requests and Data (mock.data.js)

(function () {

    // mock requests to items
    $.mockjax({
        url: '/api/items',
        contentType: 'text/json',
        response: function () {
            this.responseText = generateResponse(true);
        }
    });

    // add wildcard mock to capture requests with query string values
    $.mockjax({
        url: '/api/items?*',
        contentType: 'text/json',
        response: function () {
            // randomizes whether or not the response has child elements
            var hasChildren = parseInt((Math.random() * 10), 10) % 2;

            this.responseText = generateResponse(hasChildren);
        }
    });

    var generateResponse = function (includeItems) {
        var data = $.mockJSON.generateFromTemplate({
            "items|5-5": [{"id|+1": 1,"title": "Item","url": "http://@LOREM.com","items": includeItems ? [] : null
            }]
        });
        return data.items;
    }
})();

I was working on a WinJS application and added a 3rd party JavaScript library. However every time I tried to run the WACK certification tool I kept coming across this issue.

Performance test - FAILED Bytecode generation

• Error Found: The bytecode generation test detected the following errors:

  • File … has JavaScript syntax or other problems.

• Impact if not fixed: As a performance optimization to accelerate JavaScript execution time, JavaScript files ending in the ".js" extension generate bytecode when the app is deployed. This optimization significantly improves start-up and ongoing execution times for JavaScript.

• How to fix: You may need consider one or more of these steps to fix the issue:
  - Ensure that event logging is enabled
  - All JavaScript files are syntactically valid; otherwise exclude the respective files from the package
  - Please note that you should uninstall all previous versions of the app before deploying
  Otherwise exclude the respective files from the package.

How to solve it

The issue I had was due to the encoding on the JavaScript file. This can be easily fixed by changing the encoding to Unicode UTF-8.

Do this by opening the JavaScript file, then select File –> Advanced Save Options. In the dialog, select Unicode (UTF-8 with signature) - Codepage 65001

By David Burela

So you want a top paying development job? Well, while there’s no way to guarantee success (otherwise everyone would have one!), especially in these tough financial times, there are a few things you can do to at least improve your chances of getting that dream job. Here are four important things we think that you should consider:

1. Be Good at What You Do

Top employers employ top people; it can often be as simple as that. Therefore you need to be the best developer you can be. That means constant training, staying ahead of the game, keeping your skills current, and keeping up with your industry.

This isn’t as hard as it sounds. But you do need to read around your language and the general industry you work in. You need to understand best practice, know who the leading lights are in your field and why. Anything that results in you writing better code in your day job will help you move forward to a better one in the future.

2. Learn to Interview Well

It is a fact of life that to get most jobs you need to interview. While you might know you're one of the best developers around, most employers will not simply take your word for it. Interview formats and techniques vary, and it is always advisable to have some sort of portfolio or demo to take with you.

General preparation for any interview is also essential. Research the company you are applying to, the job you are applying for, and the people who might interview you. Know the company’s history, and current projects. Make sure you understand the job description, and exactly what it demands. And try to find out a little bit of information on the current employees. The web makes all this kind of research easy, so there is no excuse not to do it.

3. Be Ready to Demo Your Work

In addition good interview skills (see below) a developer should have a portfolio of sorts to demo. A top paying employer wants to see proof of how good you are, and a few demos are often the best way of doing this effectively.

If you can’t show off your work (it might be unreleased, internal, or app based) then why not take on an interesting side project? This will help keep your skills current (as described above) and is a great way to get involved in the community (see below). Choose something that is easy to explain and demo, and you’ll have the perfect example of your skills to help attract that next role.

4. Get Involved in Your Community

You might be a PHP developer, a SharePoint MVP, or a front end specialist. All of these areas, and many more, have their own communities and corners of the web. You should join them.  Some of them, all of them, it doesn’t really matter as long as you are involved, active, and contributing. This tells employers that you care, and that you know what is going on in your world.

Interested in a Position at Infragistics? 

Check Out Our Career Opportunities!

In my excitement to present you all with my amazing sparkline discovery, I definitely jumped ahead in how everything in my tracker came together on my Scrum Board. Thus, this post backtracks a bit and will cover how exactly I pulled the TFS data into my Excel document (using Pivot Tables), so that I could create the Scrum Board and all the associated goodness.

As a consumer of team data, it’s very easy to rely on automated summaries to formulate your reports. However, the easy way isn’t necessarily the best way, or the way to ensure success for your teams.

Therefore before creating any summarization tools, it’s important to consider reviewing all of the day-to-day data that your team and their work produce. Even though you may rely on summaries once you have a tool in place, it’s always imperative to be able to access and review the ground level data.

As usual, I know that this topic sounds really complex and fancy, but I promise, it’s not. Here we go:

1. Get Familiar with your TFS Cube

Frankly, this can be a little tricky. I won’t pretend to be fluent on this particular topic since the complexities of the TFS Cube can be a bit elusive, so your best bet is to check out some more expert advice over at MSDN.  

What I can tell you is that for me the most important factors, after simply learning which of the two cubes we have here contained the data I needed, was becoming familiar with the dimensions and measures. Particularly if you have any customizations in your build of TFS, it’s imperative to learn the nuances of what each measure and dimension refer to so that you can create the proper relationships to analyze later.

2. Inserting a Pivot Table

After opening your file in Excel (a new file or an existing file, either is fine), navigate to the “Insert” Tab on the Ribbon. With that tab active, select the “Pivot Table” option, and then again select the “Pivot Table” option from the dropdown menu.

3. Connecting to your TFS Cube (Creating Your Pivot Table)

Connecting to a TFS Cube is not as intimidating as it sounds, I swear. Once you complete step 2, you’ll get this popup menu:

You’ll want to select the “Use an External Data Source” radio button, and then hit the “Choose Connection” button.  At this point you’ll get a second popup that will list all of the connections available to you. If you don’t see your TFS Cube, make sure that you have “All Connections” selected in the upper dropdown menu. Once you select your TFS Cube Connection, as is natural, hit “Open” and then “Ok”, respectively. If you did it right, you’ll get this awesome looking graphic on your Excel sheet telling you that you did a great job:

4. Organizing Your Pivot Table

Once you have your Pivot Table inserted into your spreadsheet, you’re all set to get into the fun part (yes, I’m aware I have a twisted view of fun, but that’s ok!). Just click into that lovely Pivot Table area you created in Step 3, and you’ll get a new “Pivot Table Field List” menu to the right within your Excel window. This is where knowing your measures and dimensions come into play.

As you navigate through the list of Fields, select the items that you’re looking to analyze in your table. As you select each one, your Pivot Table will begin to populate, and you can see your selections and their relationships each step of the way.

At this point, once you select all of the fields that you want to view in your table, you’re all done. Voila, you have a Pivot Table!

5. Using Pivot Table Data in Scrum Boards

Once you have your table created, it’s time to tweak the row labels and specify the exact portions of your data that’s of interest in your analysis. Once that’s set, you can either use the “Grand Total” rows at the end of your Pivot Table, or utilize your own formulas to manipulate the data in whatever way you see fit. You can then take those data points you’ve created and use them in a Scrum Board, a report, or any other system you might need.

6. Want More?

If you're interested in where I went next with this data (hint, I mentioned Scrum Boards and Sparklines a LOT), why don't you check out Part 1 of the series?

Questions/Comments?

Feel free to comment here on my blog, or find me on Twitter @DokiDara.

By Dara Monasch

When you’re mobile, do you ever find yourself digging through your email in order to access a document?  This is one of the mobile challenges that the  Local Files feature of SharePlus solves.

This brief video demonstrates how to save an email attachment to your SharePlus Local Files for offline viewing: http://youtu.be/dbAPSiqm1vg

This month saw the first Melbourne AppFest, it all went without a hitch. The event covered development on Windows 8 / Windows Phone and Windows Azure.
The facilities were perfect and the catering was the usual good Cliftons standard.

We had a LOT of mentor support there on the day from Microsoft DPE and others (Nick Hodge, Frank Arrigo, David Glover, Shane Morris, and a few members from the community).

There were a good number of developers there. Many of them had general development questions about Windows Phone & Windows 8, as well as a few people there interested in Windows Azure.

There was a competition on the day for the best app of the day. This was won by Lars Klint for his “Picture of the day” application. It allows you to connect to a feed (such as the National Geographic) and it will change your Window Phone’s lock screen each day.
Lars won a Xbox & Kinect package!

The app is available for download on the Windows Phone App store http://www.windowsphone.com/en-au/store/app/image-of-the-day/84848ebd-6ce3-4617-b89f-83ec4f093a54
There are more details about the winning app by Lars’ employer http://blog.kiandra.com.au/2013/03/image-of-the-day-wins-appfest/

By David Burela

It’s March, which means another SXSW! This being my first SXSW I really did not know what to expect and I felt that being a rookie gave me some solid unbiased opinions about this world famous conference.

The Good

Well what can I say Austin is a lovely city and the people that live there are extremely friendly.  As you could imagine locals have mixed feelings about a conference that purges 100,000 technology, music and film geeks into their beloved city.  The quality of speakers and topics is top notch, granted there were a couple unprepared presenters but all in all I found the 5 days I was there extremely interesting. SPACE! I’m a sucker for sci-fi and this year’s SXSW was filled with talks by NASA scientists, Technologists and Inventors all focusing on the final frontier.  It was refreshing to see so many smart people working together and thinking that large. I think the highlight for me was Elon Musk’s keynote on SpaceX. And of course PARTIES! If you’re into free alcohol and fun parties SXSW has you covered… as they say What happens at SXSW stays at SXSW.

To scale model of the James Webb Space Telescope that is planned to launch in 2017.
 

Parties


The Bad

SXSW is so large that it’s difficult to decide where to be and when to be there.  In the weeks leading up to the conference I carefully hand selected my schedule of talks and lectures. I’m such a SXSW noob!  Talks and workshops fill up quickly and are spread throughout the city.  It’s nearly impossible to stick to a schedule. I found myself finding a seat in a lecture hall for one talk and settling for the next talk even though something may be more interesting next door in fear I wouldn’t get in.  Your best bet is to pick one talk in the morning and one in the afternoon and anything else you get to see is a bonus.

Photo from the 100 Year Starship: Interstellar Travel & Beyond Session

The Ugly

Logistically SXSW is a nightmare. I was chatting with a cab driver that put everything into perspective, “60,000 hotel rooms in Austin, and 100,000 people visiting.” I guess those 40,000 extra don’t sleep, which I could actually believe. I booked my room about 7 months before the conference and was able to get a room at the Hampton Inn over by the Airport. Staying this far away from downtown I had to rely on SXSW’s shuttle service and since I had such a good experience using the shuttles at the IXDA conference I felt at ease. I mean how different could it really be? The shuttle service  was advertised to run regular loops every half hour. Oh how far from the truth that was. Its seemed to be more like every 2 hours and the “shuttles” were 12 person vans that would often fill up before they even arrived at the hotel’s front door. My fellow SXSW shuttle riders shared the same frustrations, “I paid 60 bucks for this?”, “I’ve been waiting 2.5 hours”. If you rode the shuttle in you stayed in the downtown area, heading back to hotel meant you were not coming back in. This all meant lugging your stuff around all day and sitting on the floor next to power outlets in between sessions.

Waiting for a Shuttle! (thats me in the background)



Despite all this I would absolutely attend SXSW again and my experience this year will serve me well in the future. The only real regret I have is not booking my hotel earlier so that I was in the heart of the action.

“What is jQuery?” may seem at first to be a somewhat silly question (and I refuse to call anything a stupid question) given how widespread its usage is in today’s web and mobile world.  However, there are many software developers who have never used it.  Whether these developers are primarily desktop or native mobile developers or simply backend developers, this question may become a relevant question for each of them to ask at some point in their careers.  So, if you already know what jQuery is and what it is used for, this post was not written for you.  This post is for the other developers who, like I did not that long ago, want to know what exactly this jQuery thing is all about.

Definition

To start our quest towards knowing what jQuery is and why we should care, let’s take a look at jQuery.com:

“jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.”

That’s the “straight from the horse’s mouth” definition of what the project is and aims to accomplish.  There are several components to this definition and I want to address each one individually.

Lightweight

jQuery is small.  For all that it accomplishes, it is really small. It’s only 32kB when minified and gzipped.  This means it’s a really quick download on machines the first time it is encountered.  When using a CDN, your site’s users may not even need to download that small file!

HTML Document Traversal and Manipulation

jQuery makes it really easy to find elements within the Document Object Model (DOM) of your webpage.  Using CSS3-compatible selectors and some convenient functions on the jQuery object, it is possible to find and manipulate objects with ease.  For instance, to find the paragraph on the page with id ‘placeholder’ you would use the following jQuery code:

$('#placeholder')

To replace the HTML code for this placeholder element, use the .html() function:

$('#placeholder').html('New value!')

See the following for more details: DOM traversal and DOM manipulation

Event Handling

Most modern web sites demand some form of user interaction.  When a user interacts with elements on the site, events are fired that can be handled using jQuery code.  Here are some common DOM events that can be handled:

Almost all of these events have corresponding jQuery functions that are available on any jQuery object.  For instance, to perform some action when our #placeholder element is clicked, you would use the following jQuery code:

$('#placeholder').click(function() {
    // put code to perform on click here...
});

See the following for more details: Events

Animation

jQuery makes animating elements on your website easy.  There are many built-in effects that handle common animations like show(), hide(), fadeIn(), fadeOut(), etc.  To hide our #placeholder element we could use the following code:

$('#placeholder').hide()

If we wanted to control the speed with which the element hides we can pass in a string-valued argument of either ‘slow’, ‘medium’, or ‘fast’ like this:

$('#placeholder').hide('slow')

If you want precise control over how long the effect takes to complete, you can pass in a duration in milliseconds like this:

$('#placeholder').hide(1000)

To run some code after an animation completes you can pass in a callback like this:

$('#placeholder').fadeIn(500, function () {
    // callback code goes here...
});

See the following for more details: Effects

Cross-browser Support

One of the major goals of jQuery is to allow developers to not have to worry about the differences between the various web browsers.  It seems like every browser has their own unique way of dealing with the DOM whether it’s events, animations, or simple traversal.  jQuery removes the need to worry about this.  For a list of supported browsers, check out the browser support page on jQuery.com.

Extensibility

jQuery was designed to be extensible.  There are a ton of plugins for jQuery. 

Summary

If you are building websites, web applications or hybrid mobile applications today you should probably learn jQuery.  In fact, it’s probably a good thing to learn even if you’re not! For a really great way to get started with jQuery, check out http://try.jquery.com.  In my opinion, this is one of the best ways to get started with jQuery.  Once you have gotten up to speed with jQuery you will definitely want to check out Ignite UI.

Contact

If you have any questions or comments, please comment below or find me on Twitter @brentschooley.  You can also email me at bschooley@infragistics.com.

Sometimes when you are working on a new feature of an application the server and client are either in development at different stages or maybe you just want to work out the particulars of a view in isolation from the server. To make this possible there are a few JavaScript libraries that makes it very easy to mock not only data used in the grid, but also Ajax requests to the server.

The following screenshot is the igGrid filled with random data generated with mockJSON and is served to the grid using the client-side Mockjax library.

When you use an approach like this you are easily able to separate out all mocking behavior so when it’s time to work with the real server you can simply remove the reference to the mocks and then the scripts and grid will work just like normal. The code for the grid remains unchanged whether or not you are using mocked requests and data or not.

Code Download

If you would like to take a look at the source files use for this example, please download them here.

Mocking Requests and Data

In order to truly isolate the client from the server you need to first intercept on the client the requests made to the server. Once the requests are handled locally, then you can construct a mocked response to the page and return it back to the grid.

Mocking requests is handled by the Mockjax library. What’s nice about this library is that as you define routes in the configuration script, any matching requests to the server are intercepted by Mockjax on the client. Even while the client has control of the request, its able to return a response to the page which identical to what the server would provide to the client.

Mocking data is handled by the mockJSON library which uses a template to generate a series of randomized data to send in the response as provided by the Mockjax library.

The following is a sample of a mockJSON template to generate some very simple employee objects:

var data = $.mockJSON.generateFromTemplate({"employees|1-5": [{"id|+1": 1,"firstName": "@MALE_FIRST_NAME","lastName": "@LAST_NAME"
    }]
});

You’ll notice some additional characters in what seems like a normal object literal definition. The | character is a delimiter to tell mockJSON there are some commands included in the template definition. The value that follows directly after the root element (employees) and delimiter is a setting that tells mockJSON how many instances of the mock object to create. The numbers represent a range of random numbers which determine how many objects to create.

The next command in the template is found just after the id label. The +1 command tells mockJSON to increment the value by 1 each time a new object is created. This allows each object to have a unique id.

The template uses keywords (words preceded by an@symbol) to act as placeholders where random data is injected into generated JSON objects. There are many built-in keywords and you can even create your own keywords with custom values available for data generation.

Loading Scripts

To get started, the script loader is configured with known paths to the required JavaScript and CSS files and brings in all the igGrid features used in this example. The comment inside the ready event handler is a placeholder for the code in the next section which is concerned with setting up the grid on the page.

$.ig.loader({
    scriptPath: 'http://localhost/ig_ui/js/',
    cssPath: 'http://localhost/ig_ui/css/',
    resources: "igGrid,igGrid.Filtering,igGrid.GroupBy,igGrid.Paging,igGrid.Sorting",
    ready: function () {

       // setup grid here...

    }
});

Loading the Grid

Now that the page is ready and the scripts are loaded, you can setup the grid on the page. The data for the grid is made available after a JSON response is recognized from the server. Then the columns and features are setup.

$.getJSON('api/employees', function (data) {

    var grid = $("#grid").igGrid({

        autoGenerateColumns: false,
        defaultColumnWidth: "180px",
        dataSource: data,

        columns: [
            { headerText: "ID", key: "id", dataType: "number", width: "80px" },
            { headerText: "First", key: "firstName" },
            { headerText: "Last", key: "lastName" },
            { headerText: "Email", key: "email" },
            { headerText: "Title", key: "title" },
            { headerText: "Active", key: "active", dataType: "bool", format: "checkbox" },
            { headerText: "Workshop Day", key: "workshopDay" }
        ],

        features: [
            { name: "Filtering", columnSettings: [{ columnKey: "id", allowFiltering: false }], mode: "simple" },
            { name: "GroupBy" },
            { name: "Paging", pageSize: 20, pageSizeList: [5, 8, 10, 20, 50] },
            { name: "Sorting" }
        ]
    });
});

This is all the code the page needs to operate. Notice how there is zero mention of mocks in the loader or grid code. There are no flags to alternate data source locations and there is no conditional logic required for the page or the control to differentiate between a “real” scenario and a “fake” scenario. This is the power of working with mocking frameworks – interaction with the mocks is completely abstracted away from the page.

Data Schema

Before diving into the details of the data that is generated for the page, first take a look at a single sample data item that is close to what is generated for the grid.

{"id" : 1,"firstName" : "Henry","lastName" : "Smith","title" : "Customer Service Rep.","email" : "smith@company.com","active" : true,"workshopDay" : "Wednesday"
}

The data generated represents typical information commonly found in an employee database. The next section details how to generate a series of data items structured just like this example.

Adding Mock Support

In order for the page to use the mocking libraries all you need to do is create a new file and add the mock definitions to the file and reference it from the web page. In this example the additional script reference is:

The contents of mock.data.js begin with a self-executing anonymous function.

(function () {

    // add mocks here

})();

The first items added inside the anonymous function are some custom keywords. The first is the &WEEKDAY keyword which is an array of each week day.

    $.mockJSON.data.WEEKDAY = ['Monday','Tuesday','Wednesday','Thursday','Friday'
    ];

The next keyword is a list of job titles.

    $.mockJSON.data.TITLE = ['Director of Product Engineering','Vice President','Senior Accountant','Accountant','Customer Service Rep.','Sales','Support Engineer','Greeter','Division Manager'
    ];

Then, I added a list of the values for the active flag.

Now, you may be inclined, as I was, to attempt to add some logic into the template. Be forewarned this will not work as you expect. The template is indeed a template and is extracted from the method once and then used to generate each instance of a mock object. In the end, the template is a string and cannot include executing code. (Initially I tried to add a conditional statement to return a random Boolean value, but in the end formatting this value as a keyword is the approach that accomplished what I was trying to do.)

    $.mockJSON.data.ACTIVE = [
        true,
        false
    ];

The following code listing defines a route that is intercepted by Mockjax. When a request to api/employees is made a response is generated on the client and returns as text/json response back to the caller.

    $.mockjax({
        url: 'api/employees',
        contentType: 'text/json',
        response: function () {
            var employees = generateEmployees();
            this.responseText = employees;
        }
    });

The generateEmployees function uses mockJSON to create exactly 54 customer objects. (When you don’t provide a range mockJSON will use the amount you pass in.)

    var generateEmployees = function () {
        var data = $.mockJSON.generateFromTemplate({"employees|54-54": [{"id|+1": 1,"firstName": "@MALE_FIRST_NAME","lastName": "@LAST_NAME","title": "@TITLE","email": "@EMAIL","active": "@ACTIVE","workshopDay" : "@WEEKDAY"
            }]
        });

        return data.employees;
    }

Lastly, the template uses both custom and built-in keywords to provide random data into the objects. The @TITLE, @WEEKDAY and @ACTIVE are all custom keywords and the rest are provided by mockJSON.

Full Mocking Script

Just so you can see it working all together in context, here is the full mocking script.

(function () {

    $.mockJSON.data.WEEKDAY = [
        'Monday','Tuesday','Wednesday','Thursday','Friday'
    ];

    $.mockJSON.data.TITLE = [
        'Director of Product Engineering','Vice President','Senior Accountant','Accountant','Customer Service Rep.','Sales','Support Engineer','Greeter','Division Manager'
    ];

    $.mockJSON.data.ACTIVE = [
        true,
        false
    ];

    // mock requests to employees
    $.mockjax({
        url: 'api/employees',
        contentType: 'text/json',
        response: function () {
            var employees = generateEmployees();
            this.responseText = employees;
        }
    });

    var generateEmployees = function () {
        var data = $.mockJSON.generateFromTemplate({
            "employees|54-54": [{"id|+1": 1,"firstName": "@MALE_FIRST_NAME","lastName": "@LAST_NAME","title": "@TITLE","email": "@EMAIL","active": "@ACTIVE","workshopDay" : "@WEEKDAY"
            }]
        });

        return data.employees;
    }
})();

Conclusion

Working with mocking libraries gives you ultimate flexibility in being able to test and develop your views independent of the server. When the mock data definitions are present, the page uses mocked data and requests. When references to the mocks are removed, the page works against the server just like normal.

What is Knockout?

Knockout is a JavaScript library that helps you apply the MVVM pattern when designing HTML/JavaScript UIs. It aids in making your view model and UI controls observable so that changes can be propagated back and forth between them. Leveraging this pattern should help to keep your UI more declarative, decoupled and data-driven. For more info on Knockout, and its uses, please see their website.

What is a custom binding?

Knockout includes support for binding data and events between many of the built in html elements and your view model. But what about a UI element that is not built into browsers, such as our IgniteUI igDataChart? In order for users to be able to extend the behavior of knockout to accommodate this sort of scenario, Knockout has the concept of custom bindings.

Creating a custom binding for igDataChart

Our IgniteUI igDataChart is a high performance chart control that is designed to quickly and flexibly display your data visually. The chart already has a concept of being notified when the data it is bound to is changed, and thus updating its visuals. In fact, almost all the series types in the chart support a property called transitionDuration, so that when you set this to a non-zero value, and notify the chart of a data change, it will actually animate the changes to that series over the duration you specified.

Since the chart already reacts to data changes, if notified, most of our work, in terms of hooking it up to Knockout, will involve having Knockout notify the chart about changes that are made to the array that we have used Knockout to bind against.

First, we will add a new handler for binding data against an igDataChart.

ko.bindingHandlers.igDataChartDataSource = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        if ($.isArray(value)) {
            for (var i = 0; i < value.length; i++) {
                updateBindingHelper(element, value[i].target, value[i].targetType, value[i].data);   
            }
        } else {
            updateBindingHelper(element, "root", null, value);   
        }
    }
};

The update method is going to get called the first time and every time that knockout is passing data to our handler. The way we would use this extension from the html markup is like this:

<div id="chart" data-bind="igDataChartDataSource: data"></div>

Or like this:

<div id="chart" data-bind="igDataChartDataSource: [
{ data: data, target: 'series1', targetType: 'columnSeries' },
{ data: data, target: 'xAxis', targetType: 'categoryX' }
]"></div>

The former method binds the data against the chart as a whole, while the latter method binds the data against specific targets within the chart. This is in case you want to bind data from different portions of your view model to different series or axes within the chart.

As you may have guessed, most of the magic of how we will put our extension together will be contained in the updateBindingHelper method, but before we get to that, we still need to actually create and configure the igDataChart we will be binding data against:

$("#chart").igDataChart({
    axes: [{
        name: "xAxis",
        type: "categoryX",
        label: "label",
        strip: "rgba(20,20,20,.1)"
    }, {
        name: "yAxis",
        type: "numericY",
        minimumValue: 0,
        maximumValue: 8
    }],
    series: [{
        name: "series1",
        type: "column",
        thickness: 1,
        markerType: "none",
        xAxis: "xAxis",
        yAxis: "yAxis",
        valueMemberPath: "value",
        transitionDuration: 500
    },{
        name: "series2",
        type: "column",
        thickness: 1,
        markerType: "none",
        xAxis: "xAxis",
        yAxis: "yAxis",
        valueMemberPath: "value2",
        transitionDuration: 500
    }]
});

I won’t go into that with too much detail as I have discussed chart setup at length in previous blog posts, but here are the interested aspects:

• There are no dataSource bindings being specified. This is because knockout will provide the data to the chart, and notify the chart when the data has been changed.
• We have set a transitionDuration of 500 milliseconds for both series. This means that changes to the data bound to those series will be animated over that duration.
• Notice we are targeting the same div with the chart init that we have annotated with the Knockout data binding expression.

Now, that we have the chart configured, and the Knockout custom binding registered  (pretend we have implemented ‘updateBindingHelper’) all we need now is to define a view model to bind against:

function DataItem(label, value, value2) {
   this.label = ko.observable(label);
   this.value = ko.observable(value);
   this.value2 = ko.observable(value2);
   this.editValue = ko.computed({
        read: function() {
            return this.value();
        },
        write: function(newValue) {
            this.value(parseInt(newValue));
        },
        owner: this
   });
   this.editValue2 = ko.computed({
        read: function() {
            return this.value2();
        },
        write: function(newValue) {
            this.value2(parseInt(newValue));
        },
        owner: this
   });
   return this;
}

var data = [
    new DataItem("A", 1, 3),
    new DataItem("B", 2, 4),
    new DataItem("C", 3, 2),
    new DataItem("D", 4, 2),
    new DataItem("E", 5, 3),
];
var data2 = [
    new DataItem("A", 5, 3),
    new DataItem("B", 4, 2),
    new DataItem("C", 3, 2),
    new DataItem("D", 2, 4),
    new DataItem("E", 1, 3),
];

var vm = {
    data: ko.observableArray(data) 
};

So, here we have created a data item which has a label and two value properties defined as observables so that we can listen for them changing. The two computed editValue properties are for binding to text boxes so that and string values entered will be coerced to integer values before sending back to the view model. And then we are creating two data sets of these observable objects. Then we create our viewmodel with one proeprty called 'data' which is an observable array of our data items. Because this array is observable we should be able to listen to changes to it, and propagate those changes to the chart.

Finally we will cause knockout to apply any bindings to our view, and we will add some button event handlers so that when we click some buttons we can test various data manipulations and see that the chart updates:

ko.applyBindings(vm);

$("#addItem").click(function () {
    var val1 = Math.round(Math.random() * 8.0), val2 = Math.round(Math.random() * 8.0);
    vm.data.push(new DataItem("F", val1, val2));
});

$("#removeItem").click(function () {
    vm.data.shift();
});

 $("#moveItem").click(function () {
    var old = vm.data.shift();
    vm.data.push(old);
});

$("#changeData").click(function () {
    if (vm.data() == data) {
        vm.data(data2);
    } else {
        vm.data(data);   
    }
});

Then we can define the markup for these buttons and some markup to visualize and edit the data items in our collection:

• label: value: value2:

<input id="addItem" type="button" value="addItem" /><input id="removeItem" type="button" value="removeItem" /><input id="moveItem" type="button" value="moveItem" /><input id="changeData" type="button" value="changeData" />

Notice how we are using a Knockout foreach binding to iterate over the data collection from the view model to create editable visualizations of the contents:

You can see/modify the result and the full code here.

Now all the remains to be discussed is how do we actually implement the knockout binding handler?

Listening for data changes in Knockout

Our goal will be to call a set of notify methods on the chart that will notify it (after the fact) that one of the data sources that it is bound to has been altered. The methods we will be calling are notifyAddItem, notifyRemoveItem and notifyClearItems. These notify the chart, respectively, that an item has been added to a certain collection, or removed, or the entire collection contents have been altered. When calling these methods we pass in the actual collection that was altered (internally the chart figures out which parts were bound to this collection and passes the notifications along), the altered index, if appropriate, and the item affected. This is the information that we need to extract from knockout and pass to the chart.

Ideally that should have been no more than about 5 to 10 lines of code, but Knockout, being a rather young library, could use a bit of polishing in this area. Let’s break down the implementation of ‘updateBindingHelper’ bit by bit. Our general goal will be to:

1. Listen for changes to the observable array being passed to the binding. We need to be notified of changes to the array in order to know when to tell the chart to updated.
2. Listen for changes to every property of every item in the array, and when new items are added, similarly listed to changes on them.
3. When the array or any item changes, notify the chart about the data change.

So, here’s the first section:

updateBindingHelper = function(element, targetName, type, data) {
          var value = data, 
   valueUnwrapped = ko.utils.unwrapObservable(data),
   currValue,
   currProxy,
   makeProxy,
   proxies;               

proxies = $(element).data("koDataChartProxies-" + targetName);

if (!proxies) {
    proxies = {};
    proxies.itemProxies = [];
    proxies.arrayProxy = [];
    proxies.cachedArray = [];
    $(element).data("koDataChartProxies-" + targetName, proxies);
}
if (proxies.dataSourceInstance == value) {
     return;   
}

• First, we unwrap the observable array, so that we can access the source array directly.
• Next we ensure that we have an object stored in the data field for the target element, to store information we will use in order to listen for changes on the source collection.
• Next we check to see if we are being provided a new array. We don’t want to resubscribe to the array unless the instance has changed.

proxies.dataSourceInstance = value;
if (proxies.arrayHandler) {
    proxies.arrayHandler.dispose();
    proxies.beforeHandler.dispose();
}
makeProxy = function(item) {
    var proxy = {}, key, newInstance;
    proxy.instance = {};
    proxy.instance.owner = proxy;
    proxy.item = ko.computed(function() {
        newInstance = ko.toJS(item);  
        for (key in newInstance) {
            if (newInstance.hasOwnProperty(key)) {
                proxy.instance[key] = newInstance[key];
            }
        }
        return proxy.instance;
    });
    proxy.handler = null;
    proxy.dispose = function() {
        proxy.handler.dispose();   
    };
    proxy.handler = proxy.item.subscribe(function () {
        $(element).igDataChart("notifySetItem", proxies.arrayProxy, proxies.arrayProxy.indexOf(proxy.instance), proxy.instance, proxy.instance);
    });
    return proxy;
};

Here we:

• We are going to resubscribe to the array so:
• We store the new array instance in the element data so that we can refer to it later.
• We dispose of any existing listeners that we attached for the previous array.
• Next we define a function that should help us listen to all the property changes on a data item.
  • The way that this is done is very interesting:
    • We create a computed property that
    • Converts the observable object into a flat JavaScript object
    • Copies the resulting properties onto an object associated with the listening proxy.
    • Due to the way that some of the chart series work, its better for us to not have a new instance of a data item every time one of its properties changes, because some of the series correlate parts of the animation via instance of the source items.
    • Because this computed property touches all of the observable properties on the source item, Knockout will remember that this computed property needs to be recomputed (and will fire a changed notification) whenever any of the source properties change.
    • In this way, if we listen to this computed property, we in effect listen to all properties on the source object, and we get a flattened version of the object to pass to the chart as part of the deal.
• We then listen to this computed property for changes, and when they occur we call “notifySetItem” on the chart and provide source array and the index of the modified item.
  • It would be a performance improvement here to store the index somewhere rather than to call indexOf here, but we’d have to make sure that the index stayed in sync.

if (ko.isObservable(value)) {
    proxies.arrayHandler = value.subscribe(function (newArray) {
        var comp = ko.utils.compareArrays(proxies.cachedArray, newArray),
        moved = [], proxy, instance;
         for (var i = comp.length - 1; i >= 0; i--) {
            switch (comp[i].status) {
                case "deleted":
                    var oldValue = proxies.arrayProxy.splice(comp[i].index, 1)[0];
                    proxies.cachedArray.splice(comp[i].index, 1)[0];
                    $(element).igDataChart("notifyRemoveItem", proxies.arrayProxy, comp[i].index, oldValue)
                    if (typeof comp[i].moved != "undefined") {
                         moved[comp[i].index] = oldValue;
                    } else {
                         oldValue.owner.dispose();   
                    }
                    break;
            }
        }
        for (var i = 0; i < comp.length; i++) {
            switch (comp[i].status) {
                case "added":
                    if (typeof comp[i].moved != "undefined") {
                        instance = moved[comp[i].moved];
                    } else {
                        proxy = makeProxy(comp[i].value);
                        instance = proxy.instance;
                    }
                    proxies.arrayProxy.splice(comp[i].index, 0, instance);
                    proxies.cachedArray.splice(comp[i].index, 0, comp[i].value);
                    $(element).igDataChart("notifyInsertItem", proxies.arrayProxy, comp[i].index, instance);
                    break;
            }
        }
    });
}

Here we:

• Check if the provided array is observable
• Subscribe to be notified of changes to the array. 
• On a change we:
  • Compare the before state of the array to the after state of the array.
  • This is based on a utility function that is part of Knockout
  • This code actually wont work with earlier versions of Knockout as they did not even include the indexes of the items that were modified!
    • To get this logic to work with earlier versions you’d have to discover the indexes of the altered items another way.
  • We maintain a proxy array of flattened versions of the array items.
  • We maintain a cached array of the unflattened data items in order to compare with the next altered array.
  • Based on additions and deletions we update the proxy and cached array, and we notify the chart of the indexes that items were added or removed from.

Next:

if (proxies.arrayProxy.length > 0) {
    for (var i = 0; i < proxies.arrayProxy.length; i++) {
         proxies.arrayProxy[i].owner.dispose();
    }
}        
proxies.arrayProxy.length = 0;
proxies.cachedArray.length = 0;

for (var i = 0; i < valueUnwrapped.length; i++) {
    currValue = valueUnwrapped[i];
    currProxy = makeProxy(currValue);
    proxies.arrayProxy[i] = currProxy.instance;
    proxies.cachedArray[i] = currValue;
}

if (!targetName || targetName == 'root' || !type) {
    $(element).igDataChart("option", "dataSource", proxies.arrayProxy);
}
else
{
    if (/X|Y|Radius|Angle$/.test(type)) {
        $(element).igDataChart("option", "axes", [{ name: targetName, type: type, dataSource: proxies.arrayProxy }]);                                          
    } else {
        $(element).igDataChart("option", "series", [{ name: targetName, type: type, dataSource: proxies.arrayProxy }]);
    }
}

Here we:

• Unregister our old listeners
• Destroy our proxies and caches
• Create new proxies for all the new array items
• Set the array of flattened items on the appropriate target, which is either the chart root, or the axis or series that has been targeted.

And with that, we have a custom knockout binding! We can make changes to the data in our view model and the chart will automagically animate to the new data values.

Visit this jsFiddle to play with the live sample. You can also fork it and run your own experiments: