Toto se týká se především násobných asociací jako je například has_many. Dejme tomu, že mám modely firma a zaměstnananec ve vztahu (1:N).

class Employee < ActiveRecord::Base
   belongs_to :company
end
class Company < ActiveRecord::Base
   has_many :employees
end

Když potřebuji najít všechny zaměstnance s platem vyšším než 10 korun stačí napsat jednoduchý dotaz pomocí metody find:

Employee.find(:all, :conditions => ["salary > ?", 10])

Nicméně tento příklad moc realitu příliš nepostihuje. Většinou mě zajímají jenom zaměstnanci určité firmy:

Employee.find(
   :all,
   :conditions => [ "company_id = ? AND salary > ?",
         my_company.id, 10]
   )

Tady je taky vše v pořádku. Kód funguje a dělá přesně to, co po něm chci. Problém je v tom, že princip DRY (neopakujmež se!) dostává ránu pálkou do rozkroku. Na filtrování zaměstnanců naší firmy přece máme metodu _employees_ ve třídě Company:

my_company.employees.each do |employee|
  # something clever
end

Na první pohled se zdá, že company.employees nevrací nic jiného než pole. Company#employees přitom vrací cosi, co se chová jako pole (nebo taky seznam, prostě Enumerable), ale je to objekt mnohem chytřejší (je to Asociace). Dobře placené zaměstnance naší firmy najdu zkráceně takto:

my_company.employees.find(:all,
   :conditions => ["salary > ?", 10])

Asi stojí za vysvětlení, že prosté volání my_company.employees nikdy nezpůsobí vykonání SQL dotazu. Dotaz do databáze se provede až ve chvíli kdy je jisté, co skutečně potřebuji (např. při zavolání each nebo find).

Začněme definováním jednoduchého grafického seznamu elementů. Nejdříve nadefinuji třídu Container, která se bude starat o seznam elementů, zobrazí k nim pozadí a bude je udržovat zarovnané pod sebou.

class Container extends CustomNode {
	var list: Group = Group {}
	var nodes: Node[] on replace {
		var t = 0;
		for (node in nodes) {
			node.translateY = t;
			t += node.layoutBounds.height + 10;
		}
		list.content = nodes;
	}
	override function create() {
		Group {
			content: [
				Rectangle {
					x: bind list.boundsInParent.minX - 5
					y: bind list.boundsInParent.minY - 5
					width: bind list.boundsInParent.width + 10
					height: bind list.boundsInParent.height + 10
					fill: Color.YELLOW
				},
				list
			]
		}
	}
}

Jako elementy pro jednoduchost použiju obyčejné obdélníky vyplněné náhodnými barvami, kterými následně vyplním Container.

class Draggable extends CustomNode {
	var container : Container;
	var rect = Rectangle {
			width: 80
			height: 30
			fill: randomColor()
	}
	override function create() {
		rect
	}
	function randomColor() : Color {
		Color.rgb(r.nextInt(255), r.nextInt(255), r.nextInt(255))
	}
}

var container1 = Container {
	translateX: 10
	translateY: 50
}
container1.nodes = [
	Draggable { container: container1 },
	Draggable { container: container1 },
	Draggable { container: container1 },
	Draggable { container: container1 }
];

Stejným způsobem pak vytvořím container2 a oba vložím spolu s jednoduchým nadpisem do scény.

Stage {
	title: TITLE
	scene: Scene {
		width: 240
		height: 320
		content: [
			header,
			container1,
			container2
		]
	}
}

Pro funkčnost drag&drop je třeba, aby každý z vytvořených obdélníků reagoval na onMouseDragged.

Rectangle {
	width: 80
	height: 30
	fill: randomColor()
	onMouseDragged: function(e) {
		this.translateX = e.dragX;
		this.translateY = e.dragY;
	}
}

Tato úprava sice způsobí, že se element stane táhnuteným, bohužel ale rozbije všechno ostatní. Při táhnutí je potřeba obdélník ze seznamu vyjmout a vložit do scény samostatně. Nejdříve přidám proměnou pro aktuálně tažený elment a zajistím aby se zobrazil ve scéně.

// aktuálně tažený element
var dragged: Draggable;
Stage {
	scene: Scene {
		content: [
			header,
			container1,
			container2,
			Group {
				// zobrazuje aktuálně tažený element
				content: bind [dragged]
			}
		]
	}
}

Následně vložím kód zpracovávající reakci na drag a release. Funkce přidávám přímo do třídy Draggable pro větší přehlednost:

