Pavan Podila's Blog

Using Live Spaces for blogging

2006-08-18T14:07:00.000-05:00

I have decided to switch to Live Spaces for blogging all the WPF stuff. Its not that Blogger is bad but just that I find it much more easier to use Live Writer with Spaces. Uploading pictures in Blogger is a pain, especially if you are uploading a couple of them. So starting today I am going over to Live Spaces. Here is my new Blog Url. BTW, I have a new slideshow application out there.

I will continue to keep this blog but won't be posting here anymore.

Using SmartArt in Word 2007 as images

2006-08-12T16:47:00.000-05:00

Word 2007 is a very powerful and rich blog editor and I've spoken about that once over here. I use it as my default editor for composing posts. This post was also composed within Word 2007 and then copy-pasted into Blogger's Web based editor. It works great for textual content but when it comes to using images, it breaks down a little.

The problem with the Blog settings of Word 2007 is that it is too rudimentary. I can certainly setup Blogger inside Word 2007 but that works only for text. For images I will have to provide a FTP or other location for hosting the images. Unfortunately I have no clue what the hosting server is for the Blogger images. I know I can do from within Blogger but I have no idea where it is uploading to. Also this doesn't seem to be a publicly know piece of information.
The only way to get around this problem is to create the images separately and then upload them through the Blogger Image Upload functionality, which can only be done through the web-based editor.

For creating the rich visuals I would like to use Word 2007's SmartArt feature. Using SmartArt it is possible to create great looking images with very little effort. It also integrates well with Excel for creating graphs/charts, etc. However if you had to export the SmartArt created in Word 2007 as images, there is no direct way to do it. Previously I would use Alt-PrntScreen command to take a snapshot of the screen in Word and then crop the image using an editor like Paint Shop Pro. But this was a tedious process and I always knew there was a better way to do it.

The solution
Today I found a way out, which gives me exactly what I want without any extra hoop-jumping.
The way to do it is to use the Save As... command within Word 2007 and select Web Page (*.htm, *.html) as the save format. Once that is done, Word creates a separate folder for the images and if you look inside that, you will find all your images, just the way you wanted!

Word creates a PNG file that contains the full-size image and also a GIF file which is the compressed version.

Designer - Developer workflow - Part 1

2006-08-11T19:13:00.000-05:00

There is certainly lot of information and awareness floating around that Windows Presentation Foundation (WPF) creates a new style of collaboration between the Designer and the Developer. How is that possible? The holding glue is a new XML based language called XAML. There are certain key elements of XAML that make this workflow a possibility. In this series of posts I’ll expound more into the world of XAML and its tools.

A common theme found in XAML is a clear separation of concerns. The logical structure of the page is distinctly separate from its styling. Interface elements like Buttons, Textboxes, Listboxes, etc. can be made to look dramatically different from the classic appearances that we have always known. Animations can be intermixed with static elements like text and they can also be applied on a wide variety of elements. Interface elements are not just limited to 2D but extend to 3D as well. It is thus possible to have a page design that mixes 2D and 3D to create a very immersive experience.

Anatomy of a Control

Underneath all these are some specific XAML elements that make it all happen. If we dissect a single UI element like a Button we can start seeing many layers.

The look:

The topmost layer of course is the appearance or the look of the Button control. We can separate it out into a template and just switch the template to acquire a different look. This idea of templates is more formally called Control Templates. UI controls themselves are of different kinds. On one hand we have a control like a Button that does not contain any other children and on the other hand we have controls like the Listbox which host a list of items or children. In addition to these two types we also have a third type of control, like the Tree, which is a hierarchy of children. So it makes sense that the control template be also be different. Sure enough. We have a ContentTemplate for a Button-like control (aka singular control), an ItemTemplate for a Listbox-like control (plural control) and a HierachicalDataTemplate for a Tree-like control.

The interaction:

Once the look is established we would like to interact with the control and we have events just for that. These events are very similar to the ones in WinForms but with some extra capabilities. In most UI paradigms events always originate from the control and bubble-up to their parent. So if I had a Button inside a Panel and I clicked on the Button, the Button would see the click event first followed by the Panel. In WPF this event propagation strategy is made bottom-up as well as top-down. The top-down approach is where the Panel would see the event first. This is more formally called the tunneling strategy

