Prozatím to sice vypadá pěkně a celkem to i funguje, ale k verzi, která by se dala skutečně používat a nejen si s ní hrát to má ještě daleko. Popravdě, po prvních 5 minutách práce mi naskočila hláška, že došlo k chybě a je potřeba stránku znovu načíst. Stejně tak nefunguje ještě spousta ovládacích prvků, které tam již nyní jsou a aktuálně jsou spíše jen dekorací, protože nejsou dokončeny.

Na jednom ze screenshotů můžete vidět rozevřenou nabídku „Debug“, kde jestli jsem to správně pochopil, jsou mimo jiného velmi primitivně připravené některé ovládací prvky, aby je bylo možné použít, ale ve výsledné verzi budou určitě součástí GUI celé aplikace. Nyní mluvím hlavně o položce „Extensions“ (rozšíření), které se aktuálně spouštějí tím způsobem, že musíte vědět URL tohoto rozšíření a ručně ji zadat. Stejně tak i parametry pro toto rozšíření.

Zatím jsem zkoušel vytvořit jen pár základních rozšíření a musím říct, že to celkem funguje.

Dalším velkým nedostatkem celého Wave je nyní zřejmě rychlost.  Na to, aby se Wave vyrovnal klasickým IM klientům, bude dle mého názoru potřeba, aby běžel o hodně svižněji, jinak Google nepřinutí uživatele aby klasické IM opustili a přešli na Google Wave.

Na videu, z představení Google Wave, jste mohli vidět věci, jako je tažení obrázku z plochy přímo do prohlížeče. Toto aktuálně funguje, ale pokud vím, tak pouze v Google Chrome. Testoval jsem to i v Firefoxu 3.5, ale tam to nefungovalo a poslední podporovaný prohlížeč je Safari, ale ten jsem netestoval.

Další zajímavou věcí na videu byl možnost „posunu v čase“. Tažením postníky je možné postupně vykreslovat konverzaci, podle toho, jak byl text přidáván. Toto sice funguje, ale je to zaprvé velmi pomalé a posuvník se občas seká.

Poslední můj postřeh z Google Wave, který bych ještě uvedl je nepřehlednost konverzace. I když Google tvrdí, že by Wave mohl nahradit email a IM klienty právě kvůli přehlednosti (příspěvky se strukturují), ovšem problém je v tom, že můžete teoreticky editovat cokoliv, kdykoliv a druhá strana se to nemusí dozvědět. Pokud diskusi sledujete, tak problém není, protože vás Wave na všechno upozorní, ovšem pokud si okno minimalizujete a mezitím vám do jednoho wave napíše 5 lidí a to ještě způsobem, že někdo reaguje na první příspěvek, někdo na poslední, další zase upraví svůj původní, nebo dokonce váš (toto lze), tak se v tom už nevyznáte. Můžete sice použít tu zmiňovanou časovou osu, ale jak jsem psal je to pomalé a osobně se mi to ne moc dobře používá. Možná jsem si jen ještě nezvykl, ale muset pokaždé projíždět celou konverzaci pomocí té osy, ještě když nevím, jestli je vůbec proč (nevím, zda tam něco nového je), se mi zdá naprosto nepraktické.

A nyní jedna věc, týkající se Google Wave, o které pokud vím ještě nikdo nepsal. Jde o klienta pro Google Wave pro iPhone.

Google nejspíše nehodlá dělat nativní aplikace pro iPhone a zůstává pouze u webových. Stejně tak je tomu i u Google Wave klienta pro iPhone. Pokud vás zajímá, jak vypadá, projděte si obrázky v galerii níže. Podle toho, jak jsem jej zatím testoval to vypadá, že je ještě méně stabilní a ještě více pomalejší, než Wave pro prohlížeče.  I když to vypadá, že vývojáři jej ještě neuveřejnili ani pro testování. Dá se na něj sice dostat, ale nejdříve se vám zobrazí informace o tom, že prohlížeč není podporován a vcelku nenápadný odkaz s možností ignorovat tuto skutečnost.

Více již v galerii.

Až dnes se mi podařilo konečně objevit řešení a proto bych se o něj rád podělil. Krokem číslo jedna je tedy stáhnout si ukázkové soubory. Připravil jsem v nich funkční ukázku, podle níž byste měli být schopni použít tuto techniku i bez dalšího návodu. Ale přesto, se ještě rozepíšu.

