Infragistics Community

FREE Metro Light and Dark Themes for WPF and Silverlight Microsoft Controls

Brian Lagunas — Sat, 25 May 2013 00:52:39 GMT

The quest for a good application theme never ends. You spend hours scouring the realms of Google and Bing looking for a clean, modern, and touch friendly theme to use in your application. That is, until now! If you have been looking for a free Metro theme for WPF and Silverlight, then look no further.

Infragistics ships a number of great themes with their NetAdvantage for WPF and Silverlight products. As the Product Manager for these controls, I started asking myself, “Why should we keep these great themes to ourselves?”. If you know me, you know I am a hard core XAML developer and I am all about community. Heck, I single handedly wrote the most popular Extended WPF toolkit in the world, and I provided it to everyone for free. So starting today, I am excited to announce that I am going to be giving away, all of our themes for the standard WPF and Silverlight Microsoft controls. Yes, I said GIVING AWAY, as in FREE.

There is a catch though. We will NOT support every single Microsoft control. Why? Well, because we would prefer for you to use our controls instead. For example, we will not be providing a style for the Microsoft DataGrid because we have a much better xamDataGrid control. You get the idea. Also, I am not going to give them to you all at once. I am going to release them a one at a time. Why? Well, I want to see what kind of response I get from the community. If I get zero response or support from the community, then there is no need to keep releasing themes. I don’t want to waste my time, or the developers who create these themes time. On the other hand, if the community gives me an overwhelming show of support, then I will be releasing more themes. Seems fair, wouldn’t you agree?

Today’s free theme is a clean, modern, touch friendly theme in the form of the Infragistics’ Metro Theme. You will be getting both a Light and Dark version.

Wait, did you say “Metro”? Yes, I said Metro. Why? Because, that’s what everyone knows it as no matter how many times Microsoft tries to rename it. As we all know by now, there is a ton of confusion around the term “Metro”. First its “Metro”, then it’s “Modern UI”, then it’s “Microsoft Design Style”, and now it’s… Well, I don’t know what it is right now. What’s important here is not the name, but rather the theme itself. Now on to the free theme.

Silverlight

First up is the Silverlight version of the Infragistics Metro Theme. We are providing a Metro style for each primitive control that appears in the Visual Studio toolbox, the controls that ship with the Silverlight SDK, and of course some controls from the Silverlight Toolkit. As you can see, we organized the themes by their respective source so that you have the option to use which ever control you need and not add any unnecessary dependencies on other assemblies.

Adding the theme to your application is very simple. Just include the resource files for the controls you require the Resources section of your view, or in your App.xaml.

<ResourceDictionary>
     <ResourceDictionary.MergedDictionaries>
         <!-- Light Theme -->
         <ResourceDictionary Source="Themes/Metro/Light/Metro.MSControls.Core.Implicit.xaml" />
         <ResourceDictionary Source="Themes/Metro/Light/Metro.MSControls.SDK.Implicit.xaml" />
         <ResourceDictionary Source="Themes/Metro/Light/Metro.MSControls.Toolkit.Implicit.xaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

You can see the full list of supported controls in the list below.

Accordion
AutoCompleteBox
BusyIndicator
Button
CheckBox
ComboBox
Expander
GridSplitter
Label
ListBox
PasswordBox
ProgressBar
RadioButton
Rating
RepeatButton
Slider
TabControl
TextBox
ToggleButton
Tooltip

Metro Theme Light

Metro Theme Dark

WPF

Next up is the WPF version of the Infragistics’ Metro Theme. Just like the Silverlight version, we are providing you with styles for the primitive WPF controls that appear in the Visual Studio toolbox, as well as some controls in the WPF Toolkit. Just like for the Silverlight version, we organized the themes by their respective source so that if you don’t use the WPF toolkit, there will be no need for your code to take a dependency on it..

Adding the theme to your applicantion is the same as the Silverlight version. Just add the resource dictionaries to the Resources section of your View or App.xaml.

<ResourceDictionary>
     <ResourceDictionary.MergedDictionaries>
         <!-- Dark Theme -->
         <ResourceDictionary Source="Themes/Metro/Dark/MetroDark.MSControls.Core.Implicit.xaml" />
         <ResourceDictionary Source="Themes/Metro/Dark/MetroDark.MSControls.Toolkit.Implicit.xaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

Here is the full list of support controls:

Accordion
AutoCompleteBox
Button
CheckBox
ComboBox
Expander
GridSplitter
GroupBox
Label
ListBox
PasswordBox
ProgressBar
RadioButton
Rating
RepeatButton
Slider
TextBox
ToggleButton
Tooltip

Metro Theme Light

Metro Theme Dark

That’s All Folks

I hope you enjoy this theme and find it useful. If you like this theme and want me to continue to give away our other themes, please let me know. Otherwise, I will just assume you’re not interested and move on to other things. Go ahead, download the Metro Light and Dark Themes for WPF and Silverlight Microsoft Controls and let me know what you think. After you’ve done that, feel free contact me on my blog, connect with me on Twitter (@brianlagunas), or leave a comment below for any questions or comments you may have.

Enjoy!

NetAdvantage for ASP.NET Release Notes - May: 12.1, 12.2, 13.1 Service Releases

[Infragistics] Aaron Marisi — Fri, 24 May 2013 15:50:00 GMT

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

ASP.NET 2012 Volume 1

ASP.NET 2012 Volume 2

ASP.NET 2013 Volume 1

Responsive Web Design with jQuery Grids: A closer look

[Infragistics] Damyan Petev — Thu, 23 May 2013 21:11:00 GMT

I really hope I got you excited about the Responsive Web Design mode for the Ignite UI Grids last time – as it is the kind of an unique feature that truly makes this jQuery control stand out! As previously explained it’s not exactly a simple thing to make a grid responsive, but our team made serious considerations on how to best approach this and I do believe they’ve pretty much nailed it and this will turn out to be very useful addition. There were also plenty of things that can’t fit in a single blog, plus the fact that the actual feature was not yet released so there wasn’t too much of demo material to see. So now, with 13.1 out and even accompanied by a service release, without further due, let’s dig into the technical stuff! I’ll start with some interesting design considerations and even potential pitfalls related with Responsive Web Design and then have some specific Grid tips.

A Getting Started, of sorts

Now these are more of honorary mentions as the most basic stuff were already covered elsewhere, but hey, it doesn’t hurt to have them on a speed dial. So in case you missed it - here’s a nice summary on Building responsive web design using CSS3 Media Queries!

And because creating a Responsive app is all in the name of providing users with a better experience I figured some UX tips and food for thought are in order. Our Services or as of recently D3 (from Discover – Design – Develop) have a solid expertise in the field and they share some of it in their blogs. For example this on UX of Responsive Web Design you should definitely check out! There’s a whole lot more on UX, Design and usability and I highly recommend keeping an eye on those.

Once you have technology and design considerations in check, I’d like to turn your attention to the now available Documentation for the igGrid Responsive Web Design (RWD) Mode. There’s an good coverage on the theory behind this and also a good amount of examples! Speaking of which, you can also check out our samples for Responsive Web Design Custom Mode Template Switching and Responsive Web Design Mode of the Grid with Twitter Bootstrap

Additional considerations

Some “good to know about” extras – like the browser viewport. One of the most important things to consider is that many (if not all) smartphone browsers will 'lie' about their dimensions. It's not a bad thing, mind you – most phones these days have such high dpi that it will be impossible to read and interact normally with pages where everything is shrunk to the native resolution. Instead, as you can read on CSS pixel ratios (or, why all mobile sites are 320 pixels), pixels we would use for web development are now relative. The term ‘CSS pixels’ also pops up here and there, but basically the browser will almost always scale the pixels down (so 1 pixel will actually be multiple physical ones), which in term affects the browser viewport dimensions. Those dimensions, usually wider than the screen, are still small enough to squish a non-responsive page and big enough to force the user to scroll. This is where the all-time favorite meta tag comes in setting the viewport to match the device width (which removes that annoying scrolling) but limits your space further, something in the range of 320 – 460 of them virtual pixels! Remember the utility class table from Bootstrap I showed last time? I hope it does it make sense now why phones end up in their respective visibility class even in landscape.