Trigger the Animations:

In addition to plain events, the control becomes more lively with animations and the way to trigger animations are generally events or some state changes. The way to capture a state change is to use a Trigger. Simply put, a trigger says that when a property changes its value to something, just trigger an action. That action could be an animation or a simple change in the appearance of the control.

To play an animation we first create a Storyboard, which could have one or more animations. An animation is just a time-based, progressive change in the value of a property.

Encapsulating with <Style/>

All of these elements: templates, events, triggers, animations can be captured into a single structure called the Style. Style is a list of property-value pairs for an element which also be used to specify other properties of the control. Thus we can encapsulate the complete anatomy of the control inside a declaration.

The ResourceDictionary --- the mother load

Bundling up the look and feel of a single control is straightforward but how do you encapsulate this information for a 100 different controls, say. The next higher level of organization is the ResourceDictionary. It is a list of name-value pairs where the name stands for a uniquely identifiable resource and the value part of the pair is the resource itself. Resources are not just limited to styles but absolutely any object. So I could have a ResourceDictionary that has a bunch of styles, templates, data-objects, brushes, etc defined that could be used in other parts of the application. I can also nest ResourceDictionaries. In other words if you think your resource-dictionary is growing too long, just break it up into smaller resource-dicationaries and merge them together inside a top-level resource dictionary. That greatly improves the organization of all the resources or assets.

ResourceDictionaries can be then linked into a page and the contained resources can be used by referring to their unique names.

Summary

We have covered enough material to understand the structure of a Control. In the next post I’ll talk about how these concepts can help in the designer-developer collaboration.

Did you miss WWDC 2006 Keynote?

2006-08-09T07:46:00.000-05:00

If you are like me and missed the WWDC 2006 keynote by Steve Jobs -- you can watch the streaming webcast here

Interesting parts:

PC-Mac Ad in the introduction
New features in Leopard (Time Machine, Spaces, 64-bit, ...etc..about 10 in all)

Zooming in Google Maps

2006-07-14T08:41:00.000-05:00

I just noticed that Google Maps finally has the scroll-wheel based zooming. Yes! you can use the scroll on your mouse to zoom in and out. I first saw this feature in MSN Virtual Earth and wanted it badly in Google Maps. My prayers have been finally answered :)

NFS Carbon: new videos

2006-07-14T07:09:00.000-05:00

I love the way the Need for Speed series of games has progressed over time. I have had the privilege of playing almost all of those titles right from NFS 2 to NFS underground. The next addition to the series is NFS Carbon. IGN has released some new videos of its gameplay. Watch it here.

Oooo...I love the feeling when the car turns on those sharp turns.

Also check out: Images, First Looks.

Blogging with Word 2007: My experiences

2006-07-13T19:35:00.000-05:00

I have been trying different blogging clients for a while now: w.Bloggar, BlogJet, BlogDesk, Qumana, Ecto, etc. So far I love BlogDesk because of its nice and clean interface and also its ability to add effects to images like drop shadows, paper tear effect, borders, rotations, etc. Best of all its free! No wonder its my default client for blogging.

But my quest for finding something better has not stopped and to add to my list is Word 2007. I heard about the blogging features in Word 2007 when the Beta 2 was released. As any curious observer I got my copy of Word and started playing with it. Initially my blog posts were limited to text only, which made it easier for me to upload it to Blogger and also the Movable Type blog that I use at workplace. Today my co-worker and I decided to setup an FTP server so that we could upload images through Word 2007. The blog configuration for Movable Type is pretty basic right now, which I am sure will improve as we get to the RTM version of Office. After some initial hiccups with the configuration, we got the image-uploading capability in place. Uploading those sexy-looking images (SmartArt, WordArt, ClipArt) in Word was finally possible :-)

To give Word 2007 a real test run, I decided to create a long blog post to explore many of the image/text editing capabilities. BTW, I am blogging a lot about Windows Presentation Foundation (WPF) in my internal blog. Today I also got to know that I could officially publish those posts even on my external blog! Sweet. I should have them here soon.

