JDeveloper - create component
-
Upload
jcmsdevelopment -
Category
Software
-
view
24.724 -
download
0
Transcript of JDeveloper - create component
![Page 1: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/1.jpg)
JDeveloper for Joomla 3.x
Create a component
![Page 2: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/2.jpg)
Create a componentIn our example we want to sell pizza.
![Page 3: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/3.jpg)
Create a component1.Go to the
components view and click “new”.
2.A formular will be displayed.
![Page 4: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/5.jpg)
Create a component
![Page 6: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/7.jpg)
Create a componentNow go to the component view by clicking on the component’s name. Then click “add table”
![Page 8: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/8.jpg)
![Page 9: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/9.jpg)
Create a component1.Fill the form like in the screenshot
(next site)2.Click “save and close”
![Page 10: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/10.jpg)
![Page 11: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/12.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/13.jpg)
![Page 14: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/14.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/16.jpg)
![Page 17: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/18.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/20.jpg)
![Page 21: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/21.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/22.jpg)
![Page 23: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/23.jpg)
Create a componentAfter saving the fields our table should look like this:
![Page 24: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/24.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/25.jpg)
Create a componentWe are installing the component directly. In this case the install package is automatically created.
![Page 26: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/26.jpg)
Create a componentClick “install” in the component toolbar aboce the table tab.
![Page 27: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/27.jpg)
Create a componentThe component is installed. Move to the main menu, select “components” and then “My Pizza”
![Page 28: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/28.jpg)
Create a componentThe following screenshots will show how to add a order to the table (in the backend).
![Page 29: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/29.jpg)
![Page 30: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/30.jpg)
![Page 31: JDeveloper - create component](https://reader036.fdocuments.us/reader036/viewer/2022062401/587668851a28abd0018b473f/html5/thumbnails/31.jpg)
Create a componentThat’s it! If you saved your order, the list view should look like this:
We built our first component!