class Draggable extends CustomNode {
	override var onMouseDragged = function(e) {
		if (not drag) {
			drag = true;
			delete this from container.nodes;
			dragged = this;
			// napozicovat element "pod myš"
			rect.x = e.sceneX - e.x;
			rect.y = e.sceneY - e.y;
		}
		// posunout element o relativní posun myši
		translateX = e.dragX;
		translateY = e.dragY;
	}
	override var onMouseReleased = function (e) {
		if (drag) {
			drag = false;
			// všechno se vrátí do původního stavu
			translateX = 0;
			translateY = 0;
			rect.x = 0;
			rect.y = 0;
			dragged = null;
			insert this into container.nodes;
		}
	}
}

Teď už se táhnutelné elemety chovají tak jak mají – pohybují se spolu s myší a při upuštění se vrátí zpět do původního seznamu. Aby se element při upuštění zařadil do správného seznamu, musí každý Container reagovat na onMouseEntered a onMouseExited. Je tedy třeba říct táhnutému elementu, kam má upadnout. A dále je potřeba zajistit, aby se element upuštěný jenom tak v prostoru vrátil na původní místo.

class Draggable extends CustomNode {
	var startingContainer: Container;
	var container : Container on replace {
		if (container == null and startingContainer != null) {
			container = startingContainer;
		}
	};
}

class Container extends CustomNode {
	override var onMouseEntered = function(e) {
		// já jsem teď tvůj nový container
		dragged.container = this;
	}
	override var onMouseExited = function(e) {
		// zapomeň na mě, vrať se odkud si přišel
		dragged.container = null;
	}
}

Teď už mám plně funkční kód a zbývá jenom přidat trochu vizuální odezvy. Přidáním jedné řádky se táhnuté elementy stanou lehce průhlednými a aktivní seznamy se rozsvítí po najetí myši.

class Draggable extends CustomNode {
	override var opacity = bind if (drag) 0.6 else 1
}

class Container extends CustomNode {
	override function create() {
		Group {
			content: [
				Rectangle {
					fill: bind if (hover and dragged != null) Color.GREEN else Color.YELLOW
				},
				list
			]
		}
	}
}

Jak to celé funguje si můžeš prohlédnout tu:

Zdrojové kódy jsou k dispozici na githubu: simple-drag-drop

Začněme jednoduchým kódem, který obsahuje VBox (stará se o vertikální zarovnání elementů pod sebe), do kterého je možné přídávat a odebírat prvky.

var nodes: Node[] = [];
var box: VBox;

Stage {
    title: "Background Fill"
    scene: Scene {
        width: 240
        height: 320
        content: [
            box = VBox {
                content: bind nodes
                spacing: 10
                onKeyPressed: function(e) {
                    if (e.code == KeyCode.VK_UP) {
                        insert
                        Rectangle {
                            width: 50
                            height: 50
                            fill: Color.GREEN
                        } into nodes;
                    }
                    if (e.code == KeyCode.VK_DOWN) {
                        if (sizeof(nodes) > 0) {
                            delete nodes[0] from nodes;
                        }
                    }
                }
            }
        ]
    }
}

Jediným správným místem kam pozadí umístit je na stejnou úroveň jako je vbox s elementy. Tím, že se element pro pozadí umístí do obsahu před vbox se zajistí, že se bude vykreslovat pod ním.

        content: [
            Rectangle {
                x: 0
                y: 0
                width: 240
                height: 320
                fill: Color.YELLOW
            },
            box = VBox {
                   // beze změny
            }
        ]

Takto se ale vytvoří pouze obdélník, který zakrývá pevně danou plochu 240×320. Aby kopíroval rozměry vboxu, kterému má být pozadím, je třeba jeho rozměry provázat s hranicemi vboxu. K tomu poslouží bind a boundsInParent.

            Rectangle {
                x: 0
                y: 0
                width: bind box.boundsInParent.width
                height: bind box.boundsInParent.height
                fill: Color.RED
            }

Takhle kód funguje dobře a dělá přesně to, co se po něm chce. Vzhledově to ale moc dobře nevypadá, je dobré například přidat nějaké okraje:

var nodes: Node[] = [];
var box: VBox;
def MARGIN = 5;

Stage {
    title: "Background Fill"
    scene: Scene {
        width: 240
        height: 320
        content: [
            Rectangle {
                x: bind box.boundsInParent.minX - MARGIN
                y: bind box.boundsInParent.minY - MARGIN
                width: bind box.boundsInParent.width + MARGIN*2
                height: bind box.boundsInParent.height + MARGIN*2
                fill: Color.RED
            },
            box = VBox {
                content: bind nodes
                spacing: 2*MARGIN
                translateX: MARGIN // Odsazení od kraje
                translateY: MARGIN // Odsazení od kraje
                onKeyPressed: function(e) {
                    if (e.code == KeyCode.VK_UP) {
                        insert
                        Rectangle {
                            width: 50
                            height: 50
                            fill: Color.GREEN
                        } into nodes;
                    }
                    if (e.code == KeyCode.VK_DOWN) {
                        if (sizeof(nodes) > 0) {
                            delete nodes[0] from nodes;
                        }
                    }
                }
            }
        ]
    }
}

