Developer Tools Blogs

Quick Tips on Troubleshooting Your Web Pages – Element Inspector and Network Resources

ASP.NET AJAX Team — Wed, 16 May 2012 18:39:00 GMT

When I first started out developing web pages back in the day there barely were any tools for development outside of the IDEs that were offered, which weren’t too much to write home about anyways. While some might say that web pages that were manly cluttered with animated GIFs and content related to Warcraft 1 & 2 and Diablo 1 (tells you a lot about my child hood ;)) is not considered much of a web development project, I still say it is (or was) :D. Either way, you wrote your HTML, CSS (fairly new too) and JavaScript and hoped everything would turn out OK when you opened it in the browser. If something was off you went back to tweak it in your IDE (*cough* notepad *cough*) and refreshed while crossing your fingers that everything would be better this time around. Alerts were also frequently used as a way to see if a JavaScript function was accessed, and if a variable existed or what it had for a value.

It’s not like this today though. Today is much, much different – in a fantastic way. In today’s world we have more tools than we can shake a stick at for web development. Especially in the way of helping us developers in figuring out what exactly is happening to our web pages when they get rendered in our browser. Questions like “How come this looks great in Chrome but slightly quirky in IE?”, “Why is none of my JavaScript executing?” and “Why is this page loading so slowly?” can now be answered within each of the major browsers thanks to the Developer Tools offered for each one.

Some of you might be saying “well duh, I’ve been using this forever” but there is still a large group of the developer population that does not know about these tools. So for the sake of people either new to web development, or for those of you that just haven’t heard of these tools, or only use a small portion of them, I wanted to write this quick blog post series. I’ll be covering some of the main features of these Developer Tools, as well as show how they look in the three major browsers that I like to use; Chrome, Firefox and IE. In the case of Firefox I’m going to be using Firebug, an add-on that has been available for quite some time and was my introduction to browser dev tools. Firefox does have built-in dev tools now, but I still think Firebug offers more features and is the preferred tools to use right now.

Enough of my rambling on here, let’s get to it! Today I’ll be covering the Element Inspection tools, as well as the Resources tools.

Element Inspection

Ever seen a button on a page that looked ridiculously awesome and wondered why it looks so good? Maybe you’re just curious why a certain element is now in the upper right-hand corner (has happened way too many times for me), or maybe you just want to see how the page you’re currently on is laid out.

Well thanks to the element inspector all these mysteries are solved! How often do you get to hear that? Well, the element inspector often (as in, most major browsers have this ability) provides you with a couple of useful things.

First of all, when you inspect an element you usually get to see both where it is currently located on the page (each browser does this a little differently) as well as where it is in the DOM. Additionally, and this is an extremely useful feature, you get to see the CSS that affects the particular element. You can see everything from what styles are supposed to get applied, which ones get overridden, and the final styles applied. You can usually also see which CSS file (and what line number!) is responsible for that particular rule as well. Super awesome in scenarios where you would normally just stare at the screen tearing your hair out wondering why everything looks so wrong.

For this particular demo I just have a very quick sample HTML page, as I just want to cover the basics.

<html>

<head>

<script src="Scripts/jquery-1.7.2.min.js"></script>

<link href="Styles/Styles.css" rel="stylesheet" />

<title>Quick Dev Tools Sample</title>

<style>

p

{

color: #FFFFFF;

}

</style>

</head>

<body>

<p id="sampleParagraph">

This is a sample paragraph

</p>

</body>

</html>

As you can see I also have a separate CSS file called Styles.css, which at this moment only looks like this:

body

{

background-color: #FFFFFF;

}

p

{

background-color: #EFB087;

font-family: Verdana;

width: 100px;

}

Very simple, but illustrates the points I want to make. Just from looking at the code above you can see a few things:

We have a paragraph which should have a black (#000000 in HEX) font
The font in the paragraph element should be Verdana (no backup)
The background of the paragraph should be a kind of orange-y color (I’m awful with color names)
The background of the body element should be #FFFFFF, or in an English term – white :)

Let’s take a peek at how this looks in our browsers various developer tools available to us.

Chrome

There are a couple of ways you can work with the element inspector tool within Chrome. The easiest way to make sure that you are looking at the specific element you want is to right-click on it in your browser and select “Inspect Element” from the context menu that appears.

Once you have done this the Chrome Dev Tools will open up, with your particular element highlighted within the DOM.

Speaking of the DOM, you can actually navigate through the DOM and highlight elements that way too. This can be done by just opening the Chrome Dev Tools (CTRL + SHIFT + I, or F12) and going to the Elements tab. Once here you’ll see the same view as before, only the body element will be highlighted. If you hover over, or click, on any HTML element in here it will get highlighted as well.

As that screenshot shows you, our element is actually highlighted on our page, and we even get some additional information about it. We know that it’s a “p” element, with the ID sampleParagraph (“#” refers to the ID) and that it’s 100px by 54px in size.

You also might have noticed the “Styles” and “Computed Styles” in the second image there. Well, this area allows us to easily wee what styles end up getting applied to the element. This means CSS rules that affect the element, even if they have ended up over-writing other styles. Computed Style shows you the end result, and where each style comes from, as can be seen here:

You might notice that each one of those documents (.css and .html) are actually links and will open the CSS file in the Chrome Dev tools to that specific line in the CSS or HTML file so that you can dive in to the file in charge of the style. This gives you a chance to see where the particular style you defined exists, which becomes very handy when you are scratching your head wondering why that element is not getting styled properly.

Firefox

As I mentioned previously, Firefox has a very similar view brought to you by the add-on Firebug. So let’s go through the same things as I did with Chrome above.

First let’s right-click on my element and go to “Inspect Element with Firebug”. You might notice that there is an “Inspect Element” option as well. This is for the internal developer tools from Firefox that I mentioned in the beginning. Right now I’ll focus on Firebug, but you never know what kind of blog posts the future holds!

Now we see that the element is highlighted in our DOM explorer.

You get the same view that I mentioned above with Chrome as well, where I can highlight the element in the DOM explorer and have it highlighted in the actual web page as well. So far, nothing really too different.

One thing that you see immediately though is the style tab over on the right-hand side. This is where you notice some differences. For example, the first view we see just shows us the rule applied to this particular element. This was available in Chrome as well, but for the sake of comparison let’s go over to the Computed tab:

Not exactly what we saw in Chrome. The nice thing it does is split up all of the styles according to their relevant groups. So Text, Background, Box Model etc., but there is no way to see where exactly these come from. So we have to look through the styles tab to see where everything is coming from, which isn’t a bad thing I just love having those kinds of lines drawn for me.

IE9

IE9 has some pretty spiffy tools for web development, which hasn’t always been its strong suit in previous iterations. The great thing is that you can also test for the various modes that have existed within IE (quirks mode etc.) and go back to IE7 for testing – all in the same browser.

While there isn’t a context menu item to inspect the element we can still very easily get access to an element in order to inspect it. If we open our page in IE9 and press F12 we will see the Developer Tools appear. Once we’ve done this we just need to find the arrow icon under the HTML tab, which starts the element inspection:

Once we’ve clicked on an element we’re granted a very similar view to what we’ve seen before in the other browsers.

We have the same ability to see all of the styles, but one thing that is different is instead of “Computed” styles we now have “Trace Styles”.

This is just the same as in the other browsers, however now we have something that is closer to what we had in Chrome. Unfortunately we cannot get the exact line number, but if we click on a particular file name we can very easily see where in the source file these styles are located. This also allows for very quick tests to see what happens when you remove the styles, which in both other browsers can only be done in the Style tab.

Network

I’m sure you’ve run in to scenarios where you swear that you added an image to a page, or you realize that there’s no CSS being applied to your page and you’re wondering why. Often times these scenarios are derived from the fact that there was an issue downloading the particular resource. Whether it be an image, a CSS file, or maybe even the next page our clients are navigating to, it can always happen. Spelling mistakes, or moved resources – the list goes on.

Well, what if I told you that you can easily see exactly what kind traffic is occurring on a particular web page, and see exactly what files are attempted to, or successfully, downloaded? Hard to believe it? Let me introduce you to the Network tab of these browser dev tools – it’ll rock your world!

For the sake of keeping things simple I’ll be using the same HTML page as with the element inspector.

Chrome

In Chrome it is very easy to find this Network tab. Just open up the Chrome Dev Tools (CTRL+SHIFT+i) and select the “Network tab".

Here we can see quite a bit of information, although since my page is fairly simple there might not be a ton of items to inspect. Nevertheless, we can see that I attempted to download index.html, jquery-1.7.2.min.js and Styles.css, all using the GET method. These all succeeded, and I can even see what initiated this action – pretty nifty! Chrome also gives us the ability to see how long it took to download the file, as well as where in the overall page load the download took place.

If we had more happening on this page it would all go through the Network tab like this. Ajax requests would be found here for example. Of course, if we were unable to download a resource it would gladly tell us and say specifically what kind of error (404, 500 etc.) that caused the issue. This is extremely useful when you see odd behavior on a page. You never know what you might’ve missed to download, or if there are any errors in your way.

If you’d like to you can also click on each resource and see the Headers and Response messages for each of these requests. There is also a Preview (for our HTML file this would display the entire HTML in plain text) and a Timing tab which gives us insight as to how long it took for this entire request to get back to us.

Firefox

Firefox has a very similar view as what we found in Chrome. If I open up Firebug and click on the “Net” tab on my sample page I am greeted by this:

As we can see we get a similar view to what we had in Chrome. While it doesn’t tell us what kind of file this is, it still displays all of the files that downloaded. Additionally we get the status, field which would inform us if anything went wrong. You can also expand each item to get a more detailed view of the response, similarly to what we had in Chrome as well

IE9

IE isn’t far too different either actually and having this as a standard feature is always a good touch. There is an interesting approach that IE9 takes, which is that you can selectively choose when to start and end the capturing of this data. More on this in a second! :)

If we open up the IE9 Dev Tools (F12) and select the “Network” tab this gets displayed:

So, nothing happens by itself here. In Chrome and Firefox we would just refresh the page if we saw nothing under this tab and automatically things would capture. However, this could also leave us with a ton of extra information that we’re not interested in. What if we just want to look at what happens when we click that one button? IE9 lets us define exactly when we start the capture, and when to end it.

If we hit “Start capturing” and refresh the page I should get something similar to the other two browsers.

Bingo! We get to see the method, satus/result as well as what type of request we are dealing with. Additionally all of the timing information is there as well. One neat thing is that we also get to see what particular element was in charge of initiating the request, even if it was a refresh.

For some more detailed information, which would contain all of the more nitty gritty items that we saw in Chrome and FF all we need to do is press “Go to detailed view” and voila – more information than you can shake a stick at!

Oh, We Are Just Getting Started

So that’s a quick overview of the Element Inspector and the Network tab of Chrome 18 , Firefox 12 and IE9. This wasn’t necessarily a deep dive into any one tool or any one browser, but more of a quick overview of what’s available. Hopefully I inspired those of you whom haven’t used these tools before, or maybe I covered something you haven’t been using! Keep in mind that there’s more to come later as I dive in to the more JavaScript heavy items in the next blog post! :D

About the author

Carl Bergenhem

Carl Bergenhem is an Enterprise Solutions Consultant at Telerik specializing in the ASP.NET AJAX and ASP.NET MVC products. He has always been interested in web development and has played around with various web technologies since he was a child. In his free time Carl enjoys soccer, running and playing his guitar.

@carlbergenhem

What makes a marketer of a toolset for building Windows Phone apps happy?

Marketing Team — Wed, 16 May 2012 12:00:00 GMT

It is news like this one: two of the four apps that won the big prize of the 30 to Launch competition are built with RadControls for Windows Phone - the product our team is building with so much care.

And the apps are:
Play the hunt – built by Eshy Media
Social Mints – built by Techark. Social Mints was also the winner of Core77's FastTrack to the Mobile App International Design Award and was featured at Mobile World Congress 2012.

“We are extremely excited about this win as there were more than 130 apps submitted for the contest,” said Pratik Kothari from Techark.

And So Am I. Because our customers apps’ success is our team’s ultimate reward.

If you want to try how RadControls for Windows Phone can improve your app or help you create a new one, download a free trial from here.

XAMLflix Video Tutorial: RadCalculator for Silverlight and WPF

Michael Crump — Tue, 15 May 2012 16:24:00 GMT

Hello everyone and welcome back to XAMLflix with RadCalculator for Silverlight and WPF. I hope you have been enjoying the series as last week we took a look at RadPropertyGrid and RadComboBox. This week we will be taking a look at RadCalculator for Silverlight and WPF.

What is XAMLflix you might ask? Well, it is Telerik’s way of teaching you how to use both new and existing controls from Telerik’s XAML suite. Each and every Tuesday and Thursday, we will provide a fresh batch of videos and sample projects highlighting a different control. Since our Silverlight and WPF share a common codebase and API, you only have to learn how to use these controls once! You can simply copy and paste the code between frameworks.

Be sure to check out www.telerik.com/xamlflix for all the videos!

RadCalculator

RadCalculator for Silverlight/WPF has a simple easy-to-use interface enabling the end user to perform all basic calculations such as addition, subtraction, multiplication, division as well as some more complicated ones – reciprocal, square root, negate. The operations can be executed either by clicking the calculator buttons, or by using your keyboard. You can also use the numeric keypad to type numbers and operators by pressing Num Lock. Furthermore, all the Memory and Clear features are exposed as well.

Getting Started with RadCalculator – In this video, we will see how easy it is to get started with RadCalculator. We will begin by adding RadCalculator to a new Silverlight Application and explore its features. We will wrap up the video by learning how to add the RadCalculatorPicker to you Silverlight project as well. (Download the Project)
Customize RadCalculator by Creating Custom Operations – In this video, we will learn how RadCalculator can be easily extended by defining custom operations that are needed in specific scenarios. We will add four additional buttons and define the custom operations in code. (Download the Project)
Use RadCalculatorPicker as an editing element in RadGridView – In this video, we are going to show that RadCalculatorPicker can be embedded as an editing element for a column in RadGridView. Your users will be able to perform calculations inside RadGridView with ease! (Download the Project)

Wrap-Up

Hopefully you’ve seen here just how quickly and easily you can add RadCalculator in your next line-of-business application. And as a reminder, this is only one of controls offered in the Silverlight/WPF suite. So, feel free to download your own copy of the Silverlight and WPF control suite right now.

Also, before you go, I need your help. Telerik is driven by customer feedback. This is where I need you to tell me what you want to see in the future. Whether it is new controls, additional features or content based off of existing controls, then just drop me a comment in this post or send me a tweet. I look forward to hearing from you shortly!

@mbcrump

Telerik OpenAccess ORM - Using SQL Server 2012 LocalDB

OpenAccess ORM Team — Tue, 15 May 2012 14:06:00 GMT

Microsoft SQL Server 2012 is certainly an interesting upgrade for the SQL Server, offering lots of improvements and new features. There are many things that might tempt you to migrate to 2012 or at least to start your new projects based on it, but to name a few:

Enhancements for higher availability
New and improved version of the SQL Server Management Studio
Easier migration – the new Side-by-Side Migration option makes the migration from older versions of SQL Server safer and the rollback easier, which can be crucial. In the same time, you can do even an In Place migration (only if you are running 2005 or 2008 edition) or a full-blown data migration by configuring a new machine.

You will most probably want to take advantage of the new file-based version of SQL Express called LocalDB. It will be useful during the development phase of your application as you will not spend any time configuring the server - everything is configured out of the box. In the same time, as it is compatible with the SQL Server 2012 commercial editions, it will be easier to deploy your application to production servers. That means the ORM product you choose has to fully support both versions of the database, and to allow you to easily connect to and use LocalDB.

Let’s get our hands dirty and try all this with OpenAccess ORM - it fully supports LocalDB and SQL Server 2012 commercial editions. We can use the SQL Server Data Tools (SSDT) for creating and defining a LocalDB database, and then generate an OpenAccess Domain Model out of it using the simple Update from Database wizard. This component is available out of the box for Visual Studio 11 Beta, so we will use VS 11 to evaluate what is being offered. Those of you who would like to stick to VS 2010 can download and install .NET Framework 4.0.2 and optionally - SSDT (you can also use the old Server Explorer, it's totally fine).

Note that the Database First approach is the choice in this case since we would like to really familiarize with the database – for the scenarios where you don’t care about it so much, you can just create an empty Domain Model, add your entities and concentrate on the business logic rather than the database specifics.

1. Create a LocalDB database

First, you have to create the .mdf file which will represent your database. In order to add one to your project, choose a Service-based Database in the Add New Item dialog (under Data category):

After you click Add, a wizard will automatically offer you to create some model or a dataset matching the empty database. Cancel the wizard and we will get to creating the model later.

2. Access the database and define the schema

For database schema manipulations we will use the SQL Server Object Explorer - a shiny new addition to the Visual Studio:

Initially it will not have any servers presented, but if you click on Add New Server a familiar window pops up asking for connection details. Our problem now is how to specify the LocalDB here - we only know the file name and that's it!? Not so obvious, but after a short search it appeared that for getting started you can try writing "(localdb)\v11.0" as a server name and use Windows Authentication. As it turns out, while you can create Named Instances of LocalDB dedicated to one application only, an Automatic (public) one is available and it's named after the LocalDB version, in this case - v11.0.

After we add the Automatic instance, our file is shown as a database under it in the SQL Server Object Explorer. It's full path is used as a database name by default, so we have renamed it to something more readable:

The UI will somehow remind us for the SQL Server Management Studio, but it certainly has some new things to get used to. Adding a table is easy:

Just click Update, and after some additional dialogs showing you a preview of the database changes and asking you to confirm them (nice!), the table is added.

3. Auto-Generate the OpenAccess Domain Model

Now we can start the OpenAccess Add Domain Model wizard:

If you are not familiar how to work with the wizard, you can check out the dedicated Getting Started with Database First video available now in Telerik TV and you should be up to speed! Just select Microsoft SQL Server as a backend type and the connection to the LocalDB file we have added earlier should be available automatically. Just in case you need a connection string anyway, it should be something like:

Data Source=(LocalDB)\v11.0;AttachDbFilename="[path]\LocalDBTest.mdf";Integrated Security=True

Now we are ready - you have your Domain Model in the OpenAccess Visual Designer:

I hope this quick walkthrough has shown how easy is it is to enjoy the latest technologies with OpenAccess ORM. Stay tuned as Q2 2012 is approaching and we are implementing some long awaited features for it!

As your startup grows, the founders have to grow with it

Stephen Forte — Mon, 14 May 2012 13:30:00 GMT

On Monday, Mark Zuckerberg showed up to pre-IPO roadshow investor meetings wearing his signature hoodie. Wedbush Securities managing director Michael Pachter commented on Bloomberg news yesterday that Zuckerberg should show the investment community some respect by ditching the hoodie in investor meetings and wearing it is a sign of immaturity.

Pachter’s comment:

"Mark and his signature hoodie: He’s actually showing investors he doesn’t care that much; he’s going to be him. I think that’s a mark of immaturity. I think that he has to realize he’s bringing investors in as a new constituency right now, and I think he’s got to show them the respect that they deserve because he’s asking them for their money."

Predictably the tech elite attacked Pachter; Pacther was even called a “doofus” by Kara Swisher of All Things D. To his credit Pacther is taking it well, even suggesting on Twitter that Mark wear an executive pinstripe hoodie.

As a guy who proudly wears jeans and tee shirts to formal events, you would expect me to attack Pachter as well. While I don’t completely agree with Pachter, he does have a point.

Founders represent the heart and soul of a company. They set the company culture and lead by example. The problem with founders is that they sometimes forget that their company has grown up and they are still acting like the company is a small upstart. This disconnect between the company’s size and maturity and the founder’s attitude and behaviors can cause problems, sometimes major ones.

As startups start to mature, their founders have to mature along with it. As the company moves from startup to challenger, to market leader, the founder has to make adjustments along the way. Behaviors and policies that were appropriate for a small startup may not be appropriate for a company that is public.

For example when Bill Gates rallied the troops by saying that they were going to “cut off Netscape’s air supply”, Bill was guilty of acting like Microsoft was the tiny underdog when in reality it was a huge publically traded market leader and Netscape was the tiny upstart. Gates’ comment became a major piece of evidence in Microsoft’s anti-trust trial.

I’ve made this mistake many times as well. Zagat went through several phases while I was CTO in the dot com boom and my playful behavior that worked so well in the pre-IPO/VC dot com environment of late 1999 did not go over well in the post-crash/layoff environment of 2001. We had brought in a new CEO after the dot com crash and my enthusiasm was misinterpreted by the CEO as not being serious. Unfortunately this reflected poorly on the entire IT staff. I was guilty of forgetting that the company had changed and it was time to keep the same spirit but change some tactics and behaviors. Once I did, things picked up nicely.

Founders also make the mistake of thinking like a startup when larger company decisions are needed. For example, it took Microsoft something like 20 years to buy a corporate jet, Google and Facebook had to get sued to start acquiring patents, and Yahoo! turned down a lucrative offer from Microsoft since they still thought of themselves as a Silicon Valley rebel instead of the blue chip big media company in the trouble it was in.

At Telerik, our founders have had to make adjustments over the years. When I met them Telerik was a scrappy 30 person company. Now we have teams that are larger than that and over 600 people worldwide. The founders have scaled and adjusted their behavior accordingly, all while keeping true to themselves and the company culture. They wear jeans and tee shirts to the office, collared shirts to board meetings, and suits and ties when accepting the Red Herring 100 award.

I’m not saying the Mark Zuckerberg should ditch the hoodie and wear a suit to work everyday. However, he should realize that going public requires some behavioral changes, not just in financial accounting, but also in his leadership style.

The techie rebel in me applauds Zuckerberg for standing up the the man and wearing his hoodie on Monday. The experienced MBA side of me also cringes knowing that Zuckerberg is bound to make several Bill Gates style mistakes, mistakes that could cost Facebook dearly.

OrcsWeb's Windows Cloud Server Hosting

Doing Your First Mock

Just* Team — Mon, 14 May 2012 06:22:00 GMT

Are you looking for a solution to your unit tests modifying data? Perhaps your unit tests are so slow that none of your teammates bother running them? You need mock objects.

The following items will be covered to help you write better tests:

Why Mocking – how mock objects help you
Real World Example –an example of code to be tested
Testing the Example –how to use mocking to test the example
AAA Pattern – a pattern emerges when writing clean tests

Why Mocking?

Mocking is one of the most important factors in writing better unit tests. It drastically minimizes a test’s execution time and gives you an upper hand in validating complex logic without disk, database or service dependencies.

Mocks are more than the default-valued objects known as stubs. Mocks act as collaborators and are subject to behavioral modification. These collaborators will help you achieve your desired unit-testing goal for a given system and a controlled set of inputs. This is achieved by having the mock object stand in for the real object and returning data you have specified.

To get a complete overview of mocks, an informative article named “Mocks aren’t stubs” by Martin Fowler is a must read.

http://martinfowler.com/articles/mocksArentStubs.html

After you are finished, it’s time to give you a good grasp of mocking with a real world example.

Real World Example

I am going to implement part of a banking system. This includes the transfer of funds between two different currency accounts using the currency converter service.

To begin, I have created an ICurrencyService interface:

public interface ICurrencyService

{

decimal GetConversionRate(string fromCurrency, string toCurrency);

}

This service interface will be injected to an AccountsService class that is responsible for the transfer funds operation. Once the source and destination account objects are passed to the operation, it will then withdraw from source, convert the currency based on current rate, and finally deposit the converted amount to the target account. There will be a check for available balance, authorization, approval, etc. in more complex scenarios, but they are out of scope for this article.

public class AccountService : IAccountService

{

private readonly ICurrencyService currencyService;

public AccountService(ICurrencyService currencyService)

{

this.currencyService = currencyService;

}

public void TransferFunds(Account from, Account to, decimal amount)

{

from.Withdraw(amount);

decimal conversionRate = currencyService.GetConversionRate(from.Currency, to.Currency);

decimal convertedAmount = amount * conversionRate;

to.Deposit(convertedAmount);

}

Testing the Example

The goal is to validate or assert the transfer funds operation between two accounts. Therefore, this is the system under test (SUT), and the currency service is the collaborator which will be mocked. I am using JustMock for this purpose, but the core concept is the same with other mocking tools.

Arrange

First I will create the mock of the ICurrenyService interface:

ICurrencyService currencyService = Mock.Create<ICurrencyService>();

From the account service implementation, I can see that GetCurrencyService is being called to retrieve the conversation rate. The next step is to set an expected return value for it.

Mock.Arrange(() => currencyService.GetConversionRate("GBP", "CAD")).Returns(2.20m).MustBeCalled();

Mock.Arrange is the entry-point for setting expected behavior for a given mock. This line is self-explanatory, but I did use one extra option: MustBeCalled. This ensures that if currencyService.GetConversationRate is not called with the above criteria, then it will fail the test.

Since I have finished setting the behavior, I will then create an instance of the AccountService class followed by the source and destination Account classes.

var accountService = new AccountService(currencyService);

var canadianAccount = new Account(0, "CAD");

var britishAccount = new Account(0, "GBP");

Act

Next, I will add some money into the GBP account:

britishAccount.Deposit(100);

Then transfer it to my Canadian account:

accountService.TransferFunds(britishAccount, canadianAccount, 100);

Assert

Once the transfer is complete, I need to make sure the operations happened as expected. I will first assert the balance of the two accounts:

Assert.AreEqual(0, britishAccount.Balance);

Assert.AreEqual(220, canadianAccount.Balance);

Then I will assert the mock to verify whether the required GetConversationRate method is called as expected:

Mock.Assert(currencyService);

AAA Pattern

You may have noticed that there were three easy steps involved with the unit test. This is part of a well-known pattern called Arrange – Act – Assert or AAA. JustMock’s syntax is implemented to strictly follow the AAA pattern to give you a well-structured flow, even in the most complex scenarios.

In this post, I described how mocking will help you. I then built an example project and test to illustrate how to proceed. Mocking helps you write clean unit tests, and it enables you to focus on the test logic by isolating external factors. With mocking, unit testing is no longer a chore.

About the author

Mehfuz Hossain

Mehfuz works as the Team Lead at Telerik focusing on JustMock. He is passionate playing around with the latest bits. He has been a Microsoft MVP, author of OS projects like LinqExtender and LINQ to flickr. Prior to working at Telerik , Mehfuz worked as a core member in many high volume web applications including Pageflakes that is acquired by Live Universe in 2008. He is a frequent blogger and was also a contributor and site developer at dotnetslackers.com. He is a firm believer of openness and currently enjoys his free time with objective-c and nodejs bits and never minds writing in textmate.

@mehfuzh

Designing a Windows 8 Metro style app starting from an existing Windows Phone app – Design Case Study Part 1

Windows Phone Team — Thu, 10 May 2012 10:31:00 GMT

A lot of the Windows Phone developers out there are already considering porting their Windows Phone apps to Windows 8. May be you are thinking: from Metro to Metro - it has to be pretty easy and straightforward, doesn’t it? Let’s see if this is true.

This case study gives insights into porting the design of an existing Windows Phone app to a Windows 8 Metro app. It discusses the main similarities and differences between the design guidelines of the two platforms, what can and cannot be reused.

User Experience Design Guidelines for Windows Phone

User Experience Design Guidelines for Windows 8

For the purposes of the case study we are using Tasks - a free Windows Phone todo lists app with more than 100,000 downloads. The app was created by the Telerik Windows Phone team as a showcase of our UI components for Windows Phone. It started originally with an app called ToDoLists, which is meant to serve as a learning material for Windows Phone developers (the source code is freely available and can be downloaded from here.

We will touch upon all the key design patterns and processes that are part of a Metro app and comment on what makes Windows Phone and Windows 8 similar and different:

Design process
Layout and navigation
Commands and actions
Touch
Orientation and views
Notifications and live tiles
Telerik upcoming Windows 8 suite

This is the first part from series of two blog posts where we will talk about the design process and layout and navigation. You can download the full series as:

high resolution pdf (~7 MB), or

low resolution pdf (~2 MB).

Design process

Before we even get to the rough design concept, no matter which platform we are targeting, we start with research, thinking about what users need and analyzing existing applications across all mobile platforms. In our case we had the initial information architecture sorted out in Tasks for Windows Phone. On this solid base we started improving it and make it work for all the screen sizes.
This is how the low fidelity wireframes looked at this phase – sketches of ideas, different pages of the application which formed the application flow and the early paper application prototype. The next step was increasing the wireframes fidelity and transferring them from paper to file.

Paper wireframes

The developers participated in every step of the design process, helping with ideas and technical knowledge. They started working on the prototype of the app simultaneously with me working on the visual design. This does not mean that my job was done once the visual design is delivered – on the contrary. A serious designer input was needed when all the functionality was put together. Only then, especially with touch, we can be sure everything is in the right place, the interaction is consistent and feels natural. Stick to the agile best practices and have as many iterations as needed with the developer team and your testers, if you have such.

My advice is to start working on the device as soon as possible. Once you’ve started working on the device don’t be afraid to make all the necessary changes in order for the app to work at its best. And remember, do not fall in love with the design or the feature which just won’t work.

Application flow diagram – one of the deliverables at the end of the design process

The Layout and navigation model of Windows Phone and Windows 8 are very similar and different at the same time. Let’s first look at some of the things the two platforms have in common:

1. Navigate through content

Content not chrome is one of the essential Metro principles and it applies to both the Windows Phone and the Windows 8 Metro app: they have the same hub and spoke navigation models. Here they are:

1.1. Hub page – or the home page of the application from where the user reaches the rest of the application content. The goal of the hub page is to show the variety and richness of the content the application provides. It is like a magazine created for the application. In Tasks we show excerpts from due tasks, projects and categories.

Tasks for Windows 8 hub page

Tasks for Windows Phone hub page

1.2. Section pages – these are pages with identical content type. For example All Tasks page.

Tasks for Windows 8 section page Tasks for Windows Phone section page

1.3. Detail pages – the name speaks for itself – a page that show the details of a single item.

Tasks for Windows 8 details page Tasks for Windows Phone details page

Now let’s examine the differences between the Windows 8 and Windows Phone design patterns.

2. No hardware back button in Windows 8

Software back button in Windows 8

Windows 8 has no hardware back button as opposed to Windows Phone, which results in the need for a back button in the page heading or navigation bar. The back button takes the user back where she came from and all pages but the hub page should have it.

In Windows Phone the Backstack is very important – this the list of pages/steps user went through till the current moment. The Backstack should be carefully managed – the user must not get lost in the application, fall into traps, loops, and phantom pages, because only in that way she will thrust the application to get her back where she wants.

I will give you an example for that. In Tasks for Windows Phone it is possible to pin a task (project, category) to Start menu. When the user taps on pinned task a details page is opened. To continue browsing in the application the user should tap on the home button close to the logo. When the user is in the home/hub page the details page is removed from the Backstack. The reason is to fulfill the requirement for publishing apps in the marketplace - when the user is on the home page and hit the back button she should go back to start.

In Windows Phone the user navigates through the app by tapping on the content items and application buttons, and goes back with the back button.

In Windows 8 the user has more opportunities to choose her way.

3. Navigating with the edge swipe

Swiping from the edge of the screen is what makes the app bar and navigation bar to appear. The Navigation bar provides global navigation controls - it shows on every page and provides consistent navigation experience. The Navigation bar in Tasks for Windows 8 is one of the main differences from the Tasks for WP. We chose to use it as addition to the already implemented navigation model because of the confidence it gives to the user to go everywhere she wants from any page of the app.

Navigation bar

4. Page filters and sorts

The pivot control is the Windows Phone way to manage views and pages within application. It is used for filtering the content, viewing multiple data sets or switching views. In Windows 8 the pivot control is replaced with page filters and sorts. It is pretty much like traditional tab pattern.

Tab control in Windows 8 Pivot control in Windows Phone

5. List menu navigation. Filter menu.

This is the advantage of the bigger screen – to have a menu which is made from items of certain type alongside the detailed page of the selected item. Even better, instead of making this menu list long and unreadable, there is a filter available on top to help for easier access to the desired information. This is almost impossible on the smaller phone screen – to have both the detailed information and the available other choices on same place. It is not applicable in all cases, but in our Tasks app it was more than welcome.

List menu with filter in Windows 8

6. Horizontal/vertical scrolling

The other significant difference between Windows Phone and Windows 8 is the way of handling the scrolling. In the Windows Phone panorama control there could be both horizontal – within the panorama, and vertical – within the listboxes in the panorama. In Windows 8 this situation is not recommended. There could be only horizontal or only vertical scrolling. The reason for that is the cross-slide interaction – sliding the finger a short distance, perpendicular to the panning direction to select an item. There should be consistency of the selection interactivity within single page – that’s why the panning direction should be only horizontal or vertical.

7. Semantic zoom

Semantic zoom on the home page

Another element that needs to be designed in Windows 8 is the semantic zoom - a quick way to zoom out to groups of content and jump to the desired one.

8. Settings, sharing, about, feedback, search - with charms

Windows 8 provides for a special place to put all these pages and they are neatly organized. They are called charms and are just an edge swipe away. I must admit that in Windows Phone Tasks these pages are not so well organized but in Windows 8 they will be.

Feedback flyout

Tasks for Windows Phone is available for free on the marketplace. Check it out here

Tasks for Windows 8 is on its way and we will let you know once it’s live.
Tasks for Windows Phone is built with RadControls for Windows Phone – UI components and building blocks for building Windows Phone apps. Read more here and download a free trial.

Stay tuned for part two where we will take a look at commands and actions, touch, orientation and views, notifications and live tiles and Telerik upcoming Windows 8 suite!

CodeProject

GDI+ in a Windows 8 C# Metro Application – Experimenting for Fun

Georgi Atanasov — Wed, 09 May 2012 14:46:00 GMT

It’s been about two months since Windows 8 Consumer Preview is out and we, at Telerik, have been enjoying the new framework and all the features it offers. One of the aspects we've been exploring is the immediate mode rendering and what options the new runtime offers. XAML is in the core of WinRT (Windows Runtime) and it offers rich presentation capabilities but sometimes, especially on devices with limited hardware resources, we need to achieve even better performance to get up to the “fast and fluid” Metro applications' standard.

As I explained in this blog post, Direct2D is undoubtedly the best choice when it comes to presenting heavy visual scenes that are frequently updated. Another immediate-mode rendering option is the WriteableBitmap class where you can directly update pixels on the screen. One of the things that is surprisingly missing in WinRT is the ability to render a XAML UIElement on a WriteableBitmap instance. So, in case you need to use the WriteableBitmap class in your application, the only solution would be to have your own rendering engine that manipulates the pixels of the bitmap. Fortunately, the WriteableBitmapEx solution, by Rene Schulte, has already been ported to WinRT and it can serve your needs.

In this post I want to present yet another (a bit crazy) idea I have about outputting content within a WriteableBitmap instance. And that is – as the title states – integrating GDI+ within a C# Metro application and using it to present content.

Download the demo

I am a big fan of Windows Forms and GDI+ since the initial release of .NET framework. Its only disadvantage is probably the fact that it is a software rendering engine which does not exploit Display Adapter’s capabilities. Luckily Native API interoperability is enabled in .NET for Metro Applications and we can call unmanaged methods through the DllImport attribute. So, the idea is to create managed wrappers over some GDI+ methods and use them to draw content in an off-screen bitmap, whose pixels will then be passed to a WriteableBitmap instance.

The wrappers

If you are familiar with Windows Forms and GDI+ then the wrappers in the demo application will look pretty much familiar – Brush, Pen, Font, Graphics, etc. Here is an example of how the wrapper of a Brush-object looks like:

public class SolidBrush : NativeObject

{

private Color color;

public SolidBrush(Color color)

{

this.color = color;

IntPtr handle;

int result = SafeNativeMethods.GdiPlus.GdipCreateSolidFill(this.color.ToArgb(), out handle);

if (result != 0)

{

throw new InvalidOperationException();

}

this.NativePtr = handle;

}

public Color Color

{

get

{

return this.color;

}

protected override void DestroyNativePtr()

{

base.DestroyNativePtr();

SafeNativeMethods.GdiPlus.IntGdipDeleteBrush(this.NativePtr);

}

Each GDI+ object is associated with a native pointer, which is unmanaged and we need to destroy it when the object is being disposed:

public abstract class NativeObject : IDisposable

{

private IntPtr nativePtr;

~NativeObject()

{

this.Dispose(false);

}

protected IntPtr NativePtr

{

get

{

return this.nativePtr;

}

set

{

this.nativePtr = value;

}

public void Dispose()

{

this.Dispose(true);

GC.SuppressFinalize(this);

}

protected void Dispose(bool disposing)

{

if (this.NativePtr != IntPtr.Zero)

{

try

{

this.DestroyNativePtr();

}

catch

{

throw;

}

finally

{

this.NativePtr = IntPtr.Zero;

}

protected virtual void DestroyNativePtr()

{

}

Drawing content

We will initialize a Graphics object from a Bitmap and will draw a string on it. First, let’s create the needed GDI resources:

private void InitializeGdiResources()

{

this.gdiBitmap = new Bitmap(PixelWidth, PixelHeight);

this.gdiGraphics = Graphics.FromBitmap(this.gdiBitmap);

this.gdiFont = new Font("Segoe UI", 32, GdiPlusToMetro.FontStyle.Bold | GdiPlusToMetro.FontStyle.Italic);

this.gdiBrush = new SolidBrush(Colors.White);

this.gdiStringFormat = new StringFormat(StringFormatFlags.NoClip);

this.gdiPen = new Pen(Colors.White, 1);

this.writeableBitmap = new WriteableBitmap(PixelWidth, PixelHeight);

this.img.Source = this.writeableBitmap;

}

Time for some pixels to be output on the screen:

private void RenderText()

{

RectangleF rect = new RectangleF()

{

Width = PixelWidth,

Height = PixelHeight

};

this.gdiGraphics.DrawString(DisplayText, this.gdiFont, this.gdiBrush, rect, this.gdiStringFormat);

}

Updating the WriteableBitmap’s pixels

Now that we have some content produced we need to update the pixels of our WriteableBitmap instance:

private void EndRender()

{

byte[] pixels = this.gdiBitmap.GetPixels();

Stream stream = this.writeableBitmap.PixelBuffer.AsStream();

stream.Seek(0, SeekOrigin.Begin);

stream.Write(pixels, 0, pixels.Length);

this.writeableBitmap.Invalidate();

}

Points of interest

I also performed the same test as in the Direct2D blog post – rendering a polyline, consisting of 5000 points, within a 1024*768 rectangle. The results are pretty impressive:

	FPS (frames-per-second)
GDI+ (antialias off)	27
GDI+ (antialias on)	3-4
XAML Polyline	3

A software-rendering engine, that GDI+ is, produces the same results (sometimes even better) than a hardware-accelerated counterpart, which the XAML Polyline is. I definitely think that MS should revisit the Polyline implementation – I really can’t understand why it is that slow.

Conclusion

I know that some (if not most) of you are wondering: “Why would I need GDI+ in my application when I have Direct2D”? Well, it is indeed up to you – this is just an experiment, which I (and hopefully you :)) find funny and interesting. With this experiment I learned that:

DllImport is supported in .NET for Metro Applications.
You cannot render XAML UI elements within a WriteableBitmap instance.
You can get the WriteableBitmap’s PixelBuffer as a stream and write some bytes within it.
Pixel format in WriteableBitmap is BGRA.
GDI+ is at least as fast as XAML regarding line(s) rendering.

UPDATE:
GDI+ is not in the list of supported graphics APIs for developing Metro Style applications, so this demo will fail the App Store verification tool. So, if you want to have your application published on the store, this approach is definitely not a solution :) Thanks to Pete_Brown and Morten Nielsen for pointing this out.

Well, that’s it, do not hesitate to grab the demo and give it a try. Please note that the set of wrapped GDI+ functionality is limited and its purpose is to fit the demo’s requirements. And have in mind that GDI+ will prevent you from publishing your app on the store.

Download the demo

Slides, Source Code and Video to the Diagramming Framework Webinar Now Available

Michael Crump — Wed, 09 May 2012 12:30:00 GMT

Introduction

Hello everyone,

I wanted to thank you all for attending the webinar today. As I promised in the webinar all of the materials are now available for you to download and explore on your own. If you have any questions then feel free to send me a tweet or leave a comment below. I’d also suggest that you download RadControls for Silverlight and/or WPF if you haven’t already.

Diagramming Framework Webinar Materials

Slides, Source Code and the Recorded Webinar Video are available right now!

Other XAMLFlix Webinars

Data Visualization : By Evan Hutnick - happened last week and all the materials have been posted to his blog. Go ahead and check it out to see what is happening with the latest XAML Data Visualization components from Telerik.
GridView: By Jesse Liberty - Is coming up on May 15^th @ 11AM EST. You should go ahead and register now to make sure you are getting the most from RadGridView.

What did we cover today?

Getting Started Basics – How to create a project using RadDiagram, what files are referenced, and other need to know items.
Items Editing and Manipulation – Starting with a blank project, we added items and began manipulating how they appear on screen. We discussed DataBinding, the different connector types, and different CapTypes.
CCPD operations – We showed you exactly how you can copy, cut, paste, and delete from RadDiagram. You can even turn off those options if needed!
Pan/Zoom/Resizing/ZOrder – We reviewed how you can pan/zoom RadDiagram by code or through the keyboard/mouse. We also discussed how to resize and ZOrder.
Undo-redo – We showed you how RadDiagram keeps track of changes made in the diagramming structure.
Align and snap – We showed you how you can easily align selected DiagramItems to RadDiagram.
Diagram commands – We showed you how to use commands in Buttons to do such things as Align, Snap, Copy and Paste, ShowGridLines, and more.)
- RadDiagram provides a powerful set of 22 RoutedUICommands that help you work with your RadDiagram and its Items easily and build better MVVM applications.
Save/Load – serialization –We serialized an XML string (and viewed the contents in notepad) then loaded the XML back into RadDiagram.
Virtualization – We talked briefly about why you need UI Virtualization and showed how easy it was to turn it off and on. More details below:
Read-Only Diagram – We showed you different properties for Controlling the Read-Only State.
Keyboard Shortcuts - For your power users this allows you to trigger commands without using the mouse

Wrap-up

Thanks for watching and if you have any questions or comments then please let me know. Also, before you go, I need your help. Telerik is driven by customer feedback. This is where I need you to tell me what you want to see in the future. Whether it is new controls, additional features or content based off of existing controls, then just drop me a comment in this post or send me a tweet. I will find a proper solution for you.

Also, keep watching the XAMLflix page as we are releasing two new videos series each and every week. You should also go back and watch any videos that you may have missed.

@mbcrump

There’s a Tool for That: 13 Essential Tools for the Ninja Web Developer

ASP.NET AJAX Team — Tue, 08 May 2012 14:49:00 GMT

When I am not hacking code, I can usually be found tinkering with cars. I have been working on cars for a long time, and have acquired quite a collection of tools along the way. It’s safe to say I love tools much to my fiancée’s dismay. =) In this blog I highlight a few tools I find useful for web development, and best of all, almost all of them are completely free!

General Tools

Fiddler

Fiddler is one of the best HTTP debugging tools available today. It can be used any time you want to capture all HTTP traffic between your computer, and the internet. In addition, it can be used to create, replay, inspect, and tinker with any HTTP request. Actually Fiddler has way too many capabilities to list here! Check out these getting started videos for more information.

General Browser Tools & Plugins

Client-Side Debugging and Inspection

It amazes me how many developers still don’t know about the great tools available for working with HTML/JavaScript/Page Resource in the browser. Most of the tools listed below make it easy to see all KINDS of information about the current page. In addition, all of them have a built in JavaScript debugger, and profiler, to help with JavaScript development! IF YOU ARE NOT USING ONE OF THESE TOOLS YOU ARE WASTING TIME!

Firebug – Firefox

When I was introduced to Firebug web development went from a dark stormy night, to a blissful summer afternoon!

Chrome Developer Tools – Built INTO Chrome

The Chrome developer tools are similar to Firebug; however I prefer debugging JavaScript in the Chrome tools.

F12 Developer Tools – Built INTO IE since IE8

I first used the IE developer tools in IE7 when it was a separate download. Back then they were helpful, but nothing amazing. I tend to only use F12 Developer Tools when debugging IE problems. That said they are better than nothing, and I look forward to seeing what comes with IE10.

Window Resizers

While developing the UI for a web application it is often helpful to look at the site in a variety of resolutions. These tools allow you to do just that!

Resize Window – Chrome

Resize window sits right next to the chrome address bar making it 2 clicks to change the resolution:

Out of the box it provides a few presets, but you can add as many as you want:

The cool part about this resizer is it’s ability to resize the window including or excluding the browser chrome, which is very helpful for previewing sites targeted for mobile devices.

Built into IE Developer Tools

This is one feature the IE developer tools provide out of the box that none of the others do:

The IE developer tools are only capable of resizing the entire window, which means the view port is actually smaller than the target size.

About Firefox -

I have never found a good window resizer for Firefox. If you know of one I would love to hear about it!

Form Tampering

Sometimes you need to send bogus data in a request to test server validation, however; it might not be easy to do because you have some really awesome client validation happening. (Note: Proper test coverage would help here, but that’s a whole ‘nother thing =)).

In these cases I tend to use one of these tools to intercept the request and tweak it:

TamperData – Firefox

TamperData actually captures and displays all traffic passing through Firefox. Clicking Start Tamper, and submitting a form, displays the dialog below allowing you to customize almost everything about the request:

TamperIE - IE

This is the first form tampering tool I ever used. It’s very simple and effective. It can sometimes get annoying as it pops up on every POST when it is enabled; so make sure to disable it when you don’t need it!

About Chrome –

There is not a tool like this available yet for chrome surprisingly. The reason is due to API limitations in Chrome. However, the Chrome team recently added the needed hooks to make such a plugin possible, so stay on the look out!

Image Tools

CSS Sprites

This site is by far the best sprite builder I have used. I like it because not only does it combine the images, but it will offer to create a rollover version using sepia, desaturation, and a few other options. In addition, it will spit out the CSS or SASS for the sprite sheet, and provide example usage! Saves tons of time!

Example sprite sheet, as you can see I chose to have it create a desaturated rollover effect (bottom row):

ASP.Net Specific

MiniProfiler

MiniProfiler is a lightweight profiling tool allowing developers to profile server side methods, and ADO.NET calls. Results are shown client side as you browse the site making it extremely easy to identify slow operations. It is extremely lightweight; so no need to worry about profiling production sites. In fact, it was created by the StackOverflow guys and they run it 24/7 to monitor the StackExchange sites. Scott Hanselman created a great guide available here.

Glimpse

Glimpse gives developers a client side glimpse of what is happening server side. Glimpse captures metadata about each request, and sends the data to a client side interface. Meaning you can use it (much like MiniProfiler) as you browse your site. In addition, Glimpse makes it easy to create plugins, meaning it’s capabilities are only limited by your imagination! Make sure to check out the quick start guide here.

MVC Specific Tools

Razor Converter

If you are looking to upgrade older ASP.NET MVC projects to Razor, but dreading the conversion process, know that there is hope! Telerik created this awesome tool to convert all the views in a project from the web forms view engine to razor!

Web Forms Specific Tools

View State Inspectors

These tools are pretty self-explanatory, use them when you want to inspect a page’s view state! =)

ViewState Viewer – Firefox

Viewstate Indicator – Chrome

VS Specific Tools

Chirpy

In my last blog I discussed some awesome features in Telerik’s MVC Extensions, specifically the web asset handlers. I received a few questions about how I handle minifying CSS and JavaScript files in VS. As of late I have been using Chirpy. Chirpy handles CSS, JS, CoffeeScript, dotLess, and more! It can handle minification using YUI, uglify.js, Google Closure, or the Ajax minifier. In addition, it can validate JavaScript, CSS, and dotLess files. All in all, I find to be an extremely useful add-in for Visual Studio. There is a great guide about the features available here.

JustCode

Telerik’s JustCode had built in code analysis and refactoring features for JavaScript and ASP.NET since day one, making it an indispensable tool for development. In one of the recent releases the JustCode team added CSS analysis and refactoring features, making it even more awesome! You can download a trial here!

Bottom Line

The above list covers just some of the great tools I use when doing web development. There are tons of other tools out there though, and I would love to hear about your favorite tool!

Happy Coding!

CodeProject

About the author

Joshua Holt

Joshua Holt works as a Developer Support Specialist at Telerik focusing on ASP.NET, but tends to dabble in all of the products. Part of his role at Telerik is to work closely with the team, and help developers leverage the Telerik product line up. In his free time he likes to tinker with spatial data visualization projects, and chase clouds. Prior to working at Telerik, Joshua worked as a consultant for several Fortune 500 companies in the oil and gas industry.

@jholt456

XAMLflix Introduces RadPropertyGrid

Michael Crump — Tue, 08 May 2012 12:10:00 GMT

Hello everyone and welcome back to XAMLflix with RadPropertyGrid for Silverlight and WPF. I hope you have been enjoying the series as last week we took a look at RadDragAndDrop and RadMaskedInput.

What is XAMLflix you might ask? Well, it is Telerik’s way of teaching you how to use both new and existing controls from Telerik’s XAML suite. Each and every Thursday, we will provide a fresh batch of videos and sample projects highlighting a different control. Since our Silverlight and WPF share a common codebase and API, you only have to learn how to use these controls once! You can simply copy and paste the code between frameworks.

Be sure to check out www.telerik.com/xamlflix for all the videos!

Meet RadPropertyGrid

RadPropertyGrid provides an easy and versatile approach to processing data objects' properties. It can be bound to an item with just a single line of code and you may start exploring or editing its properties. The property editor controls are auto generated - text fields for string properties, CheckBoxes for Boolean, DateTimePickers for dates, and so forth.

Getting Started with RadPropertyGrid – In this video, we will see how easy it is to bind RadPropertyGrid to a data item then bind it to an existing control such as RadButton. We will also discuss setting up PropertyDefinitions which will allow us to customize the data displayed inside the RadPropertyGrid. (Download the Project)
Working with Nested Properties in RadPropertyGrid – In this video, we will explore how to processing nested properties in a tree-like visual structure within RadPropertyGrid. (Download the Project)
Edit Row Details of RadGridView with RadPropertyGrid – In this video, we are going to edit the Row Details of RadGridView with RadPropertyGrid. (Download the Project)

Wrap-Up

Thanks for reading (and watching) and if you have any questions or comments then please let me know. Also, keep watching the XAMLflix page as we are releasing two new videos series each and every week. You should also go back and watch any videos that you may have missed.

@mbcrump

Upcoming Events : Speaking and Attending

Michael Crump — Tue, 08 May 2012 12:00:00 GMT

Hello Everyone,

From time to time, I sit down and write out all the events that I will be speaking at or attending in hopes of connecting with other developers who may be attending these events. I’ll be at these events representing Telerik, so feel free to stop by the booth and ask say Hi. I have several different talks lined-up from Windows 8, Silverlight, OData and Windows Phone 7! That’s a lot of XAML if you ask me!

Rocky Mountain Trifecta – Colorado - May 19th, 2012

I have two sessions at this event:

Get Started Buliding Metro Applications for Windows 8 using XAML/C#

10 Things a Silverlight Developer Should Know when Building A Metro Application

Windows Developer Camp – Georgia – May 23rd, 2012

The only speakers at this event are Microsoft employees, so I will only be attending. If you want to talk Telerik products then send me a tweet/email and we will link up.

TechEd – Florida – June 11th – 14th, 2012

I will not be speaking at this event, but will be in the Telerik booth showing off all of our XAML products.

CodeStock – Tennessee – June 15/16, 2012

I have two sessions at this event:

Getting your Feet Wet with OData in Silverlight 5 and WP7 Mango

Get Started Buliding Metro Applications for Windows 8 using XAML/C#

That Conference – Wisconsin – August 13th-15th 2012

I have one sessions at this event:

Get Started Buliding Metro Applications for Windows 8 using XAML/C#

Wrap-up

If you are attending any of the events then please come up and introduce yourself. I really enjoy meeting new people and hopefully we can sit down and talk tech!

Another Awesome VS11 Feature - WAI-ARIA Support

ASP.NET AJAX Team — Mon, 07 May 2012 17:02:00 GMT

Taking a Step Back – What is Accessibility?

Accessibility is always a large concern when creating applications. Whether these are meant for the web, desktop machines, or even mobile devices, accessibility is a huge factor. I have often run into scenarios where developers are not even aware of accessibility concerns, or decide to leave it as one of those “oh, I’ll get to it later” tasks on their TODO list. Some of you might even be asking yourself what accessibility actually is. Well, when I talk about accessibility I’m referring to the ability for your application to function for people with disabilities so they can still navigate and interact with your application.

If you haven’t taken a look at the accessibility of your applications you should really dedicate some time to ensure that your website complies with modern day accessibility guidelines. Some of the more popular ones are Section 508 (used a lot with government organizations) and the Web Content Accessibility Guidelines (WCAG) 2.0. Here at Telerik we pride ourselves in complying with these two, as can be seen on this page.

Now today I want to talk about another set of guidelines for accessibility, WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications). This specification goes over how to increase accessibility of web pages where dynamic content and user interface components have been implemented using Ajax, HTML, CSS, JavaScript and other technologies. Essentially a guide on how to ensure that today’s websites can be as accessible as possible.

Along with introducing WAI-ARIA I want to take a look at how VS11 can help us with developing more compliant site, as well as what we here at Telerik are doing in this area.

If you want to take advantage of the cool stuff that Visual Studio 11 is doing with WAI-ARIA I recommend that you download the VS11 beta, which you can find by clicking on the following image :)

What is WAI-ARIA?

So, what is this whole WAI-ARIA business? Well, as I mentioned above WAI-ARIA is a set of specifications on how to increase the accessibility of modern day web applications that deal with “dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies” (quoting the official WAI-ARIA page here). This comes from the Web Accessibility Initiative (WAI) of the W3C.

What it boils down to is that ARIA is a set of additional semantic tags and attributes that describe and identify features for user interaction, how they relate to each other, and their current state. Often times this boils down to their roles, states, and functionality. Think of controls such as menus, trees, and grids. All of these are pretty sophisticated controls that have a lot of dynamic-ness surrounding them.

Although it is a fairly new standard it still has gained support across most of the major browsers. To name some, IE8+, FireFox 3+ and Chrome 4+ (although in Chrome this is still partially supported) all support the standard (although some a bit more than others). Support also increases with each new version of these browsers. For detailed list of what browsers support WAI-ARIA you can check out the caniuse page right here.

Why is WAI-ARIA Important?

All the good stuff you’re using today to get the awesome interactions and behavior out of your site takes heavy use of the technologies that WAI-ARIA covers; HTML, JavaScript and Ajax. Implementing these can often lead to confusion within the technologies and applications that are used by people with disabilities, with screen readers being the most common types of applications used.

These screen readers attempt to read the content of what is on the user’s screen out loud to the user, by parsing through what the browser is displaying and presenting that to the user. Remember that application you wrote that had ridiculously complicated HTML, followed by a couple of thousand lines of JavaScript to deal with interaction? Imagine an application attempting to parse through that and tell a human at the other end what it’s seeing, in terms that are understandable. All of a sudden that paragraph that comes flying in from the left and constantly moves around the screen seems a little bit over the top, right? Well, it probably should feel over the top either way ;)

WAI-ARIA is here to make it easier for people with disabilities to access your website. This means that not only can you provide your content to everyone, you also equalize the playing field of the awesome place that is the internet.

VS11 and WAI-ARIA

So, how does Visual Studio 11 help you with ensuring that your application is more WAI-ARIA compliant? Well, it makes it ridiculously easy to include it by using intellisense of course! I personally love intellisense because I constantly doubt if I spelled something correctly. Plus, if I’m unsure of what’s available to me it’s very easy to scroll through the options that I have and find which one fits the best for me.

Roles

Let’s take a quick look at how I would go about defining a menu in HTML and how WAI-ARIA can get implemented:

<div id=”menu”>

<ul>

<li class=”menuItem”>Menu Item 1</li>

<li class=”menuItem”>Menu Item 2</li>

<ul>

</div>

The example above assumes I have some awesome CSS to go along with it to make these items menu-like. Now that I think about it, let’s make this HTML5 compliant :)

