BreezingForms Guide. 18 Forms: BreezingForms

Transcription

1 BreezingForms 8/3/ BreezingForms Guide GOOGLE TRANSLATE FROM: a_18_formulare_neu_001.htm#t2t BreezingForms Installation and configuration The BreezingForms in the overview Draft Example form The form surface Functions for the form and the elements The management of data The expansion BreezingForms is an easy to use form generator, which allows simple, one-on-line form to the mini-database application everything quickly to develop and test. It allows you to premade features, such as the input of the user to check, but also in your own PHP scripts write to the forms are attached. The received data can even use a mouse to click further into the flexible XML format. The BreezingForms are incidentally the successor program of the FacileForms, one of the most popular extensions for Joomla! 1.0 have been the note alone that the name "FacileForms" with many functions not yet fully been replaced and is in this description occasionally aufblitzt. We describe below the current version BreezingForms RC1. The program is so extensive that we are an introduction to restrict them. Further information is available on the site of frequent BreezingForms-fan, form in front end anchor form in the backend menu anchor Form Export / Import "Dance is the art of a couple, on a very small space as freely as possible to move themselves and others without using their feet to kick!" Unknown 18 Forms: BreezingForms If you are in the default installation of Joomla! want to involve functional forms, about which your readers, for example, to an event log, you must have good HTML, PHP and MySQL skills and based on a complicated stage of development lie in wait. Easy does it with extensions and BreezingForms Chrono Forms. Both components can achieve the same result, but they are based on completely different approaches: While the forms in the BreezingForms directly into Joomla! can generate, they are in Chrono Forms with an HTML editor such as Dreamweaver and then on the side involved. Both tools are very powerful and have their fans. But do you see yourself in the following 18.1 BreezingForms Installation and configuration Get in Table 18.1 listed files. These files can be found on the respective installers mount (see Section 9.4, New install extensions "). This can also be found on the DVD in the directory extensions / breezing_forms. Table 18.1 The files of BreezingForms File Name Definition Function com_breezingforms_151rc1.zip Component Core component mod_breezingforms_151b2.zip Module BreezingForms as module plg_breezingforms_151b2.zip Plug-in BreezingForms as a plug-in (Mambot)

2 BreezingForms 8/3/ The next step is to install sample forms. To do so via the Components menu or the Quick Check on the point configuration (Figure 18.1) The BreezingForms in the overview In the quick overview that you via the components menu, you should now the options are shown in Figure Figure 18.1 The second step in installing the BreezingForms As you see, you can also transfer data from an older version of Facile Forms upgrade. Let the standard patterns (samples) were selected and go to Continue with Step 3 Here, you will be told that the installation was successful, and you'll turn on Continue to Step 4, the actual configuration of the dialogue BreezingForms that you even after the installation again can access (Figure 18.2). Figure 18.3 After installing the Forms appear in the quick overview. Like Joomla! The program itself is BreezingForms divided into several managers, each with different management tasks have. Table 18.2, the menu of BreezingForms Manager Task Entries Display and processing of the received form data Admin Menu Management Integration of forms in the backend menus Manage Forms Creation and design of forms Scripts Creation of scripts for elements Figure 18.2 The Configuration window of BreezingForms Here you can for example, the text elements in a form with the WYSIWYG editor on, your address as the default contact, and forms in the import and export. Manage Parts Creation of scripts for the form expiration Configuration Main settings BreezingForms

3 BreezingForms 8/3/ If you live in one of the managers BreezingForms jump, see above the respective surface a tool bar (Figure 18.4), which easily between different views to and fro can jump. Figure 18.4 The tool bar on all BreezingForms managers In the menu you see among the managers, another group, Facile Forms Sample menu, which you install option could take over. These are some sample forms that you use as material for use or modify to suit your needs and can be further processed. Table 18.3 BreezingForms Sample Menu Sample Description Contact form Contact Pizza Shop Pizza Service Draft Example form Figure 18.5 Sketch of Kursanmeldung The form surface Before looking at the implementation of our sketch form that we want to give you some basic information about the form of creation in the BreezingForms give. If you created a new form, you will receive a blank design surface presents, on which you can arrange your elements (Figure 18.6). About the New Page button before and after New page you can also create multiple pages, and then pasted on navigation buttons together. The creation of a form should you like best based on a concrete example to know. We want our dance school for a simple application form for Joomla! Create dance. This should be the sketch shown in Figure 18.5 correspond. Figure 18.6 The empty design view of a form