box.requestFocus();

Výsledná aplikace pak vypadá takto:

Kód je k dispozici na githubu: prizpusobive-pozadi

an_array.each do |item|
  # udelej neco s item
end

Mějme nějaká dvourozměrná data, která nejsou polem. Například objekt obsahující souřadnice mezních bodů polygonu (pravý horní, levý horní, pravý dolní a levý dolní).

# polygon0.rb
class Polygon
  attr_accessor :ur_x, :ur_y, :ul_x, :ul_y, :lr_x, :lr_y, :ll_x, :ll_y
end

Takto vypadá jednoduchá metoda, která hodnoty všech polí vypíše do konzole:

# polygon0.rb
  def print_corners
    puts ur_x, ur_y, ul_x, ul_y, lr_x, lr_y, ll_x, ll_y
  end

Stačilo zkopírovat seznam polí a odstranit dvojtečky. Kopírování kódu ale zavání problémem, takže je lepší se hned vrhnout do refaktoringu a seznam rohů si uložit do konstanty a upravit související kód.

# polygon1.rb
class Polygon

  CORNERS = [:ur_x, :ur_y, :ul_x, :ul_y, :lr_x, :lr_y, :ll_x, :ll_y]

  CORNERS.each do |corner|
    attr_accessor corner
  end

  def print_corners
    CORNERS.each do |corner|
      puts send(corner)
    end
  end
end

Volání send(corner) je dynamickým voláním metody, tady snad není nutné další vysvětlení. Takto přepsaná třída dělá to samé, co předchozí verze, ale je daleko rozšiřitelnější.

Aby se dalo přes data iterovat skutečně dvourozměrně, musíme konstanty ještě trošku poupravit.

# polygon2.rb
class Polygon

  CORNERS = ["ur", "ul", "lr", "ll"]
  PARTS = ["x", "y"]

  CORNERS.each do |corner|
    PARTS.each do |part|
      attr_accessor "#{corner}_#{part}".to_sym
    end
  end

  def print_corners
    CORNERS.each do |corner|
      PARTS.each do |part|
        puts send("#{corner}_#{part}".to_sym)
      end
    end
  end

end

To na jednu stranu přidává ohromnou flexibilitu při práci s jednotlivými souřadnicemi, na druhou stranu přináší nutnost pro každou operaci kopírovat dva vnořené iterátory. Pro příklad přidám metodu, která zkontroluje, zda jsou všechna pole nulová a pokud ano, nastaví je na nil.

# polygon2.rb
  def fix_zero_to_nil
    all_zero = true
    CORNERS.each do |corner|
      PARTS.each do |part|
        val = send("#{corner}_#{part}".to_sym)
        all_zero &&= val.nil? || val == 0
      end
    end
    return unless all_zero
    CORNERS.each do |corner|
      PARTS.each do |part|
        send("#{corner}_#{part}=".to_sym, nil)
      end
    end
  end

Na tomto kódu je krásně vidět, jak metoda díky nutnosti pokaždé iterovat přes dvě pole nabobtnala. Je třeba znova refaktorovat a udělat si vlastní iterátory. Jeden pro případ, že nás skutečně zajímá iterátor pro každou úroveň. Druhý pro případ, že nás zajímají jenom spojené položky.

# polygon3.rb
  def Polygon.each_corner_and_part
    CORNERS.each do |corner|
      PARTS.each do |part|
        yield(corner, part)
      end
    end
  end

  def Polygon.each_coordinate
    each_corner_adn_part do |corner, part|
      yield("#{corner}_#{part}")
    end
  end

Tyto iterátory přijdou vhod ve všech metodách třídy:

# polygon3.rb
class Polygon

  CORNERS = ["ur", "ul", "lr", "ll"]
  PARTS = ["x", "y"]

  def Polygon.each_corner_and_part
    CORNERS.each do |corner|
      PARTS.each do |part|
        yield(corner, part)
      end
    end
  end

  def Polygon.each_coordinate
    each_corner_and_part do |corner, part|
      yield("#{corner}_#{part}")
    end
  end

  each_coordinate do |coord|
    attr_accessor coord.to_sym
  end

  def print_corners
    Polygon.each_coordinate do |coord|
      puts send(coord.to_sym)
    end
  end

  def fix_zero_to_nil
    all_zero = true
    Polygon.each_coordinate do |coord|
      val = send(coord.to_sym)
      all_zero &&= val.nil? || val == 0
    end
    return unless all_zero
    Polygon.each_coordinate do |coord|
      send("#{coord}=".to_sym, nil)
    end
  end

end

Zdorjové kódy jsou k dispozici na githubu: refaktoring-iteratoru

