Frank Seitz
and 1 contributors

NAME

Prty::JQuery::Form::ViewEdit - Formular zum Ansehen und Bearbeiten von persistenten Daten

BASE CLASS

Prty::Hash

DESCRIPTION

Die Klasse implementiert ein jQuery Widget Plugin zum Ansehen und Bearbeiten von Daten, die typischerweise aus einer Datenbank stammen.

Das Layout muss die Platzhalter __SAVE__, __DELETE__ und __EDIT__ enthalten. Für diese werden intern drei Widgets generiert: für __SAVE__ und __DELETE__ ein Button zum Speichern bzw. Löschen, für __EDIT__ eine Checkbox zum Umschalten zwischen Ansehen und Bearbeiten.

Bei Betätigung der Button werden die Formulardaten an den action-URL gepostet. Im Erfolgsfall wird anschließend die onSuccess-Methode aufgerufen.

CSS-Klassen

  • editCheckbox

  • saveButton

  • deleteButton

  • enabled

  • disabled

Beschriftungen

  • Speichern

  • Löschen

  • Bearbeiten

Die Beschriftungen (der Buttons) können über das Attribut text gendändert werden.

ATTRIBUTES

action => $url (Default: undef)

URL, an den die Daten bei bei Betätigung des Save- oder des Delete-Buttons geschickt werden.

hidden => \@keyVal (Default: [])

Schlüssel/Wert-Paare, die als Hidden-Widgets gesetzt werden.

id (Default: undef)

Die DOM-Id des Formulars.

instantiate => $bool (Default: 0)

Füge die Plugin-Instantiierung beim Aufruf von html() zum HTML-Code hinzu.

layout => $html (Default: '')

Der HTML-Code des Layouts. In das Layout wird der HTML-Code der Widgets eingesetzt.

onSucces => $javaScript (Default: undef)

JavaScript-Methode, die nach einem erfolgreichen Ajax-Aufruf ausgeführt wird. Parameter: onSuccess(data,textStatus,jqXHR,op), wobei op 'save' oder 'delete' ist.

state => 'update' | 'insert' (Default: 'update')

Anfänglicher Zusatand des Formulars:

'update'

Der Save- und der Delete-Button werden im Edit-Modus freigeschaltet.

'insert'

Nur der Save-Button wird im Edit-Modus freigeschaltet.

text => \%keyVal (Default: s. Text)

Die Beschriftungen der intern generierten Widgets alle oder einzeln geändert werden:

  • saveButton => 'Speichern',

  • deleteButton => 'Löschen',

  • editCheckBox => 'Bearbeiten',

widgets => \@widgets (Default: [])

Liste der Widgets, die in das Layout eingesetzt werden.

EXAMPLE

    $html = Prty::JQuery::Form::ViewEdit->html($h,
        instantiate=>1,
        id=>'personForm',
        state=>'insert',
        action=>$c->url_for('/person/speichern'),
        onSuccess=>q|
            function () {
                var d = new Date;
                var date = $.formatDate(d,'YYYY-MM-DD hh:mm:ss');
                $('input[name=formTime]').val(date);
            }
        |,
        text=>{
            saveButton=>'Speichern',
            deleteButton=>'Löschen',
            editCheckbox=>'Bearbeiten',
        },
        layout=>$h->cat(
            Prty::Html::Table::Simple->html($h,
                class=>'form',
                rows=>[
                    ['form-section',[colspan=>2,'Person']],
                    ['form-widget',['Id:'],['__PER_ID__']],
                    ['form-widget',['Vorname:'],['__PER_VORNAME__']],
                    ['form-widget',['Nachname:'],['__PER_NACHNAME__']],
                ],
            ),
            Prty::Html::Table::Simple->html($h,
                class=>'form',
                rows=>[
                    [['__SAVE__ __DELETE__ __EDIT__']],
                ],
            ),
        ),
        widgets=>[
            Prty::Html::Widget::Hidden->new(
                name=>'formular',
                value=>'person',
            ),
            Prty::Html::Widget::Hidden->new(
                name=>'formTime',
                value=>$formTime,
            ),
            Prty::Html::Widget::ReadOnly->new(
                name=>'per_id',
                value=>$per->per_id,
            ),
            Prty::Html::Widget::TextField->new(
                name=>'per_vorname',
                size=>30,
                value=>$per->per_vorname,
            ),
            Prty::Html::Widget::TextField->new(
                name=>'per_nachname',
                size=>30,
                value=>$per->per_nachname,
            ),
        ],
    );

METHODS

Plugin-Code (Klassenmethoden)

pluginCode() - JavaScript-Code des Plugin

Synopsis

    $javascript = $class->pluginCode;

Description

Liefere den JavaScript-Code des jQuery Widget Plugin. Dieser Code kann auf einer HTML-Seite inline verwendet oder - besser - vom Webserver geliefert werden.

Konstruktor

new() - Instantiiere Objekt

Synopsis

    $e = $class->new(@keyVal);

Description

Instantiiere ein Formular-Objekt und liefere eine Referenz auf dieses Objekt zurück.

HTML-Generierung

html() - HTML-Code des Widget

Synopsis

    $html = $e->html($h);
    $html = $class->html($h,@keyVal);

Description

Generiere den HTML-Code des Widget-Objekts und liefere diesen zurück. Als Klassenmethode gerufen, wird das Objekt intern erzeugt und mit den Attributen @keyVal instantiiert.

Widget-Instantiierung

instantiate() - JavaScript-Code, der das Widget instantiiert

Synopsis

    $javaScript = $e->instantiate;

Description

Liefere den JavaScript-Code, der das Widget instantiiert. Alle Parameter werden intern übergeben, dies sind die Attribute:

  • state

  • action

  • onSuccess

VERSION

1.108

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2017 Frank Seitz

LICENSE

This code is free software; you can redistribute it and/or modify it under the same terms as Perl itself.