Christian

CSS3 eigene Fonts verwenden: @font-face

Christian Kiefer — Tue, 22 Jan 2013 12:19:00 GMT

Mit CSS3 können nun eigene Fontarten in einer Website verwendet werden, d.h. man ist nicht mehr auf die Standard-Schriftarten wir Arial und Verdana angewiesen.

In CSS3 können folgende Font-typen verwendet werden:

Embedded OpenType (EOT)
TrueType (TTF)
OpenType (OTF)
Scalable Vector Graohics (SVG)
Web Open Font (WOFF)

Die Source-Dateien für die Fonts müssen auf einem Webserver zum Download mit der Seite zur Verfügung stehen (unter http://www.fontsquirrel.com/ gibt es freie Fonts)

Zunächst muss die neue Schriftart mittels CSS3 deklariert werden:

@font-face {
       font-family: 'MeineSchriftart';
       src: url('MeineSchriftart-webfont.eot');
       src: local('☺'), url('MeineSchriftart-webfont.woff') format('woff'), url('MeineSchriftart-webfont.ttf') format('truetype'), url('MeineSchriftart-webfont.svg') format('svg');
       font-weight: normal;
       font-style: normal;
}

Danach kann diese neue Schriftart wie eine Standard-Schriftart verschiedenen Styles zugewiesen werden:

p {
font: 60px/68px 'MeineSchriftart', Arial, sans-serif;
}

Da diese Fonts mit der Webseite heruntergeladen werden müssen, bedeutet dies:
- längere Ladezeit
- Copyright beachten !

Links:
http://www.fontsquirrel.com/
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
Cooles Beispiel: @font-face und a:hover Effekt >>

CSS3 Beispiele im Web

Christian Kiefer — Tue, 12 Feb 2013 11:31:00 GMT

Praktische Hilfsmittel zum Erlernen der neue CSS3- Features sind online CSS3 Generatoren im Web.

Übersichten gibt es hier:
http://www.webdesignerdepot.com/2012/04/15-great-html5-and-css3-generators/
http://www.sitepoint.com/10-best-css3-code-generators/

Hier eine Auswahl:
http://www.css3.me/ (Für Rahmen und Schatten)
http://css-tricks.com/examples/ButtonMaker/ (Buttons)
http://css3buttongenerator.com/ (Buttons)

Coole CSS3 Beispiele:
http://css-tricks.com/downloads/css-stuff/
http://www.designyourway.net/blog/inspiration/css3-html5-experiments-that-will-blow-your-mind-47-examples/
http://www.web3mantra.com/2011/04/13/50-best-css3-examples/

HTML5 und Web Storage

Christian Kiefer — Sat, 09 Feb 2013 09:09:00 GMT

Mit HTML5 kommt im Browser ein neues lokalen storage object und einem session storage object. Dies ist eine Erweiterung und ein Ersatz für die Verwendung von Cookies.

Das lokale storage object erlaubt es benutzerspezifische Daten abzuspeichern und zu einem späteren Zeitpunkt wieder darauf zurückzugreifen (dieser lokale storage umfasst max. 5 MB). Die Daten im storage object bleiben nach dem Schließen des Browsers gespeichert und werden nicht automatisch gelöscht.

Die wichtigsten localStorage-Methoden sind:

localStorage.setItem(“Variable”, “Wert”) - oder localStorage.Variable=”Wert”
localStorage.getItem(“Variable”) - oder localStorage.Variable

Das session storage object kann die Daten nur für die Dauer der Browsersitzung speichern.

Die wichtigsten sessionStorage-Methoden sind:

sessionStorage.setItem(“Variable”, “Wert”) - oder sessionStorage.Variable=”Wert”
sessionStorage.getItem(“Variable”) - oder sessionStorage.Variable

Das folgende Beispiel speichert einen eingegeben Usernamen im local storage object und zeigt den Usernamen beim nächsten Aufruf der Seite wieder an:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            load_settings();
            $('form[name=localStorageTest]').submit(function (e) {
                e.preventDefault();
                save_settings();
            });
        });
        function load_settings() {
            $("#alterUserName").val(localStorage.getItem("UserName"));
        }
        function save_settings() {
            localStorage.setItem("UserName", $("#UserName").val());
            alert('der neue UserName ' + $("#UserName").val() + ' wurde gespeichert');
        }
    </script>
</head>
<body>
    <form name="localStorageTest" action="#" method="post" accept-charset="utf-8">
        gespeicherter UserName:
<input type="text" id="alterUserName" name="alterUserName" readonly="true">
        <br>
        neuer UserName:
<input type="text" id="UserName" name="UserName">
        <br>
        <br>
        <input type="submit" value="speichern">
    </form>
</body>
</html>

HTML5 und Canvas

Christian Kiefer — Sat, 09 Feb 2013 07:35:00 GMT

In HTML5 gibt es jetzt die Möglichkeit innerhalb der Webseite mit JavaScript zu zeichnen.

Hierzu dient das neue Element <canvas>, dieses stellt eine Fläche innerhalb der Webseite zur Verfügung innerhalb derer gezeichnet werden kann:

Die Größe muss vorher angegeben werden und kann anschließend nicht mehr geändert werden.

Mit der JavaScript-Methode document.getElementById() wird auf das canvas-Element zugegriffen werden.

Hiermit ließen sich z.B. mit JavaScript dynamisch Grafiken erstellen.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Drawings</title>
</head>
<body>
     <canvas id="myCanvas" width="300" height="300"></canvas>
     <script type="text/javascript" charset="utf-8">
       var canvas = document.getElementById('myCanvas');
       if (canvas.getContext){
         var context = canvas.getContext('2d');
         context.fillStyle = "rgb(200,0,0)";
         context.fillRect (10, 10, 150, 150);
         context.fillStyle = "rgb(0,200,0)";
         context.fillRect (50, 50, 200, 300);
         context.strokeStyle = "rgb(200,0,0)";
         context.lineWidth = 20;
         context.beginPath();
         context.moveTo(100, 100);
         context.lineTo(280, 280);
         context.stroke();
         context.closePath();
       }
     </script>
     </body>
</html>

Das Beispiel würde so aussehen:

CSS3 Media Queries

Christian Kiefer — Thu, 07 Feb 2013 13:49:00 GMT

Bisher konnte man mit HTML4 einer Webseite zwei StyleSheets zuweisen, eine für die Bildschirmdarstellung, eine für die Darstellung auf dem Drucker:

Mit CSS3 lassen sich jetzt an Hand

Bildschirmauflösung (max-device-width: 123px)
Portrait oder Landscape mode (orientation: landscape / portrait)
Größe des Browserfensters (max-width: 123px)

spezielle Styles zuweisen:

       @media only screen and (max-width: 480px) {
               body{
                    width: 460px;
               }

               #newsletter{
                    -moz-column-count: 1;
                    -webkit-column-count: 1;
               }
             }

Oder direkt eigene Styles zuweisen:

Links:
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://mediaqueri.es/

HTML5 Validierungen von Formularfeldern (ohne JavaScript)

Christian Kiefer — Thu, 07 Feb 2013 11:20:00 GMT

In HTML5 gibt es für die Input-Felder neue Attribute:

placeholder (hier kann man das Input-Feld mit grauem Text vorbelegen)
required (Pflichtfel für die Validierung)
pattern (regular expression für die Validierung)
autofocus (der Cursor wird automatisch in dieses Feld gesetzt)
autocomplete

Die Attribute required und pattern werden für die Validierung der Input-Felder verwendet, dies alles ohne JavaScript.

required
definiert das Input-Feld als Pflichtfeld,

pattern
Hier kann man mittels regular expressions die Validierungsregel für das jeweilige Input-Feld festlegen. Das neue Email Input-Feld validiert sich selbst.

Das folgende Beispiel

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        input:invalid
        {
            background: #fff;
            border-color: #f00;
        }
        textarea:invalid
        {
            background: #fff;
            border-color: #f00;
        }
    </style>
</head>
<body>
    <header>
        <h1>HTML5: Validierung </h1>
        Die Validierung erfolgt ohne Javascript mit regular expressions
    </header>
    <article class="post">
        <form action="#" method="post" id="kontaktformular">
            <fieldset>
                <legend>Kontaktformular</legend>
                <p>
                    <label for="name">Name</label><br />
                    <input type="text" name="name" id="name" value="" required />
                </p>
                <p>
                    <label for="email">Email-Adresse</label><br />
                    <input type="email" name="email" id="email" value="" required />
                </p>
                <p>
                    <label for="rechnungsnummer">Rechnungsnummer</label><br />
                    <input type="text" name="rechnungsnummer" id="rechnungsnummer" value="" required
                        pattern="^[1-9]+[0-9]*$"/>
                </p>
                <p>
                    <label for="message">Nachricht</label><br />
                    <textarea name="message" id="message" cols="20" rows="5" required></textarea>
                </p>
                <p>
                    <input type="submit" name="submit" value="senden" />
                </p>
            </fieldset>
        </form>
    </article>
</body>
</html>

erzeugt folgende Seite

