Radu Poenaru » My work

Improving Coding4Fun’s AboutPrompt

Radu Poenaru — Fri, 04 Feb 2011 19:01:15 +0000

While creating the Windows Phone7 version of my Master Thesis project, I needed to show some custom dialogs. Since Coding4Fun has some very nice dialogs, I explored the way that they might be customized to fit my needs. I needed a quick solution to a pressing problem.

I got in touch with this controls through WinPhoneGeek’s article Coding4Fun Toolkit for WP7 Overview and Getting Started, where he presented from the eagle’s eye the controls in the package. I was interested more in AboutPrompt control, but unfortunately he didn’t had it presented in the detail.

After opening the assembly and navigate to the class, you can see this:

What is the most interesting is that we can have access to the (String)Title, (Object)Body and (Object)Footer properties. This opens a lot of possibilities, since what I wanted was to create a custom body in which to show an Error, Warning or Notification.

So let’s dig into some code!

First, create a new Windows Phone 7 application in Visual Studio 2010 (if you are tired and just want to read this article, please do so – the full code is attached at the end of the article). You can create any flavor of WP7 application, as my code will be as unobtrusive as possible.

Then, download and add references to the Coding4Fun assemblies. You can read how to do this in the WinPhoneGeek’s article. Next add a button on the MainPage.xaml (or any desired xaml page) and then hook it to the code.

Next, in the button click we need to create the message view, hook its Completed action and show it. The Completed event is very important – will give you the possibility of interacting with the user, recover from the error by restarting the erroneous action or just navigate through your app to a e-mail submission form, allowing user to describe the issue encountered while using your app – very important, while you want your WP7 application to get only high reviews and this can be accomplished only keeping the users happy.

Since the customization is quite simple, I took the pattern of the desktop messages, displaying only the essential:

Title of the notification,
a icon describing the gravity of the notification,
a succinct description of the notification
more detailed description

The code to do this is the following (double click to select all code):

private void button1_Click ( object sender, RoutedEventArgs e ) {
    ModalNotification( "My Fancy Error", "Error while coding", "Silence! I will debug you!", Notification.Warning );
}

private void button1_Click ( object sender, RoutedEventArgs e ) {    ModalNotification( "My Fancy Error", "Error while coding", "Silence! I will debug you!", Notification.Warning );}public void ModalNotification ( string title, string semiTitle, String message, Notification notification ) {
    var about = new AboutPrompt( );
    about.Completed += new System.EventHandler>( about_Completed );
    about.Title = title;
    var panel = new WrapPanel {
        HorizontalAlignment = HorizontalAlignment.Stretch,
        VerticalAlignment = VerticalAlignment.Stretch
    };

    Uri myUri = notification == Notification.Error ?
        new Uri( "images/error.png", UriKind.RelativeOrAbsolute )
        : new Uri( "images/warn.png", UriKind.RelativeOrAbsolute );
    ImageSource imgSource = new BitmapImage( myUri );
    var imgVisual = new Image { Source = imgSource, Height = 64, Width = 64 };

    var tbSemiTitle = new TextBlock {
        Text = semiTitle,
        Margin = new Thickness { Top = 8, Left = 18 },
        FontSize = 30
    };

    var tbMessage = new TextBlock {
        HorizontalAlignment = HorizontalAlignment.Stretch,
        VerticalAlignment = VerticalAlignment.Stretch,
        TextWrapping = TextWrapping.Wrap,
        Margin = new Thickness { Top = 20 },
        Text = message
    };

    panel.Children.Add( imgVisual );
    panel.Children.Add( tbSemiTitle );
    panel.Children.Add( tbMessage );
    about.Body = panel;

    about.Show( );
}

void about_Completed ( object sender, PopUpEventArgs e ) {
    // Implement here the logic to handle the return from Modal AboutPrompt
    throw new System.NotImplementedException( );
}

public enum Notification {
    Warning,
    Error
} ;

