Visual Studio Guides

Vous aurez d’ici peu un tuto sur les différentes conventions à suivre lors du développement d’application.

Mais tout de suite, comment faire une belle ligne d’aide sur Visual Studio pour ne pas dépassé les 80 caractères conventionnels.

 2003: HKEY_CURRENT_USER\Software\MicrosoftVisualStudio\7.1\Text Editor
 2005: HKEY_CURRENT_USER\Software\MicrosoftVisualStudio\8.0\Text Editor
 2008: HKEY_CURRENT_USER\Software\MicrosoftVisualStudio\9.0\Text Editor
 2008 Express: HKEY_CURRENT_USER\Software\MicrosoftVCExpress\9.0\Text Editor

En fonction de votre Visual Studio, vous devriez trouver cette clé.

Maintenant rajouter une valeur chaine à l’intérieur nommé Guides.
Double cliquer dessus pour lui insérer la valeur : RGB(186,0,0) 80, 120

RGB(186,0,0) indique la couleur. Suivit par tous les emplacements ou vous souhaite insérer une colonne d’indication (pour moi 80 et 120).

Source

CSS3

Depuis l’arrivé du CSS3, les sites web ont pris un coûts de jeune assez fulgurant. On peut réaliser des choses assez impressionnantes.

Voici un petit condensé du CSS3 et des nouvelles fonctionnalités qui ont retenu mon attention de néophytes du développement web :

• background-size
• border-raduis
• opacity
• word-wrap
• resize

Tous les exemples partiront d’une simple boîte (carré de 150px de côté, avec un fond bleu et des bordures noir) :

box{
	display : inline-block;
	margin : 0 40px;
	width : 150px; height : 150px;
	font-size : 1.2em; color : red;
	border : solid 3px; border-color : black;
	background-color : blue;
}

Background-size

Le background-size permet de remplir un div ou un span avec un éléement (une image). Par défaut, si vous insérer une image dans un div, l’image gardera sa taille définit et ce sera à vous de gérer la taille du composant qui l’englobe. Maintenant vous pourrez mettre n’importe quelle image dans n’importe qu’elle div. Lui indiqué qu’il doit prendre 100% de la place dispobible, 100px ou même 100px de large et 100% de hauteur.

/** Une simple image **/
#box1{
	background-image : url(img1.png);
	background-repeat : no-repeat;
}
/** On force la taille au maximum avec la même image **/
#box2{
	background-image : url(img1.png);
	background-repeat : no-repeat;
	background-size : 100px 100%;
}
/** On force la taille de l'image à 100px **/
#box3{	
	background-image : url(img1.png);
	background-repeat : no-repeat;
	background-size : 70px 70px;
}

Résultat :

Mise en Application :

<p> Démonstration du Background-Size </p>
<div id=box1 class=box>Taille Réel </div>
<div id=box2 class=box>Remplissage</div>
<div id=box3 class=box>Taille définit</div>

Border-Radius

Le border-radius réconforte beaucoup de designer qui “trichait” pour avoir un beau bouton. Il permet de créer des arrondis sur les angles. Enfin !!!! Vous l’attendiez, n’est-ce pas ? Finit la création des boutons avec des images.

/**Angle des Bords**/
#AngleBord1{
	border-radius: 25px;
}
#AngleBord2{
	border-radius: 10px;
}
#AngleBord3{
	border-radius: 0px;
}
#AngleBord4{
	border-top-right-radius : 25px;
	border-top-left-radius : 20px;
	border-bottom-left-radius : 15px;
	border-bottom-right-radius : 0px;
}

Opacity

/**Opacité**/
#Opac1{
	opacity:1;
}
#Opac2{
	opacity:0.5;
}
#Opac3{
	opacity:0.2;
}

En cours de rédaction

Word-wrap

/**Word-Wrap**/
#word1{
	word-wrap:normal;
	overflow:hidden;
}
#word2{
	word-wrap:break-word;
	overflow:hidden;	
}

