IT4Zwigge: objektorientiert

Posts mit dem Label objektorientiert werden angezeigt. Alle Posts anzeigen

Sonntag, 20. November 2011

jQuery - Windows Phone 7 Live Tiles

ProjektbeschreibungProject Description

Mit dem hier verfügbarem jQuery/JavaScript-Projekt kann man Live Tiles, wie sie u.a. in Windows Phone 7 verwendet werden, auf seinen Webseiten einsetzen (Demo).With the here available jQuery/JavaScript project you can use Live Tiles, known from Windows Phone 7, on Web pages (Demo).

Installation

Als erstes bindet Ihr die benötigten JavaScript-Dateien (jquery.min.js & apptile.js) in den HEADER Eurer Seite ein. Die aktuelle Version der jQuery-Datei findet Ihr hier und das Tile-Skript befindet sich in der Beispiel-Implementierung.First, you includes the necessary JavaScript files (jquery.min.js & apptile.js) in the HEADER of your page. The current version of the jQuery file is here and the tile script is located in the example implementation.

<header>
...


...
</header>

Anschließend folgen einige globale Einstellungen ebenfalls im HEADER.Then follow some global settings in the HEADER.

<header>
...
<script type="text/javascript">
/* global tile setup */
var loopDuration = 5000;  // Pause between the animation in milliseconds
// required pictures (not optional)
var picPath      = "icons/";
var blankImg     = picPath + "blank.png";
var standardImg  = picPath + "standard.png";
var pointImg     = picPath + "point.png";
</script>
...
</header>

Jetzt noch das benötigte CSS-Skript (apptile.css) in den HEADER. Die Datei befindet sich ebenfalls im downloadbaren Beispiel-Projekt.Now the required CSS script (apptile.css) in the HEADER. The file is also located in the downloadable example project.

<header>
...

...
</header>

Optional können mit den folgenden Anweisungen noch Größe und Farbe der Tiles beinflusst werden.Optionally, size and color of the tiles, can be configured with the following instructions.

<header>
...

...
</header>

Erstmal die kürzeste Variante implementierenFirst implement the shortest Variant

Hierfür erzeugt man einen DIV-Tag mit einer id und der CSS-Klasse tilewrapper. Nach dem dem Laden des DIV's, instanziert Ihr ein neues AppTile-Objekt. Das macht man am Besten in der ready()-Funktion, welche von jQuery zur Verfügung gestellt wird.For this adding a DIV tag with an id and CSS class tilewrapper. After the loading of the DIV's, instantiates your a new AppTile object. To do that the best in the ready() function, which is provided by jQuery.

<body>
<script type="text/javascript">
$(document).ready(function()
{
  var sampleTile1 = new AppTile("sampletile1");
});
</script>
...
<div id="sampletile1" class="tilewrapper"></div>
...
</body>

Ausführlich konfiguriertConfigured in detail

Der Tile hat 3 Ansichten - Standard (stdTile), Custom (cstTile) und Background (bckTile) - welche sich unterschiedlich konfigurieren lassen:The tile has 3 views - standard (stdTile), custom (cstTile) and background (bckTile) - which can be configured differently.

stdTile([Title], [Backgroundimage], [Counter])
cstTile([Title], [Backgroundimage], [Counter])
bckTile([Title], [Text], [Backgroundimage])

var sampleTile2 = new AppTile("sampletile2");
sampleTile2.stdTile("IT4Zwigge", "it4zwigge.png");
sampleTile2.cstTile("Development", "homerobot.png", 99);
sampleTile2.bckTile("Training", "", "C# PHP SQL jQuery Javascript CSS...");

startRandomRun();

Animation startenStart animation

Um die Tile-Animation auszulösen ruft man die Funktion startTile(id)durch einen beliebigen Event auf. Also zum Beispiel beim Hover über dem Tile durch:To raise the tile animation, call the function startTile(id) by an arbitrary event.

<div id="sampletile2" onmouseover="startTile(id)"></div>

Zum Testen einfach oben auf den IT4Zwigge-Tile zeigen.To test it simply hover the IT4 Zwigge tile above.

oderor

