Ptaszor i jego blog! Lol…

Na początek: jest to dalsza część wczorajszego opisywania różnic pomiędzy językami HTML 4 oraz HTML 5

Nieobecne elementy:
Poniższych elementów nie ma w HTML 5, ponieważ efekt ich działania dotyczy wyglądu aplikacji (prezentacji) i lepiej jest je wyświetlać za pomocą języka CSS:

• basefont
• big
• center
• font
• s
• strike
• tt
• u

Poniższych elementów nie także ma w języku HTML 5, ponieważ ich stosowanie miało zły wpływ na usability i dostępność aplikacji dla użytkownika końcowego.

• frame
• frameset
• noframes

Poniższe elementy nie są dołączone, ponieważ były wykorzystywane bardzo rzadko, tworząc zamieszanie lub mogą zostać zastąpione przez inne podobne elementy:

• acronym – nie został dołączony ponieważ tworzy on zbyt wiele nieporozumień. Można w zamian stosować abbr dla skrótów (ang. abbreviations).
• applet – stał się przestarzały względem object.
• isindex
• dir – stał się przestarzały względem ul.

Brakujące atrybuty:
Niektóre atrybuty języka HTML 4 nigdy więcej nie będą dostępne w wersji piątej.

• atrybut accesskey w a, area, button, input, label, legend i textarea.
• atrybuty rev i charset w link i a.
• atrybuty shape i coords w a.
• atrybut longdesc w img i iframe.
• atrybut target w link.
• atrybut nohref w area.
• atrybut profile w head.
• atrybut version w html.
• atrybut name w map, img, object, form, iframe, a (w zamian można zastosować id).
• atrybut scheme w meta.
• atrybuty archive, classid, codebase, codetype, declare i standby w object.
• atrybuty valuetype i type w param.
• atrybuty charset i language w script.
• atrybut summary w table.
• atrybuty headers, axis i abbr w td i th.
• atrybut scope w td.

W dodatku, HTML 5 nie posiada atrybutów odpowiedzialnych za wygląd na stronie (prezentacji), które były w wersji 4. Zostały one przeniesione do arkusza CSS, będącego właściwym miejscem na definiowanie wyglądu strony:

• atrybut align w caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr i body.
• atrybuty alink, link, text i vlink w body.
• atrybut background w body.
• atrybut bgcolor w table, tr, td, th i body.
• atrybut border w table, img i object.
• atrybuty cellpadding i cellspacing w table.
• atrybuty char i charoff w col, colgroup, tbody, td, tfoot, th, thead i tr.
• atrybut clear w br.
• atrybut compact w dl, menu, ol i ul.
• atrybut frame w table.
• atrybut frameborder w iframe.
• atrybut height w iframe, td i th.
• atrybuty hspace i vspace w img i object.
• atrybuty marginheight i marginwidth w iframe.
• atrybut noshade w hr.
• atrybut nowrap w td i th.
• atrybut rules w table.
• atrybut scrolling w iframe.
• atrybut size w hr, input i select.
• atrybut style we wszystkich elementach z wyjątkiem font.
• atrybut type w li, ol i ul.
• atrybut valign w col, colgroup, tbody, td, tfoot, th, thead i tr.
• atrybut width w hr, table, td, th, col, colgroup, iframe i pre.

API
HTML 5 wprowadza kilka API, które pomagają w tworzeniu aplikacji internetowych. Mogą być one stosowane razem z nowymi elementami wprowadzonymi do aplikacji:

Rozszerzenia do HTMLDocument

HTML 5 poszerzył interfejs HTMLDocument z DOM Level 2 HTML. Interfejs jest teraz zaimplementowany na wszystkich obiektach implementujących interfejs Document.

• getElementsByClassName() – aby wybrać elementy poprzez ich nazwę klasy. Sposób w jaki jest zdefiniowana ta metoda pozwala jej na pracę z jakąkolwiek zawartością z atrybutami class i obiektem Document, taki jak SVG i MathML.
• innerHTML
• activeElement oraz hasFocus
• getSelection()
• designMode i execCommand(), które są często stosowane do edycji dokumentów.

Rozszerzenia do HTMLElement

Interfejs HTMLElement posiada także kilka dostępnych rozszerzeń w języku HTML 5:

• getElementsByClassName()
• innerHTML
• classList

Dzisiejszy post jest dokończeniem poprzedniego wpisu.

Czytaj także:

• Różnice pomiędzy językami HTML 4 oraz HTML 5 – cz. I

