The Perl Toolchain Summit needs more sponsors. If your company depends on Perl, please support this very important event.
 / 
Quiq-1.186
River stage zero No dependents
3 ++
/ 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.186

AUTHOR

Frank Seitz, http://fseitz.de/

COPYRIGHT

Copyright (C) 2020 Frank Seitz

LICENSE

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