jQuery and a little bit of javascript

 

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.

image

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.

image

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.

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

 

image 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.

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

image this line adds the style to the clicked element.

image 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

 

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

image

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

image

 

image

Supporting WSE plain text password with WCF BasicHttpBinding

 

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

 

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.

image

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.

image

Here’s the content of my Partial view

image

Here’s the result.

image

CSS and custom jQuery filter selectors

I’ve discovered a nice set of jQuery filter selectors.

Take this example of selecting the checked radio button in a group

image

Markup

image

Script

image

There are many many others, e.g. @contains, :disabled, :not(selector), :parent, :password, etc etc, more info in jQuery docs.