Joe Audette

Silverlight + Google Gears = Awesome! at least in Firefox

2008-11-29T12:19:00Z

I spent most of the week prototyping some things in Silverlight. I figured during the holiday week most people out there goofed off on their jobs a lot this week, so rather than work on my roadmap priorities, I decided to have some fun and play with Silverlight.

Some of you who have followed my blog for a while may remember some posts I made in the past about my plans for Site Office as a second plug in model for mojoPortal more geared to line of business apps that need a consistent look and feel rather than the web site kind of look, they need to look like applications. I originally protyped the UI using Dojo and then later re-did it with ExtJs. You can see the ExtJs version if you login to this site (or http://demo.mojoportal.com using admin@admin.com and password admin), then click the Site Office link at the top. You'll see the drag resizable panes that give the idea of where I wanted to go with Site Office as a UI for LOB applications. This prototype has just been sitting there without much attention because of other priorities and also partly because my enthusiasm for ExtJs disappeared when they changed the license from LGPL to GPL. Anyway, even back then I implemented a google gears query tool. Its really the only functioning app in the old Site Office prototype, you can find it by clicking the My Stuff in the left accordian menu in Site Office and then click SQL. For those who don't know, google gears is a client side SQL database built on SQLite and having this database available opens a lot of possibilities in web development for very rich and responsive applications.

Well, now my plan is to scrap the old ExtJs based Site Office prototype and build a better one with Silverlight. I've already got the Google Gears Query Tool re-implemented in Silverlight as shown below:

I wrote a nice managed code wrapper around the javscript calls for gears. The only problem is, it doesn't work well in IE 7 for some reason, it works great in Firefox. I've sent an email off to Scott Guthrie at Microsoft in hopes of some help looking into the problem, but for now you can try it out online at http://demo.mojoportal.com/Index.aspx, you can see that I've got the basic layout of Site Office again implemented in Silverlight with the drag re-sizable panes. I plan to build a plug in model that allows you to plugin your own Silverlight applets and let the framework provide stuff thats common across applications. If I can get google gears working well across browsers with Silverlight its really going to be sweet. The code for this is in my svn sandbox and will probably land in trunk sometime next week.

Now using the managed gears wrapper can be seen in this client side business/data class, it looks very much like a server side class but its a client side object populated from a client side database in a very similar fashion to what it would look like in server side code. Notice the parametrized queries to prevent sql injection attacks. This class represents a saved query but it could represent anything.

using System;

namespace mojoPortal.Silverlight.Helpers.Gears
{

    public class SavedQuery
    {
        public SavedQuery()
        {}

        private int id = -1;
        private string name = string.Empty;
        private string query = string.Empty;

        public int Id
        {
            get { return id; }
        }

        public string Name
        {
            get { return name; }
            set { name = value; }
        }

        public string Query
        {
            get { return query; }
            set { query = value; }
        }

        public void Save(GearsDb gearsDb)
        {
            if (id == -1) { Create(gearsDb); return; }

            Update(gearsDb);
        }

        private void Create(GearsDb gearsDb)
        {
            if (gearsDb == null) { return; }

            string sqlCommand = "insert into savedqueries (name, query) values (?, ?)";
            object[] parameters = new object[2];
            parameters.SetValue(name, 0);
            parameters.SetValue(query, 1);
            gearsDb.Execute(sqlCommand, parameters);
            id = gearsDb.LastInsertRowId();

        }

        private bool Update(GearsDb gearsDb)
        {
            if (gearsDb == null) { return false; }

            string sqlCommand = "update savedqueries set name = ?, query = ? where id = ?";
            object[] parameters = new object[3];
            parameters.SetValue(name, 0);
            parameters.SetValue(query, 1);
            parameters.SetValue(id, 2);
            gearsDb.Execute(sqlCommand, parameters);
            int rowsAffected = gearsDb.RowsAffected();
            return (rowsAffected > 0);
        }

        public static SavedQuery GetQuery(GearsDb gearsDb, int id)
        {
            if (gearsDb == null) { return null; }
            string sqlCommand = "select * from savedqueries where id = ?";
            object[] parameters = new object[1];
            parameters.SetValue(id, 0);
            GearsResultSet rs = new GearsResultSet(gearsDb.Execute(sqlCommand, parameters));

            SavedQuery query = null;
            if (rs.IsValidRow())
            {
                query = new SavedQuery();
                query.id = Convert.ToInt32(rs.GetFieldValue("id"));
                query.name = rs.GetFieldValue("name").ToString();
                query.query = rs.GetFieldValue("query").ToString();
            }
            rs.Close();

            return query;
        }

        public static SavedQuery GetQuery(GearsDb gearsDb, string name)
        {
            if (gearsDb == null) { return null; }

            string sqlCommand = "select * from savedqueries where name = ?";
            object[] parameters = new object[1];
            parameters.SetValue(name, 0);
            GearsResultSet rs = new GearsResultSet(gearsDb.Execute(sqlCommand, parameters));

            SavedQuery query = null;
            if (rs.IsValidRow())
            {
                query = new SavedQuery();
                query.id = Convert.ToInt32(rs.GetFieldValue("id"));
                query.name = rs.GetFieldValue("name").ToString();
                query.query = rs.GetFieldValue("query").ToString();
            }
            rs.Close();

            return query;
        }

        public static bool Delete(GearsDb gearsDb, int id)
        {
            if (gearsDb == null) { return false; }
            string sqlCommand = "delete from savedqueries where id = ?";
            object[] parameters = new object[1];
            parameters.SetValue(id, 0);
            gearsDb.Execute(sqlCommand, parameters);
            int rowsAffected = gearsDb.RowsAffected();
            return (rowsAffected > 0);

        }

    }
}

One Bookmarking Service to Rule Them All and in The Widget Bind Them

2008-03-28T18:27:00Z

I'm sure those of you out there reading this blog also read a lot of other blogs and have noticed over time the chickletization of blog pages with little icons for all the different bookmarking services like Del.icio.us and Digg, and on and on with the ever growing plethora of other services. I was starting to feel that the mojoPortal blog was a little behind the times in this respect. Then I noticed on TechCrunch, the use of the AddThis.com widget. After looking into the integration I could see that it was relatively low hanging fruit to implement a .NET control that makes it easy to add the AddThis button.

Use of the .NET control in markup is like this:

<mp:AddThisButton ID="at1" runat="server"
AccountId=""
ButtonImageUrl="~/Data/SiteImages/addthisbookmarkbutton.gif"
Text="Share This Using Popular Bookmarking Services"
CustomBrand="mojoPortal"
CustomLogoUrl="http://www.mojoportal.com/Data/mojoportal_box_dropshadow.png"
CustomLogoBackgroundColor="e8e8e8"
CustomOptions=""
UrlToShare=""
TitleOfUrlToShare=""
/>

If you leave the UrlToShare and TitleofUrlToShare blank it automatically uses the current page which makes it easy to add it to the layout.master file of your mojoPortal skin so it appears on every page.

In the blog we databind those properties to the title and url of the blog post.

If the account id is not set the control doesn't render.

Now we can just let AddThis.com keep track of the emerging services and add them for us instead of having to add a new chicklet every time some cool new service appears.

At the time of this post, this feature is only available from the mojoPortal source code repository, but it will be in the next release coming soon.

You can see the full source code for the control below, in case you want to use it in your own projects. By inheriting from the Hyperlink the implementation was very easy to do. Just wiring up a little javascript and encapsulating the customizable attributes into properties.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Globalization;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace mojoPortal.Web.Controls
{
    /// <summary>
    /// Author:                    Joe Audette
    /// Created:                2008-03-27
    /// Last Modified:            2008-03-27
    ///
    /// The use and distribution terms for this software are covered by the
    /// Common Public License 1.0 (http://opensource.org/licenses/cpl.php)
    /// which can be found in the file CPL.TXT at the root of this distribution.
    /// By using this software in any fashion, you are agreeing to be bound by
    /// the terms of this license.
    ///
    /// You must not remove this notice, or any other, from this software.
    ///
    ///
    /// See http://www.addthis.com
    ///
    ///
    ///
    /// </summary>
    public class AddThisButton : HyperLink
    {
        #region Private Properties

        private string accountId = string.Empty;
        private bool useMouseOverWidget = true;
        private string customLogoUrl = string.Empty;
        private string customLogoBackgroundColor = string.Empty;
        private string customLogoColor = string.Empty;
        private string customBrand = string.Empty;
        private string customOptions = string.Empty;
        private int customOffsetTop = -999;
        private int customOffsetLeft = -999;
        private string buttonImageUrl = "~/Data/SiteImages/addthissharebutton.gif";
        private string protocol = "http";

        private string urlToShare = string.Empty;
        private string titleOfUrlToShare = string.Empty;

        #endregion

        #region Public Properties

        /// <summary>
        /// Your addthis.com username.
        /// If this is not set the control will not render.
        /// </summary>
        public string AccountId
        {
            get { return accountId; }
            set { accountId = value; }
        }

        /// <summary>
        /// if true will show widget in the page
        /// </summary>
        public bool UseMouseOverWidget
        {
            get { return useMouseOverWidget; }
            set { useMouseOverWidget = value; }
        }

        /// <summary>
        /// The logo to display on the popup window (about 200x50 pixels).
        /// The popup window is show when the user selects the 'More' choice
        /// </summary>
        public string CustomLogoUrl
        {
            get { return customLogoUrl; }
            set { customLogoUrl = value; }
        }

        /// <summary>
        /// The color to use as a background around the logo in the popup
        /// </summary>
        public string CustomLogoBackgroundColor
        {
            get { return customLogoBackgroundColor; }
            set { customLogoBackgroundColor = value; }
        }

        /// <summary>
        /// The color to use for the text next to the logo in the popup
        /// </summary>
        public string CustomLogoColor
        {
            get { return customLogoColor; }
            set { customLogoColor = value; }
        }

        /// <summary>
        /// The brand name to display in the drop-down (top right)
        /// </summary>
        public string CustomBrand
        {
            get { return customBrand; }
            set { customBrand = value; }
        }

        /// <summary>
        /// A comma-separated ordered list of options to include in the drop-down
        /// Example: addthis_options = 'favorites, email, digg, delicious, more';
        /// Currently supported options:
        /// delicious, digg, email, favorites, facebook, fark, furl, google, live, myweb, myspace,
        /// newsvine, reddit, slashdot, stumbleupon, technorati, twitter, more
        /// (the default is currently 'favorites, digg, delicious, google, myspace, facebook,
        /// reddit, newsvine,
        /// live, more', in that order).
        /// </summary>
        public string CustomOptions
        {
            get { return customOptions; }
            set { customOptions = value; }
        }

        /// <summary>
        /// Vertical offset for the drop-down window widget (in pixels)
        /// thiscontrol defaults to -999 which means unsepcified
        /// this will result in the defaults from addthis.com
        /// not sure what the defsault is
        /// </summary>
        public int CustomOffsetTop
        {
            get { return customOffsetTop; }
            set { customOffsetTop = value; }
        }

        /// <summary>
        /// Horizontal offset for the drop-down window widget (in pixels)
        /// thiscontrol defaults to -999 which means unsepcified
        /// this will result in the defaults from addthis.com
        /// not sure what the defsault is
        /// </summary>
        public int CustomOffsetLeft
        {
            get { return customOffsetLeft; }
            set { customOffsetLeft = value; }
        }

        public string ButtonImageUrl
        {
            get { return buttonImageUrl; }
            set { buttonImageUrl = value; }
        }

        public string UrlToShare
        {
            get { return urlToShare; }
            set { urlToShare = value; }
        }

        public string TitleOfUrlToShare
        {
            get { return titleOfUrlToShare; }
            set { titleOfUrlToShare = value; }
        }

        #endregion

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            if (accountId.Length == 0)
            {
                this.Visible = false;
                return;
            }

            if (Page.Request.IsSecureConnection)
                protocol = "https";

            SetupScripts();

            this.ImageUrl = Page.ResolveUrl(buttonImageUrl);
            this.NavigateUrl = "http://www.addthis.com/bookmark.php";

            if (useMouseOverWidget)
                SetupWidget();
            else
                SetupNormalLink();

        }

        private void SetupNormalLink()
        {
            StringBuilder onClickAttribute = new StringBuilder();

            if (urlToShare.Length > 0)
            {
                onClickAttribute.Append("addthis_url = '" + urlToShare + "'; ");
            }
            else
            {
                onClickAttribute.Append("addthis_url = location.href; ");
            }

            if (titleOfUrlToShare.Length > 0)
            {
                onClickAttribute.Append("addthis_title ='" + titleOfUrlToShare + "'; ");
            }
            else
            {
                onClickAttribute.Append("addthis_title = document.title; ");

            }

            onClickAttribute.Append("return addthis_click(this); ");

            this.Attributes.Add("onclick", onClickAttribute.ToString());

            //this.Attributes.Add("onclick", "return addthis_click(this); ");

        }

        private void SetupWidget()
        {
            StringBuilder mouseOverAttribute = new StringBuilder();

            mouseOverAttribute.Append("return addthis_open(this, '',");

            if (urlToShare.Length > 0)
            {
                mouseOverAttribute.Append("'" + urlToShare + "', ");
            }
            else
            {
                mouseOverAttribute.Append("'[URL]', ");
            }

            if (titleOfUrlToShare.Length > 0)
            {
                mouseOverAttribute.Append("'" + titleOfUrlToShare + "' ");
            }
            else
            {
                mouseOverAttribute.Append("'[TITLE]' ");

            }

            mouseOverAttribute.Append("); ");


            this.Attributes.Add("onmouseover", mouseOverAttribute.ToString());

            this.Attributes.Add("onmouseout", "addthis_close()");

        }

        private void SetupScripts()
        {
            StringBuilder script = new StringBuilder();
            script.Append("<script language=\"javascript\" type=\"text/javascript\"> ");
            script.Append("\n ");
            script.Append(" </script>");

            Page.ClientScript.RegisterClientScriptBlock(
                typeof(AddThisButton),
                "addthisbutton",
                script.ToString());

            if(useMouseOverWidget)
                Page.ClientScript.RegisterStartupScript(
                    typeof(AddThisButton),
                    "addthisbuttonsetup", "\n<script type=\"text/javascript\" src=\""
                    + protocol + "://s7.addthis.com/js/152/addthis_widget.js"
                    + "\" ></script>");
            else
                Page.ClientScript.RegisterStartupScript(
                    typeof(AddThisButton),
                    "addthisbuttonsetup", "\n<script type=\"text/javascript\" src=\""
                    + protocol + "://s9.addthis.com/js/widget.php?v=10"
                    + "\" ></script>");

        }


    }
}

