Brian Keating | November 2011

jQuery and a little bit of javascript

27 November 2011 brianbruff

I’m still working on the LiveResume website, just something I’m playing with in my free time, no I’m not looking for a job Smile just have an idea that I’ve not seen anywhere else (no I’m not telling you what it is until the site is live Winking smile )

This little post is to demonstrate how effective the jQuery library is.

Firstly lets have a look at the html to see what we are trying to achieve.

Now, I’m not using jQuery.ui tabs (yet…); so I want to handle the styling of the active tab.

I’ve got a style called highlight that does this.

The code below shows how effective jQuery is at removing the style from all anchor elements and adding the style to the clicked anchor.

Let’s break it down.

The first two commented lines are to enable intellisense in visual studio.

After this we create a variable menuHandler, I’m using the revealing module pattern for this.

the return function exposed the init function publically. I’ll be adding more functions to this menuHandler as I go along.

what I’m saying here is select all anchor elements that are children of the element with id=”topmenu” and add an event handler to the click event.

this line removes the highlight class from all the anchors in the same topmenu element.

this line adds the style to the clicked element.

this is somewhat equivalent to an onload event handler for the page (except it doesn’t wait for images… see jQuery docs); what I’m doing in the load handler is creating an instance of the menuHandler function and calling the init method on it.

I can recommend the book: jQuery in action if you wish to get started or improve your jQuery.

Full height divs in html5

26 November 2011 brianbruff

Hi all,

This has probably been beaten to death elsewhere, but somehow it’s the first time I’ve ever come across it.