On the other side are tablets where many have a pixel ratio of 1 or 2 in the case of retina displays, but for all intents and purposes tablets usually hit the desktop size mark in landscape and only get to the tablet-specific styles in portrait. There’s a very large and very incomplete List of displays by pixel density on Wikipedia if you wan to have a look.

There’s also an interesting issue with setting the IE10 viewport in CSS (as is per recommendation) rather than using the meta tag. The issue came out of nowhere and this blog on Responsive Design in IE10 on Windows Phone 8 helped me a lot. As it turns out, the bug applies actual physical pixels when using “device-width” in CSS. Eventually I tracked down the issue to Bootstrap’s own CSS - they applied to fix Win 8 apps in snapped mode, but it completely broke Bootstrap pages on Windows Phone. Keep that in mind, there’s a fix provided that feels hacky at best, but it does work so consider it if working with Bootstrap.

Additionally, good things to remember is that touch devices have their special needs and oddities – make sure touch targets are big enough, remember touch events are separate and in the case of the Grid – consider applying the touch-friendly Windows UI Theme. And once more, have a look around those D3 blogs for mobile and usability related articles that can help you.

Merging and Column Hiding

As I hope it has become clear the Responsive feature allows for both hiding columns through setting and modifying the structure (markup) via templates. The template swapping is a source of quite a few possible modifications, perhaps one of the most useful ones is merging columns, as you may read in the docs. Now I know this might not be necessary, but better safe than sorry: don’t attempt to hide columns through the template or merge them (e.g. writing one less <td> cell). A main thing about the Ignite UI Grid is that is has columns array you usually define or have auto-generated – either way, row templates are designed to do just that – allow you to format the already existing layout! In other words, templated columns MUST match the layout defined or all data properties if generated! You will not get any results if column definitions and markup clash. So, for hiding columns you are stuck with defining column settings (not too pretty if they are a lot, I know).

So how then exactly do you merge columns? Well one option is hiding a column though settings and adding its data to another still visible ones in a template. This is the approach you can see in our samples and it works best when the target column header is something that makes sense after you merge, like in that sample the Address taking in the country and city values as well.

Another possible way that I personally like is though an Unbound Column. That way you can have the unbound setup with multiple data properties and only revealed when other are not. For example take this part of a grid definition where you have first and last name separate and an unbound column to take their place when on phone:

 $("#grid").igGrid({
    columns : [{
        unbound : true,
        key : 'name',
        dataType : 'string',
        headerText : 'Full Name'
    }, {
        key : 'FirstName',
        dataType : 'string',
        headerText : 'First name'
    }, {
        key : 'LastName',
        dataType : 'string',
        headerText : 'Last Name'
    }],
    //...
    features : [{
        name : 'Responsive',
        forceResponsiveGridWidth : false,
        columnSettings : [{
            columnKey : 'name',
            classes: "ui-visible-phone",
            configuration: {
                phone: {
                    template: "<span>${LastName}, ${FirstName}</span>"
                }
            }
        },{
            columnKey : 'FirstName',
            classes: "ui-hidden-phone"
        },{
            columnKey : 'LastName',
            classes: "ui-hidden-phone"
        }]
    }]
    //....
});
 

Same thing using the ASP.NET MVC helpers:

 @(Html.Infragistics().Grid(Model)
    .Columns(column =>
    {
        column.Unbound("name").DataType("string").HeaderText("Full Name").Template("${FirstName} ${LastName}");
        column.For(x => x.FirstName).HeaderText("First name").DataType("string");
        column.For(x => x.LastName).HeaderText("Last Name").DataType("string");
        //...
    })
    .Features(feature =>
    {
        feature.Responsive().ForceResponsiveGridWidth(false).ColumnSettings(setting =>{
            setting.ColumnSetting().ColumnKey("name").Classes("ui-visible-phone").Configuration(conf => conf.AddColumnModeConfiguration("phone", c => c.Template("<span>${LastName}, ${FirstName}</span>")));
            setting.ColumnSetting().ColumnKey("FirstName").Classes("ui-hidden-phone");
            setting.ColumnSetting().ColumnKey("LastName").Classes("ui-hidden-phone");
            //...
        });
    }).DataBind().Render()
)
 

Essentially turning merging the two columns going from tablet to phone mode in the images below:

As you may remember and notice above, when Responsive is used with Column Hiding you get that hidden indicator that is both a cue for the user something else is there and an interaction target to modify the visible columns. In terms of usability for touch though, it does feel slightly hard to hit. Good thing you can pick its width I guess – it seems that something in the range of 14-15px is much easier to hit, which is about double the default size.

Of course, unless you arrange your columns in a way that all the ones you will be hiding are in front or at the end, you will get multiple indicators like I have above. Increasing their size for touch takes up even more of the already precious space.

So either ensure arrangement or hide the indicator entirely - well, not really since right now there is no such option, but you can always set the width to 0! How would the user know of hidden columns and interact with the feature then, you may ask? Well, the Column Hiding and its API provide you with the necessary tools to build your own user experience by adding an external button to open the column chooser dialog and events to let you know and potentially display when columns are hidden to the user. The column chooser is easy to open with a single call and hiding and showing events are fired for each column separately (by both Hiding and Responsive!) so you can keep track of their count:

<button id="openChooser"> Show/Hide Columns </button>
 <label id="hiddenColumns" data-count="0"> </label>

 $.ig.loader("igGrid.Responsive.Hiding", function () {
    $("#grid").igGrid({
        //...
        features : [{
            name : 'Responsive',
            responsiveColumnHidden: hidden,
            responsiveColumnShown: shown
        },{
            name : 'Hiding',
            hiddenColumnIndicatorHeaderWidth: 0,
            columnChooserWidth: 300,
            columnHidden: hidden,
            columnShown: shown
        }]
        //...
    });
 
    //initial state after load
    updateHiddenLabel($("#grid").data('igGrid'));
 
    $("#openChooser").igButton().click(function myfunction() {
        $('#grid').igGridHiding('showColumnChooser');
    });
});
 
function hidden(evt, ui){
    var label = $("#hiddenColumns");
    var newHiddenCount = parseInt(label.data('count')) + 1;
    label.data('count', newHiddenCount).text("(" + newHiddenCount + " hidden)");
}
function shown(evt, ui){
    var label = $("#hiddenColumns");
    var newHiddenCount = parseInt(label.data('count')) - 1;
    label.data('count', newHiddenCount).text("(" + newHiddenCount + " hidden)");
    if(newHiddenCount <= 0){
        label.data('count', 0).text("");
    }
}
function updateHiddenLabel(grid){
    var hiddenCount = 0;
    var columns = grid.options.columns;
    for(index in columns){
        hiddenCount += columns[index].hidden ? 1 : 0;
    }
    $("#hiddenColumns").data('count', hiddenCount).text( hiddenCount ? "(" + hiddenCount + " hidden)": "");
}
 

Note that you should pick a fitting size for the chooser (300 looks ideal, remember that’s in CSS pixels) as the Draggable and Resizable widgets on the chooser are not likely to work too well, unless you use one of those widgets that add touch support to jQuery UI.

Of course, you can have the indicators and extra chooser shortcut as well – all depending on what fits your design needs better.

Multi-Column Headers