Yahoo Media Player - Sweet and Easy

2008-03-09T12:36:00Z

cross posted from www.joeaudette.com

I first read about Yahoo Media Player a month or so back and I bookmarked it with the intention of using it on my site. I don't know why I waited, I must have just been too busy or absorbed in other things I was working on. I mean its a 2 minute job to integrate it, you just add a script to your page or in my case to the layout.master (ASP.NET Master Page) file in my mojoPortal skin like this:

and thats all there is to it. Any page that has links to mp3 files now autmatically have little play buttons next to them.

Click the image above or visit this link to see it on my site: http://www.joeaudette.com/therealitysaladband.aspx

If you click a play button the player comes up at the bottom of the screen and has a playlist of all the mp3s linked on the page.

Pretty cool and so easy a caveman could do it.

SubSonic - All Your Databases Are Belong To Us

2008-03-05T13:51:00Z

Cross posted from mojoPortal.com

In the week prior to my vacation I had started working with SubSonic to see if it could be useful in mojoPortal since it has support for a number of databases, I figured it could reduce the work of supporting all these different dbs.

SubSonic is basically a toolkit for interogating databases for their schema and has the ability to generate db specific sql statements for common tasks. It also has a code generation feature so it can generate .NET classes based on database tables. It can be used as an OR mapper, that is, you could use the generated classes as your business objects, you could either inherit from them or use partial classes to bolt on custom functionality on top of what was generated by SubSonic. But for people like me who just never bought into the whole OR mapper thing, the generated classes can just be thought of as data objects that abstract the database table. It can return standard data in the form of IDataReader which is what the mojoPortal business objects like to consume and allows using SubSonic without having any particular dependency on SubSonic in my business classes.

