Joey Robichaud

code and thoughts

SSWC and jQuery Image Rotator on CodePlex

Knowing that we had made a commitment and wanting our efforts to be utilized, we put in some extra hours to get an inital release together. John Tolar emailed us his Social Share Bar widget and some screenshots for inclusion in the project. However, there were a few issues we felt must be resolved before we could release the widgets to the world.

First, the jQuery plugin issue we found on Day 3 of GiveCamp. It took a good bit of trial and error, but David came up with something a little less disgusting than what we had. RegisterScriptInclude had consistently loaded the script references too early in the page, and they were subject the Sitefinity issue linked above. Using the ClientScriptManager’s RegisterStartupScript, however, pushed the script reference to the bottom of page and avoided the redefinition of jQuery. With our scripts now being included once a piece in a fairly sensible location, we closed this issue.

The other two issues were fairly trivial. First, we ensured that the generated HTML elements got unique ids. We had been generating facebookImageRotator, flickrImageRotator, etc., but if you threw two Facebook rotators on the page you’d get a duplicate. We used the user ids, album names, etc. to make it a bit more unique. The last issue was having our widgets include prettyPhoto automatically instead of relying on documentation to guide the user.

We polished up the documentation for Sitefinity developers interested in using the controls in their sites as well as those wanting to contribute to the project. David also started a separate CodePlex for hosting the fully independant jQuery rotator plugin.

Feel free to download the controls and please provide some feedback.

This post originally appeared on The DevStop.

GiveCamp Day 3

So you know how I was saying the rest of our team worked overnight? Yeah. David and I woke up to some huge news! It seems that it had been decided to switch to WordPress, although John reassured us that our efforts would not be in vain. He proposed packaging our widgets into an open source contribution to the Sitefinity community. These widgets could be used in future GiveCamp projects to help many more charities, but first they would need some love. (First, we fueled up at IHOP with Josh and Bryan. It was great to hang out a bit and share war stories, since we didn’t get to do that much at the event itself.)

We decided that the rest of our day would be devoted to cleaning up code and writing documentation. We started by pulling out a lot of shared code into a helper class used by the rotator widgets. The next task was to refactor our inline JavaScript to be a jQuery plugin. We would invoke the imageRotator method on the containing element, passing in the image list and rotation interval.

Speaking of plugins, it was this that lead us to discover David’s issue with prettyPhoto. It seems that Sitefinity can trip you up when loading your script references. Our temporary solution was to embed the script references in the widgets themselves. The obvious issue is that the generated HTML would have several duplicate references scattered throughout the body. We’ll discuss a slightly more elegant solution in an upcoming post.

Our project also needed a home. We decided on using CodePlex to host the widgets. I created the SSWC project and started working on documentation. Time was short due to the upcoming wrap-up where the fruits of the weekend would be displayed.  We would have to put the finishing touches on our project another day. We’ll discuss this in an upcoming post.

During the wrap-up, it was great to see how all the teams pulled together to produce effective solutions for these worthy organizations.

Give Camp Birmingham | Promo from Hampton Road Studios on Vimeo.

This post originally appeared on The DevStop.

GiveCamp Day 2

After a refreshing 6 hours of sleep, we met the following morning!

The first task we had before us was to implement a simple widget to learn the Sitefinity APIs. For the sake of tradition, we implemented a ‘Hello World’ widget which simply displayed a configurable message in a tag. Using one of their included widgets as a starting point, it did not take long until we had our widget put together. John shot us a very helpful PDF that included the instructions to register the widget with our local Sitefinity instance, and we were off running!

Several of the widgets that we needed to implement were image rotating controls. The first of the Social Widgets to be implemented was a Facebook image rotator. Since we saw a lot of potential overlap, we worked on this widget together so that we could both have input on the pattern we’d follow for the others.

The first step to implementing the Facebook widget was to pull a list of images from the Facebook API. We registered a Facebook application with Joy’s account and added the application to the Spirit of Hope Youth Ranch on Facebook page. After trying various FBML and FQL queries, we discovered the [Facebook C# SDK](http://facebooksdk.codeplex.com/]. After a little tweaking, we were able to pull in recent images from an account with an option to limit it to a specific album.

With this out of the way, we focused on implementing the image rotation. While David had been focusing on implementing the Facebook query, I had been writing a little jQuery in Notepad++. I shared this with David, and we soon had a working image rotator.

Mixing these two pieces together got us most of the functionality. All that remained was adding a lightbox when the image was clicked. A quick Google search later and we had decided that prettyPhoto had the right mix of style and functionality.

Now that we had the first component mostly put together, I proceeded to implement a Flickr rotator while David incorporated the prettyPhoto plugin. I was much more successful than David (through no fault of his own – stay tuned for Day 3 to find out what happened!). I was able to reuse the query from another baked-in Flickr widget for pulling images from a user account. The most difficult part was determining the user id to use in the query. Luckily there is a handy site for getting the user id from a Flickr user name.

With Dave seemingly at a dead end trying to get jQuery plugins working with Sitefinity, I proceeded to knockout the YouTube video rotator widget. By this point the host facility was shutting down, but the other members of our team had plans to work overnight. They were battling some layout issues getting Sitefinity to play nice with Brant’s design. We felt we had a firm grasp on our task, so we headed home to get some much needed shut eye.

Also, I fell on some wickedly icy stairs, and David’s car battery died. Bryan and Josh, who were crashing at Dave’s place, made a great rescue team. Thanks, guys!

This post originally appeared on The DevStop.

GiveCamp Day 1

This was the first year that Birmingham hosted a satellite event for the national GiveCamp. For those who don’t know, GiveCamp is a event where developers and designers come together to donate their efforts to charity and non-profit organizations. Wanting to help the community and being located so close, we thought this was the perfect opportunity to share our skills.

The GiveCamp Birmingham was organized by Leverett Powell, and three charities participated. Spirit of Hope Youth Ranch brings children with abused pasts together with abused horses. My Father’s House takes in children who have outgrown foster care. Lastly, Innovation Depot a non-profit business incubator.

Originally we had planned to form a team with a couple of coworkers so that we could jam together. However, because of inclement weather the previous week, developer turnout was low and we had to split up. The charity we ended up working with was Spirit of Hope Youth Ranch.

The first night was used for team introductions and requirements gathering. Our team was rounded out by John Tolar who acted as Interim PM for the first night, Litepack on Google Profiles as lead designer, and Rebecca Lynn Morrow as SEO Guru.

SOHYR was represented by Joy O’Neal. She did a great job expressing what she was looking for in the new website. We spent a good deal of time discussing the site map and social integration. Joy was very well prepared with images, videos and logos to use in the design.

John Tolar turned us on to Sitefinity, a product that was generously donated by Telerik for all GiveCamp charities to use in their projects. Version 4.0 had just been released and John had experience building on previous versions of the platform. It showed strong layout and widgeting capabilities.

To round the social experience of the website, a list of missing widgets was compiled for development during the rest of the weekend. It was decided that David and I would focus on implementing these widgets. Brant would be in charge of the site layout and CSS while John would be responsible for applying that design to a Sitefinity instance. John would also contribute to the social widgets as time allowed. Rebecca would help Joy with rewording pages for SEO.

Everyone retired enthusiastically anticipating the work to come.

This post originally appeared on The DevStop.