Silverlight 4 Training, March 08 2011

The first day of Silverlight 4 training took a slight deviation from the original agenda. Based on a “show of hands”, I decided to delve into a 1-hour session on the basics of creating XAML and what Silverlight is meant to do. I also discussed where its getting competition from and how it should fit into the Enterprise Application Developer’s tool box. The second part of the session covered WCF and Entity Framework basics as well as data-binding and WCF RIA Services creation. I talked about cross-domain scripting and mentioned the cross-domain-policy file that is necessary to work around this issue in the enterprise.

Those who stayed 10 minutes after the end saw a successful database update occur using the “SubmitChanges” operation on the RIA Services data context in Silverlight 4.

The files associated with this first day are posted here. Each “Solution” that was created during the training is Zipped and linked for you to download.

Basics Demo Silverlight_Basic

WCF Data Access Demo WCF_Data

Posted in Silverlight, Training | Tagged , | Comments Off

Silverlight 4 – 070-506 Exam… Passed!

Today I passed the first-ever Silverlight-specific Microsoft Certification to be released! The exam is # 070-506. It checks on your skills with :

  1. Data-Binding, INotifyPropertyChanged, and ObservableCollection stuff.
  2. VisualStateManager, Control-Style Templates, Resource Dictionaries, and XAML Layout
  3. HtmlPage API, Application Init Params, Custom Load Screens, and Javascript interop
  4. Printing, Text Globalization, Cross-Domain Service access, and WCF experience.

All-in-all, a pretty comprehensive exam. It’s only 50 questions and they give you 2 and  1/2 hours to take it. I found that watching the “Pluralsight” videos on Silverlight 4 helped me prepare for it pretty well. Reminded me about some of the basic stuff I knew, but had forgotten about using regularly. (Like INotifyPropertyChanged… I don’t use it because EF RIA Services and WCF Data Services implements that garbage for you, out-of-the-box.)

If any of you want help or need recommendations on what to focus on and you are interested in taking the exam, email me and let me know… or just leave a comment here!

Posted in Silverlight | Tagged , , , , | 2 Comments

Leveraging OData end-points in JSON format with JQuery

So I’ve been screwing around with JQuery all weekend in an attempt to make the dynamic-control creation that I have going on in my Silverlight prototype… work without Silverlight!

I’ve been looking for a good way to leverage the Entity-Framework model that I already have in-place so I don’t have to dream up an entire new way of piping my .NET data over to Javascript. It turns out that using WCF Data Services works awesome! (I haven’t tried using EF RIA Services yet, but I bet it will work awesome too.)

Basically, if you want to get data from the O-Data endpoints that both “WCF Data Services” and “EF RIA Services” expose from your E.F. data-model, you simply need to override some of the defaults of the JQuery AJAX() method. Since I wanted my data to be returned in JSON format, and not in ATOM RSS Feed format, I modified the “dataType” parameter of the JQuery AJAX() method as follows :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script src="Scripts/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
 
function addWindowLoadAction(func) {
	if (window.addEventListener) // W3C standard
	window.addEventListener(‘load’, func, false); // CWS **not** ‘onload’
	else if (window.attachEvent) // Microsoft
	window.attachEvent(‘onload’, func);
};
 
window.onload = function () {
	alert(‘I am learning about javascript again!);
};
 
var register2ndButtonClick = function () {
	$(‘#btnTest2′).click(function () {
		$.ajax({
			url: ‘WcfDataService.svc/GenericQuestions?$filter=(GenericQuestionId eq 5)’,
			dataType: ‘json’,
			success: function (data) {
				$(‘.result).html(data);
				alert(‘Load was performed.’);
			}
		});
	});
};
 
addWindowLoadAction(register2ndButtonClick);
</script>
 
<form id="form1" runat="server" name="form1">
	<div>
		<input type="button" id="btnTest" name="btnTest" value="Click">
		<input type="button" id="btnTest2" name="btnTest2" value="Second">
	</div>
</form>

The section in the Javascript that’s cool is inside the registered event handler (looks like an anonymous method… doesn’t it?) for the btnTest2 ‘onClick’ event. There, I use the ‘$’ JQuery object to get a handle on the ‘.ajax’ method. I then pass a JSON data element into the ‘.ajax’ method using directions I found on this website here. http://api.jquery.com/jQuery.ajax/

The really important aspect is that I’m setting the ‘dataType’ parameter to ‘json’. What’s really COOL about how Microsoft implemented their OData-capable WCF data extensions (WCF Data Services & EF RIA Services) is that they enabled the caller to switch between XML ATOM formatted data and JSON formatted data out-of-the-box!

I had previously looked up a way to do JSON formatted data using the URL that’s passed to the OData endpoint exposed by .NET, but then I quickly realized with JQuery, I could control the HTTP ‘Accept’ header information manually by setting the data-type, and therefore elliminate the need for the URL query-string parameter. However, if your interested in how I used a Query-String parameter to change the return data-type for a WCF Data Service from standard ATOM XML to JSON, check out this article for grins. http://code.msdn.microsoft.com/DataServicesJSONP

You may also notice that the URL I passed into the ‘.ajax’ method looks a little strange. ‘WcfDataService.svc/GenericQuestions?$filter=(GenericQuestionId eq 5)’. This is how you perform a WHERE filter on a data-table using the OData endpoints exposed in a facade layer between your Entity Framework model and the browser client. In this case, ‘GenericQuestions’ is one of my Entity names. (It represents a table in the database called ‘GenericQuestion’.) The $filter parameter is how you apply a ‘WHERE’ filter on the table. Here, I’m looking for where the primary key of the table (GenericQuestionId) equals ’5′.

