When it comes to Data Visualization, there is an abundance of controls in the Ignite UI package, which can help you provide the best user interface. Depending on the type of information you wish to display you can choose which chart to use. In the new release of Ignite UI there are few new controls and the one we are going to focus on in the current blog is the Linear Gauge. It supports a great amount of options and features , by the use of which you can customize this chart and adapt it to your data.

Basic Configuration

If you consider adding this control to a HTML page then you will need an element on which to instantiate the control.

HTML:

After that include the following JS  code:

JS:

Example image:

If you are making a MVC project first add the Infragistics references and then use the following lines:

MVC:

Those are the basic steps to configure the control. Of course you can add some options to the configured chart to make it correspond to your ideas. We are going to cover few of the options that Linear Gauge supports, but the entire list of features you can find in the API documentation.

Features

As we said the igLinearGauge control is an Ignite UI control which displays data in a form of linear gauge. It consists of visual elements like scale, needle, ranges and labels. All of those elements can be customized.

Scale

The scale is composed of tick marks and labels. The size and the positions of the tick marks are relative to the Graph area(a frame of reference for positioning the visual elements of the scale). There are quite a few options related to the scale. For example you can decide whether you want your scale to be inverted or not by setting the isScaleInverted option to ‘true’ or ‘false’. You can manipulate the position of the scale using the scaleStartExtend and scaleEndExtend , having in mind that both- start position and the end position of the scale are relative to the left edge of the graph area. To specify the value range you need to use the maximumValue and minimumValue options and assign them the values you wish. You can set a background color with the backingBrush option.

JS:

MVC:

Example image:

Ticks by themselves can be customized in few different ways. You can change the main ticks brush using the tickBrush option or you can change the mini ticks brush by the minorTickBrush option. You can also change the thickness of the main brushes by assinging them the desired value using the tickStrokeThickness option and respectively the mini brushes using minorTickStrokeThickness. The number of mini ticks that are displayed can be changed with minorTickCount.

JS:

MVC:

Example image:

Needle

To configure the needle actually means to set its shape, size and position. The position is set by the value option and the size can be changed by needleStrokeThickness option. The shape can be: “needle”, “triangle”,”rectangle”, “trapezoid” and the option that is used is needleShape. If you want a specific shape you can set this option to “custom” and then by using the following options you can create your own needle.

JS:

MVC:

Example image:

Ranges

The igLinearGauge control supports multiple relative ranges. Each range can be configured individually by specifying its starting and ending value , brush and border thickness.

JS:

Example picture:

You can achieve the sloping effect for scale by changing the outer extent options. The Linear Gauge can be either horizontal or vertical. This change can be made by orientation option:

JS:

Example image:

Labels

Changing the label color can be done by fontBrush option. If you want your label to be more than numbers you can use the following event and change the it.

The position of the labels can be modified with labelExtent . This option gets or sets the position on which to put the label as a value from 0 to 1, measured form the bottom of the scale.

Tooltips are always useful and you can have tooltips when you hover the needle or when you hover a particular area of the chart. If you want to enable the tooltips – first set the showTooltip option to true and then use the needleToolTipTemplate or the rangeToolTipTemplate like this:

JS:

Example image:

Conclusion

The igLinearGauge control gives you the ability to create attractive data presentations and it provides a simple and concise view of a primary value compared against a scale. This jQuery UI widget visualize data in the form of a linear gauge. Like a classic thermometer, these gauges can read out one or more values over a straight line measurement scale that you can orient vertically or horizontally.

Sample.

Coming soon a sample showing the dynamic use of this control.

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!

What follows is a primer for the professional who has been tasked with creating a web site or application that may be accessed via multiple devices (aka responsive design). Whether you are a product manager, user experience professional, designer or developer, follow these guidelines and your users will thank you.

Regardless of the platform(s), you must:

1. Understand the technical requirements
2. Understand the business requirements
3. Understand the user requirements

Note that user requirements are morethan a list of new features and functionality! User requirements must include an understanding of how users work and what they are trying to accomplish through their interaction with the artifact you are creating. These include a user’s goals, their known/stated requirements as well as their latent requirements (i.e., requirements that users don’t realize they have). User requirements also include any device-specific constraints (physical or technological) that impact a user’s ability to interact with your artifact.

Informational or Marketing Web Sites

If a responsive design is your goal and the artifact is a straightforward informational or marketing web site, it is sufficient to focus primarilyon 1 and 2 above. Here is why:

• Informational and marketing web site designs are well understood and have become commoditized. Care to guess the percentage of web sites today that were created using WordPress? The site w3techs.com puts the number at 20.4% of all existing web sites. It remains the task of the UX or design professional to determine the information architecture (a well understood process) but the “problem” of overall site layout, usability and design for simple sites has been largely solved.
• The goal of such sites is to make all content available under all device constraints (though the device-specific prioritization of such content remains an important task that is routinely ignored).
• Most importantly, device-specific design and layout decisions are made programmatically in order to support the goal of “one design to fit them all”.

Complex Transactional Web Sites or Business Applications

If a responsive design is your goal and the artifact is a complex, transactional web site or business application, following #3 above becomes critical. In this case, there are multiple sets of task- and device-specific requirements that need to be implemented. Here is why:

• A user’s expectations, goals and tasks will vary as they move between physical environments.
• A user’s expectations, goals and tasks will vary as they move between physical devices.
• It is almost certainly nota requirement of the user to have all content available under all device constraints. Device-specific prioritization of content is critical.
• Specific designs are required to match specific user requirements on specific devices.

In other words, tasks and processes that may be well-supported in an office environment may be completely inappropriate if translated verbatim to a non-office environment, regardless of device. This isn’t simply a matter of knowing what content to hide or expose. Depending on situational requirements, certain tasks may be done differently, incompletely or not at all. Key to creating an application that alwayssupports users is understanding how and when a user’s requirements change.

Responsive design is a misnomer. It is a development technique. There are no such shortcuts to good design.

Kevin Richardsonhas been working in the area of user experience for over 20 years. With an advanced degree in Cognitive Psychology, he has experience across business verticals in the fields of research, evaluation, design and management of innovative, user-centered solutions.

Kevin’s experience includes web sites, portals and dashboards, enterprise software and custom business applications for medical, pharmaceutical, communications, entertainment, energy, transportation and government users.

On the weekends, you can find Kevin on his motorcycle, riding for Infragistics Racingat a number of different racetracks on the East coast.

According to the creators of the framework, Ember.js is “a framework for creating ambitious web applications”. What exactly do they mean? Also, with the many (, many, many) JavaScript frameworks that we have to choose from these days, why might I choose Ember? In this post, I’ll introduce Ember.js and some of the core concepts that backed its development. In future posts, I’ll dig in and show you how to build applications with the framework. For now, let’s look at what the framework is made of.

Guiding principles

Before looking at the details of any framework, it helps to understand the core concepts that drove the feature decisions in the first place. Perhaps the biggest factor in the creation of Ember was the belief that what makes the web so unique is the ability to bookmark and share URLs. The team felt that many JavaScript frameworks treated the URL as an afterthought (mostly by treating the concept of a router as an optional add-on). The Ember team also wanted to create an MVC framework that was closer in line with the desktop MVC framework mentality rather than taking a server-side MVC approach (like ASP.NET MVC or Ruby on Rails). So, Ember combines the productivity of a native UI framework while supporting shareable URLs. The following key concepts are what make up the framework from a high-level overview standpoint.

Core concepts

Naming conventions

Ember was written with convention over configuration in mind. This means that much of the framework relies on things being named consistently and in the manner that the framework expects. The naming conventions are summarized nicely here.

Templates

Templates are what describe the user interface in Ember.js. Ember templates are written using the Handlebars templating language which allows for expressions to be added to standard HTML markup within double curly braces: {{}}. Each template is backed by a model and supports databinding such that the template will auto-update when the model changes. The following features are supported in Ember’s Handlebars templates:

• Plain HTML
• Expressions - Allow model values to be substituted into the HTML. For instance, {{price}} would substitue the value of the price property on the model into the template where specified
• Outlets - An outlet (specified by {{outlet}}) is a placeholder for another template. As the user moves around the application, different templates can be loaded into the outlet by the router.
• Components - Custom HTML elements (technically, custom Handlebars helpers) that help clean up repetitive templates by enabling the creation of reusable controls

Example template:

Name: {{input type="text" value=name placeholder="Enter your name"}}
My name is {{name}} and I want to learn Ember!

Router

The router in Ember is what powers the shareable URLs that are so important to web applications. The router translates the URL of a request into a series of templates. For instance, when I visit /coffee within the application, Ember’s router will translate this to the CoffeeRoute which will set up the appropriate template backed by the appropriate model for that request. As the templates or models being shown to the user change, Ember’s router will automatically keep the URL in the browser up to date. This means that the user can share the URL at any point in the application lifecycle. Whenever someone clicks on this shared URL, they will see the same thing that the original user saw.

Example router:

App.Router.map(function() {
  this.resource('about');
  this.resource('coffees', function() {
    this.resource('coffee', {path: ':coffee_id'});
  });
});

App.CoffeesRoute = Ember.Route.extend({
  model: function () {
    return App.Coffee.find();
  }
});

Models

A model object is used to store persistent state within an Ember application. These model objects are what back the templates and provide data to be displayed within the HTML. Many applications will load these models through a REST API using Ember Data which will store the data in a server database, but Ember doesn’t limit you to just this choice. There are many adapters for Ember Data that allow you to choose the backend that works best for your project. You can even roll your own syncing using the Basic Adapter. 

Example model:

var attr = DS.attr;

App.Coffee = DS.Model.extend({
  name: attr('string'),
  price: attr('number'),
  ounces: attr('number'),
  description: attr('string'),
  roaster: attr('string'),
  acidity: attr('string'),
  body: attr('number')
});

Controllers

The controller is technically where the templates get their data from. Though optional, a controller will be created by Ember if not directly declared for a route. The controller “decorates” the model object. Properties specified on the controller can be accessed by a template as if they were declared on the model. Methods can be created within the controller that can be called using Handlebars helpers in the template. This enables things like button actions. In general, properties that do not need to be synced to the backend server but are necessary for template logic should be created in the controller. Ember supports the creation of ObjectControllers, which manages a single model object, and ArrayControllers which manage a list of model objects.

Example controller:

Todos.TodoController = Ember.ObjectController.extend({
  isCompleted: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      return model.get('isCompleted');
    } else {
      // property being used as a setter
      model.set('isCompleted', value);
      model.save();
      return value;
    }
  }.property('model.isCompleted')
});

Components

Components allow for the creation of reusable controls. The interface for the component is defined using Handlebars templates. The component also has a JavaScript class that is used to store state and handle user interaction. Components are placed into a template using a Handlebars helper with a name based off of the name of the component.

Example component:

  {{input type="email" value=email placeholder="Enter your Gravatar e-mail"}}

App.GravatarImageComponent = Ember.Component.extend({
  size: 200,
  email: '',

  gravatarUrl: function() {
    var email = this.get('email'),
        size = this.get('size');

    return 'http://www.gravatar.com/avatar/' + hex_md5(email) + '?s=' + size;
  }.property('email', 'size')
});

Summary

Ember.js is a relatively young but growing framework. Though in the past it suffered from a lack of documentation and a difficult learning curve, that situation has improved dramatically. The Ember guides are very well-written and will help you get started with the framework in no time. I will also be posting more on how to develop with this framework over the coming weeks.

Contact

If you want to comment or reach out to me, the best place to do that is on Twitter @brentschooley. I can also be reached via email at bschooley@infragistics.com.

The Linear gauge widget can be very handy if you want to create a custom music player. In this blog you can see how to use this control to build the volume slider and the player slider while making a Music player like the one described in O'Reilly’s jQuery Cook Book. The example picture demonstrates the final result.

Step one

First of all, we need some HTML tags to host our player elements. We are going to use the HTML5 audio tag to hold our song.

Then we are going to set the basics for the player. We will need a play and pause button, a volume button and of course the controls for progress and volume. You can use some CSS to style those elements

Step two

Now that we have the construction of our music player let’s make it functional. First you will need the following code to enable the play and the pause buttons.

For the slider we are using the linear gauge. As you will see from the following lines, the maximum value for the control depends on the song’s duration. That way the chart will always respond to the length of the currently playing song. We will make two ranges: one static and one dynamic, which will change with the progress of the song.

To take the duration of the tune you need to make sure that its metadata is loaded. To avoid divergence of time we are going to wrap the control in a function which will execute only after the loadmetadata event occurs.

In this function we will initialize the handler function for the timeupdate event where we are going to change the value of the control because we want the needle to show the current time. The other change that we are making is update  end value of the dynamic range. Again, the value that we are assigning is the current time. That way we can color only the part of the scale that corresponds to the  elapsed time of the song.

In the same way you can add one more range to show the buffer progress.

We want to be able to change the current time of the tune, whenever we want. For that reason we will enable the needle to drag and we will  make audio element’s current time equal to the value at which we drag the needle to.

Step three

As our music player is already functional and playing the last thing to do is control the volume of the song. As we mentioned we are using another linear gauge to take care of the volume. As you can guess it is vertical and the range is set from 0 to 1. We use the hide and toggle jQuery functions to  make it appear only when the user click  on the volume icon.  In the range we set the end value to audio element’s volume.

We need to be able to drag this needle if we want to change the volume. We use the same function as the above mentioned. The only difference is that we don’t set the current time but we set the volume making it equal to the value of the needle.

Conclusion

The linear gauge is not only a static control for Data Visualization, it can be dynamic and functional. You can use it to create music player, video player , thermometers and whatever else you can think of.  You can find more information about this control and how to add it to your application in my blog: “How to express your data using Ignite UI’s jQuery Linear Gauge control.”

Sample.

You can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!

Introduction

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find the notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release Notes: NucliOS 2013 Volume 1 Build 234

Infragistics community member David Ismailov is no stranger to User Experience, design and development. In his role as UX and 3D Technical Manager at Optitex in Israel, David relies on tools that provide quality and efficiency – tools like Infragistics’ Indigo Studio.

We had the opportunity to chat with David about his design process and the impact that prototyping has on the development of great apps. Read on to learn more!

Question:

Thanks for chatting with us, David! How did you get involved in design and UX?

Anwser:

Since my first encounter with the Maya (3D Animation Software) and its hot-menu feature (a true breakthrough UI back then, which allowed you to reach any menu item from anywhere in the software), I became fascinated by how various GUI elements work. I explored different interface solutions to technical constraints. That’s when I understood that software’s UI has big impact on productivity and ease of use.

Later on, as 3D Technical Director at Optitex, I was in charge of developing the technological strategy and defining the most efficient tools and procedures for the projects I worked on.  I was a mix of an artist and a programmer and, as part of my job, dealt with both technical and creative issues, guiding animators and programmers, and finding creative solutions to complex problems. Many times I was dealing with UX issues without even knowing it or calling it UX. Back then, no one used the UX terminology. As I dove deeper into my projects, I couldn't help noticing that our product had many UI and UX issues and suggested ways to solve them. That’s how I gained the UX Manager position in my company.

Question:

How do you approach your UX design process?

Anwser:

When approaching UX design for software, I first try to figure out the workflow/pipeline and the roles of different users in it. My main purpose is to define the problems and understand the technical limitations. Once the problems and limitations are clear, I try out different solutions, creating as many low fidelity prototypes as I can. I believe that interaction design is an important part of any UX solution, no less than aesthetics and functionality, and I use my prototypes to explore different interactions. Eventually, after testing a number of variations, I select the best one and create a high fidelity prototype.

Question:

How does Infragistics’ Indigo Studio help you make good user experience design decisions?

Anwser:

Indigo Studio helps me to find the best solutions, as it makes it easy to create as many variations as I can, quickly and efficiently, without getting into technical issues. The intuitive animation tools enable me to create and test different interactions and flows, to find out which is the best one.

Question:

Can you talk a little bit about how Indigo Studio helps you – both with design and development – in ways that tools like Photoshop don’t?

Anwser:

Indigo Studio includes many useful features that don’t exist in tools like Photoshop. For example, I find value in the ready to use dynamic element set that includes repeaters, radio buttons, check boxes, pre-loaders and other elements you can just drag and drop, instead of creating them yourself. Also, the smart guides in Indigo Studio are much more advanced than in Photoshop, and let me align elements instantly.
Last but not least, Indigo Studio allows me to create animated interactions, which Photoshop does not, so I feel it is the perfect tool for UX designers.

Question:

Aside from UX and design, do you have any other interesting hobbies?

Anwser:

In my spare time I enjoy wood carving, clay sculpturing and downhill cycling.

For more info, David can be reached via email at dima.david@me.com.

The role of cloud computing in mobile app development continued to expand recently as IBM and Deutsche Telekom announced that they had joined forces to offer a new cloud-based environment for developers. In order to create this new service, the companies will combine the capabilities of IBM's app development platform Worklight with Deutsche Telekom's Developer Garden. Users will then be able to access the service in the Deutsche Telekom cloud. This new service will be available to small and medium-sized companies in Europe, and will give developers the tools they need to efficiently create apps for all mobile operating systems.

Developer Garden-powered IBM Worklight - the official moniker for the new platform - aims to offer the adaptability, speed and security that are essential for a successful mobile app marketplace.

Developers can use the cloud-based service to build apps across platforms to create hybrid apps with HTML5 or employ Android or iOS controls to build native apps. The solution also includes a geo-location capability that allows companies to provide a wide range of services via their mobile apps. Customers who choose to participate can notify retailers when they are close to a store location, so that retailers can offer promotions on same-day purchased items to customers who use the feature, and hotels can be alerted when guests who opt to use the feature are nearby, the two companies said.

According to Business Cloud News, IBM's general manager of application and integration middleware, Marie Wieck, said that the availability of the IBM technology on the Deutsche Telekom cloud will enable increased speed and ease of delivery within the platform. Business Cloud News also noted that smaller businesses will be able to make use of the cloud to increase efficiency of operations and cut costs.

Much to the delight of its future users both companies boast that security in the cloud-based system will be top notch.

"The data will be securely hosted on Deutsche Telekom's servers in Germany and thus be subject to the strict German data protection provisions, adding a layer of security and assurance to developers and enterprises working in the cloud," Deutsche Telekom's Core Telco Products Senior Vice President Rainer Deutschmann said to customers.

Meanwhile, IBM continues to prove why its own reputation for informational security is so good. Shortly after news of the partnership with Deutsche Telekom, the New York-based technology giant announced a recent inroad in a security-sensitive sector: health care. Nonprofit health IT provider Inland Northwest Health Services is now using IBM's SAN Volume Controller technology to keep more reliable electronic health records, Silicon Angle reported.

As mobile apps continue to access the personal information of their users, developers can expect cloud services to provide them with the same data security standards that healthcare professionals receive.

The role of cloud computing in mobile app development continued to expand recently as IBM and Deutsche Telekom announced that they had joined forces to offer a new cloud-based environment for developers. In order to create this new service, the companies will combine the capabilities of IBM's app development platform Worklight with Deutsche Telekom's Developer Garden. Users will then be able to access the service in the Deutsche Telekom cloud. This new service will be available to small and medium-sized companies in Europe, and will give developers the tools they need to efficiently create apps for all mobile operating systems.

Developer Garden-powered IBM Worklight - the official moniker for the new platform - aims to offer the adaptability, speed and security that are essential for a successful mobile app marketplace.

Developers can use the cloud-based service to build apps across platforms to create hybrid apps with HTML5 or employ Android or iOS controls to build native apps. The solution also includes a geo-location capability that allows companies to provide a wide range of services via their mobile apps. Customers who choose to participate can notify retailers when they are close to a store location, so that retailers can offer promotions on same-day purchased items to customers who use the feature, and hotels can be alerted when guests who opt to use the feature are nearby, the two companies said.

According to Business Cloud News, IBM's general manager of application and integration middleware, Marie Wieck, said that the availability of the IBM technology on the Deutsche Telekom cloud will enable increased speed and ease of delivery within the platform. Business Cloud News also noted that smaller businesses will be able to make use of the cloud to increase efficiency of operations and cut costs.

Much to the delight of its future users both companies boast that security in the cloud-based system will be top notch.

"The data will be securely hosted on Deutsche Telekom's servers in Germany and thus be subject to the strict German data protection provisions, adding a layer of security and assurance to developers and enterprises working in the cloud," Deutsche Telekom's Core Telco Products Senior Vice President Rainer Deutschmann said to customers.

Meanwhile, IBM continues to prove why its own reputation for informational security is so good. Shortly after news of the partnership with Deutsche Telekom, the New York-based technology giant announced a recent inroad in a security-sensitive sector: health care. Nonprofit health IT provider Inland Northwest Health Services is now using IBM's SAN Volume Controller technology to keep more reliable electronic health records, Silicon Angle reported.

As mobile apps continue to access the personal information of their users, developers can expect cloud services to provide them with the same data security standards that healthcare professionals receive.

Having written quite a few of these HTML5 Resource of the Day posts, I figured it might be useful to have an aggregate post that listed all of them in the order they were published. I hope you find these helpful.

HTML5 Resource of the Day List

• Tuts+
• HTML5 Weekly
• Smashing Magazine
• Treehouse
• A Book Apart
• HTML5 Doctor
• Media Queri.es
• CSS Tricks
• Egghead.io
• EmberWatch
• Future Friendly

Contact

If you want to comment or reach out to me, the best place to do that is on Twitter @brentschooley. I can also be reached via email at bschooley@infragistics.

     As a component vendor, we are building software that satisfies the same business requirements and runs on multiple platforms. Many of our customers would like to have a chart or a grid on both WPF and Web. What happens in reality, though, is that we usually build this component for a specific platform first - like Win Forms. Then our customers like it a lot, and start asking - is this available for Web, we have to go “web” soon? Do you also have an iOS version of it? So what we can do is ask our development teams to build it for the new platform. Our grids, for example, usually require a couple of cycles to get into market with a decent number of features. Assuming there is a team (or more) of at least 3-4 engineers actively testing the grid, this means we need to double the number of engineers in order to satisfy the new platform requirements. We've been struggling with this for a while, and we have experimented with various approaches. In this blog post, I would like to outline one solution to this problem.

   Using this solution, we have automated most of our Data Chart component, and you all know that the chart is a huge beast in terms of functionality and performance requirements. And that’s just the beginning. This blog post is about writing automated tests for software developed for multiple platforms. It’s also about achieving consistency and transparency of the required features. Having a set of business scenarios upfront, it should be obvious what the feature coverage is on every platform.  One can argue that a native application creates the best UX, and there are many big companies that follow this approach. I am not going to discuss whether going native is better than doing only web & adaptive CSS. That’s a different topic. Web apps written with responsive design in mind can actually create great user experiences. But, sadly, sometimes it’s those 5 or 10 % difference which actually makes the difference between “Great” and “wow!”.

    We all know that native development comes at a big price. You need skillful engineers for every different platform. You need to support multiple IDEs, multiple build and test infrastructures and use multiple tools for everything. There is a nice diagram, courtesy of Scott Hanselman, which depicts the effort vs. user experience when it comes to building apps with different approaches:

It’s interesting to see how complex the multi-platform development can be. It’s not just about the number of platforms, but also about the number of devices and the number of different screen sizes. You quickly realize how many combinations you may end up with.

    We have some obvious and easy choices when it comes to multi-platform testing. For example, we can use each platform’s testing framework to write tests. That is, Selenium Web Driver for Web or UIAutomation for WPF. But this requires separate knowledge about those frameworks. It’s also hard to maintain, and you end up with a lot of technical debt to carry on. There is no single place which can serve as a reference point about the core user stories / scenarios that the app implements. There are different IDEs, different tools, and different teams using those tools. Requirements documents may become quite different if they aren’t kept up to date. And even if they are – which is not an easy thing to do – it’s just not as transparent as you’d probably like it to be. We may end up covering only 70% of our intended functionality in iOS, and at the same time have features that we haven’t even planned for in Android, without even knowing it.

    What we could do, though - and this is the main concept I would like to convey – is to abstract the test definitions by using a more high level language. We could borrow from the concepts of Behavior-Driven Development and use Cucumber, and then write our business requirements in Gherkin format. And we could easily reuse those requirements, as well as the implementation of our scenario steps on all platforms. Then we could have platform-specific drivers that implement the core high-level user interactions on every platform. Take an “Add Task” interaction which happens in a TODO Application. The Android TODO Driver will implement the “Add Task” differently than the iOS TODO Driver. Then those drivers will need to use some automation framework, specific to the platform, to execute some core platform interactions such as clicking a button, touching elements, entering text char by char, and so on. The idea of using this approach is not to cover everything - you may still have many unit tests written for the target platform. Unit tests serve a different purpose, and that's OK. We want the highest quality, that's why combining several testing approaches is great.

When I talk about high-level interactions, I usually mean an end user “transaction” that consists of multiple platform-specific actions – and when combined, those actions perform some useful business task. You can immediately see the main benefit of this approach – we end up with the same high level codebase, and use the same development environment, bundled with the cucumber implementation for that Dev environment and platform. Hmm, looks like we could also use the same test runner, and the same Continuous integration tools -;)  In this blog I am going to show how this works using Visual Studio and SpecFlow.NET, but you can apply the same approach to any IDE running on any platform – such as Eclipse & Java.

Some of you may argue that we don’t actually need to have all features implemented on all platforms. That’s a valid argument, but I would like to mention two things:

• It’s good to write a cucumber scenario, and have it fail on platforms where it’s not implemented. That’s a good thing. It gives you transparency and you can even use the pass/fail rate in order to get some notion of feature coverage
• Looking at the diagram below, it’s interesting that apps which were developed a couple of years ago already have almost the same functionality on all platforms that they target. Take Facebook, for example. As an end user of mobile apps, you do want the same feature present on web, Android, and iOS, don’t you? When I saw the update which gave one the ability to add pictures as part of comments, I was like “Finally!”

For those of you who are not very familiar with Cucumber/Gherkin, here are two short definitions:

Gherkin - Business Readable, Domain Specific Language that lets you describe software’s behavior without detailing how that behavior is implemented

Cucumber - a tool for running automated acceptance tests written in a behavior-driven development (BDD) style. Cucumber is written in the Ruby programming language.^[6][7] Cucumber projects are available for other platforms beyond Ruby.

Sounds pretty natural to what we are trying to achieve. Here is an example of a cucumber scenario:

Scenario: Add new task

    Given The TODO Application has loaded successfully

    And The task list is empty

    When I add a new task with the text 'go to work‘

    Then The text of the last task in the list should be 'go to work'

Those Given/When/Then statements have different purpose – Givens are used to put the system in a specific state, Whens are used to model user interactions with the system (such as adding a new task), and Thens are used to verify the result of user interactions. Those step definitions are backed up by concrete code which calls into the step implementation. The step implementations can be written in any language. If we use a .NET implementation of cucumber, such as SpecFlow.NET, we can write them in C#.

In the context of multi-platform testing, it’s very important to write good step definitions. Can you see an issue with the following scenario?

When I click the button with ID button1

Yes, there are several obvious ones:

• We don’t have “click” on mobile, we use touch events instead
• Button is a platform specific UI component. We don’t  need to use a button to implement parts of a UI, on a particular platform
• Using IDs to specify components as part of the scenario is wrong – those are implementation details.

Actually, clicking a button with some ID may be part of the implementation of the “Add Task” interaction for a desktop platform like Web/WPF. And the Add Task user interaction is described by the following cucumber scenario step:

When I add a new task with the text 'go to work‘

Writing cucumber tests for features that are implemented in multiple platforms actually forces you to write good Gherkin code that can be reused.

In order to have our tests do useful and real checks on the target platform app, we also need an API to talk to the target platform app. That’s the purpose of the platform drivers – each one of them depends on a native platform automation framework, which could be:

•  Selenium Web Driver for Web
• UIAutomation for WPF
• The Calabash project – to automate and interact with iOS and Android apps remotely

In my demo app I have implemented four platform drivers for a simple TODO app and those cover WPF, Web, iOS and Android. The TODO App is also implemented on those four platforms.

It’s important to note that a platform driver has two main parts – the part which implements the user interactions for our app, and that’s specific to the platform. Then there is the platform automation “Bridge”, which allows us to execute clicks, touches, keyboard entry, query for components on the visual tree, and so on. For some platforms, I am using existing technologies such as UIAutomation and Selenium Web Driver. For other platforms, like Android and iOS, I’ve written my own drivers (HTTP Clients), which talk to the native instrumented app. It’s instrumented with Calabash, and Calabash is a multi-platform technology which allows you to run user interactions remotely via HTTP. That’s not documented, though. They have a console Ruby app which sends commands with HTTP, and I had to do some packet sniffing / reverse engineering in order to understand what JSON data to send and what to expect in the response. The Calabash guys promise a C# .NET client API in the future, but I just couldn't wait to experiment with this great technology.

Below is the structure of my Visual Studio solution - I have installed SpecFlow.NET via NuGet. I have two apps in the solution, which implement the TODOApp in Web (ASP.NET MVC) and WPF, respectively. Then I have four framework projects, one for each platform, and one common project. Then I also have four test projects, one for every platform. Every test project for platform X, references the framework project for the same platform X. So, when the TODOAppPlatformDriver is referenced from framework X’s DLL, even though the implementation is specific to that platform, the test projects can share the step implementations for the cucumber scenarios because the platform driver class name is the same on all platforms.

Let’s look at the implementation for one of our scenario steps:

[When(@"I add a new task with the text '(.*)'")]publicvoid WhenIAddANewTaskWithTheText(string text){
    TodoAppPlatformDriver driver =(TodoAppPlatformDriver)FeatureContext.Current["platformDriver"];
    driver.AddNewTask(text);}

This code, along with the .feature files is basically the same (it’s linked) for all test projects. We can add it to an arbitrary test project, and then add it as link in other projects.

Let’s look at some of the implementation of the AddNewTask method for a specific platform driver, such as Web:

