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>[email protected]</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>[email protected]</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.

Watch that error stream with Java process executions

 

I’m executing a windows process from java and I was bitten by a nasty oversight in one of my project today.
Everything’s been working fine for some time, but today the application I’m calling started spitting out errors to the error stream.

However I’d not been reading the errorstream in my code and it appears to be the culprit for hanging the process execution.

I don’t really care about the error stream or even the inputsteam myself as the thirdparty application does its own logging.

The solution was a follows: I used a SteamGobbler class to purge the input and error streams. Hope this helps someone.

image

 

 

image

VS2010 C++11 Variadic Templates

 

If you’ve been following the changes in the C++11 standard you may have heard of Variadic templates. In layman’s terms: var arg template parameters.

Lets take c# to explain what we’re talking about: Take the Action generic delegate, there’ 16 of them! One overload for each parameter.

image

However in c++11 we should (when the compiler supports it) be able to use to indicate that we can have a variable number of type parameters ( I expect comes form java).

The long and the short of it is, they don’t work yet in vs2010 yet Sad smile

image

I wonder do they work in VS11? I’ll update this post once I get a chance to fire it up. I’ll also fire up my Linux machine and give the GNU compiler a whirl.

Stay tuned…

 

** update: Doesn’t work in VS11 either.

Silverlight Fluid Motion

 

You know what?
I love Silverlight!

The only reason I don’t spend more time in it is the ASP is more suited to non enterprise applications.
However tonight for you dear reader I’ve got an enterprise application (below)

image

(because every enterprise had an application that shows pictures Smile; yes really this was a requirement honest Be right back)

Blend

So you are writing a sliverlight app, or course you could code it all by hand.

In the last year, I’ve even met Silverlight/WPF programmers, lets call them Xamlers, that turn their nose up at using a designer, hey I’m sure it’s got it’s advantages and these people know XAML better than me, but IMO life is too short and programmers are too expensive to be living in notepad. Would you code your designer code in a windows forms app? not use scaffolding in MVC? etc etc..

For me Blend is blessing in disguise, I’m not sure the mythical devigner that is both an amazing designer AND an amazing coder (term coined by Scott Hanselman I think)  exists, but Blend does really help.

Overview

The application is simple, It selects some pictures in a folder and displays them in a list. When an item is selected in the list the picture should zoom out from the listbox item and scale to it’s full size.

Simple ey… yes of course (when you know how).

 

Steps

1. Create a new expression blend silverlight project

image

2. Add a sample datasource, some text and a picture

image

image

image

3. Drag the collection onto the page

image

4) Select details mode in the properties pane, and drag out property 2

image

image

If you were now to run your application you’d see that when you select a picture it appears in the main picture also. But our requirements were to slide out the picture from the list itself.

5) Select the big picture and drag fluid move behaviour onto it

image

6) Change the tag property to datacontext

image

Now do the same for the Itemtemplate

image

7) Drop a FluidMotionSetTagBehaviour onto the image part,setting the datacontext

image

 

 

That’s all that’s needed, you app should now run, animations and all.

image

I would provide the sample but I’ve used 11megs of pictures so it’s a little too big to expect you to wait for Smile

I might get some time to reproduce this app in html5, android, c++, java would be nice to compare and contrast.

Start blending xamlers!

MVC Mailer on NuGet

 

So have you ever found yourself doing this?

image

Well no there’s a nicer alternative whereby you can build up your mail in html.
Check out the MVCMailer package on Nuget.

 

PM> Install-Package MvcMailer
Attempting to resolve dependency 'T4Scaffolding (≥ 0.9.7)'.
Attempting to resolve dependency 'EntityFramework (≥ 4.1.10311.0)'.
Successfully installed 'MvcMailer 1.1'.
Successfully added 'MvcMailer 1.1' to TCF.


---------------------------READ ME---------------------------------------------------

Your default Mailer Scaffolder is set to Mailer.Razor

You can generate your Mailers and Views using the following Scaffolder Command

PM> Scaffold Mailer UserMailer Welcome,GoodBye

Edit the smtp configuration at web.config file before you send an email

You can find more at: https://github.com/smsohan/MvcMailer/wiki/MvcMailer-Step-by-Step-Guide

-------------------------------------------------------------------------------------

PM>

Android

 

So it took me 2 hours (downloads on 2mbps included) to create an Android app in eclipse.

Wonder is that something I should be proud of giving I’ve been in software for nearly 15 years now…. 2 hours for a hello world… 

image

Listening to .net rocks and Xamarin podcast got me thinking, I really should see what’s involved in creating an Android app, after all I’m a registered Microsoft and Apple developer, I can create Wp7 apps in my sleep, I’ve even flirted with iOS, why not give Google and Android a shot.

I was going to install MonoDroid for VS2010, but hey i’m doing a hello world, no need for all this cross platformability. I’ve been doing a fair bit of java lately and eclipse doesn’t frighten me anymore so I just downloaded and installed the tools, and created the above app.. baby steps..

Any downsides? yes,, Now I wanna buy a Android tablet Who me?.

EF 4.1 Code First Database re-create

 

If you’ve upgraded to Entity Framework 4.1 you may have noticed the following no longer compiles. (the line of code that causes the database to drop and recreate on schema change).

image

Solution

DbDatabase.SetInitializer(new DropCreateDatabaseIfModelChanges<TCF.Models.TCFContext>());

 

image

Recent Tweets

Note: For Customization and Configuration, CheckOut Recent Tweets Documentation

Calendar

<<  May 2018  >>
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

View posts in large calendar

Month List