HTML5 Einbinden von Audio- und Videodateien

Christian Kiefer — Tue, 05 Feb 2013 10:56:00 GMT

In HTML5 können Audio- und Video-Elemente direkt eingefügt werden, es sind keine Flash-Plugins mehr möglich:

Beispiele:

<audio controls>
<source src="Alma.mp3" type="audio/mp3" />
<p>Ihr Browser unterstützt kein HTML5 Audio-Tag</p>
</audio>

<video controls width="450">
<source src="Volcadas.mp4" type="video/mp4" />
<p>Ihr Browser unterstützt kein HTML5 Video-Tag</p>
</video>

sieht dann so aus:

CSS3 Schatten

Christian Kiefer — Sat, 02 Feb 2013 10:07:00 GMT

Mit CSS3 lassen sich jetzt um Objekte einfach Schatten legen.

Die CSS3-Syntax hierfür lautet: box-shadow: 15px 15px 15px #333;

Der folgende Code

        #bereich1 {
            text-align: center;
            width: 200px;
            border: 2px solid red;
            float: left;
            background-color: #fff;
            margin-right: 40px;
        }

            #bereich1 h2 {
                margin: 0;
                color: red;
                font-size: 30px;
            }

            #bereich1 h3 {
                margin: 0;
                background-color: red;
                color: #fff;
            }

        #bereich1 {
            box-shadow: 15px 15px 15px #333; /* Standard */
            -moz-box-shadow: 15px 15px 15px #333; /* Firefox */
            -webkit-box-shadow: 15px 15px 15px #333; /* WebKit */
            -o-box-shadow: 15px 15px 15px #333; /* Opera */
        }

        #textbox {
            -moz-box-shadow: 10px 10px 10px #333;
            -webkit-box-shadow: 10px 10px 10px #333;
            -o-box-shadow: 10px 10px 10px #333;
            box-shadow: 10px 10px 10px #333;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div>
        <section id="bereich1">
            <h3>Sonderangebot</h3>
            <h2>nur heute</h2>
        </section>
        <section>
            <form action="#" method="post">
                <input type="text" id="textbox" />
            </form>
        </section>
    </div>
</body>
</html>

erzeugt diese Seite:

Link:
http://www.css3-generator.de/box-shadow.html

CSS3 gedrehte Objekte (transform)

Christian Kiefer — Sat, 02 Feb 2013 16:22:00 GMT

Mit CSS3 lassen sich Objekte drehen die geht mit einzelnen Sections aber auch mit Textboxen.

Die CSS3-Syntax hierfür lautet: transform: rotate(x.xdeg);

(Transform hat noch weitere Möglichkeiten: Translate, Scale, Skew)

Der folgende Code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            padding: 40px;
        }
        #bereich1 {
            text-align: center;
            width: 200px;
            border: 2px solid red;
            float: left;
            background-color: #fff;
            margin-right:40px;
        }
            #bereich1 h2 {
                margin: 0;
                color: red;
                font-size: 30px;
            }
            #bereich1 h3 {
                margin: 0;
                background-color: red;
                color: #fff;
            }
        #bereich1 {
            -moz-transform: rotate(-7.5deg);
            -o-transform: rotate(-7.5deg);
            -webkit-transform: rotate(-7.5deg);
            -ms-transform: rotate(-7.5deg);
            transform: rotate(-7.5deg);
        }
        #textbox {
            -moz-transform: rotate(7.5deg);
            -o-transform: rotate(7.5deg);
            -webkit-transform: rotate(7.5deg);
            -ms-transform: rotate(7.5deg);
            transform: rotate(7.5deg);
            background-color:aliceblue;
        }
    </style>
</head>
<body>
    <div>
        <section id="bereich1">
            <h3>Sonderangebot</h3>
            <h2>nur heute</h2>
        </section>
        <section>
            <form action="#" method="post">
                <input type="text" id="textbox" />
            </form>
        </section>
    </div>
</body>
</html>

erzeugt diese Seite:

Links:
http://www.css3-generator.de/transform.html

CSS3 runde Ecken

Christian Kiefer — Fri, 01 Feb 2013 15:48:00 GMT

Mit CSS3 lassen sich runde Ecken generieren und dies auch in Textfeldern (Webdesigner werden sich freuen):

Hier gibt es die Syntax: border-radius: 12px;

Für ältere Versonen von Firefox: -moz-border-radius, für ältere Versionen von Safari: -webkit-border-radius