Nejprve, ale proč vůbec používat načítání fontů za běhu? Odpověď je vcelku jednoduchá a to, protože pokud do SWF souboru přibalíte font, tak jeho velikost s každým takovým fontem naroste cca o 150kb, což je při použití 10 fontů 1,5MB, což je vážně hodně! A navíc je zbytečné načítat tolik dat, když je uživatel potom nepoužije.

Druhou věcí je omezení, které tato technika sebou nese. Největším je asi, že nelze použít font dříve, než je načten. Na první pohled to vypadá logicky, ale při vývoji se na to často zapomíná (pokud tedy vytvoříte textové pole, přiřadíte mu font a až poté tento font načtete, text se nezobrazí).
Druhým omezením, které stojí za zmínku, je že pokud chcete používat více řezů daného fontu (tučné, nebo kurzíva), pak musíte přibalit každý z těchto řezů a to včetně kombinací. Tedy Například Verdanu, tučnou Verdanu, Verdanu v kurzívě a také tučnou Verdanu v kurzívě. Jinak by se opět text nezobrazil.

A nyní již k samotnému postupu:

1. Vytvořte prázdný soubor s názvem „verdana.fla“
2. Pomocí nástroje „Text“ napište do tohoto souboru jakýkoliv text, nastavte jej jako dynamický, přiřaďte font Verdana a přibalte znaky, které budete potřebovat (přes tlačítko „embed“ v panelu „Properties“).
3. Vytvořte z tohoto textového pole MovieClip s libovolným názvem
4. Do tohoto MovieClipu vložte tento ActionScript 2.0 kód: _parent._parent.onFontLoad(„Verdana“);
5. V knihovně označte daný MovieClip a přes pravé tlačítko myši si v kontextovém okně zvolte „Linkage…“
6. Do pole „Identifier“ napište „font_mc“ (takto jej budeme identifikovat)
7. Zaškrtněte políčka „Export for runtime sharing“ a „Export in first frame“
8. Do pole URL zadejte URL tohoto vyexportovaného souboru. V našem případě „verdana.swf“
9. Potvrďte a vyexportujte SWF soubor
10. Vytvořte nový soubor verdanaLoader.fla ve stejném adresáři
11. Zkopírujte z knihovny patřící souboru „verdana.fla“ námi vytvořený MovieClip do knihovny pro soubor „verdanaLoader.fla“
12. Přetáhněte tento zkopírovaný MovieClip do plochy (toto je důležité, nestačí jej mít jen v knihovně)
13. Opět si otevřete dialogové okno „Linkage..“ (viz. bod 5.), ale tentokrát pro ten zkopírovaný MovieClip
14. Do pole „Identifier“ zadejte opět „font_mc“ (stejný jako v bodě 6.)
15. Zaškrtněte pole „Import for runtime sharnig“
16. Do pole „URL“ zadejte „verdana.swf“. Tedy název SWF souboru s fontem.
17. Vyexportujte soubor „verdanaLoader.swf“. Tímto máme to nejdůležitější za sebou.
18. Nyní si stačí vytvořit třetí soubor, do kterého budete načítat soubor „verdanaLoader.swf“. V tomto novém souboru budete mít dostupnou událost „onFontLoad“, kterou jsme si vytvořili v bodě 4. Jakmile, tedy bude zavolána, víme, že je font připraven k použití a můžeme jej aplikovat na nějaké textové pole (příklad je v souboru main.swf, respektive main.fla).

Pokud byste, ale rádi s Ruby on Rails začali, nezoufejte. Je tu pro vás Heroku.  Heroku je Ruby on Rails hosting, který je sám poháněn Ruby on Rails. Jeho hlavní výhodou je, že je zdarma. Heroku, ale není jen hosting. Zároveň obsahuje online vývojové prostředí, které ovšem pokud nechcete, nemusíte používat, protože je možno provést jak import, tak i export souborů.

Další výhodou je, že můžete vytvořit neomezený počet projektů (tedy aspoň nikde není napsáno nic o žádném omezení).

Co se mi velmi líbí je, že si můžete vybrat, zda bude váš projekt veřejný, či soukromý (myšleno ve smyslu přístupu na web). A poslední věc, kterou bych chtěl vyzdvihnout a která mě velmi zaujala je, že můžete bez problémů doinstalovat jakýkoliv plugin, či gem.

Heroku sice stále běží v betaverzi a je potřeba mít pozvánku, nebo se zaregistrovat a počkat, než vám pozvánka přijde, ale myslím, že to stojí za to.

PS: Pokud se vám nechce čekat, než vás pozvou, tak mi tu zanechte komentář a já vám pošlu pozvánku.

Jak používat tuto „knihovnu“?

