Quantcast
Channel: Infragistics Community
Viewing all 2374 articles
Browse latest View live

NetAdvantage for Windows Phone Release Notes – April: 12.1, 12.2 Service Releases

$
0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will 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:

Windows Phone 2012 Volume 1 Service Release

PDF - NetAdvantage for Windows Phone 2012 Volume 1 (Build 12.1.20121.2172)
Excel - NetAdvantage for Windows Phone 2012 Volume 1 (Build 12.1.20121.2172)

Windows Phone 2012 Volume 2 Service Release

PDF - NetAdvantage for Windows Phone 2012 Volume 2 (Build 12.2.20122.2147)
Excel - NetAdvantage for Windows Phone 2012 Volume 2 (Build 12.2.20122.2147)


NetAdvantage for Lightswitch Release Notes – April: 12.1, 12.2 Service Releases

$
0
0

Release notes reflect the state of resolved bugs and new additions from the previous release. You will 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:

Lightswitch 2012 Volume 1 Service Release

PDF - NetAdvantage for Lightswitch 2012 Volume 1 (Build 12.1.20121.2000)
Excel - NetAdvantage for Lightswitch 2012 Volume 1 (Build 12.1.20121.2000)

Lightswitch 2012 Volume 2 Service Release

PDF - NetAdvantage for Lightswitch 2012 Volume 2 (Build 12.2.20122.2002)
Excel - NetAdvantage for Lightswitch 2012 Volume 2 (Build 12.2.20122.2002)

Ignite UI and NetAdvantage for ASP.NET DOCTYPE Support

$
0
0

Web browsers determine how to render the markup of a web document using the Document Type (DOCTYPE) Declaration. The DOCTYPE must be placed at the top of the document and should appear as specified by the W3C. The following are the supported DOCTYPE declarations for Ignite UI® and NetAdvantage® for ASP.NET as well as further DOCTYPE considerations.

Ignite UI

Ignite UI is a set of components based on modern web technologies and specifications. The components are fully tested to work with an HTML5 DOCTYPE.

<!—- HTML5 --><!DOCTYPE html>

NetAdvantage for ASP.NET

The NetAdvantage for ASP.NET product has a rich history and began when the .NET Framework CLR 1.0 was still in use. During the years following, developers used various recommended DOCTYPE declarations in their applications.

Currently to ensure the highest compatibility for NetAdvantage for ASP.NET components, use either an HTML5 or an XHTML 1.0 transitional DOCTYPE.

<!—- HTML5 --><!DOCTYPE html><!—- XHTML 1.0 Transitional --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Quirks Mode

Quirks mode rendering is the browser default when there is a missing or malformed DOCTYPE declaration. Modern browsers support this for legacy purposes but it is not recommended for modern web applications nor supported with Infragistics® controls.

Other DOCTYPE Declarations

Using a different DOCTYPE than listed above does not guarantee the controls perform incorrectly and you should decide carefully how to use DOCTYPE declarations in your application. Furthermore because support for all variations of DOCTYPES is not possible, it is recommended to use the declarations listed above.

NetAdvantage for Windows Forms Release Notes - April: 12.1, 12.2 Service Releases

$
0
0

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 2012 Volume 2 Service Release (Build 12.2.20122.2061)

PDF - NetAdvantage for WinForms 2012 Volume 2
Excel - NetAdvantage for WinForms 2012 Volume 2

WinForms 2012 Volume 1 Service Release (Build 12.1.20121.2126)

PDF - NetAdvantage for WinForms 2012 Volume 1
Excel - NetAdvantage for WinForms 2012 Volume 1

Infragistics Parsing Framework - Syntax Tree Pruning

$
0
0

This post is part of a series on the parsing framework provided by Infragistics starting in version 12.2. The previous post in the series can be found here.

Last time we saw how ambiguities can be removed from grammar rules for binary operator expressions, but the resulting syntax tree was relatively dense and contained a lot of nodes which can be ignored by code consuming the syntax tree in most cases. To fix this problem, you have the ability to prune unimportant nodes out of the syntax tree. This can be done automatically for the operator precedence rules we saw in the last post and/or manually by naming specific nodes which should never appear in the syntax tree.

Note: Before I get into the specifics of tree pruning, I want to briefly talk about the upcoming 13.1 release. During this release, there was a lot of work put into the parsing framework (i.e. syntax parsing engine) to bring it from CTP quality to release quality. As part of that effort, decisions were made which required changes to the API as well as the EBNF format recognized by the framework. From now on the EBNF snippets in my posts will use the new format instead of the older 12.2 format. The changes to the EBNF format were in the special sequences containing XML. The normal EBNF grammar rule syntax did not change. Also, I plan on creating a utility soon which will read in a 12.2 EBNF file and write out an equivalent 13.1 EBNF file. When that utility is finished, I will post it here. Going forward, whenever I discuss the parsing framework API I will refer to the 13.1 object model.

As I mentioned above, there are two ways of pruning the syntax tree to remove superfluous nodes, both of which are enabled by default. They are known as “based on children” and “based on name” pruning and they can be specified with the Grammar.SyntaxTreePruningMode property.

Pruning Based on Children

The first pruning mode I’ll discuss is the “based on children” mode. This is necessitated by the problem we saw in the previous post. The operator precedence rules do a good job of disambiguating operator expressions, but they produce a relatively dense syntax tree. This could complicate or slowdown logic which needs to walk over the tree. But when the “based on children” pruning mode is being used, most of that clutter will be cleared up automatically. This pruning mode will remove any non-terminal symbol node which is the parent of a single node which is also a non-terminal symbol node. So, as an example, let’s look at this tree from the previous post:

This tree represents the expression x + y * z using the proper operator precedence, but there is a lot of clutter. If the “based on children” pruning mode were used, the following nodes would automatically be removed because they are non-terminal nodes which own a single other non-terminal node:

So what you actually end up with is this tree:

This is much better than what we started with, but it is not quite as good as it can be. Those P1 nodes represent the mechanics of the operator precedence rules, but they don’t really represent anything meaningful in the document’s grammatical structure. We’d like to remove those as well, and we’ll see how that can be done with the other pruning mode.

Pruning Based on Name

The other pruning mode supported by our parsing engine is “based on name” pruning and it allows you to decide which nodes to exclude from the syntax tree by naming them in a certain way. Specifically, any node with an underscore as the first character of its name will be hidden automatically. For example, if I wanted to re-write the addition and multiplication grammar from the previous post to prevent the “P…” nodes from ever appearing in the syntax tree, I could have prefaced their names with an underscore, like so:

Expression =

_p3;

_p3 =

_p2

| AdditionExpression;

AdditionExpression =

_p3, '+', _p2;

_p2 =

_p1

| MultiplicationExpression;

MultiplicationExpression =

_p2, '*', _p1;

_p1 = id;

Now the syntax tree for the expression x + y * z will look like this when both pruning modes are used:

And this is as sparse as a concrete syntax tree can get while still representing the original expression. So the “based on name” pruning mode allows you to create non-terminal symbols to represent the mechanics of parsing your grammar without exposing them in the final syntax tree.

When we first added the “based on children” pruning mode, I’ll admit there was a natural tendency to want to create “helper” non-terminal symbols to represent sequences which are repeated over and over again. This is ok to do in most cases, but be careful, because it can cause two problems. This first is not a huge problem most of the time, but it is still something to keep in mind: performance. Even though these hidden non-terminal symbols are never seen in the syntax tree, the parser still needs to perform a reduce operation, which would normally create a non-terminal node to be the parent of the reduced child nodes. That reduce operation takes time. If common expressions are made to be children of these helper non-terminal symbols, those extra reduce operations could add up and might cause a noticeable slowdown for large documents. However, the parser has been highly optimized, so these reduce operations are done very quickly and in most cases you shouldn’t see a slowdown. And just to clarify: the reduce operation for a helper non-terminal symbol is not any slower than that of a normal non-terminal symbol's reduce operation, so if the common expression was already the child of a non-terminal symbol, making that symbol hidden by using the underscore will not add any overhead.

