Monday, August 30, 2010

How To : Communicate between two user-controls using Event Aggregator

I found many posts in the asp.net, silverlight.net fourms regarding communication between user-controls, so i thought to blog a bit about communication between user-controls using Event Aggregator in silverlight which i found is the best way to communicate.

The main advantage for using an event aggregator to communicate between user-controls is, it removes the tight coupling between a publisher and a subscriber, by which a publisher/subscriber can evolve independently. Pre-requisites for understanding this blog post is to have a bit understanding of Event Aggregator.

Live Demo : Event Aggregator Sample
Source Code: At the end of this post :).

In this post i will explain how two user-controls can pass messages between them using event aggregator, consider a simple chat scenario where one user types-in some message and sends to to another user and vice-versa. My Visual Studio Solution looks as shown below, things to observe are
  • Microsoft Practices Composite dll's which are required for implementing the event aggregation
  • EventAggregator.cs which implements the interface IEventAggregator. (Note: will share the enitre source code at the end of this blog post :) )
  • "Kranthi.xaml" and "Kiran.xaml", two user controls which communicate using event aggregator.













Both the user controls have same functionality to implement. Lets see how the "Kranthi.xaml" user-control UI is likely to be, it contains following:
  • Text Box, where user enters message to publish.
  • Button, used to publish the entered message in TextBox.
  • ListBox, to display the received messages from the subscribed event.
"Kiran.xaml" user-control also has the same controls, so now i am ready with a sample user-interface which looks like below










So now i am defining two events to communicate
  1. MessageToKiran event is published by "Kranthi.xaml" and is subscribed by "Kiran.xaml".
  2. MessageToKranthi event is published by "Kiran.xaml" and is subscribed by "Kranthi.xaml".
Whenever an event is published, all the subscribers for that event get notified regarding the published message.
namespace EventAggregationSample
{
    public class MessageToKranthi : PresentationEvent<string> { }

    public class MessageToKiran : PresentationEvent<string> { }
}
Subscribing to Event:
Before subscribing or publishing a message, we need to instantiate EventAggregator and Subscribe to event as shown below
IEventAggregator Aggregator { get; set; }

//Constructor
public Kranthi()
{
    InitializeComponent();
    Aggregator = new EventAggregator();
    Aggregator.Subscribe<MessageToKranthi, string>(OnMessageToKiran);
}

public void OnMessageToKiran(PresentationEvent<string> e)
{
    ListBoxItem item = new ListBoxItem();
    item.Content = e.Payload;
    lbMessages.Items.Add(item);
}
In the Constructor, I've initialized the Aggregator and subscribed to the event MessageToKranthi, which has a payload of type string(which is our message). Whenever any user-control publishes MessageToKranthi event then "OnMessageToKiran" code gets executed.

Publishing an Event:
We can use event aggregator to send message for all subscribers of that event as below
Aggregator.SendMessage<MessageToKiran, string>(
    new MessageToKiran { Payload = tbMessage.Text }
    );
The above code publishes "MessageToKiran" event with the payload of the user entered text, this text is passed as payload to all the subscribers for this event.

To Complete the Communication, two user-controls should perform the following activities
  • Kranthi.xaml - Publish the event "MessageToKiran" and Subscribe for the event "MessageToKranthi"
  • Kiran.xaml - Publish the event "MessageToKranthi" and Subscribe for the event "MessageToKiran"
Finally here is the link for the source code which demonstrates the event aggregation sample. hope this helps someone.. :)

Sunday, August 29, 2010

How To : Publish Code Snippets in Blog in 3 Steps

Most of my posts in my blog are related to .NET technology, as i am a .NET developer. One of the most frequent question for a developer who has just started to blog is "How to publish code snippet in blog". I too had the same question and after googling a bit and found couple of articles which i found useful, i just want to gather all useful stuff togather as explained below.

Login to your Blogger Account and Click on Design link and Click on Edit HTML, which is highlighted in the image shown below.