Čo to má robiť?

Otvor praktickú ukážku

V základnej verzii to vezme zoznam položiek (napríklad odrážkový zoznam UL) a nejaké textové políčko. Pri písaní do textového políčka to prejde celý zoznam a schová všetky položky, ktoré neobsahujú text v políčku. Na schovávanie položiek sa použije nejaká jednoduchá CSS trieda, ktorá bude obsahovať akurát display:none.

Aby to bolo trochu univerzálnejšie, malo by to mať pár konfigurovateľných parametrov:

• Názov triedy na schovávanie elementov.
• CSS selector pre výber elementov. Nie vždy to totiž musí byť odrážkový zoznam (t.j. LI). Môže sa to použiť trebárs na riadky tabuľky, alebo rovno na celé bloky s nejakou triedou.
• Umožnenie definície oblasti v rámci elementu (čiže opäť CSS selector), v ktorom sa má vyhľadávať. To pre prípad, že by som napríklad mal zoznam článkov s titulkami a náhľadmi, pričom filtrovať by som chcel iba podľa titulkov, ale skrývať by som chcel celé bloky.

Čerešnička na torte by bola jednoduchá možnosť prefiltrovať položky manuálne (t.j. zavolaním nejakej metódy a nie písaním do textového políčka).

Kostra objektu

Z požiadavkov na skript sa pekne vylúpne základná kostra:

var ContentFilter = Class.create({

	initialize : function ( element, input, options ) {
		this.element = $( element );
		this.input = $( input );
		this.options = Object.extend( {
			// defaultne hodnoty
		}, options || {} );

		// filter sa spusti pri kazdom stlaceni klavesy v policku,
		// alebo pri zmene jeho hodnoty (napr. pri copy/paste)
		this.input.observe( 'keyup', this.filter.bind( this ) );
		this.input.observe( 'change', this.filter.bind( this ) );
	},

	// pomocna funkcia, ktora sa spusti pri zmene obsahu policka
	filter : function () {
		this.filterBy( this.input.value );
	},

	// tuto funkciu je mozne volat aj manualne
	filterBy : function ( search ) {
		// mechanizmus filtrovania
	}

});

Teraz už stačí len dopísať pár detailov a samotnú funkčnosť.

Konfigurovateľné položky (options)

• hiddenClass – Názov triedy, ktorá sa pridá všetkým elementom, ktoré neobsahujú hľadaný text. Defaultná hodnota bude “hidden”. Niekde v CSS bude treba zadefinovať .hidden { display: none; }
• itemSelector – CSS selector, ktorý reprezentuje položky v zozname. Predpokladám že defaultne sa bude skript používať na odrážkové zoznamy, takže tento selector bude LI.
• searchArea – Opäť CSS selector. Ak bude zadefinovaný, umožní rozlíšiť medzi elementom ktorý sa má zobrazovať/skrývať a medzi elementom, v ktorom sa má hľadať text. Defaultne bude prázdny.

this.options = Object.extend( {
	hiddenClass : 'hidden', // defaultna trieda schovaneho elementu
	itemSelector : 'li', // defaultny CSS selector pre hladanie elementov
	searchArea : false // umozni specifikovat oblast v ramci elementu, kde sa ma hladat
}, options || {} );

Samotné vyhľadávanie

Na vyhľadanie elementov sa použije metóda Element.select(). Tá vráti zbierku elementov, ktoré bude treba prejsť a skontrolovať, či obsahujú daný text.

Na kontrolu sa použije jednoduchý regulárny výraz metódou RegExp.test(). Pozor! Pri generovaní regulárneho výrazu si treba dať pozor, aby to nehádzalo chyby kvôli nevalidnému reťazcu.

Samotný textový obsah elementu sa jednoducho získa odstránením tagov z jeho innerHTML pomocou String.stripTags().

filterBy : function ( search ) {

	// osetrenie pripadu, kedy uzivatel vlozi do inputu string ktory rozhodi regexp
	try { var re = new RegExp( search, 'i' ); }
	catch ( err ) { var re = new RegExp(); }

	var items = this.element.select( this.options.itemSelector );

	for ( var i = 0, totalItems = items.length; i < totalItems; i++ ) {
		var item = items[i];
		if ( re.test( item.innerHTML.stripTags() ) ) {
			item.removeClassName( this.options.hiddenClass );
		} else {
			item.addClassName( this.options.hiddenClass );
		}
	}
}

Priestor pre optimalizáciu výkonu

V skripte sú teraz dve miesta v hodné k optimalizácii.

V prvom rade je tu situácia, kedy bude hľadaný výraz prázdny (napr. keď vo filtrovacom políčku nič nebude). V takom prípade je jasné, že ani jeden element nemá mať hiddenClass a teda nemá zmysel ich po jednom prechádzať a kontrolovať regulárnym výrazom. Stačí zavolať:

items.invoke( 'removeClassName', this.options.hiddenClass );

V druhom rade je tu neustále zisťovanie zoznamu elementov (items) pri každom novom cykle. To je nutné robiť v prípade, že ten zoznam je dynamický a jeho obsah sa môže meniť. Ak sa však s takou situáciou nepočíta, výkonu by rozhodne pomohlo, keby skript tento zoznam získal už pri inicializácii a zapamätal si ho napríklad v premennej this.items.

searchArea

Ostáva doplniť poslednú drobnosť. Ak je zadefinovaná searchArea, treba text hľadať v nej a nie v celom elemente. Záležitosť jednej jednoduchej podmienky:

// ak nie je specifikovana searchArea, pouzije sa cely element
var searchArea = ( this.options.searchArea ) ? item.down( this.options.searchArea ) : item;

if ( re.test( searchArea.innerHTML.stripTags() ) ) {
	item.removeClassName( this.options.hiddenClass );
} else {
	item.addClassName( this.options.hiddenClass );
}

Výsledný skript

Celý objekt bude vyzerať asi takto:

var ContentFilter = Class.create({

	initialize : function ( element, input, options ) {
		this.element = $( element );
		this.input = $( input );
		this.options = Object.extend( {
			hiddenClass : 'hidden', // defaultna trieda schovaneho elementu
			itemSelector : 'li', // defaultny CSS selector pre hladanie elementov
			searchArea : false // umozni specifikovat oblast v ramci elementu, kde sa ma hladat
		}, options || {} );

		// filter sa spusti pri kazdom stlaceni klavesy v policku,
		// alebo pri zmene jeho hodnoty (napr. pri copy/paste)
		this.input.observe( 'keyup', this.filter.bind( this ) );
		this.input.observe( 'change', this.filter.bind( this ) );
	},

	// pomocna funkcia, ktora sa spusti pri zmene obsahu policka
	filter : function () {
		this.filterBy( this.input.value );
	},

	// tuto funkciu je mozne volat aj manualne
	filterBy : function ( search ) {

		// ak sa nepredpoklada ze by sa obsah zoznamu dynamicky menil, je mozne kvoli optimalizacii
		// vykonu zoznam elementov ziskat uz pri inicializacii namiesto kontroly pri kazdom volani filtru
		var items = this.element.select( this.options.itemSelector );

		if ( search ) {

			// osetrenie pripadu, kedy uzivatel vlozi do inputu string ktory rozhodi regexp
			try { var re = new RegExp( search, 'i' ); }
			catch ( err ) { var re = new RegExp(); }

			// prejde textovy obsah vsetkych elementov a zisti ci obsahuju hladany vyraz
			// na zaklade toho prida alebo odoberie triedu
			for ( var i = 0, totalItems = items.length; i < totalItems; i++ ) {

				var item = items[i];

				// ak nie je specifikovana searchArea, pouzije sa cely element
				var searchArea = ( this.options.searchArea ) ? item.down( this.options.searchArea ) : item;

				if ( re.test( searchArea.innerHTML.stripTags() ) ) {
					item.removeClassName( this.options.hiddenClass );
				} else {
					item.addClassName( this.options.hiddenClass );
				}
			}
		} else {

			// optimalizacia vykonu: ak je hladany vyraz prazdny, je jasne ze vyhovuju vsetky elementy
			items.invoke( 'removeClassName', this.options.hiddenClass );

		}
	}

});

Použitie a praktická ukážka

Otvor praktickú ukážku

V základnej verzii stačí obejektu poslať ID zoznamu a ID vyhľadávacieho políčka:

new ContentFilter( 'idZoznamu', 'idPolicka' );

Ak chceš objekt customizovať:

new ContentFilter( 'idZoznamu', 'idPolicka', {
	hiddenClass : 'alternativnaTrieda',
	itemSelector : 'div.polozka',
	searchArea : 'h2'
} );

A v prípade, že chceš volať filtrovanie manuálne:

var mojFilter = new ContentFilter( 'idZoznamu', 'idPolicka' );
mojFilter.filterBy( 'nejaky text' );

frameborder versus frameBorder

Defaultne má iframe okolo seba hnusný border. Ten sa dá odstrániť nastavením atribútu frameborder:

<iframe src="/zdroj/iframu/" frameborder="0"></iframe>

Problém nastáva v momente, kedy je iframe generovaný dynamicky a atribút frameborder sa mu pridáva javascriptom:

var mojIframe = document.createElement( 'iframe' );
mojIframe.frameborder = '0';
document.body.appendChild( mojIframe );

Napriek všetkým očakávaniam tam ten hnusný border furt bude. Mrkni na ukážku.

