Christian

Tuesday, January 22, 2013

CSS3 eigene Fonts verwenden: @font-face

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

posted @ Tuesday, January 22, 2013 1:19 PM | Feedback (1)

Tuesday, February 12, 2013

CSS3 Beispiele im Web

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/

posted @ Tuesday, February 12, 2013 12:31 PM | Feedback (7)

Saturday, February 09, 2013

HTML5 und Web Storage

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>

posted @ Saturday, February 09, 2013 10:09 AM | Feedback (19)

HTML5 und Canvas

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:

posted @ Saturday, February 09, 2013 8:35 AM | Feedback (1)

Thursday, February 07, 2013

CSS3 Media Queries

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/

posted @ Thursday, February 07, 2013 2:49 PM | Feedback (0)

HTML5 Validierungen von Formularfeldern (ohne JavaScript)

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

posted @ Thursday, February 07, 2013 12:20 PM | Feedback (4)

Tuesday, February 05, 2013

HTML5 Einbinden von Audio- und Videodateien

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:

posted @ Tuesday, February 05, 2013 11:56 AM | Feedback (3)

Saturday, February 02, 2013

CSS3 Schatten

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

<!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 {
            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

posted @ Saturday, February 02, 2013 11:07 AM | Feedback (2)

CSS3 gedrehte Objekte (transform)

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

posted @ Saturday, February 02, 2013 5:22 PM | Feedback (3)

Friday, February 01, 2013

CSS3 runde Ecken

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:

posted @ Friday, February 01, 2013 4:48 PM | Feedback (3)

Friday, January 25, 2013

CSS3 neue Pseudoklassen

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/

posted @ Friday, January 25, 2013 1:34 PM | Feedback (0)

Thursday, January 17, 2013

HTML5 Neue Input-Felder und Attribute

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)

posted @ Thursday, January 17, 2013 11:19 AM | Feedback (0)

Friday, January 04, 2013

HTML5 / CSS3 und die Browser-Versionen

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“:

posted @ Friday, January 04, 2013 12:45 PM | Feedback (0)

Tuesday, December 18, 2012

Testseite für JSON: Wenn man den generierten JSON-Code testen möchte, dann kann man das hier tun:
http://jsonlint.com/; posted @ Tuesday, December 18, 2012 3:35 PM | Feedback (0)

Thursday, December 13, 2012

Performanceoptimierung für Webseiten

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:

posted @ Thursday, December 13, 2012 10:55 AM | Feedback (3)

Friday, November 23, 2012

AJAX-Aufruf mit jQuery und C#

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.

posted @ Friday, November 23, 2012 1:42 PM | Feedback (1)

Thursday, November 08, 2012

Umgebungsvariablen von Visual Studio ausgeben lassen

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

posted @ Thursday, November 08, 2012 12:40 PM | Feedback (9)

Friday, October 26, 2012

Die Excel-Export Funktion von DevExpress-GridView anpassen

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";
        }
    }
}

posted @ Friday, October 26, 2012 12:25 PM | Feedback (3)

Wednesday, October 10, 2012

Beispiel für ein JavaScript-EasterEgg

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.

posted @ Wednesday, October 10, 2012 12:20 PM | Feedback (2)

Thursday, September 20, 2012

JavaScript, AJAX und C#: 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);; posted @ Thursday, September 20, 2012 12:11 PM | Feedback (0)

Tuesday, September 04, 2012

LogonAS mit C#: 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
    }
}; posted @ Tuesday, September 04, 2012 12:08 PM | Feedback (2)

Thursday, August 16, 2012

LINQ auf eine DataTable

Für mein Archiv:

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

posted @ Thursday, August 16, 2012 4:26 PM | Feedback (2)

Friday, July 27, 2012

Lustige Übersetzung in VISO 2010: “Rechteckiger Tisch”

In Visio 2010 habe ich folgende lustige Übersetzung gefunden:

posted @ Friday, July 27, 2012 4:23 PM | Feedback (2)

Friday, July 13, 2012

Business Objekte und Reflektion: 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);
      }
   }
}; posted @ Friday, July 13, 2012 11:02 AM | Feedback (3)

Friday, June 22, 2012

Daten an ein DevExpress ASPxTreeView-Control übergeben

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.

posted @ Friday, June 22, 2012 10:56 AM | Feedback (5)