4 BreezingForms 8/3/ The BreezingForms provide for the realization of the form a number of elements are available which can be partly linked to the HTML conventions (Figure 18.7), but also offer additional options, such as the tooltip. Note Small text icon with information when you hover the mouse over the item goes Checkbox Multiple selection box Radio button Simply select box Figure 18.7 The form elements that you BreezingForms available In Table 18.4 you will find all elements with an explanation and, where appropriate, with their concrete implementation in a statement. Table 18.4 Elements of BreezingForms Name Meaning Execution Static Text / HTML Simple (formatted) text, for example, to label a field Text Single line text entry box -- Text Area Multiline text field -- Picklist Drop-down list -- Rectangle Viereck, decorative, frame, etc. -- Graphics Static image for decoration -- Query list Query the database -- File Upload

5 BreezingForms 8/3/ Form field for uploading files Hidden input Hidden Field -- Normal Button Button Graphic Buttom Button with a picture as background Pictogram Image, which acts as a button The design surface is equivalent to the WYSIWYG principle and knows now the drag & drop functionality. Size and position of the elements can move the mouse can be influenced. The elements can also be configured via the settings window with the arrow tool, or be moved. Creating a new form Let us begin our example form. Go to Forms Management, and set about a new form. Name and title of the form are mandatory inputs (Figure 18.8). The title is the term under which the created element, for example, appear in lists, so it's better for people to read. About his name is technically programmable element, eg in scripts, but also within the Joomla! Configuration addressed. Make sure therefore that the name does not contain special characters or diacritics. The other settings, such as the size of the form can also be reasonably made. Figure 18.8 A new form is created. The item package offers the possibility of your form an existing or add new package. About the concept of packages you can later filter the list view or a package can be easily exported. We take for our example, a new package Anmeld_tanzkurs "a. Once you have saved the form, it appears in the list in the form manager (Figure 18.9). As you know, has already created a page, but still completely empty. About the Package drop-down list, you can also download the forms in the other packages view. In the event that you there is only one empty table available, try on this same dropdown list to select our package. Figure 18.9 The new form in the Form Manager Text box We will now form with some elements equip. Click on the title. You are now in edit mode and can add input elements. Click New. In the subsequent dialog, you are asked to select from preset options to take input (Figure 18.7). We need first the input field for last name, and therefore click on the radio button input text. With further proceed. Now a form in which this

6 BreezingForms 8/3/ information to the text box can be set in detail (Figure 18.10). So you can for example determine if the text box for passwords and is designed accordingly when entering only asterisks are displayed. Figure 18:10 Selection of form elements If you saved the text field, you'll see it left in the list of form elements and right in Design view of the form (Figure 18.11). Figure 18:12 configuration of lettering In Design view of the form you will see the label and the field, although still a little differently to be. In the previous versions could not be the elements with the mouse back and forth. This is now possible. Alternatively, you can put an item in the list, highlight it and use the arrows next to the form design to move (Figure 18.13). 18:11 The image processing view of the form with a text entry box Settings, which until then had not been saved will not be considered. Static text box We now want to label the input and therefore add a further element added. To do this we go back to New and then select in the option Static Static Text / HTML (Figure 18.7). In the settings for that item, you should next title and name of course, the bottom the text of the inscription, in our case "Name" enter (Figure 18.12). Figure 18:13 The tool used to move parts of the form By specifying the pixels, you can refine positioning of the elements. Do not forget the new arrangement with secure storage, otherwise the form will be reset. Multiple choice You can also move multiple elements simultaneously by selecting them in the list. The same procedure, we repeat for the first name and address. Two boxes and two labels will be added and positioned. Our form now looks like Figure

7 BreezingForms 8/3/ Drop-down list For the indication of a particular dance, we need a so-called drop-down list. It is in the selection window of the elements (Figure 18.7) as a selection list means. The configuration can be seen in Figure 18:17. Figure 18:14 Our first form Radiobuttons Next, we add two radio buttons for specifying the gender. In the configuration dialog you can set the caption in the same field labeled Enter (Figure 18.15). Figure 18:17 The configuration of the drop-down list Through the multiple-choice allows you to specify whether the list contains several entries may be selected. This is in our case, however, does not make sense. The choices you write to each other in the Options box, in three sections, each with a semicolon separated: Figure 18:15 The attitude of radiobuttons Radiobuttons used correctly The sense of a group of radio buttons is that always only one element can be clicked. To notify the program, radio buttons that belong together, you have every item in the Name field the same value. The radio buttons should now be present as shown in Figure Figure 18:16 The radiobuttons 1; Please select rate; 0 0; Joomla! / Beginners; 1 0; Joomla! / P, 2 0; Joomla! / Professional, 3 The first part can be either a 1 or a 0 may be indicated. The 1 means that this is the default setting should be. The second section gives the user a list item to be seen. If in the third part values are used, they are transmitted. This allows, for example, dance classes are internally numbered. Tip If you are the first line of information for the user to formulate, you save an additional labeling of the drop-down list. Also, you can then determine whether the user ever has made a selection. The result you see in Design view and in Figure 18:18.