Po już dawnej zapowiedzi w końcu postanowiłem się szerzej przyjrzeć nowemu elementowi języka HTML 5 – czyli czym jest canvas?

Ok, na początek zobaczmy jak wygląda ten nowy i tajemniczy element <canvas>:

<canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

Element Canvas posiada tylko dwa atrybuty; są nimi height i width. W powyższym przykładzie użyliśmy ich, ale w rozmiarach jakie sami chcieliśmy nadać naszej grafice. Są one opcjonalne i mogą być również określane jako własności DOM lub zasady CSS. Kiedy atrybuty wysokości i szerokości nie są określone, to wtedy obiekt <canvas> będzie posiadał wielkości domyślne czyli; 300 pikseli długości i 150 pikseli wysokości.

Elementu <canvas> możemy nadać takie same style jak normalne; obrazy (margines, obramowanie, tło, itd.). Kiedy do elementu <canvas> nie ma przypisanych żadnych stylów, to wtedy canvas będzie całkowicie przezroczysty.

Narysujmy, więc coś…

Wykonajmy nasz pierwszy rysunek za pomocą elementu canvas. Tworzymy pierwszą stronę, która będzie zawierała nasz powyższy kod elementu canvas, lecz samo wstawianie kodu nic nam nie wyświetli, a co dopiero cokolwiek ma narysować.
Chcąc rozpocząć rysowanie musimy zastosować metodę DOM getContext. Każdy element canvas posiada metodę DOM zwaną getContext do uzyskania dostępu do funkcji rysujących. Metoda getContext może przyjąć tylko jeden parametr, który to jest trybem rysowania. Aktualnie jest dostępny tylko jeden tryb i jest to tryb 2d. W przyszłości będziemy mogli zobaczyć tryb 3d, lecz teraz pozostajemy przy trybie 2d.
Korzystając z kolejnej metody DOM – getElementById, zdefiniujemy pierwszą linię skryptu pozwalającego nam na rozpoczęcie rysowania za pomocą elementu Canvas. Metoda ta pozwoli nam na uzyskanie dostępu do drugiej metody getContext, dzięki której mamy dostęp do trybu rysowania:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

Starsze wersje przeglądarek?!

Firefox w wersji 1.0 i starsze jego wydania oraz np. Internet Explorer w wersji 6 nie potrafią rozpoznać elementu Canvas. Co teraz?
Potrzebujemy metody chroniącej przeglądarki, które nie wspierają canvas, przed uruchomieniem naszego skryptu. Można tego łatwo dokonać wykonując test metody getContext. Kawałek górnego kodu wyglądał będzie tak:

var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // kod rysowania
}

Do kodu należy dodać jeszcze wyrażenie if, aby przeglądarka nie potrafiąca wczytać Canvas, nie próbowała tego zrobić.

Łączenie kodu

Połączę teraz wszystko, tworząc nam szablon podstawowego dokumentu do innych przykładów:

<html>
  <head>
    <title>Szablon elementu Canvas</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('pierwszy_przyklad');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
    </style>
  </head>
  <body onload="draw();">

    <canvas id="pierwszy_przyklad" width="150" height="150"></canvas>

  </body>
</html>

SZABLON – pobierz!

Wracając do kodu i spoglądając na skrypt zobaczymy, że została wywołana funkcja draw, która zostanie raz wywołana, kiedy zakończy się ładowanie strony (poprzez umieszczenie atrybuty onload w znaczniku body).

Ok, pierwsze koty za płoty . Utworzyliśmy szablon, który posłuż nam niedługo jako podkład pod bardziej zaawansowane przykłady. Niebawem kolejne części opisu Canvas, a między czasie odsyłam do korzystania z zasobów Mozilla Developer Center.

Treść wraz przykładami została opracowana na podstawie Przewodnika po canvas, będącego częścią MDC PL.

Na Mozilla Developer Center w kategorii Prezentacje pojawił się artykuł zawierający w sobie dwie (jak na razie) prezentacje wideo.

Pierwsza z prezentacji to film o tym jak są tworzone strony w oparciu o język DOM. Druga prezentacja natomiast ukazuje w jaki sposób silnik Gecko rysuje/maluje dokumenty na ekranie.

1. Jak budować strony stosując DOM? (QuickTime, 198 MB)
2. Rozmieszczenie i rysowanie dokumentów (QuickTime, 282 MB)

Zapraszam do obejrzenia obu prezentacji i oczywiście do czytania lub współtworzenia polskiej wersji serwisu Mozilla developer Center.

