ugrás a tartalomhoz

crossForm form sablonozó motor

toxin · 2006. Júl. 28. (P), 13.03
kicsit promotálnám 6 napi munkám gyümölcsét, ha sokan nézitek sok hibát felfedeztek alapon :)

- szétválaszott form-sablon és feliratok (form mező feliratai és hibakiírás), ergo 1 form-sablonhoz akárhány nyelv rendelhető

- egy lapba akárhány form behúzható, egymástól függetlenül működnek, közös vagy saját nyelvi fájlt használva (formonként lehet különböző nyelvi könyvtár)

- checkbox, select/option, radio elemek közül egyet kell megadni, a többit a nyelvi fájlból tölti, ill. select-ből csak a select-et, option-okat a nyelvi fájlból tölti, ill. mindent csak 1x kell megadni lásd cucc

- a generált template fieldset/label alapú azaz táblázatmentes, az egyes elemek css-el dizájnolhatóak, lásd kimeneti forrás perpill. majd eszközlök vmi doksit

- az elpostolt értékeket hiba esetén automatikus visszatölti a form-ba ezzel nem kell foglalkozi

- perpill támogatja, text és társai, textarea, checkbox, radio, select, multiple select, mindegyik tipusra példa a forrásban

- mező tartalomszűrést : a form mezők tartalomszűrését külső class InputFilter végzi,



folyt.

http://www.tutorial.hu/forum/index.php?showtopic=1364&view=findpost&p=77018

demó :
http://toxin.hu/cForm_b004/form.php

leírás, letöltés
http://www.tutorial.hu/forum/index.php?showtopic=1364&view=findpost&p=80142


üdv t
 
1

demó

toxin · 2006. Júl. 28. (P), 13.04
demó szabadon nyomkodható, kár benne nem tehető, de felrázni, ütögetni, sugárzó hőnek kitenni nem szabad :)
2

css nélkül

zsepi · 2006. Júl. 28. (P), 13.40
nézd meg css nélkül is az oldalt! Az {errorResult} szöveg mindenütt megjelenik az első betöltődésnél!
3

köszi

toxin · 2006. Júl. 28. (P), 16.21
ezért imádom az 'open source'-t :D demó frissült, kilinkelt cuccos majd ha összegyűlik pár ilyen :)
4

jelenlegi beta6-os cForm

toxin · 2006. Aug. 1. (K), 16.21
nos tisztelt táblabíróság :) milyen

http://ideafontana.com/idea/balmenu/ajanlatkeres/

(a validálási szabályok még nincsenek csak első blikkre felrakva)

( tölthető a cForm motor http://www.tutorial.hu/forum/index.php?showtopic=1364&view=findpost&p=80299 bár bár a blogmarkoknál úgyis felfedeztétek látom fórum számlálóján :D )

ez már a Sapid cms-be van portolva azt is promótálom már mint alprogramozósegédje :) http://sapid.sourceforge.net/


ui: jajj lebuktam a SapidBlog-nál ott nevem :D
5

használhatóság

Hodicska Gergely · 2006. Aug. 1. (K), 21.56
Kód konkrét megtekintése nélkül annyi javaslatom lenne, hogy érdemes lenne még egy kicsit megnézni egyéb megoldásokat is.

Használhatóság szempontjából szerintem akad pár kivetnivaló. Legfontosabb, hogy a mezőkhöz tartozó feliratok legyenek label tagben. Ha nem lenne benne, akkor érdemes lehet accesskey támogatást is tenni bele. A másik dolog, ami engem zavar, hogy szerintem nem teljesen szerencsés a mostani jelölési rendszer. Zavaró, hogy egy nem kötelezően kitöltendő mező esetében miért van ott az a zöld pipa. Én másképp jelölném a dolgokat, külön választanám a kötelezően kitöltendő mezők jelölését, valamint a hibás kitöltsét (már csak azért is, mert pl. egy nem kötelezően kitöltendő mező esetén is simán lehet, hogy azért formai követelmény van vele szemben).

