OOP

Ügyfelünk kérése alapján el kellett készítenünk egy DropDown menüt a nyitólapjára. Most is - mint általában - a jQuery JavaScript könyvtárban kerestem a megoldást. Rövid keresgélés után megtaláltam a Superfish jQuery plugin-t, mely tökletesen megfelelőnek tűnt a célra...legalábbis első ránézésre.

A probléma a tesztelés során jelentkezett, mégpedig a szokásos IE6/IE7/FF kompatibilitási ellentétek keretében.
Mondanom sem kell, hogy a plugin FF alatt teljesen jól teljesített (ugyanúgy mint Safari-n vagy Opera-n), a Microsoft két böngészőjénél az oldal gyakorlatilag összeomlott.

A menü FF-ban:

Az internet Explorerben elég érdeksen mutatott:

Régebben írtam egy cikket a dinamikus form ellenőrzésről, és arra gondoltam leírom az eljárás modernebb változatát, azaz a hibaüzenetek nem alert ablakban jelennek meg, hanem DHTML segítségével.

Természetesen olyan kódot kell készíteni amely akárhány form-ra dinamikusan működik, tehát nem függ az input mezők számától, és az oldalon elhelyezett form-ok mennyiségétől.

A megoldást itt is a jQuery JavaScript könyvtár adja.

De mindenek előtt érdemes átnézni hogyan is kell felépíteni egy profi form-ot. Khauth György kollegám írt már erről néhány nagyon hasznos cikket:

• Regisztrációs űrlap tervezési minták
• Felhasználóbarát form kitöltés és ellenőrzés
• Ergonómikus formok készítésének irányelvei

Miután az alapelvek tanulmányozásával végeztünk készítsük el a form-ot:

<style type="text/css">
.form-row {
  padding-bottom: 10px;
  width: 290px;
}
 
.form-row label {
  float: left;
  width: 100px;
  padding-right: 10px;
}
 
.form-row input {
  float: left;
  padding: 3px;
  width: 160px;
}
 
.clear {
  clear: both;
}
 
.form-error {
  text-align: center;
  color: #C52020;
  border: 1px solid #DD7777;
  background: #FFCCCC;
  margin: 10px 0;
  display: none;
}
</style>
 
<div style="margin: 0 auto; width: 300px;">

A Drupal 5-ben van egy hiba amiről a programozók sokszor elfelejtkeznek.

A $node objektumnak van egy path attribútuma:

<?php
$node->path;
?>

A probléma az, hogy amikor admin-ként vagyunk bejelentkezve a path érték megfelelő, ám ha nem akkor üres, így minden link a kezdőoldalra mutat. Ez annyit takar, hogy nem lehet elérni a kívánt bejegyzéseket, és ha nem elég körültekintő a tesztelés, akkor fel sem tűnik, mivel a session-be bentmaradunk mint bejelentkezett admin-ok, így nem is érzékeljük a hibát.

A megoldás egy egyszerű beépített Drupal fgv használata

<?php
$node->path = drupal_get_path_alias("node/$node->nid");
?>

Ez egy nagyon egyszerű megoldás, mégis ha nem vagyunk vele tisztába komoly gondot okozhat a weboldalon, de hangsúlyozom: megfelelő tesztelés esetén ki kell hogy derüljön még az élesítés előtt.

Olyan oldalaknál ahol egy bizonyos node tipushoz sok beviteli mező tartozik elvárás lehet, hogy ne kelljen minden módosításnál lemenni a lap aljára.

A logikus megoldás az, hogy az ENTER gomb lenyomásával jelzi a felhasználó, hogy végzett a tartalom módosításával, feltöltésével.

Az eseményt a jQuery JavaScript könyvtárral könnyen meg lehet oldalni, utána pedig már csak egy nagyon egyszerű Drupal modult kell hozzá írni, és minden olyan weblapon alkalmazni lehet ahol szükség van rá.

Íme a JavaScript fájl amint majd hozzárendelünk az oldalhoz:

var writing   = false;
var node_edit = false;
 
$(document).ready(function() {
 
  if ($('#node-form').length) {
    node_edit = true;
  }
 
  if (node_edit) {
    $('.form-textarea', $('#node-form').parent()).focus(function() {
      writing = true;
    });
    $('.form-textarea', $('#node-form').parent()).blur(function() {
      writing = false;
    });
  }
});
 
$(document).keypress(function(event) {
  if (event.keyCode == 13 && !writing && node_edit) {
 
    if (confirm_submit()) {
      $('#edit-submit', $('#node-form').parent()).click();
    }
  }
});
 
function confirm_submit() {
  var agree = confirm("Valóban menti a tartalom változásait?");
  if (agree) {
    return true ;
  } else {
    return false ;
  }
}

Menjünk végig a kódon, mi miért van!

Először is a writing változó, a node_edit változó és az oldal betöltésekor lefutó fgv-ek, vagyis a $(document).ready(function()).

