Orchard CMS - A Responsive Site From Start To Finish Part 1 - The Introduction

Introduction

So Mr Mayne has been peddling his wares at work again and this time its Orchard.  Thought I would take a look at this one as its got a lot more going for it than the Git source control he recommended.  still trying to figure out why I went from svn integrated into windows and moved to a command line linux box.... maybe next week were gonna move to vi instead of Visual Studio as that's got a load of features that are basically useless and command driven....

Anyways, I have been asked by my bro in law to write his comenius site which is a bunch of connected schools that show of their childrens work.  The requirement is we have a home page which has a bunch of landing pages for different countries who then show off their work for the kids. Sounds great, lets see if we can knock that up in orchard so admins of particular countries can only edit their content and i'm gonna throw a spanner in the works as I also want this to look nice on a mobile device as well as the desktop, so responsive design and mobile first are the order of the day.  I have always been a bit of a sadist as I use windows every day of the week...

As most people will tell you, the movement of mobile first is an ever growing one by the day.  The reason why myself and a lot of others believe in this, is working with a mobile device first makes you concentrate on the important parts of a site first rather than someone doing a hoofing great Photoshop design for a desktop and loading it up with adverts for shoes, PPI insuarance firms and tips on how to get a flat belly (a personal favourite of mine)

Requirements of the Site We are building

To put stuff into perspective, lets talk a little bit about the site we are going to build. Comenius is a site where a school from a selected country shares its children's work with other schools from other countries.  This is pics and a little text about the work that was done.  There is also an events calendar per school and a landing page for each school so they can show a couple of pics, introduce the school etc.

On the administration side, we only want an admin for each country that will be able to edit their content for each country and a general admin that can control the home page.  We have identified the following pages:

• Contacts (all contacts for all schools)
• Logo Competition page (Schools all submit a logo and vote on each others)
• Events Page (all events for all schools)
• Home Page

For each School (each country) we have

• School Landing Page
• Schools Events
• Children's Work in the school

As this is mobile first, lets get down to the nitty gritty and work out the most important parts of the site:

1. Being able to select a countries page and go to that page quickly.
2. getting to parts of the site quickly.
3. getting to events page quickly.

So, we have come up with the following design that will cover 940 and less (by use of media queries, we will do maybe another smaller resolution later)

What's important here is that mobile users can select a country quickly with the dropdown at the top.  Then get to the rest of the site quickly with the links and then see some of the latest work by the children (the piccy is going to be a slider) and finally a list of events coming up in the next month(s).

Setting up a Theme to base our design on

To get started, we are going to use the ThemeMachine theme.  This seems to be the defacto standard theme for starting to build a new theme.  What I want to build here is a responsive design from the ground up, you could take a look at the twitter bootstrap theme as this has a responsive layout already built in and looks pretty tasty.

So the idea is to override the parts of the theme you want to override rather than start from scratch which is one of the aspects I really like about Orchard.  The facility to override the parts, layouts and styles is just marvellous, like all app frameworks, it has some flaws but its the ability to extend Orchard with custom modules is nice n easy.

We'll start by loading up the Code Generation Tools, these tools create the scaffolding for modules, themes etc so you don't have to write all that boiler plate stuff yourself.  So I clicked on the modules tab and then the gallery and search for code generation:

So hit install on this baby and enable the features:

What this gives you is a command line set of tools, so lets generate our theme, spark up a command line and navigate to the bin directory of your website and type 

Orchard

After a brief wait, you can type 

Orchard help commands 

This shows the help for all the code generation tool commands and gives a list of tools as long as the wait at the post office on pension day.  The one we are interested in is :

codegen theme ThemeName /CreateProject:true

So I type in:

codegen theme Comenius /CreateProject:true

Then add an existing project to my visual studio solution and we are good to go... well almost.  Like I said, Orchard is all about overriding so it is worth looking at the ThemeMachine structure to get a good idea about  what views, styles etc.

Under the Theme's directory, we see the views, styles and scripts directory which are pretty self explanatory.  We will get to adding to those later on.  For now, I am going to turn off the "Zones" that we don't need for the Comenius site.  In Orchard, we have Layers, Zones and Widgets;  Zones are portions of the page, e.g. the header, footer, content (Theme machine has 19 predefined ones), widgets sit in zones and layers are the rules to determine the visibility of widgets in the zones e.g. if the user is authenticated, then show widget X.

Out of the 19 zones available to us, we only need the following:

Header, navigation, featured,  content and footer.

Under the themes root part of the project is a file called themes.txt which is a description of the theme and the zones the theme uses.

So my themes.txt file looks like

Name: Comenius

Author: The Orchard Team

Website: http://www.orchardproject.net

Description: Description for the theme

Version: 1.0

Zones: Header, Navigation, Featured, Content, Footer

If you navigate to Orchards admin section and select the widgets page, you will see the zones we don't want disabled.

As you can see, you can select the layers and the widgets that appear in each layer.  Its worth having a play with this turning on and off the widgets in each zone and seeing how it affects the page.  

The Theme Machine, Responsiveness