Tehát alapban csak az látszik, hogy mik a kötelezően kitöltendő mezők. A user rámegy egy mezőre, és elkezd gépelni. Ekkor a kötelezően kitöltendő jelzés eltűnik, ha olyan volt a mező. Az ellenőrzés meg úgy menne, hogy amíg nem volt még kitöltve a mező, akkor csak onchange eseményre kezded el validálni a szöveget. Ha rossz a beírt tartalom, akkor megjelenik a hibás jelzés. Ezután ha a user visszamegy egy ilyen mezőre, akkor már billentyűzet leütésenként lehet validálni. Ha mondjuk teljesen kitörli, akkor eltünik a hibás jelzés, de ha kötelezően kitöltendő volt, akkor az erre utaló jelzés újból megjelenik.


Felhő
6

re

toxin · 2006. Aug. 2. (Sze), 08.36
"Legfontosabb, hogy a mezőkhöz tartozó feliratok legyenek label tagben"

így nézki most pl. egy input szakasz

<div class="errorPic errorYes" ></div><label for="Elérhetősége_(telefon,_e-mail)" >Elérhetősége (telefon, e-mail):<span class='request' >*</span></label>
<input type="text" name="Elérhetősége_(telefon,_e-mail)" title="" value="" />


többi mezőtípus hasonló, ez akkor ok ?

Én másképp jelölném a dolgokat, külön választanám a kötelezően kitöltendő mezők jelölését, valamint a hibás kitöltsét (már csak azért is, mert pl. egy nem kötelezően kitöltendő mező esetén is simán lehet, hogy azért formai követelmény van vele szemben).



külön van választva a kötelezőendően kitöltendő mezőket kis piros csillag jelzi, a label-ben lásd fent <span class='request' >*</span> úgylátszik túl kicsi :)

azért van ott a zöld pipa, mert akkor megy át a form az ellenörzésen ha mindenhol zöld pipa van, amíg nincs egy ilyen mezőben semmi addig okés hiszen ez is elfogadott, amennyiben ír bele a Juzer, akkor ellenöriz ha hibás jelzi, ha nem marad a pipa

egyébként a http://ideafontana.com/idea/balmenu/ajanlatkeres/ -ben, jelenleg a mezőkhöz tartozó title-k üresek, ide még lehet info-t írni, min max karakterszám, elvárt tartalom stb.

Az ellenőrzés meg úgy menne, hogy amíg nem volt még kitöltve a mező, akkor csak onchange eseményre kezded el validálni a szöveget. Ha rossz a beírt tartalom, akkor megjelenik a hibás jelzés. Ezután ha a user visszamegy egy ilyen mezőre, akkor már billentyűzet leütésenként lehet validálni. Ha mondjuk teljesen kitörli, akkor eltünik a hibás jelzés, de ha kötelezően kitöltendő volt, akkor az erre utaló jelzés újból megjelenik.


erre én is gondoltam csak első nekifutásra a prototype kódbázis Form.Element.EventObserver -re épül a dolog, lustasági alapon, de majd még fejlődik a dolog :)


azaz ennyi

