Archive for July, 2011

Overlapping arrow style menu, and CSS sprite sheets.

Bit of a weird post I guess… I was explaining to a friend how to implement a design they had in html/css and nocked together a reeeeally basic example, and figured I would post it incase it’s of any use to anyone else starting out in html/css. It’s a basic navigation bar where each button is shaped like an arrow, so the buttons all kind of overlap. There is an icon in each, which changes on mouse over, along with the background image of the button. Click the link below and check out the source- the sprite sheet can be viewed here http://codeblog.shawson.co.uk/storage/arrow-nav-bar-sprite-sheet/Sprite-sheet.png

The main example is here;
http://codeblog.shawson.co.uk/storage/arrow-nav-bar-sprite-sheet/

No Comments

Adding minification and obfuscation of your Javascript and CSS to your ASP.net build process using Yahoo YUI Compressor

I’ve just finished integrating Yahoo’s YUI Compressor into the MSBuild process for a new web probject I’m working on, and I thought I would document the process as there doesn;t seem to be a start to finish guide about anywhere.

To start with, let me just explain the structure I use for new Solutions;

C:\_Dev\MyNewWebsite\
C:\_Dev\MyNewWebsite\Artwork\
C:\_Dev\MyNewWebsite\BuildTools\
C:\_Dev\MyNewWebsite\Docs\
C:\_Dev\MyNewWebsite\Source\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.sln
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Controls\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Images\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Scripts\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Services\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Styles\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\MyNewWebsiteWeb.csproj
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Entities\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Entities\MyNewWebsiteEntities.csproj
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Interfaces\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Interfaces\MyNewWebsiteInterfaces.csproj
C:\_Dev\MyNewWebsite\ThirdParty\

Firstly, download the dot net port of the YUI compressor from codeplex. I then extracted this into a new folder in the BuildTools folder. (there should be 2 dll files and one txt licence file.)

I then created a new MSBuild file called build-minify.xml, in the MyNewWebsite.Web project folder. That file looks like this;

<?xml version="1.0" encoding="utf-8"?>
<!-- http://yuicompressor.codeplex.com/wikipage?title=Sample%20MSBuild.xml%20File&amp;amp;amp;amp;amp;ProjectName=yuicompressor -->
<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <UsingTask
         TaskName="CompressorTask"
         AssemblyFile="..\..\BuildTools\Yahoo.Yui.Compressor-v1.5.0.0\Yahoo.Yui.Compressor.dll" />

  <ItemGroup>
    <CssFiles Include="$(SourceLocation)Styles\Fonts.css"/>
    <CssFiles Include="$(SourceLocation)Styles\Site.css"/>

    <CssIE Include="$(SourceLocation)Styles\IE.css"/>
    <CssIE6 Include="$(SourceLocation)Styles\IE6.css"/>

    <JsAll Include="$(SourceLocation)Scripts\jquery-1.6.1.min.js" />
    <JsAll Include="$(SourceLocation)Scripts\jquery-ui-1.8.14.custom.min.js" />
    <JsAll Include="$(SourceLocation)Scripts\json2.js" />
    <JsAll Include="$(SourceLocation)Scripts\jqModal-r14.js" />
    <JsAll Include="$(SourceLocation)Scripts\jquery.tipsy.js" />
    <JsAll Include="$(SourceLocation)Scripts\jquery.scrollTo-1.4.2.min.js" />
    <JsAll Include="$(SourceLocation)Scripts\jquery.localscroll-1.2.7.min.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-alert.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-validation.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-rollovers.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-custom-accordion.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-vehicle-lookup.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-sandbox.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-finance-calculator.js" />
    <JsAll Include="$(SourceLocation)Scripts\chinook-apply-now.js" />
    
  </ItemGroup>

  <Target Name="Minimize">
    <CompressorTask
              CssFiles="@(CssFiles)"
              DeleteCssFiles="false"
              CssOutputFile="Styles/Site.rel.css"
              CssCompressionType="YuiStockCompression"
              DisableOptimizations="Nope"
              EncodingType="Default"
              LineBreakPosition="-1"
              LoggingType="ALittleBit"
              ThreadCulture="en-gb"
              IsEvalIgnored="false"
            />

    <CompressorTask
              CssFiles="@(CssIE)"
              DeleteCssFiles="false"
              CssOutputFile="Styles/IE.rel.css"
              CssCompressionType="YuiStockCompression"
              DisableOptimizations="Nope"
              EncodingType="Default"
              LineBreakPosition="-1"
              LoggingType="ALittleBit"
              ThreadCulture="en-gb"
              IsEvalIgnored="false"
            />

    <CompressorTask
              CssFiles="@(CssIE6)"
              DeleteCssFiles="false"
              CssOutputFile="Styles/IE6.rel.css"
              CssCompressionType="YuiStockCompression"
              DisableOptimizations="Nope"
              EncodingType="Default"
              LineBreakPosition="-1"
              LoggingType="ALittleBit"
              ThreadCulture="en-gb"
              IsEvalIgnored="false"
            />
    
    <CompressorTask
      JavaScriptFiles="@(JsAll)"
      ObfuscateJavaScript="true"
      PreserveAllSemicolons="true"
      DisableOptimizations="false"
      EncodingType="Default"
      DeleteJavaScriptFiles="false"
      LineBreakPosition="-1"
      JavaScriptOutputFile="Scripts/chinook.rel.js"
      LoggingType="ALittleBit"
      ThreadCulture="en-gb"
      IsEvalIgnored="false"
		/>
  </Target>
