Technoeuphoria

TechFriday: Building Custom Behaviors

jocelyn — Mon, 29 Jun 2009 07:15:19 GMT

Okay, I missed Tech Friday, so I decided to make it Tech Weekend instead. I attended the June Mix-It-Up: Re-MIX last Thursday and was able to catch up a bit on the new technologies. I have been busy with a few other things at work and I am ashamed to say, I have been lagging behind! :|

One of the things that interested me is behaviors in Silverlight 3. If you do a bit of searching you’ll find quite a few articles on behaviors. Basically, it’s the ability to encapsulate “behaviors” that you can reuse on different UIElements that developers can write and have their designers use (with drag and drop of course) to earn brownie points. Expression Blend 3 comes with a few behaviors out of the box. They’re the ones listed in the screen shot below, apart from the first one which is the behavior I created:

My favorite, I would have to say is the MouseDragElementBehavior. To use it, all you have to do is drag and drop it to any element in your app to enable drag and drop capabilities. There’s just so much you can do for interactivity with that behavior alone. I remember this being one of the things I use to code time and time again with previous projects I used to tinker with.

Another behavior that I’ve always wished I could encapsulate was the “bring to front” behavior. Say you have a bunch of UI elements scattered in a pile on the screen, you sometimes want it to behave in such a way that an element you click on gets floated to the top. This is probably a behavior that you would like to use in several scenarios/apps so it makes sense to build a behavior for it, and reuse it across different projects.

WARNING: I think I’m using a different build of Blend so I won’t get into the details of where to get which assemblies. I’ll update this post once Blend 3 is out, but I think what’s more important is understanding how building a behavior would be like more or less.

Basically what I did was build a Silverlight Class Library that inherited from the Behavior generic:

public class BringToTopBehavior : Behavior<Canvas>
{
//some code here
}

When creating your own behaviors, Canvas would be the object you would like to apply your behavior to. Next thing to do is override the onAttached() method:

protected override void OnAttached()
{
    base.OnAttached();

    AssociatedObject.Loaded += new RoutedEventHandler(AssociatedObject_Loaded);
    
}

AssociatedObject would be the the actual instance to which the behavior is attached. What I did here is add an event handler to the Loaded event because I wanted to attach another event handler to each of the objects that gets loaded into the canvas. I can only get the children once the UI element has finished loading. My Loaded handler looks something like this:

void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
 {
   
     foreach (var child in AssociatedObject.Children)
     {
         child.MouseLeftButtonUp += child_MouseLeftButtonUp;
     }
 }

What I’m doing is attaching a handler to the MouseLeftButtonUp event for each of the objects contained in the Canvas in question. This handler is defined as:

void child_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    BringToTop(sender);
}

I created a few private methods to handle sorting the z-orders of the elements contained in the Canvas:

private void BringToTop(object element)
 {
     
     Canvas p = (Canvas)((FrameworkElement)element).Parent;
     int z = getHighestValue(p);
     for (int i = 0; i < p.Children.Count; i++)
     {
         var child = p.Children[i];
         if (element.Equals(child))
         {
             child.SetValue(Canvas.ZIndexProperty, z);
         }        
     }
 }

 private int getHighestValue(Canvas p)
 {
     int highest = 0;
     foreach (var child in p.Children)
     {
         var val = (int)child.GetValue(Canvas.ZIndexProperty);
         if ( val > highest) {
             highest = val;
         }
         child.SetValue(Canvas.ZIndexProperty, val - 1);
     }
     return highest;
 }

This probably isn’t the best implementation of this behavior but it gets the job done :)

USING THE BEHAVIOR

Once you’ve finished writing your behavior you can compile the code and reference that dll into any of your existing projects and start using the behaviors. Right-click on references, click Add Reference, and navigate to the compiled dll of your custom behavior.

Once you’re done, you should be able to make use of this behavior through blend. In my case, I can click and drag BringToTopBehavior to my chosen Canvas and I would see the following:

Now you’ll notice, however, when I try to drag and drop the behavior to the Grid panel, it tells me that it’s not a valid drop target.

This is because, in my definition of my behavior, I’d specified that this behavior can be applied only to Canvases. But now, I realize the same behavior can apply to any Panel object. What I can do now is update my behavior definition to, instead of Canvas, have it apply to Panel instead:

public class BringToTopBehavior : Behavior<Panel>
  {
      //somecode
      private void BringToTop(object element)
      {

          Panel p = (Panel)((FrameworkElement)element).Parent;
          //some code
      }
      private int getHighestValue(Panel p)
      {
          //some code       
      }
  }

With this change, I should be able to apply the behavior to any UIElement inheriting from Panel. I’ve zipped up and uploaded the code for this project. Feel free to download and explore here:

For more about the greatness of behaviors, check out this Mix Video: http://videos.visitmix.com/MIX09/C27M and of course the link to the behavior pack used in the demo: http://gallery.expression.microsoft.com/en-us/MIXBehaviorPack

How I Upload Photos to Facebook

jocelyn — Tue, 19 May 2009 03:06:33 GMT