In the next few tuts we will take each piece of the design i.e. the menu etc and work on the responsiveness of the site.  But just how responsive is the ThemeMachine? before responsive design was starting to get a bit of a lift off, the recommended approach for desktop was to target the most popular browser resolutions and at the time this would of been the 1024 width res which I believe Orchard has been based on as we see a typical 960 minimum pixel width wrapping div :

See we have a hardcoded width of 960px and the same goes for header and navigation.  I understand the ThemeMachine was never intended for mobile so this is perfectly acceptable but we will need to modify this if we are to make this look nice on a smaller device.  We can also confirm this by a simple resizing of the browser and how it behaves:

See the text cutoff? Its a sign we need to do some work.

So in the next tut, I will be starting with a layout and css files then taking parts of the site and working on their responsiveness.  Until next time.....

Quick tip for templates in models.

So were using orchard at work here, reason for the choice:

Mr Mayne works next door to me and hes a contributor and he says its good.
He whines if he doesn't get his way and i'm for an easy life :O)

anyways, quick tip.  We are writing a custom module here, and the driver is not calling a method to get my view model with the edit template is connected to.  REMEMBER THE PLACEMENT INFO FILE.

Otherwise, empty editor screen my friends.

just one to look out for.

Unit test your modelbinders in MVC 3

Having an issue with this at work as the blokes at microsoft decided to depricate the modeltype in mvc 3 and make it settable via metadata.  fortunately, a solution exists that allows unit testing:


            NameValueCollection nvc = new NameValueCollection();
            nvc.Add("formvariable", "formvalue");
            NameValueCollectionValueProvider collection = new NameValueCollectionValueProvider(nvc, null);


            var modelBindingContext = new ModelBindingContext
            {
                ModelName = "",
                ValueProvider = collection,
                ModelMetadata = ModelMetadataProviders.Current.GetMetadataForType(null, typeof(typeofmodelhere))
            };


            typeofmodel mymodel = typeofmodel.create(modelbindingcontext);
            Assert.AreEqual(value, model.x);


            Where the model takes in a modelbindingcontext and pulls out all of the values:


            public class typeofmodel
            { ...
                    public string x {get;set;}


                    public static create(ModelBindingContext context)
                   {
                             x = context.ValueProvider("");

Easy when you know how !

JQuery Mobile and Cordova (phonegap) with multiple Html files

I was caught out with this one myself the other night and monitoring the phonegap google groups, its seems to be a source of confusion for a lot of people. Hopefully this will clear it up, tell your friends, developers, your pet dog and anyone else that may be interested.....

I didn't notice (even though it was emblazened in bold and flashed) that jquery mobile loads its subsequent pages via ajax which was the light bulb moment for myself on why the other pages wont work.  Ok, so i'm a bit slower than your average human.

What this means, is we have all our gubbins in the index html file and then subsequent pages only need the page div and markup in order to render.  Lets have an example (I assuming you have the standard cordova setup here with a www directory and all the pages underneath it)

here's our index.html file

<html>
     <head>
          <!-- include all your css here -->
     </head>

     <body>
          <div datarole="page" id="page1">
                <a href="page2.html">page2</a>
          </div>
     </body>

     //include cordova
     //include jquery
     //do your mobile init here in script if reqd.
     //include jquery mobile

     <script type="text/javascript">
       
          document.addEventListener("deviceready", onDeviceReady, false);
          function onDeviceReady() {
                 //cordova is ready here !
          }

          //jquery mobile
          //bind to the page 2's pageinit function to do stuff on page 2.
          $( '#page2' ).bind( 'pageinit',function(event){
         //do stuff for page 2 (you could put this in an include file)
     });
     </script>

</html>

page2.html

<div data-role="page" id="page2">
    my page 2 markup.
</div>

As we said previously, JQuery mobile will load the next page into the place where the page role is for index.html so, page1 in index.html is replaced with the contents of page2.  All the script code for page  2 goes in where we bind up.  I would eventually move this out into its own js file and include it in index.html.

hope that helps anyone with this issue out there !

DONT PUT . in your service name in wcf (if webhttp)

Talk about utter failure, we had a webhttp wcf service set up the other day and we all scratched our heads trying to figure out why the wsdl validated but no endpoints were being shown.  Thanks to a sharp eye from Nick Mayne here at work he just so happened to notice the service name had periods in it.  Removed those and it worked... sigh.

@model does not exist in current context

quick tip, check you have the razor page specification in the web.config, otherwise you receive the error in the title.  Reason being, you've turned it into webforms !


  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>
  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="MyPageBaseType or razor page">
      <namespaces>
        <clear/>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
        <add namespace="System.Linq"/>
        <add namespace="System.Collections.Generic"/>
        <add namespace="DrFoster.Rtm.Ui.Resources" />
        <add namespace="DrFoster.Common.Extensions" />
        <add namespace="DrFoster.Common.Web.MVC" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

Resource not found 404 in MVC 3 at root level with IIS

Really annoying one this, IIS the other day was giving me the all too familiar 404 rescource not found at the root level when requesting my default path on an MVC 3 site.   If you haven't checked:

See if you can server any page from that address (any html page).  If this throws the same error, check the permissions settings for your site as I did this and it works.  Hope this helps somebody out there !