En cours de rédaction

resize

/**Redimensionnemment**/
#resize1{
	resize: both;
	overflow: auto;
}
#resize2{
	resize: vertical;
	max-height : 200px;
	overflow: auto;
}
#resize3{
	resize: horizontal;
	min-width : 100px;
	overflow: auto;
}

En cours de rédaction

Volatile – C#

Petit cours de C#

Vous connaissez sûrement les différents modificateur d’accès C#. const, readonly, static. Mais volatile ??

http://msdn.microsoft.com/fr-fr/library/x13ttww7(v=vs.80).aspx

Volatile c’est une manière d’obtenir la dernière valeur d’une variable. Rien ne vaut l’exemple :

 class Test {
    int foo;
    static void Main()
    {
        var test = new Test();
        new Thread(delegate() { Thread.Sleep(500); test.foo = 255; }).Start();
        while (test.foo != 255) ;
        Console.WriteLine("OK");
    }
}

//output rien du tout
//si on rajoute volatile : output : OK

Attention il faut lancé sans le mode débogage (Ctrl + F5)

Exemple tiré de StackOverflow ici.

Sans déclaré volatile, le code est optimisé et donc le programme ne va pas chercher la nouvelle valeur de ‘foo’ qui reste donc à 0. Et le code va attendre à la ligne while (test.foo != 255) ;

En déclarant foo volatile, lorsque la variable est modifié par un autre processus, l’impact se fait ressentir sur tous les processus, puisque le programme va aller chercher la valeur à chaque fois. Ainsi au bout des 500ms du thread le message OK va apparaître.

JSON

Le JSON (JavaScript Object Notation). Vous en avez peut-être entendu parlé sans plus.
C’est un peu l’évolution du XML, en moins verbeux, avec les commentaires et toujours aussi simple. Mais surtout pour améliorer l’utilisation.

Exemple :

{
     "firstName": "John",
     "lastName" : "Smith",
     "age"      : 25,
     "other"      : null,
     "male"      : true,
     "address"  :
     {
         "streetAddress": "21 2nd Street",
         "city"         : "New York",
         "state"        : "NY",
         "postalCode"   : "10021"
     },
     "phoneNumber":
     [
         {
           "type"  : "home",
           "number": "212 555-1234"
         },
         {
           "type"  : "fax",
           "number": "646 555-4567"
         }
     ]
 }

Equivalent XML :

<?xml version="1.0" encoding="UTF-8" ?>
	<firstName>John</firstName>
	<lastName>Smith</lastName>
	<age>25</age>
	<other />
	<male>true</male>
	<address>
		<streetAddress>21 2nd Street</streetAddress>
		<city>New York</city>
		<state>NY</state>
		<postalCode>10021</postalCode>
	</address>
	<phoneNumber>
		<type>home</type>
		<number>212 555-1234</number>
	</phoneNumber>
	<phoneNumber>
		<type>fax</type>
		<number>646 555-4567</number>
	</phoneNumber>

Comment on construit un JSON ?? Simplement avec : 2 éléments structure : clé / valeur et les tableaux.

« phoneNumber » est la clé et sa valeur est un tableau (via les crochets [])

Chaque items du tableau se situe dans des accolades { } et les différentes clé / valeur sont séparé par des virgules

Et le système est repris. Ainsi pour la clé « firstname » la valeur est « John ». Aussi simplement que ça.

Mais qu’elle sont les valeurs que l’on peut mettre?? Uniquement du texte ? Non évidemment, des nombre, des booléens ou même null.En revanche, on enlève les guillemets.

Utilisation :
Si on déclare : var jsonObject = { … le JSON … }

On peut l’utiliser ainsi :

jsonObject.phoneNumber[0].type
//retourne "home" 

Et en passant voici un petit lien pour Convertir du XML et JSON et inversement.
http://jsontoxml.utilities-online.info/