| ... |
... |
@@ -129,9
+129,9 @@ |
| 129 |
129 |
Beim diesem Bereich handelt es sich um einen fortgeschrittenen Bereich. Er wird durch Drücken auf den Pfeil [[image:designer_south_pane_expander.png]] unten im {{designer/}} geöffnet. Dieser Bereich besteht aus vier Unterbereichen: |
| 130 |
130 |
|
| 131 |
131 |
; Script-Bereich |
| 132 |
|
-: Hier ist es möglich, die Formularlogik mit selber geschriebenen JavaScript zu beeinflussen. Alle JavaScript-Dateien, die [[als Formulardatei am Formular hochgeladen wurden>>doc:Formcycle.UserInterface.MyForms.Files]], werden beim Aufruf des Formulars automatisch geladen. Je nach Anwendungszweck kann es sinnvoll sein, JavaScript nicht direkt im Script-Tab einzugeben, sondern als Datei hochzuladen. Dies bietet sich besonders am, um Bibliotheken von Drittanbietern einzubinden, damit diese den JavaScript-Code im Script-Tab nicht unnötig groß machen. Weitere Informationen finden sich unter [[Script-Bereich>>doc:.ScriptMetaAndCssTabs.WebHome]]. |
|
132 |
+: Hier ist es möglich, die Formularlogik mit selber geschriebenen JavaScript zu beeinflussen. Alle JavaScript-Dateien, die [[als Formulardatei am Formular hochgeladen wurden>>doc:Formcycle.UserInterface.MyForms.Files]], werden beim Aufruf des Formulars automatisch geladen. Je nach Anwendungszweck kann es sinnvoll sein, JavaScript nicht direkt im Script-Tab einzugeben, sondern als Datei hochzuladen. Dies bietet sich besonders am, um Bibliotheken von Drittanbietern einzubinden, damit diese den JavaScript-Code im Script-Tab nicht unnötig groß machen. Weitere Informationen finden sich unter [[Script-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.WebHome]]. |
| 133 |
133 |
; CSS-Bereich |
| 134 |
|
-: In diesem Bereich kann das Aussehen des Formular durch selber geschriebenes CSS angepasst werden. Wie auch bei JavaScript werden alle CSS-Dateien, die am Formular hochgeladen wurden, automatisch mit eingebunden. Weitere Informationen finden sich unter [[CSS-Bereich>>doc:.ScriptMetaAndCssTabs.CSSTab.WebHome]]. |
|
134 |
+: In diesem Bereich kann das Aussehen des Formular durch selber geschriebenes CSS angepasst werden. Wie auch bei JavaScript werden alle CSS-Dateien, die am Formular hochgeladen wurden, automatisch mit eingebunden. Weitere Informationen finden sich unter [[CSS-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]]. |
| 135 |
135 |
; Metadaten |
| 136 |
136 |
: Der hier eingegebene Text wird direkt im HTML-Header des Formulars mit eingebunden. Hier können etwa eigene meta-Attribute definiert werden oder zusätzliche CSS beziehungsweise JavaScript-Dateien eingebunden werden. |
| 137 |
137 |
; Variablen |
| ... |
... |
@@ -145,126
+145,3 @@ |
| 145 |
145 |
|
| 146 |
146 |
* Das Formular, so wie es angelegt wird, ist erstmal in allen Sprachen so zu sehen. Um für eine bestimmte Sprache eine übersetzte Version des Formulars anzulegen, kann in die entsprechende Sprache gewechselt werden. Hier sind dann nur die Beschriftungstexte änderbar, jedoch nicht die Formularlogik. Siehe auch [[Internationalisierung>>doc:Formcycle.FormDesigner.Internationalization]]. |
| 147 |
147 |
* Jedesmal, wenn das Formular gespeichert wird, erstellt das System automatisch ein Backup. Durch Klick rechts unten auf die Version kann bei Bedarf auf eine älteres Backup des Formular gewechselt werden. |
| 148 |
|
- |
| 149 |
|
- |
| 150 |
|
-== Schnelleinstieg == |
| 151 |
|
- |
| 152 |
|
-{{panel inline="false" initial="hidden" triggerable="true" title="Elemente in den Designbereich ziehen und positionieren"}} |
| 153 |
|
- |
| 154 |
|
-{{figure image="formcycle_designer_move_element.png" width="300"}} {{/figure}} |
| 155 |
|
- |
| 156 |
|
-Fahren Sie mit der Maus über das entsprechende Element, klicken Sie es an und ziehen es in den Arbeitsbereich. |
| 157 |
|
- |
| 158 |
|
- |
| 159 |
|
-Um ein Element an eine bestimmte Position zu bewegen, positionieren Sie es über, unter oder neben dem bereits vorhandenen Element. Möchten Sie ein Element in einen Container (DIV, Fieldset) einfügen, so ziehen Sie es über dieses. |
| 160 |
|
- |
| 161 |
|
-Siehe auch [[Elemente im Designbereich positionieren>>Elemente]] |
| 162 |
|
-{{/panel}} |
| 163 |
|
- |
| 164 |
|
-{{panel inline="false" triggerable="true" initial="hidden" title="Label eines Element ausrichten"}} |
| 165 |
|
- |
| 166 |
|
-{{figure image="formcycle_designer_element_label_left.png" width="300"}} {{/figure}} |
| 167 |
|
- |
| 168 |
|
-{{figure image="formcycle_designer_element_label_gap_0.png" width="300"}} {{/figure}} |
| 169 |
|
- |
| 170 |
|
-Die meisten Formularelemente (Eingabefelder, Checkboxen, Listen, Upload) integrieren ein Label für die entsprechende Beschriftung des Elements, so dass dies nicht separat definiert werden muss. Die Position des Labels wird über die Eigenschaften des Elements festgelegt. |
| 171 |
|
- |
| 172 |
|
-Der Abstand zwischen Label und Element wird ebenfalls über die Eigenschaften (Attribut "Breite") festgelegt. |
| 173 |
|
- |
| 174 |
|
- |
| 175 |
|
- |
| 176 |
|
-{{/panel}} |
| 177 |
|
- |
| 178 |
|
-{{panel initial="hidden" inline="false" triggerable="true" title="Pflichtfeld definieren"}} |
| 179 |
|
- |
| 180 |
|
-{{figure image="FormCycle_Designer_Mussfeld_0.png" width="300"}} {{/figure}} |
| 181 |
|
- |
| 182 |
|
-Eingabe- und Auswahlelemente können zu sog. Pflicht- bzw. Mussfeldern definiert werden. Wurde diese Option gewählt, muss der Benutzer das entsprechende Element ausfüllen bzw. einen Wert selektieren, macht er dies nicht, wird eine Fehlermeldung am Element angezeigt und er kann das Formular nicht absenden bzw. nicht zur nächsten Seite navigieren. Das Ändern der Fehlerdarstellung wird weiter unten auf dieser Seite beschrieben. Eine Besonderheit stellt die Combobox (Auswahlelement) dar. Wird diese zum Pflichtfeld definiert, wird automatisch der Eintrag "Bitte auswählen" an der ersten Stelle angezeigt. |
| 183 |
|
- |
| 184 |
|
- |
| 185 |
|
-{{/panel}} |
| 186 |
|
- |
| 187 |
|
-{{panel initial="hidden" triggerable="true" inline="false" title="Validator / Datentyp von Eingabefeldern festlegen"}} |
| 188 |
|
- |
| 189 |
|
-{{figure image="FormCycle_Designer_Datentyp.png" width="300"}} {{/figure}} |
| 190 |
|
- |
| 191 |
|
-Für jedes Eingabeelement kann ein Datentyp festgelegt werden. Über diesen Datentyp werden dann im Formular die Eingabe des Benutzers geprüft. Ein Beispiel hierfür ist z.B. der Datentyp PLZ (Deutschland). Bei diesem Datentyp wird geprüft ob die Eingabe nicht mehr als 5 Zeichen enthält und nur Zahlen eingegeben wurden. Neben diesem Datentyp stehen weitere wie z.B. E-Mail, Zahlen ... zur Verfügung. Wie beim Pflichtfeld erscheint bei fehlerhafter Eingabe eine Fehlermeldung und das Absenden bzw. Navigieren ist nicht mehr möglich. |
| 192 |
|
- |
| 193 |
|
- |
| 194 |
|
-{{/panel}} |
| 195 |
|
- |
| 196 |
|
-{{panel inline="false" initial="hidden" triggerable="true" title="Elemente verstecken"}} |
| 197 |
|
- |
| 198 |
|
-{{figure image="formcycle_designer_element_hide_0.png" width="300"}} Element (Auswahl) wird angezeigt wenn Checkbox "meineCheckbox" aktiviert wurde. {{/figure}} |
| 199 |
|
- |
| 200 |
|
- |
| 201 |
|
- |
| 202 |
|
-{{figure image="formcycle_designer_element_hide_1.png" width="300"}} Element (Eingabefeld) wird versteckt wenn Checkbox "meineCheckbox" aktiviert wurde {{/figure}} |
| 203 |
|
- |
| 204 |
|
-Bei dynamischen Formularen kommt es oft vor das Elemente bzw. ganze Bereiche Ein- und ausgeblendet werden. Neben der Möglichkeit dies direkt über JavaScript (Siehe Scriptbesipiele) umzusetzen, ist dies auch über die Eigenschaften des Elements möglich. |
| 205 |
|
- |
| 206 |
|
- |
| 207 |
|
-Möchten Sie ein Element bzw. einen Bereich in Abhängigkeit der Auswahl eines anderen Elements Ein- oder Ausblenden, stehen die Attribute "Sichtbar wenn" bzw. "Versteckt wenn" zur Verfügung. |
| 208 |
|
- |
| 209 |
|
- |
| 210 |
|
-{{/panel}} |
| 211 |
|
- |
| 212 |
|
-{{panel initial="hidden" inline="false" triggerable="true" title="Bilder hinzufügen"}} |
| 213 |
|
- |
| 214 |
|
-{{figure image="FORMCYCLE_Designer_Bild_0.png" width="300"}} {{/figure}} |
| 215 |
|
- |
| 216 |
|
-Bilder werden im FormCycle Designer wie Elemente behandelt und können dementsprechend auch so positioniert werden. Ziehen Sie als erstes das Bildelement an die gewünschte Position und ziehen danach das Bild (Datei) aus dem Dateiexplorer (Windows) / Finder (mac) in die entsprechende "Drop" Fläche. |
| 217 |
|
- |
| 218 |
|
- |
| 219 |
|
-{{/panel}} |
| 220 |
|
- |
| 221 |
|
-{{panel initial="hidden" triggerable="true" inline="false" title="Neue Formularseite einfügen"}} |
| 222 |
|
- |
| 223 |
|
-{{figure image="formcycle_create_new_page.png" width="300"}} {{/figure}} |
| 224 |
|
- |
| 225 |
|
-{{figure image="formcycle_designer_new_page_1.png" width="300"}} {{/figure}} |
| 226 |
|
- |
| 227 |
|
-Mit dem FormCycle Designer können problemlos mehrseitige Formulare erstellen werden. Ziehe Sie einfach das Seitenelement im Bereich "Formularelemente" in den grauen Bereich der Arbeitsfläche. |
| 228 |
|
-Nach dem Einfügen einer neuen Seite steht diese auch in Auswahl der Schaltflächen-Navigation zur Verfügung. |
| 229 |
|
- |
| 230 |
|
- |
| 231 |
|
-{{/panel}} |
| 232 |
|
- |
| 233 |
|
-{{panel initial="hidden" triggerable="true" inline="false" title="Relative Breite von Elementen ändern"}} |
| 234 |
|
- |
| 235 |
|
- |
| 236 |
|
- |
| 237 |
|
-{{figure image="breite_0.png" width="300"}}{{/figure}} |
| 238 |
|
- |
| 239 |
|
- |
| 240 |
|
- |
| 241 |
|
-{{figure image="breite_2.png" width="300"}}{{/figure}} |
| 242 |
|
- |
| 243 |
|
- |
| 244 |
|
- |
| 245 |
|
-Alle Elemente in FormCycle werden prinzipiell relativ positioniert, nur so kann sich das Formular an unterschiedliche Endgeräte und Auflösungen anpassen. Daher gibt es, bis auf wenige Ausnahmen, keine absoluten Größenangaben. Die Breite von Elementen wird immer relativ angegeben. |
| 246 |
|
- |
| 247 |
|
-Beispiel: |
| 248 |
|
- |
| 249 |
|
-Es befinden sich zwei Elemente nebeneinander deren Breite jeweils 50% zur Gesamtbreite des Formulars entspricht. Wird für das rechte Element jetzt die relative Breite "2" eingestellt, so hat dieses Element den Faktor 2 gegenüber dem ersten Element. Das linke Element wird kleiner und das rechte größer (In Prozent: links (33%) und rechts (66%)). wird die Größe des Browsers verändert,bleiben die Relationen der Elemente gleich. |
| 250 |
|
- |
| 251 |
|
- |
| 252 |
|
-{{/panel}} |
| 253 |
|
- |
| 254 |
|
-{{panel initial="hidden" triggerable="true" title="Elemente duplizieren" inline="false"}} |
| 255 |
|
- |
| 256 |
|
-{{figure image="formcycle_designer_duplizieren.png" width="300"}} {{/figure}} |
| 257 |
|
- |
| 258 |
|
-Markieren Sie das Element und duplizieren Sie es über das Icon (Siehe Screenhot) in der Werkzeugleiste. Bitte beachten Sie das immer nur ein Elemente dupliziert werden kann. Befinden sich in einem zu duplizierendes Element weitere Elemente (DIV, Fieldset), so werden diese ebenfalls dupliziert. Nach dem Vorgang erhalten alle duplizierten Elemente neue Elementnamen! |
| 259 |
|
- |
| 260 |
|
- |
| 261 |
|
-{{/panel}} |
| 262 |
|
- |
| 263 |
|
-{{panel initial="hidden" triggerable="true" title="Formular auf dem Server veröffentlichen" inline="false"}} |
| 264 |
|
- |
| 265 |
|
-{{figure image="formcycle_designer_publish.png" width="300"}} {{/figure}} |
| 266 |
|
- |
| 267 |
|
-Die Veröffentlichung des Formulars erfolgt über die Schaltfläche in der Werkzeugleiste. |
| 268 |
|
- |
| 269 |
|
- |
| 270 |
|
-{{/panel}} |