<nav id=”menu”>

<ul>

<li class=”menuItem”>Menu Item 1</li>

<li class=”menuItem”>Menu Item 2</li>

<ul>

</nav>

Side-note: Always try to find a good excuse for working in HTML5!

Now if a screen reader were to go through here and see this, how does it really know that this is a menu? Sure, “Menu Item 1” and “Menu Item 2” and even the CSS classes and ID attribute gives it away, but I could be very sneaky and name this something that the screen reader wouldn't parse as a menu. You could end up with some very odd statements being read back to the user. This is where WAI-ARIA comes in and solves the issue for us. Let’s WAI-ARIA-ize (newly coined term right there!) the code above:

<nav role=”menu”>

<ul>

<li role=”menuitem”>Menu Item 1</li>

<li role=”menuitem”>Menu Item 2</li>

</ul>

</nav>

Imagine you were to write a screen reader. Wouldn’t this latest code snippet just make your life so much easier? Now we know that the parent nav element is supposed to be a menu, and the list items we have are menu items! Now how did VS11 help me with this? Intellisense! Take a look at this screenshot to see how helpful it was for me:

Right after I typed “role” and hit the “=” key I immediately got a list of available roles.

States and aria-*

So that was roles, but what about various states? When I talk about states I literally mean the state of the element. If, for example, we were creating a tree view, wouldn't we want to know if the current node is expanded or collapsed? This is where ARIA states come in to play. These are dynamic properties, so they change along with the state of the element. These are often handled by using attributes that are prefixed with “aria-“. VS11 is nice enough to allow us to have these available in intellisense! Let’s take a quick look at an example of how to use some of these attributes.