The normal data I would get back from the URL looks something like…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed xml:base="http://myBox/MetaHtml/WcfDataService.svc/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
  <title type="text">GenericQuestions</title>
  <id>http://myBox/MetaHtml/WcfDataService.svc/GenericQuestions</id>
  <updated>2011-01-31T00:40:01Z</updated>
  <link rel="self" title="GenericQuestions" href="GenericQuestions" />
  <entry>
    <id>http://myBox/MetaHtml/WcfDataService.svc/GenericQuestions(5)</id>
    <title type="text"></title>
    <updated>2011-01-31T00:40:01Z</updated>
    <author>
      <name />
    </author>
    <link rel="edit" title="GenericQuestion" href="GenericQuestions(5)" />
    <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/DomainType" type="application/atom+xml;type=entry" title="DomainType" href="GenericQuestions(5)/DomainType" />
    <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/FixedDataLookupType" type="application/atom+xml;type=entry" title="FixedDataLookupType" href="GenericQuestions(5)/FixedDataLookupType" />
    <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/FixedQuestionLookupType" type="application/atom+xml;type=entry" title="FixedQuestionLookupType" href="GenericQuestions(5)/FixedQuestionLookupType" />
    <link rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/WorkflowStepQuestions" type="application/atom+xml;type=feed" title="WorkflowStepQuestions" href="GenericQuestions(5)/WorkflowStepQuestions" />
    <category term="CCPortfolioManager.Web.GenericQuestion" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />
    <content type="application/xml">
      <m:properties>
        <d:GenericQuestionId m:type="Edm.Int32">5</d:GenericQuestionId>
        <d:QuestionTypeId m:type="Edm.Int32">13</d:QuestionTypeId>
        <d:DataTypeId m:type="Edm.Int32">3</d:DataTypeId>
        <d:DisplayName>Owner Name</d:DisplayName>
        <d:Description>Name of Owner</d:Description>
        <d:IsActiveFlag m:type="Edm.Boolean">true</d:IsActiveFlag>
        <d:LookupListDomainTypeId m:type="Edm.Int32" m:null="true" />
      </m:properties>
    </content>
  </entry>
</feed>

However, by explicitly setting the AJAX query’s HTTP ‘Accept’ header to ‘application/json’… I am able to receive the following JSON formatted data…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
    "d" : [{
        "__metadata": {
            "uri": "http://mybox/MetaHtml/WcfDataService.svc/GenericQuestions(5)", 
            "type": "CCPortfolioManager.Web.GenericQuestion"
        }, 
        "GenericQuestionId": 5, 
        "QuestionTypeId": 13, 
        "DataTypeId": 3, 
        "DisplayName": "Owner Name", 
        "Description": "Name of Owner", 
        "IsActiveFlag": true, 
        "LookupListDomainTypeId": null, 
        "DomainType": {
            "__deferred": { "uri": "http://mybox/MetaHtml/WcfDataService.svc/GenericQuestions(5)/DomainType" }
        }, 
        "FixedDataLookupType": {
            "__deferred": { "uri": "http://mybox/MetaHtml/WcfDataService.svc/GenericQuestions(5)/FixedDataLookupType" }
        }, 
        "FixedQuestionLookupType": {
            "__deferred": { "uri": "http://mybox/MetaHtml/WcfDataService.svc/GenericQuestions(5)/FixedQuestionLookupType" }
        }, 
        "WorkflowStepQuestions": {
            "__deferred": { "uri": "http://mybox/MetaHtml/WcfDataService.svc/GenericQuestions(5)/WorkflowStepQuestions" }
        }
    }]
}
JQuery JSON data result

JQuery JSON data result

Posted in AJAX, Entity Framework, JQuery | Tagged , , , , | 6 Comments

Why Silverlight is right for the enterprise…

There is much discussion today about the benefits of HTML 5 and how it will dramatically improve the capabilities of web-based applications. New ‘media’ tags and offline cached page capabilities will enable a much more enterprise-friendly user experience. However Silverlight still has these new HTML 5 capabilities trumped. It is true that Silverlight is a proprietary technology that is only supported on desktop Operating Systems such as Mac OS X and Windows XP, Vista, 7, and more. However it provides one thing that an HTML 5 standard cannot… more consistent support across the supported OS and browser platforms!

During 1 of my recent projects, I took on the task of coding up some mechansims for developing client-side rich functionality. Specifically, I wanted to pull data from a data-service exposed via WCF in .NET and consume it via Javascript as a JSON or ATOM-based data feed. Once I had that data, I wanted to enabled dynamic HTML control generation, ui validation, and save/cancel functionality. I found the lack of consistent support for Javascript elements across multiple OS’s and browsers quite troublesome. I was already frustrated by the Javascript debugging setup and configuration experience across all browser platforms. Non strongly-typed code made it difficult for me to quickly analyze what my staff had developed for me in Javascript under the hood. Finally, I was frustrated by the mix of online “help” content that ranged from approaches that were arcaic and poorly architected… to elegant and efficient.

What has your experience with HTML 5 been so far versus your experience developing enterprise Silverlight applications? Which tools do you use for your HTML 5 development? Do you feel you need to throw away Visual Studio in order to do “real” development in Eclipse in order to achieve your project goals?

Silverlight Logo

Silverlight Logo

Posted in Silverlight, Technology Philosophy | Tagged | Comments Off

Our Capabilities Include:


Custom Software Development
Enterprise Architecture
Project Management
Systems Analysis
Performance Testing

AND THE LIST GOES ON...

These methods are vital to our work:


Agile Methodology
PMBOK
Test-Driven Development

LEARN WHY...

About CodeSmart, Inc.


CodeSmart has been locally owned and operated in the Olympia, WA area since 2002. We direct, design, develop and deliver full end-to-end information systems using leading edge Microsoft .Net technologies and recommended best practices.

LEARN MORE...