Now let’s see what code does: First, it instantiates a new instance of AboutPrompt and hooks its Completed event to a proper handler. Here you can write your logic to handle the user confirmation.

Because I wanted a clean, nice look which would be also familiar, I choose the layout of the Windows MessageBox. As for the main title it was pretty easy, since I had access to the about.Title string property. But with the rest it got a little complicated, since about.Body doesn’t specify which kind of control desires. By looking into the sources of the project, I noticed that it needs a Container – so I provided a Wrap Panel, in which I added a Image and two TextBlocks. The visual can be seen in the left:

The code can be freely downloaded from here.

Post from: Radu Poenaru's Weblog

Improving Coding4Fun’s AboutPrompt

Adding new Social icons to the Mystique theme

Radu Poenaru — Sat, 08 Jan 2011 17:21:55 +0000

I use my blog to record and share my knowledge, but also to present to possible employers my skills. I use it like a marketing tool for my persona. For this, I need to make available not only the RSS and Twitter account, but also resume profiles like Xing, LinkedIn and Facebook.

Since I am using WordPress and I know a little bit of PHP and MySQL I wanted to customize my current theme.But some time ago I’ve read that they don’t encourage you to customize directly the chosen theme, but instead create your own child theme, with the desired customizations. This way, when the theme will be updated, you won’t loose neither time nor brains trying to redo all the modifications.

Creating a child theme, directly from the developers of WordPress

Making a child theme is very simple. Create a directory, put a properly formatted style.css file in it, and you have a child theme! With a little understanding of HTML and CSS, you can make that very basic child theme modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.

For some time ago, I started using child themes. At first, it seemed a useless time investment, but since then the theme was updated 3 or 4 times, so imagine each time creating a list of modifications to the original, implement them again and again in the new version!

Let’s see some code!

The modification that I will present now is how to add new icons for job websites, up on the bar. The steps are:

1. Using your preffered image editing tool (I preffer using Paint .Net, very smart and effective PNG producer) I modified the nav-icons.png file :

From : To:

The extra icons are taken from a royality free icon pack. They are 64 by 64 pixels. You can modify their sizes, but you’ll also have to update the javascript code that moves the images up and down.

Note: To make your life easier and keep the modifications to a minimum, keep the Twitter icon first and the RSS last, otherwise you’ll have to override the entire $nav_extra underneath.

2. Add the icons in your child theme, by concatenating the script that shows new buttons with the one which is already present, containing the Twitter and RSS. If you want to change the order of the icons, you can change the lines order. If you want to make the RSS icon first, instead of adding strings to $nav_extra, you’ll have to recreate also the RSS and Twitter strings and insert them in the string variable. Don’t forget to add the action to WordPress queue, such that your function to be called:

