I was recently reading the documentation for The jQuery UI CSS Framework, and it got me thinking about making it possible to style mojoPortal content instances using it. Then a user asked in the forums about being able to skin mojoPortal using jQueryUI ThemeRoller, and that got me thinking further, what if I could create a mojoPortal skin where the whole site is a jQuery UI widget and could be styled by jQuery UI themes? That would be kind of cool, wouldn't it? 

It doesn't take much to make a feature instance style as a jQuery Widget, skeleton markup like this will do the trick since the jQuery UI CSS is already included in the page:

<div class="ui-helper-reset ui-widget ">
 <h2 class="ui-widget-header ui-corner-top">Heading goes here</h2>
 <div class="ui-widget-content ui-corner-bottom">
  <p>
   This is styled with jQuery UI!
  </p>
 </div>
</div>

So I just needed a way to make mojoPortal features render that kind of skeleton and it wasn't difficult to achieve given that I had already implemented a solution for rendering the special markup needed for Artisteer designs. I just added some more options to the rendering that can be configured from the theme.skin file in a mojoPortal skin. It took me maybe 10 minutes and I had it working for proof of concept. It was much easier than implementing support for Artisteer because we already had the needed markup structure, all we really needed was an option to render the CSS class names for jQueryUI. So I made a new skin and modified the layout.master to use the same widget skeleton for the site as a whole so that the jQuery UI theme pretty much controls the look of the site. There isn't yet any themeable menu for jQuery UI, so I used the jQuery Superfish menu that we were already using in a few other skins and used neutral colors and color inheritance to make it look reasonably well with all of the jQueryUI themes, though it looks better with some than others. It would be easy for users to copy this skin and change the menu colors to match better with a specific theme. The jQuery UI CSS framework doesn't have style for all purposes and features, though, so additional CSS is needed for some features, and again I tried to make it use neutral colors so it would not clash with any of the jQuery UI themes.

I'm a ThemeRoller baby, bound to roll all over you...

ThemeRoller makes me think of James Taylor singing with a lisp! :-D

Once I had the new skin basically working it begged for a theme switcher so I could see the magic instantly of changing the jQuery UI theme. There are about 25 or so standard jQuery UI themes that can be loaded from the Google CDN (Content Delivery Network) which is where we load jQuery and jQuery UI javascript and CSS from by default. You can also make your own custom jQuery UI themes with ThemeRoller, but if you do that then you need to host the jQuery and jQuery UI files locally as documented here.

You can control the list of available themes in the theme switcher from a config setting, that you can override in user.config, and you can set the default theme in the layout.master file of the skin like this:
<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="eggplant" UseIconsForAdminLinks="false" />

The theme switcher can be removed from the layout.master or disabled or limited by roles if you don't want a user to be able to change the theme. It is basically setting a cookie based on the dropdown choice, and then setting the jQuery UI theme based on the cookie.

Maybe it is too widgety looking for most sites, but it might be useful for some kinds of sites or web applications built on mojoPortal. You could easily add a div above and/or below the menu to make room for a banner ad or some other additional content.

Anyway, it was easy and fun to implement. It is in the source code repository now but requires a build of the latest source code to work. It will be included in the next release. You can try it now on demo.mojoportal.com by going to Administration > Site Settings and choose the jqueryui-1 skin. 

So basically the new skin jqueryui-1 is like many skins in one since there are many jQueryUI themes available and you can roll your own with ThemeRoller.

Here are a few screenshots showing a few of the jQueryUI themes.

So, look for this in the next release or if you are a developer you can get the latest code from the repository. I think this gives us one more useful approach to skinning mojoPortal and hope you find it useful.

Follow us on twitter or become a fan on Facebook

This is just a quick post in follow up to my previous post SQL Server Compact 4.0 and mojoPortal, to provide some updated information. We recently released mojoPortal 2.3.4.8, and I've updated the package for SQL CE recently to contain migration scripts so that it is easy to migrate to SQL Server.

I've also created some new documentation.

• Using SQL CE with mojoPortal
• Using WebMatrix to run the SQL CE Version of mojoPortal
• Using WebMatrix to Migrate mojoPortal from SQL CE to SQL Server
• Using WebMatrix to Install mojoPortal from the Web App Gallery

WebMatrix includes IIS Express web server which is much easier to use on your local machine than IIS but has all the features of IIS. Once you install WebMatrix, you can right click a folder in Windows Explorer and choose "Open as a Web Site with Microsoft WebMatrix". So you can just unzip the mojoPortal package and right click the wwwroot folder to launch a mojoPortal site on your local machine. If using SQL CE you don't need to even need to configure a database, it just works, but for other mojoPortal packages you would have to set the connection string for the database. 

One could also use WebMatrix for light mojoPortal feature development, perhaps at some point I will make an article showing how to use the mojoPortal Hello World examples with WebMatrix. While WebMatrix is not designed to scratch the same itch as Visual Studio, it is a useful tool even for folks like me who really live in Visual Studio all day long. I encourage you to check it out, especially if you are interested in working with the SQL CE version of mojoPortal.