Čo s tým? Zmanená to, že sa iframy musia vkladať pomocou innerHTML? Dá sa toho borderu nejako rozumne zbaviť? Áno, dá. Finta je v tom, že atribút frameborder je case-sensitive a keď sa dynamicky priraďuje javascriptom, musí sa písať camelCase. Čiže frameBorder.

Toto v pohode zafunguje:

var mojIframe = document.createElement( 'iframe' );
mojIframe.frameBorder = '0';
document.body.appendChild( mojIframe );

URL prázdneho iframu

Dosť často sa IFRAME do dokumentu vkladá kvôli svojej zázračnej schopnosti prekryť elementy ako SELECT alebo embedované flashové video. U takého iframu je celkom jedno, čo sa v ňom zobrazí (ideálne nič).

Ak sa jeho atribút src nechá prázdny, bude to vo väčšine prípadov v pohode. Browser do iframu buď nič nenatiahne, alebo do neho vloží prázdnu stránku (v podstate about:blank). Problém však nastane v prípade, že stránka bude podliehať nejakým bezpečnostným kontrolám. Napríklad ak bude servírovaná protokolom HTTPS. V tom momente bude browser kričať, že sa snažíš vložiť nezabezpečený dokument do zabezpečenej stránky.

Sú teda dve možnosti:

1. Vytvoriť prázdny dokument, ktorý bude publikovaný na rovnakej doméne (a protokole) ako rodičovský dokument. Tento prázdny dokument potom použiť ako obsah iframu.
2. Alebo jednoducho nastaviť src atribút iframu na javascript:false;

Element.toIframe()

Ešte malý bonus na záver: Malá a jednoduchá metóda pre Prototype, ktorá nahradí existujúci element iframom:

Element.addMethods({
  toIframe : function ( element, url, options ) {
    var element = $( element );
    var options = Object.extend( {
      src : url || 'javascript:false;', // ak nie je uvedena, pouzije sa prazdna stranka
      frameBorder : 0, // pozor na camelCase
      scrolling : 'no', // ak 'yes', tak ich IE zobrazi vzdy, aj ked ich nie je treba
      width : element.getWidth(),
      height : element.getHeight(),
      id : element.id
    }, options || {} );
    var iframe = new Element( 'iframe', options );
    element.replace( iframe );
    return iframe;
  }
});

Snáď ju netreba komplikovane popisovať. Pozri sa na praktickú ukážku.

Zhodou okolností na túto tému nedávno písal Thomas Fuchs v článku Using input values as hints, the easy way. Jeho riešenie je krásne a jednoduché. Ja osobne však v praxi používam niečo trošku komplikovanejšie.

Čo má skript robiť?

Skript by mal políčko asociovať s nejakou defaultnou hodnotou. Ak je políčko prázdne a neaktívne (nie je na ňom focus), defaultná hodnota by sa v ňom mala zobraziť zašednutá (alebo nejak inak vizuálne potlačená). Akonáhle užívateľ políčko vyplní alebo do neho chce niečo písať (políčko získa focus), malo by sa opäť správať štandardne.

Počas implementácie si hlavne treba dať pozor na jednu veci:

Pri submitnutí formulára treba skontrolovať, či užívateľ skutočne niečo do políčka vložil. Ak to neurobíš, budú sa ti na server posielať hinty z nevyplnených políčok. Samozrejme, môžeš si to ošetriť aj na stran servera. Je to na tebe.

Základ

Objekt ktorý sa mi o hint v políčku postará si nazvem FieldHint.

var FieldHint = Class.create({

	initialize : function ( field, hint ) {
		this.field = $( field );
		this.hint = hint;

		this.field.observe( 'focus', this.focus.bind( this ) );
		this.field.observe( 'blur', this.blur.bind( this ) );

		this.blur(); // inicializacne spustenie
	},

	focus : function () {
		if ( this.field.value == this.hint ) {
			this.field.value = '';
		}
	},

	blur : function () {
		if ( ( this.field.value == '' ) || ( this.field.value == this.hint ) ) {
			this.field.value = this.hint;
		}
	}

});

Ošetrenie submitu

Pred odoslaním obsahu formuláru ešte treba zaistiť, aby sa neposlali aj hinty.

Toto síce vyzerá zložito, ale v skutočnosti na to už máš všetko čo potrebuješ (deje sa to v metóde focus()). Takže ju stačí pred submitom iba zavolať:

this.field.form.observe( 'submit', this.focus.bindAsEventListener( this ) );

Customizácia a formátovanie

Chýba posledná vec: Formátovanie políčka keď obsahuje hint (napr. šedý text) a nejaká jednoduchá možnosť customizácie.

