/ 
Quiq-1.206
River stage zero No dependents
/ Quiq::JQuery::Form::ViewEdit

NAME

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

BASE CLASS

Quiq::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 = Quiq::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(
        Quiq::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__']],
            ],
        ),
        Quiq::Html::Table::Simple->html($h,
            class => 'form',
            rows => [
                [['__SAVE__ __DELETE__ __EDIT__']],
            ],
        ),
    ),
    widgets => [
        Quiq::Html::Widget::Hidden->new(
            name => 'formular',
            value => 'person',
        ),
        Quiq::Html::Widget::Hidden->new(
            name => 'formTime',
            value => $formTime,
        ),
        Quiq::Html::Widget::ReadOnly->new(
            name => 'per_id',
            value => $per->per_id,
        ),
        Quiq::Html::Widget::TextField->new(
            name => 'per_vorname',
            size => 30,
            value => $per->per_vorname,
        ),
        Quiq::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.206

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2022 Frank Seitz

LICENSE

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