Forms

From FiFormsWiki

Jump to: navigation, search

Data entry forms can be relatively simple, or very complex, depending on what is needed. All of the properties of the form are described in XML, along with data-bound controls, links, queries, and dynamically updated lists.

Contents

A Simple Example

Here is a very simple example of a form which updates four fields in the table authors:

The Code

Copy the following XML code into a file. Save it as "authors.xml" in the "forms" folder inside your application.

<fiform xmlns="http://xml.fiforms.org/FiForms/" version="1.1">
    <title>Authors</title>
    <connect db="fiforms_sample" id="1" update="authors" />
    <iText caption="First Name" field="AUTHOR_FIRSTNAME"/>
    <iText caption="Last Name" field="AUTHOR_LASTNAME"/>
    <iDateText caption="Birthdate" field="AUTHOR_BIRTHDATE"/>
    <iTextArea caption="Biographical Info" field="AUTHOR_BIO" rows="6" cols="50"/>
</fiform>

Making it Work

In order to access the newly created form, it must be added to a menu. Open the file main.xml in the menus folder, and add the following element in the middle of the file to create a link from the main menu to the authors form.

<form href="authors.xml"/>

Using the Form Creator

You can use the form creator to automatically generate a new form based on an existing MySQL Table. Currently (as of version 1.2), FiForms does not include a built in editor to edit existing forms, although we hope to add this ability in the future. Once a form definition is created, you must use a text editor or XML editor to edit the XML form definition.

Prerequisites

To create forms using the form creator, you must already have a MySQL database and a table that you will be linking to the form. Also, you must have already created an application in FiForms, using the XML Application Creator.

Data Structure Conventions

In creating the form, FiForms uses the following conventions to automatically generate a usable interface for your table. If you understand how to use these conventions, you can create a data structure in MySQL in such a way that the resulting form will be very usable and require very little manual editing.

  • Field comments are always used as the caption for input boxes, except for dropdowns that form foreign key relationships. When you create your data structure, always make use of comments.
  • CHAR and VARCHAR fields become iText input boxes.
  • INT and DECIMAL fields become iNumber input boxes.
  • TINYINT and BOOL fields become iCheck input boxes.
  • DATE fields become iDateText input boxes.
  • DATETIME fields become iDateTime input boxes.
  • Foreign Keys in InnoDB Tables become iDBSelect drop-down boxes, which use the first column from the related table as primary key, and display the second column to the user. (Actually "SELECT * FROM parent_table" which can easily be customized in the editing process)
  • Auto incrementing Primary Keys have their input boxes disabled (commented out in XML), so users are not confused by internal keys.
  • Indexed Fields become allowed parameters, allowing users to filter/search data based on any indexed field.

Form Creator

For our demonstration, we'll create a table in MySQL with the following command:

CREATE TABLE `books` (
  BOOK_ID        int(11)      NOT NULL auto_increment COMMENT 'Primary Key',
  AUTHOR_ID      int(11)      NOT NULL                COMMENT 'Foreign Key Linking to Authors',
  PUB_ID         int(11)      NOT NULL                COMMENT 'Foreign Key Linking to publishers',
  BOOK_TITLE     varchar(250) NOT NULL                COMMENT 'Book Title',
  BOOK_ISBN      varchar(50)                          COMMENT 'ISBN #',
  BOOK_CALLNUM   varchar(50)                          COMMENT 'Call #',
  BOOK_COPYRIGHT int(4)       NOT NULL                COMMENT 'Copyright Date',
  
  PRIMARY KEY  (BOOK_ID),
  KEY AUTHOR_ID (AUTHOR_ID),
  KEY PUB_ID (PUB_ID)
);

Log into your FiForms application and browse to the Maintenance menu. Click the link to Create a Form. (If you do not see this link, see the Troubleshooting tips on Creating XML Applications.) You will be prompted to enter your FiForms Online Administration Password (assuming you are using the basic authentication module). Then you should see a screen similar to the following:

Createform1.png

This will generate the following code and save it in the application/forms folder:

<?xml version="1.0" encoding="ISO-8859-1"?>
<fiform xmlns="http://xml.fiforms.org/FiForms/" xmlns:html="http://www.w3.org/1999/xhtml"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://xml.fiforms.org/FiForms/ 
         http://xml.fiforms.org/schema/12/FiForm.xsd 
         http://www.w3.org/1999/xhtml 
         http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd"
       version="1.2"
       window="books"
       width="500"
       height="400"
       location="no"
       menubar="no"
       resizable="yes"
       scrollbars="yes"
       toolbar="no"
       whichControls="all"
       ctlPosition="bottom"
       svctlPosition="right"
       viewsAllowed="both"
       defaultView="sheet"
       allowInsert="yes"
       insert="current"
       recordLimit="20" >

   <title>Stores Information About Books in the Library</title>
   <summary>Form to edit books table.</summary>
   <created>Mon, 01 Mar 2010 23:53:37 -0500</created>
   <copyright>Copyright (c) 2010 by John Doe Software Company</copyright>

   <connect update="books" />

   <param name="AUTHOR_ID" />	
   <param name="PUB_ID" />	




       <iNumber caption="Foreign Key Linking to Authors" field="AUTHOR_ID" 
                         digits="11" decimals="0" prefix="" suffix="" required="yes" />

       <iNumber caption="Foreign Key Linking to publishers" field="PUB_ID" 
                         digits="11" decimals="0" prefix="" suffix="" required="yes" />

       <iText caption="Book Title" field="BOOK_TITLE" size="80" maxlength="250"  
                         required="yes" />

       <iText caption="ISBN #" field="BOOK_ISBN" size="80" maxlength="50"  />

       <iText caption="Call #" field="BOOK_CALLNUM" size="80" maxlength="50"  />

       <iNumber caption="Copyright Date" field="BOOK_COPYRIGHT" digits="4" 
                         decimals="0" prefix="" suffix="" required="yes" />

</fiform>

It will also create an entry in the application/menus/main.xml file, that looks like this:

<form href="books.xml" />

If the webserver is unable to write to either of these files, you will need to manually copy and paste the form code into the form, or manually create an entry in one of the menu files, in order for the form to appear in the application.


Template

You don't have to use the Form Creator to make your own forms. If you prefer, you can type them from scratch, or you can copy and paste the following template to start creating your own forms:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE fiform PUBLIC "-//FIFORMS//DTD FIFORMDEF 1.1//EN" 
         "http://xml.fiforms.org/dtd/11/fi.dtd">
<fiform xmlns="http://xml.fiforms.org/FiForms/" version="1.1"
       allowInsert="yes" 
       ctlPosition="bottom" 
       insert="current" 
       svctlPosition="both" 
       viewsAllowed="both" 
       whichControls="all" 
       defaultView="sheet" 
       >
 <title></title>
 <summary></summary>
 <connect db="" 
          server="localhost" 
          type="MySQL" 
          update="" />
</fiform>


Customizing Forms

Once you have created your form, you will likely want to customize your form to fit your needs. See the next article on Customizing Forms to continue developing your application.

Personal tools