</Project>

You can create whatever ItemGroups you’d like- then just create a compressor task for each. For a rundown of the settings, check out the link in the comment at the top of the XML there. In the above file I had decided to compress all of my Javascript into a single file called chinook.rel.js, and my fonts and site css file rolled into one file, keeping the ie6 css separate, but still minifying it down.

The next step is to add it to the normal build. I opened the solution in Visual Studio, right clicked my web project and selected properties. Go to “Build Events” and add the following post-build event;

$(MSBuildBinPath)\msbuild.exe  $(ProjectDir)build-minify.xml /target:Minimize

Now you can test it out by building your project. The new minified files are dumped out, in my case to the Scripts folder. Now that the files are there, I need a way of telling my release version of the website to use these instead of the raw, human-readable versions; but I still want to continue using the human-readable versions for development.

To achieve this I use pre-processor directives. These are most commonly seen in the c# code behind files, but can also be used in the aspx files. I added the following lines at the bottom of my master page;

    <% #if (!DEBUG) %>
    <script src="Scripts/chinook.rel.js" type="text/javascript"></script>
    <% #else %>
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>    
    <script src="Scripts/jqModal-r14.js" type="text/javascript"></script>
    <script src="Scripts/chinook-alert.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/chinook-vehicle-lookup.js" type="text/javascript"></script>
    <script src="Scripts/chinook-sandbox.js" type="text/javascript"></script>
    <script src="Scripts/chinook-finance-calculator.js" type="text/javascript"></script>
    <script src="Scripts/jquery.scrollTo-1.4.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.localscroll-1.2.7.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tipsy.js" type="text/javascript"></script>
    <script src="Scripts/json2.js" type="text/javascript"></script>
    <script src="Scripts/chinook-validation.js" type="text/javascript"></script>
    <script src="Scripts/chinook-apply-now.js" type="text/javascript"></script>
    <script src="Scripts/chinook-rollovers.js" type="text/javascript"></script>
    <script type="text/javascript" src="Scripts/chinook-custom-accordion.js"></script>
    <% #endif %>

So if the project is NOT running in debug mode, I import my full chinook.rel.js include which has everything already included, otherwise I manually include all the human readable, separate files.

And that’s pretty much it. Make sure you thoroughly retest your site with your combined java script file, as sometimes minification can cause issues with some code.

2 Comments

Handy article on running IE 6, 7 & 8 alongside each other on Win7 using XP mode

http://www.sitepoint.com/ie6-ie7-ie8-win7-xp-mode/#fig_xmpuser

No Comments

Entity Framework 4.1 Code First (With One to Many relationship) Code Example

A quick piece of code demo’ing a very common/ simple usage scenario- basic one to many with some demo data being seeded into the database; I thought this might be needed as I’ve waded through a LOT of exmaples for various beta versions and different releases of EF, but had little luck actually finding something relevant. The best site I came across was tucked away on the ADO.net team’s blog- Using DbContext in EF 4.1. First– the entities and the database context

    public class Category
    {
        [Key]
        public Guid ID { get; set; }

        public string Title { get; set; }
        public virtual ICollection<Product> Products { get; set; }  
                   //virtual makes this lazily loaded

        public Category()
        {
            this.ID = Guid.NewGuid();
        }
    }

    public class Product
    {
        [Key]
        public Guid ID { get; set; }

        public string Title { get; set; }
        public string Details { get; set; }
        public double Price { get; set; }
        public string ImageFileName { get; set; }

        public DateTime DateAdded { get; set; }

        public virtual Category Category { get; set; }  
                   //virtual makes this lazily loaded

        public Product()
        {
            this.ID = Guid.NewGuid();
        }
    }

    public class MyDBContext: DbContext
    {
        public DbSet<Product> Products { get; set; }
        public DbSet<Category> Categories { get; set; }
    }