Do Firefoksa w wersji drugiej został zaimplementowany element DOM, który pozwala na dodanie czytnika kanałów poprzez umieszczony na naszej stronie odnośnika, jak? O tym poniżej…

Najpierw przedstawmy przykładowy odnośnik z możliwością dodania czytnika:

Dodaj Newsgator Online jako czytnik kanałów w Firefoksie 2.

Po kliknięciu w przykładowy odnośnik ujrzymy:

Uzyskujemy to poprzez nowy element specyfikacji WHATWG jaki został zaimplementowany w Firefoksie 2 (window.navigator.registerContentHandler). Kod naszego przykładu wygląda następująco:

<a href='javascript:window.navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
"http://www.newsgator.com/ngs/subscriber/subext.aspx?url=%s",
"Newsgator Online");'>Dodaj Newsgator Online</a>

window.navigator.registerContentHandler

Pozwala stronie internetowej na rejestrację samej siebie jako określony uchwyt do zawartości o określonym typie MIME. Składnia:

window.navigator.registerContentHandler(typMIME, uri, tytuł);

Gdzie:

• typMIME – podajemy typ MIME (podajemy jako łańcuch znaków)
• uri – adres URL do naszego uchwytu (podajemy jako łańcuch znaków)
• tytuł – nasz tytuł, który zobaczy użytkownik podczas dodawania uchwytu (podajemy jako łańcuch znaków)

I jeszcze na koniec przykład ogólny:

navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
                                 "http://www.przykladowy_adres.tld/?foo=%s",
                                 "Mój czytnik kanałów");

Oparte na podstawie:

• MDC
• Mozilla Links

Kiedyś wspomniałem co nieco na ten temat w postach nt. pracy ze skryptami (cz.1) oraz (cz.2). Myślę, że przyszła pora na większe rozwinięcie tego tematu. Pokrótce przypomnijmy jednak jak zaimplementować skrypt do naszego okna:

Dodajmy, skrypt do okna. Chociaż, że nie ma znaczenia jaką nazwę mu nadamy, plik przechowujący skrypt to zazwyczaj jest o tej samej nazwie, co pliku XUL, z tą tylko różnicą, że z rozszerzeniem .js. Aby dodać skrypt to musimy dodać linię z kodu poniżej zaraz za otwierającym znacznikiem window i PRZED jakimkolwiek innym elementem.

<script src="nazwa_skryptu.js"/>

Możemy dołączać wiele skryptów w pliku XUL, poprzez wielokrotne zastosowanie znacznika script, przy czym każdy musi wskazywać na inny skrypt. Adresy URL możemy stosować względne lub bezwzględne. Przykład:

<script src="nazwa_skryptu.js"/>
<script src="chrome://katalog/content/nazwa_skryptu.js"/>
<script src="http://www.domena.pl/js/nazwa_skryptu.js"/>

Odpowiedź na zdarzenie

Skrypt będzie zawierał kod odpowiadający na różne zdarzenia wywoływane przez użytkownika lub inne powodujące to sytuacje. Istnieje około trzydziestu różnych zdarzeń, które mogą być obsługiwane na kilka różnych sposobów. Typowym zdarzeniem jest to, że użytkownik naciska klawisz myszy lub klawiatury. Każdy element języka XUL posiada zdolność do wywoływania pewnych zdarzeń w różnych sytuacjach. Pewne zdarzenia są wywoływane tylko poprzez niektóre elementy.

Każde zdarzenie posiada nazwę, dla przykładu; ‘mousemove‘ jest nazwą zdarzenia, które jest wywoływane, kiedy użytkownik przeniesie kursor myszy nad element UI. XUL stosuje ten sam mechanizm zdarzeń, który jest zdefiniowany przez zdarzenia DOM. Kiedy pojawia się ‘akcja’ powodująca zdarzenie, taka jak; użytkownik poruszający myszką, tworzony jest obiekt zdarzenia odnoszący się do typu tego zdarzenia. Wiele rozmaitych własności jest ustawionych na obiekt zdarzenia, takich jak pozycja myszki, klawisz, który został naciśnięty i inne.

Najczęściej używanym zdarzeniem jest zdarzenie ‘command‘. Zdarzenie command jest ‘odpalane’ w momencie aktywacji elementu przez użytkownika, na przykład poprzez naciśnięcie przycisku, zmianę pola wyboru lub zaznaczenie jednej pozycji z menu. Zdarzenie command jest użytecznym zdarzeniem ze względu na jego zdolność do automatycznej obsługi różnych sposobów aktywacji elementów. Na przykład: zdarzenie command wystąpi bez względu na to, czy użytkownik użyje przycisku myszy, bądź też naciśnie klawisz Enter.