Egyik ügyfelünknél felmerült az igény, hogy egy form kitöltése után automatikusan küldjünk ki egy email-t csatolmánnyal együtt.

A probléma megoldására a régebbről ismert HtmlMimeMail PHP osztályt használtam.

Nagyon jól megszerkesztett osztály úgyhogy nagyon könnyű használni, ám Drupal alatt mégsem lehetett alkalmazni a leírásban olvastakat.

Az első problémát az jelentette, hogy nem lehetett az osztályt beilleszteni, illetve objektumot készíteni belőle. Egyszerűen kifagyott tőle a Drupal és fehér képernyő jelent meg. Szerencsére van olyan verziója is, amitől nem jelentkezik ez a probléma.

Innen telölthető zip-el tömörítve (20 KB): HtmlMimeMail Drupal.

Miután ez megoldódott nagyjából a HtmlMimeMail oldalán található leírásokat kellett alkalmazni néhány dolgot kivéve.

Először egy ellenőrzés arról, hogy nem-e létezik már az osztály:

      if (!class_exists('htmlMimeMail') && !class_exists('Mail_mimePart')) {
        require_once(dirname(__FILE__)."/htmlmimemail/htmlMimeMail.php");
      }

 
      $mail = new htmlMimeMail();
      $mail->setTextCharset('UTF-8');
      $mail->setHtmlCharset('UTF-8');
      $mail->setHeadCharset('UTF-8');

Sokszor felmerül a kérdés, hogy lehet a form mezőinek kitöltöttségét egyszerűen és újrahasznosíthatóan megírni.

Erre egy nagyon jó megoldást ad a jQuery JavaScript könyvtár.
A lényeg az, hogy egy kód megírásával lehessen ellenőrizni az oldalon található összes form kötelező mezőinek kitöltöttségét, függetlenül attól, hogy mely formnak hány kötelező mezője van.

Ehez fontos, hogy a form-okat a megfelőle stratégia szerint építsük fel...a lényeg a helyes osztályok használata. Ha a megfelelő input mezőket a megfelelő osztályokba soroljuk, akkor a megoldás néhány sor JS-el megoldható, és el lehet sütni akármikor a jövőben is.

Néhány napja az egyik ügyfelünknek kellett elkészítenem egy site részletet, ahol az oldalak összességét tekintve, kb. 20 formot kellett elhelyezni, namost ez sok, és ha mindet a szabványos JS módszerekkel próbáltam volna ellenőrizni (a mezőket ID alapján lekérdezem és ellenőrzöm, hogy ki van-e töltve), akkor sok kódot kellett volna írni, valamint a hibalehetőség is nagy. Ahol nagy a hibalehetőség azt minimum tízszer annyi idő tesztelni, mint egy megfelően elkészített form ellenőrzést.

Vegyünk egy egyszerű példát egy négy mezőböl álló form-ra, melynek három kötelező mezője, amiből az egyik email, tehát az email cím valósságát is ellenőrizni kell.

A form a következő képp néz ki:

<div class="form">
 
Ide jöhet a form bevezető szövege
<form class="feliratkozo-form" action="#" method="post">
<div style="display: block; width: 70%; margin: 0 auto;">
<div class="form-row" style="clear: left;">
        <label style="float: left; clear: left;" for="lastname">Vezetéknév</label>
<input id="lastname" class="register-input-narrow kotelezo" name="mssys_lastname" type="text" /></div>
<div class="form-row" style="clear: left;">
        <label style="float: left; clear: left;" for="firstname">Keresztnév</label>

Drupal 6 Internet Corporation theme: Letöltés / Download

Mivel még nem sok Drupal 6 smink készült el és nem akartam a Drupal 6 alapértelmezett sminkjét felrakni az oldalamra úgy döntöttem megpróbálok egy Drupal 5-öst átírni, hogy működjön.
Az Internet Corporation theme mellett döntöttem.

Szerencsére felkerült a Drupal oldalára egy dokumentáció a Drupal 6 sminkeléséről
Ez volt a kiinduló alapom, hogy mégis mért nem müködnek a Drupal 5-ös sminkek a 6-os verzió alatt.

Bevallom őszintén nagyobb problémára gondoltam mint amekkora ténylegesen volt. Az egész megvalósítás nem vett igénybe fél óránál többet, persze miután elolvastam a Drupal oldalán a dokumentációt.
Lényeges különbség, hogy kell egy info fájl, mint a moduloknál. Ebbe kell egy a sminkkel kapcsolatos dolgokat deffiniálni. Milyen css-ek tartoznak hozzá, milyen JavaScript-eket töltösön be automatikusan, milyen régiói vannak stb.

Az Internet_Corporation.info így néz ki, mivel nem igényel különösebb js fájlokat, és a template.php fájlba a régiók definiálva vannak, bár itt is megtehettem volna.
Internet_Corporation.info:

; $Id$
name = Internet Corporation
description = Implements of Internet_Corporation theme for Druapl 6
version = 1.0
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css