Class.create();
clsCrossForm.prototype = {

    initialize : function(formName,sourcePHP){
        
        //   initial checking     
        if (!window.XMLHttpRequest && !window.ActiveXObject ) return null;
        
        //            inic
        this.formName = formName;
        this.sourcePHP = sourcePHP;
        this.form = Form.getElements(formName);
        
        //        use my input field colorizer class, optionally
        new clsInputFieldColorizer(this.formName);
        //        set event handlers on the form elements
        this.form.each(
            function (formElem,index){
                new Form.Element.EventObserver(formElem,this.checkField.bind(this));
                // set the missing id attribs
                if (!formElem.id) formElem.id = this.formName+'__'+index;
            }.bind(this)
        );
    },

    checkField : function(formElem){

        this.currentField = formElem;

        switch (this.currentField.type){

            case 'checkbox' :

                var currentCheckBoxesCollection = $A(this.form).findAll(
                function(checkBox){
                  return (checkBox.name == this.currentField.name && checkBox.checked);
                }.bind(this));
    
                var queryString = currentCheckBoxesCollection.collect(
                function(checkBox){
                    var objectCheckBoxHash = function(name,value){this[name] = value;}
                    var checkBoxes = new objectCheckBoxHash(this.currentField.name,checkBox.value);
                    return $H(checkBoxes).toQueryString();
                }.bind(this)).join("&");

            break;

            default :  var queryString = Form.Element.serialize(this.currentField);
        }

        if (!queryString) queryString = this.currentField.name + '=';

        var myAjax = new Ajax.Request(
        this.sourcePHP,
        {
            method: 'post',
            parameters: queryString + '&cFormAjax=' + this.formName,
            onFailure : function(response) {alert("Faliure, there's some kind of error in ajax communication line");},
            onComplete: this.showResponse.bind(this)
        });
    },

    showResponse : function (transport,objectJSON){
        
        // if we've got some kind of error during error checking
        if (objectJSON.result)
        {
            var errorResultContainer =  Builder.node('div',{'id':'errorResultContainer'+objectJSON.id,'class':'errorMessages'});
            errorResultContainer.innerHTML = objectJSON.result;
        }
        else
        {
            var errorResultContainer =  Builder.node('div',{'id':'errorResultContainer'+objectJSON.id,'class':'errorPic errorNo'});
        }
        
        // looking for the actual label tag, put the error div before it
        var searchLabelTag = $(this.currentField.id);
        while (searchLabelTag.tagName!='LABEL')
        {
            searchLabelTag = searchLabelTag.previousSibling || searchLabelTag.parentNode;
        }
        // if we find an exists one, remove it
        if (searchLabelTag.previousSibling.className="errorMessages")
        {
            Element.remove(searchLabelTag.previousSibling);
        }
        searchLabelTag.parentNode.insertBefore(errorResultContainer,searchLabelTag);
    }
}

a kliens oldali kapcsolattartó + DOM manipuláló osztály, ( http://toxin.hu/cForm/cForm/scripts/cForm.js )
7

rere

Hodicska Gergely · 2006. Aug. 2. (Sze), 11.56
többi mezőtípus hasonló, ez akkor ok ?

Nem oké, mert a label for attributumában megadott érték az input elem id attributuma kell legyen, Nálad meg nincs ilyen.

külön van választva a kötelezőendően kitöltendő mezőket kis piros csillag jelzi, a label-ben lásd fent <span class='request' >*</span> úgylátszik túl kicsi :)

Ja, tényleg. :)

azért van ott a zöld pipa, mert akkor megy át a form az ellenörzésen ha mindenhol zöld pipa van, amíg nincs egy ilyen mezőben semmi addig okés hiszen ez is elfogadott, amennyiben ír bele a Juzer, akkor ellenöriz ha hibás jelzi, ha nem marad a pipa

Hát ne a zöld pipa legyen az ellenőrzés alapja. ;)
Ha belegondolsz, jön egy user, nézi, hogy miért van ott piros X (az leesik neki, hogy ez valami olyasmit jelent, hogy elkefélt valamit), amikor még nem is gépelt be semmit. Meg minek van ott egy zöld pipa?

erre én is gondoltam csak első nekifutásra a prototype kódbázis Form.Element.EventObserver -re épül a dolog, lustasági alapon, de majd még fejlődik a dolog :)

Hajrá, sok sikert hozzá. :)


Felhő
8

label és zöld pipás gondolataim

toxin · 2006. Aug. 2. (Sze), 12.19
oksa, akkor label-nek is generált id-je lesz ha nincs külön megadva sablonban, mint a form mezőknek