When you are using jQuery Grids with this feature there’s a slight consideration to keep in mind. With Column Hiding you can hide columns in groups directly through their multi-header keys. Event though the Column Hiding feature itself allows for such API calls and we’ve also been using “hiding a column” through the Responsive feature, it’s not the same thing. Responsive, much like Hiding, is hooked to the underlying grid framework that just won’t accept such calls because they don’t exist there. So short version – Responsive can’t hide multi-columns at once through their common header, you will have to provide settings for each separately.

Responsive Hierarchical Grid

Noticing the title? ‘Grids’? Yes, plural. Decided I should show some love for those with more complicated(hierarchical) data on their hands. Sometimes by looking at what we write and demonstrate someone would think we are forgetting about the Hierarchical Grid. We aren't really, we are merely forgetting how easy it is for readers and users to forget that it is build on top of actual flat grids. You know, there's actually a very normal igGrid widget running alongside the igHierarchicalGrid every time, even for the parent layout. When we talk features and functionality, we almost always have both controls in mind and only mention special cases. Point is this particular Hierarchical Grid is not afraid of some Responsive Web Design!

The Responsive feature can be inherited but that, as with other features with column settings, won’t do you any good. In other words, the feature and its settings must be defined for each layout you want it on. Which is not half bad because you can apply separate recognizers and mode profiles for them.

Twitter Bootstrap is also supported, which is to say you can use Bootstrap CSS classes for column visibility and mode recognition. And it’s also super easy to set up. Introducing the Responsive Web Design page with Ignite UI jQuery Hierarchical Grid and Twitter Bootstrap… whoa, that’s a mouthful!

 $('#grid').igHierarchicalGrid({
    dataSource: '/Home/Departments',
    autoGenerateColumns: false,
    autoGenerateLayouts: false,
    responseDataKey: null,
    columns: [
        //...
    ],
    columnLayouts: [{               
        columns: [
            //...
        ],
        features: [{
            name: 'Responsive',
            responsiveModes: {
                phone: "bootstrap",
                tablet: "bootstrap",
                desktop: "bootstrap"
            },
            columnSettings: [{
                columnKey: 'BusinessEntityID',
                classes: "visible-desktop"
            }
            //...
            ],
            rowTemplate: {
                desktop: "<tr><td>{{html BusinessEntityID}}</td><td>{{html LoginID}}</td><td>{{html NationalIDNumber}}</td><td>{{html Gender}}</td><td>{{html BirthDate}}</td><td>{{html MaritalStatus}}</td><td>{{html JobTitle}}</td><td>{{html OrganizationLevel}}</td><td>{{html HireDate}}</td><td>{{html SalariedFlag}}</td><td><div class='progressbar'>{{html VacationHours}}</div></td></tr>"
            }
        }]
    }],
    features: [{
        name: 'Responsive',
        responsiveModes: {
            phone: "bootstrap",
            tablet: "bootstrap",
            desktop: "bootstrap"
        }
    }]
});
 

The only difference is that you have to specify the Bootstrap recognizer if you need it, and use unprefixed classes for the column visibility like “hidden-phone” and you should be good to go:

And the template you notice above is just for desktop where you can enjoy power and space so why not have a column with Gauges or sliders or progress bars in my case:

Thinking about it, you get responsive design mode grid with responsive design grids in it in a responsive web design site/app – this should totally qualify for an Inception meme!

Resources

I have some interesting tips and tricks coming up next, so stay tuned!

The super hacky JSFiddle on Responsive Web Design page with Ignite UI jQuery Hierarchical Grid and Twitter Bootstrap. That’s the full-screen version, the actual fiddle – code and all(preview probably in tablet or phone mode depending on how big your screen is) is here.
An ASP.NET MVC demo with everything showed above in full code. The Hierarchical Grid here doesn’t use bootstrap so you can compare how very little difference there is in code.
There’s a Webinar on Designing for Responsive Design tomorrow, don’t miss!

Documentation - igGrid Responsive Web Design (RWD) Mode
Responsive Web Design Custom Mode Template Switching and Responsive Web Design Mode of the Grid with Twitter Bootstrap
Other awesome stuff: Ignite UI: What’s New in 13.1 HTML5, jQuery & ASP.NET MVC Controls
Go grab Ignite UI

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!

Developing a RESTful CRUD grid with IgniteUI, WebAPI and Entity Framework

[Infragistics] Angel Todorov — Thu, 23 May 2013 19:55:00 GMT

In a previous blog post of mine I have presented an application which tackles a create/read/update/delete scenario in the context of the IgniteUI grid. I have used frameworks such as MongoDB, Node.JS and Mongoose.

In this blog post, I would like to present an application which uses WebAPI and Enitity Framework to talk to an Ignite UI grid. You are probably aware that the Ignite UI grid supports HTTP REST CRUD operations, and any backend which implements the PUT/GET/POST/DELETE HTTP requests according to the RFC specs is compatible with the grid.

WebAPI is a framework from Microsoft which makes it really straightforward to build REST services. We are going to use a MS-SQL database, have EntityFramework on top of that, in the context of an ASP.NET MVC application, and expose our CRUD operations via WebAPI.

I will use two pages in my application – one which is just HTML + CSS + JavaScript, and one which uses Razor and also makes use of our MVC Grid wrapper. The idea is to show that our grid does not depend on ASP.NET MVC, when we would like to use WebAPI and perform CRUD operations.

Before we start I will list the software packages that you will need:

1) Visual Studio 2012 (Express should do)

2) ASP.NET MVC 4.0

3) Entity Framework (it’s best to install the latest version)

4) Microsoft SQL Server Compact (4.0) – if you do not have it, you can download from http://www.microsoft.com/en-us/download/details.aspx?id=17876

The first three packages can be obtained from NuGet. I’ve actually created a dependencies folder in the project I have attached to this blog post, and all the necessary assemblies are there, so you shouldn’t need to download and install anything additional.

Note: I have used 7zip in order to compress the sample, because default zip /RAR compression makes the file size too big. I have put an extra .zip extension that you’ll need to remove, because our blogging software doesn’t seem to accept the default .7z extension. You can obtain 7Zip from here:

http://www.7-zip.org/

Other programs such as WinRAR will also be able to decompress it.

Before I begin with the MVC project, I would like to summarize the different HTTP request types that correspond to each CRUD operation:

Operation	HTTP	URL Format Example	Response Code
Create	POST	/api/products	201 Created ;
Read	GET	/api/products	200 OK
Update	PUT	/api/products/<id>	204 No Content
Delete (remove)	DELETE	/api/products/?index=<id>	200 OK

Any client & server implementing those correctly can communicate in a RESTful way.

Let’s start by creating an ASP.NET MVC 4.0 project. We can add the js and css folders from the Ignite UI installation to the root of the project – later on, they’ll be referenced from there.

Now add a new item to the project – SQL Server Compact database, and name it Products.sdf:

Double-click the sdf file – it should be placed in the App_Data project folder, and add a couple of tables to the database (Company, Orders, and Products):

The schema for the tables is as follows:

I am not going to use all the tables immediately because I would like to demonstrate some specifics of the Entity Framework, and different ways you can serialize lists of objects and send them from the server to the client – either directly or by proxying to a custom simpler class.

After you have the tables created, you can create an EF model, for now let’s create one for the Products:

After you do this, you can use the EF model in the following way, in your controller code:

var entities = new ProductsEntities();

// entities.Products will give you the list of all products, EF will create a “Product” type for you automatically

Now, in the “Controllers” folder, create a “HomeController” (Empty MVC Controller), an mvcController (Empty MVC Controller). We will use the HomeController, which is the default one, to render a HTML view which will instantiate an ignite UI grid using only JavaScript. We will use the mvcController to render an IgniteUI grid that’s based on the MVC wrappers.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
    public class mvcController : Controller
    {
        //
        // GET: /mvc/

        public ActionResult Index()
        {
            return View();
        }

    }

