Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Dokument-Autor

...	...	@@ -1,1 +1,1 @@
1		-XWiki.awa
	1	+XWiki.gru

Inhalt

...	...	@@ -3,11 +3,11 @@
3	3	{{/figure}}
4	4
5	5	{{figure image="designer_advanced_css_example_de.png"}}
6		-Im CSS-Bereich kann das Layout des Formulars angepasst werden. In der Abbildung werden die Labels von Elementen in blau eingefärbt und Textfelder ohne Umrandung dargestellt.
	6	+Im {{smallcaps}}Css{{/smallcaps}}-Bereich kann das Layout des Formulars angepasst werden. In der Abbildung werden die Labels von Elementen in blau eingefärbt und Textfelder ohne Umrandung dargestellt.
7	7	{{/figure}}
8	8
9	9	{{figure image="designer_advanced_meta_example.png"}}
10		-Im Meta-Bereich kann zusätzlicher Inhalt in den HTML-Head eingefügt werden. In der Abbildung wird eine Schriftart und eine Bibliothek von einem CDN geladen und verschiedene Meta-Informationen wie Autor und Schlagwörter gesetzt.
	10	+Im Meta-Bereich kann zusätzlicher Inhalt in den {{smallcaps}}Html{{/smallcaps}}-Head eingefügt werden. In der Abbildung wird eine Schriftart und eine Bibliothek von einem CDN geladen und verschiedene Meta-Informationen wie Autor und Schlagwörter gesetzt.
11	11	{{/figure}}
12	12
13	13	{{figure image="designer_advanced_variables_example.png"}}
...	...	@@ -16,12 +16,12 @@
16	16
17	17	Der {{designer/}} bietet vielfältige Möglichkeiten, ein Formular einfach und ohne Programmiertkenntnisse zu erstellen. Dennoch kann es bei komplexen Formularen vorkommen, dass es spezielle Funktionen oder Anforderungen geben soll, die nicht über die grafische Oberfläche umsetzbar sind.
18	18
19		-Wie bei allen Webseiten wird auch bei den Formularen von {{formcycle/}} HTML, JavaScript und CSS eingesetzt. Um eigenes JavaScript und CSS zu Formularen hinzuzufügen, gibt es mehrere Möglichkeiten:
	19	+Wie bei allen Webseiten wird auch bei den Formularen von {{formcycle/}} {{smallcaps}}Html{{/smallcaps}}, JavaScript und {{smallcaps}}Css{{/smallcaps}} eingesetzt. Um eigenes JavaScript und {{smallcaps}}Css{{/smallcaps}} zu Formularen hinzuzufügen, gibt es mehrere Möglichkeiten:
20	20
21		-* Anlegen von [[Mandant-Ressourcen>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] mit der Dateiendung //.js// beziehungsweise //.css//. Diese werden dann automatisch in allen Formularen geladen. Diese können etwa für JavaScript-Bibliotheken verwendet werden, die in allen Formularen zur Verfügung stehen sollen.
22		-* Anlegen von [[Formular-Ressourcen>>doc:Formcycle.UserInterface.MyForms.Files]] mit der Dateiendung //.js// beziehungsweise //.css//. Diese werden automatisch beim Öffnen des Formulars geladen. Im Gegensatz zu Mandant-Ressourcen sind Formular-Ressourcen nur für das Formular gültig, für das sie angelegt wurden. Hier können etwa JavaScript-Bibliotheken hochgeladen werden, die nur für ein Formular benötigt werden.
23		-* Im JavaScript- oder CSS-Tab im unteren Bereich vom {{designer/}} direkt das entsprechende JavaScript oder CSS eingeben. Vorteil ist hier, dass bei CSS alle Änderungen sofort im Formular sichtbar sind. Diese Möglichkeit eignet sich besonders für formularspezifische Logik, also etwa zum Aufsetzen von Validatoren für Formularfelder.
24		-* Für CSS kann auch ein [[CSS-Template>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] angelegt werden. Dieses kann dann [[unter Layout bei den Formulareigenschaften>>doc:Formcycle.FormDesigner.FormProperties||anchor="layout"]] ausgewählt werden.
	21	+* Anlegen von [[Mandantdateien>>doc:Formcycle.UserInterface.FilesAndTemplates.Files]] mit der Dateiendung //.js// beziehungsweise //.css//. Diese werden dann automatisch in allen Formularen geladen. Diese können etwa für JavaScript-Bibliotheken verwendet werden, die in allen Formularen zur Verfügung stehen sollen.
	22	+* Anlegen von [[Formulardateien>>doc:Formcycle.UserInterface.MyForms.Files]] mit der Dateiendung //.js// beziehungsweise //.css//. Diese werden automatisch beim Öffnen des Formulars geladen. Im Gegensatz zu Mandant-Ressourcen sind Formular-Ressourcen nur für das Formular gültig, für das sie angelegt wurden. Hier können etwa JavaScript-Bibliotheken hochgeladen werden, die nur für ein Formular benötigt werden.
	23	+* Im JavaScript- oder {{smallcaps}}Css{{/smallcaps}}-Tab im unteren Bereich vom {{designer/}} direkt das entsprechende JavaScript oder {{smallcaps}}Css{{/smallcaps}} eingeben. Vorteil ist hier, dass bei CSS alle Änderungen sofort im Formular sichtbar sind. Diese Möglichkeit eignet sich besonders für formularspezifische Logik, also etwa zum Aufsetzen von Validatoren für Formularfelder.
	24	+* Für {{smallcaps}}Css{{/smallcaps}} kann auch ein [[{{smallcaps}}Css{{/smallcaps}}-Template>>doc:Formcycle.UserInterface.FilesAndTemplates.Design]] angelegt werden. Dieses kann dann [[unter Layout bei den Formulareigenschaften>>doc:Formcycle.FormDesigner.FormProperties||anchor="layout"]] ausgewählt werden.
25	25
26	26	{{info}}
27	27	JavaScript in Mandant- oder Formular-Ressourcen wird sofort ausgeführt, sobald das Script fertig geladen ist. Im Gegensatz dazu wird JavaScript im JavaScript-Tab des {{designer case="gen"/}} erst ausgeführt, sobald [[das Formular fertig geladen ist>>url:http://api.jquery.com/ready/||rel="noopener noreferrer" target="blank"]].
...	...	@@ -31,11 +31,11 @@
31	31
32	32	; [[JavaScript-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]]
33	33	: Hier kann eigenes JavaScript geschrieben werden. Dieses gesamte JavaScript wird erst ausgeführt, wenn [[das Formular fertig geladen ist>>url:http://api.jquery.com/ready/||rel="noopener noreferrer" target="blank"]].
34		-; [[CSS-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]]
35		-: Hier kann eigenes CSS geschrieben werden. Alle Änderungen hier am CSS sind sofort im Formular sichtbar.
	34	+; [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]]
	35	+: Hier kann eigenes {{smallcaps}}Css{{/smallcaps}} geschrieben werden. Alle Änderungen hier am {{smallcaps}}Css{{/smallcaps}} sind sofort im Formular sichtbar.
36	36	; [[Variablen-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.VariablesTab]]
37		-: Hier können versteckte Eingabefelder angelegt werden ({{code}}<input type="hidden">{{/code}}). Diese sind etwa nützlich, um Daten zur Verfügung zu stellen, die nur auf dem Server und vom JavaScript benötigt werden, aber nirgends im Formular angezeigt werden sollen.
	37	+: Hier können versteckte Eingabefelder angelegt werden ({{code language="none"}}<input type="hidden">{{/code}}). Diese sind etwa nützlich, um Daten zur Verfügung zu stellen, die nur auf dem Server und vom JavaScript benötigt werden, aber nirgends im Formular angezeigt werden sollen.
38	38	; [[Meta-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.MetaTab]]
39		-: Hier kann HTML eingegeben werden, welches zum {{code}}<head>{{/code}} des generierten HTML des Formulars hinzugefügt werden. Etwa ist es möglich, hier zusätzliche {{code}}<meta>{{/code}} Informationen für die Suchmaschinenoptimierung einzufügen.
	39	+: Hier kann {{smallcaps}}Html{{/smallcaps}} eingegeben werden, welches zum {{code language="none"}}<head>{{/code}} des generierten {{smallcaps}}Html{{/smallcaps}} des Formulars hinzugefügt werden. Etwa ist es möglich, hier zusätzliche {{code language="none"}}<meta>{{/code}} Informationen für die Suchmaschinenoptimierung einzufügen.
40	40
41		-Beim Editieren von JavaScript und CSS wird ein Editor verwendet, der durch Autovervollständigung, Syntaxhervorhebung und Code-Einrückung unterstützt und das Schreiben von Code vereinfacht. Weitere Informationen hierzu finden sich in der Hile zum [[JavaScript-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] und [[CSS-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]].
	41	+Beim Editieren von JavaScript und {{smallcaps}}Css{{/smallcaps}} wird ein Editor verwendet, der durch Autovervollständigung, Syntaxhervorhebung und Code-Einrückung unterstützt und das Schreiben von Code vereinfacht. Weitere Informationen hierzu finden sich in der Hile zum [[JavaScript-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] und [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]].