var FieldHint = Class.create({

	options : {
		hintClass : 'hint'
	},

	initialize : function ( field, hint, options) {
		this.field = $( field );
		this.hint = hint;
		Object.extend( this.options, options || {} );

		this.field.observe( 'focus', this.focus.bind( this ) );
		this.field.observe( 'blur', this.blur.bind( this ) );

		this.field.form.observe( 'submit', this.focus.bindAsEventListener( this ) );

		this.blur();
	},

	focus : function () {
		this.field.removeClassName( this.options.hintClass );
		if ( this.field.value == this.hint ) { this.field.value = ''; }
	},

	blur : function () {
		if ( ( this.field.value == '' ) || ( this.field.value == this.hint ) ) {
			this.field.addClassName( this.options.hintClass );
			this.field.value = this.hint;
		}
	}

});

Praktická ukážka

Otvoriť praktickú ukážku

Tip na ďalšie rozširovanie

Hinty v políčkach sa často používajú ako náhrada za labely, obzvlášť ak designer potrebuje šetriť miestom. Labely by sa dali jednoducho skryť pomocou CSS a následne použiť pri automatickej inicializácii hintov. Asi takto:

HTML

<label class="hint" for="idPolicka">label policka</label>

CSS

label.hint { display: none; }

JS

document.observe( 'dom:loaded', function () {
	$$( 'label.hint' ).each( function ( elm ) {
		new FieldHint( elm.for, elm.innerHTML );
	} );
} )

Základné pojmy

Časť okna prehliadača, v ktorej sa zobrazuje webová stránka je viewport. Súčasťou viewportu nie sú toolbary ani sidebary, dokonca ani scrollbary. Viewport je proste plocha v ktorej je zobrazená stránka a nič viac.

Telo dokumentu (document.body) je plocha, ktorú zaberá obsah stránky. Jeho výška sa rovná pozícii spodného okraju najnižšie položeného elementu na stránke (obdobne je definovaná šírka).

Pár faktov, ktoré si treba pri zisťovaní veľkosti stránky uvedomiť:

• Ak je nejaký rozmer viewportu menší než rozmer tela dokumentu, bude stránka scrolovať.
• Telo dokumentu sa automaticky nerozťahuje na rozmery viewportu. Ich šírka sa obvykle zhoduje (pretože blokové elementy majú defaultne šírku 100%). Ale výška je obvykle rôzna.

Možné problémy

Ak je viewport menší než telo dokumentu, ty stránku prekryješ elementom s rozmermi viewportu a užívateľ odskroluje nižšie, uvidí neprekrytý obsah. Samozrejme, môžeš to ošetriť tak, že pri zobrazení prekrývajúceho elementu zakážeš skrolovanie. Akurát si to však skomplikuješ: Schovanie scrollbarov ti zmení veľkosť viewportu. A zakázanie skrolovania kolečkom rozhodne nie je triviálna záležitosť.