The key part of our sample is to expose our CRUD operations through WebAPI. We will create an additional MVC Controller that will handle the CRUD requests, set the appropriate response types, etc. There are two ways to do that – to use an API controller template, or to write it manually. Let’s see what happens if we use the API template – that will do most of the work for us:

Let’s have a look at parts of the generated code:

public class Default1Controller : ApiController
    {
        private ProductsEntities db = new ProductsEntities();

        // GET api/Default1
        public IEnumerable GetProducts() { var products = db.Products.Include("Company"); return products.AsEnumerable(); }

You can see that, based on the Product class from EF, WebAPI’s controller template pretty much does all the CRUD-related work for you. It generates the correct HttpResponse codes for you, too. The only drawback of the default template is that it doesn’t generate code for batch operations. Later on in this blog post, we will create a WebAPI controller from scratch, which will tackle more cases than the default one.

Now we need to focus on the Client-side part and write our View. Note that I am attaching a fully functional application, so don’t worry if something does not run correctly if you try to build the app from scratch, you can always have a look at the attached app.

In the Views => Home folder, create an Index.cshtml View, with the following contents:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WebAPI CRUD</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
    <script type="text/javascript" src="js/infragistics.loader.js"></script>
    <script type="text/javascript">
        $.ig.loader({
        	scriptPath: 'js/',
        	cssPath: 'css/',
            resources: 'igGrid.Updating',
            ready: function () {
 
                $("#grid1").igGrid({
                    dataSource: "/api/products",
                    primaryKey: "ID",
                    restSettings: {
                        update: { url: "/api/products" },
                        remove: { url: "/api/products", batch: true },
                        create: {
                            url: "/api/products",
                            batch: true
                        }
                    },
                    autoGenerateColumns: false,
                    height: "350px",
                    width: "800px",
                    columns: [
                            { headerText: "ID", key: "ID", dataType: "number" },
                            { headerText: "Name", key: "Name", dataType: "string"},
                            { headerText: "Price", key: "Price", dataType: "number"},
                            { headerText: "Quantity", key: "Quantity", dataType: "number"},
                            { headerText: "Release Date", key: "ReleaseDate", dataType: "date"}
                    ],
                    features: [
                            {
                                name: "Updating",
                                editMode: 'cell',
                                columnSettings: [{
                                    columnKey: 'ID',
                                    readOnly: true
                                }]
                            }
                    ]
                });
 
                $("#save1").on("click", function () {
                    $("#grid1").igGrid("saveChanges");
                });
            }
        });
    </script>
</head>
<body>
    <div class="panel">
        <input id="save1" type="button" value="Save Changes to server" />
        <br />
        <table id="grid1"></table>
    </div>
</body>
</html>

The most important section of this code is the part where we define our REST settings. Note that you don’t need any custom code at all, the grid manages all the RESTful CRUD ops for yourself. You can use any service URL which conforms to the RFC specs for GET,POST,PUT, etc.

                    restSettings: {
                        update: { url: "/api/products" },
                        remove: { url: "/api/products", batch: true },
                        create: {
                            url: "/api/products",
                            batch: true
                        }
                    },

Note that every type of operation, “update”, “create”, “remove” , can be batch or not batch. If it is set to batch:true, you can perform several ops in one single request, without having to send multiple requests. The URL in that case will have the following format:

E.g. creating two products:

/api/products/?ID=5&ID=6&ID=7

Also note how The WebAPI automatically intercepts the correct request and executes the corresponding method in the controller, based on the URL and the type of the request. So for example if we have the following request to create a product:

The controller method that will be executed is the following:

// POST api/products

public HttpResponseMessage PostProduct(Product product)

Note how WebAPI automatically performs serialization/deserialization of the objects to JSON.

(Keep in mind if your controller name is Default1 (the default), the request will have the format: // POST api/Default1)

In a similar way, we can create an MVC view that instantiates the Ignite UI grid using the MVC wrapper extensions, I will leave the details for you (please have a look at the attached sample -> Views/mvc/Index.cshtml).

Now if we play a bit with our EF model, we add some more entities, such as Order and Company. We can also add associations between those entities, such that a Company can have many products (1:n), and a Product can have many Orders (1:n). Then our model will look like this:

Note that when you are creating the associations, EF will ask you and create various properties in your Product classes, such as Orders (list), Company (of type Company), etc.

And here comes the problem if we try to run the same CRUD grid, after we’ve added those extra parts in the model – we are inevitably going to get either Circular reference errors, or other issues with the serializations. The least we’ll get is a very bloated response JSON, that will try to serialize a lot of extra data for every product, if we blindly pass the list of Product objects in the response. In order to resolve this, we will create our own MyProduct class, with the following properties:

namespace RESTWebAPI.Models
{
    public class MyProduct
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public int Quantity { get; set; }
        public DateTime ReleaseDate { get; set; }
    }

Then we are also going to create our empty ProductsController, and write the CRUD methods ourselves, by returning instances of MyProduct, instead of “Product”, with all the extra data in the response.

One very important thing to note is that the way we are going to implement our WebAPI controller is such that we won’t be converting from IQueryables to Lists. That is, if we have paging, and we have 5 entities per page, we won’t need to load all records from the DB in memory. We won’t be expanding the IQueryables and converting them to other types in foreach loops. We are going to use LINQ, and I hope will like the beauty of it :)

    public class ProductsController : ApiController
    {
        #region GET
        // READ
        // GET /api/products
        public IQueryable<MyProduct> Get()
        {
            var entities = new ProductsEntities();
 
            return from product in entities.Products
                   select new MyProduct
                       {
                           ID = product.ID,
                           Name = product.Name,
                           Price = product.Price,
                           Quantity = product.Quantity,
                           ReleaseDate = product.ReleaseDate
                       };
        }
 
        // GET /api/products/id
        public MyProduct Get(int id)
        {
            var entities = new ProductsEntities();
            MyProduct product =  (from p in entities.Products where p.ID == id
                                select new MyProduct
                                {
                                    ID = p.ID,
                                    Name = p.Name,
                                    Price = p.Price,
                                    Quantity = p.Quantity,
                                    ReleaseDate = p.ReleaseDate
                                }).First();
            if (product == null)
                throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));
            return product;
        }
        #endregion GET
 
        #region POST
        // CREATE
        // POST /api/products
        public HttpResponseMessage Post(IEnumerable<MyProduct> products)
        {
            var entities = new ProductsEntities();
            if (ModelState.IsValid)
            {
 
                // detect conflicts
                foreach (MyProduct p in products)
                {
                    if (entities.Products.Where(e => e.ID == p.ID).Count() > 0)
                        throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.Conflict));
                }
 
                //persist through EF
                foreach (MyProduct myProd in products)
                {
                    Product p = new Product();
                    p.ID = myProd.ID;
                    p.Name = myProd.Name;
                    p.Price = myProd.Price;
                    p.Quantity = myProd.Quantity;
                    p.ReleaseDate = myProd.ReleaseDate;
                    entities.Products.AddObject(p);
                }
                try
                {
                    entities.SaveChanges();
                }
                catch
                {
                    throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.Conflict));
                }
                // create response
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, products);
                // 201 Created should also return the location of the new resource.
                // As we are creating more than one we'll only add the location of the first.
                string uri = Url.Route(null, new { id = products.First<MyProduct>().ID });
                response.Headers.Location = new Uri(Request.RequestUri, uri);
                return response;
            }
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.BadRequest));
        }
        #endregion
 
        #region PUT
        // PUT /api/products/5
        public HttpResponseMessage Put(int id, MyProduct updatedProduct)
        {
            var entities = new ProductsEntities();
            if (ModelState.IsValid)
            {
                // find product
                Product p = entities.Products.Where(o => o.ID == updatedProduct.ID).First();
                if (p != null)
                {
                    p.ID = updatedProduct.ID;
                    p.Name = updatedProduct.Name;
                    p.Price = updatedProduct.Price;
                    p.Quantity = updatedProduct.Quantity;
                    p.ReleaseDate = updatedProduct.ReleaseDate;
                    try
                    {
                        entities.SaveChanges();
                        /* Alternatively the response can be * 200 OK if update was enacted correctly (same as 204 No Content) * The response does not have to include a representation of the entity updated return new HttpResponseMessage(HttpStatusCode.OK); */
                        return new HttpResponseMessage(HttpStatusCode.NoContent);
                    }
                    catch 
                    {
                        throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.Conflict));
                    }
                }
                // if resource is not found it should be created
                p = new Product();
                p.ID = updatedProduct.ID;
                p.Name = updatedProduct.Name;
                p.Quantity = updatedProduct.Quantity;
                p.Price = updatedProduct.Price;
                p.ReleaseDate = updatedProduct.ReleaseDate;
                entities.Products.AddObject(p);
 
                // create response
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, updatedProduct);
                // 201 Created should also return the location of the new resource.
                string uri = Url.Route(null, new { id = updatedProduct.ID });
                response.Headers.Location = new Uri(Request.RequestUri, uri);
                return response;
            }
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.BadRequest));
        }
 
        // PUT /api/products/?ID=5&ID=6&ID=7
        public HttpResponseMessage Put([FromUri]IEnumerable<int> index, IEnumerable<MyProduct> updatedProducts)
        {
            var entities = new ProductsEntities();
            List<MyProduct> createProducts = new List<MyProduct>();
            bool created = false;
            if (ModelState.IsValid)
            {
                foreach (MyProduct updatedProduct in updatedProducts)
                {
                    Product p = entities.Products.Where(o => o.ID == updatedProduct.ID).First();
                    if (p != null)
                    {
                        p.ID = updatedProduct.ID;
                        p.Name = updatedProduct.Name;
                        p.Price = updatedProduct.Price;
                        p.Quantity = updatedProduct.Quantity;
                        p.ReleaseDate = updatedProduct.ReleaseDate;
                    }
                    else
                    {
                        created = true;
                        // if resource is not found it should be created
                        p = new Product();
                        p.ID = updatedProduct.ID;
                        p.Name = updatedProduct.Name;
                        p.Quantity = updatedProduct.Quantity;
                        p.Price = updatedProduct.Price;
                        p.ReleaseDate = updatedProduct.ReleaseDate;
                        entities.Products.AddObject(p);
                        createProducts.Add(updatedProduct);
                    }
                }
                try
                {
                    entities.SaveChanges();
                    /* Alternatively the response can be * 200 OK if update was enacted correctly (same as 204 No Content) * The response does not have to include a representation of the entity updated return new HttpResponseMessage(HttpStatusCode.OK); */
                    if (!created)
                    {
                        return new HttpResponseMessage(HttpStatusCode.NoContent);
                    }
                }
                catch
                {
                    throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.Conflict));
                }
                // we had to create entities
                // create response
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, createProducts);
                // 201 Created should also return the location of the new resource.
                string uri = Url.Route(null, new { id = createProducts.First().ID });
                response.Headers.Location = new Uri(Request.RequestUri, uri);
                return response;
            }
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.BadRequest));
        }
        #endregion
 
        #region DELETE
        // DELETE /api/products/5
        public HttpResponseMessage Delete(int id)
        {
            var entities = new ProductsEntities();
            if (ModelState.IsValid)
            {
                MyProduct deletedProduct = new MyProduct();
                Product entity = entities.Products.Where(p => p.ID == id).First();
                deletedProduct.ID = entity.ID;
                deletedProduct.Name = entity.Name;
                deletedProduct.Price = entity.Price;
                deletedProduct.Quantity = entity.Quantity;
                deletedProduct.ReleaseDate = entity.ReleaseDate;
                try
                {
                    entities.Products.DeleteObject(entity);
                    entities.SaveChanges();
                } catch 
                {
                    throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.Conflict));
                }
                return Request.CreateResponse(HttpStatusCode.OK, deletedProduct);
                /* Alternatively Delete can also return * 202 Accepted if the delete action is accepted but not enacted * 204 No Content if the delete action has been enacted but the response does not include the deleted entity(s) return Request.CreateResponse(HttpStatusCode.NoContent); return Request.CreateResponse(HttpStatusCode.Accepted); */
            }
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.BadRequest));
        }
 
        // DELETE /api/products/?id=5&id=6&id=7
        // FromUri attribute is mandatory for MVC4 RC because the parameter is a complex type
        // and by default is taken from the request body
        public HttpResponseMessage Delete([FromUri]IEnumerable<int> index)
        {
            var entities = new ProductsEntities();
            List<MyProduct> deletedProducts = new List<MyProduct>();
            if (ModelState.IsValid)
            {
                foreach (int i in index)
                {
                    MyProduct deletedProduct = new MyProduct();
                    Product entity = entities.Products.Where(p => p.ID == i).First();
                    deletedProduct.ID = entity.ID;
                    deletedProduct.Name = entity.Name;
                    deletedProduct.Price = entity.Price;
                    deletedProduct.Quantity = entity.Quantity;
                    deletedProduct.ReleaseDate = entity.ReleaseDate;
                    entities.Products.DeleteObject(entity);
                    deletedProducts.Add(deletedProduct);
                }
                try
                {
                    entities.SaveChanges();
                }
                catch
                {
                    throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.Conflict));
                }
                return Request.CreateResponse(HttpStatusCode.OK, deletedProducts);
                /* Alternatively Delete can also return * 202 Accepted if the delete action is accepted but not enacted * 204 No Content if the delete action has been enacted but the response does not include the deleted entity(s) return Request.CreateResponse(HttpStatusCode.NoContent); return Request.CreateResponse(HttpStatusCode.Accepted); */
            }
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.BadRequest));
        }
        #endregion
    }