Now let me switch back to the topic of blogging in Word. The editing experience in Word is definitely superior compared to any of the other clients I have used before. Word 2007 makes it even more enjoyable with all those nice features for creating rich art and typography. But it is not without problems. Before I tell you the bad, let me give a quick listing of the good:

I like the fact that I can just copy code from the editor window of Visual Studio and paste directly into Word, preserving all the syntax highlighting. That is a big plus for me as I tend to write lot of code in my posts...mostly XAML/C# code.
The image editing tools are great. I love the different effects that I can apply on an image: drop shadows, reflections, 3D rotations, borders, etc. This really makes my post look outstanding!

So what's the bad?

I had chosen an FTP location for uploading the images. When I published the post all my image URLs had an ftp:// protocol but without the user information. The problem is that none of these images show up on the browser or in a client. This is probably because I was not using an anonymous login. Since my blog is internal I don't mind if the username/password attached to the FTP Url, but there is no way to specify that. I guess I should be using the anonymous login anyways. Something to try out tomorrow.
The nice images that I create in Word are poorly rasterized during the upload stage. I like the fact that Word is using the PNG format and not JPG or BMP but the rendering is pretty bad.
The numbering on the bulleted list was not properly maintained. I was using a bulleted list where each list item was having many paragraphs + images. That kind of broke the numbering and every item was numbered as 1. on a list of 5 items.
I could not upload the post as a draft and it complained that images could not be uploaded because the directory was set as read-only. However when I published the post directly (not as a draft) everything went well. I guess Word is doing some name mangling to publish as draft and in doing so it was looking for a different directory than the one I specified in the configuration.

Even with all these problems I published the post, only to open it up again in BlogDesk and make a ton of corrections like fixing the list items, fixing the image Urls, changing some font-styles, etc. I am glad that the blog editing experience is very enjoyable but the published result is pathetic. I hope this will be fixed soon, may be in the next CTP/Beta/RC release of Office. I would be glad to hear anyone having a better experience.

EID - June 2006 CTP is out!

2006-07-05T07:22:00.000-05:00

Finally the EID CTP for June is out and works on the .NET Framework 3.0. You know what to do when you go here.

Simple Flickr Explorer with WPF databinding

2006-06-09T16:21:00.000-05:00

Databinding is a great feature of the Windows Presentation Foundation and playing around with it has been fun. As a sample I made a simple Flickr explorer that would show the most recent photos of a user. It takes the username as input.

Databinding

The interesting part of this application is that it is entirely driven by Data-binding (markup + little code-behind). The markup creates the ObjectDataProvider which is then populated in the code-behind. All though I could have done everything in markup I deliberately chose to do some of it in code-behind just to have a taste of the API. I have a helper class which defines some public methods to get the list of photos and also the user-info. The ObjectDataProvider class has two properties: MethodName, MethodParameters which can be used to bind to methods of any CLR object. The data-binding engine would internally make calls on these methods to get the required data. The bindings to the ObjectDataProvider are set to asynchronous (by setting the Binding.IsAsync to True).

Styling

I have defined DataTemplates for the Photo class that represents each item in the list of photos. There are three different templates for different size of the photos. You can switch between the sizes using the radio-buttons. Additionally there are styles for the ListBox, Button and TextBox. For the ListBox I have changed the ItemTemplate to use a WrapPanel (which becomes the ItemsHost). All of these are declared in a separate ResourceDictionary and linked to the main XAML file.

Libraries

I am using the Flickr.NET library to communicate with Flickr.

Download Source and Binaries.

Using the “assembly” when mapping clr-namespace

2006-06-05T18:11:00.000-05:00

I was playing around today with Data binding in WPF using the ObjectDataProvider. It is a powerful concept and you can apply it effectively if you understand it well. Beatriz Costa has been blogging for a while about DataBinding and her blog is a great resource.

Since the Feb CTP of WinFX the syntax has changed for mapping a CLR namespace to a XML namespace. Using the new syntax the mapping can be part of the root tag as:

<Grid

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"

mc:Ignorable="d"

Background="#FFFFFFFF"

x:Name="DocumentRoot"

x:Class="UntitledProject1.Scene1"