Note the use of ICollection on Products in Category, and the use of DbSet in the context. I used a DbSet in lieu of ICollection on the Products entity and found it went mental if I had a Product with no category (something which I wanted to be valid) – swapping it to ICollection fixed this issue (I don’t know enough of the inner workings to explain why)

BAMM! Next for the seeding- add a class like so;

    public class MyDBInitializer : DropCreateDatabaseAlways<MyDBContext>
    {
        protected override void Seed(Entities.ComicolleDB context)
        {
            Category marvel = new Category()
            {
                Title = "Category 1"
            };
            Category dc = new Category()
            {
                Title = "Category 2"
            };

            context.Categories.Add(marvel);
            context.Categories.Add(dc);

            context.Products.Add(new Product()
            {
                Title = "Test1",
                ImageFileName = "image-1.gif",
                Details = "This is a test",
                Price = 4.99,
                DateAdded = DateTime.Now,
                Category = marvel
            });

            context.Products.Add(new Product()
            {
                Title = "Test2",
                ImageFileName = "image-1.gif",
                Details = "This is a test",
                Price = 4.99,
                DateAdded = DateTime.Now,
                Category = dc
            });

            context.Products.Add(new Product()  // no category
            {
                Title = "Test3",
                ImageFileName = "image-1.gif",
                Details = "This is a test",
                Price = 4.99,
                DateAdded = DateTime.Now
            });

            context.SaveChanges();
        }
    }

Then add the following line to the end of your Application_Start() method in global.asax;

Database.SetInitializer<MyDBContext>(new MyDBInitializer());

Voila- you can then go ahead and use your model in whatever applications you see fit- here are some example;

MyDBContext db = new MyDBContext();

// get a category, and make sure the products are loaded
Category the_category = db.Categories.Include("Products")
                           .Where(x => x.Title == "Category 1").SingleOrDefault();

// get all the products for that category
List<Product> some_products = the_category.Products;

// get all the categories (without loading the products)
List<Category> some_categories = db.Categories.ToList();

1 Comment

Netgear ReadyNAS Duo command line shut down utility

So I finished the backup app and compiled it for anyone who wants it- it’s used from the command prompt like so;
ShutdownNASBox -h <hostname> -u <username> -p <password>

eg.

ShutdownNASBox -h backup -u admin -p abc123

If you run the tool with administrator privileges, it will log to the Windows Event Log on the System tab.

You can download it here (note you will need dot net framework 4 installed)

7 Comments

Automatic NAS Box shutdown – How to execute applications on Windows Shutdown (Part 2/2)

In Part 1 we looked at how to figure out what message was being sent from the web management page of my Netgear ReadyNAS Duo network storage box, and then how to replicate that to happy from a c# dot net console application. To finish this off, we now need some way of making that new console app run automatically when I shut down my Windows 7 PC.

I started in the Task Scheduler panel in Control Panel > Administrative Tools.

On the right hand panel you can then select “Create Task…”. From this dialogue you have a number of tabs along the top- the second one along, right after General is “Triggers” – switch to this and then hit the “New…” button which brings up a third window called “New Trigger”.  From the drop down list entitled “Begin the task:” check the selected option from the default “On a schedule” to “On an event”.  So you should now see something similar to this screen shot;

At this point I was kind of stumped- The other options in that “Begin the task:” list were things like “At log on”, “At startup”, “On work station lock” etc – there was no “On Shutdown”!! So I selected “On an event”. This gives you three new options in Settings – Log, Source and Event. From here it was down to taking an educated guess. I knew that shutting down Windows was likly to be logged as a “System” event, so in the first drop down I selected System.

What to choose in the Source drop down was not so clear- so to decide on an event source to use, I opened the Event Viewer, again from Control Panel > Administrative Tools. From the left hand panel, I opened the “Windows Logs” branch, then from within that selected “System”.  These are arranged by time, so it’s just a matter of going back to when you turned your computer on today, then going back a couple more to see the last things your computer logged before turning off when you last used it.

In the end I opted for the event shown in the above screen shot- by reading the description I noticed it mentioned shutting down explorer.exe (a main component in Windows) because of the “power off of computer”, which I figured, with out knowing the in’s and out’s of what this really meant, sounded pretty promising. So from the same window I noted the Source “USER32″ and Event ID “1074″.  Going back to the New Trigger window I found that USER32 did indeed appear in the list, so I selected that and entered 1074 as the event ID.  This is pretty much everything for the trigger, so hit ok, then move on to the Actions tab, and click “New…”