Dieser Beispielcode

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #bereich1 {
            width: 400px;
            height: 200px;
            text-align: center;
            background-color: #ccc;
            border-radius: 12px;
        }
        .textbox1 {
            border-radius: 12px;
        }
        .textbox2 {
            border-radius: 36px /12px;
        }
    </style>
</head>
<body>
    <div>
        <section id="bereich1">
            <form action="#" method="post">
                <br />
                <input type="text" class="textbox1" id="textbox1" name="textbox1" /><br /><br />
                <input type="text" class="textbox2" id="textbox2" name="textbox2" />
            </form>
        </section>
    </div>
</body>
</html>

erzeugt diese Seite:

CSS3 neue Pseudoklassen

Christian Kiefer — Fri, 25 Jan 2013 12:34:00 GMT

Pseudoklassen werden in CSS verwendet um einzelne Elemente zu formatieren z.B. “a:hover”.

In CSS3 sollen 16 neue Pseudoklassen hinzukommen. Hier eine kurze Beschreibung der wichtigsten neuen Pseudoklassen:

:nth-child(N)
Das nte(n) Child-Element(e) vom Anfang aus auswählen formatieren

:nth-last-child(N)
Das nte(n) Child-Element(e) vom Ende aus auswählen und formatieren

:last-child
Das letzte Childelement auswählen

:nth-of-type(N)
Das nte(n) Element(e) X vom Anfang aus auswählen formatieren

:nth-last-of-type(N)
Das nte(n) Element(e) X vom Ende aus auswählen und formatieren

:first-of-type
Das erste Element(e) X vom Anfang aus auswählen formatieren

:last-of-type
Das letzte Element(e) X auswählen und formatieren

(N) steht für:

Anzahl und Position der Child-Elemente
oder even / odd

Ein Beispiel mit einer Tabelle wird die Vorteile der Pseudoklassen verdeutlichen:

Eine gegebene Tabelle sieht so aus:

              <table >
                  <tr>
                    <th>Position</th>
                    <th>Preis</th>
                    <th>Anzahl</th>
                    <th>Summe</th>
                  </tr>
                  <tr>
                    <td>Turnschuhe</td>
                    <td>150.00</td>
                    <td>1</td>
                    <td>150.00</td>
                  </tr>
                  <tr>
                    <td>Polo shirt</td>
                    <td>50.00</td>
                    <td>2</td>
                    <td>100.00</td>
                  </tr>
                  <tr>
                    <td>Sporthose</td>
                    <td>49.00</td>
                    <td>2</td>
                    <td>98.00</td>
                  </tr>
                  <tr>
                    <td colspan="3">Zwischensumme</td>
                    <td>348.00</td>
                  </tr>
                  <tr>
                    <td colspan="3">Versand</td>
                    <td>12.00</td>
                  </tr>
                  <tr>
                    <td colspan="3">Gesamtsumme</td>
                    <td>360.00</td>
                  </tr>
                </table>

Das Stylesheet:

/* Tables */
table {
    border: 1px solid #e7e7e7;
    border-collapse: collapse; border-spacing: 0;
    font-size: 14px;
    width: 100%;
    text-align: left;
}

/* th */
tr th {
    background: #f3f9fc;
    border-left: 1px solid #e9f2f7;
    color: #444;
    font-size: 15px;
    font-weight: bold;
    padding: 9px 24px;
}

/* td */
tr td {
    background: #fafafa;
    border: 1px solid #e7e7e7;
    padding: 6px 24px;
}

td { vertical-align: top; }

CSS3

td:nth-child(n+2){
text-align:right;
}

tr:nth-last-child(-n+3) td {
text-align: right;
}

tr:last-child, td:last-child{
font-weight: bolder;
}

tr:nth-last-child(2){
color:green;
}

tr:last-child td:last-child{
font-size: 24px;
}

Das Layout würde nun so aussehen:

Links:
http://reference.sitepoint.com/css/css3psuedoclasses
http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/

HTML5 Neue Input-Felder und Attribute

Christian Kiefer — Thu, 17 Jan 2013 10:19:00 GMT

Mit HTML5 kommen einige neue Input-Felder und neue Input-Felder-Attribute.

Einige Beispiele sind:

Email (Akzeptiert bei der Validierung nur Email-Adressen)
range (Schieberegler)
number (lässt nur Nummern zu)
date (stellt eine Kalenderansicht zur Verfügung)
color (stellt eine Farbauswahl zur Verfügung)

Neue Input-Felder-Attribute sind:

placeholder (hier kann man das Input-Feld mit grauem Text vorbelegen)
required (für die Validierung)
autofocus (der Cursor wird automatisch in dieses Feld gesetzt)
autocomplete