8 BreezingForms 8/3/ configure it in the Preferences dialog (Figure 18.20). Figure 18:18 Our drop-down list Tooltip An item that you already from the Joomla! Surface should know, is the tooltip. We want our course selection list a tooltip to one side, the user is informed to whom he was with any questions about course content can turn. These we choose in the notice of Static (Figure 18.7) and set it according to our wishes (Figure 18.19). It could be for example about the type of its own special mount small icon. We remain in our example, however, when the blue information icon. Figure 18:20 Setting the Submit button The button, type Default button appears as shown in Figure Figure 18:21 The Submit-(send) button Recently our form even get a headline. To do this we move all elements down by putting in the list all the items on the top checkbox in the title bar and then using the arrows to the bottom set. Figure 18:19 The settings of the tooltips Then we add an additional static text field for the title. To view the text as a heading format, you should use Facile Forms Components Configuration the WYSIWYG editor for text fields on. Now you can "Course Registration" as the heading of level 2 and italic formatting. The surface of our form is finished (figure 18.22). If you have saved, you will see the icon and can be inserted in addition to the course list position. What's missing now is the submit button, the data to the server. Submit button The creation of the buttons follows a similar procedure as the creation of the previous elements. You select buttons in the area (Figure 18.7) a button with the desired layout and

9 BreezingForms 8/3/ No is the default setting and means that no script has been selected. Under library you can choose several predefined scripts. At the most flexible, but also the most demanding is the last option, special. Here you can find out about the framework code to create the model of a function set and the placeholders and the actual program is part of PHP commands replace. The complete mapping 18:22 Registration To give you an overview, we have shown in Figure 18:23 for any drop-down list, all three function options distributed to the various script categories. Below we would like to script the different areas through some practical examples to explain Functions for the form and the elements Now that the formalities are done, we can form the functions of the turn. Each form and each element can be dynamic scripts, so small parts of the program, assign, which - depending on a number of events - executed. You can find these scripts in the configuration dialog of the individual elements on the tab scripts. They fall into three categories: Table 18.5 The various script categories Script type Function Initialization script What happens when you load the item? Action Script What happens when a certain action, such as a mouse click? Validation script What should the content of an element to be tested? Figure 18:23 Various Script Options The focus on one element set Let us return to our example. When you call a form, the focus by default on the first element of a form guide. We want now, however, that the attention of the user to the first field is withdrawn, so he entered this important first done the same. To do this we go into the scripts dialog of the e- mail text box and click in the initialization scripts range option library. Then select the checkbox entry form and look at the script function FF: ff_getfocus from. Save your entries from. For each of these categories, you have the choice between no, and special library.

10 BreezingForms 8/3/ Figure Focus 18:24 The script append You can already in Design view, verify that the cursor is when initializing the form in the mail box is located. Validation of entries If a user has filled out a form, errors often creep or mandatory fields are ignored, what impact on the entire communication process could have. To cushion the erroneous entries, you can see from the respective form fields small program attach script, after clicking the Submit button, but before inserting the data into the database the user indicates that the form in some places, or even wrong has not filled out. In our example, a script to verify that in fact an e- mail address in the blank has been entered. To do this we click twice on the input and then we go into the Scripts tab (Figure 18.24). Here you select the validation script for the radio button and select Library in the drop-down list to the function ff_valid . In the box above, you can specify the exact error message should be output if the user is not a real address entered. As you are in the drop-down list to see the variety of validity tests to be carried out. To test for example ff_integer_or_empty whether the field contains an integer or is empty. Figure 18:25 The address should be reviewed. About the Submit button So far, our Submit button for a certain task, but not yet operational. We must once again in the configuration of the buttons and tabs on the scripts to connect a function (Figure 18.25). Select action script in the Library radio button, and activate the function ff_validate_submit which initially set the validation script and then passes the data abschickt. They could be here but also other actions connected with the button - for example, the jump to another page of the form. Figure 18:26 The button with the Submit function connect Feedback to the user, If the form has been submitted, the user should not be confused, but send him a message that the transfer went smoothly. The script that is needed is not this time with a single element, but with the entire form connected.

