JDeveloper - create component

31
JDeveloper for Joomla 3.x Create a component

Transcript of JDeveloper - create component

Page 1: JDeveloper - create component

JDeveloper for Joomla 3.x

Create a component

Page 2: JDeveloper - create component

Create a componentIn our example we want to sell pizza.

Page 3: JDeveloper - create component

Create a component1.Go to the

components view and click “new”.

2.A formular will be displayed.

Page 4: JDeveloper - create component

Create a component1.Fill the formular2.Click “save and close”

The difference between “name” and “displayed name” is that the first one is the folder’s name and the second one is the menu name.

Page 5: JDeveloper - create component

Create a component

Page 6: JDeveloper - create component

Create a componentNow our component need a table to store the data. We need the following data for pizza orders:- customer’s order (pizza name)- customer’s name- number of pizzas- customer’s address

Page 7: JDeveloper - create component

Create a componentNow go to the component view by clicking on the component’s name. Then click “add table”

Page 8: JDeveloper - create component
Page 9: JDeveloper - create component

Create a component1.Fill the form like in the screenshot

(next site)2.Click “save and close”

Page 10: JDeveloper - create component
Page 11: JDeveloper - create component

Create a componentNow our table needs fields. Go to the table tab and click “add field” to add a new field to the table.

Page 12: JDeveloper - create component

Create a componentNow we fill the field form. In our case only the database options are important.

Our first field should store the customer’s name. The database column should be of type VARCHAR with a length of 255 chars.

Page 13: JDeveloper - create component
Page 14: JDeveloper - create component

Create a componentNow click “save and close” to save the field.

The next step is to add a field where the customer is able to select his desired pizza.

We provide “Hawaii”, “Funghi”, “4 Cheese” and “Chili”.

Page 15: JDeveloper - create component

Create a componentThe “pizza” field type must be of type “list”, because we have multiple predefined values given.

Fill the form as shown in the screenshot (next site):

Page 16: JDeveloper - create component
Page 17: JDeveloper - create component

Create a componentNow we need to add the options to the pizza-field.

1.Move to the “Params and attributes” tab

2.Add options by clicking “add option”3.fill the key and value boxes

Page 18: JDeveloper - create component

Create a componentThe key values will be stored in the database. The values will be displayed in the input form.

Page 19: JDeveloper - create component

Create a componentSave the pizza field. Now we have to add the “number” field. The customer needs to tell us how many pizzas we have to deliver.

The number field’s database type has to be INTEGER.

Page 20: JDeveloper - create component
Page 21: JDeveloper - create component

Create a componentThere is still one field missing. The customer needs to tell us his address, otherwise we can’t deliver the pizza.

The address needs more than one line, so we set the form type to “textarea” and the database column type to TEXT.

Page 22: JDeveloper - create component
Page 23: JDeveloper - create component

Create a componentAfter saving the fields our table should look like this:

Page 24: JDeveloper - create component

Create a componentNow the component is ready to be installed. You have two options.

- Create an installable ZIP file of the component

- Install the component directly

Page 25: JDeveloper - create component

Create a componentWe are installing the component directly. In this case the install package is automatically created.

Page 26: JDeveloper - create component

Create a componentClick “install” in the component toolbar aboce the table tab.

Page 27: JDeveloper - create component

Create a componentThe component is installed. Move to the main menu, select “components” and then “My Pizza”

Page 28: JDeveloper - create component

Create a componentThe following screenshots will show how to add a order to the table (in the backend).

Page 29: JDeveloper - create component
Page 30: JDeveloper - create component
Page 31: JDeveloper - create component

Create a componentThat’s it! If you saved your order, the list view should look like this:

We built our first component!