Um die Tiles zufällig zu starten, kann man die Funktion startRandomRun() benutzen. Dazu setzt man den optionalen Parameter bei der Objektinstanzierung auf true (siehe auch Beispiel-Implementierung).To start the tiles randomly, you can use the function startRandomRun(). To do this set the optional parameter when instantiating the object to true (see also example implementation).

var sampleTile2 = new AppTile("sampletile2", true);

Weitere MöglichkeitenMore possibilities

Man kann Tilefarbe & -größe abweichend von den globalen Einstellungen definieren.You can define tile color and tile size by way of derogation from the global settings.

#sampletile3.tilewrapper, #sampletile3 div.tile
{
  background-color: red; 
}
#sampletile3
{
  font-size: 1.25em;
}

Download

Donnerstag, 10. November 2011

Javascript - Objektorientierung und Drag and Drop (1/2)

Konstruktor, Objektvariablen, private und öffentliche Methoden

Dieser erste Teil ist an das vor einiger Zeit veröffentlichte Slider-Skript angelehnt. Hier wird die Logik aus dem älterem Post in objektorientierter Form verwendet.
Im ersten Teil wird mit Javascript eine aus Java oder C# bekannte Objektstruktur verwendet, um Objekte mittels Konstruktor zu instanzieren, in den Objekten Objektvariablen zu verwenden und mit öffentlichen und privaten Methoden zu arbeiten.

Javascript im HEAD (u.a. Objektinstanzierung):

window.onload = Init;

function Init()  {
  // neues Objekt instanzieren
  var dragObj = new DragObj;
  // Events öffentlichen Methoden aus
  // instanziertem Objekt zuweisen
  document.onmousedown = dragObj.startDrag;
  document.onmousemove = dragObj.Drag;
  document.onmouseup   = dragObj.endDrag;  
}

Javascript im HEAD (das Objekt, seine Variablen und Methoden):

function DragObj()  {
  // Variable zur Rückgabe
  // von öffentlichen Methoden (Pattern)
  var that = {};
  // Objektvariablen
  this.movie       = null;
  this.startX      = 0;
  this.startY      = 0;
  this.start_drag  = false;
  
  // öffentliche Methoden
  that.startDrag = function(e)  {
    // Browserweiche
    if(!e)  {  // IE
      e = window.event;
      this.movie = e.srcElement;
    }
    else
      this.movie = e.target;
 
    var id = this.movie.id;   
    
    if(IsDragable(id))  {  
      this.startY =
        e.screenY - parseInt(this.movie.style.top);
      this.startX =
        e.screenX - parseInt(this.movie.style.left);
  
    this.start_drag = true;
    }
  }
  
  that.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;
 
      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
 
      this.movie.style.left = newX + "px";   
      this.movie.style.top  = newY + "px";  
    } 
  }
  
  that.endDrag = function()  {
    this.start_drag = false;
  }
  
  // private Methode
  function IsDragable(id)  {
    // prüfen ob in der ID des angelickten Objektes
    // das Wort "dragable" vorkommt (damit nicht
    // alles verschoben werden kann) 
    if(id.split("_")[0] == "dragable")
     return true;
       
    return false;
  }
  
  return that;
}

HTML im BODY:

<img src="html.gif"
style="position:absolute; top:0; left:0;"
onmousedown="return false;"
onmousemove="return false;"
width="129" height="108" id="dragable_1" />

Freitag, 28. Oktober 2011

jQuery - Windows Phone 7 Live Tiles (Demo)

Go to jQuery - Windows Phone 7 Live Tiles mainpage

Dienstag, 12. Januar 2010

Javascript: Objektorientierung und Drag and Drop (Teil 2)

Vererbung

Im zweiten Teil geht es um die Vererbung, ich habe u.a. in den Kommentaren den Begriff Klassen verwendet (natürlich gibt es in Javascript keine Klassen in dem Sinne), da ich aber versucht habe Strukturen nachzubilden, wie sie aus Java bzw. C# bekannt sind, erklärt sich das Ganze so besser.

Ob eine Verkettung der drei definierten Klassen möglich ist, gilt es noch auszutesten!