11 BreezingForms 8/3/ We therefore go one level up in the Form Manager and go into the configuration by looking at the name (!) Our form click. Again we find the scripts tab Figure 18:27. Select the area \ 'Where \' radio button script library and from the drop-down list function ff_showsubmitted and save your input. Error message? If you are sending the message "send mail failed: could not instantiate mail function" you should in the Global Configuration Mail mode (php, sendmail, or smtp) smtp or sendmail to convert (see Section 10.3, "Mail transit ") The management of data If the transmission of data works, you can use the entries on the menu item View Record management and processing (Figure 18.30). The last record is received at the bottom. Figure 18:27 The setting of the feedback Now you can use the form in Design view for free. When entering an incorrect address, for example, without the "@" character, the JavaScript message will appear in Figure 18:28. Figure 18:30 Overview of records In addition to information such as the date of transmission, the IP address and the provider of the recipient you will see interesting information on the status of the record. Figure 18:28 The message in the event of a false address When the correct input you get a positive message (Figure 18.29). Table 18.6 Information on the Record Status Meaning Sighted The record has already been sighted. Exports The data were already converted to XML. Archived The data were put into the archive. Figure 18:29 The data were successfully transmitted. About the list forms are filters that allow you to view the data on the basis of the status information can put together. On the right side

12 BreezingForms 8/3/ there are also buttons that give rise to the order of the list items accordingly leaves. The Export button transforms the XML data into XML and makes it so different for other applications to read. To view individual records in detail, click the column sent to an entry. You will receive a detailed overview of the static information received (Figure 18.31). If you click Save, the record is automatically converted sighted. we are already in Section 9.1, "Modules", received. If you use the plug-in file from BreezingForms installed, you can use your form as a plug-in to an existing content element mount. How this works, we tell you in the hereafter. First, the plug-in public. Now you can edit mode of any item the plug-in Day (FacileForms: Name_des_Formulars, 1, 0) eintragen. This will be replaced by your form. The second parameter to determine which side of the form is displayed, and the third parameter you can set the context or issue. For our example, we have the following line at the end of the article "Latin American Dances" in the category of "dance style" a: (FacileForms: form_anmeld_tanzkurs, 1, 0) This will create the form directly in the article (see Figure 18.32). Figure 18:31 The detail view of the data For archiving data, click the red cross in the column Archived (Figure 18.30). This is the record to the archive. This archive allows you to consider if the archive filter to only archived set. To permanently delete data, select it and click the Delete icon form in front end anchor There are three options, the form in front end process: You can have it as a component in a frontend menu anchor, what difficulty you are not more likely to show (see Section 6.3.3, "Create a menu item"). Since we also BreezingForms module installed, there is the option of the form as a module to display. Also on this approach, Figure 18:32 The form in the article form in the backend menu anchor

13 BreezingForms 8/3/ Besides the possibility of the finished form in the website process, one can, however, it also has a self-created menu entry in the backend display. Click on the option menu administration. The list you see now is empty. We'll add to it new a new menu item added. It opens a window with a listing of all forms, on the Joomla! currently has access. In addition to the numerous sample forms should also be listed our form. Highlight it. About Next takes you to the Configuration menu (Figure 18.33). Figure 18:34 The settings for the menu item The result can be considered equal in the backend (Figure 18.35). Figure 18:33 The selection of a form In Superordinate position, you can specify where the new menu item to appear. It will give you only two options offered: the top means that the entry equal footing with all other components directly to the menu component is inserted. If you BreezingForms Sample Menu select the menu item appears as a sub-item of this menu item. In Title, enter the text of the menu one. To decorate the menu item you can go to one of the small icons to choose. Do not forget, in the form name form enter your choice. Figure 18:35 The new menu item in the menu "Components" Form Export / Import To take a simple form of a Joomla! System to another to transfer, the BreezingForms the concept of packages available, which we already a little above explained. Imagine that our application form now in another Joomla! Homepage want to take over. To do this we go into the configuration page of BreezingForms and click on the button package.

14 BreezingForms 8/3/ Figure 18:36 The button "package" About ID, we can choose our package. Everything in this package was put, whether it forms, scripts or menu entries, is now once again creating a new XML packet zusammengeschnürt and ready made. If you have not a care package assignment, you can also manually do: You simply choose the blank entry in the field and collect ID from the list now appears all the necessities together. Figure 18:39 Uploading a package As you can see, you will find when you install the BreezingForms included sample files and the collection of pre-made scripts and parts that will assist you in your equipment functional forms supported. About Searching access to the directory structure of your computer and can now form the new package to import. Figure 18:37 A Package If you are at the bottom of the form, click Next, you can enjoy your new XML packet receive, store and share. The opposite action, namely importing a package form, works similarly simple. Click in the box configuration to install packages. Picture Package installation 18:38 You are all already installed packages that you in this view you can also delete (Figure 18.39).