pipás rendszer azért lett végül, mert kikapcsolt js-el is érthető ill. hasonló form-kitöltési logikájú működést produkál a cuccos mint bekapcsoltal (felhasználói oldalról nézve), ha más akkor kikapcsolt vs bekapcsolt js mellett változik a kitöltési logika is, mondjuk a kikapcsolt js-es működéssel még nem vagyok megelégedve, majd gondolkozom azon amit írtál, köszi a rere-t :)


ui: júzer meg annyit tudjon hogy legyen mindenhol zöld pipája és a csillagos mezőket kötelező kitölteni, aztán mehet a form, ez elég egyszerű vagy nem [think] meg oda is lesz írva a form fölé :)

ui2: egyébként egy pici blog, az egész úgy indult hogy kaptam egy 6nyelvű form-ot 6nyelvű felirattal és 6 nyelvű hibakezeléssel :O :)
9

b_9pre

toxin · 2006. Aug. 7. (H), 18.57
azért pre mert még én is nézem (szóval igazából alfa verzió, de már nézem egy ideje és jó, csak már fáradt vagyok :( )

http://toxin.hu/cForm/form.php
http://toxin.hu/cForm/cForm_b9_pre.zip

- id generálás benne,
- api-n keresztüli mezőellenörzésre példa benne (igazából egyszerűbb magában a class-ban felvinni az új ellenőrzést, ill. célszerűbb is, de a jövőre gondolva ilyen is van)
- capcha-ra példa benne
- submitol-ható (szép anyanyelvünk :) ) ürlap generálásra példa benne, ill. ha helyes kitöltés után mehet akkor látható

még nézem, ill. elkezdem dokumentálni (api autodoksi, használat, kódkommentezés), új fícsőr már csak 1.0-után tervezek, bugfixelek ha kiszúrok/tok valamit, egyébként doksigyártás van soron

még az előző betára készült egy tutorial: http://toxin.hu/cForm/cFormTutorial/original.html

api kicsit változott, kapott egy resetForm metódust, más nem, lásd benne


üdv t

((( sitebuilder állást keresek lásd állásban :))) )))
10

jó ez a cucc

Barkóczi Roland · 2006. Aug. 7. (H), 21.11
de szerintem van egy nagy hiányossága:
nem tudod odaadni a nyelvi fájlt a bölcsész végzettségű fordítónak, hogy fordítsa le, utána neked még csomót kell vacakolnod vele.
11

re

toxin · 2006. Aug. 7. (H), 21.18
Katedrális és bazár
1. Minden jó szoftver egy fejlesztő személyes vágyainak kielégítésével kezdődik.


ez lesz az 1.0, aztán szóljatok és olyan lesz :) ,

jav: egyébként a reguláris kifejezések csodákra képesek, tervezek egy olyat ami a sablonból direkt megcsinálja az üres nyelvi fájlt (mert ez megint tiszta mechanikus copy-paste munka, sablon és nyelvi fájl között, ami ellen ezzel a cuccal is harcolok) , akkor majd olyan lesz csak milyen legyen?
12

b9_pre2

toxin · 2006. Szep. 9. (Szo), 14.42
api bővült egy metódussal

getFieldValuesArray() : visszadja a kitöltött form-ot tömbösített formában, sablonbeli kulcsokkal indexelve, adatbázisbeli tároláshoz, lásd alsó form kitöltés után ill. példában

http://toxin.hu/cForm/cForm_b9_pre2.zip
http://toxin.hu/cForm/form.php

meg elkövettem egy szkriptet azóta, ami a sablonból legenerálja az üres nyelvi fájlt

<?php

$ftpFileName="webes.ftpl.php";

/********************/

function resetArray($inputArray){
    foreach ($inputArray as $k=>$v) {
    	$inputArray[$k] = '';
    }
    
    return $inputArray;
}