From here it’s pretty easy- the action we want is to “Start a program” then just use the browser button to find the program you want to run. Click OK and return to the General tab.

This final step may not be required, but I did it anyway just to be sure- on the general tab, I changed the radio button at the end and selected “Run whether user is logged on or not”. I also changed the “Configure for:” drom down at the bottom to be “Windows 7, Windows Server 2008 R2″. And that’s it- Shut down your computer to give it a go. If you are following on from my previous post and you pointed the action dialogue to run the .exe produced from the last post, you should see your computer shut down and then a few seconds later the NAS box will power down.

Drop me a comment if I’ve missed any critical details!

You can see the finished app here

No Comments

Automatic NAS Box shutdown – How to POST the shutdown command over SSL with HTTP authentication from a dot net Console app (Part 1/2)

I recently purchased a Netgear ReadyNAS Duo RAIDed network storage box for general backup of my ‘stuff and things’, which sit’s on my desk and runs off the same power as my PC.  A couple of times now I’ve booted the box up to run a backup, then forgot to shut it down, then shut down my PC, flick the switch at the wall and then realise.  When I boot everything back up in a day or so, the NAS box has to do a full system check and maybe rebuild the RAID array if theres a problem etc etc – it’s a pain.

So I thought I would set about automating the NAS box shut down with my PC shut down which turned out to be pretty easy.  The NAS box is controller via a web UI- my box has the host name “BACKUP” so I can get to it over the browser on http://BACKUP/.  This uses basic HTTP authentication asking me to login, and also use’s https (which my browser always warns me about because it’s not from a trusts CA or whatever- so I just ignore the warnings and continue).  From the web UI you can go to the system tab and select shut down and the box goes down.  I figured as this is going to be a simple web call, it should be easy enough to write a simple console app which makes the same call which can be fired on Windows shutdown- so I fired up Firebug, opened the “Net” tab, which allows you to inspect all http calls made, and triggered a shut down. It’s probably worth noting at this point that the techniques used here could probably be applied to pretty much any other networked device with a web based UI (most routers, firewalls, switches, printers, media boxes etc) so this should hopefully be quite useful.

Sure enough the HTTPS POST made to a file called get_handler on the root could be seen, with the POST data string;

As we can see from firebug, the data sent is;

PAGE=System&OUTER_TAB=tab_shutdown&INNER_TAB=NONE&shutdown_option1=1&command=poweroff&OPERATION=set

So six key value pairs separated by ampersands.  The code itself is pretty simple using WebClient class (System.Net namespace)- however there are a couple of complications, which as it happens are fairly common things to run into, so a good opportunity to give some example code for future reference;

  • We need to perform our Form Post over SSL

  • The SSL certificate of the server we are posting to will never be valid!

  • We must carry out our form post while supplying basic HTTP authentication credentials

I created a new Console application and added the following code;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Net;
using System.Collections.Specialized;

namespace ShutdownNASBox
{
    class Program
    {
        static void Main(string[] args)
        {
            using (WebClient client = new WebClient())
            {
                // add the basic http authentication username &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; password
                client.Credentials = new NetworkCredential("admin", "abc123");

                // register the face that the connection uses SSL
                // (otherwise it defaults to TLS and you get an exception)
                ServicePointManager.SecurityProtocol = SecurityProtocolType.Ssl3;

                // set it to effectivly ignore the SSL certificate
                ServicePointManager.ServerCertificateValidationCallback =
                                                        delegate { return true; };

                // build a NameValueCollection which holds those 6 values we saw
                // being posted when we used firebug
                NameValueCollection c = new NameValueCollection();
                c.Add("PAGE", "System");
                c.Add("OUTER_TAB", "tab_shutdown");
                c.Add("INNER_TAB", "NONE");
                c.Add("shutdown_option1", "1");
                c.Add("command", "poweroff");
                c.Add("OPERATION", "set");

                try
                {
                    // Post the data!  This will return as a byte array
                    byte[] bytes =
                    client.UploadValues("https://backup/get_handler", c);

                    // convert the byte array into text we can read!
                    string result = Encoding.ASCII.GetString(bytes);

                    Console.Write("Shutdown Message Sent");
                    Console.Write(result);

                }
                catch (Exception e)
                {
                    Console.Write("Shutdown Message Send Failure!");
                    Console.Write(e.ToString());
                }
            }
        }
    }
}

And that’s all there is to it! An obvious and easy upgrade would be to make this parametrized and maybe get it to write to the windows log on failure.

In part two I shall do a quick post on how to schedule tasks to run on shut down in Windows 7.

You can see the finished app, with the above recommended improvements already implemented, here

, , , ,

No Comments