Istnieją dwa sposoby na dodanie nasłuchu do elementu. Pierwszy, następuje poprzez użycie atrybutu, którego wartość reprezentuje skrypt. Drugi, następuje natomiast dzięki odwołaniu się do metody addEventListener dotyczącej poszczególnego elementu.

Nasłuch atrybutu zdarzenia

W celu wykorzystania atrybutów, należy umieścić atrybut w elemencie, do którego chcielibyśmy dodać nasłuch jego zdarzenia. Jego nazwa powinna być nazwą samego zdarzenia poprzedzoną przedrostkiem ‘on‘. Przykładowo, atrybut przesyłający zdarzenie ‘command‘ to ‘oncommand‘. Przykład:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="przykladowe-okno" title="Alert przycisku"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="OK" oncommand="alert('Przycisk został wciśnięty!');"/>

</window>

Plik: alert_przycisku.xul

W poniższym przykładzie, nasłuch został umieszczony w pudełku vbox i będzie otrzymywał zdarzenia dla obu jego elementów.
Obsługa zdarzenia jest przekazywana, dzięki obiektom zdarzeń – event. Są one używane w celu pobierania określonych informacji na temat zdarzenia. Jedną z najczęściej używanych jego własności jest target, który zawiera element, odnośnie którego zaszło dane zdarzenie. W poniższym przykładzie wyświetlamy alert zawierający nazwy znaczników.

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="przykladowe-okno" title="Alert w vbox"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox oncommand="alert(event.target.tagName);">
  <button label="OK"/>
  <checkbox label="Pokaż obrazki"/>
</vbox>

</window>

Plik: alert_przycisku2.xul

Drugi sposób przedstawię w kolejnym poście.

Przykłady zostały umieszczone w przeglądarce plików. Więcej informacji jak zawsze jest dostępne w kursie i dokumentacji xul (linki z boku okna w menu).

Dawno nie pisałem nic na temat XUL-a, lecz postaram się to nadrobić. Między czasie tłumaczyłem trochę dokumentację XUL, znajdującą się na MDC w wersji PL. Przy okazji tego tłumaczenia znalazłem kilka fajnych elementów, które pokaże w miarę tego i następnych postów o XUL-u. Od następnej wersji pomyślałem, że warto dodać wszystkie posty o XUL z mojego bloga w formacie *.pdf. Taki mały zbiór , który bym rozszerzał co dwa lub trzy nowe posty jakie napisze nt. języka XUL. Ok, zajmijmy się pracą ze
skryptami w języku XUL.

W jaki sposób możemy stworzyć obsługę zdarzeń, funkcji? Odpowiedź: za pomocą JavaScriptu (a ściślej z DOM). Sposób działania DOM polega na tworzeniu drzewa elementów. Więcej o samym DOM znajdziecie na MDC.

Pierwszym naszym przykładem będzie przycisk z kodem JavaScriptu.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="test-przycisku"
			title='Zastosowanie JS'
			xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button id='name' label='Przycisk skryptu' /> 
</window>

Wyświetli:

Zobacz plik

Powyższy kod jest tylko ‘nieżywym’ przyciskiem, aby go ‘ożywić’ dodajmy do elementu button:

<button id='name' label='Przycisk skryptu' onclick='alert("Cześć");' /> 

Zobacz plik

W powyższym przykładzie, zwrócę tylko uwagę na zamieszczaniu w zdarzeniu onclick, tekstu w cudzysłowach.

Ok, tyle jeśli chodzi o JS w XUL-u na dziś, lecz to jeszcze nie koniec bo chciałem Wam bardzo fajny element znaleziony podczas tłumaczenia dokumentacji XUL. W kolejnym poście postaram się dodać i omówić element script. Teraz o…

Element colorpicker:

Paleta kolorów, z której użytkownik może wybrać jedną komórkę siatki z kolorem poprzez kliknięcie w nią. Spójrzmy na prosty kod elementu:

<colorpicker type="button"/>

Przykład tego elementu wygląda natomist tak:

Tym kolorowym akcentem zapraszam na kolejną porcję XUL-a. Gwarantuje, że będzie o wiele wiele dłuższa.

BTW: Ma ktoś jakiś fajny pomysł na aplikację, którą można by było wykonać w XUL-u?

Zobacz także:

• Dokumentacja XUL
• Kurs XUL