Since our controller is named ProductsController, we don’t have to change anything in our grid javascript definition. Once we load it, we can use the Updating feature UI in order to perform the CRUD operations. Note that I’ve added a “Save Changes” button which invokes grid’s saveChanges() function once clicked. This persists all the changes to the server. If we have multiple CREATE requests and batch is true, this will result in one CREATE (POST) request. Same for all the rest. So if we have a mix of CREATE/UPDATE/DELETE and batch is true for all of them., this will result in a maximum of 3 requests.

If you would like send the update request immediately to the server, you can also handle the rowAdded / rowDeleted / editCellEnded / editRowEnded, and invoke saveChanges() there.

I hope you enjoyed this blog post and that you like the powerful functionality of our updating feature. Let me know if you have any questions about the content and about the attached project. Any suggestions for additional functionality are more than welcome!

NetAdvantage for Windows UI Release Notes – May: 13.1 Service Release

[Infragistics] Pamela Brasil — Thu, 23 May 2013 15:14:00 GMT

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.

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

Windows UI 2013 Volume 1 Service Release

• PDF - NetAdvantage for Windows UI 2013 Volume 1 (Build 13.1.20131.1094)
• Excel - NetAdvantage for Windows UI 2013 Volume 1 (Build 13.1.20131.1094)

NetAdvantage for WPF Release Notes – May: 12.1, 12.2, 13.1 Service Releases

[Infragistics] Pamela Brasil — Thu, 23 May 2013 15:08:00 GMT

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

NetAdvantage for Silverlight Release Notes – May: 12.1, 12.2, 13.1 Service Releases