Ak je telo dokumentu menšie než viewport a ty stránku prekryješ elementom s veľkosťou tela dokumentu, bude ti dole vyčuhovať neprekrytá plocha. Síce bude prázdna a nebude v nej žiadny klikací element, ale asi to nebude vyzerať úplne košer (hlavne ak je pozadie BODY iné než pozadie prekrývajúceho elementu.

Čo s tým?

Je to jednoduché. Treba hrať na istotu. Stačí si zistiť obidva údaje a použiť vždy tú vyššiu hodnotu. V Prototype sa to dá takto jednoducho (v ostatných knižniciach to bude obdobné):

document.getPageSize = function () {
	var viewportSize = document.viewport.getDimensions();
	var bodySize = $( document.body ).getDimensions();
	return {
		width : ( viewportSize.width > bodySize.width ) ? viewportSize.width : bodySize.width,
		height : ( viewportSize.height > bodySize.height ) ? viewportSize.height : bodySize.height
	};
}

Použitie je jednoduché. Stačí sa opýtať na document.getPageSize(), ktorá vráti objekt s hodnotami width a height v pixeloch:

{ width : x, height: y }

document.onResize VS window.onResize

Implementácia onResize eventu nie je v rôznych browseroch jednotná. Niektoré ju vešajú na dokument, niektoré na okno. A potom sú aj také (Opera), ktoré to alibisticky všajú všade:

document.onResize

• Internet Explorer
• Opera

window.onResize

• Firefox
• Opera
• Safari

Správne volanie eventu

Ako teda správne volať event onResize? Rozhodne by bola chyba detekovať browser. Vždy treba detekovať prítomnosť metódy. Kvôli obojpohlavnosti Opery by tiež bola chyba volať to aj nad dokumentom aj nad oknom – v Opere by sa to totiž spustilo dvakrát.

V Prototype sa teda tento event jednoducho zavesí takto:

Event.observe( document.onresize ? document : window, "resize", function() {
    // obsah resize eventu
} );

Obdobné to bude vo všetkých ostatných knižniciach.

Pár praktických informácií

Na čo onResize reaguje?

onResize event reaguje na všetky zmeny veľkosti viewportu. To znamená:

• fyzická zmena okna (ťahaním za okraje a pod.)
• zmena veľkosti okna skriptom (ak to browser umožňuje)
• obnovenie z maxima (restore down… proste to stredné tlačítko medzi minimalizáciou a zatvorením) / maximalizácia okna
• prepnutie do / z fullscreenu
• zobrazenie / schovanie sidebarov, toolbarov a pod.
• ak je okno prehliadača maximalizované, onResize zareaguje aj na zmenu rozlíšenia obrazovky!

Na čo onResize nereaguje?

• minimalizácia okna
• zmena pozície okna (preťahovaním myšou alebo skriptom)
• skrolovanie
• keď sa zmení veľkost BODY tak, že sa zobrazí alebo schová scrollbar, nepovažuje sa to za onResize

Praktická ukážka

Otvor praktickú ukážku

Když se řekne Git tak si asi každý vybaví Github. Github je zároveň poskytovatel hostingu pro Git a zároveň programátorská sociální síť. Jelikož nabízí hosting pro otevřené projekty zdarma, není lepšího místa, kde začít hrátky s Gitem.

Checkout versus Clone

Uživatelé Subversion jistě znají pojem checkout. U distribuovaných systémů má checkout trošku jiný význam a stažení repository ze serveru se nazývá clone. Pro moje testovací repository je clone úplně jednoduchý:

git clone git@github.com:honzasterba/gitest.git

V případě, že sis zrovna vytvořil nové repository na Githubu toto ale fungovat nebude, protože je repository docela prázdné (není tam ani žádná větev) a je tedy třeba ho znicializovat.

cd gitest
git init # vytvoří prázdné lokální git repository
touch README
git add README # přidá lokální soubor do dalšího commitu
git commit -m 'first commit' # lokální commit souboru
git remote add origin git@github.com:honzasterba/gitest.git
git push origin master

Add, commit a push

Poslední dva řádky víše jsem nechal bez komentáře záměrně, protože je třeba vysvětlit jednu základní odlišnost Gitu od například Subversion. Commit je lokální operace. Co to znamená? Jenom to, že když uděláš git commit tak se změny uloží jako revize do lokálního repository. K tomu, aby se změny dostaly na server, je třeba udělat push. V konečném důsledku to vypadá tak, že svoji práci můžeš postupně lokálně commitovat a následně udělat push a odeslat změny na server. Zjednodušený proces vypadá následovně:

1. práce a změny v souborech
2. git add <soubory které chci commitovat>
3. git commit
4. návrat do bodu 1. nebo pokračování
5. git push origin master

Celý push vypadá taky velmi komplikovaně, ale nic složitého na něm není. Origin je symbolické jméno, které jsme na začátku přiřadili našemu repository na serveru a může být ekvivalentně nahrazeno URL. Master je jméno větve do které se naše změny mají synchronizovat a jedná se taky o jmennou konvenci pro hlavní větev. Parametr s názvem větve je nepovinný (použije se aktuální větev), ale doporučovaný, aby se později předešlo omylům.

Pull

Opakem operace push je pull. Pull je dvoukroková operce, git nejdříve vytvoří lokální větev (branch) do které stáhne nové změny ze serveru a pak tuto větev (FETCH_HEAD) merguje do aktuální větve. Celý příkaz vypadá takto:

git pull origin master

Opět je třeba předat název repository a větve. Oba parametry se dají vynechat pokud git nakonfiguruješ tak aby si master doplnil automaticky.

Merge

Každý kdo používal jakýkoli VCS systém zná nončí můru jménem merge. Drtivou většinu mergování zvádá git automaticky a děje se v podstatě kdesi za oponou. Co ale v případě, že od doby, kdy jsi udělal poslední pull, někdo jiný pushnul svoje změny a tobě teď push nefunguje? Celý pproblém je v tom, že před pushnutím je potřeba mít lokální repository akuální, což znamené udělat pull:

git pull origin master

Občas ale dojde ke nofliktu dvou revizí. Někdo jiný pushne změny do douboru, který mám já u sebe lokálně změněný a je problém. V takovém případě se git pokusí udělat merge automaticky a když ani to neprojde tak je potřeba ho udělat ručně. Při konfliktu git nahlásí toto:

CONFLICT (content): Merge conflict in <cesta k souboru>
Automatic merge failed; fix conflicts and then commit the result.

Soubor je nutné ručně upravit a výsledný merge pak commitnout:

git add <cesta k souboru>
git commit

Při commitu pak git předvyplní commit message tak aby indikovala, že se něco mergovalo:

Merge branch 'master' of git@github.com:honzasterba/gitest

Následně už nic nebrání tomu svoje změny včetně přimergovaných změn kolegů poslat na server.