It comes with providers for MS SQL, Oracle, MySql and SQLite and there were some other partially complete providers that I found in the wild. So my plan was, for proof of concept, to take a simple feature like the links module and try to re-implement it for all the dbs by using SubSonic. The short story is, yes I got it working for all 5 of the currently supported databases in mojoPortal. I re-implemented a new SQLite provider using Mono.Data.Sqlite which I already knew works both on Windows and on Linux/Mono. I found a postgresql provider here (thanks to Justin Greene and Maurício Machado) that was usable with a little bit of work. I also found a starter implementation for Firebird Sql (thanks to Ricardo García) that I was able to complete and get working.

I've since gone on to implement the data layer for the WebStore feature for MySql, mostly using SubSonic. And the things that did use SubSonic are completely re-usable for the other data layers so the bulk of the work is already done for implementing the web store for postgre sql and Firebird.

SubSonic also comes with a thing called the scaffold page which is basically a web page that allows managing data in all of the tables in your database. Just drop it in and it works. I've modified the one in mojoPortal a little for various little issues I encountered and also to add security checks to control access to the page.

Since the code templates used by SubSonic are basically .aspx pages, I got the idea of making a browser based gui for code generation. I implemented that today and got the initial proof of concept done in about 4 hours of playing around. So at the moment its kind of like a poor man's Codesmith in the browser.