Nejdříve si stáhněte JavaScript Inline Text Editor. A poté jej vložte do příslušné stránky pomocí:

<script type="text/javascript" src="jsinlineeditor.js"></script>

Dále je potřeba vytvořit konstruktor:

var mujEditor = new Edit();

Teď máte editor připraven k použití a stačí jej jen aplikovat na jednotlivé prvky stránky:

mujEditor.add( ELEMENT );

Nebo častější možnost s předvolbama:

mujEditor.add( ELEMENT, {typ:TYP, output:FUNKCE });

A nakonec příklad:

var inlineEditor = new Edit();
inlineEditor.add( document.getElementById('idPrvku'), {typ:'textarea', output:function(r){ alert(r); } });

Teď bych měl vysvětlit, jaké jsou jednotlivé předvolby. Takže první důležitá věc je, že předvolby jsou zcela volitelné, takže je použít můžete, ale nemusíte. První předvolba „typ“ určuje, jestli se bude obsah zvoleného elementu editovat v jednořádkovém, nebo víceřádkovém editoru. Může mít hodnoty „textarea“, nebo „input“ (tato hodnota je výchozí a není třeba jí uvádět). Druhá předvolba je „output“. Slouží k tomu, abychom mohli změněný text také zpracovat (například odeslat změnu pomocí AJAXu). Hodnota musí být vždy funkce.

Sice jsem moc nehledal, ale zjistil jsem, že není moc knihoven, které by uměly jen to jedno a to AJAX a proto jsem si pro své potřeby napsal jednoduchou knihovnu, pro práci s AJAX-em. A protože nevidím důvod, proč se o ní nepodělit, tak jí také bez problému uveřejním, ke stažení (1,14kB). Jedinou podmínku, kterou kladu pro její používání je, že nesmíte odstranit komentáře v ní obsažené.

Použití je velmi jednoduché. Knihovnu je nejprve třeba vložit do stránky pomocí:

<script type="text/javascript" src="AJAX.js"></script>

A dále jen stačí zavolat příslušnou funkci s danými parametry:

var myAJAX = new Ajax('volanaAdresa', {data:'promenna=hodnota&promenna2=hodnota2', metoda:'POST', vratit:'TEXT'});

Přičemž jediný povinný parametr je volaná adresa. Výchozí hodnoty projsou:

• data = „“
• metoda = „POST“
• vratit = „TEXT“

Metoda může být „POST“, nebo „GET“ a vratit „TEXT“, nebo „XML“.

Pokud bude budete pomocí AJAX-u data i načíta, je potřeba k nim přistupovat pomocí funkce onComplete, která se automaticky volá po dokončení scriptu.Vypadalo by to následovně:

var myAJAX = new Ajax('volanaAdresa', {data:'promenna=hodnota'});
myAJAX.onComplete = function(vraceno){
   alert(vraceno);
}

Kromě funkce onComplete je k dispozici funkce onError, která se zavolá při chybě a také funkce onProgress, která se volá během načítání.

Nakonec uvedu kompletní příklad:

<script type="text/javascript" src="AJAX.js"></script >

var aj = new Ajax('test.php', {data:'a=2&b=4&operace=scitani', metoda:'GET'});
aj.oProgress = function(){ alert('AJAX pracuje'); }
aj.onComplete = function(soucet){ alert(soucet); }
aj.onError = function(chyba){ alert(chyba); }

A „test.php“ by mohl vypadat třeba:

<?php
if($_GET['operace'] == 'scitani'){
   echo $_GET['a']+$_GET['b'];
}
?>

 document.body.appendChild(
 TAG.table({},
 TAG.tr({},
 TAG.th('ID'),
 TAG.th('Jméno'),
 TAG.th('Příjmení')
 ),
 TAG.tr({},
 TAG.td('1'),
 TAG.td('Jan'),
 TAG.td('Janoušek')
 ),
 TAG.tr({},
 TAG.td('2'),
 TAG.td('Michal'),
 TAG.td('Nogol')
 )
 )
 );

Jak vidíte, použití je úplně jednoduché. Zápis je vždy „TAG.název tagu({parametry}, další tagy)“