The second potential issue with these helper non-terminal symbols is much more important: they could lead to more local ambiguities occurring during a parse, which could easily lead to a noticeable performance impact. An example will probably help illustrate this potential problem. Let’s say we have the following grammar rules:

X =

a, b, c;

Y =

a, b, d;

Z =

[a], b, c, d;

There are common sequences there, highlighted in bold, which are repeated. It would probably make more sense to define the sequence once using a helper non-terminal symbol and then just reference it in each place needing that sequence:

X =

_commonPrefix, c;

Y =

_commonPrefix, d;

Z =

[a], b, c, d;

_commonPrefix =

a, b;

This cleans up the grammar a bit and it will still produce the exact same syntax tree as the previous grammar when parsing the same document. However, this grammar will produce local ambiguities that the previous grammar will not. We have added a shift/reduce conflict here. Let’s suppose the parser has already seen tokens for symbols ‘a’ and ‘b’. Then if it sees a token for symbol ‘c’, it doesn’t know whether to shift to the next position in the Z non-terminal symbol or reduce the _commonPrefix non-terminal symbol, so it does both. This is essentially the opposite of the substitution strategy we used to remove ambiguities a few posts back. The main problem with this helper non-terminal symbol is that the sequence “a b” could have been part of another non-terminal symbol, but that sequence could not be replaced by the _commonPrefix because the “a” was optional. So if you are going to use helper non-terminal symbols to organize the grammar and remove duplicated patterns, make sure the helpers do not introduce new conflicts/ambiguities into the grammar.

There is another use for these helper non-terminal symbols in addition to EBNF cleanliness. They can help to lower the complexity of non-terminal symbols (measured by the number of productions with the non-terminal symbol as their head). EBNF allows you to define optional and repetition sequences pretty concisely, but it can also hide the complexity generated by those sequences. The parsing engine always needs to process grammars in terms of their productions, each of which specifies a single sequence of symbols that a non-terminal symbol can represent. So a simple EBNF rule like S = A, B; has a single production for the parsing engine to consider: S → A B. However, if the A is optional, as in S = [A], B;, there are now two productions because the A can either be present or omitted:

  1. S → B
  2. S → A B

If both the A and B are optional, as in S = [A], [B];, there are four productions:

  1. S
  2. S → A
  3. S → B
  4. S → A B

This is an exponentially growing problem. A grammar rule with N optional sequences concatenated together will have 2N productions created. Our parsing engine only allows for 65,536 productions per grammar, so all it would take is a grammar rule with 16 optional symbols concatenated together to hit the maximum number of productions. So how can helper non-terminals…umm…help here? Well, let’s take a look at this extreme example:

S =

[A], [B], [C], [D], [E], [F], [G], [H],

[I], [J], [K], [L], [M], [N], [O], [P];

This single grammar rule has 16 optional sequences concatenated together, and so it produces 216, or 65,536 productions. The problem here is that each option compounds on the complexity of the other options before it. So if we split up the options to be in separate non-terminal symbols, they won’t compound on each other as much. We can do this and still produce an identical syntax tree by using a pruned non-terminal symbol:

S =

[A], [B], [C], [D], [E], [F], [G], [H], _theRest;

_theRest =

[I], [J], [K], [L], [M], [N], [O], [P];

And now the S non-terminal only has 8 optional sequences so it produces 28, or 256 productions. But so does _theRest. So together, this grammar produces 512 productions, which is much less than the 65,536 we started with. What we essentially did was take something like this:

2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 65536

And we replaced one of the multiplications with an addition:

2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 + 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 = 512

This problem of complexity, and the assistance that helper non-terminal symbols can offer to reduce it, is not limited to optional rules. Alternation rules have the same problem. So, for example, this rule has 3 choices concatenated with 4 choices, which creates 3 * 4, or 12 productions:

S = (A | B | C), (D | E | F | G);

And when the choices are in optional brackets, another choice is added to the group, because one choice is to exclude all of them:

S = (A | B | C), [D | E | F | G];

Now the second group in this rule has 5 choices (D, E, F, G, or nothing). This combined with the 3 choices in the first group results in 15 total productions. Helper non-terminal symbols can reduce complexity here as well if they are used to take the place of some of the more complex groupings:

S = (A | B | C), _secondGroup;

_secondGroup = [D | E | F | G];

Now there are 3 productions for S and 5 productions for _secondGroup resulting in 8 productions in the grammar instead of 15. We took 3 * 5 and changed it to 3 + 5.

In 13.1, we’ve added a Grammar.Analyze() method which, among other things, will warn about non-terminal symbols being too complex. By default, it will warn about non-terminal symbols which create over 100 productions, but that threshold can be specified via options to the method. This method also helps detect shift/reduce and reduce/reduce conflicts, but I’ll go more into detail on that in a future post.

Preventing Nodes from Being Pruned

These pruning modes can help in most cases, but sometimes they aren’t always helpful. You may have certain non-terminal symbols which do have meaning in the grammatical structure of the document, but which own a single non-terminal symbol, or which have an underscore at the start of their name. For example, in a grammar to describe the Visual Basic .NET language, these might be some of the rules that describe method arguments:

Argument =

SimpleArgument

| OmittedArgument

| NamedArgument;

SimpleArgument =

Expression;

OmittedArgument =

;

NamedArgument =

IdentifierToken, ColonEqualsToken, Expression;

Based on this definition, Argument and SimpleArgument will never have nodes in the syntax tree if “based on children” pruning is used because they can only be formed by being the parent of another non-terminal node. This may be acceptable, or it may be the case that your logic needs to know when it is processing an argument expression and so you need the SimpleArgument, OmittedArgument, or NamedArgument to be included in the syntax tree. To make sure that SimpleArgument never gets pruned from the syntax tree, you can set the NonTerminalSymbol.PreventPruning property to true on the SimpleArgument symbol. This can also be done in EBNF like so:

?<NonTerminalSymbolOptions PreventPruning="true" />?

SimpleArgument =

Expression;

Note the new special sequence syntax for specifying NonTerminalSymbol properties in 13.1

Now the SimpleArgument nodes will always appear in the syntax tree when they are parsed.

Next time we’ll get back to ambiguities and talk about the dangling else ambiguity and how letting it be ambiguous might be the best solution to produce a better syntax tree structure.

By Mike Dour

The information contained herein is provided for reference purposes only.

Copyright © 2013 Infragistics, Inc., All Rights Reserved.

jQuery Grids and Responsive Web Design

$
0
0

Responsive Web Design and jQuery GridsResponsive Web Design has been abuzz for some time now. In case you just now clash with the term, it’s a web design approach aimed at crafting sites to provide an optimal viewing experience across a wide range of devices. Basically, a CSS3 / JavaScript / jQuery powered  site that adjusts itself to better suit the screen it’s on, with the added bonus of keeping a single code base. What’s not to like? Well besides it’s often abbreviated ‘RWD’ which outside of the IT fields stands for Rear-wheel drive, so slightly confusing for people into both.. but that’s a minor issue. Other than that, it’s pretty awesome, but also sometimes hard to implement – some elements of a Web app simply don’t handle well squishing into smaller spaces. Complicated enterprise applications might even require quite a bit of extra work – and as you know with Ignite UI we want to help you get the extra work out of the way! And what do heavy business apps use? Grids, of course!

Now, how do you imagine a big table with a few columns and at least a few hundred rows is to fit in portrait mode on tablets and event more so on phones? The limited space calls for some changes and I’m quite excited to tell you your jQuery Grids will soon (and I mean soon – 13.1 is right around the corner) be equipped with the Responsive feature, ready to fit right into your RWD site! Do I hear clapping? Yeah, that’s not some simple data table we are talking about here – a full-fledged,feature-packed jQuery Data Grid and its Hierarchical version– they can do so much you might as well just make a whole app out of them. A responsive app!

Lastly, if you are in for a quick start with the whole toolset and related concepts you can Get Started Learning Ignite UI Today! The more you know, the more exciting this will be.

What can it do for you and what can you do with Responsive!

The main star of the Responsive feature is allowing you to know in what ‘state’ the app is running and define separate grid and column settings for each to make the best of whatever space you have. For example only do a few major columns for a phone view, some more for a tablet:

The Ignite UI Grid with 3 columns visible in phone modeThe Ignite UI Grid in tablet mode

And the all the extra stuff when you have the space:

The Ignite UI Grid with all columns visible in desktop mode

The feature allows you to trigger column visibility based on CSS classes – with a slight nod towards those familiar with or already using popular responsive UI frameworks like Twitter Bootstrap. The RWD Grid comes with 3 modes (mode recognizers if you will, we can work on the naming), that are used to match predefined or custom states ( such as ‘phone’, ‘tablet’ and desktop). Mode Recognizers if you will, but we can work on the naming:

  • Responsive mode – the base
  • Infragistics mode
  • Bootstrap mode

The base implementation looks at the window width, but the Infragistics and Bootstrap profiles rely on CSS3 media classes through a set of classes. Actually here is where Bootstrap comes with their set of media queries and specific classes, that many of you should find familiar. It’s not as simple as putting CSS classes on table cells, though! The igGrid is way too complex for that, but the Responsive feature does the next best thing – hiding columns thought the API methods and detecting when to do that using the class on a test element. I actually love this technique, because that’s how you do a ‘matchMedia’ polyfill (because most mobile browsers support media queries, but not 'matchMedia') and I always thought it was super clever workaround. But anyways, the point is that though CSS you can define when columns will be visible and the grid will do the rest for you. I’ll actually just include a shot of the Twitter Bootstrap description that should be clear enough:

Twitter Bootstrap's Responsive utility classes

Basically what you do is have you classes in CSS - the ones that come with Bootstrap as above, or the ones from Ignite UI CSS that are pretty much the same, but with out usual “ui-“ prefix, so it’s “ui-visible-phone” and so on. Basically, you need the classes in there – if you are using Bootstrap – great, you can reuse, otherwise we will provide you with them. Those classes are assigned in the column settings on the feature (remember, they are for the test element only) and it really is as simple as adding the Responsive feature to your grid with settings similar to this:

features : [{
name : 'Responsive',
columnSettings : [{
columnKey : 'name',
classes: "ui-visible-phone"
}]
//....

Or you can even configure visibility though simple properties that match the mode’s profiles:

// ...
features : [{
name : 'Responsive',
{
columnKey : 'BusinessEntityID',
configuration: {
phone: {
hidden: true
}
}
}
// ...

A Template for every occasion

So hiding columns is not enough? Well the Responsive feature kindly offers additional configuration options by providing templates for separate modes. You heard me right – you can swap the entire grid template on every mode and in the same configuration as above, where you define state for modes, you can also add column template specific to each mode! So that’s quite something – with templates you can change the look and feel of the entire grid between modes – shift controls templated into cells back to data or the other way around, merge columns and more! Just keep in mind the row templates are final and will override column ones if mixed.

Customizable, we need it to be customizable!

And so we hear – there’s a whole bunch of settings you can change for way the feature works. The sheer fact that the responsive modes can be quite a few – you can use the classes and have the designer decide thought media queries when exactly should the modes be triggered! That in itself sounds like a good foundation to keep design consideration out of the code.

Then you also have the option to create your own modes… for example have one specially targeted at “phablets” or something like this or any custom width and CSS media query you can think of. You can also extend and define your own mode recognizers (profiles) where you can not only define custom modes, but also use custom logic to say when they are active. That means you responsive grid doesn’t need to depend on CSS or not even on window width..it can be anything you see fit!

Eventful

Well, it’s not just automatic column hiding and template switching.. There’s a whole lot more! The numerous events you can react to are simply a powerhouse of a customization point – you can react to mode changes or even to separate columns going away or coming into view – either way at any point you can perform additional work to improve you app’s experience! You can reduce page sizes, group records, filter, sort or anything you deem helpful. You can even use the Responsive feature events as hooks for script-related modifications of your entire page/app – after all it’s already monitoring the state of the device, you might as well make full use of that! As you can imagine there are great many possibilities of what you can do.

Settings

Besides the elaborate per-column configuration and per-mode settings already mentioned, the Responsive feature doesn’t have that much:

  • A general setting that will ensure the grid will stretch the full 100% of its parent, overriding other settings.
  • A sensitivity setting defining just how much of a change there should be before the feature would react to changes in window width. Performance implications here obviously.
  • And finally the option to disable monitoring container resizes as a whole – again some performance gains and pretty much the difference between a responsive and fluid behavior. If you are interested in that sort of stuff check out the info for our conference below.

Power to the user

Trust me when I say I appreciate every effort a developer has made to improve my experience using a site and I get annoyed when I have to scroll left and right to read a single sentence. But then again, I’m also a user who doesn’t like his capabilities being taken away unconditionally. Yes, responsiveness can bring better experience, but only if you don’t take away from important content and functionality without the option to get them back. Basically, I hate when something gets hidden permanently on some mobile device and I can’t find it. It’s infuriating, even more so with RWD where I can’t just skip to the desktop version and make do.

In the case of the Ignite UI Grid that would mean using the Responsive feature to hide columns that might contain required information. There’s usually a reason for that data to be there and simply removing it from the picture just cuts of functionality from the app! Best part is that the Column Hiding feature will provide the UI when Responsive kicks in for free:

Column Hiding UI with Responsive feature

This is something I personally can’t see such a feature without. So, in case you are hiding columns, please consider giving the user the option to control what he’s seeing.

Resources

This has been more a general overview of the Ignite UI jQuery Grids’ Responsive feature aimed at Responsive Web Design (RWD) and a kind of a teaser for the upcoming 13.1 goodness. I’ll be making some more blogs with more code, demos and tricks very soon, so stay tuned!

 

  • Just in case you are joining us tomorrow for a day filled with JavaScript related talks at JS Saturday and the topic of Responsive Web Design and Fluid design interest you – make sure to visit the session by our very own Konstantin Dinev!
    JavaScript Saturday: Sofia, Bulgaria.

I’d love to hear some thoughts, so leave a comment down below or @DamyanPetev.

And as always, you can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!

The Best TED Talks for Developers

$
0
0

TED, which stands for “Technology, Entertainment, Design,” is a set of conferences with the stated aim of showcasing “ideas worth spreading.” The conferences were founded in 1984 by graphic designer Richard Saul Wurman, and from those very early days the emphasis was on technology and its related topics.

It wasn’t until 2006 that the talks took a real hold on the public conscious, when they began to be streamed for free online (via TED.com). As of November 2012 TED talks have been viewed over 1 billion times online. Some notable names who have given talks since they moved online are: Bill Gates (founded Microsoft), Stephen Wolfram (created Mathmatica), and J. J. Abrams (the film director).

There are TED talks for almost everyone, we bring you 5 TED talks every developer should watch:

  • Kevin Kelly on the next 5,000 days of the web. Kevin Kelly founded Wire magazine, and in this video he speculates about the future of the web. His ideas and thoughts will have huge ramifications for every developer. Well worth a watch.
  • John Underkoffler on gesture-based computing. This talk might be 3 years old now, but John Underkoffler’s ideas on gesture interfaces (he created everything you see in the Minority Report film) are still valid today, and will make all developers think about how people can interact with their creations.
  • Jeff Hawkins: How brain science will change computing. Jeff explains how the more we understand the human brain, the more we need to rethink the future of computing. Will change your ideas of what computing can be.
  • Kevin Slavin: How algorithms shape our world. This talk looks at algorithms, and explains that they aren’t just something programmers need to know to write code, but actually are all around us in everyday life.
  • Mitch Resnick: Lets teach kids to code. This is a fascinating look at how children of the future could actually be better off learning to code, rather than learning French, Spanish, or other foreign languages.  This talk is given by the director of the Lifelong Kindergarten group at MIT Media Lab.

Ignite UI Release Notes - April: 12.1, 12.2 Service Releases

$
0
0

NetAdvantage® for jQuery is now named Ignite UI™. Please see this blog post for more details. 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 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.

Download the Release Notes

Ignite UI 2012 Volume 1

Ignite UI 2012 Volume 2


jQuery UK Conference - Oxford 2013

$
0
0

The jQuery UK conference starts April 19th. Infragistics is proud to be a key sponsor, and we’re thrilled to show off our HTML5/jQuery toolset, Ignite UI. It is not too late to come along too if you’re just hearing about it.
                                                                                                                                  
In fact, we’ve got a discount code that will give £99 off the standard conference ticket, but be quick! They are limited to the first 10 customers. Use the code “infragistics” to claim the discount.

jQuery UK opens with the creator of JavaScript and Mozilla CTO Brendan Eich. We are really excited to be sharing the spotlight with Brendan; it is an interesting time for JavaScript and Mozilla so surely he’ll have plenty to say.

The rest of the day is packed with world class speakers covering not only jQuery but the latest tips and tools from the wider JavaScript world and beyond, including a 45 minute walk through of Chrome DevTools from the world’s leading DevTools expert Ilya Grigorik from Google.

jQuery UK’s going to be a busy and exciting event with great presentations in the day, rising stars presenting in a smaller second track of 15 minutes each over lunch and into the afternoon, and Code Club demos. But why stop there, when you can combine happy hour with a play on words – join us for the jBeery festival where Infragistics will debut our Ignite UI craft brew.

The day after jQuery UK, we're taking our JavaScript skills to the races at Hack Day! The cars can be controlled over WiFi and we’ll experience video from an on-board webcam. See you at the finish line.

Build beautiful Android apps with our Iguana UI controls

$
0
0

It is easy to think that Apple has the monopoly on beautiful mobile apps, but that just isn’t true. The Android platform is home to some stunning products, and here at Infragistics we are doing our bit to help. We have a large number of tools and products that can help you build great looking, new, and innovative Android applications. These products include:

  • IndigoStudio - A rapid prototyping tool for creating animated user interface mockups. Indigo Studio is an extremely powerful tool that can help you get the UX of your Android app just right. And best of all, version 1 of the tool is totally free, and always will be (future versions will be paid).
  • IgniteUI - Ignite UI offers standards compliant ASP.NET wrappers and pure client side jQuery controls. It can be used to turbo charge the performance and capabilities of your Android apps, by providing rocket-fast performance and stellar data visualization.
  • IguanaUI - The Iguana UI pack is our dedicated Android set of controls. A true community effort, these controls have been developed with the help of Android developers themselves. With this closed source library of high end controls we have taken a “release early, release often” approach to give you the best possible tools.

The Iguana UI pack currently consists of a powerful Data Chart control, capable of displaying hundreds of thousands of data points on numerous types of charts. Built-in support is provided for multi-touch gestures, offering intuitive ways to pan, zoom, and drill down into the data.

The possibilities for “data rich” Android apps are limited only by the imaginations of developers, and we are excited to see what the community can come up with. Here are a few ideas for apps to provide some inspiration:

  • Sleep and health monitoring apps are very popular this year. Why not build an app to help users monitor how many steps they take a day? The app could then provide beautiful charts showing how active the user is over days, weeks, and months.
  • Lots of people in the web development community make huge use of Google Analytics and other web stat services. Why not build a rich data app to put these numbers in people’s pockets?
  • In these turbulent financial times many people are trying to carefully control their money. Why not create an Android app to help people monitor their budgets or weekly spend? The Iguana UI Chart control can help you build easy to read charts summarizing the data.

Important Developer Resources for a JavaScript Newbie

$
0
0

JavaScript is client side scripting language used in almost all modern websites and Web applications. JavaScript can enhance User Experience of a website and provide rich interactive features. With latest HTML specs, more and more developers are inclining towards JavaScript development. Here are few tools that will help you get started.

 

Tools to help JavaScript Development:

Visual Studio 2012 (Windows): Visual studio is one of the popular IDE's and as a .NET developer you would love coding JavaScript on this IDE. It supports JavaScript as a first-class language. You can use most of the standard editing aids (code snippets, Intellisense, etc.) in Visual Studio.

Here is a video by Scott Hanselman showcasing VS2012 JavaScript Editor.

clip_image001

Webstorm 6 IDE (Windows/ Mac OS X/ Linux): Intelligent JavaScript IDE with refactoring, code completion and on-the-fly code analysis support. It’s light-weight and sports a JS code editor, debugger (support for putting breakpoints, conditional breakpoints, step-in, step-over etc.)
One of the highly rated JavaScript IDE!

clip_image002

Komodo IDE (Windows, Mac OS X, Linux): Besides the basic IDE features you can integrate any source control with this IDE. Komodo Edit is the free version of Komodo IDE minus the integrated debugger and a few features less. It is free and open-source unlike the Komodo IDE. You still get a code editor, Intellisense and it also integrates nicely with Firefox+Firebug.

I like the tabbed browsing feature, where I can see the reflection of the code changes in real time inside the tabbed browser!

clip_image003

Parsley.js: It provides you with DOM API that lets you validate your forms without even writing a single JavaScript. You can write it in English with Parsley DOM-API using jQuery data API. Your HTML will be cleaner than ever!

JS Regex Generator: It helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.

Browserhacks: It is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. If you face any rendering bug in a particular browser, you may use browserhack to find one of the proposed hacks and use it in your CSS. The source code is available on GitHub.

 

Tools to help identify problems in JS:

JSLint: Let's you verify the JavaScript code errors. You can customize verification algorithms as per your need. It is a code quality tool.

JSHint: Similar to JSLint. A community driven tool.

JSCheck: It is a specification driven testing tool. Also provides some level of self-documentation.

JsUnit: It provides you with a Framework to write repeatable tests in JavaScript.

Blackbird: It offers a simple way to log messages in JavaScript and an attractive console to view and filter them. You might never use alert() again.

 

Tools to share, collaborate web snippets:

Plunker: It is an online community for creating, collaborating and sharing HTML+JavaScript snippets. Let's you do a real-time code collaboration. I use this quiet often for sharing samples on my blog!

jsFiddle: It is playground for web developers, an online editor for web snippets. jsFiddle is Similar to Plunker and supports various frameworks. Since Plunker came in later, it has few additional features.

 

JavaScript Code Minification tools:

JS Minifier: It is a web based tool for shrinking JavaScript code to reduce the overall size of the JS file.

YUI Compressor: It is a JavaScript/CSS compressor. It removes comments and white spaces, and obfuscates local variables using the smallest possible variable name.

 

In this blog I have covered few of the must have JavaScript developer tools.

Looking for JavaScript MV* frameworks? Have a look at this blog series for details.


If you have any questions or suggestions regarding this blog post, please feel free to mail me at anarain@infragistics.com.

 

Cheers
Abhishek
Twitter: @narainabhishek
http://about.me/narainabhishek

What is Twitter Bootstrap?

$
0
0

Twitter Bootstrap is a free set of tools for building web applications. It comprises template files, as well as optional JavaScript extensions. Developed by a couple of engineers at Twitter (hence the name), it was originally designed to help provide some consistency across tools the guys were building internally. Since its first public (open source) release in 2011 (see the blog post here) it has found huge popularity amongst web developers for its ease of use and feature set, and in 2012 was the most popular project on GitHub. Its advocates praise Bootstrap’s ability to build usable apps, with clean code, quickly and easily.

At its heart, Twitter Bootstrap is basically simple good old CSS, but it uses the LESS preprocessor to add a lot more functionality that CSS could otherwise provide. The total package is a tiny 6KB is size, and only comprises seven files. So what features are included? Here is the low down:

  • Layout grid - A standard 940 pixel width grid layout is provided, allowing developers to quickly get an apps page structure sorted. There is an optional variable width layout, should developers wish to use that instead.
  • Support for responsive design - Websites adjust dynamically based on device being using to browse them. The included grid layout comes in four variations for various devices.
  • Interface components - A large number of interface components are also provided. These include standard buttons, labels, preformatted warning and system messages, navigation controls, wizard controls, pagination, and breadcrumbs.
  • Javascript snippets - Again the focus here is on user interface elements. Included is code to help build tooltips, dialog boxes, as well as more traditional form and input elements (including a nice autocomplete feature).

One of the great things about Bootstrap’s success is the sheer amount of support and advice that is now out there on the web. Not only can you find everything on GitHub but sites like webdesigntuts offer really useful guides.

In future weeks we will try and look at some other frameworks, but if you are looking to build a new web app now, you could certainly do a lot worse than look at Twitter Bootstrap to help get you started.

Check out Ignite UI because in 13.1 we are adding Twitter Bootstrap support for more information see Jason Beres blog post “Ignite UI: What’s New in 13.1 HTML5, jQuery & ASP.NET MVC Controls”  

Developer Humor: Lighting Issues

$
0
0

I'm still on this idea of the Wednesday afternoon slump, and I figured everyone else might be feeling the same way out there. I thought it might be nice to share another picker upper with you all:

Software Developer comics by Infragistics Prototyping Tool Indigo Studio

Share the Fun:

You can embed this comic on your blog or website! Simply copy the below code and paste it into your website:

<a href="http://www.infragistics.com/community/blogs/d-coding/archive/2013/04/17/developer-humor-lighting-issues.aspx"><img src="http://www.infragistics.com/community/cfs-filesystemfile.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/d-coding/5684.tech_5F00_cartoon_5F00_02b.jpg" alt="Software Developer Comics" border="0" /></a></code></p>
<br />
<p></p>
<p><a href="http://www.infragistics.com/community/blogs/d-coding/archive/2013/04/17/developer-humor-lighting-issues.aspx">Software Developer</a> comics by Infragistics <a href="http://www.infragistics.com/products/indigo-studio">Prototyping Tool</a> Indigo Studio</p>

Beta HTML Prototype Viewer

$
0
0

Earlier this week we quietly released a pretty significant release for Indigo--the Beta of our HTML prototype viewer!

Indigo HTML Prototype Viewer

You can see in the URL above that it is HTML, right? ;) Well you can also try opening it on any device or browser that doesn't have Silverlight enabled if you don't believe me.

Here's the way the beta works:

  1. You share your prototype as per usual (with or without a password) to our servers.
  2. You just stick .html on the end of your share link to give people the HTML version of your prototype.

We're doing it this way to give you, the designer, the choice of which one to share. Because the HTML is in beta for now, we can't guarantee it is 100%, so we are, during the beta, keeping Silverlight as the default. If you want to try your prototype where Silverlight is not available, or you don't want to ask your clients to install, just add the .html and try it out. If it works, you can share that. Just keep in mind that it is beta.

Please do let us know at indigo at infragistics dot com if you run into any problems, especially if it doesn't appear to run the same in HTML as it does in Silverlight. We are shooting for 100% parity.

Once we have more testing and your feedback, we will move from beta to release on this, and we will share HTML prototypes by default, both to our servers and to yours.

Enjoy!


About Indigo Studio

If you haven’t already, why not Go Design Something!? Version 1 is free forever.

If you are using Indigo, we welcome your ideas on how we can better apply and refine these and other good interaction design principles to help you to design awesome UIs. If you have any questions or problems, please don’t hesitate to discuss them with us in our forums. We’re also on Twitter @indigodesigned.

About the Author

Ambrose Little is principal design technologist at Infragistics and has worked on Indigo Studio as interaction designer and product manager along with an awesome team based here in Cranbury, NJ, USA and Montevideo, Uruguay.

Infragistics Releases 13.1!

$
0
0

The wait is over! This morning, Infragistics released NetAdvantage Ultimate 13.1 and our related 13.1 toolsets and products to the community. Ultimate 13.1 is the only design and development toolset on the market that lets you create both hybrid and native mobile applications, in addition to modern and touch-friendly apps for the desktop and web. The release includes updated versions of our WPF, Silverlight, iOS (NucliOS), ASP.NET, and HTML5/jQuery (Ignite UI) toolsets, as well as brand new to market Windows UI controls. Ultimate also features the new Indigo Studio design tool which lets you create rapid, interactive prototypes of your application UIs while maintaining your focus on your users, and whole lot more.  

Highlights in this release of Infragistics NetAdvantage platform include:

  • New toolset NetAdvantage for Windows UI offering 20 XAML and HTML controls for native Windows 8 app development.
  • Greater breadth and depth of the NucliOS controls, including over 35 Chart types, Grid enhancements, and Xamarin.iOS support (MonoTouch), so you can create native iPad and iPhone apps in C#.
  • Responsive UI Framework of the Ignite UI (HTML5/jQuery) Grid and Chart to control screen behavior when it’s resized for different devices, as well as new Pivot Grid, Tile Manager UI, and Gauge controls for mobile business intelligence.
  • New Doughnut Chart control, and enhancements to the Geographic Map and Data Chart for Silverlight and WPF.
  • Optimized touch-experience controls across all UI toolsets and Windows UI/touch themes for more modern application development.

If you’re looking for more information on a specific toolset, check out these detailed rundowns:

In addition, if you have any questions about Infragistics’ 13.1 release, we would love to hear from you! Here are some of the best ways to get in touch:


Xamarin EVOLVE Follow-up: Building Mobile Cross-Platform Geospatial Apps

$
0
0

XamarinEvolveBannerNick

I spent a few days this week at Xamarin EVOLVE, hanging out with the Xamarin folks, the mobile cross-platform dev community, talking to attendees at our booth and speaking about mobile geospatial development. It was definitely a great event and Xamarin deserves major kudos, both for the event itself, but also for their products and impressive keynote announcements. Xamarin is a partner of Infragistics and it’s certainly an exciting time to be a mobile developer.

As promised during my talk, I’m posting all my session material here, including the slides, demos, and reference links. I had a great time at EVOLVE and I hope to speak there again if/when Xamarin holds another show.

Building Mobile Cross-Platform Geospatial Apps

This session will not reveal why we are on Earth, but it will teach you how to find out where we all are on it. Looking for the user? Just find the phone. Thanks to standard built-in Location Services and hybrid positioning hardware, every modern smartphone knows where it is. In this session, ActiveNick shows you how to build a truly “smart” cross-platform phone application by adding Geospatial Services to it. Using C# and MonoTouch for iOS, the Windows Phone SDK, and Mono for Android, you will learn how to locate the device using the phone GPS and other Location Services, display spatial data on maps, manipulate them with touch gestures, geocode addresses into lat/long pairs, and more. We’ll discuss the various mapping technologies, SDKs and APIs across various mobile platforms, how to tap into geospatial features programmatically with Xamarin tools, and explore how geospatial systems can benefit from mobile services and apps. Location Intelligence is a natural extension of mobility. Come learn how all mobile developers should also be geospatial developers.

Download the session slides here

Download the iOS & Windows Phone demo here

Download the Android demo here. It’s a modified version of the Google Maps Android API v2 demo found on Github here. Make sure to read both readme files in the Zip since you’ll need dependencies from the Github project to make the demo work.

Noteworthy Links

Building iOS Apps with Xamarin and NucliOS

We (Infragistics) launched release 13.1 of all our developer controls yesterday. This includes NucliOS 13.1, our stellar native controls for iOS developers. With NucliOS you get a powerful data & layout grid control, a versatile chart control supporting more than 40 chart types – including the new Pie Chart control – as well radial gauges and rich-text labels.

The good news for C# developers is that NucliOS also ships with full bindings for Xamarin.iOS. With a single package, NucliOS offers the best native iOS controls for developers, whether they build their apps in Objective C with Xcode, or in C# with Visual Studio or Xamarin Studio.

If you’ve never built any apps for iOS or even learned iOS development, this is your chance to get started. Download the free starter edition of Xamarin.iOS here, then download the trial for NucliOS and start building gorgeous iOS apps for iPhone and iPad today.

Here are some links to get you started.

Download a trial version of NucliOS 13.1 here

NucliOS Product Page at Infragistics.com

What’s New in NucliOS 13.1 for iOS Developers

Visit the NucliOS 13.1 page in the Xamarin Component Store here

Creating iOS Apps with Xamarin.iOS and NucliOS – Webinar by Brent Schooley

Download the NucliOS 13.1 Samples Browser for free on your iPhone or iPad from the iTunes App Store here

 

NUCLiOS_Banner_728x90_a

Until Next Time…

I will be doing a very similar session to my mobile cross-platform geospatial apps talk at Code PaLOUsa, April 25-27 (next week!), in Louisville, KY. Make sure to attend if you’re in the area.

You can also catch me and attend more of my talks at the following events over the next few months:

If you have any questions about the topics discussed in these sessions, you can post them in the comments below or contact me on Twitter at @ActiveNick.

‘LESS’– A dynamic language that simplifies your CSS

$
0
0

css-less-nnish

For this post, I am assuming you are a programmer like me and design is a planet just outside your universe. If you are from the design planet, you too can read on; may be there is something for you too!

Writing CSS is fun, exciting and easy until your website grows fat with pages and complicated layouts. If you have ever tried fixing a layout in such a page – you know what I mean. Did I talk about fixing a layout? Oh yeah thanks to all the browsers.

Many at times while writing CSS I wished I could write it more programmatically than just styling them. For e.g. If CSS had allowed variable declarations, I could have simply held the values in variables, perform few operations and re-use them in properties. But that’s too much to ask for from a stylesheet language which should just do styling!

Fortunately there are a few preprocessors like Sass& LESS that nicely extends CSS and adds everything a programmer ever wanted. After doing couple of research I picked up LESS to see how it works. I spent a few hours re-styling some of my demos with LESS and I am must say I am thoroughly impressed with this language. So here I’m explaining you about LESS.

So LESS

LESS is a dynamic stylesheet language that extends CSS and adds nice features like variables, mixins, operations and functions to it. More importantly it takes fewer efforts for developers to write complex CSS and build amazing looking websites real fast.  LESS uses existing CSS syntax that makes learning a breeze and you can always fall back to CSS.

LESS’ first version was written in Ruby and was used as a server side language which upon compiling emitted CSS. However in the later versions, use of Ruby is deprecated and replaced by JavaScript. Adding LESS.js JavaScript file to your HTML page allows real-time compilation within browsers. It also supports server side compiling with the help of Node.js making it easier for developers to choose between the two.

Adding Less.js – Client side usage

 

All LESS files should have the extension “.less” and you may have them under CSS directory of your webserver.

Add the following lines of code to your HTML page to ensure Pre-Compiling of CSS happens in your browser:

<link rel="stylesheet/less" type="text/css" href="css/style.less"/><script src="js/less-1.3.3.min.js"></script>

Note: If you working on a local file system i.e. if you are accessing the page using “file:///” on Chrome or IE you may incur an error of “Cross origin requests are only supported for HTTP” or “Access Denied” respectively. These are some security related errors and I did not find a way to get rid of them. Host them on a development server and you will see this go away. However I did not find any issues with Mozilla Firefox.

Server side usage

 

If performance is what running in your mind then you can look at compiling these files on the server side. First, download and install Node.js, then using npm  download the less compiler(lessc.cmd).

To compile use this command:

lessc styles.less > styles.css

For more options like CSS minifying, run lessc without parameters.

There are few nice editors out there that will let you live compile these files. For e.g. I use WebStorm which nicely compiles LESS to CSS as I type. If you are on a large project and most of your developers are comfortable on LESS then you can add the sever side compilation step to your build task.

Now that you have know how to make “.less” files and compile them to CSS, let’s look at this language in detail.

Variables

As mentioned earlier variables are one nice feature to have in stylesheets. LESS let’s you add variables with the help of @ symbol and use them into properties. Find below an example where I set background-color and color of the body with the help of variables.

@backgroundColor: #333;
@color: #fff;

body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px #000;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}

These variables can be now re-used in the rest of the code and any change that you make to color will apply to all. CSS codes can co-exist with LESS – If you notice only two of the properties were set by variables and the rest is CSS.

Operations

Now that you know variables are a possibility in stylesheet, you must be happy to know that you can perform operations on them. It’s easy! Here’s is an example of how to do it:

@baseColor: #000;
@backgroundColor: (@baseColor + #333);
@color: (@backgroundColor / 3);
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;
#body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

Have a look at how @backgroundColor, @color and font-size gets the calculated value from an operation. Find below the output that gets generated.

Output:

#body {
  background-color: #333333;
  color: #111111;
  border-top: solid 10px #000000;
  font-size: 0.85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

Mixins

Mixins help you reuse the whole bunch of properties from one ruleset into another ruleset. Here’s an example:

@baseColor: #000;
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;

.gradients {
  /*local scoped variables*/
  @gradientStartColor: #eaeaea;
  @gradientEndColor: #cccccc;
  background: @baseColor; /* variable from global scope */
  background: linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);
}

#body {
 .gradients;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

In the above code you can see how .gradients ruleset is re-used into #body. It’s a pretty nice feature, think about how less code you need to write now!

Variable Scoping

 

Like every other programming language, LESS provides variable scoping too. Variables are looked up locally first and when not found it will search globally. In the above example you can see that the @baseColor is being used in both .gradients and #body. If you have locally scoped variables like @gradientStartColor and @gradientEndColor they are not accessible outside the scope unless they are mixed in. In the above example #body can access those variables inside since .gradients is referred.

Check out Scope for more info.

Parametric Mixins

This is special type of ruleset which can be mixed in like classes, but accepts parameters. Here’s an example that sets up border-radius for different browsers.

.border-radius (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#body {
 .gradients;
  .border-radius;
  border-top: solid 10px @baseColor;
}
#sidebar{
  .border-radius(25px);
  background: #eee;
}

If you look at #body it calls without parameters that’s because LESS allows to set default values of parameters which in this case is 4px. Look at #sidebar for call with parameters. You can also set multiple parameters, check this out for more information.

Functions

LESS provides few helper functions for transforming colors, string manipulation, and do math. Find below an example from the LESS documentation which uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:

#sidebar{
  width: percentage(0.5);
  color: saturate(@baseColor, 5);
  background-color: spin(lighten(#ff0000, 25%), 8);
}

Check out Function Reference for details.

Summary

By now you would have a fair idea of what LESS brings to the table. But be aware that LESS is not the only CSS preprocessor. There is Sass which stands for Syntactically Awesome Stylesheets and few others but they aren’t popular. There are various blogs out there which will tell you some good comparison between the two. I suggest you try both and stick to the syntax that you like! After all they emit CSS Smile

Have a feedback? Find me on twitter @nishanil

0640.IgniteUI_Banner_728x90_b

Using FlatDataSourceGrouping - XamPivotGridGrouping Series - Post 2

$
0
0

XamPivotGridGrouping 2 - Providing the Data

As I mentioned in my last post, we are going to make use of the XamPivotGridGrouping control to create a new WPF Football Statistics Analysis application.  We'll use the XamPivotGridGrouping to showcase our data and summarize it based on a variety of different data points.  To do this, we're going to need a data source. 

Just like the XamPivotGrid, the XamPivotGridGrouping supports the following data sources:

  • SSAS (via GroupingFlatDataModelProvider)
    • XmlaDataSource
      • The XmlaDataSource allows connecting and executing queries against SSAS through XML for Analysis model provider.
    • AdomdDataSource
      • The AdomdDataSource allows connecting and executing queries directly against SSAS
  • SAP NetWeaver Business Warehouse (via GroupingFlatDataModelProvider)
    • XmalSapDataSource
      • The XmalSapDataSource provides a way to connect and execute queries against SAS through XMLA
  • Oracle Essbase (via GroupingFlatDataModelProvider)
    • XmlaOracleDataSource
      • The XmlaOracleDataSource provides a way to connect and execute queries against Essbase for Oracle through XMLA.
  • IEnumberable data collection
    • (GroupingFlatDataSource)FlatDataSource
      • The FlatDataSource, or in this case GroupingFlatDataSource, provides a way to use System.Collections.IEnumerable as data source to display data.

Now, for no better reason than that it's simple and straightforward, we are going to use the GroupingFlatDataSource controller.
We'll use it for both our GroupingDataSelector and our XamPivotGridGrouping control.

From our perspective, the way data binding works for the XamPivotGridGrouping is shown here:

For the GroupingFlatDataSource, the ItemSource can be any object that implements IEnumerable.

For our sample, we are going to base everything on an object called BaseStatisticTotalResult which implements INotifyPropertyChanged.
The class diagram is shown here (I hid the Fields Compartment for brevity):

Our data source will be built off an IEnumerable.
The data itself is stored in a SQL Server db which I've added to hold the stat data.  I'm using Entity to connect, and we'll be calling some stored procedures via Function Imports to aquire the data. 

I have a Utility class called FlatDataConstructr which we'll use to generate the IEnumerable and pass it back to the ViewModel which handles Data in our project.  This snippet shows the OffensiveStatisticsAllTeams() method of FlatDataConstructor.

publicIEnumerable<BaseStatisticTotalResult> OffensiveStatisticsAllTeams()
     {
           m_offensiveAll = newList<BaseStatisticTotalResult>();
           var items = GetAllStatsSQL();
           int counter = 0; 
          try
           {
                 foreach(SQLStatisticResultObject o in items)
                {
                    // For each Resultant Item from our above Entity Call,
                    // create aBaseStatisticTotalResult and add it to theLocalList
                    BaseStatisticTotalResult stat = newBaseStatisticTotalResult
                    {
                         Game = GetGameDescription2(o.AwayTeam ,o.HomeTeam, (int
                                                    o.AwayScore, o.HomeScore),
                         Player = o.FName + " " + o.LName,
                         Position = o.Position,
                         PositionType = o.PosType,
                         Season = (int)o.Season,
                         Statistic = o.StatResult,
                         ResultID = (Int64)o.ResultID,
                         StatisticTotal = o.ResultTotal,
                         Team = o.Name,
                         StatSubType = o.StatSubType,
                         StatType = o.StatType,
                         Height = o.HEIGHT,
                         Weight = o.WEIGHT.ToString(),
                         College = o.College,
                         Number = o.Number,
                         QuarterValue = (int)o.Quarter,
                         PlayerID = (Int64)o.PlayerID,
                         GameID = (Int64)o.GameID
                  };
// Some of the properties ofBaseStatisticTotalResult are not directly mapped to a field 
// in the result of the Entity query. So additional work is needed. Above this is done using
// GetGameDescription2 which returns a description of the Game and below the Opposing Team is 
// determined by comparing thePlayerTeam to the Home and Away Teams of the game.
              stat.OpposingTeam = o.PlayerTeam != o.HomeTeam ? o.HomeTeam : o.AwayTeam;
              counter++;
              m_offensiveAll.Add(stat);
            }
        }
        catch (Exception exception)
        {
              if (exception.Message.Length > 0)
              {
                   // Handle exceptions here.
              }
              throw;
        }
// These are special case statistics for Passer Rating,Avg Yards, Comp% etc.
        AddRatingsStatsForQB(m_offensiveAll);
        AddPrecentageStatsForPlayer(m_offensiveAll);
        return m_offensiveAll;
  }

As you can see in this snippet, we return a List<BaseStatisticTotalResult> as IEnumberable. 

The ViewModel which is in charge of generating our OLAP cube, and defining the Dimensions, Measures and Hierarchies is called DataConstructorViewModel.  Here is a abbreviated class structure for this viewmodel:

 

The specifics of the class are as follows:

  • m_dataConstructor is an instance of FlatDataConstructor
  • m_oStatsAllTeamsFlat is an instance of GroupingFlatDataSource
  • OffensiveStaticstAllTeamsData is a public GroupingFlatDataSource 

What we'll eventually be doing is using our OffensiveStaticstAllTeamsData as the data source for our XamPivotGridGrouping and it's associated XamDataSelectorGrouping.

To close out our look at building the data source, let's examine the methods in the DataConstructorViewModel and see how each one is being used to build out the final GroupingFlatDataSource.

Let's start with OffensiveStatisticsAllTeams:

        public void OffensiveStatisticsAllTeams()
        {

            if (m_allTeamsOStatsList= null) m_allTeamsOStatsList = newList<BaseStatisticTotalResult>();
            if (m_dataConstructor= null) m_dataConstructor = newFlatDataConstructor();
            m_allTeamsOStatsList m_dataConstructor.OffensiveStatisticsAllTeams().ToList();
            m_allTeamsOStatsList.GetEnumerator();
           
            var statsDataSource = new GroupingFlatDataSource
            {
                ConnectionSettings newGroupingConnectionSettings(),
                ItemsSource = m_allTeamsOStatsList,
                Cube = DataSourceBase.GenerateInitialCube("Cube"),
                Columns = DataSourceBase.GenerateInitialItems( "[Season].[Season], [Game].[Game], " +
                                                                [Half].[Half], [Quarter].[Quarter]
"),
                Rows = DataSourceBase.GenerateInitialItems(
                        "[Player].[Player], [Team].[Team], [Position].[Position],
                          [StatType].[StatType],[StatSubType].[StatSubType], [Statistic].[Statistic]
"),
                Measures = DataSourceBase.GenerateInitialItems("StatisticTotal")
            };

            DefineOffensiveDimensionMetadata(statsDataSource);
            SetFlatDataProperties(statsDataSource);

            m_oStatsAllTeams = statsDataSource;
       }

Let's break down this method a little.  The beginning of the method is fairly self-explanitory as we are just declaring the List and an instance of the FlatDataConstructor.  We then call the OffensiveStatisticsAllTeams method to populate our list.  So we start dealing with our GroupingFlatDataSource beginning with this snippet:

      var statsDataSource = new GroupingFlatDataSource
            {
                ConnectionSettings newGroupingConnectionSettings(),
                ItemsSource = m_allTeamsOStatsList,
                Cube = DataSourceBase.GenerateInitialCube("Cube"),
                Columns = DataSourceBase.GenerateInitialItems("[Season].[Season], [Game].[Game], " +
                                                              "[Half].[Half], [Quarter].[Quarter]"),
                Rows = DataSourceBase.GenerateInitialItems(
                        "[Player].[Player], [Position].[Position], [StatType].[StatType], " +
                        "[StatSubType].[StatSubType], [Statistic].[Statistic]
"                
                RowsGroups = DataSourceBase.GenerateInitialItems("[Team].[Team]"               
                Measures = DataSourceBase.GenerateInitialItems("StatisticTotal")
            };

Because we are simply using a IEnumberable data source, we can pass in an empty GroupingConnectionSettings.  However, if we were pulling directly from SQL or another data source we would need to implement them here.

ItemsSource is, of course, the list we just generated from the FlatDataConstructor. 

Cube uses the DataSourceBase.GenerateInitialCube() method to generate an Infragistics.Olap.Data.ICube that can be passed to Cube property as the default cube.

For Columns, Rows and RowsGroups we use DataSourceBase.GenerateInitialItems to set the initial set of IFilterViewModel items whicfor each of these respective collections.

Measures uses the GenerateInitialItems method to set the collection of IMeasureViewModel items for our model.

This snippet creates our GroupingFlatDataSource.  The next two lines call methods which assist us in refining that datasource.

DefineOffensiveDimensionMetadata(statsDataSource);
SetFlatDataProperties(statsDataSource);

Let's look at each of these methods:

private static void DefineOffensiveDimensionMetadata(GroupingFlatDataSource flatDataSource)
{
       var modelMetadata = newCubeMetadata();
       flatDataSource.AllowRemainderTotalForColumns = true;
       flatDataSource.UseZerosOnEmptyTotals = true;
       modelMetadata.DataTypeFullName = typeof(BaseStatisticTotalResult).FullName;
       modelMetadata.DisplayName =
                                   Strings.Label_DataConstructorViewModelDataFields;

// Add Base Result Hierarchies - By arranging Members of a Dimension into a hierarchy,
// not only do we determine the aggregation of Dimension members,

// but also simple mathematical summation or addition can be eliminated since the values
// for each members will automatically sum up or total to its parent

// aggregate member. 
       AddBaseHierarchies(flatDataSource);

// Add Base Dimensions - Dimensions are the business parameters normally seen in the rows
// and columns of a report.
       AddBaseDimensions(modelMetadata);

// Add Model Metadata toCubeSettings
       flatDataSource.CubesSettings.Add(modelMetadata);

// Adding this to set the Parent of expandable columns to be place in front of children.
        flatDataSource.ParentInFrontForColumns = true;

}

Initially in this method we create an object called CubeMetadata.  In other data sources, the data my already be organized into cubes, and each dimension may already have defined hierarchies.  This isn't the case when we use a FlatData source.  With FlatData, we can define the hierarchies for each property of our BaseStatisticTotalResult.  The last two method calls within this method will do just that.

After declaring and instantaiting our CubeMetada,  we set a couple additional properties on the GroupingFlatDataSource.  The key property for us right now is AllowRemainderTotalForColumns.  Setting this to true allows our columns to provide a "remainder".  This means if a record value is assigned to a parent column but not a child column, the remainder value will be displayed beneath that column.  

As an example, say we had a running back that played in 4 games during the 2011 Season.  He had statistics for each of those games.  For whatever reason, let's say we could only find associations for our statistics to 5 games, even though we had all the stats for the full season.  If we expanded the season out..those values for statistics not assigned to a game would be considered the remainder, and would appear beneath the parent (Season) column.  

The UseZeroesOnEmptyTotalForColumns, DataTypeFullName and DisplayName properties are self-explanatory.  (Note: In my strings resource, the value for the Label_DataConstructorViewModelDataFields isData Fields).

The AddBaseDimensions and AddBaseDimensions methods finish off this method.  As previously mentioned, these methods will allows us to define our own dimension and hierarchies for our BaseStatisticTotalResult. 

For each method, I'll show a snippet that is defining a hierarchy for two of the cube’s properties. The cube is the class specified in the data source as the main data holder. We can efine as many HierarchyLevelDescriptors as needed.

Here are the the two listed methods (I have removed some of the hierarchies for brevity) and an additional helper method to add Dimensions.

private static void AddBaseHierarchies(GroupingFlatDataSource flatDataSource)
{
    …
    var tHierarchy = newHierarchyDescriptor<BaseStatisticTotalResult>(p => p.Player);
    tHierarchy.AddLevel(p => p.Player, "Player" );
    tHierarchy.HierarchyName = "Player";  
    tHierarchy.HierarchyDisplayName = Strings.Label_OffensivePlayer; 
    flatDataSource.HierarchyDescriptors.Add(tHierarchy);

    var
teamHierarchy = newHierarchyDescriptor<BaseStatisticTotalResult>(p => p.Team);
    teamHierarchy.AddLevel (p => p.Team, "Team" );
    teamHierarchy.HierarchyName = "Team";
    teamHierarchy.HierarchyDisplayName = Strings.Label_Team;
    flatDataSource.HierarchyDescriptors.Add(teamHierarchy);
   
}

private static void AddBaseDimensions(CubeMetadata modelMetadata)
{
     AddDimensionData(modelMetadata, "Player" ,Strings.Label_OffensivePlayer ,
             DimensionType
.Dimension);
     AddDimensionData(modelMetadata, "StatType" , "Type" ,
             DimensionType
.Dimension);
     AddDimensionData(modelMetadata, "OpposingTeam",
             "OpposingTeam
",DimensionType.Dimension);
     AddDimensionData(modelMetadata, "Quarter" , "Quarter" ,DimensionType.Dimension);
     AddDimensionData(modelMetadata, "Half" , "Half" ,DimensionType.Dimension);
     AddDimensionData(modelMetadata, "StatSubType", "Category" ,DimensionType.Dimension);
     AddDimensionData(modelMetadata, "Height" , "Height" ,DimensionType.Dimension);
     AddDimensionData(modelMetadata, "Weight" , "Weight" ,DimensionType.Dimension);
     AddDimensionData(modelMetadata, "College" , "College" ,DimensionType.Dimension);
     AddDimensionData(modelMetadata, "Game" ,Strings.Label_Game , 
              DimensionType.Dimension);
     AddDimensionData(modelMetadata, "Team" ,Strings.Label_Team ,DimensionType .Dimension);
     AddDimensionData(modelMetadata, "Position" ,Strings.Label_Position ,
              DimensionType
.Dimension);
     AddDimensionData(modelMetadata, "PositionType",Strings .Label_PositionType ,
              DimensionType
.Dimension);
     AddDimensionData(modelMetadata, "Season" ,Strings.Label_Season , 
              DimensionType
.Dimension);
     AddDimensionData(modelMetadata, "Games" ,Strings.Label_GamesPlayed ,
              DimensionType
.Dimension);
     AddDimensionData(modelMetadata, "GamesStarted" ,Strings.Label_GamesStarted ,
              DimensionType
.Dimension);
     ...
     modelMetadata.DimensionSettings.Add(resultTotal);
}


private static void AddDimensionData(CubeMetadata model, string source, string display,
                     DimensionType type, IAggregator aggregator = null , string format = null)
{
     var dim = newDimensionMetadata
     {
           SourcePropertyName = source,
           DisplayName = display,
           DimensionType = type
      };
     if (aggregator != null)
     {
           dim.Aggregator = aggregator; 
     }
     if (format != null)
    {
          dim.DisplayFormat = format;
     }
    model.DimensionSettings.Add(dim);
}

For the Hierarchies, LevelExpressionPath is the property on which to group the data. LevelName will appear in the tree with hierarchies in the data selector.

For the Dimenseions, DisplayName is used to change the name of the hierarchy/measure in the UI and the DisplayFormat is used for measures. Raw value goes to the Value property of the cell and the formatted value goes to the FormattedValue property. 

At the end of the method we set one more property, which I set aside only for the purposes of highlighting it. This property, ParentInFrontForColumns, impacts how the expanding columns will appear.  Set to true, and the parent columns appear in front of the children, set to false, they appear behind the children.   

The last method we have to look at simply sets a few more properties on the GroupingFlatDataSource and is called SetFlatDataProperties.

private static void SetFlatDataProperties(GroupingFlatDataSourceflatDataSource)

     flatDataSource.MergeHierarchySettings.AllowMergeOfColumns = true;
     flatDataSource.DimensionsGenerationMode = DimensionsGenerationMode.Mixed;

AllowMergeOfColumns needs to be set to true to allow our expanding and collapsing columns to merge together. The DimensionsGenerationMode enum is defined as follows:

Metadata       

The dimensions are created based on the CubeMetadata.DimensionSettings found in FlatDataSource.CubesSettings.

Mixed

Both data sources are used as data found in CubeMetadata.DimensionSettings takes precedence.

Property

The dimensions are created based on the properties exposed by the class of items found in items source.

With that, we have a GroupingFlatDataSource which is ready to be handed off to the XamPivotGridGrouping!  In the next post, we'll take a look at the results of this data, and start working on customizing the control to fit the requirements we set out.  

NetAdvantage Reporting Release Notes – April: 13.1 Volume Release

$
0
0

With every release of NetAdvantage Reporting 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 are available in PDF format and summarize the changes to this release along with a listing of each item. In order to download the release notes, use the following link:

12.2 to 13.1 EBNF Converter

$
0
0

As I mentioned in a previous post, the format of EBNF special sequences has changed in the 13.1 version and it is not so easy to change over the 12.2 format to the new format by hand. So if you have already written an EBNF grammar using 12.2 and you want to upgrade to 13.1, I have created a utility to help you convert the file from the old format to the new.

One thing to note when converting is that regular expressions are now more limited in 13.1. In 12.2, we were using .NET regular expressions so you could use anything they supported. But in 13.1, we created a custom regular expression engine specifically designed to lex a document as fast as possible. For example, in 12.2 we were able to lex 74,157 lines of C# per second on one machine. On that same machine, the 13.1 version was able to lex 180,326 lines of C# per second. However, the downside to using a custom regular expression engine is that not all regular expression patterns can be supported. So when converting, you may see some messages about terminal symbols that cannot be converted because their regular expression patterns are no longer valid in 13.1. This must be fixed in the original file before the conversion can succeed, so I recommend that you back up the original file before trying to convert it (or try to convert a copy of the original).

And finally, a short disclaimer before I link to the converter (please excuse the legalese):

Copyright (c) 2013, Infragistics, Inc.

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND INFRAGISTICS DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL INFRAGISTICS BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

The converter can be found here and you can find the source code for it here.

By Mike Dour

Viewing all 2374 articles
Browse latest View live