Die neuen Input-Felder arbeiten ohne JavaScript und werden von den HTML5-fähigen Browsern auf den verschiedenen Plattformen (Desktop, Tablet-PC) korrekt umgesetzt.

Das Folgende Beispiel:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>
    <header>
        <h1>Neue HTML5 Input-Felder und Attribute</h1>
    </header>

    <table>
        <tr>
            <td>normales Textfeld</td>
            <td><input type="text" autofocus /></td>
            <td> </td>
            <td>mit Attribut autofocus</td>
        </tr>
        <tr>
            <td>normales Textfeld</td>
            <td><input type="text" placeholder="Vorname Nachname" /></td>
            <td> </td>
            <td>mit Attribut placeholder</td>
        </tr>

        <tr>
            <td>type Email</td>
            <td><input type="email" placeholder="name@firma.de" /></td>
            <td> </td>
            <td>mit Attribut placeholder</td>
        </tr>

        <tr>
            <td>type search</td>
            <td><input type="search" placeholder="Suchbegriff..." /></td>
            <td> </td>
            <td>mit Attribut placeholder</td>
        </tr>

        <tr>
            <td>type range</td>
            <td><input type="range" /></td>
            <td> </td>
            <td> </td>
        </tr>

        <tr>
            <td>type number</td>
            <td><input type="number" /></td>
            <td> </td>
            <td> </td>
        </tr>

        <tr>
            <td>type color</td>
            <td><input type="color" /></td>
            <td> </td>
            <td> </td>
        </tr>
    </table>

</body>
</html>

sieht unter Google Chrome so aus:

(Chrome ist zur Zeit der einzige Browser der die neuen HTML5 Input-Felder unterstützt)

HTML5 / CSS3 und die Browser-Versionen

Christian Kiefer — Fri, 04 Jan 2013 11:45:00 GMT

Laut dem Zeitplan des W3C soll HTML5 2014 offiziell verabschiedet, d. h. zu einer W3C Recommendation werden. Doch schon jetzt werden Frontends mit HTML5 entwickelt.

Es gibt zwei nützliche Webseiten welche zeigen welche HTML5 und CSS3 Tags von welchem Browser unterstützt werden:

http://www.html5test.com
Diese Seite bewertet den Browser mit welchem diese Seite aufgerufen wurde in Bezug auf die Anzahl der unterstützten HTML5 und CSS3-Tags.

Google Chrome schneidet hier am besten ab:

http://caniuse.com
Diese Seite zeigt an welcher Browser ab welcher Version welches HTML5 und/oder CSS3-Tag unterstützt, z.B. das Tag „Video“:

Testseite für JSON

Christian Kiefer — Tue, 18 Dec 2012 14:35:00 GMT

Wenn man den generierten JSON-Code testen möchte, dann kann man das hier tun:
http://jsonlint.com/

Performanceoptimierung für Webseiten

Christian Kiefer — Thu, 13 Dec 2012 09:55:00 GMT

Für die Performanceoptimierung für Webseiten gibt es verschiedene Tools, einige sind hier aufgeführt:

Mit dem Add-on “PageSpeed” von Google für Firefox (und Chrome) lässt sich das Add-on Firebug um den neuen Menüpunkt “Page Speed” erweitern.

Download: https://developers.google.com/speed/pagespeed/

Das Modul PageSpeed überprüft die aktuell geladene Seite an Hand verschiedener Regeln und gibt Tipps zur Verbesserung der Performance der Webseite:

Mit dem Add-on “YSlow” für FireFox (und Chrome) gibt es ein weiteres Tool:

Download: http://yslow.org/

Dieses Add-on überprüft die aktuell geladene Seite an Hand von Yahoo empfohlenen Regeln. Nach der Installation ist das Add-on über die Statuszeile des Firefox-Browsers aufrufbar:

Einen Online-Performancetext findet man unter: http://www.webpagetest.org/

Dieses Gibt neben den Regeln ähnlich wie bei YSlow auch ein Wasserfall-Diagramm der Ladezeiten aus:

AJAX-Aufruf mit jQuery und C#

Christian Kiefer — Fri, 23 Nov 2012 12:42:00 GMT

Für’s Archiv ein Beispiel für einen AJAX-Aufruf mit jQuery und C#:

Zunächst die JavaScript-Klasse:

var ExampleEditHandler = {
    StartEdit: function (sender, args) {
        if (args.buttonID == "csEdit") {
            var id = grid.GetRowKey(args.visibleIndex);

            $.ajax({
                type: "POST",
                url: "Example.aspx/GetComponent",
                data: "{ 'id' : '" + id + "' }",    //Komma getrennnt
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: ExampleEditHandler.fnAjaxSuccess,
                error: ExampleEditHandler.fnAjaxError
            });
        }
    },
    fnAjaxSuccess: function (msg) {
        var component = msg.d;
        _ID = component.MetaData.CTRLSY_IDENTIFIER;
        ExampleEditHandler.ShowDialog(component);
    },
    fnAjaxError: function () {
        alert("Es ist ein Fehler aufgetreten :-(");
    }
}

Die AJAX-Methode ruft eine Webmethod aus der Datei Example.ascx.cs auf:

[WebMethod]
public static DBOBject GetComponent(Guid id)
{
return …
}

und erhält das Rückgabe Objekt als JSON-Objekt.

Wenn bei der Abfrage kein Fehler aufgetreten ist, dann geht es mit der unter “success” angegeben JavaScript-Funktion weiter. Bei einem Fehler wird die JavaScript-Funktion “error” ausfgerufen.

Umgebungsvariablen von Visual Studio ausgeben lassen

Christian Kiefer — Thu, 08 Nov 2012 11:40:00 GMT

Manchmal kann es sinnvoll sein sich die Umgebungsvariablen von Visual Studio ausgeben zu lassen.

Dies kann man auf die folgende Weise tun:

In den Eigenschaften eines Visual Studio Projektes kann man unter Buildereignisse | Befehlszeile für Postbuildereignis

die folgenden Zeilen hineinkopieren:

echo "RemoteMachine:" $(RemoteMachine) >> c:\projekte\test.txt
echo "References:" $(References) >> c:\projekte\test.txt
echo "ConfigurationName:" $(ConfigurationName) >> c:\projekte\test.txt
echo "PlatformName:" $(PlatformName) >> c:\projekte\test.txt
echo "Inherit:" $(Inherit) >> c:\projekte\test.txt
echo "NoInherit:" $(NoInherit) >> c:\projekte\test.txt
echo "StopEvaluating:" $(StopEvaluating) >> c:\projekte\test.txt
echo "ParentName:" $(ParentName) >> c:\projekte\test.txt
echo "RootNameSpace:" $(RootNameSpace) >> c:\projekte\test.txt
echo "IntDir:" $(IntDir) >> c:\projekte\test.txt
echo "OutDir:" $(OutDir) >> c:\projekte\test.txt
echo "DevEnvDir:" $(DevEnvDir) >> c:\projekte\test.txt
echo "InputDir:" $(InputDir) >> c:\projekte\test.txt
echo "InputPath:" $(InputPath) >> c:\projekte\test.txt
echo "InputName:" $(InputName) >> c:\projekte\test.txt
echo "InputFileName:" $(InputFileName) >> c:\projekte\test.txt
echo "InputExt:" $(InputExt) >> c:\projekte\test.txt
echo "ProjectDir:" $(ProjectDir) >> c:\projekte\test.txt
echo "ProjectPath:" $(ProjectPath) >> c:\projekte\test.txt
echo "ProjectName:" $(ProjectName) >> c:\projekte\test.txt
echo "ProjectFileName:" $(ProjectFileName) >> c:\projekte\test.txt
echo "ProjectExt:" $(ProjectExt) >> c:\projekte\test.txt
echo "SolutionDir:" $(SolutionDir) >> c:\projekte\test.txt
echo "SolutionPath:" $(SolutionPath) >> c:\projekte\test.txt
echo "SolutionName:" $(SolutionName) >> c:\projekte\test.txt
echo "SolutionFileName:" $(SolutionFileName) >> c:\projekte\test.txt
echo "SolutionExt:" $(SolutionExt) >> c:\projekte\test.txt
echo "TargetDir:" $(TargetDir) >> c:\projekte\test.txt
echo "TargetPath:" $(TargetPath) >> c:\projekte\test.txt
echo "TargetName:" $(TargetName) >> c:\projekte\test.txt
echo "TargetFileName:" $(TargetFileName) >> c:\projekte\test.txt
echo "TargetExt:" $(TargetExt) >> c:\projekte\test.txt
echo "VSInstallDir:" $(VSInstallDir) >> c:\projekte\test.txt
echo "VCInstallDir:" $(VCInstallDir) >> c:\projekte\test.txt
echo "FrameworkDir:" $(FrameworkDir) >> c:\projekte\test.txt
echo "FrameworkVersion:" $(FrameworkVersion) >> c:\projekte\test.txt
echo "FrameworkSDKDir:" $(FrameworkSDKDir) >> c:\projekte\test.txt
echo "WebDeployPath:" $(WebDeployPath) >> c:\projekte\test.txt
echo "WebDeployRoot:" $(WebDeployRoot) >> c:\projekte\test.txt
echo "SafeParentName:" $(SafeParentName) >> c:\projekte\test.txt
echo "SafeInputName:" $(SafeInputName) >> c:\projekte\test.txt
echo "SafeRootNamespace:" $(SafeRootNamespace) >> c:\projekte\test.txt
echo "FxCopDir:" $(FxCopDir) >> c:\projekte\test.txt