Width="640"
Height="480"

xmlns:f="clr-namespace:MyHelper;assembly=MyHelper"

xmlns:system="clr-namespace:System;assembly=mscorlib">

Note the highlighted line which contains the mapping. With this concise syntax, we are creating a XML namespace “system” which maps to the CLR namespace of “System”. In the same line we also have an “assembly” attribute. This tells the XAML parser that the aforementioned namespace is not in the current assembly but lies in an external assembly (in this case “mscorlib”).

Thus when the XAML parser sees a fragment like below:

<ObjectDataProvider.MethodParameters>

<system:String>pavan-podila</system:String>

</ObjectDataProvider.MethodParameters>

</ObjectDataProvider>

it would know that the “system:String” is a Type defined in the CLR “System” namespace which lies in the mscorlib assembly.

I have had enough trouble debugging a solution when I missed the “assembly” attribute. I would keep getting a XamlParseException and when I drill down into the InnerException it would say:

{"Error at element 'String' in markup file 'TestUI;component/scene1.xaml' : 'f:MyHelper' string cannot be converted to object of type 'System.Type'."}

After scratching my head for a while it dawned on me that I was missing the “assembly” attribute. The mapping should be:

xmlns:f="clr-namespace:MyHelper;assembly=MyHelper"

WITH the assembly attribute!

WPF Polarium clone updated to May CTP of WinFX

2006-05-28T00:18:00.000-05:00

To get my hands wet with a little WPF code I decided to update my Polarium clone to the May CTP of WinFX Beta 2. There were minor changes related to the namespaces as detailed in this blog post. In addition I had to update the namespaces related to the Expression Interactive Designer (EID). For that I created a sample EID project and looked at the generated XAML code to get the namespaces.

Here is the direct link to the Source and Binaries.

A simple iBlok Mod

2006-05-25T14:23:00.000-05:00

After getting my WinFX runtime installed, I decided to try out the iBloks Beta (yet another of all the floating Betas!). iBloks looks more of an app for kids. It provides a pretty simple interface to drag and drop media content onto a MOD. Currently there are a couple of mods available like Dancing Man, Hearts, Cube, etc. Each of these mods have one or more plain surfaces onto which one can drag media content (photos, videos, text).

Choosing the media is also pretty straightforward. On the lower part of the window, there is a tabbed interface to switch between videos, photos, text, audio, etc. Once you have all of the media attached to the MOD, one can also share it or simply save to the local drive. Of all the mods I personally like the Dancing Man…for a simple reason…it has more surfaces to drag content to ;)

Dancing Man on the Ocean Theme

Day of the install

2006-05-24T20:50:00.000-05:00

Today has been pretty busy right from the morning. It all started from yesterday evening after the announcement of the betas (Vista, Office 2007 and WinFX). I decided to try out Office and WinFX. Fortunately Microsoft put out the Office betas out in the public (i.e. not requiring a MSDN subscription). I downloaded the installers for Office professional, Visio and OneNote. Late in the night when I had all of the office installers I loaded them onto my laptop. The installation was smooth without any hitch. I was already impressed looking at the Channel9 video of Outlook 2007 and then the official Office 2007 videos.

Today morning was the time for WinFX. I got rid of the previous versions of the runtime (Feb CTP), Windows SDK, Expression Interactive Designer (EID) and the Expression Graphic Designer (EGD). Just to be on the safer side I also downloaded the uninstall utility and ran it over after I had manually uninstalled from the Add/Remove programs. Meanwhile I was downloading the applications as per the links in this post. Once I had the installers I started with the WinFX installation. It ran fine for about 2 mins and then it crashed. I looked into the logs (stored in the %temp% directory) and found that it was crashing for Windows Communication Foundation (WCF). I did a quick search on the MSDN forums and found that people had faced similar problems. That however didn’t help me, even after restarting installation a few times. I guess the problem has to be with an earlier install of Microsoft MAX. MAX installs its own WinFX runtime and I am thinking there must have been some sparks flying in the registry because of that.