What I’m going to do is add a very simple aria-* tag to an input, namely aria-required. This labels the particular element as a required field for all of the screen readers out there. Now, you might be thinking “We already have that! Just add the error message or a ‘*’ next to the element!” Well, I’ve seen plenty of examples of some neat an intuitive ways to display required field messages, but they’re not always that easy to see for screen readers. For example, what about just bolding the label that is tied to an input field? Pretty easy to spot by a human, but difficult to parse through with a screen reader. The aria-required tag makes it super easy to say that this field is indeed required. So, I’ll just start off by creating a label and an input:

<label id=”firstLabel”>First Name</label>

<input id=”firstName” type=”text” />

Now if I want to add the appropriate WAI-ARIA tag to this I can of course just look up the various ARIA attributes and their accepted settings over at dev.w3.org, or I can use Visual Studio 11. As you can see in this screenshot, when I type out aria- I get a whole list of potential attributes I can set just via intellisense

VS11’s intellisene even provides us with the appropriate options available to us

It even works with ARIA attributes that has multiple options

Pretty neat, eh? Useful as well! With it being this easy to add accessibility to your applications there really shouldn’t be anything stopping you from implementing this!

Telerik and WAI-ARIA

Because I’m proud of Telerik’s efforts in this area, I wanted to write a quick note about the WAI-ARIA support that we offer in Telerik's controls for ASP.NET AJAX. Although not all controls currently offer this support, we do have it enabled in some of our bigger ones like Grid and Window. This list is also constantly expanding, with all recent releases expanding on this availability.

