Drupal front-end

Marek Sotak a Bohdan Ganicky

Představení

Marek SotakDeveloper, designer

co-founder of atomic ant ltd web design company based in London, Prague and Denmark, operates internationaly.

Creator of RootCandy admin theme

http://drupal.org/project/rootcandy

@sotak –http://twitter.com/sotak

Bohdan GanickyFront-end developer

Part of the atomic ant team since 2009. Responsible for magic things.

@bganicky – http://twitter.com/bganicky

Šablonování – theming – Drupal 6

Šablona = prezentační vrstva oddělená od kóduNemusíme zasahovat do modulů, když chceme přepsat

výstup (mark-up)

PHPTemplate engine (Smarty, xtemplate, atd...)

Ukládáme do sites/*/themes/moje-sablona

Anatomie šablony

Generování stránky – suggestions + preprocess

theme('hook', $arguments)

theme_breadcrumb, skolavafrice_links,...

Definováno v hook_theme()function search_theme() {

return array(

'search_theme_form' => array(

'arguments' => array('form' => NULL),

'template' => 'search-theme-form',

),

);

}

hook = funkce – suggestions

nazevSablony_hook($arguments)skolavafrice_breadcrumbs($arguments)

engineName_hook($arguments)phptemplate_hook($arguments)

theme_hook($aguments)

hook = template – suggestions

Převést $arguments $variables→

Hledání render funkce (theme_render_template)

Hledání funkce pro zjištění připony (.tpl.php)

$variables se předávají referencí

hook = template – suggestions

template_preprocess

template_preprocess_hook

moduleName_preprocess

moduleName_preprocess_hook

engineName_engine_preprocess

engineName_engine_preprocess_hook

hook = template – suggestions

engineName_preprocess

engineName_preprocess_hook

themeName_preprocess

themeName_preprocess_hook

Sesbírané návrhy

Najdi implementované funkce (drupal_discover_template)

hook = template – suggestions

theme_render_template

Poskládat .tpl.php

navrh.tpl.php

nebo fallback

hook.tpl.php

Sub-theming – šablony v šabloně

Stačí .info soubor s hodnotoubase theme = ninesixty

Můžou sdílet některé soubory z hlavní šablonyCSS, js, .tpl.php, přepsané funkce z template.php

Nesdílítheme-settings.php, logo, color, některá nast. z .info

Sub-theming – jak na to

Vytvořte novou složku v sites/*/themes s názvem vaší šablony – eg. sites/all/themes/skolavafrice

Přidejte .info soubor se základními vlastnostmi – name, description,...

Přidejte “base theme = ninesixty” do .info souboru

Hotovo

Subtheming quick and dirty - http://drupal.org/node/441088

Užitečné tipy

DrupalContrib.orghttp://drupalcontrib.org

admin/settings/performanceOptimalizace css + js souborů

Base themesZen, Ninesixty, Genesis,... http://drupal.org/project/Themes

Užitečné tipy

Themer modulehttp://drupal.org/project/devel_themer

Firebug – firefox extension - http://getfirebug.com/

Odkazy

Theming handbook d.o - Drupal 6http://drupal.org/theme-guide

Drupal 6.x 7.x guide→http://drupal.org/update/theme/6/7

Mailing listhttp://drupal.org/mailing-lists

Theme garden - http://themegarden.org

IRC #drupal-themes

Drupal a JavaScript

jQuery

jQuery?

Javascriptová knihovna (nejpopulárnější)

Abstrakce JS do srozumitelného API

Řeší rozdíly implementace JS v různých prohlížečích

Přidává vlastní funkcionalitu (např. animace)

Usnadňuje nám práci

Ukázka<ul>

<li>Joomla</li>

<li>Drupal</li>

<li>Wordpress</li>

</ul>

<ul>

<li>Prototype</li>

<li>jQuery</li>

<li>Dojo</li>

</ul>

Ukázka<ul>

<li class=”odd”>Joomla</li>

<li>Drupal</li>

<li class=”odd”>Wordpress</li>

</ul>

<ul>

<li class=”odd”>Prototype</li>

<li>jQuery</li>

<li class=”odd”>Dojo</li>

</ul>

Před

var lists = document.getElementsByTagName('ul');

for (var i = 0; i < lists.length; i++) {

var items = lists[i].getElementsByTagName('li');

for (var j = 1; j < items.length; j += 2) {

if (!/(^|s)odd(s|$)/.test(items[i].className)) {

rows[i].className += ' odd';

}

}

}

Po

$('ul li:nth-child(odd)').addClass('odd');

demo

Základní koncept

$('ul li:nth-child(odd)').addClass('odd');

Něco najdi . . .

. . .něco s t ím udělej .

Základní koncept

$('ul li:nth-child(odd)').addClass('odd');

CSS selektor (CSS3)

jQuery metoda

$ == jQuery

$('ul li:nth-child(odd)').addClass('odd');

$ == jQuery

jQuery('ul li:nth-child(odd)').addClass('odd');

CSS selektory...

Všechny pokročilé selektory včetně CSS3$('div p'), $('div > p')

$('div ~ p'), $('div + p')

$('div p:first-child'), $('div p:last-child')

$('div p:only-child'), $('div p:nth-child(2)')

...a mnoho dalších

+ filtry

$(“li:odd”), $(“li:even”)

$(“li:first”), $(“li:last”)

$(“input:checked”), $(“input:not(:checked)”)

$(“div:contains('Drupal')”), $(“div:has(ul)”)

$(“div:hidden”), $(“div:visible”)

...a mnoho dalších

http://api.jquery.com/category/selectors/

Řetězení metod

$('ul li:nth-child(odd)').addClass('odd').append(“I'm odd”).fadeOut(“slow”);

demo

jQuery API

● http://api.jquery.com● http://www.futurecolors.ru/jquery/

Rozšíření pro jQuery - plugins

stěžejní vlastnost jQuery → http://plugins.jquery.com

$.fn.showLinkTarget = function() {

return this.each(function() {

console.log(this.href);});

}

$(“a”).showLinkTarget(); demo

$(document).ready();

Událost nastane 1x běhěm načtení dokumentu→

V daný moment máme k dispozici celý DOM a můžeme s ním začít manipulovat

Netýká se obrázků! $(window).load();→

$(document).ready(function() {

alert('Dokument je připraven.');

});

Progressive enhancement

3 vrstvy

Obsah (html) prezentace (css) chování (js)→ →

Jedna nezávislá na druhé pokud možno co nejmenší →třecí zóny

JQuery ideální nástroj pro PE!→

Verze jQuery

Drupal 5.x jQuery 1.0.x ( 1.0.4)→ →

Drupal 6.x jQuery 1.2.x ( 1.2.6)→ →

Drupal 7.x snad jQuery 1.4.x →http://drupal.org/node/653580

Modul “jQuery update”

http://drupal.org/project/jquery_update

Drupal 5.x jQuery 1.2.6→

Drupal 6.x jQuery 1.3.2 (dev verze)→

Jak začít?

Čeho chci dosáhnout?

Neudělal to už někdo za mě? (viz plugins)

Neexistuje dokonce řešení ve formě Drupal modulu? (viz jCarousel či Lightbox2)

Nic z výše uvedeného? →

page.tpl.php

<?php print $scripts; ?>

Soubor .info

● Drupal automaticky vezme soubor script.js v kořenovém adresáři tématu.

● Pokud chceme použít jiný název či umístění, pak upravíme .info soubor:

...

stylesheets[all][] = my_style.css

scripts[] = js/my_script.js

...

Soubor .info

● Drupal automaticky vezme soubor script.js v kořenovém adresáři tématu.

● Pokud chceme použít jiný název či umístění, pak upravíme .info soubor:

...

stylesheets[all][] = my_style.css

scripts[] = js/jquery.plugin.js

scripts[] = js/my_script.js

...

Automatické změny v HTML

<html class=”js” ...>

<script type=”text/javascript” src=”jquery.js”>

<script type=”text/javascript” src=”drupal.js”>

<script type=”text/javascript” src=”my_script.js”>

<html class=”js” ...>

Opomíjená třída

Důležité pro stylování prvků s nimiž nějak manipulujeme přes JS/jQuery

Místo v .js:$(document).ready(function() {

$('#something').hide();

});

● použijeme CSS: .js #something { display: none; }

function fancyLogin() {var $login_block = $('#block-user-0');var $target = $('.top-navigation .item-list .first');var $trigger = $target.find('a').click(function() {

if ($login_block.is(':visible')) {$login_block.add($overlay).fadeOut();return false;

}else {

$login_block.add($overlay).fadeIn();$('#edit-name').focus();return false;

}});var $overlay = $('<div id="overlay">').appendTo('body').click(function() {

$trigger.trigger('click');});

$login_block.appendTo($target);}

$(document).ready(fancyLogin);

Nástroje

Firebug pro Firefox: http://getfirebug.com/

Developer Tools v Google Chrome

IE8 Developer Tools

http://jsbin.com/

http://james.padolsey.com/jquery/

http://www.woods.iki.fi/interactive-jquery-tester.html

Odkazy

http://jquery.com

http://api.jquery.com

http://www.futurecolors.ru/jquery/

Knihy

jQuery for Designers

jQuery Enlightenment

jQuery in Action

Learning jQuery

Drupal 6 JavaScript and jQuery

Otázky?

Děkujeme za pozornost!

Credits

Slide 4 by Medical Student on flickr

Slide 44 - http://web.mac.com/moistproduction/flash/index.html

Slide 60 by poopoorama on flickr

Website preview: http://skolavafrice.cz