Mt.

Olivet SDA Church

Facile Forms Tutorial

Contributed by james biggs Thursday, 15 December 2005

Hello World Sample

With Facile Forms, you can easily create forms and applications consisting of Scripts (Javascript), Pieces (PHP), Forms and Backend Menu's for use in your Joomla/Mambo environment. This chapter will outline creating a simple Hello World application that will be referenced in other chapters. The Hello World application will consist of one Script, one Form, one Backend Menu and one Frontend Menu. Creating the Script From the Joomla/Mambo Administrator backend, click on the menu Components->Facile Forms->Manage Scripts. This will open up the Facile Forms Script List. Click on the New button to create a new script. You are now in the Facile Forms - Add Script screen. In the Title text box, enter Say Hello. In the Package text box, enter Hello World. The Package text box is used to group all the Forms, Scripts and Pieces of a Package together. If you wish to include Forms or Scripts or Pieces in your package, you can give them all the same name in the Package text box to make it easier to create a Package later. In the Name text box, enter say_hello. In the large text area under the Create Code Framework link, enter the following code Code: function say_hello() {

alert('Hello World'); } // say_hello

Later, when you call the say_hello function from a button on a form, you will get a javascript alert with "Hello World" in it. Click on Save to save the script. You are now back at the Facile Forms Manage Scripts Script List. You need to make sure that your script is visible. Near the top in the center, click on the Package select list, and choose the "Hello World" entry. Your new script should be visible in the Script List.

Creating the Form From the Joomla/Mambo Administrator backend, click on the menu Components->Facile Forms->Manage Forms. This will open up the Facile Forms Form List. Now click on the New button to create a new form. You are now in the Facile Forms - Add Form editor. In the Title text box, enter Hello World. In the Package text box, enter Hello World. In the Name text box, enter hello_world. Go down to the Email Notification select list and choose "No". In the Description text area, enter My Hello World Form. Click on the Save button. You are now back at the Facile Forms Manage Forms Form List. You need to make sure that your form is visible. Near the top in the center, click on the Package select list, and choose the "Hello World" entry. Your new form should be
http://mtolivetsdachurch.com Powered by Joomla! Generated: 11 October, 2011, 11:36

Mt. Olivet SDA Church

visible in the Form List. Now it is time to add something to the form. In the Form List, click on the "Hello World" form Title. This will open up the form page 1 for adding or editing elements. Click on the New button. Now you will be at the Facile Forms - New Element Type screen. Click on the radio button for Regular Button, and then click on the Continue button. Now you will be on the Facile Forms - Add Element Regular Button screen. In the Title text box, enter Button Click. In the Name text box, enter btn_click. Skip down to the Label text area, and enter Click Me. While you are still in the Facile Forms - Add Element Regular Button screen, click on the Scripts tab at the top. Here you will enter the script for the Hello World alert. First, click the Custom radio button. Now enter the code as shown below into the text area. Code: function ff_btn_click_action(element, action) { } // ff_btn_click_action

switch (action) {

case 'click':

say_hello();

break;

defaul

Now click on the Save button to save the element.

Creating the Backend Menu From the Joomla/Mambo Administrator backend, click on the menu Components->Facile Forms->Manage Backend Menus. This will open up the Facile Forms Menus Menu List. Now click on the New button to create a new backend menu. You are now in the Facile Forms - Add Menuitem picklist. Find your "Hello World (hello_world)" form in the list, click on it, and then click Continue. You are now in the Facile Forms - Add Menuitem editor. Leave the Parent Item select list as Top. In the Title text box, enter Hello World. In the Package text box, enter Hello World. Choose an image to display on the menu. Skip down to the Form Name text box, and verify that it is hello_world. Click on Save to save the menu. You are now be back at the Facile Forms Manage Backend Menus Menu List. You need to make sure that your menu is visible. Near the top in the center, click on the Package select list, and choose the "Hello World" entry. Your new menu should be visible in the Menu List. From the Joomla/Mambo Administrator backend, click on the menu Components->Hello World. This will open up your Hello World form. Click the "Click Me" button. You will get a javascript popup alert with Hello World in it. Creating the Frontend Menu From the Joomla/Mambo Administrator backend, click on the menu Menu->mainmenu. This will open up the Joomla/Mambo Main Menu List. Now click on the New button to create a new frontend menu item. You are now in the Joomla/Mambo New Menu Item Pick Screen. Click the Component radio button on the right side of the screen, then click Next. You are now in the Joomla/Mambo Edit Menu Item screen. In the Name text box, enter Hello World. In the Component list box, pick Facile Forms.
http://mtolivetsdachurch.com Powered by Joomla! Generated: 11 October, 2011, 11:36

Mt. Olivet SDA Church

Click Save. You are now back at the Joomla/Mambo Main Menu List. Your new menu was added to the end of the menu items by default. Find the new Hello World menu, and click on the name. You are now in the Joomla/Mambo Edit Menu Item screen again. The form name needs to be added as a parameter to the Hello World menu. On the right hand side, enter hello_world in the Form Name text box. Click Save.

Frontend Testing Logout of the Joomla/Mambo Administrator backend. You are now at your websites front page. Click on the new menu item "Hello World". Your Hello World form will open within the content area of your website. Click the "Click Me" button. You will get a javascript popup alert with Hello World in it.

Congratulations, your Hello World application is now tested and ready to be accessed from your website. edit: There was a small error in the code for the button click that has been corrected.

http://mtolivetsdachurch.com

Powered by Joomla!

Generated: 11 October, 2011, 11:36