How do you take use of this in the supported controls? Well there should be a simple property called EnableAriaSupport which you should just set to true. This will allow the control to go from the “regular” mode into a WAI-ARIA compliant mode that renders ARIA roles and states.

For an example of this support, and the difference it makes in terms of the HTML, you can check out this blog post which goes into further details about the RadGrid’s WAI-ARIA support.

Accessibility-rize Today!

I just love making up words! Anyway, hopefully I was able to enlighten you a bit on what WAI-ARIA is, and why it is important to think about when creating your new application, or going through and modernizing an old project. With deeper browser support happening with each release of our favorite browsers, and tools like VS11 to help us out when we either forget to implement it, or what roles and states exist, it becomes even easier to make an amazing web application with the latest and greatest standard, while still allowing all your visitors to see the content.

About the author

Carl Bergenhem

@carlbergenhem

Add the Error Diagnostics Control to Your Windows Phone App with 3 Lines of Code

Marketing Team — Mon, 07 May 2012 12:00:00 GMT

Everyone in the mobile apps business needs real-time feedback about their app’s crashes. These have to be quickly fixed, so that you are not losing converted leads. Instead, these users need to be treated with the utmost attention. To get the feedback you have three ways to go:

1)   Use the error reporting procedure on App Hub, but you’ll have to wait for 3 to 4 days for the crash reports to be ready, which may result in losing some of your users.
2)   Put some time and efforts and write the functionality yourself.
3)   Use Telerik ready-to-use Error Diagnostics control that allows the end-user to send real-time crash data.