[Infragistics] Pamela Brasil — Thu, 23 May 2013 14:58:00 GMT

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

Silverlight 2012 Volume 1 Service Release

• PDF - NetAdvantage for Silverlight 2012 Volume 1 (Build 12.1.20121.2295)
• Excel - NetAdvantage for Silverlight 2012 Volume 1 (Build 12.1.20121.2295)

Silverlight 2012 Volume 2 Service Release

• PDF - NetAdvantage for Silverlight 2012 Volume 2 (Build 12.2.20122.2170)
• Excel - NetAdvantage for Silverlight 2012 Volume 2 (Build 12.2.20122.2170)

Silverlight 2013 Volume 1 Service Release

• PDF - NetAdvantage for Silverlight 2013 Volume 1 (Build 13.1.20131.2069)
• Excel - NetAdvantage for Silverlight 2013 Volume 1 (Build 13.1.20131.2069)

Pivot Tables on iPad and how to make one with ReportPlus

Gabriel Lopez — Thu, 23 May 2013 14:39:00 GMT

Hi, my name is Gabriel, and I'm a data junkie (everyone claps in imaginary support group). I like to measure processes by analyzing data logs, and check for trends. I do this as part of my job, but also do it with my personal data, such as my email inbox. The feature that I use the most in Microsoft Excel is Pivot Tables. So when I started using my iPad I could not believe there were no good apps to do pivot tables on the iPad, or even the iPhone. All office-like apps, don't include Pivot Tables support. That´s one of the reasons we decided to build ReportPlus, to allow data junkies like me to be able to do all sort of data analysis on the go, not just when they have access to a desktop computer. In this article we'll show how easy it is to build pivot tables in ReportPlus to summarize data.

In case you are wondering, Pivot Tables are data summarization tools commonly found in spreadsheets or business intelligence software. Probably the most popular software application that provides pivot tables support is Microsoft Excel.

Let's look at the following example, for instance if you have an excel spreadsheet with sales data, listing invoices, something like the following:

You may want to know the total number of sales, grouped by Country. How can you do this? You could start adding up each sales cell of the same country manually, which would be very tedious and error prone, or you could create a pivot table and get something like:

Creating the pivot table on the iPad

If you need to do this in an iOS device, such as an iPad, or iPhone, your best option is to get ReportPlus, import the Excel spreadsheet to Local Files, and get started. To do this you'll need to start a new dashboard, which you do by tapping the + button on the initial view, and selecting one of the blank templates. Then you navigate the Local Files folder (or whatever data source you may have configured to retrieve the data from), and drop it in the dashboard canvas.

Once you do this, the widget editor is displayed automatically. This view lists on the left hand side the columns of the data set, and in the central bottom part the pivot table editor.

By tapping and holding fields in the columns list they become available for dragging. This allows for two things, one reordering them in the list, two using them to build a pivot table. By dragging and dropping columns in the pivot editor placeholders (Rows, Columns, Values and Filters) we create the pivot table.

Dropping fields in the Rows placeholder will create a table with the first row containing all the distinct values contained in the dropped column. For instance in the Sales example, dropping the Country column in Rows generates a table listing USA, UK, and Japan in different rows. Dropping a field in the Column placeholder has a similar effect but the values are structured as different columns of the table.

Dropping fields in the Values placeholder applies a summarization function on all the values of dropped column, grouped by the values in the Rows or Columns placeholders. For instance, by dropping the Sales column in Values will add the number of Sales grouped by the different countries. There's a list of available summarization functions to calculate minimum, maximum, average, sum, etc. This can be selected by tapping the field in the pivot table, and changing the function selected in the Aggregation option.

If the field dropped in Values is not numeric, then the function that will be applied is the COUNT function that simply counts all values on that column in the original data table.

Applying Fitlers and Sorting Pivot Tables

By tapping on a field dropped in values, the fields settings editor is displayed. This dialog allows to configure several things:

Label. Allows to change the label generated for the aggregated value, which by default is the name of the aggregation function plus the name of the field. This can be renamed to anything.
Aggregation. Changing the aggregation functions as mentioned in the previous section.
Sorting. This option allows to sort values in the pivot table. For instance it can be used to sort values in a descendent order.
Formatting. This option allows for example changing the way numeric values are display, to render them as currency, remove decimal figures, show 1000 separator, etc.

For instance it allows to sort sales by amount, and filter the values to display only the top 10 Countries. Again, something very useful, very easy to achieve with ReportPlus, not so much with other tools out there.

Pivot Table and DateTime fields

One of the neatest features of ReportPlus pivot table is that it handles Date columns "intelligently". Whenever you drop a Date column in Rows ReportPlus automatically groups the values by Day, Month, or Year, depending on the time period contained in the data table. This is simpler that other pivot table implementations that require the creation of a calculated field, to extract for instance the month value of out the Date value in order to aggregate by Month.

Aggregating Date columns also allows drill down navigation. This can be tried by tapping in the first row containing the dates. Drilling down from years, displays, months, and drilling down months displays the values for days.

Finally

Once the data has been summarized with the pivot table we are able to choose among the many data visualization options available in ReportPlus to chart it, so that it becomes as easy as possible to read & digest.

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

[Infragistics] Sam A. — Wed, 22 May 2013 20:17:00 GMT

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.

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

WinForms 2013 Volume 1 Service Release (Build 13.1.20131.2027)

• PDF - NetAdvantage for WinForms 2013 Volume 1
• Excel - NetAdvantage for WinForms 2013 Volume 1

WinForms 2012 Volume 2 Service Release (Build 12.2.20122.2073)

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

WinForms 2012 Volume 1 Service Release (Build 12.1.20121.2135)

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

Treehouse - HTML5 Resource of the Day

Brent Schooley — Wed, 22 May 2013 16:31:49 GMT

Video training is highly effective when the quality of the content is excellent and the information is reinforced through both challenges and achievements. Whether you’re looking to learn more about web development or design or maybe even mobile development, Treehouse has you covered. Let’s take a look at the offering.

Treehouse - A better way to learn technology

Treehouse bills itself as “a better way to learn technology”. After a brief look through the courses offered, I have to agree. The video content here is top-notch and the challenges and achievements keep things interesting. One additional thing I like about Treehouse is that they provide full text transcripts for each video as well as extra credit and teacher’s notes. It really is a great way to learn.

Here is a sample screenshot of the video content:

This is what the challenge interface looks like:

Finally, here’s a sample course schedule:

Summary

I think Treehouse is a wonderful way to learn new material and they have a great selection of courses available. I would definitely recommend checking out the trial.

Be sure to stay tuned to my new Web Programming For Beginners series as well!

Contact

If you have any questions or comments in the meantime, please feel free to email me at bschooley@infragistics.com or find me on Twitter @brentschooley.

Windows Azure datacentres coming to Australia!

David Burela — Wed, 22 May 2013 07:48:30 GMT

Microsoft is planning to expand the Windows Azure regional datacentres to Australia. There are plans to add two new “sub-regions”, in Victoria and NSW.

This is exciting, because there have been an number of businesses and scenarios where due to regulator requirements on data sovereignty, they were unable to use the Azure locations hosted in other countries.
It is interesting to look at *why* Microsoft is deploying 2 new centres (Victoria & NSW), and not just in NSW. This comes down for the need to provide geo-redundancy, while still giving users data sovereignty in Australia.

This bodes well for any Australian start-up what wants to create a local service. The latency from US servers can cause a slight lag in requests, having their applications servers hosted locally will be great.
There is also the potential for some big name USA companies to start hosting geo-located edge servers here, so that their Australian customers get a more responsive experience. This could easily be done by using the Windows Azure Traffic Manager to manage multiple geo-located computer instances http://www.windowsazure.com/en-us/pricing/details/traffic-manager/