I’m working on the LiveResume website this evening (hey it was this or watch XFactor.

Anyway, I wanted to ensure that all different views of my web app filled the screen, for example if the personal details only occupied 30% of the height, I wanted to containing div to go the whole way to the bottom of the screen given it is a different color.

This secret to this is ensuring that the parent has an explicit height or the div reverts to auto.

So lets look at the simplified sample I’ve put together.

<!DOCTYPE html>

<html>

<head>

</head>

<style>

BODY {

     BACKGROUND:#ff0000; height:100%;

#one {

     BACKGROUND:#00ff00; height:100%;

#two {

     BACKGROUND:#0000ff; height:100%;

</style>

<body>

    <div id="one">

        <div id="two">

            gdxg

        </div>

    </div>

</body>

<html>

This is what the rendered webpage looks like in IE9

I was expecting the green section to be full height, I mean this always worked fine before.

So what has happened

html5 <!DOCTYPE html>

requires a height on the html element too…and for whatever reason I never noticed this before.

Solution:

Add html to the first style

Supporting WSE plain text password with WCF BasicHttpBinding

16 November 2011 brianbruff

Hi all,

Ok, so I did a bit of googling to see if this had been done by someone else, turns out I failed to find a suitable solution, just many frustrated people.

So this post is an attempt to make those people a little happier.

The solutions is as follows(, It’s a bit rough around the edges at the moment as I have just got it working and have not yet cleaned up the code).

Firstly, I created a binding to manage the header

public class MyBehavior : BehaviorExtensionElement, IEndpointBehavior

        public MyBehavior(string userName, string password)

            this.UserName = userName;

            this.Password = password;

        #region IEndpointBehavior Members

        public void AddBindingParameters(ServiceEndpoint endpoint, BindingParameterCollection bindingParameters)

        public void ApplyClientBehavior(ServiceEndpoint endpoint, ClientRuntime clientRuntime)

            clientRuntime.MessageInspectors.Add(new MyMessageInspector(this.UserName, this.Password));

        public void ApplyDispatchBehavior(ServiceEndpoint endpoint, EndpointDispatcher endpointDispatcher)

        public void Validate(ServiceEndpoint endpoint)

        #endregion

        public override Type BehaviorType

get

                return typeof(MyBehavior);

        protected override object CreateBehavior()

            return new MyBehavior(this.UserName, this.Password);

        public string UserName { get; set; }

        public string Password { get; set; }

Ok so now we can see this behavior adds a MessageInspector to every message. lets take a look at what the message inspector does.

MessageInspector

class MyMessageInspector : IClientMessageInspector
{
    public MyMessageInspector(string username, string password)
    {
        _username = username;
        _password = password;
    }

    public void AfterReceiveReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
    {
            
    }

    public object BeforeSendRequest(ref System.ServiceModel.Channels.Message request, System.ServiceModel.IClientChannel channel)
    {
        var header = new WseHeader(_username, _password);            
                
        request.Headers.Add(header); 
            
        return null;
    }


    private string _username;
    private string _password;
}

So here in my message inspector I add a new header.

In fact it’s this header that was making life hard for most people.

WseHeader

class WseHeader : MessageHeader

        public WseHeader(string userName, string password)

            this.UserName = userName;

            this.Password = password;

        public string UserName

            get;

            private set;

        private string Password

            get;

            set;

        protected override void OnWriteStartHeader(System.Xml.XmlDictionaryWriter writer, MessageVersion messageVersion)

            base.OnWriteStartHeader(writer, messageVersion);

            writer.WriteAttributeString("s:mustUnderstand", "0");

            writer.WriteAttributeString("xmlns:wsse", WsseNamespaceToken);

            writer.WriteAttributeString("xmlns:s", "http://schemas.xmlsoap.org/soap/envelope/");

        protected override void OnWriteHeaderContents(System.Xml.XmlDictionaryWriter writer, MessageVersion messageVersion)

            writer.WriteRaw(Properties.Resources.WseHeaderText.Replace("{USERNAME}",

                this.UserName).Replace("{PASSWORD}", this.Password));

        public override string Name

            get { return "wsse:Security"; }

        public override string Namespace

            get { return ""; }

        public override bool MustUnderstand

get

                return false;

        private const string WsseNamespaceToken = "http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd";

This class will create a header like this

<wsse:Security s:mustUnderstand="0" xmlns:wsse="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd" xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">

    <wsse:UsernameToken wsu:Id="SecurityToken-3f7f983f-66ce-480d-bce6-170632d33f92" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd">

        <wsse:Username>bek@anchor</wsse:Username>

        <wsse:Password Type="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-username-token-profile-1.0#PasswordText">dotnetrocks</wsse:Password>

    </wsse:UsernameToken>

    </wsse:Security>

Please note I’m getting the body of the header from a project resource, here it is WseHeaderText

<wsse:UsernameToken wsu:Id="SecurityToken-3f7f983f-66ce-480d-bce6-170632d33f92" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd">

    <wsse:Username>{USERNAME}</wsse:Username>

    <wsse:Password Type="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-username-token-profile-1.0#PasswordText">{PASSWORD}</wsse:Password>

</wsse:UsernameToken>

I just replace the username and password in code in the MessageHeader. I could probably do all this neater with the API but it’s good enough for my investigation tonight, I usually just add the WSE header directly into my configuration file and not bother with the behavior.

e.g.

<client>

          <endpoint address="http://anchor:8083/gdm/TemplateActionsService/TemplateActionsService" binding="basicHttpBinding" bindingConfiguration="TemplateActionsServiceSoapBinding" contract="TemplateActionsProxy.TemplateActionsServiceType" name="TemplateActionsServicePort">

            <!-- this will work without behaviour by explicitly adding the header

            <headers>

              <wsse:Security s:mustUnderstand="0" xmlns:wsse="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd" xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">

                <wsse:UsernameToken wsu:Id="SecurityToken-3f7f983f-66ce-480d-bce6-170632d33f92" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd">

                  <wsse:Username>bek@anchor</wsse:Username>

                  <wsse:Password Type="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-username-token-profile-1.0#PasswordText">dotnetrocks</wsse:Password>

                </wsse:UsernameToken>

              </wsse:Security>

            </headers>-->

          </endpoint>

        </client>

So I hope this helps somebody else. Ninja

ASP MVC Display Templates

07 November 2011 brianbruff

So I’m still working on the Live CV website I’m creating in my spare time. The idea is pretty simple the web application will let users create an online CV, I’ll not get into the details of it until I’ve something more interesting to show.

Of course every resume needs a section on work experience and associated start and end dates. Now as a first step I’m just serving up my own CV before I get into all the exciting jQuery plugins etc. that' I’ve in mind.

Here’s how to format a date using a data template.

Here we see that I’m passing a template to the Html.DisplayFor<> extension.

Now I added a DisplayTemplates folder to my shared views (you could keep this folder local to your current view if you wish, but I wish to have it used throughout the project. Add a Partial view.