The 3rd option has two obvious advantages:

No time is wasted writing something that already exists.
The time lag issue that you face with the App Hub reports is solved.

Check out this short video:

Here are some details about the control. Implementing Telerik Error Diagnostic control in your Windows Phone app enables you to receive crash reports, get specific debug and run-time information from your end users when an issue (such as ApplicationUnhandledException) in your application is encountered. Whenever an exception occurs, a MessageBox dialog is displayed and users can send the report via e-mail. It will only take them a few seconds and you will get tons of data about the crash helping you to resolve the problem faster. Diagnostic data include: app version, app total runs, app runs after last update, device model, navigation stack and more. Optionally a screenshot of the current application state can be provided. Developers can also add custom data when an exception has occurred and to collect runtime logs. You may even send the data anonymously with the help of Web Services as detailed in this blog post. If you still need help in getting up to speed with Error Diagnostics, then you can watch our Q1 2012 webinar and check out the additional resources found here.

Apart from the automatic data which is provided out of the box developers can extend the component in two other ways:

Add their own custom data when the exception occurs (using the ExceptionOccured event). Read how
Add debug data in their application while it runs. When an exception occurs this debug data is sent along with the crash data. Read more

And the other good news is that it only takes three lines of code to implement the functionality in your app.

Telerik Error Diagnostics for Windows Phone can be downloaded as part of the RadControls for Windows Phone suite. Free trial is available here.