publicvoid AddNewTask(string text){// enter text in the todo_text input boxthis.driver.FindElement(By.Id("todo_text")).SendKeys(text);// click the Add Task buttonthis.driver.FindElement(By.Id("addtask")).Click();}

You can see that we are using Selenium WebDriver API here. When you compile the solution, since all our tests use the same test runner – MSTest, you end up with a nice Test Explorer view of all your tests, separated by platform – assuming every test project contains tests for the specific platform:

The test runner can be set in a single test project’s App.config:

<?xmlversion="1.0"encoding="utf-8"?><configuration><configSections><sectionname="specFlow"type="TechTalk.SpecFlow.Configuration.ConfigurationSectionHandler, TechTalk.SpecFlow"/>configSections><specFlow> For additional details on SpecFlow configuration options see http://go.specflow.org/doc-config--><unitTestProvidername="MsTest.2010"/>specFlow>configuration>

It’s not necessary to set it in every test project’s App.config,  because our .feature file, the generated code which backs it up – AddingTasks.feature.cs, as well as the step implementation code – AddingTasksSteps.cs, is all shared. The “AddingTasks.feature.cs” is actually generated by SpecFlow.NET’s VS design time support, and it has the correct method attributes based on the selected test runner. So the AddNewTask generated method in it will have a Microsoft.VisualStudio.TestTools.UnitTesting.TestMethodAttribute set.

The project which I have attached to this blog post contains everything you need to compile and run the tests, but you will also need the respective Android and iOS environments set up. I am attaching the XCode (iOS) as well as the Eclipse (Android) projects to this blog post. I have used the following versions of these environments:

iOS:

• XCode 4.6.3
• iOS 6.1

Android:

• Eclipse ADT (Android Developer Tools) Build: v22.2.1-833290
• Build Target – Android 4.3, API Level 18

Apart from importing those projects, you should also install Calabash-Android and Calabash-iOS:

https://github.com/calabash/calabash-android/blob/master/documentation/installation.md

https://github.com/calabash/calabash-iOS

I used latest.

When you import the project and build it & run it on the emulators, you can start the Calabash console in the following way:

Note that on Android you will need to start the test HTTP server for the target app from the console, while for iOS this isn’t necessary because it’s bundled in the app itself:

irb(main):001:0> start_test_server_in_background

nil

irb(main):002:0>

After the test server is started, you can execute queries or perform interactions directly from the console. This URL describes the query format in detail:

http://blog.lesspainful.com/2012/12/18/Android-Query/

Note that the Calabash Android and iOS Platform Drivers implement the Calabash protocol via HTTP by sending JSON in HTTP POST requests. When you run the Android and iOS tests, you can use a packet sniffer like RawCap.exe & WireShark for Windows, or HttpScoop for OS X and listen on the loopback interface and observe the packets that the test driver sends. The HTTP commands are based on the Frankly protocol, which is described here:

http://www.testingwithfrank.com/frankly.html

Additionally, the iOS version uses a number of extra endpoints for playback of interactions (/play), as well as keyboard entries (/keyboard).

Keep in mind that you cannot use WireShark on its own on Windows – you will need to use RawCap first and then open the dump in WireShark - because it doesn’t support listening to loopback interfaces. If your android environment is on a different machine, you can listen on the respective network adapter’s interface.

Here is an example of a command that performs touching a button – it is send from the Android Calabash driver to an Android app running in the emulator. I use RawCap.exe to capture the loopback traffic, since both Visual studio and my android emulator are running on the same machine. Then I open the RawCap saved dump file with WireShark and look at the HTTP POST Requests:

So you can see that the Android Calabash HTTP driver queries the button first, and then sends a touch_coordinate command by passing the center_x and center_y values as arguments. You can also see that the query command is sent to the /map endpoint, why the touch_coordinate command is sent to “/”.

You can also see that the Android HTTP instrumentation server which is running on the device is running on port 34777. This port is different for Calabash iOS, but the default one is encoded in the driver which is part of the Framework.Common project in my VS solution.

In order to change the IP/Host for the iOS and Android devices/emulators, you can modify the TodoAppPlatformDriver.cs files in the Framework.iOS and Framework.Android, respectively:

this.driver = new IOSFranklyDriver("http://10.14.1.137:37265");

The following blog posts describe in more detail the architectures of Calabash-Android and Calabash-iOS:

http://blog.lesspainful.com/2012/03/07/Calabash-iOS/

http://blog.lesspainful.com/2012/03/07/Calabash-Android/

The Calabash HTTP clients (platform protocol drivers) which I have implemented – namely, the AndroidFranklyDriver.cs and the IOSFranklyDriver.cs - have full support for querying elements, sending keyboard keys, and touching platform components like buttons.

The protocol works a bit differently for Calabash-iOS, you need to send keyboard characters to the /keyboard HTTP endpoint, and any touch events to the /play HTTP endpoint. Then if you do that, you also need an “event” value as part of your HTTP request POST data. The value of this “event” property is a base64 string which encodes the exact touch command that you are executing on the device/simulator. Here are all the currently supported commands, and their base64 strings, respectively:

https://github.com/calabash/calabash-ios/blob/master/calabash-jvm/src/resources/events/

Here is an example of a Calabash-iOS HTTP request/response to tap on a button (touch event):

URL: http://10.0.1.10:37265/play

Content-Type: application/json

Request POST data:

{

  "events": "YnBsaXN0MDCiARLVAgMEBQYHCAkOEVRUaW1lVERhdGFeV2luZG93TG9jYXRpb25YTG9jYXRpb25UVHlwZRMAADAlq7xUgk8QQAEAAAABAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAICAgAAAIA/AACAPwAALEMAAH5DAECKQAAAAADSCgsMDVFYUVkjQGWAAAAAAAAjQG/AAAAAAADSCgsPECNAZYAAAAAAACNAb8AAAAAAABELudUCAwQFBhMUFRgREwAAMCWuVOtDTxBABgAAAAEAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAgIBAAAAgD8AAIA/AAAsQwAAfkMAAAAAAAAAANIKCxYXI0BlgAAAAAAAI0BvwAAAAAAA0goLGRojQGWAAAAAAAAjQG/AAAAAAAAACAALABYAGwAgAC8AOAA9AEYAiQCOAJAAkgCbAKQAqQCyALsAvgDJANIBFQEaASMBLAExAToAAAAAAAACAQAAAAAAAAAbAAAAAAAAAAAAAAAAAAABQw==",

  "query": "button"

}

Response:

{"results":["<UIRoundedRectButton: 0x7487840; frame = (29 50; 239 44); opaque = NO; autoresize = TM+BM; layer = >"],"outcome":"SUCCESS"}

(the “query”: “button” key/value means querying for controls of type “button”)

Here is an example of a Calabash-iOS HTTP request/response to send a keystroke to an input field – after the keyboard is opened:

URL: http://10.0.1.10:37265/keyboard

Content-Type: application/json

Request POST data:

{

  "key": "y",

  "events": "YnBsaXN0MDCiARLVAgMEBQYHCAkOEVRUaW1lVERhdGFeV2luZG93TG9jYXRpb25YTG9jYXRpb25UVHlwZRMAACxOMOM7BE8QPAEAAAABAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRAICAgAAAIA/AACAPwAAAEIAgLBDAdE4ANIKCwwNUVhRWSNAQAAAAAAAACNAdhAAAAAAANIKCw8QI0BAAAAAAAAAI0B2EAAAAAAAEQu51QIDBAUGExQVGBETAAAsTjJSfK5PEDwGAAAAAQABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAZECAgEAAACAPwAAgD8AAABCAICwQwEAdUPSCgsWFyNAQAAAAAAAACNAdhAAAAAAANIKCxkaI0BAAAAAAAAAI0B2EAAAAAAAAAgACwAWABsAIAAvADgAPQBGAIUAigCMAI4AlwCgAKUArgC3ALoAxQDOAQ0BEgEbASQBKQEyAAAAAAAAAgEAAAAAAAAAGwAAAAAAAAAAAAAAAAAAATs="

}

Response data:

{"results":["<UIKeyboardAutomatic: 0x72d0610; frame = (0 0; 320 216); opaque = NO; layer = >"],"outcome":"SUCCESS"}

The above sends the “y” character to the keyboard in an iOS app. Visually, this will mean that the “y” character is tapped in the app, in a visible keyboard. If the keyboard is not visible, the response will have a FAILED “outcome” value.

You need to keep in mind several things when compiling and running the attached zip files:

• All projects are placed in a single, multi-platform.zip

•  Each folder represents a project for a different platform

• The TODOApp folder contains the iOS XCode project

•  I’ve deleted the calabash.framework library from the XCode project, because it’s around 27 MB. If you have troubles compiling and running the project, please refer to this guide, you can run the commands and re-initialize the project (by setting it up again), so that the lib reference is added again:

https://github.com/calabash/calabash-ios => “Fast Track”

• Note that Calabash follows a different approach with iOS7 and XCode5. The iOS7 support is actually experimental, and I suggest waiting a bit until it’s stabilized, if you really want to use iOS7. This link talks about the differences and the issues with iOS7/Calabash:

https://github.com/calabash/calabash-ios/wiki/A0-UIAutomation---instruments-problems

•  The TODOApp folder contains the whole Visual studio solution, which contains the apps for WPF and Web, the 4 test projects, as well as the 4 framework projects; it also contains a Framework.Common project which contains the base Frankly protocol driver for the AndroidFranklyDriver and the iOSFranklyDriver

•  You need to run Visual Studio as an Administrator, otherwise some of the automation framework & code may fail

• The contents of the bin and obj folders in the VS sln are emptied on purpose, because they make the zip file huge. The same applies to the contents of the NuGet packages folders, you will need to add the missing assembly references either via NuGet, or by hand

• The Android project is in the Android folder – the actual project is a subfolder called TODOApp

• If you have any issues running / compiling the android project, please re-initialize the calabash dependencies in the following way:

https://github.com/calabash/calabash-android/wiki/Running-Calabash-Android

Now that you’ve setup everything, you can develop and run the tests from Visual studio – on 4 different platforms!

As a conclusion, I would like to sum up the advantages of this multi-platform testing approach:

• You achieve complete reuse of both test definitions, as well as test (step) implementations

• You and your teams are focused on business requirements

• The multi-platform nature forces test definitions to be good (remember the example I gave you)

• You use one IDE and all tooling has common usage -  intellisense, autocomplete, etc.

• You use the same test runner for all your platform tests (MSTest, in my case)

• Because you use the same test runner, you can easily use the same Continuous Integration framework/platform

Let's see how these advantages could directly translate to ROI. If developing an automated test cost $ 50, and I mean all the costs associated with the development and maintenance, and you have 4 platforms to cover and $1,000 scenario tests in total, this means your organization needs to spend roughly $ 200,000 on those tests. Now, assume that the cost of writing and maintaining a platform driver approximates $ 0, as we are adding more and more tests for our app. Then, since we are writing once, running in  one place, and maintaining once, we need to spend just $ 50,000. Now think about all the extra goodness and reuse you get from being able to easily reuse cucumber steps for your scenarios - just because they are so isolated and self-contained ... oh yeah!

I hope you have enjoyed this content – please let me know if you have any suggestions, questions or comments! If you encounter any issues with the environment setup please let me know – it can be quite overwhelming considering the mere number of different frameworks, platforms and versions involved.

With every release comes a set of release notes that reflects the state of resolved bugs and new additions from the previous release. You’ll find these notes useful to help determine the resolution of existing issues from a past release and as a means of determining where to test your applications when upgrading from one version to the next.

Release notes are available in both PDF and Excel formats. The PDF summarizes the changes to this release along with a listing of each item. The Excel sheet includes each change item and makes it easy for you to sort, filter and otherwise manipulate the data to your liking.

In order to download release notes, use the following links:

WinForms 2013 Volume 2 Service Release (Build 13.2.20132.1011)

• PDF - Infragistics WinForms 2013 Volume 2
• Excel - Infragistics WinForms 2013 Volume 2

WinForms 2013 Volume 1 Service Release (Build 13.1.20131.2089)

• PDF - Infragistics WinForms 2013 Volume 1
• Excel - Infragistics WinForms 2013 Volume 1

WinForms 2012 Volume 2 Service Release (Build 12.2.20122.2123)

• PDF - Infragistics WinForms 2012 Volume 2
• Excel - Infragistics WinForms 2012 Volume 2

With more than 100+ controls, Infragistics Windows Forms is the most mature, fully-featured Windows Forms product on the market. With features that cover every aspect of enterprise software development including Microsoft Office style user interfaces, high performance dashboards and reports, and full modern experiences with touch & gestures. In 13.2 we've added exciting UI patterns usually only found in a Window Store modern UI applications. With the new Radial Menu & Live Tile View control, along with full touch & gesture support across controls, developers can build touch-first modern experiences for devices like Microsoft Surface that look & feel like the most modern applications on the market today.

Radial Menu

Inspired by Microsoft OneNote MX, the Radial Menu is a new UI pattern that optimizes the experience of menu navigation & selection on a touch device. The radial menu contains a hierarchical structure of items, such as font selection or color selection that a user can interact with using touch or mouse input.   The control is designed around the concept of Tools, we provide a set of predefined Tools types, but you can create your own tools as well.  Some of the Tools we provide include what you would need to recreate something like the OneNote MX experience:

• Button Tool

• Color Tool

• Numeric Tool

• Numeric Gauge Tool

• List Tool

• Font Name Tool

The nice thing about this UI pattern is that it can be used for any type of touch experience.  We are shipping a showcase sample called INGear which used the Radial Menu as a data filter tool … in a touch friendly or mouse experience.

Here is a nice video of this experience in action.

[youtube] width="560" height="315" src="http://www.youtube.com/embed/DnWAYP4Zen4" [/youtube]

Live Tile View

A major player in the UX essentials of delivering a modern app experience in Windows 8 is the Live Tile of the Start Screen. The new LiveTileView enables you to emulate touch digitizer input, gesture support, animations, and multiple tile sizes & high and low DPI scaling that is delivered in the Windows 8.1 Start Screen.

Live Tiles play a key role in the Windows 8 experience - bringing relevant and important data & information to the user - and can now play the same role in Windows Forms application experience:

• Serve as a "front door" to an application

• Keep users connected with updated data

• Paint a complete picture

• Deliver personal information

• Draw you into an experience

• Remind you of something

• Show what's next up

• Notes for while you were away

• An extension to an app

Features that can be highlighted in the LiveTileView home page, each one can include a screen shot:

• Gesture support - Full support for touch digitizer input, with support for gestures such as panning, zooming, and press-and-hold.

• High Density Displays - Support for multiple pixel densities including:

• Low (less than 1366)

• Normal (1366 X 768)

• High Definition (1920 X 1080)

• Quad XGA (2048 X 1536)

• Predefined Template Support - Tiles come in the four Windows 8.1 size options - Small, Medium, Wide, and Large

• Heading Support - There are four different text sizes for a tile: Block, Heading, Normal, and Small (in descending size order).

• Badge Support - A "badge" or small informative icon can be displayed on the tile's lower right corner

• Styling - AppStylist support is built in, as well as support for the new Windows 8 themes we are shipping in 13.2

Here is a cool video that demonstrates the features of the INTune showcase sample we are shipping with 13.2 so you can learn how to build a Live Tile experience yourself.

[youtube] width="560" height="315" src="http://www.youtube.com/embed/BaxjGrXf3ZU" [/youtube]

Touch Experience Across All Controls

With the continued move to tablet's and touch enabled devices, we've completed the touch story for the Windows Forms controls, so you can deliver a modern experience against any touch device that support Windows Forms.   This includes touch friendly gestures for panning and flicking, as well as support for gestures like tap, tap & drag, double tap, tap and hold. 

In 13.1, we included the UltraTouchProvider, which is a code-free way to add a touch experience to any form by expanding any interactive ‘clickable’ area of the control to a minimum of 9mm, which is the standard minimum size for a touch interaction. 

The controls we enabled with touch in 13.1 were:

• Editors
• Grid
• Tabs
• List View
• Tree Value List

In 13.2, we finished adding touch features, which includes these controls:

• Desktop Alert
• DockManager
• ExplorerBar
• Message Box
• Schedule controls: Day, Week, Month Views and Calendar
• Timeline
• GanttView
• Office Ribbon

Here is an example of the Explorer Bar control, with the Metro Theme applied with Touch Metrics enabled.  You can see that there is plenty of room to touch groups and items on the control when touch is enabled.

Office 20103 Style with Touch

With the new Office 2013 Microsoft has introduced a new version of the Ribbon, which gives us an opportunity to deliver the same exact user experience in styling & touch as the Office 13 Ribbon. The new Ribbon style is predominantly similar to the previous versions of the Ribbon with a new color scheme, different styles and a few additional features.

Here are some of the features you’ll get with the new Ribbon style:

• Visual styling - Flat with few borders.

• Pin/Unpin button has been repositioned from the TabItem area to the RibbonGroup area.

• Auto-hide mode The new Office 2013 Microsoft Ribbon also introduced a new feature allowing the user to regain precious screen real estate by hiding the entire Ribbon. We've duplicated this functionality as part of our Office 2013 experience, but also expanded the implementation to be available for our many styles of Ribbon.

• Office 2013 BackStage fills the entire application container, it removes the rendered tab items, and adds a stationary "Back" button above the navigation area to allow the user to close the BackStage.

Miscellaneous Controls

We’ve also made some incremental updates to existing controls.  Here are some of the highlights:

• The new UltraTreePrintDocument allows easy printing of the WinTree control.

• Combo, ComboEditor, WinTree– You can change the delay in between keystrokes when searching these controls.

• Documents Engine– The new PublishingProgress event returns the progress of the operation so you can update the UI accordingly.

• UltraGrid - We have added a property to the UltraGridRow to which enables you to insert page breaks when printing the grid.

• UltraScrollBar - UltraScrollBar now support ScrollTips (tooltips that display based on the currently value while the scrollbar thumb is dragged).

Summary

As you can see, this is a huge release for us.  We’ve been focused in delivering a feature set in 2013 that allows you to build modern, touch-friendly applications in Windows Forms.  If you are looking for more features, or have ideas on improving existing controls, let us know on UserVoice, it’s how we track the top requests for every platform.  And if you have any feedback on this release, or need any clarifications, feel free to email me at jasonb@infragistics.com.

In our 13.2 release, Infragistics continues to deliver high performance enterprise class ASP.NET MVC, HTML5 & jQuery based controls that can power desktop, tablet & mobile phone applications. This release goes beyond the introduction of new controls and features. Ignite UI now features all the essential features for advanced enterprise development in HTML5 to maximize productivity and encourage best practices via popular design patterns.

Key Areas of Focus in 13.2 for Ignite UI were:

• Enhanced Professional Look & Feel – Ignite UI already features the most advanced UI controls for HTML5 developers, providing rich interactive features in a responsive design, unparalleled performance and the ability to handle massive volumes of data. In release 13.2, Ignite UI brings developers new visual defaults and features to enhance the overall look & feel of your web sites and applications.

• Developer Productivity– speed your development with up-front design in Indigo Studio, and then get those assets in HTML & JavaScript Ignite UI pages to kickstart your apps!   That’s right … based on an Indigo design, you can generate HTML5 & JavaScript code assets for your Ignite UI projects.

• Modern Layouts, Responsive Web Design – with the Layout Manager, a powerful new layout control for managing the overall HTML page layout in Web applications by arranging the page elements in pre-defined (but customizable) layout patterns and the Tile Manager, a popular desktop UI pattern with a container based grid layout that allows the end user to expand, collapse & rearrange their screen, you can design dynamic and modern experiences for the browser.  The Grid control is completely responsive, allowing you to use media queries to customize the render on any device size, as well as use the new vertical render mode that allows users to page records on a mobile device.

• Data Visualization– Ignite UI features market-leading Data Visualization controls for Business Charting, Financial Charting and Geospatial Mapping applications & dashboards.  This release includes new chart types and features, and introduces new controls like Linear Gauge, Bullet  Graph, QR Barcode, Doughnut Chart.   We’ve also done a ton of work to improve the look & feel of the charts, so the default experience is more in line with what you might expect.  Features like support for chart titles & subtitles, chart axis titles, drop shadows and gradient brushes, zoombar for financial charting, series highlighting, touch & hover interactions, startup animations, KnockoutJS support, enhanced default tooltips, and curved / customizable callout lines on the pie chart.

Features in this Release

Ignite UI Framework New Features

There are a number of new features that can be considered framework level, or non-control specific. Each of these plays an important part in the story of helping developers build modern HTML / JavaScript or ASP.NET MVC applications.

• jQuery 2.0 Compatibility

• Browser history support - integrating with the open source history.js library

• Implement "fast click" functionality on touch devices for all Ignite UI components to eliminate the built-in browser delays designed for double-click.

• TypeScript type definition files for all UI widgets are included

• MVC5 compatibility for all controls

• Updated Ignite UI Starter MVC Project Updates

• Script Combiner allows more granular control over what script & CSS packages are sent to the browser

• LESS files shipping for our CSS

• The Control Configurator is updated to include new controls

Radial Gauge

Infragistics is introducing a new Radial Gauge control available on multiple platforms, including WPF, Silverlight, HTML5 & iOS.

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.

Linear Gauge

The Linear Gauge provides a simple and concise view of a primary value compared against a scale and one or more comparative ranges.

Key Features

• Fully Configurable Scale– The Linear Gauge control lets you control the Start and End positions of the scale, major and minor tick marks, labels, and color ranges.

• Fully Configurable Range

• Orientation– can be orientated vertically or horizontally

• 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:

  • Custom

  • Rectangle

  • Triangle

  • Needle

  • Trapezoid

• Motion Framework Animations Support – The Linear 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.

• Support for tooltips– The built-in tooltips of the igLinearGauge show the value of the needle, or the values, corresponding to the different ranges respectively. They are initially styled in accordance with the default look of the control, but their look can be customized by templates.

• Integration into Grid– Provide richer, visualizations by templating an igGrid column to contain the igLinearGauge.

BulletGraph

The igBulletGraph control is a jQuery UI control which allows for visualizing data in the form of a bullet graph. Linear by design, it provides a simple and concise view of a primary measure or measures compared against a scale and, optionally, some other measure.

The igBulletGraph control provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.

Key Features

• Configurable orientation and direction – The igBulletGraph control exposes an API for setting the state of its scale’s orientation and direction, so that the look of the graph can be largely customized.

• Configurable visual elements – Each of the visual elements of the bullet graph can be configured in several aspects, such as the performance bar, comparative marker, ranges, tick marks, scale, labels, border, background, and titles.

• Animated transitions – The igBulletGraph control provides built-in support for animation by its TransitionDuration property. The animation effect occurs on loading the control as well as when the value of any of its properties is changed.

• Support for tooltips– The built-in tooltips of the igBulletGraph control show the values used to create the performance bar, the target value or the values, corresponding to the different ranges respectively. They are initially styled in accordance with the default look of the control, but their look can be customized by templates.

QR Barcode

The QR Barcode control (igQRCodeBarcode) control generates QR (Quick Response) barcode images for use in your web application. The control supports the industry-standard encodings and has several options for optimizing the sizing, positioning, and readability of the generated QR barcodes. The igQRCodeBarcode control is configurable in terms of QR-code-specific settings, as well as in look-and-feel (background color, border color and thickness).

Key Features

• Configurable Encoding Mode– The igQRCodeBarcode control is capable of encoding large numbers of characters, using compaction, depending on the types of the characters being encoded. The control can also encode data from character sets other than the default UTF-8.

• Configurable Error Correction Level– The igQRCodeBarcode control is able to restore the encoded data if the barcode is damaged or dirty.

• Configurable Size Version - The igQRCodeBarcode control allows for specifying the number of its modules by the selection of an appropriate size version.

• Styling - The igQRCodeBarcode benefits from configurable background and border colors, as well as thickness.

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. The sections that make up each ring may differ in size or each section within a ring may be the same size.

The Doughnut Chart control was introduced in Ignite UI release 13.1 as a CTP control and now ships as a final RTM control in release 13.2.

Key Features

• 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. The center does not typically represent data. Each ring can either represent a separate data series that you data-bind via the dataSource option on each ring.

• Configurable Inner Radius – Developers can obtain the center coordinates and radius of the the inner circle of the Doughnut Chart position their canvas and other HTML elements or display any image of their choice.

• 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, including:

  • No labels

  • Labels displayed at the center inside of each section / slice

  • Labels displayed around the edges inside of each section / slice

  • Labels displayed outside of each section / slice, with a configurable LabelExtent distance

  • A BestFit method which automatically chooses whether each label should be displayed inside or outside the chart

• 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 threshold 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.

• Labeling Callout Lines with Curves– This feature adds two types of curves to the straight lines used for the callout lines in the igDoughnutChart and igPieChart. You may choose whether to use a straight line or one of the curves, change the line style and control the spacing between the label and the end of the line.

Data Chart

The Ignite UI jQuery Data Chart is already the most powerful charting control for HTML5 developers. Release 13.2 brings even more goodness to Web and Hybrid app developers with a brand new look & feel, support for gradients, a new range selector, support for the Knockout JavaScript library and more. Release 13.2 also sees the introduction of new features in the jQuery Data Chart to improve the experience as to how users interact with their data in their charts – using the mouse or touch gestures.

Key Features

• New Look & Feel – The Ignite UIigDataChart is already the most advanced HTML5 charting control for developers, providing rich interactive features and over 40 chart types, unparalleled performance and the ability to handle hundres of thousands or even millions of data points. In release 13.2, Ignite UI brings a massive upgrade to the igDataChart visuals and defaults, thus greatly enhancing the overall look & feel of your data visualization web sites and dashboard applications. The visual enhancements include new features, new styles and changes to the defaults in the following areas:

  • Axis Titles

  • Gradients

  • Drop shadows

  • Label Margins

  • Transparencies

  • Gridlines & Aligment

  • Axis Tickmarks

• Support for Chart Title – The title and subtitle feature of the igDataChart control allows you to add information to the top section of the chart control. When adding a title and/or subtitle to the chart control, the content of the chart is automatically resized to allow for the title and/or subtitle information.

• Axis Titles– The axis title feature of the igDataChart control allows you to add contextual information to the x-axis and y-axis of the xamDataChart control. You can customize the axis title by specifying properties of the TitleSettings object such as the angle, font size and position.

• Support for Gradients – igDataChart now support the use of gradient ranges of colors in multiple chart types, including bar, column, area, area spline, waterfall, range area and others.

• Drop Shadows – igDataChart now supports drop shadows to enhance the visuals of individual series. Developers can control various properties such as the shadow depth/offset/direction, color, and blur.

• Series Highlighting– This feature allows you to highlight an entire series or individual items within the series. For example, highlights the entire line in a series such as the LineSeries as it is all one shape; however, highlights can be applied to each individual column in a series such as ColumnSeries. Individual markers can be highlighted in all supported series.

The series highlighting feature is supported for the following series types:

• Category Series

• Range Category Series

• Financial Series

• Hover & Touch Interactions– 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.Startup Animations– This feature allows you to animate the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the ColumnSeries animates by rising from the x-axis, a LineSeries animates by drawing from the y-axis. Refer to the following sample to visually see how the different series are animated, .

• Animated transitions are enabled by setting the IsTransitionInEnabled property to “True”.

• By default, animated transitions are disabled.

• Animated transitions can be configured in terms of transition type, speed of the individual data points relative to each other.

• ZoomBar / Range Selector – The new ZoomBar feature, also known as a Range Selector or Time Navigator, allows developers to attach a second chart window to the data chart to navigate the X-axis range of the chart. Often used to select a date range in financial charting, the ZoomBar is a great tool to visualize a slice of data in a chart without losing sight of the big picture.

• KnockoutJS Support - Support for the Knockout library in the igDataChart control is intended to make it easier for developers to use the Knockout library and its declarative syntax to instantiate and configure chart controls with a clean underlying data model using the popular MVVM pattern.

• Performance Optimization – At Infragistics, we always strives to achieve better performance in our controls. The Ignite UI Chart is a real HTML5 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. Furthermore, when adding new features and making visual changes, we insure that performance not be compromised. Release 13.2 of igDataChart does feature improved performance compared to prior releases thanks to some of those optimization techniques.

• Default Tooltips– by setting the showTooltip property to true, a tooltip is displayed which displays all the information relevant to the particular series item (series title, data values, axis values etc.) and is styled to match the series' style.

Pie Chart

Labeling Callout Lines with Curves– This feature adds two types of curves to the straight lines used for the callout lines in the igDoughnutChart and igPieChart. You may choose whether to use a straight line or one of the curves, change the line style and control the spacing between the label and the end of the line.

Layout Manager

TheLayout Manager is a layout control for managing the overall HTML page layout in Web applications by arranging the page elements in pre-defined (but customizable) layout patterns (called “layouts”).

The igLayoutManager achieves this by positioning the containers in the page according to the selected layout. The control can be used for organizing web pages, as well as single-page applications.

The igLayoutManager is a jQuery UI widget which 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.

The Layout Manager was introduced in Ignite UI release 2013.1 as a CTP feature, and now ships as a final RTM control in release 2013.2.

Key Features

• Productivity and Ease of Use - The igLayoutManageris an easy-to-use and efficient alternative to using tables or manually creating a layout through

  elements. Developers can achieve the most popular web page arrangements, in countless variations, in just a fraction of the time that the standard approach would require.

• 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.

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 maximize, minimize 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.

The Tile Manager was introduced in Ignite UI release 2013.1 as a CTP feature, and now ships as a final RTM control in release 2013.2.

Key Features

• 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 states and size to your tiles and have them automatically applied when the state changes between maximized and minimized.

Grid

• Column Fixing– CTP to RTM – we’ve expanded the features of column fixing during the CTP period to include more interactive features that are supported by the grid.

  • Multi-column headers support
  • Summaries support

• Resizing support
• Updating support
• Percentage column width support
• Filter by Date
• CellMerging support
• FeatureChooser support
• RowSelectors support

• Load on Demand while Scrolling CTP – allows the developer to set the mode of how data is dynamically loaded into the grid as a user scrolls or by clicking a Load More button.

• jsRender Integration– We’ve opened up templating in the igGrid to include support for the popular open source library jsRender.

• Responsive Design Vertical Column Rendering– the responsive igGrid can automatically render columns vertically when set to a phone screen size.

• igGrid / igHieracrhicalGrid Feature Chooser - Re-design appearance to make this the ultimate touch-friendly grid experience.

Browser’s History Integration

Manipulating the browser’s history is a highly required task when a developer creates Single-Page Application and wants a complete user experience. IgniteUI controls - their API and events, allows the developer to easily integrate, popular browser history frameworks, like history.js, with our controls. What the IgniteUI controls propose in order to facilitate history.js integration is:

• Rich event’s context that allows the developer to get the current control state information and add it to the history of the browser.

• Serialize the current state – either in the browser’s URL or save the serialized data in a file.

• Control methods and options that allow recovering control state, when the user navigates back and forward in the browser.

• Common design principles, among all IgniteUI controls, which allows creating better structure of our application design and code.

 

Geospatial Map

High Density Scatter Series - Use the igMap control’s geographicHighDensityScatterSeries series to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays

New Samples Experience

We’ve completely redesigned the sample experience for 13.2. With a complete rewritten sample browser, more helpful learning tools, and a beautiful responsive layout, you get up to speed faster using the Ignite UI controls.   Everything you need is installed with the product, or at http://www.igniteui.com.

• Responsive Web Design to view samples on any device

• Open in JS Fiddle for any sample

• Integrated Help Links

• Sample Navigation with Dynamic Loading

• New Getting Started Page

• Updated Showcase Sample - Healthcare Dashboard

• Updated Showcase Sample - Personal Finance

• New Showcase Sample - Auto Sales Dashboard

• New Showcase Sample - Infragistics Finance

 

 

 

Summary

Hopefully you get the idea that we’ve done a ton of great stuff that will help you build stunning user experiences easier and faster.  Our focus areas included work on controls that have an enhanced professional look & feel, features that will super charge your developer productivity, the ability to build responsive apps with modern layouts, and a continued focus on data visualization new controls & feature enhancements. 

To start seeing these new features in action, go to http://igniteui.com, play with the new samples, download the showcase apps I mentioned, and download the new 13.2 bits today!

If you have any questions or comments, feel free to email me at jasonb@infragistics.com, and of course keep suggesting new features and enhancements at the user voice site.