Now follow these simple 3 steps to publish code snippets in blogger:

  1. Search for "/head" in the HTML template and paste the below script tags above that. [Note]: Check "Expand Widget Templates" if search result is not found


    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
    
  2. Search for "/body" and Paste the below javascript code above "/body"


    
    
  3. Paste the below CSS code before "]]></b:skin>" in your HTML Template


    .dp-highlighter
    {
     font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
     font-size: 12px;
     background-color: #E7E5DC;
     width: 99%;
     overflow: auto;
     margin: 18px 0 18px 0 !important;
     padding-top: 1px; /* adds a little border on top when controls are hidden */
    }
    
    /* clear styles */
    .dp-highlighter ol,
    .dp-highlighter ol li,
    .dp-highlighter ol li span 
    {
     margin: 0;
     padding: 0;
     border: none;
    }
    
    .dp-highlighter a,
    .dp-highlighter a:hover
    {
     background: none;
     border: none;
     padding: 0;
     margin: 0;
    }
    
    .dp-highlighter .bar
    {
     padding-left: 45px;
    }
    
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar
    {
     padding-left: 0px;
    }
    
    .dp-highlighter ol
    {
     list-style: decimal; /* for ie */
     background-color: #fff;
     margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
     padding: 0px;
     color: #5C5C5C;
    }
    
    .dp-highlighter.nogutter ol,
    .dp-highlighter.nogutter ol li
    {
     list-style: none !important;
     margin-left: 0px !important;
    }
    
    .dp-highlighter ol li,
    .dp-highlighter .columns div
    {
     list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
     list-style-position: outside !important;
     border-left: 3px solid #6CE26C;
     background-color: #F8F8F8;
     color: #5C5C5C;
     padding: 0 3px 0 10px !important;
     margin: 0 !important;
     line-height: 14px;
    }
    
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div
    {
     border: 0;
    }
    
    .dp-highlighter .columns
    {
     background-color: #F8F8F8;
     color: gray;
     overflow: hidden;
     width: 100%;
    }
    
    .dp-highlighter .columns div
    {
     padding-bottom: 5px;
    }
    
    .dp-highlighter ol li.alt
    {
     background-color: #FFF;
     color: inherit;
    }
    
    .dp-highlighter ol li span
    {
     color: black;
     background-color: inherit;
    }
    
    /* Adjust some properties when collapsed */
    
    .dp-highlighter.collapsed ol
    {
     margin: 0px;
    }
    
    .dp-highlighter.collapsed ol li
    {
     display: none;
    }
    
    /* Additional modifications when in print-view */
    
    .dp-highlighter.printing
    {
     border: none;
    }
    
    .dp-highlighter.printing .tools
    {
     display: none !important;
    }
    
    .dp-highlighter.printing li
    {
     display: list-item !important;
    }
    
    /* Styles for the tools */
    
    .dp-highlighter .tools
    {
     padding: 3px 8px 3px 10px;
     font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
     color: silver;
     background-color: #f8f8f8;
     padding-bottom: 10px;
     border-left: 3px solid #6CE26C;
    }
    
    .dp-highlighter.nogutter .tools
    {
     border-left: 0;
    }
    
    .dp-highlighter.collapsed .tools
    {
     border-bottom: 0;
    }
    
    .dp-highlighter .tools a
    {
     font-size: 9px;
     color: #a0a0a0;
     background-color: inherit;
     text-decoration: none;
     margin-right: 10px;
    }
    
    .dp-highlighter .tools a:hover
    {
     color: red;
     background-color: inherit;
     text-decoration: underline;
    }
    
    /* About dialog styles */
    
    .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; background-color: inherit; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
    
    /* Language specific styles */
    
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
    .dp-highlighter .string { color: blue; background-color: inherit; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
    .dp-highlighter .preprocessor { color: gray; background-color: inherit; }
    

Done!!!! :) Those were the changes to be made in the HTML Template and now you can start posting your source code in blogger as shown below:
While writing a post, select "Edit HTML" to write the blog post in html mode and wrap your source code snippet with a pre tag and add name="code" and class="<your source code language>", after wrapping your source code it should look like something below
<pre name="code" class="csharp">
//your source code goes here
</pre>

Here is the list of supported languages, shamelessly copied from here:

LanguageAliases
C++cppcc++
C#c#c-sharpcsharp
CSScss
Delphidelphipascal
Javajava
Java Scriptjsjscriptjavascript
PHPphp
Pythonpypython
Rubyrbrubyrailsror
Sqlsql
VBvbvb.net
XML/HTMLxmlhtmlxhtmlxslt

Hope this helps someone :)

References/Useful Links:
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html
http://pleasemakeanote.blogspot.com/2008/06/posting-source-code-in-blogger.html

Monday, August 23, 2010

The specified named connection is either not found in the configuration, not intended to be used with the EntityClient provider, or not valid.

I was working on entity framework to access the underlying data using data access layer. I've added EDMX file, generated the required entity classes and was ready to go.

When i ran the application, i have encountered with "The specified named connection is either not found in the configuration, not intended to be used with the EntityClient provider, or not valid." error. I was really confused, as I have not modified the connection string manually. Entity framework generated edmx file and updated the webconfig file with the connection string.

After spending a good amount of time on this issue, i found out the solution for this issue and is explained below:

Problem: The created entity model .edmx file is in a class library project which i have created for accessing the data and the connection string is generated in the web.config file in the same class library project. When the application is running, the application checks for the connection string in the web.config file residing in the website project and it is not able to find there. This is the cause for the issue.

Solution: Moving the connection string from newly created class library project to the website project.
Hope this helps someone. :)

Wednesday, August 11, 2010

Message: Failed to download a platform extension: System.ComponentModel.DataAnnotations.zip

I was trying to reduce the silverlight xap file size and selected "Reduce XAP size by using applicaiton library caching" to true in Silverlight project properties, which reduced the size of xap file by caching the assemblies.

When i ran the application, i've encountered "Message: Failed to download a platform extension: System.ComponentModel.DataAnnotations.zip" error and was checking out the cause for this error. At last found that this error is occurring after setting the "Reduce xap file size" to true.

Solution: Changed the startup project from Silverlight project to Website project in silverlight project properties.

For more information on Silverlight 3 Cached Assemblies check this link