Share this blog post if you found it useful.

Telerik XAMLflix Data Visualization Webinar Wrap-up

Evan Hutnick — Fri, 04 May 2012 14:30:00 GMT

Thank you everyone for turning out to Tuesday’s XAMLflix Data Visualization webinar, featuring the RadControls for Silverlight and WPF in action. We covered a lot of ground in this webinar, moving at a quick pace to present the wide range of Telerik Data Visualization controls with lots of hands-on coding and examples, but as those who attended can see we didn’t even have time to cover them all (yes, we do have that many first class data visualization controls in our toolbox).

A Quick Recap

For anyone who may have missed the webinar, here is a quick recap to entice you to watch the on-demand video:

ChartView – Exploring the designer widgets that enable you to quickly generate a Cartesian or Polar chart. Or, if you’re brand new to RadChartView this provides a great option for seeing how the different charting elements play together.
DataBars – Quick, to-the-point visualizations that provide a bar representing a single value, multiple values, or multiple values in proportion to one another-- complete with a lightweight axis to give a better scope on your data.
Gauge – Our newly redesigned Gauge is more fluid and easier to use than ever before. Additionally, in the spirit of ChartView the new Gauge is built using an additive process, meaning you can include as many range markers and indicators as you would like.
Sparklines – Similar to DataBars, the Sparklines provide mini-charts that allow you to put more meaning behind smaller groups of data. Whether you need linear, area, scatter, column, or win-loss charts, Sparklines provide quick and lightweight visualizations that can easily be incorporated into your GridView templates.
TimeBar – When working with DateTime-based data, TimeBar provides a quick and easy way to visualize large amounts of data over time while offering built-in support for zooming, scrolling, and selection of time spans. It works best when integrated with our Chart and features RadSparklines for visualizing data.
Timeline – Another look at DateTime-based data allows you to display both point-in-time data as well as duration-based events, allowing you to visualize (complete with the all-too-familiar zooming and scrolling feature!) events in a linear fashion.
TreeMap/PivotMap – Have a large amount of data that can benefit from some visual flair? Tree and PivotMap provide a visual representation of values using relative size, allowing you to see different values as well as offering hooks into the original data for tooltips or other visual customization.
Map – We didn’t have time to cover RadMap in the webinar, but thankfully I hit upon RadMap via the XAMLflix campaign already, so fear not, there are plenty of videos and projects just waiting to deliver you Mappy goodness online already – check ‘em out!

And remember, this is just the tip of the iceberg when it comes to our RadControls for Silverlight and WPF. But you’re in luck! We’ve got two more webinars scheduled for the next two weeks being presented by Michael Crump and Jesse Liberty, our resident XAML Evangelists – follow this link to register for both.

Call to Action

What, you mean I want you folks to do something after reading all of that?

Most certainly! Telerik is a company driven by customer feedback, so in addition to the XAMLflix campaign we have a few other things in the pipeline to help you make the most of our Silverlight and WPF suites, but when it comes down to it we want to hear from you to know what kinds of resources help you to best adopt and use our controls. So drop me a line in the comments and say “Hey Evan, it would rock if you folks could produce XYZ!” and we’ll put it in the pipeline. Seriously, right now we are bursting at the seams with XAML Evangelism talent and we want to put it to work for our customers.

Now for the really good stuff – check out the on-demand video for the webinar here and feel free to download a copy of the project that I put together from this link. That way you can play along at home and experiment with these controls from the comfort of your workstations.

Thanks and stay tuned for more from the XAML team and XAMLflix!

@EvanHutnick