At any rate, I made a quick tutorial video about use of SubSonic in mojoPortal, sort of a developers introduction to it. Its pretty cool stuff so I hope you'll have a look.

An Intoduction to SubSonic as Used in mojoPortal

Cross Platform .NET Development with Mono and MySQL

2008-01-28T17:05:00Z

Just got confirmation that I will be co-presenting with Joseph Hill at the MySQL Conference and Expo. The session is titled Cross Platform .NET Development with Mono and MySQL.

"This session provides an introduction to application development with Mono and MySQL, and will discuss the current state of Mono, including its support for databases through ADO.NET and LINQ. We will also take a look at several tools that can be leveraged to ease migration of applications to Mono and MySQL, and explore how one open source ASP.NET application provides support for Mono and MySQL."

I'm very excited about this conference and the opprotunity to talk about mojoPortal, Mono, and MySQL. I've known Joseph through correspondence and his involvement with the Mono community since 2003 so I'm looking forward to finally meeting him in person. He's recently joined Novell as the Product Manager for Mono which I think bodes very well for the Mono Project.

In addition to co-presenting this session I'll be manning the mojoPortal booth. I've still got a few available entrance passes for anyone interested in attending and willing to help man the booth. We have one session pass to share between the 4 entrance passes so we'll have to take turns covering the booth and going to sessions. Let me know if you're interested and are able to arrange your own travel to the event.