The official announcement is up on the Australian MSDN blog http://blogs.msdn.com/b/ausblog/archive/2013/05/16/windows-azure-expands-downunder.aspx

By David Burela

Software Engineer Interview Questions

Marie Berdini — Tue, 21 May 2013 19:07:00 GMT

Hiring is a tricky process. Employers need to identify a need for new skills, first being sure they aren’t somewhere already, hidden in their organization (it is so much better to hire from within). Then, they need to advertise and get viable candidates. Depending on the difficulty of sourcing good candidates, companies may partner with recruitment agents to assist. Once they get to this stage the really hard work begins - the interview.

Conducting an effective interview is a learned skill, and endless articles and advice exists on what to do (and just as important, what not to do). We are going to focus on one specific area - good questions to ask during the interview. The questions below are designed to address the following:

To tell you as much about the interviewee in the short time given
To test the interviewee on his/her CV and what you think you already know about them
To test the interviewee on their raw coding ability and problem solving skills
To judge if the interviewee is a cultural fit for your organization.

These questions aren’t foolproof, and they don’t drift into Google style abstract territory, but we hope you will find them useful next time you are hiring.

About the CV

1. “Tell me a little bit more about your role at X company.”

You want to check how well the interviewee’s CV stacks up. Getting them to talk about it is the simplest way.

About coding and problem solving

2. “Explain the difference between ‘equality’ and ‘equivalence’.”

If a candidate can’t successfully answer this question then they should be considered ‘entry level’ at best.

3. “Tell me about design patterns, and give me an example of when you used them last.”

If the interviewee has never used design patterns, this will tell you a great deal. If they have, the details should give you a view on how they solve problems.

4. “What language are you most comfortable in and why?”

If you are looking for a .NET person, and your potential candidate is exclusively PHP then you may have an issue. But a good answer should have some thought and rationale behind it. This is much more important than the actual language cited in the answer. Ask about databases as an addition/alternative.

5. “How do you test your code?”

This doesn’t test any particular coding skill, but it does tell you a lot about their process. All developers should be doing some kind of testing. Depending on what you are looking for the answer might reveal someone who is conscientious in their work, or someone who knows all about test strategies and methodologies.

About character and personality

6. “Describe the work environment in which you feel you are most effective.”

This will tell you if the person is a cultural fit for your company. Their answer can’t really be right or wrong, but it can be an indicator of the cultural fit you're looking for.

7. Why did you apply for this job?

You want a new teammate who wants to work for you, not someone who is simply working down the jobs ads from A-Z. This question will root out these sort of applicants, and show the level of research the candidate has done on the opportunity and your company.

Interested in a career here at Infragistics? Check out our current openings!

Accessing Salesforce data on the iPad

DevToolsGuy — Tue, 21 May 2013 17:32:00 GMT

We have talked a lot recently about mobile design, mobile websites, and the surge in use of mobile devices in the enterprise. In this post we are going to look at a specific use case of the latter - Salesforce and the iPad.

Salesforce is best known for their customer relationship management (CRM) software which has found a great deal of success in the enterprise market. In recent years they have started to expand their focus towards social products, in particular Chatter, which is billed as a real-time collaboration network and has parallels with products like Yammer. Chatter is a good example of how Salesforce has reshaped itself as a dynamic innovative company, one keen to embrace new trends. These trends include ‘mobile first’, and the company has also tried to reach out and help its users as much as it can in this area.

Salesforce have their own mobile app called - Salesforce Touch for iPad. It is a well thought out affair, allowing users to:

Access accounts, contacts, opportunities, and tasks
Access Chatter feeds
Edit data and create new records
Search

The interface is nice, and it makes good use of the iPads screen real estate. The biggest drawback is the app still doesn’t provide access to all of the data available on the native Salesforce website, so it can’t be totally relied on in the field just yet. Nor does it offer anything groundbreaking in terms of dashboards or charts. It just isn’t very exciting, it doesn’t make data ‘pop’ off the screen. For that you will need something like our very own ReportPlus product.

ReportPlus is a dashboard and reporting tool that can connect to popular enterprise data sources like those provided by Salesforce. It is specially designed to provide easy access to data on iOS devices like the iPad, and takes a lot of the pain out of creating beautiful visualizations. It doesn't require programming knowledge or code of any sort, is easy to use, and the results can be very impressive. If your customers or workforce are looking for an alternative to the official Salesforce app, or you want to bring your Salesforce data to life in a whole new way, then ReportPlus might be the tool for you.

ReportPlus allows easy access to server side resources, like Salesforce, using domain credentials or username/password authentication. Then the real fun begins, as you can manipulate retrieved data sets to build rich functional, charts, trend lines, filters, and even geo-coded maps.

ReportPlus also offers the following features:

Create interactive dashboards - Sort, filter, and manipulate data directly in the app
Add logos, colors, and images - Brand your dashboards
Save and export dashboards in a variety of formats - Share dashboards with colleagues via email, PowerPoint or the cloud.

So next time you are looking at your Salesforce data and wishing it had a little more shine, try ReportPlus. We think you will be impressed.

Web programming (HTML5/CSS3/jQuery) for beginners - the journey starts here…

Brent Schooley — Tue, 21 May 2013 15:53:55 GMT

Sometimes it’s hard to admit as programmers when we really don’t have a clue what we’re doing. This is especially evident when learning a new platform or technology. I am going through this exact experience right now as I try to get back into the web programming world. New tags in HTML5, new capabilities in CSS3, and various frameworks that make JavaScript feel much more modern. As my recent posts about HTML5 resources indicate, there’s a lot to learn once you get started. But what if you’re just getting started? Most of the resources out there assume you have some knowledge of HTML, CSS, and JavaScript. It can be hard to learn something new when everybody assumes more prerequisites than you actually know.

Tracking progress, sharing knowledge

I want to create something that tracks bits and pieces of my learning process and tries to frame it under the ideal of “starting from the beginning”. This is admittedly a somewhat flawed premise since I am not starting from the very beginning (I did some Rails programming back in Rails 2), but I will do my best to describe things for the beginner. As I learn something new, I’ll share it. It doesn’t whether it’s a new fancy CSS trick or something that might seem extremely basic that I don’t want you to miss.(chances are I missed it the first time too!)

The format

This process will not be constrained by an outline up front and posts that follow that outline to the letter. That’s just not how the learning process tends to work. Sure, some of it is structured but a lot of learning happens randomly as we are introduced to new resources and concepts. If a concept is best conveyed by a tutorial, I’ll post a tutorial. Screencasts? Sure! Book reviews? You bet!

Where do I start?

Well, from the beginning would be best. While you wait for the posts from me to come in, I’d highly recommend the following resources for training. Both of these sites include coding challenges to help reinforce the knowledge you learn from the video training. Check out the free courses available from each to see if this will work for you:

CodeSchool - (my review)
Treehouse – Content here is great and spans multiple technologies and disciplines. They have a free trial you can check out if you follow the link.

Stay tuned, more content coming soon!

Contact

If you have any questions or comments in the meantime, please feel free to email me at bschooley@infragistics.com or find me on Twitter @brentschooley.

Top 10 Tools for Mac and iOS Development

[Infragistics] Torrey Betts — Mon, 20 May 2013 14:55:00 GMT

Introduction

Having the right set of tools can take your development quality to the next level. This article provides you with my personal current top 10 apps to use for Mac and iOS development.

#1 - AppCode

AppCode is a must have IDE for any serious developer on the Mac/iOS platform.

Features

Advanced Coding Assistance
Code Generation and Refactorings
Code Quality
Project and Code Navigation
i18n Support
Debugger
Unit Testing
iOS Development
VCS Integration and Local History
Integrations
More than Objective-C IDE
Customization and Extensibility