In diesem Beispiel würden die Umgebungsvariablen in die Datei “c:\projekte\test.txt” geschrieben.

Eine Übersicht der Umgebungsvariablen findet man unter:
http://msdn.microsoft.com/en-us/library/c02as0cs(v=vs.71).aspx

Die Excel-Export Funktion von DevExpress-GridView anpassen

Christian Kiefer — Fri, 26 Oct 2012 10:25:00 GMT

In der Standard Excel-Export Funktion vom GridView von DevExpress werden die Werte der Checkboxen mit "markiert" oder "nicht markiert" exportiert.

Wenn man diese Werte ändern möchte kann man sich an das Event "RenderBrick" anhängen und die Werte für die Checkboxen ändern.

protected override void OnInit(EventArgs e)
{
    ASPxGridViewExporter1.RenderBrick += new DevExpress.Web.ASPxGridView.Export.ASPxGridViewExportRenderingEventHandler(ASPxGridViewExporter1_RenderBrick);
}

void ASPxGridViewExporter1_RenderBrick(object sender, DevExpress.Web.ASPxGridView.Export.ASPxGridViewExportRenderingEventArgs e)
{
    if(e.Column.GetType() == typeof(GridViewDataCheckColumn) && e.RowType == GridViewRowType.Data)
    {
        if((bool)e.Value == false)
        {
            e.Text = "N";
        }
        else
        {
            e.Text = "J";
        }
    }
}

Beispiel für ein JavaScript-EasterEgg

Christian Kiefer — Wed, 10 Oct 2012 10:20:00 GMT

Manchmal kann es sinnvoll sein in einer Webseite ein sogenannten “EasterEgg” zu verstecken, z.B. wenn man die Testpersonen animieren möchte alle Details einer Webseite zu testen.

Hier ein Beispiel für ein “EasterEgg”:

        function start() {
            aktiv = window.setInterval('A()', 50);
        }
    </script>

Dieses Javascript liest alle DIV-Elemente aus und lässt diese auf der Webseite langsam nach unten bewegen.

JavaScript, AJAX und C#

Christian Kiefer — Thu, 20 Sep 2012 10:11:00 GMT

Mit diesem kleinen C# Skript kann man veranlassen, das nach einem Postback im UpdatePanel einer Webseite eine JavaScript-Funktion ausgeführt wird:

string link = "../ShowHistory.aspx?Tabelle=Person&ID=" + id;

ScriptManager.RegisterStartupScript(this, this.GetType(), "refresh", "window.open('" + link + "','mywindow','scrollbars=1,resizable =1,width=900,height=600')", true);

LogonAS mit C#

Christian Kiefer — Tue, 04 Sep 2012 10:08:00 GMT

Für mein Archiv ein Beispiel wie man sich per C# als ein anderer User Anmelden kann:

using System;
using System.Collections.Generic;
using System.Text;
using System.Runtime.InteropServices;
using System.Security.Principal;
using System.ComponentModel;
using System.Threading;
namespace Company.Tests

{
    public class LogonAs : IDisposable
    {
        [DllImport("kernel32", CharSet = CharSet.Auto, SetLastError = true, ExactSpelling = true)]
        public static extern int CloseHandle(IntPtr hObject);

        [DllImport("advapi32.dll", SetLastError = true)]
        public static extern int LogonUser(
            string lpszUsername,
            string lpszDomain,
            string lpszPassword,
            int dwLogonType,
            int dwLogonProvider,
            out IntPtr phToken
            );

        [DllImport("advapi32.dll", CharSet = CharSet.Auto, SetLastError = true)]
        public static extern int DuplicateToken(IntPtr hToken,
            int impersonationLevel,
            ref IntPtr hNewToken);

[DllImport("kernel32.dll", CharSet = CharSet.Auto)]
public static extern bool RevertToSelf();

const int LOGON32_LOGON_INTERACTIVE = 2;
const int LOGON32_PROVIDER_DEFAULT = 0;