hello weblogs.asp.net!

2008-01-25T12:32:00Z

Huge thanks to Joe Stagner and anyone else involved for opening up this service to the community! I think its a great idea. I subscribed to the main feed and am already enjoying reading some good posts from folks I might not otherwise have discovered. I'm very happy to have the opportunity to participate in this community.

My name is Joe Audette and I've been doing web development since around late 1996 or early 1997 having started out in Classic ASP and moved to .NET as soon as it was out. I'm the founder and primary developer of mojoPortal, an open source web site framework and content management system written in C#. I also have a blog on that site and I have one at JoeAudette.com, so I'll probably be cross posting things here to some extent from my other blogs. I'm also a musician so if you're interested you can hear me play at http://www.myspace.com/sloppyjoeblues. I play acoustic blues in the styles of the pre-war blues masters like Big Bill Broonzy, Robert Johnson, and Blind Boy Fuller.

If you haven't heard of mojoPortal yet, I hope you'll take a look. Its similar in concept to the more well known DotNetNuke, and was also born of the same IBuySpy Portal heritage. Back around 2002-2003 I was using Rainbow Portal (also of IBuySpy heritage) for my web site and contributed the Blog feature to that project. Then as I began learning about the Mono Project, the idea of being able to build cross platform applications using .NET was very exciting for me. I found that Joseph Hill had ported the IBuySpy Portal and some other ASP.NET projects to run on Mono. I say ported but really it was just fixing some things to keep it platform neutral. Using Path.DirectorySeparatorChar instead of hard coded strings and awareness of case sensitivity in urls and paths are really the main issues that had to be fixed. So I began looking into porting Rainbow Portal to run on Mono but I also wanted to support other databases. After studying it I felt that due to the way Rainbow was organized it was going to take major architectural changes to be able to use other databases. So I decided to go back to the IBuySpy drawing board and start from scratch following basic rules:

the web code will never talk directly to the database
business objects would not have strong references to any database but would instead consume only generic data objects like IDataReader
the data layer would be abstracted away from the business code so it could be interchanged without touching the business logic if the API were implemented for another database.

So in the fall of 2004 I released the first version of mojoPortal, named after my dog mojo. It supported MS SQL or MySQL and it worked on Mono. Since then the project has grown steadily in features and popularity and it now supports 5 different databases, MS SQL, MySQL, PostgreSQL, Firebird Sql, and SQLite.

For the first several years I was working on mojoPortal in my spare time (some would say obsessively). Then in late 2006 I decided to follow my dream and try to make a living doing consulting around mojoPortal and formed my own company, Source Tree Solutions, LLC. My business model would be to keep improving mojoPortal to keep the popularity rising and hopefully generate consulting engagements from those who needed help with custom features that could integrate into their mojoPortal sites. It was a scary leap, but enjoying what I work on is very important to me so I went for it. I didn't make anywhere near as much in my first year as I made working for other companies but I did make enough to get by and that was my main goal for the first year. I invested more free time (as in not billable) than ever into mojoPortal over the year but was very happy doing it and feel like the product is really shaping up. My efforts have seemed rewarded by growth in interest in the project. Significant features like Polls and Surveys were contributed by the community this year and resource files have been translated into 12 languages now.

The project won "Best Other Open Source Content Management System" in the 2007 Packt Publishing CMS Awards.

We've also been invited to the 2008 MySQL Conference and Expo in Santa Clara, CA in April.

I'm really excited to make my first trip to silicon valley and the opportunity to get more exposure to mojoPortal.

Anyway I promise not to make all my posts here infomercials about mojoPortal. It is something I'm very passionate about and most of my work is involved in it so I will certainly talk about it more, but I plan to make some posts about solving technical problems or cool solutions that are of interest to anyone working with ASP.NET.