Website: http://www.jetbrains.com/objc/features/index.html

#2 - Indigo Studio

Prototype out your app ideas. Indigo Studio allows you to interactively prototype your web, desktop, and mobile apps. Major upside, it's free!

Features

Illustrate with Storyboards
Sketch and Design Screens
Design with Clutter-Free UI
Leverage Built-In UI Elements
Prototype and Visualize Interactions
Animate Transitions
Annotate Prototypes
Share and Present Prototypes
Export Prototype Designs

Website: http://www.infragistics.com/products/indigo-studio

#3 - Reflector

An excellent tool for mirroring your iOS device screen when you have to demo or present to a group.

Features

Record. Easily capture the screen of your iOS device and save it as a video file for later review.
iOS On Your Mac. View your iOS device on your Mac and continue using it while you're mirroring.
Password Protection. Control access to your Mac by setting a password to prevent unwanted connections.
Selectable Frames. Change the color of the device frame on your screen to match the actual skin of your device.

Website: https://www.reflectorapp.com

#4 - xScope

A collection of valuable design and development tools all in one package.

Features

Mirror - Effortlessly see your designs and applications on iOS while you work on them from your Mac.
Dimensions - Instantly find the dimensions of any on-screen element simply by rolling your mouse cursor over it.
Rulers - Powerful on-screen rulers for precise pixel measurements that include scaling, rotation, and edge snapping.
Screens - Inspect your usable screen real estate with dozens of templates for computers, TV's and mobile devices.
Loupe - Magnify part of your screen, copy colors and simulate how colors appear to users with vision impairments.
Guides - Display vertical and horizontal guides that float on top of all else on the screen for easy alignment.
Frames - Create, layout and adjust custom marker boxes that float on top of all other on-screen elements.
Crosshair - Quickly and easily locate and align any point visible on the screen.

Website: http://xscopeapp.com

#5 - CodeRunner

Edit and run code in any programming language. There's a bunch of preset languages already set up, and it's an easy task to add any other languages you might be using.

Features

Run code in any language
Powerful editing
Customizable templates
Built-in Console
Add your own languages
Interact with your code

Website: http://krillapps.com/coderunner/

#6 - Patterns

A simple yet powerful tool for working with regular expressions. Includes a built in cheat sheet, if you need a little refresher.

Features

Regular expression syntax coloring makes it easy to see how your pattern is interpreted by the regex engine. No more confusion about what needs to be escaped.
See matches and replacements in real time while you edit your pattern.
Copy match and replacement code snippets of your pattern for quick use in a number of different programming languages.
The built-in regular expression reference sheet helps you find the piece of regex syntax you need.

Website: http://krillapps.com/patterns/

#7 - Clarify

Quickly create tutorials and how-to documents.

Features

Capture images.
Each capture becomes a step in your document.
Add annotations and text to images.
Add text.
Share your document via DropBox or Clarify-it.com.
Share as a PDF.
Copy RTF to email or word processing documents.
Many ways to export images.

Website: http://www.clarify-it.com

#8 - ColorSchemer Studio 2

Quickly create schemes. This tool has a GalleryBrowser button on the toolbar that provides access to millions of color palettes in addition to being able to create your own from scratch.

Features

Create and save color palettes.
Identify color harmonies.
Access over a million pre-made color schemes.
Pull unique palettes from photos or images.
Build custom LiveScheme formulas.
Transform a single color into a complete color scheme.
Mix colors and create gradient blends.
Find similar or related colors.
Preview colors on a variety of layouts.
View colors through colorblind eyes.
Print your color schemes.

Website: http://www.colorschemer.com/osx_info.php

#9 - Spectrum

Quickly create beautiful color schemes. Inspired by principles of color theory. This tool also makes it really easy to copy each color to the clipboard in a number of formats, including hex color code, UIColor, CIColor, etc.

Features

Create color schemes based on harmony rules.
Instantly explore tints and shades for a given color to fine tune the palette.
Automatically create color schemes from a photograph - great for inspirations.
Organize your palettes and create a searchable collection of color schemes.
Capture color from your screen using the built-in color picker tool.
Export your color schemes to CSS and ASE (for use in Adobe's Creative Suite).
Import colors from existing CSS and ASE files.
Instantly preview your color schemes using a variety of visualizations.
Configure color profiles.
Switch between two color wheel modes - perceptual and uniform.

Website: http://www.eigenlogik.com/spectrum/

#10 - ColoRotate

Work fast. Edit color palettes with a few taps of your fingers. Easily analyze, extract, adjust, and share colors.

Features

Work fast. Edit your color palettes with a few taps of your fingers. Easily analyze, extract, adjust, and share colors.
Color smart. Take control of colors with the intuitive 3D color scope. There are powerful tools for extracting from images, adjusting with blends, making precise edits, or generating fresh ideas with randomized palettes.
Sociable colors. View your palettes with six different preview modes. Share with colleagues, clients and friends by email, Twitter, Facebook, Evernote, DropBox, or send to your photo library.
Works with Photoshop. Connect to Photoshop CS5 or CS6 and ColoRotate instantly updates the foreground & background colors, or sends palettes to your desktop.

Website: http://mobile.colorotate.org

By Torrey Betts

Infragistics Community

FREE Metro Light and Dark Themes for WPF and Silverlight Microsoft Controls

Silverlight

Metro Theme Light

Metro Theme Dark

WPF

Metro Theme Light

Metro Theme Dark

That’s All Folks

NetAdvantage for ASP.NET Release Notes - May: 12.1, 12.2, 13.1 Service Releases

Download the Release Notes

ASP.NET 2012 Volume 1

ASP.NET 2012 Volume 2

ASP.NET 2013 Volume 1

Responsive Web Design with jQuery Grids: A closer look

A Getting Started, of sorts

Merging and Column Hiding

Responsive Hierarchical Grid

Resources

Developing a RESTful CRUD grid with IgniteUI, WebAPI and Entity Framework

NetAdvantage for Windows UI Release Notes – May: 13.1 Service Release

Windows UI 2013 Volume 1 Service Release

NetAdvantage for WPF Release Notes – May: 12.1, 12.2, 13.1 Service Releases

WPF 2012 Volume 1 Service Release

WPF 2012 Volume 2 Service Release

WPF 2013 Volume 1 Service Release

NetAdvantage for Silverlight Release Notes – May: 12.1, 12.2, 13.1 Service Releases

Silverlight 2012 Volume 1 Service Release

Silverlight 2012 Volume 2 Service Release

Silverlight 2013 Volume 1 Service Release

Pivot Tables on iPad and how to make one with ReportPlus

Creating the pivot table on the iPad

Applying Fitlers and Sorting Pivot Tables

Pivot Table and DateTime fields

Finally

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

WinForms 2013 Volume 1 Service Release (Build 13.1.20131.2027)

WinForms 2012 Volume 2 Service Release (Build 12.2.20122.2073)

WinForms 2012 Volume 1 Service Release (Build 12.1.20121.2135)

Treehouse - HTML5 Resource of the Day

Treehouse - A better way to learn technology

Summary

Contact

Windows Azure datacentres coming to Australia!

Software Engineer Interview Questions

About the CV

About coding and problem solving

About character and personality

Accessing Salesforce data on the iPad

Web programming (HTML5/CSS3/jQuery) for beginners - the journey starts here…

Tracking progress, sharing knowledge

The format

Where do I start?

Contact

Top 10 Tools for Mac and iOS Development

Introduction

#1 - AppCode

#2 - Indigo Studio

#3 - Reflector

#4 - xScope

#5 - CodeRunner

#6 - Patterns

#7 - Clarify

#8 - ColorSchemer Studio 2

#9 - Spectrum

#10 - ColoRotate