        // Call LogonUser to get a token for the user
        IntPtr hToken = IntPtr.Zero;
        IntPtr hTokenDuplicate = IntPtr.Zero;
        WindowsIdentity wi;
        static WindowsImpersonationContext impersonationContext;
        public LogonAs(string domain, string user, string password)
        {
            Thread.Sleep(3000); // this helps when us we run more then 1 Unit-test on WinFiler mostly and on NetApp sometimes
            int loggedOn = LogonUser(user, domain, password, LOGON32_LOGON_INTERACTIVE, LOGON32_PROVIDER_DEFAULT, out hToken);
            if (loggedOn != 0)
            {
                if (DuplicateToken(hToken, 2, ref hTokenDuplicate) != 0)
                {
                    wi = new WindowsIdentity(hTokenDuplicate);
                    impersonationContext = wi.Impersonate();
                }
            }
            else
            {
                throw new Win32Exception(Marshal.GetLastWin32Error());
            }
        }

        #region IDisposable Members
        public void Dispose()
        {
            if (hToken != IntPtr.Zero)
                CloseHandle(hToken);

if (hTokenDuplicate != IntPtr.Zero)
CloseHandle(hTokenDuplicate);

if (impersonationContext != null)
impersonationContext.Undo();

            //RevertToSelf();
        }
        #endregion
    }
}

LINQ auf eine DataTable

Christian Kiefer — Thu, 16 Aug 2012 14:26:00 GMT

Für mein Archiv:

stringparentID = this.DataTableInstallation.AsEnumerable().Where(r => r.Field<string>("ID") == id).First()["ParentID"].ToString();

Lustige Übersetzung in VISO 2010: “Rechteckiger Tisch”

Christian Kiefer — Fri, 27 Jul 2012 14:23:00 GMT

In Visio 2010 habe ich folgende lustige Übersetzung gefunden:

Business Objekte und Reflektion

Christian Kiefer — Fri, 13 Jul 2012 09:02:00 GMT

Fürs Archiv ein Beispiel wie man per Reflection einem Objekt Daten zuweisen kann:

public static void AllocateDataToObject<T>(T bo, IList<string> fields, System.Collections.IDictionary values)
{
   Type type = bo.GetType();
   PropertyInfo propertyInfo;
   foreach (var field in fields)
   {
      propertyInfo = type.GetProperty(field);
      try
      {
         if (propertyInfo.PropertyType.FullName == "System.Int32")
         {
            propertyInfo.SetValue(bo, Convert.ToInt16(values[field], CultureInfo.CurrentCulture), null);
         }
         else if (propertyInfo.PropertyType.FullName == "System.Boolean")
         {
            propertyInfo.SetValue(bo, Convert.ToBoolean(values[field], CultureInfo.CurrentCulture), null);
         }
         else
         {
            propertyInfo.SetValue(bo, Convert.ToString(values[field], CultureInfo.CurrentCulture), null);
         }
      }
      catch (Exception ex)
      {
         Utils.ErrorHandling.HandleException(ex);
      }
   }
}

Daten an ein DevExpress ASPxTreeView-Control übergeben

Christian Kiefer — Fri, 22 Jun 2012 08:56:00 GMT

Wenn man die Daten für ein ASPxTreeView-Control von DevExpress dynamisch generieren und übergeben möchte, dann kann man auf die folgende Weise vorgehen.

Zunächst wird eine DataTable mit dem folgenden Aufbau benötigt:

DataTable dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("Title", typeof(string));
dt.Columns.Add("ParentID", typeof(int));
dt.Columns.Add("URL", typeof(string));
dt.PrimaryKey = new DataColumn[] { dt.Columns["ID"] };

Diese DataTable wird mittels einer Methode nach den entsprechenden Anforderungen mit Daten befüllt. In das Feld ParentID kommt die ID des Eintrages welchem der aktuelle Eintrag zugeordnet werden soll.

Anschließend wird diese DataTable sowie die ID des ASPxTreeView-Controls an die folgende Methode übergeben.

private void CreateTreeViewNodesRecursive(DataTable table, TreeViewNodeCollection nodesCollection, string parentID)
{
   for (int i = 0; i < table.Rows.Count; i++)
   {
      if (table.Rows[i]["ParentID"].ToString() == parentID)
      {
         TreeViewNode node = new TreeViewNode(table.Rows[i]["Title"].ToString(),
            table.Rows[i]["ID"].ToString(), string.Empty, table.Rows[i]["URL"].ToString());
         nodesCollection.Add(node);
         this.CreateTreeViewNodesRecursive(table, node.Nodes, node.Name);
      }
   }
}

Diese Methode geht die Einträge der DataTable rekursiv durch und baut den Navigationsbaum zusammen.