After many failed attempts I decided to take the most drastic step…reinstall the OS. This was anyway long overdue. I had a ton of software piled up and I was also having some performance problems. Plus it always gives me a sublime feeling of starting on a clean OS ;) So there I was with my recovery disks, backing up data, formatting hard disks, reinstalling OS and then followed by a ton of software installs (betas of course included). With all that behind me, I am now typing this blog post …with a sign of relief…zzzzzZZZZZ

Word 2007 test post

2006-05-24T08:08:00.000-05:00

This is a test post sent using the Word 2007’s Blog Post feature.

iBloks early access

2006-05-23T15:01:00.000-05:00

I mentioned sometime back that iBloks would be the next cool app after the North Face demo. iBloks is built using the Windows Presentation Foundation (WPF). In their own words:

"Welcome to the only way to create 3D personalized, multimedia, entertainment and game experiences to share with others. You can use your own digital media content or check out the iBloks shop for cool content from iBloks, and our partners. It's a fun, easy and totally new way to express yourself."

iBloks was first announced at the MIX 06. They also had a beta sign-up program where one would get early access to the software. Today I got a mail saying that I can now download the application. It is available on their download page. Check it out!

Expression Web Designer for Download

2006-05-18T10:09:00.000-05:00

Finally, the Expression Web Designer (EWD) is available for download. In fact it was supposed to have released a few days earlier but there were some problems with the site. Now its here -- Download

They say "Seeing is Believing", Wii says "Playing is Believing"

2006-05-09T23:34:00.000-05:00

The E3 is underway and the 3 big players: Sony, Microsoft, and Nintendo are off to demo some of the cool titles for their systems. Somehow my attention is all for Nintendo; for the Wii. I can't be blamed. I have been playing Nintendo games since I was a kid: Gameboy, Gameboy Advance, then GameCube and more recently Nintendo DS. For me its all about fun and fascinatingly Nintendo delivers just that!

Wii comes out in Q4 of 2006. Until then I'll hang around this place. For the latest and greatest at E3, go here. There is a cool Wii Tennis video with Miyamoto, waiting for you!

BTW, the inspiration for this post comes from this press article.

The last Redesign

2006-05-04T15:18:00.000-05:00

As I approach towards my last day as a Graduate Teaching Assistant (GTA), I got assigned a final redesign task for sprucing up an email. This was going to be a memo that would be sent out to all the faculty at the Bauer School of Business (the place where I am a GTA). Since I had already done similar tasks before I got picked up for doing this...just when I thought I could catch a nap...@#@$#%#$ :-)

Before

This is how the webpage looks before the redesign. Some of the things I had to change was the layout, images, header, and most importantly CSS-ifying the page.

The page was having a complex table-structure for layout -- which is definitely something the Web-Standards gurus won't appreciate. Plus, the markup was not semantic and had lot of elements just for styling (think lot of <FONT> tags). This really bloated the markup and the file size was about 7 Kb.

I am guessing somebody must have used FrontPage for this design ;-)

After

For the redesign, I decided to stick to a 2-column layout with the main-content in the left-column and a sidebar for the faculty testimonials. All the styling was done in CSS and the markup was made more semantic. This brought down the file size to around 3 Kb. The images were also changed: a new image for the Director and also a new banner image for the header. The images were floated to give the effect of flowing text. I also added some rounded corners for style.

Since the "Key Features" list was expanded to more than two, the page became longer and required scrolling. I have a couple of ways for dealing with that but for now I'll leave it as it is.

As an aside, I used the Consolas font for writing the markup and CSS. I think I like this font a lot and I am going to switch to that for my regular coding.

MAC takes on PC

2006-05-02T16:40:00.000-05:00

Apple really seems to be getting together to challenge the PC world. First it was the Ad at the MacWorld Keynote 2006 -- "Intel chips: so far were dull little machines running dull little tasks". Now they have a new set of Ads where they pit two guys, one is a MAC and the other is a PC. I like the Restarting Ad.

[Update]: Translations available for the Networking Ad. Go here.

The MacBook Pros are out: 15.4" and 17". So I'll see you at my Birthday Party ;)

SketchUp your world

2006-04-28T09:14:00.000-05:00

