Posts in Category: Development

Some New Training Videos

Just a quick post to let people know about new training videos available. I am making it my focus for this month to produce a lot more tutorials to answer common questions and especially to help developers get started with custom development. I still have a ways to go with the developer tutorials, but thought I would go ahead an post links to videos I've completed so far.

Installation and Configuration

Developer Series

I've begun a series of clips where I plan to implement a simple Guestbook feature as a way to cover important concepts. 

  1. Getting the code from svn trunk
  2. Introduction to the Source Code Part 1
  3. Introduction to the Source Code Part 2
  4. Creating a Custom Solution and Project
  5. Hello Web Part 1
  6. Hello Web Part 2
  7. Guestbook first steps
  8. Concepts Part 1
  9. Concepts Part 2
  10. Debugging in IIS
  11. Create a Table in the db using the setup system
  12. Create stored procedures with an upgrade script using the setup system
  13. Generating a data access class
  14. Generate the business layer
  15. First Guestbook submission achieved
  16. Form Layout 
  17. Form Layout Part 2 and data binding

Just getting started so far, lots more clips to produce to complete the Guestbook tutorial. I'm planning to cover development of business and data access classes and how to add supporting pages to your feature as well as how to make your feature searchable. I'm working only from an outline not a script, so the videos are mostly improvised and I stumble on a few things here and there, but rather than edit them out, I think it is helpful since you may also stumble a little bit, so learning to work through the stumbles is part of the process.

Each clip will be less than 10 minutes in order to fit them on YouTube, but they are in high definition so the video quality should be pretty decent.

UPDATE 2010-03-08 -added items 8 - 17 to the list above.

 

Follow us on twitter or become a fan on Facebook

follow us on twitter become a fan on facebook

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

Web Chat Using Live Messenger

Several people have asked about a chat feature for mojoPortal in the past and I've had my eye on a few ways to implement chat but have mainly been too busy working on other things to try and tackle it because I viewed it as a complex feature to implement. But recently I found out about the Live Messenger Web Toolkit and that seemed to lower the bar so that it was pretty mch low hanging fruit to implement chat. There are actually quite a few things developing in Microsoft Live Services that are very interesting. Much of it was announced at Mix 09, I still haven't watched all the videos but I plan to watch them soon and learn about tha various scenarios that can be implemented. But, so far I have implemented chat and it will be in the coming release of mojoPortal as a built in feature that can be enabled/disabled.

There will be a new "Live Messenger Chat" feature that you can put on a page, as a supplement to the contact form for example and your web visitors will be able to chat with you no matter whether they have a Live Messenger account or not. You will chat using your desktop Live Messenger and the web control will display your availability and if you are online it will allow web visitors to initiate a chat with you.

In addition to the new "Live Messenger Chat" feature that plugs into the content system, you can also enable your site users to have web chat controls on their profile page so that site users can initiate chat with one another. To receive chats a user will need the Live Messenger desktop software but chats can be initiated by web site visitors directly in the web page with no need for a Live account.

I invite you to try the chat here on mojoPortal.com to help iron out any kinks before the release (which I hope to make on Monday). To enable chat on your mojoPortal user profile, visit the "My Account" page using the link at the top (after you sign in), click the profile tab, then click the link that says "Acquire/Refresh a Live Messenger Permission Token" (ok its mispelled in the screen shot but I will fix that before the release)

aquire live messenger permission link screen shot

You'll note that te checkbox is disabled until you have the token. Once you have the token the checkbox becomes enabled and if you check it ans save, the chat will appear on your public profile page like this:

live messenger web control screenshot

You can see it on my profile here, there are links to member profiles also on the member list page and in the forums.

Now I'm not really big on using chat myself because I'm very busy and generally don't like things popping up and interupting me, so don't expect me to be generally available for chat. I built this feature mainly for others (who have requested it) to use. I'm not going to be using it for support, the forums are much better for that because they are searchable. But it would be great if people could test this out and give some feedback in the forums if you find any problems or have suggestions for improvements. I know lots of you out there use chat all the time whereas I hardly ever use it, so your feedback is important. For me its just a really cool feature that I'll hardly ever use ;-) so I'm not the best judge of it.

 

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

New Color Picker Landed in svn

I've recently been working on some soon to be released enhancements to my Event Calendar Pro product. One of the requested features was the ability to set the colors for each event so they can be colored differently on the Month View. In order to implement this I needed a color picker, but rather than build the color picker into the Event Calendar Pro product, I decided to implement it in the core of mojoPortal so it can be used in other features and so other developers can use it in their own features. I implemented it as a UserControl that implements ISettingControl, a simple interface that makes it possible to use the control in Module Settings or in custom user profiles. So for example if you wanted to have a Favorite Color Property on the user profile page you could add this to your profile.config file:

<add name="FavoriteColor"
type=""
iSettingControlSrc="~/Controls/ColorSetting.ascx"
labelResourceKey="Favorite Color"
defaultValue="#34983E"
/>

and the result looks like this:

Color Picker Screen shot

The color picker javascript is using the YUI Color Picker via a custom implementation from Dynamic Drive that I enhanced further to add localization and pre-selection of the color in the picker.

I hope to release the new version of Event Calendar Pro in the next few days. In order to do that I will also be releasing a new version of mojoPortal with the color picker because the Event Calendar Pro upgrade depends on this feature.

UPDATE 8:45am EST

I've deployed the latest version of Event Calendar Pro to the demo site.

Here is a list of the improvements:

  1. Ability to specify the end date for recurring events.
  2. Will Pay option for ticket sales. There is a setting on each event where you can check a checkbox to allow users to register for the event by clicking a button that says "I Will Pay Later". You can further control this from the module settings (gear icon) where there is a new setting so you can specify roles that are allowed to use the Will Pay button. That way you can put your trusted customers into a role and only allow them to register with this button, other users will not see the "I Will Pay Later" button, they will have to use the normal payment methods. button.
  3. Color coding of events in Month View. You can now sepcify foreground, background and border colors for events to make them have different colors in Month View.
  4. Ability to specify the text for event registration link.
  5. Location alias - for use when you want the name of the location to be different than what you need to enter for the google map to work.
  6. Meta Keywords and description per event
  7. Map settings per event instead of global

Any testing or feedback much appreciated, I'd like to release it soon. It will be a free upgrade for existing customers who have purchased it already.

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

Silverlight + Google Gears = Awesome! at least in Firefox

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:

silverlight google gears query tool ascreenshot

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);

        }

    }
}

Update 2008-12-23

I have narrowed down the problem with IE and use of Google Gears in Silverlight. All the Gears functionality works except for 2 methods. The 2 methods broken in IE are GearsResultSet.GetFieldName(int fieldIndex) and GearsResultSet.GetFieldValue(int fieldIndex). I can get the field value if I know the field name ahead of time using GearsResultSet.GetFieldValue(string fieldName), so for most applications I should still be able to use Gears even in IE because my field names will be known ahead of time. Unfortunately for the query tool we have no way of knowing what fields will be in the result of ad hoc queries. So the query tool will only be useful in Firefox, but for other features I should be able to use gears without any trouble and this is very good news. I also have got a few web services talking to Silverlight, so I'm able to authenticate and get user roles. These services are actually built into the framework so I didn't have to implement them. I am working on some RESTful web services using the WCF REST Starter Kit.
 

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

mojoPortal Gets A Little Microformat Oomph

Just integrated Oomph, a javascript Microformat Overlay into mojoPortal. You can watch the PDC presentation about Oomph from this page https://sessions.microsoftpdc.com/public/timeline.aspx, click Day 3 then click Oomph and you can see the video links at the bottom.

Microformats are a way of marking up information in html using some agreed upon conventions that add semantic meaning to the markup. For example hcard, is a format for marking up contact information. What Oomph does is recognize the hcards and hcalendar items in your page and creates a javascript widget in the top left of the page that gives you some neat options for adding contact to your Yahoo Contacts, adding events to your googe calendar, showing event and contact locations on a map using Virtual Earth, etc. Pretty neat stuff. You can see it in action on our consulting list, where I've marked up the content using hcard format. The list view feature of our Event Calendar Pro add on product also renders in hcalendar format so events can show up in the oomph widget. I've shrunk my browser window down a bit to make a screen shot of the widget below but for best impressions try it yourself.

oomph screen shot

Other Developments

I always like to dogfood new features here on mojoPortal.com to work out any issues, so this site is runnning the very latest code from my sandbox.

At the moment I'm also testing some performance optimizations that I just integrated into mojoPortal. As we start to do more ajaxy javascript things in mojoPortal we find ourselves adding a lot of links to javascript files which adds additional http requests to our page. So I've integrated some work by Omar Al Zabir, that he has made available in the very cool Dropthings project. This combines most of our javascript files into one request and moves the javascript to the bottom of the page to improve performance.

A similar issue exists for css files in the skin. We like to organize css into separate files based on logical things from a development perspective, but from a performance perspective we'd like to have only one link to an external css file. I implemented a solution for css files based on some of the techniques I learned from Omar's work. It combines all the css files and minifies them as well using Michael Ash's C# implementation of the YUI Compressor. So far it seems to be working great and I haven't noticed any side effects or problems.

These new feature is only in my sandbox at the moment but will be in svn trunk within a few days.

UPDATE 2008-11-03

Just discovered that moving the javascript to the bottom broke usage of NeatHtml in the forums. Luckily I have Web.config setting to disable the javascript combiner so I have fixed it on this site while I investigate a solution. There is an option that Omar implemented to add a "pin" attribute to any script that you don't want to combine or move to the bottom. The problem is I don't believe that is a valid attribute and it will break xhtml validation to use it, so I will have to find another solution.

UPDATE 2008-11-04

I managed to get a solution to pin some scripts without breaking xhtml validation, so now on this site I'm testing combined scripts again and so far so good.

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.