Author: Stefan Kientzler
Viewers: 191
Last month viewers: 2
Package: Complex PHP Form Design and Generator
Read this article to learn how the Complex PHP Form Design and Generator package can help you to simplify the development of pages that display and process forms.
The package provides functions with behavior that is configurable in the external configuration file. This article explains options for changing the language and country-specific aspects. It also provides details on how to configure how the package finds all the resources and values used to determine the appearance.
In this article you can learn about:
How to Find Examples of Usage of this Package
How to Set the Location of the Necessary JavaScript Files
How to Translate the Texts Used Internally by the Package
- Form messages.
- Text of all default buttons (Save, Cancel, ...).
- Week day and month names for the date picker.
- Tooltips of the internal used images.
How to Change Images Needed for General Purposes
How to Adjust Locale Dependent Values of Date, Time and Numeric Input Fields
- Date.
- Time.
- Integer, Floating-point and Currency.
How to Adjust the Settings for the Color Picker
- Appearance.
- Colors that can be selected from a palette.
How to Adjust the Settings for CKEditor HTML Editor
How to Adjust the Settings for the RichFilemanager
How to Download the Complex PHP Form Design and Generator or Install It with PHP Composer
How to Find Examples of Usage of this Package
See the example configuration files FormGenerator.json in the examples directory and in the examples/MSO-Theme directory.Best practice will be to use one of this example files and adapt it to your own requirements.
All values are case sensitive.
How to Set the Location of the Necessary Javascript Files
Some Javascript files are needed by the HTML code generated by this package to make the forms work properly. You can find all necessary files in the directory script.
In the PHP script for your form you only have to include the FormGenerator.js file in the header section:
<head> ... <script type="text/javascript"
src="YOUR PATH TO THE SCRIPT FILES/FormGenerator.js">
</script> </head>
All JavaScript files MUST be located in the same directory and will be automatically loaded when they are needed.
This JavaScript path value must also be specified in the configuration, so that the additionally required scripts can be loaded.
JavaScript Path : path (YOUR PATH TO THE SCRIPT FILES), NO default value
The path must be specified either:
- by the relative to the location of the PHP file containing the form definition
- by the absolute from the server document root (recommended)
- as complete URL
| dtsel.js | Date- and time picker. |
| dtsel-LICENSE | license field for the date- and time picker. |
| FormCKEdit.js | script to create an embedded WYSIWIG editor control. |
| FormDataValidator.js | Form validation (date, time, float, integer). |
| FormGenerator.js | Some general Form Functionality and loading of all other JS-Files. |
| FormPicker.js | Script to auto-create the pickers. |
| jscolor.js | the color picker. |
| jscolor.min.js | minimized version of the color picker. |
| RichFmConnector.js | Connector to use the RichFilemanger. |
How to Translate the Texts Used Internally by the Package
The default language is English. You can define the text strings used by the package in configuration files.
Message that is displayed to the user, if any validation of the form failed:
FormDataValidation: errorMsg : string, NO default value
There is no default text for this value!
Default Buttons
The Buttontext for all standard buttons inside a ButtonBox can be changed in this section.
ButtonBox: ButtonText: OK : string, default "OK"
OPEN : string, default "Open" SAVE : string, default "Save" YES : string, default "Yes" NO : string, default "No" CANCEL : string, default "Cancel" CLOSE : string, default "Close" DISCARD : string, default "Discard" APPLY : string, default "Apply" RESET : string, default "Reset" RETRY : string, default "Retry" IGNORE : string, default "Ignore" BACK : string, default "Back"
Text for the Date and Time Picker
To give the users the posibility to select date and/or time values in a picker, the package has a modified version of the datetime selector from the dtsel package included. Modifications on the original source were made only to make the date picker adaptable to the current locale language.
The names can be localized in the DTSel section:
DTSel: direction : "TOP" or "BOTTOM", default value "TOP" months : array of 12 strings, default
["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"], monthsShort : array of 12 strings, default
["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], weekdays : array of 7 strings (week starts with Sunday!), default
["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"], weekdaysShort : array of 7 strings (week starts with Sunday!), default
["So", "Mo", "Tu", "We", "Th", "Fr", "Sa"], timeDescr : array of 3 strings
(short for 'Hour:', 'Minute', 'Second'), default
["HH:", "MM:", "SS:"]
The appearance of the pickers can be changed by editing the FormGenerator.css stylesheet file.
How to Change Images Needed for General Purposes
Some graphics are defined for various common standard purposes, which can be changed in this section and labeled in a language-specific manner.
Defined standard images:
| Delete | Image that can be used for deletion of the content of a read only input field or to reset any other content or setting. |
| Search | Default image used for input field with select button specified. |
| Browse | Default image used for input field connected to file browser. |
| DatePicker | Image showing that the field has a date picker. |
| TimePicker | Image showing that the field has a time picker. |
| InsertDTU | Image showing the 'insert Date, Time and User' - functionality. |
Images: Path : path (YOUR PATH TO THE IMAGE FILES),
NO default value StdImages: Delete: Image : filename, default "delete.png" Text : string, default "Delete content" Search: Image : filename, default "search.png", Text : string, default "Select" Browse: Image : filename, default "browse.png", Text : string, default "Browse on server" DatePicker: Image : filename, default "datepicker.png", Text : string, default "Select date" TimePicker: Image : filename, default "timepicker.png", Text : string, default "Select time" InsertDTU: Image : filename, default "insert_dtu.png", Text : string,
default "insert current date, time and user"
If no path is specified, the images are loaded from the directory StdImages in the source
folder of the package (.../SKien/Formgenerator). If a path is specified, it must be relative
to the script that contains the form definition or absolute from the document root.
The text is used as label for the images.
How to Adjust Locale Dependent Values of Date, Time and Numeric Input Fields
Until the onsubmit attribute of the form occurs, the form elements are not changed by any JavaScript code of this package. The package performs an automatic validation using JavaScript for some field types.
The placeholder value is used to set the HTML5 attribute of the respective input type.
This value can be redefined for each element.
Date input
Date: Format : string "YMD", "DMY" or "MDY", default "YMD" Separator : string (1 char), default "-", Placeholder : string, default empty UseHTML5Type : boolean, default false
If the value of
UseHTML5Typeoption is set to true, the HTML5 input type 'date' is used instead of the internal validation mechanism. This option is in a 'beta' state (nearly untested) since the date input currently is supported only by a few browsers and always works internal with the english date format.
Time input
Time: Separator : string (1 char), default ":", Seconds : boolean, default false, AllowMinutesOnly : boolean, default true, Placeholder : string, default empty
- The
Secondsoption determines whether the time is specified with the seconds value. - The
MinutesOnlyoption determines whether it is possible to enter minutes without the hours value. An entry of for instance 100 is recognized as correct input when the form is sent. In that case it will be converted to the time value '1:40'.
Integer input
Integer: RightAlign : boolean, default true Placeholder : string, default empty
Floating point input
Float: DecimalPoint : string (1 char), default see annotation below ThousandsSep : string (1 char), default see annotation below RightAlign : boolean, default true Placeholder : string, default empty
The default value for the decimal point and the thousands separator depends on the
data based upon the current locale as set by setlocale(). If no locale settings are available, the default values are "." for DecimalPoint and "," for ThousandsSep.
Currency Input
Float: Symbol : string, default see annotation below DecimalPoint : string (1 char), default see annotation below ThousandsSep : string (1 char), default see annotation below RightAlign : boolean, default see annotation below Placeholder : string, default empty
The default values for the decimal point and the thousands separator depends on the settings for the floating point input but can be modified separate for currency inputs.
The default value for the currrency symbol depends upon the current locale. It is set to "USD" if no locale value is available.
How to Adjust the Settings for the Color Picker
To make it easier for the user to enter color values, the package has a visual color picker for color selection. The JSColor package is included in this package to implement a visual color picker.
!!! For commercial use take care of the JSColor licence conditions !!!
Since the appearance of JSColor is not based on a stylesheet, some settings can be made via the configuration.
In addition, an individual palette can be specified containing any number of color values. The colors of that palette are displayed in the picker as directly as colors that the user can select.
Color: borderColor : color string, default "#000000" borderRadius : integer, default 0 padding : integer, default 12 backgroundColor : color string, default "#FFFFFF" position : string "bottom", "left", "right" or "top",
default "bottom" palette : array of color strings , default empty
How to Adjust the Settings for CKEditor HTML Editor
Since the integration of the CKEditor is a complex matter, it is dealt with in a separate description in which the setting options via the configuration are also explained in detail.
How to Adjust the Settings for the RichFilemanager
The connection with the RichFilemanager also requires a more detailed description, which also goes into its configuration.
How to Download the Complex PHP Form Design and Generator or Install It with PHP Composer
The Complex PHP Form Design and Generator package can be downloaded from download page or be installed using the PHP Composer tool following instructions in the Composer install instructions page.
You need to be a registered user or login to post a comment
Login Immediately with your account on:
Comments:
No comments were submitted yet.