Follow us on twitter or become a fan on Facebook

I'm happy to announce the availability of new packages of Form Wizard Pro and Event Calendar Pro, that include support for SQL CE. Existing customers can download the latest package from their order history under the My Account link after signing in to the site.

I've also updated the SQL CE package for mojoPortal on Codeplex to fix a couple of bugs reported recently, and I've created documentation about using SQL CE with mojoPortal. In the near future I will also create documentation to explain how to migrate a mojoPortal installation from SQL CE to SQL Server using WebMatrix.

Follow us on twitter or become a fan on Facebook

Just a quick post to give a heads up to folks working with mojoPortal from the source code repository that the latest code in the repository has some significant improvements to the Visual Studio projects and solutions and I have updated some relevant documentation but wanted to bring it to your attention.

You can now use the Visual Studio Publish feature to package mojoPortal as described in the updated article Packaging and Deployment. I'm very happy about this because it has historically been one of those things that developers who are new to mojoPortal always stumbled with but prior to VS 2010 there was not an easy way to solve it. We've used the free UnleashIt tool to package mojoPortal since 2004 as we progressed from Visual Studio 2003 through VS 2005 and VS 2008, but improvements to Visual Studio 2010 and MsBuild made it possible to solve this problem easily so going forward will be able use Visual Studio 2010.

Also much nicer now for those who work with data layers other than MS SQL, you no longer have to change project references to use a different data layer. Now it is as easy as choosing the build configuration. I updated the old document "Setting the Data Layer in Visual Studio". I really love this since I'm always going back and forth working on different data layers.

I think the out of the box experience with working with the source code in Visual Studio is significantly improved.

Follow us on twitter or become a fan on Facebook

I'm happy to announce the release of mojoPortal 2.3.4.8. 

Data Layer Consolidation

The primary focus of this release is consolidating our support for SqlAzure into our main MS SQL data layer so that we don't need to maintain a separate data layer for SqlAzure. For new installations that use SqlAzure, you should just use the package for MS SQL. If you have an existing installation using SqlAzure, you should follow these steps:

1. Upgrade using the mojoportal-2-3-4-8-sqlazure-net35-deploymentfiles.zip or mojoportal-2-3-4-8-sqlazure-net40-deploymentfiles.zip depending on whether you are using .NET 3.5 or 4.0
2. Copy your connection string from the SqlAzureConnectionString to the MSSQLConnectionString
3. Download mojoportal-2-3-4-8-mssql-net35-deploymentfiles.zip or mojoportal-2-3-4-8-mssql-net40-deploymentfiles.zip again depending on your .NET version.
4. Extract the files and copy the mojoPortal.Data.dll, mojoPortal.Features.Data.dll, and WebStore.Data.dll from the MS SQL package and replace them in the /bin folder your installation
5. Going forward we will no longer have separate packages for SqlAzure, so for future upgrades you will just use the MS SQL package

Important - We no longer support MS SQL 2000. Our MS SQL Data layer is compatible with SQL 2005/2008/SqlAzure

As I mentioned in my previous post, we also now have a package for SQL CE. I encourage you to give it a try. It would be really cool if someone out there could do some load testing of mojoPortal using SQL CE and then using MS SQL to get an idea of how well SQL CE can handle traffic. I would not expect it to do as well as MS SQL but I think it might hold up better than one might expect. My guess is it can handle more traffic than the Sqlite version of mojoPortal because Sqlite only supports 1 connection and SQL CE does have a connection pool and supports more connections.

In the near future I will be looking into using WebMatrix which is the tool that can be used to migrate from SQL CE to SQL Server. WebMatrix could also be used for light mojoPortal feature development for those who find Visual Studio to be a little scary. WebMatrix is also a pretty neat tool for trying applications from the Web App Gallery and it includes IIS Express.

New Date Picker

This release also includes a new jQuery DatePicker. You could still use the old one if you like it better by changing the default DataPickerProvider in mojoDatePicker.config in the root of the site.

I also added jQuery UI styling to the buttons in most of the included skins (except Artisteer skins since they already have button style). You can enable it in a custom skin from the theme.skin file by adding this:

<portal:mojoButton runat="server" UsejQueryButton="true" />

A Few Bug Fixes

• fixed a bug where using Live Writer an error would happen when trying to open existing posts
• fixed a bug in the blog where the rating was not shown even on the detail page if using excerpts
• fixed a bug in the blog where the default comment allowed days was being ignored
• fixed a bug in Feed Manager where the aggregate feed link did not work in child sites
• fixed a few bugs in the Sqlite data layer where the paging logic was not correct

Updated Italian resources from Diego Mora

Updated Dutch translation from Bouke Bisschop

As always, it is a good idea to backup your site and database before upgrading.

Follow us on twitter or become a fan on Facebook