I just have to say, I am loving Windows 7 RC. One of things I like that is an extended part of Windows 7 is the Windows Live Essentials. On a fresh install of Windows 7, go into the search bar and type in “Windows Live Essentials” or you can search for it using your favorite search engine to get to the download portal.

There are a few things included in the suite but what I want to talk about today is the Windows Live Photo Gallery. It’s quite similar to Vista’s Photo Gallery but much, much better. You can either build your own plugins or download ones that have been built by others. I’ll be talking about one in particular, the Live Upload to Facebook Plugin.

Scenario is this: after importing my pictures into my machine, I want to review them before uploading them to Facebook (or flickr or whatever service you want). Think of it as quality control.

The Facebook upload control makes it easy to upload photos if you already know which photos you want. My problem is that, I import my photos into folders based on events. And rarely do I want to upload all the photos I’ve taken of an event up into facebook, or flicker.

What I do is use Windows Live Photo Gallery to quickly view and rate my photos 5 stars for the ones I want to upload to Facebook. (or i could do something like, 3 for facebook, 5 for flickr, etc.)

Another thing the software does is (1) identify faces in the photos and (2) allow you to tag people from your messenger list (or specify the name of someone who’s not)

I can then go back to the gallery:

And either sort:

or filter the photos in a specific folder:

And now, since I have the Live Uploader plugin installed I can easily select and publish the photos into facebook:

I’m prompted to select the account I want to use:

I can then either create a new album, or select an existing album to publish the pictures to. Straight from the software, you can also control permissions for the album

I can also then map my tags to my contact list on facebook for automatic tagging:

Once it’s done publishing, my friends will be able to see my photos published in my feed. YEY!

What you’ll need?

Required:

Windows Live Photo Gallery - http://download.live.com/photogallery

Live Upload to Facebook plugin - http://www.codeplex.com/liveuploadfacebook

Optional:

Windows 7 RC - http://www.microsoft.com/Windows/Windows-7/download.aspx

How Do I Manage Two Twitter Accounts Using Just My Browser

jocelyn — Tue, 19 May 2009 03:03:03 GMT

Twitter has definitely become more and more popular both for work and for personal stuff. I have my personal twitter account which I use as I please: update the world about my bathroom habits, complain about unfortunate events, have random conversations with people, etc. I also have another work account which I have just started, with the goal of reaching out to the product development companies in Singapore (i have yet to think about how to go about this).

Sometimes I don’t like using the desktop clients because they tend to become a bit too heavy to keep running. So I keep twitter opened in my browser. The challenge is if I find someone interesting from my personal account and I want to follow them on my work account, it’s a bit taxing to logout-login.

Solution:

I make use of IE8’s InPrivate Browsing feature. To activate you can either press <Ctrl+Shift+P> or under Safety Menu, you can click on InPrivate Browsing.

You should be able to login with different credentials this way. I use the same method when I need to login with different Live IDs as well. (I think i have 7 o_O)

Click Once Deployment from Windows 7 Machines

jocelyn — Wed, 13 May 2009 08:30:16 GMT

I was trying out Click Once Deployment and was getting errors when i tried installing from the published point. I was getting the error "The required version of the .NET Framework is not installed on this computer." I found this thread when I did a search http://stackoverflow.com/questions/526264/clickonce-the-required-version-of-the-net-framework-is-not-installed-on-this-co where Tim Heuer posts a fix:

Hey all, I was updating one of my own plugins and ran into this as well, so I thought I'd ask some friends internally :-). Here's the skinny...

The following file is missing in Win7RC .NET distribution (this is known and being addressed): %ProgramFiles%\Reference Assemblies\Microsoft\Framework\v3.5\RedistList\FrameworkList.xml

Copy that file from a non Win7 machine (same location) to the Win7 box and your publish should work.

I'm traveling and haven't verified yet (don't have a non Win7 box near me), but wanted to post this for you all.

Hope this helps!

-th

Worked for me!

Understanding Prism V2

jocelyn — Wed, 01 Apr 2009 08:17:58 GMT

Here are some videos on Channel 9 that walk through building an application using the Composite Application Guidance for WPF and Silverlight

Creating Modular Applications
Visual Composition
Implementing Views and Services
Decoupled Communication

Now Showing @ Golden Village Webslice

jocelyn — Wed, 25 Mar 2009 09:52:04 GMT

I’m a movie buff myself and I was very happy to see that Golden Village has put up their own web slice for movies now showing :) Head down to http://www.gv.com.sg and install the slice by hovering over the Now Showing section. Great thing is that once you’ve installed the slice, you can actually buy tickets straight from the web slice. Cool stuff! I see Fanboys is on now, that’s definitely a must watch hehe

Piss Offline!

jocelyn — Sat, 21 Mar 2009 01:52:16 GMT

I was watching http://live.visitmix.com (check out the day 1 keynote recording, definitely a must see) the other day when they announced Silverlight 3 and I was just really excited about the things that were coming.You can head down to http://silverlight.net/getstarted/silverlight3/default.aspx to see a list of the features you can now play with. I wanted to try out the Out Of Browser feature which they call “SLOOB”, on my Piss Off application (the only app I know how to build :p) Whats’s great was that i didn’t have to change any part of my code except the ApplicationManifest.xml. Here’s what it looks like:

Things to note, I added the EntryPointAssembly and the EntryPointType (LiveSearch was the name of my project), and Filled in the <ApplicationIdentity /> I wanted to use custom icons for my app so I added this to my project and set the build types of the icons to “Content”. When I published my app on http://www.badgorilla.net/pissoffline and right click on it, I now see the option to “Install Piss Off onto this computer”:

When I click, I have the options to either create shortcuts on the Start Menu or the Desktop:

When i clicked ok, I can now see the app running, complete with my custom icons!

Sorry about the name, this app can’t really run offline right now since it pulls from the Live Search service. I’ll think of some offline functionality for this application and put it in soon. :)

If you want to find out more about Silverlight 3, start with Laurence Moroney’s free e-book of First Look: Microsoft Silverlight 3 then get your tools from http://silverlight.net/getstarted/silverlight3/default.aspx

Happy SLOOBing!

Playing with the Silverlight Toolkit

jocelyn — Sun, 22 Feb 2009 16:52:08 GMT

Yes, it’s as easy as it looks. I’m actually just creating this post so that I can test the app I just built. The Silverlight Toolkit has actually been in release since December but I haven’t had the time to play around with it yet. In the toolkit are some really cool components that you can start using in your Silverlight applications. I’m going to need to work with some charts in an upcoming project so I decided to test it out.

Installing the toolkit is easy. All you need to do is download the binaries from the site (or you can download the package with the source files if you want to do a bit of tweaking of your own). Once you’ve downloaded and unzipped it onto your drive, you can add a reference to the dll’s in your project.

Right click on references and select add reference:

In my case I wanted to make use of the PieCharts so I added the DataVisualization dlls:

Also, to make things easier, you can add these new controls to the toolbox by right-clicking on it and selecting Choose Items..

Then navigating to where you unzipped the dlls and of course selecting. Your toolbox should then be populated with the controls when this is done. Note that you won’t be able to drag and drop any of the controls to the design view, but you should be able to do it on the XAML code. When you do that, Visual Studio will automatically add a reference to the namespace and you can start using the control in your code. You’ll get something like:

For the sample, I followed what was stated in the guided tour, but I moved the title attribute to the Chart element. The title didn’t seem to show when I placed it on the PieSeries element:

As for what the application does, it simply reads the latest 10 posts from my feed and counts the number of posts tagged as personal, media, tech, and the posts whose title starts with “Tweets” which are basically posts that aggregate my twitter posts in supposedly a day. I wanted to have a visual of how much I’m actually leaving this blog to the hands of my twitter aggregator :-S.

UPDATE: Web Messenger is HERE!

jocelyn — Sat, 14 Feb 2009 02:02:07 GMT

You can find the Messenger icon on the upper right corner of the page when you access Live Mail from the browser.

Once you sign in, you’ll have the same presence options as you do on the client version of the messenger.

You can access your contacts and start an IM conversation.

And this is how the messenger window looks like:

There is one problem though:

nudging is quite important for me as well :)

Be Vigilant!

jocelyn — Wed, 11 Feb 2009 03:28:04 GMT

I was browsing through my spam mail again today and this is something I saw. Apart from the messed up email, you’ll notice the link and as you can see, it’s not enough to just read part of the URL but the entire URL.

Fences for Windows

jocelyn — Fri, 06 Feb 2009 04:42:54 GMT

Discovered this through a fellow twitter-er and i must say it’s something very useful for someone like me as i usually clutter my desktop with stuff and when it’s presentation time, I select all icons and dump it into a folder. :| But then, I for get to put them back onto the visible desktop so i start harassing my desktop with new stuff again :-S I remember once, I ended up with a couple of gigs on my desktop folder hehe

Also, it seems to run great on Windows 7. Try it out today http://www.stardock.com/products/fences/index.asp

Microsoft Web Platform

jocelyn — Wed, 21 Jan 2009 02:45:56 GMT

If you’re looking for an easy way to get started on building on Microsoft’s Web Platform, check out the Microsoft Web Platform Installer 1.0.

Microsoft Web Platform

Singapore Partners - Windows Live

jocelyn — Tue, 20 Jan 2009 07:42:11 GMT

If you’re an independent software vendor who wants to keep up to date to the latest information on the different Microsoft Technologies, any events or trainings that we’re conducting locally, subscribe to http://sgpartners.spaces.live.com where we will be posting updates for ISVs regularly.

If you want to subscribe to alerts, visit the site, go to Tools –> Sign up for Alerts

Singapore Partners - Windows Live

Tim Sneath : The Bumper List of Windows 7 Secrets

jocelyn — Wed, 14 Jan 2009 08:38:01 GMT

Check out this blog post from Tim Sneath for some tips and tricks on on Windows 7.

Tim Sneath : The Bumper List of Windows 7 Secrets

Installing Win7 using a USB Stick

jocelyn — Wed, 14 Jan 2009 08:33:05 GMT

Check out Dennis’s video on how to install Windows 7 using a USB Stick. Click the image below: