Automatisch invullen van website formulieren: Roboform

Ken je dat, als developer, dat je gevraagd wordt om een issue te bekijken als ‘het aanvraagformulier’ wordt gesubmit. Dus je start de applicatie, vult het formulier in, en drukt op ‘submit’.  Je controleert even wat, klikt ‘back’, en je moet weer het formulier invullen. Dan moet je daarna wat code aanpassen, runnen, formulier invullen, styling bekijken, aanpassen, formulier invullen…. je begrijpt wat ik wil zeggen: elke keer een heel formulier invullen is niet leuk. Helemaal niet omdat als je later wat moet testen je het formulier zo beu bent dat je overal waar het kan de letter ‘a’ of het cijfer ’0′ invult, en dat er nooit meer een representatieve input uit het formulier komt je applicatie. Aangezien ik ook in dat schuitje zit ging ik op zoek naar een tooltje dat dat invullen voor mij kan doen, en ik kwam uit bij Roboform.

Als je op de site van Roboform komt dan lijkt het in eerste instantie voornamelijk een passwordmanager. Daar gebruik ik het niet voor, ik gebruik het voor het automatisch invullen van formulieren tijdens testen.

Het werkt als volgt:

• Je vult 1 keer een heel formulier in met representatieve data
• Je klikt in de Roboform toolbar op ‘opslaan’
• De volgende keer dat je het formulier moet invullen klik je in de Roboform toolbar op het ‘invul’ icoon en voila; de data staat ingevuld.

Je kunt ook meerdere keren verschillende input opslaan; je kunt dan later kiezen welke opgeslagen data je wilt invullen op dat moment. Het is voor zover ik weet niet mogelijk om (zoals je bij geautomatiseerd testen wellicht wilt) data random laten te genereren (bv elke keer een ander telefoonnummer) maar voor (debug) developer testen is het erg handig.

Het werkt in Internet Explorer, FireFox, Opera en Chrome.

In de gratis versie wordt een beperkt aantal url’s ondersteund (dus je kunt dan voor maximaal 10 url’s een formulier opslaan) maar als je vindt dat het prettig werkt dan kost het maar $9,99 (nee, ik heb geen provisie regeling) en dat was het mij persoonlijk zeker waard.

Ervaringen met Scrum

Enige tijd geleden ben ik begonnen op een project waar Scrum wordt gebruikt.
Hier mijn eerste ervaringen met Scrum:

Wie let er op het tempo?
Aangezien het hele team de baas is, is er dus niemand echt de baas. Wie houdt er dan in de gaten of de velocity van 60 storypoints wel ambitieus is, of dat er eigenlijk wel 80 storypoints door het team gehaald kunnen worden?
De product owner kan het niet inschatten, en een langzaam team ziet wellicht niet hoe langzaam ze zijn.

Daily standup is nuttig.
Het is niet altijd even leuk voor elk teamlid om met de billen bloot te moeten elke dag, maar met deze meeting is het wel erg duidelijk of er voortgang wordt geboekt of dat mensen blijven hangen in bepaalde stories.

Retrospective rules.
Onze sprints duren 2 weken. Dat wil zeggen dat we elke 2 weken terugkijken over hoe het is gegaan; wat er goed is gegaan en wat er beter had gekund. En dat is gewoonweg awesome. Elke 2 weken een kans om bij te sturen, om echt na te denken of we op de goede weg zitten, en ook dus bij te kunnen sturen.
Dat vind ik echt veel beter dan aan het einde concluderen dat het allemaal anders had gemoeten.

Twee-wekelijks opleveren; directe feedback
Meer dan eens wordt er maanden achtereen code geschreven zonder dat een stakeholder er iets van ziet. Dikke kans dat het na al die maanden niet exact overeenkomt met wat die stakeholders in gedachten hadden. Dus het 2-wekelijks opleveren van software geeft niet alleen regelmatig aan hoe de voortgang is, maar geeft ook al snel inzage in wat er ontwikkeld wordt.

Schatten van de userstories
Het schatten van userstores, hier gedaan in storypoints maar het kan ook prima in uren, met meerdere mensen is een prima middel gebleken om al vroeg te discussieren over complexiteit van userstories en wat ze eigenlijk precies inhouden.
Ook geldt in dit geval: twee weten meer dan een dus de schatting is accurater dan wanneer één iemand zich hier mee bezighoudt.

Echte betrokkenheid met degene voor wie je het doet door de directe communicatie
Een productowner die in dezelfde ruimte zit als waar het development team zit en altijd aanspreekbaar is: wat een luxe!
Geen ‘het zal wel dit zijn’ meer maar direct vragen wat gewenst is. Een absolute kwaliteitverbeteraar.

Goede scrummaster onontbeerlijk
De titel zegt genoeg; een scrummaster kan met een neutrale blik (want niet in het team) bekijken of het proces goed loopt.

Userstories beter dan MS-Word proza.
We werken hier met userstories in een vast formaat: AS A — I WANT — SO THAT.
Bijvoorbeeld AS A user I WANT to be able to see the unread email indicated SO THAT i can easily see which email i have to process.
En dat is wellicht wat meer werk voor de product owner dan een standaard MS-Word document, maar als developer werkt het wel een stuk prettiger als de specificaties op deze manier zijn geschreven.
Vooral het laatste, SO THAT, ofwel het waarom, is vaak erg verduidelijkend.

Sterke productowner
Je moet wel een sterke product owner hebben. Hij of zijn bepaalt namens alle gebruikers en belanghebbenden. Voordeel is wel dat dat uitzoekwerk buiten de scope van de developer plaatsvindt maar je hoort alleen de conclusie, en niet de discussie vooraf. Degegen bij wie je later je info haalt moet dan ook wel goed op de hoogte zijn.

Data is lost from my asp.net cache

A strange experience it was; losing data from the Asp.net cache.
I was refactoring some code which was used frequently in my Asp.net code, and all it did was getting a non-volatile list of items from the database. A good candidate for some caching I thought.

So I created the caching code, hit F5 and started the program.
And guess what? All new errors occurred.

While debugging I found out that the first moment I put in ten items for the cachekey, and later on I only got five out when I asked for the same data.
So what is this? A bug in the cache in .Net?
Most likely not, so I investigated the rest of the code.

And what turned out to be the case?
One function getting the data from the cache actually removed items from the list.
That is perfectly ok if the next code gets a fresh result from the database, but not if the items are removed from a list which is actually in cache.

Conditionally enable fieldvalidators (ie RequiredFieldValidator) in Asp.Net

Today i used the old and familiar asp.net validators again.
The code was straight forward: controls where dynamicly created and their validators, dynamicly, also.
But in this case i wanted to use the validators conditionally, which is not an uncommon thing todo:

Say you order a book. You have to enter your delivery address, so that field is mandatory so you attach a RequiredFieldValidator to it. Then there is a checkbox ‘use another address for invoicing’. When you check it, the invoice address is mandatory, but when you uncheck it, the address must be optional (and probably disabled, but that’s another thing). The solution: conditionally (based on the condition ‘is checkbox checked?’) the invoce address textbox validator must do it’s work; it must be enabled or disabled.

The Asp.Net validators are split into two parts:
a client side validation and a server side validation.
For the client side there is a simple javascript function (which is generated by the .Net framework when you use .NEt validators) for enabling the validator:

 ValidatorEnable(CONTROL, enableValidator);

I’ve called it with Jquery with a change event on the checkbox: if the control is checked, call ValidatorEnable(txtInvoiceAddress, true); when the control is un-checked, call ValidatorEnable(txtInvoiceAddress, false).

On the server side, it’s almost as simple: you have to override the ‘Validate’ event:

public override void Validate()
{
  if (chkUseOtherAddress.Checked)
  {
  ReqValidatortxtInvoiceAddress.Enabled = true;
  }
  else
  {
  ReqValidatortxtInvoiceAddress.Enabled = false;
  }
  base.Validate();
}

And then you’re good to go. The client side part makes sure the average user get’s client side validation; the server side validation validates the user who bypass the normal page or have Javascript disabled.

Deja Vu: browserfunctionaliteiten

Een van de zaken die ik me herinner uit de begintijd van webdevelopment, we spreken de tijd van Netscape 4 en IE4, was het rekening houden met de grote lijst van verschillen tussen die browsers.
Als Netscape 4 dan dit, als IE4 dan zus, als IE5 dan zo.
De laatste jaren waren in dat opzicht iets eenvoudiger: er kwamen wel meer browsers bij waar je rekening mee moest houden, maar met de komst van JQuery was werden veel verschillen netjes gladgestreken.
Maar nu: HTML5.
Eigenlijk een specificatie van de nieuwe HTML standaard en nog volop in ontwikkeling, maar langzaam verworden tot een losstaand begrip net als ‘web 2.0‘.
Omdat HTML5 een buzzword aan het worden is en de meeste browsers al een deel van de (lopende) specificaties aan het implementeren zijn, willen veel developers toch al iets leuks doen met de nieuwe mogelijkheden.
Maar hoe weet je nu of de browser waarin jouw site wordt getoond wel jouw mooie Canvas ondersteunt? Of het nieuwe Video element, of de Rounded Corner?
Dat kun je natuurlijk zelf gaan afvragen maar je kunt ook gebruik maken van modernizr.
Als je gebruik maakt van modernizr dan vult modernizr de html tag met classnames die weergeven welke functionaliteiten de browser ondersteunt. Je kunt deze classes vervolgens gebruiken om styling in je CSS toe te passen afhankelijk van de ondersteuning van Canvas, Rounded Corners of niet.

Bijvoorbeeld: 
.canvas #myCanvas{
background-color:green;
}
.no-canvas #myCanvas{
background-color:blue;
}

Als de browser geen HTML5 Canvas ondersteunt dan zal het in de html tag de classname ‘no-canvas‘ toevoegen; als de browser de Canvas wel ondersteunt dan zal het de classname ‘canvas‘ toevoegen.
Dit kun je dan gebruiken in je CSS om een element te stylen.

Ook voor deze kennis in je Javascript is gezorgd: modernizr geeft ook een Javascript object met properties welke functionaliteiten door de browser worden ondersteund:

if (Modernizr.canvas) {
//create nice canvas
}
else{
//hide the canvas element
}
Een goede (korte) getting started staat hier: http://webdesignernotebook.com/css/how-to-use-modernizr/

Sync and backup my projects with Dropbox

As a very happy user i want to do a little free publicity for this very nice, usefull and free tool: Dropbox.
It’s a free tool to keep your files in sync with other computers. It’s available for every OS and once installed it syncs the files in the dropbox folder with the dropbox server and from there to all other pc’s you have the dropbox software installed.
So you can access your files from all your pc’s and from any other pc from the online dropbox site.
The dropbox site even keeps track of the history of your files, so you can also undelete.
And with your files on all pc’s, backup is also in place.
So check it out here: http://www.dropbox.com/

Pop up control: jqModal Jquery modal pop-up

I was looking for a pop-up window like solution for a client.
It should support these options:

• Add the pop-up content in the document (so the content would be loaded with the parent document)
• Add the pop-up content on demand (when the uses clicks on it)
• Close the pop-up with a button.

After a little searching i came across this control: the jqModal: Minimalist Modaling with jQuery

One thing beforehand: the word ‘minimalistic’ scared me; i thought this would be a replacement for ‘does not exactly what you want’, or something similar.
Well, i was wrong.

The first pleasant surprise was that the pop-up would disappear when clicked next to it.
I personally dislike pop-ups you have to close by clicking a button (most of the time very small and placed at a weird location).
So just clicking next tot the pop-up and making it pop-down felt good.

Then option 1: add the pop-up in the document.
Easy as 1,2, 3:
Add a div with the content (in my case, the content was put in by filling literals via the ASP.Net framework, but you could use any technology or plain text to set content in the div)

<div id="About" class="jqmWindow aboutPopUp" style="width: 300px; height: 250px;"></div>

No need to hide the div, just this script:

$().ready(function () {
    $('#About').jqm();
});

and a link off course, to click and show the pop-up (div, to be exact. Like most of the pop-up controls, the thing what happens is just a show / hide of a div).

<a onclick="$('#About').jqmShow();" href="#">About</a>

Then option 2: filling it on demand.
For some pop-ups which were not shown so often or with large content, we wanted it to load the content on demand.
And for that too, there is a simple solution: load the page with a Ajax call.
At the server, i implemented an aspx page which was called for all the pop-up’s, and would return the right html.
This html was not changed frequently so it was cached and thereby served quickly to the pop-up.
The same way a div element (now without content, which gets injected after the Ajax call)

<div style="width:300px;height:250px;" id="MoreInfoGeneral"></div>

and also a one liner for the setup:

$('#MoreInfoGeneral').jqm({ ajax: '/more-info/?section=MoreInfoGeneral' });

and the same code for the link to show / hide the pop-up, like in the first example (but off course with another div id).

And for option 3, for people who did not see the clicking next to the div to make it pop down as a natural thing to do, the close button.
Just add an image or link to pop down the pop-up:

<img id="imgPopupCloseButton" style="cursor: pointer;" onclick="HideJqmWindow('{DIVID}')" src="/Images/closeButton.png" alt="" width="20" />

(in this case, i injected the right id in the source at the placeholder’{DIVID}’ to reuse this line of code.

Ans there it is, an easy to use yet very well working pop-up control.

You can get it here http://dev.iceburg.net/jquery/jqModal/

zero based lists became a habit

As a C# developer, you realy get acquainted to the fact that every list/array etc. is zero based.
In the early days of my development career, as a VB programmer, the fact that a list was zero or one based was a matter of choice! (yeah, that was fun )
Anyway, in those days, you always asked yourself: is it zero based or one based.

As i said, these days i don’t… which give me a nice ‘unexpected behaviour’ in Sql Server where not all is zero based:

select CHARINDEX('.Net', 'aaa.Netbbb')
select CHARINDEX('.Net', '.Netbbb')
select CHARINDEX('.Net', 'aaa.N.etbbb')

Returns, in that order: 4, 1 and 0.
So if you  type this

"somestringvalue".IndexOf("sometext") >= 0

in c#, you must remove the “>” in Sql.

A minor difference, but in the edge cases of the unit test a large difference

Nice Scrum talk in DotNet rocks!

Today i listened to episode 585 of .Net rocks.
And i must say, it turned out to be a very nice show about Scrum with Richard Hundhausen.
A lot of questions i had after reading a few books about scrum were answered here.
So if you have 45 spare minutes in the car and you’re interested, you can download the episode here:

http://www.dotnetrocks.com/default.aspx?showNum=585

And for the Dutch listeners: the soccer worldcup final is also mentioned.

DateTime, DST, ‘Daylight Saving Time’, Time zone, Ambiguous time, Invalid Time

That are the most important words I remembered from my journey into making our application ready for users all over the world.

The question was simple: we now save datetimes in local format, but when we plan on implementing our application outside our own country, we have to change that.

So after a short discussion we decided to follow the best practice: save the dates in UTC format.

So when data is imported or entered via the screen, check where it comes from, calculate the right UTC time from it, and then save the data to the database.

And also: when a user asks for data for august 15^th, first determine where the user is located, calculate the right UTC time for ‘his’ august 15^th, and then get the data from the database with the UTC time as selection criteria.

So where to start?

First I’ve checked the DateTime class, and it’s got a ToLocalTime() method and a ToUniversalTime() method.

That looked promising , but it doesn’t take the users time zone into account.

It doesn’t allow me to ask: what is the UTC time for a user in a time zone which has a UTC offset of -9 (when you live in a place with UTC – 9, your local time is the UTC time (which is located in England) minus 9 hours. So when it’s 14.00 hours in the UTC area / England, you’re probably sleeping at 5 AM. I’ll come back at the summertime / wintertime differences later)

The better solution is the .Net TimeZoneInfo class.
This is designed for the kind of questions I want to ask.

So, how do I determine what the UTC time is for ‘his August 15th, 0.00 AM’?
First I want to know in which time zone he is in. Does he live in -9 or +9, that makes quite a difference. We decided to store that as a user preference in his profile.

For data import, we had to know the time zone the data supplier uses for our data imports.

Then, we have to know if the user’s local time was in Daylight Saving Time (DST) or not. Not all countries use DST, but for every different time zone there are different ones if there are DST and none-DST countries in it.
So there are multiple +1 time zones, some which have DST and some have not.

So how to start with your TimeZoneInfo?
First create one with the TimeZoneInfo.FindSystemTimeZoneById("W. Europe Standard Time") method. The name of the timezones can be retrieved like this:

TimeZoneInfo.GetSystemTimeZones() This returns a collection of TimeZoneInfo objects with an id property you can use.

Then you can ask whether this timezone supports / has DST:

timeZone.SupportsDaylightSavingTime() (this time timeZone is an object instantiated via TimeZoneInfo.FindSystemTimeZoneById())

So, then we can check if August 15th, 0.00 AM exists (when going from wintertime to summertime, the clock goes from 1.59.59 to 3.00.00, so on that day a time of 02.15 is not valid):

timeZoneInfo.IsInvalidTime(dateTime);

If it is a valid date, we have to check if it is an ambiguous date (when going from summertime to wintertime, the clock goes from 02.59.59 to 02.00.00, and then we have the hour from 02.00.00 to 02.59.59 twice).
Because if you get an ambiguous time, we have to know: was it the ‘first’ 02.15 or the ‘second’ 02.15.
In the latter case we are in wintertime and we don’t have to worry about the summertime extra hour.
When it is not an ambiguous time, we can ask if he is in summertime or not:

timeZoneInfo.IsDaylightSavingTime(dateTime)

Then we have to know what the base offset for this time zone is timeZoneInfo.BaseUtcOffset.Hours
and
timeZoneInfo.BaseUtcOffset.Minutes

Let’s say he is in -9: the UTC time is 0.00.00 + 9 hours = 0.09.00
Let’s say he is in summertime so he is actually in (-9 + 1) = -8.

So the UTC time is 0.00.00 + 8 hours = 0.08.00

Finally we got the UTC date, and we can get the data out of the database with this new UTC date.
The other way around (you have a UTC time, and want to know what time it is in ‘his’ time zone)?
It’s simpler, just use

TimeZoneInfo.ConvertTimeFromUtc(dateTime, timeZoneInfo);

Autoformat your code with Visual Studio 2010

I’ve always used resharper form the autoformatting of my code, but in this case i haven’t installed it, and guess what?
i’m working on a project, received from a 3rd party, in visual studio 2010, with the following style guide used:

use indentation by random

ARGH!
now i realize how much guidance the indentation actually gives you.
But no resharper, so what to do?

Luckily they’ve added a good reformat your code feature in vs2010.
Just press <CTRL><K>, <CTRL><D> (press and hold the Control key, press K and D without releasing the Control key) and phew, the code is readable again.

Getting loads of data from a WCF

I was pumping data from my WCF service in my Silverlight chart, and when loading a year of data with a record for every 15 minutes:

Maximum number of items that can be serialized or deserialized in an object graph is ’65536′

Ok, i was loading 35000 objects with 20 properties, but i didn’t want to be limitated.

The solution: add this code

<dataContractSerializer maxItemsInObjectGraph="10000000"/> 

 
to the bahaviour:

<behavior name="frsp.Web.FinanceDataBehavior">
     <serviceMetadata httpGetEnabled="true" />
     <serviceDebug includeExceptionDetailInFaults="false" />
     <dataContractSerializer maxItemsInObjectGraph="10000000"/>
</behavior><dataContractSerializer maxItemsInObjectGraph="10000000"/>

Logging WCF errors en debug info

I was getting data from a windows communication foundation (WCF) service in my Silverlight 4 application.

Deploying on the server didn’t work at once, of course.

The Silverlight messages indicated there was something going wrong server side, so i figured it was something with my data (wcf) service.

But what exactly was going wrong?

Then i read about WCF logging: add the following code to your web.config (dont’ forget to alter the path to one on your own disk) and voila, logging was ready!

 <system.diagnostics>      
     <sharedListeners>  
       <add name="WcfListener"  
               type="System.Diagnostics.XmlWriterTraceListener"  
               initializeData="c:\logs\wcfLog.svclog"  />  
     </sharedListeners>      
     <sources>        
       <!-- switchValue attribute has no impact on MessageLogging -->  
       <source name="System.ServiceModel.MessageLogging"> 
          <listeners> 
            <add name="WcfListener" /> 
          </listeners> 
        </source>       
        <source name="System.ServiceModel" 
                      switchValue="Warning, ActivityTracing" 
                      propagateActivity="true" > 
          <listeners> 
            <add name="WcfListener" /> 
          </listeners> 
        </source>       
      </sources>     
  </system.diagnostics> 
    
    
  <system.serviceModel> 
    <diagnostics> 
      <messageLogging  
           logEntireMessage="true"  
           logMalformedMessages="false" 
           logMessagesAtServiceLevel="true"  
           logMessagesAtTransportLevel="false" 
           maxMessagesToLog="3000" 
           maxSizeOfMessageToLog="2000"/> 
    </diagnostics> 
 </system.serviceModel>

ASP.NET clientside databinding, scriptloader en watermark textbox

Drie vliegen in 1 klap:
een kort filmpje van 15 minuten dat als onderwerp de asp.net 4.0 scriptloader heeft, maar waar ook nog even de asp.net clientside databinding en de watermark textbox wordt getoond.

• De asp.net scriptloader is een functie waarmee je kan aangeven voor welke componenten en functies er scripts moeten worden geladen (bv scripts.jquery); de scriptloader zoekt dan verder uit welke scripts er moeten worden geladen.
• de asp.net clientside databinding kan javascript objecten (die dus ook via Ajax met Json kunnen worden gevuld) binden aan html controls. Je geeft dan tussen bv een LI tag met dubbele accolades een dataitem naam aan (bv voornaam) en runtime wordt dan voor elk data item een LI tag met daarin de voornaam uit de javascript data objecten aangemaakt.
• de watermark textbox is een functionaliteit waarmee er een tekst wordt getoond in een textbox die verdwijnt zodra je er in gaat typen.

http://www.asp.net/learn/aspnet-4-quick-hit-videos/video-8914.aspx

T4 template lockt de assembly

Ik moest van object A alle properties copieren naar object B.

Dat vind ik nooit zo leuk om te doen, het intypen van B.Naam = A.Naam, B.Adres = A.Adres etc.

En dan denk ik al snel aan code genereren. En het toeval wil, ik had laatst wat gelezen over T4 templates: daarmee kun je code genereren.

Dus direct geprobeerd en een bestand PersoonConverter.ttaangemaakt:

public class PersoonConverter

{

public PersoonB Convert(PersoonA prsa)

{

PersoonB prsb = new PersoonB ();

<#

// Get the type.

Object o = new PersoonA ();

Type t = o.GetType();

// Cycle through the properties.

foreach (PropertyInfo p in t.GetProperties( ))

{

if (p.CanWrite) {

#>

<#= string.Format("prsb.{0} = prsa.{0}", p.Name ) #>;

<#

}

}

#>

return l;

}

}

 
Wat staat er dan?

Alles in de PersoonConverter.tt file wordt verwerkt naar een PersoonConverter.cs file.

Alle gewone tekst wordt 1 op 1 getoond, en alles tussen <# #> echter wordt gerenderd.

En wat staat er hier tussen die tekens:

Neem een Type PersoonA, doorloop al z’n properties en voeg de tekst prsb.[property] = prsa.[property]; toen aan het uitvoer bestand.

Maar dan ben je er niet, want dan kent ‘ie natuurlijk PropertyInfo nog niet, dus voegen we daar een referentie naar toe bij:

<#@ import namespace = "System.Reflection" #> 

En daarna kent 'ie de class PersoonA nog niet, dus voegen we dit toe:

<#@ import namespace = "Converter.Model" #>

Maar die kent 'ie ook niet, dus voegen we een referentie toe naar de dll waar die namespace in zit:

<#@ assembly name = "Converter.Model.dll" #>

Maar nee, het moet een hard pad zijn, dus wordt het

<#@ assembly name = "C:\projects\Converter\bin\debug\Converter.Model.dll" #>

Et voila: de code wordt gegenereerd.

Klaar?

Nope, not quite, want de tweede keer met genereren lockt de T4 interpreter je DLL tijdens het compileren, maar die DLL moet ook worden gebuild!

Conclusie: je kunt je app niet meer builden.

De enige gevonden oplossing: sluiten en heropenen van je solution.

Bareuh….

Jquery elementen hierarchie

Ik heb een eenvoudig tabelletje

<table border="1">
	<tr class="overzichttabelRij" >
		<td>Affinno</td>
		<td>Den Haag</td>
		<td><input type="button" class="VerwijderBedrijf" value="Verwijderen" /></td>
	</tr>
	<tr class="overzichttabelRij" >
		<td>Shell</td>
		<td>Rijswijk</td>
		<td><input type="button" class="VerwijderBedrijf" value="Verwijderen" /></td>
	</tr>
</table>

en nou wil ik graag dat er op de button’s tooltip komt te staan:
‘verwijdert Affinno uit de tabel’ / ‘verwijdert Shell uit de tabel’ 

Dat leek me een mooi klusje voor Jquery.
Als eerste een stukje code om op de pagina een onload event te binden die alle verwijder buttons (herkenbaar aan de class ‘VerwijderBedrijf’) een tooltip geeft: 

$(".VerwijderBedrijf").each(function() {
   var elementValue = 'dit moet de naam van het bedrijf zijn';
   $(this).attr('title', 'verwijdert ' + elementValue + ' uit de wedstrijd');
});

We zetten hier nog hard de waarde ‘dit moet …’ als waarde van het attribuut ‘title’ op de button (met $(this), zie verder).
Maar hoe bepaal ik nou de naam van het bedrijf uit de cel?
Het moet iets zijn als: van de parent elementen van deze button, neem de rij waar deze in staat, en van die rij, neem van de eerste cel de text.
Het is geworden:

$(".VerwijderBedrijf").each(function() {
   var elementValue = $(this).parents().filter('TR').children(':first').text();
   $(this).attr('title', 'verwijdert ' + elementValue + ' uit de wedstrijd');
});

en we lezen het als volgt: neem van $(this) (dat is het element dat de .each functie steeds aan je geeft en is het element dat op dat moment beschikbaar is binnen de each loop) alle parents.
Dat geeft de TD, de TR, een TBODY, een TABLE en alles wat daar nog boven zou zitten.
Filter die parents op de TR elementen; we hebben nu de rij waar de button in zit.
Neem daarna alle child elementen van die rij, en neem daar de eerste van: dat is de eerste TD.
En neem uit die TD dan de tekst.

Source code in een WordPress artikel

Als blogger ben ik redelijk tevreden met WordPress (waarmee de blog die je nu leest wordt onderhouden).

De HTML editor is alleen niet enorm fijn, zeker als je het vergelijkt met andere open source editors die ook beschikbaar zijn.

Vooral met het weergeven van source code zat ik erg te rommelen: ander font, andere kleur, inspringen… echt lekker ging het niet.

Totdat ik las dat je net als bij de meeste Wiki’s gewoon een tag kunt gebruiken om je source code heen waarna WordPress zelf de tekst juist formatteert:

string s = "";
s += "more....";
//comment
s += "and more....";
//highlight
s += "and more....";

Diverse talen en opmaak-soorten worden ondersteund, evenals het highlighten van stukken code, regelnummers, wrapping etc.
Het hele artikel is hier te vinden:

http://en.support.wordpress.com/code/posting-source-code/

Jquery validatie

Client side validatie. In een ASP.Net webforms applicatie gebruik je er gemakkelijk een Validation control voor, maar er zijn ook nog andere manieren, ook handig als je bv in een ASP.Net MVC applicatie werkt.
Hoe werkt Jquery validatie?
Je geeft van je input velden op je form aan wat de restricties zijn op die velden, je geeft aan welke meldingen er bij het overtreden van de restricties getoond moeten worden, je bind het validate event aan je form en klaar ben je.
Hoe ziet dat er dan uit?

$(document).ready(function() {
var validator = $("form:first").validate({
validClass: "success",
rules: {
Email: {
required: true,
email: true
}
,
Voorletters: required
,
Achternaam: {
required: true,
minlength: 2
}
}
,
messages:{
Email: {
required: "Email adres is verplicht",
email: "Het email adres moet de opmaak <a href="mailto:'naam@domein.nl'">'naam@domein.nl'</a> hebben"
}
,
Voorletters: "Voorletters zijn verplicht"
,
Achternaam: {
required: true,
minlength: 2
}
}
});
});

In de eerste regel

var validator = $("form:first").validate({

Wordt het validatie framework’s validate event aan het eerste (en in mijn geval enige) form’s submit event gekoppeld.
De validClass bewaren we voor later, en vervolgens zien we dat we van het veld Email (<input id=”Email” name=”Email” type=”text” value=”" />) zeggen dat het verplicht is (required)  en dat het een ‘email’ veld is. Aangezien email inmiddels redelijk ingeburgerd is, is het eigenlijk wel logisch dat het inmiddels als een soort datatype wordt gebruikt. Zo zijn er ook datatatypes voor getallen, datum, creditcard, url etc.

Vervolgens zeggen we in 1 regel dat het voorletters veld verplicht is en dat het achternaam veld verplicht is en een minimale lengte heeft van 2 karakters.

Alle validatie regels worden verpakt in het onderdeel ‘rules’.

Vervolgens komen de teksten die getoond moeten worden als de validatie niet voldoet. Standaard zijn dit Engelse teksten maar het is wel mooier als je die in het Nederlands weergeeft.

Je kunt voor alle validaties die je eerder hebt aangegeven een tekst weergeven.

Hebben we eerder gezegd dat het veld ‘email’ required is, dan kunnen we hier voor die validatie een tekst weergeven.

Bij het ‘achternaam’ veld kunnen we de gekozen waarde in de minimale lengte validatie, hier ’2′, ook nog tonen in de melding door de jquery.format functie te gebruiken.

Alle melding teksten worden verpakt in het onderdeel ‘messages’.
Het resultaat ziet er als volgt uit:

Het volgende voorbeeld kwam naar voren toen ik op meerdere (gelijke) velden dezelfde validatie wilde gebruiken. Vooral als het een dynamisch aantal is,bv soms 3 en soms 20, dan kun je niet 1 voor 1 de velden gaan benoemen.

Dan is het handiger om al deze velden dezelfde ‘class’ te geven en aan deze ‘class’ een validatie te hangen:

$(document).ready(function() {
var validator = $("form:first").validate({
validClass: "success"
});
$.validator.addMethod("cMinlength", $.validator.methods.range, $.format("{0} tot {1}"));
$.validator.addClassRules("waardering", {  cMinlength: [1,10] });
});

We zien weer dat we aan het eerste form een validate event koppelen en dat we aan de validator een nieuwe methode toevoegen. Dat is een eigen methode zoals required of email al bestaat die we dan later aan een control kunnen koppelen.

Hier maken we een eigen methode die we cMinlength noemen en die van het standaard type range is. Daarna geven we de message weer die getoond moet worden als het veld niet aan de validatie voldoet.

Vervolgens koppelen we deze methode, met de parameters voor de range methode namelijk minimaal 1 en maximaal 10, aan alle controls die een class attribuut waardering hebben. (<input id=”waardering1″ class=”waardering” name=”waardering1″ type=”text” value=”" />)

Tot slot het stukje validclass:”succes”

In 1 van de voorbeelden over Jquery validation stond dit genoemd: laat niet alleen fouten zien, maar laat ook zien als een veld wel voldoet aan de validatie.

Met deze regel code wordt de css style ‘succes’ aan elk veld toegevoegd dat de validatie succesvol doorloopt.

Als we deze css gebruiken

input[type="text"].success {
background: url("/Resources/checked.gif") no-repeat center left;
padding-left: 15px;
width: 185px;
}

dan ziet een goed ingevuld veld er zo uit:

Tot slot de pagina van het Jquery validation framework:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Snelle SVN installatie met VisualSVN

Een tijdje geleden heb ik op een project gewerkt met SVN voor source control.
Meestal werk je als Microsoft developer met VSS (Visual Source Safe) of TFS (Team Foundation Server) maar voor een klein project was ik best gecharmeerd geraakt van SVN tezamen met Tortoise  als client tool.

Vooral het principe dat er geen bestanden read-only worden gemarkeerd en je lekker kunt editen, ook off-line, vond ik erg ok.
Waar ik echter tegenop zag was het installeren van een SVN server; de how-to pagina’s waren niet altijd even consistent en helder.
Maar wat is er nu (of misschien al langer, maar voor mij is het er nu): Visual SVN.

Een Next, Next, Finish installatie van SVN.
Geprobeerd, en het werkt. Dus ook voor kleinere projecten of 1-mans projecten waar je source control wilt gebruiken (al is het alleen maar om een dolgedraaide designer te kunnen rollbacken) een mooie oplossing.

The Scott

Hij was er, wel een van de meest bekende mensen en sprekers van- en over .Net: Scott Guthrie.
Verantwoordelijk voor een groot deel van .Net, webforms en het verhaal gaat dat hij de grote lijnen van ASP.Net MVC in een vliegtuig in elkaar heeft getimmerd.
Hij was in Engeland en Nederland, en de vrienden van DotNed hebben het voor mekaar gekregen om hem als spreker te boeken. Afas was zo vriendelijk de sessie te hosten, en het was in 1 woord geweldig.
Wat een ervaring, wat een enthousiasme, wat een drive, wat eigenlijk niet?
Daar staat dus een van de grote mensen van Microsoft voor 250 man in Nederland te vertellen over ASP.Net MVC en over Visual Studio 2010. En dan niet een standaard sales praatje of een schrale demo, maar twee keer 2 1/2 uur praten. En hoe! vol enthousiasme en plezier vertelt hij de dingen alsof hij ze pas net heeft ontdekt.
Een genot om deze man mee te maken, veel wijzer geworden en een leuke avond gehad.