Google Sketchup, released recently, is a great and fun 3D Modeling software. It has amazing interactivity and also very easy to use. Looks like Google really got the intereaction part right. I have been a user (although at an amateur level) of a couple of 3D modeling softwares but I am very impressed with SketchUp.

As soon as I got over the initial learning curve (thanks to some great video tutorials) my mind started wandering. I have been exploring the XAML markup for sometime and tried my hand at Zam3D for creating markups for 3D models. Although Zam3D is a great tool, it has a very crowded interface which can overwhelm the user. SketchUp is just the opposite of that -- easy and intuitive (love the Push-Pull tool). So I started thinking if there is a way I could export the SketchUp 3D model to a XAML file. After a little digging, I found that SketchUp exposes a set of APIs for doing just that. The greatest surprise came when I read that the API bindings are for the Ruby language -- absolutely amazing. I personally love Ruby and it looks like there is no better way to play around more than with the SketchUp API. [Activity detected, appended to TODO list]

Just for fun I made this 3D model spelling the letters of my name. Took under 5 minutes.

13 minutes of Creativity

2006-04-27T22:06:00.000-05:00

I remember sometime back when Honda had come up with an Ad that had lot of domino effects; like a gear rolling upto something which would trigger something else and that would continue to do some more. In short the Ad was trying to show the various car parts of Honda Accord. Now look at this video (again Japanese)...which is a set of Ads that really display amazing creativity. At the end of every Ad, a card would pop up that has the name of product written on it (ofcourse in Japanese). A lady would also pronounce the name of the product in the background.

After hearing it so many times I can pronounce too: "Hi tha ko ra su ii chi" :) Watch the video and get Wowed!

If you haven't watched the Honda Ad, its here.

Use 'Bon Echo' WITH your extensions

2006-04-27T09:42:00.000-05:00

I am a loyal FireFox user but over the last few months I am discomforted with the fact that v1.5.x takes up tons of memory. I have read about the memory leaks, tried lots of fixes (like decreasing the browser.cache.disk.capacity, trimming memory on minimize, etc.) but no change. FireFox still continues to be the hungry fox. It was not just the memory but also my CPU was serving like a slave, working at its full potential (100%) and causing a sluggish experience. Today I threw up my hands and decided to make the switch. Switch to FireFox 2.0 - Bon Echo (ya! still FireFox, not Opera, not IE).

The most important concern was whether my extensions will work -- which ofcourse turned out that they don't. With a little help from Google, I found out this site, that provides extensions for Bon Echo. All that it does is to bump the maxVersion tag in the XPI file. Fortunately I found all my extensions over there.

Its good to know there are already people on the cutting edge (no...bleeding edge)...good company is always welcome! Now I am back to HappyLand and there is more food (memory and CPU) for everyone.

How I want to play Tetris

2006-04-26T22:12:00.000-05:00

Totally awesome video of a grandmaster playing Tetris. I was dumbstruck. For a moment I was wondering if this is a computer player, but then I saw the moving hands on the right.

Amazing. Go Watch!

Creating sidebar gadgets with WPF

2006-04-26T09:32:00.000-05:00

The current state of art for creating sidebar gadgets is to use the DHTML model. This is not as nice as using WPF. But the good news is: there is a workaround available! mszCool on MSDN Blogs writes about using an XBAP in an IFrame. The XBAP would ofcourse be the WPF gadget.

If it doesn't work, work around it!

Rotational scroller with IScrollInfo

2006-04-24T20:01:00.000-05:00

Ben Constable has published a set of tutorials/posts on IScrollInfo, in which he explains how one can create custom scrollers. I found these posts very interesting and decided to give it a little twist. Generally the scrollbar that you see on the right is used to scroll the content up/down. In Ben's posts, he uses the TranslateTransform to move the content up/down depending on the VerticalOffset.

I decided to replace the translation with rotation. Instead of TranslateTransform I use a RotateTransform and map the vertical offset to an angle between 0-180. Although such a rotational scroller is pretty useless, it does show a different way in which one can use the IScrollInfo interface. How about a simple dial control? We can hide the horizontal scrollbar and replace the vertical scrollbar with a custom ControlTemplate. The inner content could then be custom drawn to depict a dial.

Check out the Flash video