function resetArray2Array($inputArray){
    foreach ($inputArray as $k=>$v) {
    	$inputArray[$k] = array();
    }
    
    return $inputArray;
}

$fieldNamesArray = array();
$fieldTitlesArray = array();
$fieldGroupNamesArray = array();
$fieldOptionsArray = array();

// labels
$labels=array();
preg_match_all('/(.+?for="{)(.+?)(}".+?)/si',$file=file_get_contents($ftpFileName),$labels);
$fieldNamesArray = $fieldTitlesArray = resetArray(array_flip($labels[2]));
unset ($fieldTitlesArray['submit'],$fieldTitlesArray['form']);


// legends
$legends=array();
preg_match_all('/(<legend>{)(.+?)(}<\/legend>)/si',$file,$legends);
$fieldGroupNamesArray = resetArray(array_flip($legends[2]));

//selects
$selects=array();
preg_match_all('/(<select.+?name="{)(.+?)(}(\\[|"))/si',$file,$selects);
$selects = resetArray2Array(array_flip($selects[2]));

// checkboxes
$checkboxes=array();
preg_match_all('/(input.+?type="checkbox".+?name="{)(.+?)(}\\[)/i',$file,$checkboxes);
$checkboxes = resetArray2Array(array_flip($checkboxes[2]));

// radios
$radios=array();
preg_match_all('/(input.+?type="radio".+?name="{)(.+?)(}")/i',$file,$radios);
$radios = resetArray2Array(array_flip($radios[2]));

$fieldOptionsArray = array_merge($selects,$checkboxes,$radios);

//ob_start();
echo "<?php\n".'$fieldNamesArray = ';var_export($fieldNamesArray);
echo ";\n\n".'$fieldTitlesArray = ';var_export($fieldTitlesArray).';';
echo ";\n\n".'$fieldGroupNamesArray = ';var_export($fieldGroupNamesArray).';';
echo ";\n\n".'$fieldOptionsArray = ';var_export($fieldOptionsArray); echo ";\n?>";

//$out = nl2br(ob_get_clean());
//echo $out;
?>
http://toxin.hu/weblabor/langFileGen.txt

kicsit régebbi frissítés de majd lesz dokument is, meg belerakom a "Karakterkódolási problémák kiküszöbölése" eredményeit egyenlőre utf-8-as lapra így megy ki

echo   mb_convert_encoding($webesFormHandler->getHTML(),'UTF-8','ISO-8859-2');


vagy iconv-val

, ha végre nem 4-5-6 weblapon dolgozom egyszerrre :))

ui: ill még annyi hiba volt hogy lásd itt
http://proba.webes.hu/webtarhely_megrendelo/

így alakul a vezérlési logika

$webesFormHandler = &new clsCrossForm (array(
    'formName'=>'webes',
    'formFileName'=>ROOT_PATH.'usr/templates/cFormTemplates/webes.ftpl.php',
    'formLangDirName'=>ROOT_PATH.'usr/templates/cFormTemplates/lang',
    'formValidate'=>'
        company_name : empty;
     ',
)); 

if ($webesFormHandler->getErrorInForm() || $webesFormHandler->getAjaxMode())
{
    if ($webesFormHandler->getAjaxMode())
    {
        $webesFormHandler->getHTML();
    }
}
else
{
    send_mail_customer('','','Tárhely megrendelő',$webesFormHandler->getHTML('freeze'));
    // reset form
    $webesFormHandler->resetForm();
}


echo   mb_convert_encoding($webesFormHandler->getHTML(),'UTF-8','ISO-8859-2');
?>
tehát egy plusz || $webesFormHandler->getAjaxMode()) kell az első sorba a .zip belihez képest
13

aki esetleg használná, vagy vmit tőlem, vagy akar dicsérni :

toxin · 2006. Nov. 5. (V), 17.55
mostantól nem terhelném más lapját szóval:

http://toxin.hu/forums/?req=main

:)