function mystique_navbuttons_pics($nav_extra)
{
  $nav_extra .= 'Contact me on Facebook!';
  $nav_extra .= 'Contact me on LinkedIn!';
  $nav_extra .= 'Contact me on LinkedIn!';

  $nav_extra = str_replace("title", "target='_blank' title", $nav_extra) ;

  return $nav_extra;
}
add_action('mystique_navigation_extra', mystique_navbuttons_pics');

3. Add the CSS required by the icons. This requires each icon to know where to start cutting from main PNG file its own appearance. We will create and inject the CSS in the corresponding file.

function mystique_navbuttons_css(){
 $i = THEME_URL.'/images'; ?>
/* Extra navigation icons */
#header a.xing{background: url(/nav-icons.png) no-repeat scroll -192px top transparent}
#header a.linkedin{background: url(/nav-icons.png) no-repeat scroll -64px top transparent}
#header a.facebook{background: url(/nav-icons.png) no-repeat scroll -128px top transparent}


That’s all guys, now you have a child theme wit your customizations and never afraid that you’ll have to spend time again when the theme will be updated!
Post from: Radu Poenaru's Weblog

Adding new Social icons to the Mystique theme

7 easy steps to use Webmatrix and WordPress local development

Radu Poenaru — Thu, 06 Jan 2011 09:14:00 +0000

Almost all good developers that I know have some kind of repository of their code. Mine is my blog, this blog. Stay with me and you’ll find out how to easily be able to create your local version of WordPress, customize and test your plugins.

For´this you’ll need to follow the next steps:

Go to Webmatrix official website and download the Web Platform Installer which will install for you not only Webmatrix itself, but also a lot of useful tools like an integrated webserver, Internet Information Services Express, PHP interpretor and its connectors just to name a few. But you can also use it to add new features like ASP .Net MVC3!
Because now the install of MySQL server is not any more supported, you’ll have to install it by yourself – go to their official website and download it from there. Choose the MSI Installer essentials and the process will be very easy. I prefer to install it as a service and then, from Control Panel –> Services, to set it to start manually. This way won’t eat resources when it is not needed.
Next, we’ll download a MySQL GUI called HeidiSQL – free and smart product. One might say that command line is enough, but I would rather concentrate on development instead of memorizing all those commands.
Create an empty database and a user. I personally like to set the database name, user and its password to the ones that I use on my production WordPress website. This way, I only have to modify only the DBHost in the WordPress’ configuration file.
Create a production database backup using your prefered tool – I use for quite a while the WP-DB-Backup plugin for WordPress to generate my scheduled backups. Import the content of the backup (using HeidiSQL is very easy – just point it to a zip, gzip archive or a sql file).
Now that we setup our database, let’s go to the code – download locally the sources of your website using FTP or other tools that your hosting provides, open Webmatrix and create a new website using local files. This way you will setup your development workspace wherever you like – I prefer to use D: drive. Otherwise, you’ll be prompted to use your MyDocuments folder which will not be available any more in case of windows clean reinstall – the entire c: drive will be wiped-out.
Make the proper changes to the wp-config file (if you followed my advice you’ll just have to replace in DBHost your production server with localhost). Hit Run (the small green arrow from the Webmatrix top ribbon) and you’re good to go!

If by any change you get a blank window in your prefered browser stating that “

Error establishing a database connection

” or something like this, go and check that in your hosts file (found in c:\Windows\System32\drivers\etc\) you have uncommented the line with localhost:

# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

# localhost name resolution is handled within DNS itself.
127.0.0.1 localhost
# ::1 localhost

Happy coding!

Post from: Radu Poenaru's Weblog

7 easy steps to use Webmatrix and WordPress local development

How to add Syntax Highlight to WordPress

Radu Poenaru — Fri, 02 Jul 2010 10:32:39 +0000

I wrote quite a while ago about How to implement Syntax Highlight in your WordPress blog. It used an forward, yet permanent approach: modify you’re theme’s header.php. But is it enough?

Lately, I wanted to update my blog’s theme to the newest version. But hey! I had a lot of modifications such the one above that kept me from doing a smooth update: BNR Slider, custom images for RSS and Twitter, hints, Syntax Highlight and so on.

The newest solution that I come up with is using a child theme, feature provided by WordPress engine. Basically, you have a theme applied to you blog that you like. Instead of modifying it, you create a new folder in theme’s directory with a special name who’ll be applied OVER your base theme, customizing only the aspects you need. Assuming that your theme’s name is MyFavoriteTheme, you’ll have to create the child theme as MyFavoriteTheme-child.

In order to use your new theme, you’ll have to create in the MyFavoriteTheme-child folder two files:

styles.css – required – who’ll mark your folder as a child theme
functions.php – optional – for our example is required, as we’ll write code inside of it

First, you Really need to setup the styles. The content is simple and explained in this straight-forward article.

The most interesting part is the functions.php, where we’ll define code to add our Syntax Highlight classes. You’ll have to put all needed JavaScript files in the /scripts folder, in the root of the WordPress install, and the css files respectively in /styles folder. This is just for easy of migration from one theme to the other, if you get bored or want to change your current one.

Then, in the aforementioned functions.php from your MyFavoriteTheme-child folder you have to insert the following text:

The code explanation:

First we set some global vars, to know where the directories are;
Then we create a new function in which we add one by one the scripts required for the site – you can add the ones that you use and when you’ll post some content that requires a new brush, the shCore will kindly alert you that one of the brushes is missing, specify also the name of it. This way you’ll load only the ones used and no more, keeping the webpage size low and quality high.
wp_enqueue_script assures that the script will be loaded once. So if it is already loaded by any other plugin or theme, you will not have it downloaded twice;
finally, we add an WordPress action, binding to the init hook and add there our code.

After uploading your code to your WordPress install (be careful to names – Linux is case sensitive), you’ll have to select as theme the child theme, so your modification will be applied. Until you’ll select the child theme, you will not see any changes!

That’s it, folks!

Post from: Radu Poenaru's Weblog

How to add Syntax Highlight to WordPress

Add Silverlight to WordPress

Radu Poenaru — Fri, 04 Jun 2010 17:45:04 +0000

As I presented earlier, you can easily create a Silverlight video player and you can see it working pretty nice. Not to mention that it can play a lot of formats and it is only 344 kb in size! Now let’s see how this is possible and how can one do it on his website.

From the start, Silverlight was meant to be as easiest as possible to develop and deploy. Also, the cross browser (running on all major browsers) and cross platform (running on Linux, Mac OSX and Windows) was a requirement. But more than this, not to depend on the server side on .Net framework was also important. So you can deploy and run (only for running you’ll need the Silverlight Runtime installed) your app no matter the OS (Operating System).

This is why we discuss today on adding Silverlight to WordPress and not on How to deploy Silverlight on Linux. From the server’s OS point of view, Silverlight is just another file so you don’t need any plugin nor installs on the server side. It is on the client side where it is downloaded, setup with parameters and processed and here you need to install the Silverlight runtime – a mere of 4 Mb. If you’ve developed prior Adobe Flash application, you’ll feel very natural on the process. So let’s begin our ride to add your Silverlight application to WordPress.

Step 1.

Develop your Silverlight application. You should have a .xap file built in order to go further.

Step 2.

Upload to your WordPress blog your Silverlight application to a folder of your desire and then the Silverlight.js file that you find in your Visual Studio solution, in the web application project (I prefer to the root’s scripts folder). If you don’t find it, you can take it from here, but beware that this might be outdated. Afterwards, create a new file, called silverlight_app.js ( I prefer lowercasing all my server side files so I won’t have problems with case-sensitive OS like Linux). In that file, paste the following script (the default way to handle Silverlight errors) and then upload it also:

function onSilverlightError(sender, args) {
    var appSource = "";
    if (sender != null && sender != 0) {
        appSource = sender.getHost().Source;
    }

    var errorType = args.ErrorType;
    var iErrorCode = args.ErrorCode;

    if (errorType == "ImageError" || errorType == "MediaError") {
        return;
    }

    var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

    errMsg += "Code: "+ iErrorCode + "    \n";
    errMsg += "Category: " + errorType + "       \n";
    errMsg += "Message: " + args.ErrorMessage + "     \n";

    if (errorType == "ParserError") {
        errMsg += "File: " + args.xamlFile + "     \n";
        errMsg += "Line: " + args.lineNumber + "     \n";
        errMsg += "Position: " + args.charPosition + "     \n";
    }
    else if (errorType == "RuntimeError") {
        if (args.lineNumber != 0) {
            errMsg += "Line: " + args.lineNumber + "     \n";
            errMsg += "Position: " +  args.charPosition + "     \n";
        }
        errMsg += "MethodName: " + args.methodName + "     \n";
    }

    throw new Error(errMsg);
}

Add references to both files in your WordPress theme’s header file, inside the tag (you can edit the header.php).Note that even if the theme’s folder way deep from the root, the actual page processing is done in the root, where core web files are located. This is why we have added scripts with this path:

Step 3.

Create a new article in which you put the Silverlight object. Note that some blog editors (like Windows LiveWriter doesn’t like to have inside the article < or > so you’ll have to replace them with their HTML equivalents < and >). Also replace the PathTo with your actual path where you uploaded your Silverlight application ( can be a relative path or full http path – as long as you point to the application’s directory) and YourSilverlightApplicationName.xap with the actual name of your application :

Step 4.

Post the article and your hard worked Silverlight application!

That’s all!

Post from: Radu Poenaru's Weblog

Add Silverlight to WordPress

Silverlight VideoPlayer for RailsCasts

Radu Poenaru — Tue, 01 Jun 2010 14:28:00 +0000

I am and will be a Microsoft Developer. While working for convenience with other tools, I love strong type languages. I don’t want to ship products because I saved once and hit “s” one more time, so my product will be shipped with that small, human and yet unpardonable error in code.

How many times did you loose your time and effort with PHP in order to find a small mistake like this?

In my pursue on Microsoft tools path I started enjoying the Silverlight technology. Who might not know, Silverlight is a competitor to Flash. By now, on its 4th version, is way above Adobe Flash in almost all areas (I actually worked with Flex and Flash recently, so I really know what I’m talking about):

Easy to develop : the C# language is a world class, easy to write in, with good compiler, a lot of resources and a VERY good IDE (try to write code and animations in same time in that Flash IDE and you’ll see what I mean)
Supports Full HD (there are examples on the net with 2 or 3 full HD movies playing), while Flash just tries to get HD with lots of CPU used.
The model of development is the same for in Browser and Out of Browser – you don’t need to change the tool from Flash to Flex in order to have same product for Desktop and Web.

So I want to really learn, but what example shall I have? My second job as student is to work in Uni-Bonn, developing a Ruby on Rails solution for them. While this is also an interpreted language, the RubyMine IDE makes it possible not to miss a variable or a mistyped string. It doesn’t provide types, but still, it’s a step forward. To improve my Rails skills I use a lot the website of a professional Ruby developer, Ryan Bates. He has a lot of RailsCasts and he adds one each week. But unfortunately, being an Apple user, the movie is encoded as .mov file. I discovered that on the second link, with smaller font, provides also an .m4p link.

So I started developing a web Silverlight player for its movies. Yeah, I know, the web is full of them, but I wanted to lean this technology and also improve my access to Rails Casts.

I begun with a simple Silverlight project, adding a MediaElement on the canvas and set its Source property to a movie. It immediately started playing – was a nice experience by now. But you need controls for moving along the movie timeline, a list from which to choose your desired movie.

Thus, I started creating two User controls – one for MediaElement controls, and other for retrieving the guy’s rss feed, parse it and display it nicely. While the controls were quite fast to develop, the list took more time. Also because I wanted to learn a little bit of Expression Blend. So I used the Shawn Wildermuth’s Dirty Little Secret #2 and learn deep custom templating for a Listbox.

Putting all together was a breeze, the most time used was for testing the final product.

You can go directly to the Silverlight player and see the result.

Post from: Radu Poenaru's Weblog

Silverlight VideoPlayer for RailsCasts

Railscasts Silverlight video player

Radu Poenaru — Mon, 31 May 2010 10:46:36 +0000

This is my second shot to create a better player for Railcasts. As you can see, it goes better and better. Who knows what might be next?

If you want to know more about the process through which this player was designed you can read also:

How and why I choose the Silverlight platform
How to integrate your Silverlight content with your WordPress blog (and presumable all blog systems who allow you to add JavaScript)

Post from: Radu Poenaru's Weblog

Railscasts Silverlight video player

Create a simple HTML .MOV player

Radu Poenaru — Wed, 26 May 2010 13:05:25 +0000

As a Ruby developer, I work quite a lot with their “special” plugins called gems. The nice fact about the gems is that they bring lots of functionality. By example, there’s a gem for paginating a collection who takes just few parameters and not only that finds out how many objects the collection has, but also how to split them, generating the corresponding links and serving to the original container (that used to show the entire collection) only the collection part that is representative in the context of current page and items per page.

Before someone new to a specific gem starts thinking to implement it, usually searches on the net for examples. The most important gems are described and exemplified in Railscasts.com. The content is excelent, the quality is good, sound is nice but the format chosen for movies is Apple’s .MOV proprietary format. There are few plugins to install for playing the files with MediaPlayer, but frankly I wanted a quicker solution than go on some obscure websites and getting from there a creepy .exe installer.

So I’ve created a simple .mov player that will replace the 33 MB of useless QuickTime Player (if you’re a Mac user, you have already this installed so you’ll not need my hack).

Go directly to the player >

So let’s see some code!

First, I decided to use the Object method in order to play mov files. Apple provides a .cab file, who is able to play this files in browser. More documentation on its parameters you can find in their Embedding tutorial.

Don’t forget to add a link to JQuery library!

The html code is shown below and it is pretty straight forward:



  
      
      
      
      
      

http://media.railscasts.com/videos/188_declarative_authorization.mov

The JavaScript is a little bit trickier as it involves JQuery. For a newbie, it is pretty hard to debug, but after a while you’ll just feel it:

$(function() {
  // bind an onClick event for this second Flash container
  $("#btnPlayMov").click(function() {
    var _height = "306px";
    var _width = "400px";
    var _movie =  $('#txtURL').val();

    var _html = '';
    _html += '';
    _html += '';
    _html += '';
    _html += '';

    $("#divPlayer").html(_html);
  });

  $("#btnClearMov").click(function() {
    $("#divPlayer").html("http://media.railscasts.com/videos/188_declarative_authorization.mov");
  })
})

Not to mention that it works in all major browsers (IE 8, FireFox 3.6 and Chrome) !

Go directly to the player >

Post from: Radu Poenaru's Weblog

Create a simple HTML .MOV player

Online Mov Player

Radu Poenaru — Wed, 26 May 2010 12:15:34 +0000

Paste here a movie from http://railscasts.com/

Width in px:

Height in px:

http://media.railscasts.com/videos/188_declarative_authorization.mov

Post from: Radu Poenaru's Weblog

Online Mov Player

How to add ui-icons to JQuery tabs

Radu Poenaru — Tue, 25 May 2010 12:07:49 +0000

While working in UniBonn, I have a lot of contact with Ruby on Rails and JQuery; I actually started loving its interactivity and stability. But lately I encountered a small situation with the tabs object that they offer.

This is their default view, with Redmond theme applied. Nice and clean, you might say. But what’s missing? These tabs don’t support images. So you’ll not be able to show an image to specify, let’s say, that this tab has some updated information or a warning that something important is inside that tab.

I wanted to have some kind of control on specifying how the tab should look when I wanted my users to understand that something important is inside and requires their immediate attention.

As I searched through the website, I found the mentions of how to change the tab looks into an “error” style, so that it will attract attention no matter how tired the users are. In the Theming area of JQuery UI website, I found the help for Layout Helpers. Basically, you can specify additional classes who can override the theming of an element. Under Interaction cues, you’ll find all you need to set your elements style to highlighting, error, disable etc.

Interaction Cues

.ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.

.ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons.

.ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.

.ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.

.ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text.

.ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.

And as an addition, some styles can trigger the change of icons, for example ui-state-error shows red icons instead of the default blue ones. The next step is to modify the style of the div that requires attention:

   >
    
      <%= '' unless user_alert %> User activity

So here I was blocked. The alert image should have been shown in the left of the text, aligned with it, but because of the tab style, it didn’t do that properly.

One last modification to the JQuery UI did the magic:

.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li a img { float: left; margin-right: 5px}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }

The added line, the one with .ui-tabs .ui-tabs-nav li a img enabled my image to stay nice in her position, so the divs looks now:

That’s all, folks! Enjoy!

Post from: Radu Poenaru's Weblog

How to add ui-icons to JQuery tabs