Takže například „TAG.a({href:’http://www.google.com’, onclick:function(){alert(‘Vstupujete na stránku Google.com !’);}})“

Nakonec stačí DOM aplikovat pomocí metody appendChild.

V čem je tento způsob vytváření DOM výhodný?

1. Události se na rozdíl od použití innerHTML mohou odkazovat do objektů, kde vznikly (pomocí call()) – což je důvod, proč jsem tuto funkci vytvořil.
2. Je to rychlejší, než psát pořád dokola document.createElement(), document.appendChild() a přiřazovat attributy

 gem install -y capistrano

A je to. Jenže mi nikdo už neřekl (a já si nepřečetl), že mi Capistrano nebude fungovat na Ruby 1.8.6. Takže dalším krokem byla instalace Ruby 1.8.5. a následná reinstalace Capistrana.

Už jsem si říkal, že to bude všechno „OK“ a nejhorší mám za sebou, ale ne. Capistrano je totiž nově ve verzi 2.0. A v této verzi jsou bohužel velké změny. Screencasty za railshosting.cz byly rázem k ničemu. A navíc soubor pro zprovoznění projektu, který jsem od nich obdržel emailem byl pro Capistrano verze 1.X a né 2.0.

Řešení, ke kterému jsem po pár hodinách hledání na webu a komunikací s výbornou podporou railshosting.cz, došel je následující:

Aplikování Capistrana na aktuální projekt se nedělá pomocí:

 cap --apply-to ./

Jak je vidět v Sceencastu, ale pomocí:

 capify .

Obsah souboru deploy.rb, který obdržíte emailem je potřeba změnit na:

 set :application, "NÁZEV_APLIKACE"
 set :repository, "SVN_SERVER"
 set :scm_username, "svn"
 set :scm_password, "HESLO_K_SVN"

 role :web, "SERVER"
 role :app, "SERVER"
 role :db, "SERVER", :primary => true

 set :deploy_to, "/home/deployer/app/"
 set :user, "deployer"
 ssh_options[:port] = 5028

 task :after_update_code, :roles => [:app, :db] do
 # link database configuration
 run "ln -nfs #{shared_path}/config/database.yml #{release_path}/config/database.yml"
 end

 desc "Stop the webserver on the old release and start the server for the new release"
 namespace :deploy do
 task :restart, :roles => :app do
 run "/usr/local/etc/rc.d/mongrel_cluster.sh restart"
 end
 end

Kde slova psaná velkými písmeny jsou hodnoty z původního deploy.rb.

Poté stačí v konzoli zadat:

 cap deploy:migrations

Zbylý postup je totožný s Sceencasty, až na příkazy pro Capistrano. Seznam příkazů vyvoláte zadáním „cap -T“.

Věřte, nebo ne, ale tohle mi zabralo většinu dnešního dne. Chtěl bych ještě tímhle poděkovat technické podpoře railshosting.cz, za ochotu pomoct a to i když nejsem (zatím) platící zákazník.

Jo a pokud vás zajímá, jakou aplikaci jsem se snažil celý den „rozchodit“, pak věřte, že jde o takovou malou „online kancelář“, kterou si programuju ve volném čase pro zábavu. Odkaz vám sem nedám, ale věřím, že když budete chtít tak to najdete (když se tak stane, tak uživatelské jméno i heslo je „demo“).

Ukázka kódu, který bude v IE fungovat chybně, ale v ostatních prohlížečích správně:

 <script type="text/javascript"> function zmenaStavu(){ alert('Změna stavu!'); } </script> <input type="checkbox" onchange="zmenaStavu();" />

Jak to, ale zařídit, aby se choval IE korektně?
Stačí tato úprava:

 <script type="text/javascript"> function zmenaStavu(){ alert('Změna stavu!'); } </script> <input type="checkbox" onchange="zmenaStavu();" onclick="this.blur(); this.focus()" />

Jde jen o to, že nejdříve zařídíme, aby checkbox stratil focus (this.blur();), čímž jsme dosáhli toho, že se provede událost onchange. A následně jsme vrátili focus zpátky (this.focus();). Vracení focus není sice nutné, ale pokud někdo využívá pro navigaci ve formuláři klávesy tab, tak by nemohl přejít na další pole formuláře.

Jak to udělat, abyste nemuseli psát tento script u všech checkboxů ručně?
Stačí vložit na začátek stránky:

 <script type="text/javascript"> function addEvent(el, ev, fun){ if(el.addEventListener){ el.addEventListener(ev, fun, false); }else{ el.attachEvent('on'+ev, fun); } }

 function repareCheckboxs(){ var a = document.getElementsByTagName('input'); for(var i=0; i<a.length; i++){ var b = a[i].getAttribute('type'); if(b && b == 'checkbox'){ addEvent(a[i], 'click', function(){this.blur(); this.focus();}); } } }

 addEvent(window, 'load', repareCheckboxs); </script>