Modul készítése az alapoktól
A JoomlaWikiBÓL
Tartalomjegyzék |
Bevezetés
A leírás a legegyszerűbb modul elkészítést mutatja meg. Modul felépítésén, alapvető hivatkozásai keresztül.
Kinek készült
A leírás alapján még a kezdők is létre tudnak hozni sablonjukhoz egyéni modulokat, azokat kedvük szerint alakíthatják. Leírásban nem alkalmazunk profi szintű HTML és CSS tudást igénylő parancsokat , hivatkozásokat. Igyekszünk a kezdők számára is érthető, kézzel fogható leírást nyújtani sok-sok magyarázattal. Persze, lehet olyan, hogy nekünk nagyon alapvető dolgot írunk és az olvasó még sem érti. Az ilyen esetleges félreértéseket a honlap fórumában bármikor meg lehet beszélni, ahol a fórumtagok állnak mindenki rendelkezésére a problémák megoldásában.
Mi kell hozzá
Nem szükséges, ezért csak javaslom a következő szerkesztőt: Pspad editor. A modul készítésének leírása a Joomla 1.5 verzióhoz készült!
Legelemibb (Hello World! stílusú) modul készítése
Fájl struktúra
A Joomla 1.5 megjelenésével a modulok felépítése és az elhelyezkedésük is megváltozott. Joomla 1.5 verziótól kezdve egy modul telepítése után már a modules könyvtárban létrejön a modul nevével egy könyvtár és a hozzátartozó fájlok itt kerülnek elhelyezésre.
Milyen fájlok kerülnek elhelyezésre?
(Maradva a megszokott példánál létrehozunk egy helloworld modult)
/modules/mod_helloworld/mod_helloworld.xml tartalma:
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<!—Modul elnevezése -->
<name>Hello World - Hello</name>
<!-- Modul -->
<author>Joomla! User Association Hungary</author>
<!—Modul készítésének ideje -->
<creationDate>2008-08-11</creationDate>
<!-- Copyright információ -->
<copyright>All rights reserved by Joomla! User Association Hungary 2008.</copyright>
<!-- License Információ -->
<license>GPL 2.0</license>
<!—Készítő e-mail címe -->
<authorEmail>info@joomla.org.hu</authorEmail>
<!—Készítő weboldala -->
<authorUrl>www.joomla.org.hu</authorUrl>
<!—Modul verziószáma -->
<version>1.0.0</version>
<!—Modul leírása -->
<description>Modul "Hello World" készítésének bemutatása</description>
<!—Fájlok felsorolása, amely a telepítés során telepítésre kerülnek -->
<files>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>index.html</filename>
</files>
</install>
A fent leírtak a Joomla számára nyújtanak információt a modulunkról.
/modules/mod_helloworld/mod_helloworld.php tartalma:
<?php
defined('_JEXEC') or die('Direct Access to this location is not allowed.');
?>
<p>
Hello World
</p>
/modules/mod_helloworld/index.html tartalma:
<html><body bgcolor="#FFFFFF"></body></html>
A lehető legegyszerűbb módon kiírtuk a Hello World szöveget. Itt paraméterek meghívását, átadását vagy különleges beállítást nem alkalmaztunk.
Most kicsit kibővítjük modulunk tudását, hiszen mi valami egyedi kialakítást szeretnénk neki adni. Bevezetünk egy új paraméter használatát, amelynek megadása után a modul beállításainál már az új beállításokkal jelenik meg.
<!—A következő paraméter megadásával a modulhoz tartozó osztály hívjuk meg, ami a modulunk kinézetét alakítja át nekünk -->
<param name="moduleclass_sfx" type="text" default="" label="Modul osztály utótag" description="PARAMMODULECLASSSUFFIX" />
Így a /modules/mod_helloworld/mod_helloworld.xml tartalma a következőképpen módosul:
<?xml version="1.0" encoding="utf-8"?>
<install type="module" version="1.5.0">
<!—Modul elnevezése -->
<name>Hello World - Hello</name>
<!-- Modul -->
<author>Joomla! User Association Hungary</author>
<!—Modul készítésének ideje -->
<creationDate>2008-06-23</creationDate>
<!-- Copyright információ -->
<copyright>All rights reserved by Joomla! User Association Hungary 2008.</copyright>
<!-- License Információ -->
<license>GPL 2.0</license>
<!—Készítő e-mail címe -->
<authorEmail>info@joomla.org.hu</authorEmail>
<!—Készítő weboldala -->
<authorUrl>www.joomla.org.hu</authorUrl>
<!—Modul verziószáma -->
<version>1.0.0</version>
<!—Modul leírása -->
<description>Modul "Hello World" készítésének bemutatása</description>
<!—Fájlok felsorolása, amely a telepítés során telepítésre kerülnek -->
<files>
<filename module="mod_helloworld">mod_helloworld.php</filename>
<filename>index.html</filename>
</files>
<!—Egyéb paraméterek -->
<params>
<param name="moduleclass_sfx" type="text" default="" label="Modul osztály utótag" description="PARAMMODULECLASSSUFFIX" />
</params>
</install>
Mi történt itt?
A paraméterek beállításánál lehetőségünk nyílik egy un. osztály (class) használatára. Ennek a (továbbiakban class) beállítását a template_css.cs fájlban tudjuk megadni.
Mi az a Class (osztály)
A HTML elemek stílusbeállítási rugalmasságának növelése érdekében a W3C új attribútumot vett fel a HTML-be: ez a CLASS (osztály). A 'BODY' minden eleme osztályba sorolható, az egyes osztályok pedig stíluslapból megcímezhetőek.
<HTML>
<HEAD>
<TITLE>Stíluslap példa</TITLE>
<STYLE TYPE="text/css">
<!--
H1.mezei {color: #00ff00}
-->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=mezei>Zöld, mint a rét</H1>
</BODY>
</HTML>
Az osztályba sorolt elemekre az öröklődés általános szabályai vonatkoznak. Öröklik a stílusértékeket a dokumentum struktúrájában felettük álló ún. szülő elemeiktől. Minden azonos osztályba tartozó elem megcímezhető egyszerre is, elhagyva a hozzájuk tartozó tag nevét:
.mezei {color: green}
/*minden mezei osztályba tartozó elem (CLASS=mezei)*/ Megjegyzendő, hogy szelektoronként (HTML elemenként) csak egy osztály definiálható!
AZ ID SZELEKTOR
A HTML -be felvételre került az 'ID' attribútum is, amely lehetővé teszi az egyedi azonosítók felvételét a dokumentumba. Ennek a lehetőségnek különleges jelentőséget ad, hogy felhasználható stíluslap szelektorként, és megcímezhető a '#' előtaggal.
#z98y {letter-spacing: 0,3em}
H1#z98y {letter-spacing: 0,5em}
<P ID=z98y>Széles szöveg</P>
Az fenti példa első esetében a kiválasztott formázást a 'P' elemhez feleltettük meg, az 'ID' attribútumérték segítségével. A második esetben kettős feltételt támasztottunk: a formázás akkor lép érvénybe, ha a H1 elemet a '#z98y' azonosítóval (ID) látjuk el. Ezért ez már nem vonatkozik a 'P' elemre. Az ID attribútum szelektorként való használatával HTML elemekre alapozott stílustulajdonságok állíthatóak be.
ÖSSZEKAPCSOLT SZELEKTOROK
Az öröklődés szabályai mentesítik a stíluslap tervezőjét egy csomó fölösleges gépelés alól. A tulajdonságok beállítása során elég egyszer elkészíteni az alapértelmezettet, utána felsorolni a kivételeket. Ha az 'EM' elemnek a 'H1' elemen belül más színt szeretnénk meghatározni, azt a következőképp tehetjük meg:
H1 {color: blue}
EM {color: red}
Mikor a stíluslap aktív, minden EM kiemelt szövegrész, akár a H1 elemen belül, akár azon kívül található, vörsre változik. Abban az esetben, ha csak egyszer akarjuk a H1 -en belül az EM elemet vörösre színezni, a CSS kódot az alábbiak szerint kell megváltoztatni:
H1 EM {color: red}
Összekapcsolt szelektorok használata esetén azok az elemek lesznek megcímezve, amelyek a felsorolásban utoljára állnak. Tehát akár kettőnél több elem is 'egymásba ágyazható' ilyen módon.
MEGJEGYZÉSEK
A CSS kódban elhelyezett megjegyzések hasonlóak a C programnyelvben elhelyezett megjegyzésekhez:
EM {color: red} /* A kiemelt szövegrész vörös!*/
A megjegyzések nem ágyazhatók egymásba, illetve más CSS utasításba. Forrás: http://htmlinfo.polyhistor.hu/css_ref/css1.htm
Modul Class beállítása a CSS-ben
A modulunk kinézetétre valami egyedit szeretnénk (főleg azért mert a legtöbb sablon az alapbeállítással: kék, piros, zöld, sárga rendelkezik) így valami rikító neon zöld beállítást választottunk példaként. Ennek beállítása HTML: #33FF00 vagy RGB: 51, 255, 0. Az class elnevezése ebben a példában legyen: nzold A sablon a Joomla alapértelmezett sablonja a rhuk_milkway.
templates/rhuk_milkyway/css/template_css.css fájlt nyissuk meg.
/*modul alapbeállítása*/
div.moduletable_nzold {
/*neon zöld hátteret beállítjuk*/
background: #33FF00;
}
/*modul fejléc beállítása*/
div.moduletable_nzold h3{
/*sötétzöld háttérszín*/
background: #339933;
/*fehér betűszín*/
color: #FFFFFF;
/*25px magasságot állítottunk a modul fejlécnek*/
height: 25px;
/*a szöveget középre igazítjuk*/
text-align: center;
/*Használt betűtípus beállítása*/
font-family: Helvetica,Arial,sans-serif;
/*betűméret beállítása*/
font-size: 18px;
/*középre igazítjuk vertikálisan a szöveget*/
line-height: 1.3em;
}
div.moduletable_nzold a:link {
/*listázás beállítása pirosra*/
color: #FF0000;
}
div.moduletable_nzold a:hover {
/*menüpont kiemelése fehérre, ha az egeret a linkre visszük */
color: #FFFFFF;
}
Az admin panelen a modul beállításánál a Modul osztály utótag-nak ebben a példában az _nzold paramétert kell megadnunk. Igaz, elég furcs színbeállítást sikerült létrehoznunk, de véleményünk szerint elég szemléletesen mutatja be, éppen a színek kiválasztása miatt a különböző modul beállításokat a CSS-ben. Természetesen a modulnak további paramétereket is megadhatunk a CSS-ben, de a példa érthetősége és átláthatósága miatt itt nem adtunk további beállítást. Ez alapján már saját magunk is létrehozhatunk saját egyedi modult vagy a meglevő modulunkat tetszés szerint tudjuk módosítani.
