065 JAB18 Using Joomla Component Builder

Jump to bottom Edit New page

Amigo edited this page Oct 14, 2019 · 12 revisions

JAB18 USING JOOMLA COMPONENT BUILDER

More Solutions Than Joomla Component

My name is Marco Dings. You can interact on social media with any of these items since I've got an of lot sites. I'm not going to read them out. I'm going to tell a bit of what's out there because there are more solutions out there than Joomla Component Builder. Why are you using a tool and then I'm focusing on the Joomla Component Builder itself. We'll have a nice giveaway at the end of the session.

Why Use A Tool?

Why use a tool at all? What's out there? We have Component Creator. It is a well-known extension by RST Joomla. It's a SAAS solution, it's closed source. It's free for one table you have to pay a subscription. Well, you do get provisional support. This is a wonderful tool that's been presented on JAP since 2015 or even earlier. JoomDD is a model-driven 00:01:23 tool or it abstracts your ideas and then generates a code out of it meaning you could by theory create a Joomla, a Drupal or a WordPress website going forward. There are nice plugins for php-storm/eclipse. Now it also has a Web editor. It has some basic reverse engineering that starts theoretically. Theoretically, you can feed it any extension and it should be able to make a model of them. I emphasize the theoretical part because I think that's quite some limitations for that to actually work. But it is open source. The instinct developers are in the back of the room and you can't travel back in time but you could have seen their session.

Joomla Component Builder is A Tool

Joomla Component Builder is a very unknown tool. It has its own characteristics. Joomla Component Builder is a component that you logged into your website. It is on your platform, it builds the component for your in your platform. You're not dependent on any SAAS solution whatsoever. The tools were used to build itself. The model that is referred to themselves as the mapped Joomla Component. That's where you have the gooey interaction and stuff that used to generate its own coat. The compiled source is open source. The mapped Component isn't but it's going to change. However 00:03:14 even at this point in time there are no license costs and there are no limitations. As component creator allows you to create a component based on one table. You can't do very much with that. There still doesn't have any limitations.

Challenges

Let me start with the question, who creates components or has created their own components in the past? That's quite a lot of people. What are the challenges that you'd see in that? Let me start with my esteemed colleagues. Steve and Victor who I especially want to thank For attending for the promise to do that. Steve, what challenges do you see when you create a new component?

To Aviod Repetition

You're not lazy, you want to get rid of that repetition. Anybody else wants to add something. If sometimes if you change a name or something, Where is it if you have to correct them? Does it that change because of things that you do yourself, or is it changes that it's done by Joomla? No, the changes you do by yourself. Whatever it does I should Change to this and then have to change it everywhere. Anybody want to add something. Rene. It is big the way components actually hold together. 00:05:31 You can really quickly create a basic component but if you want to do something special and you can't do it with these component creators. You can't load it back to your component field. Ok ok have summarize some of the things that I think to annoy me and doing that stuff that's a boiler plating that is Specially what Eve was referring to setting up the directory structure creating all the crop files now there are tools that will help you with that beach be storm but still it's tedious work and you have to watch the Capitalisation of the names and the slots of naming conventions And really I'm lazy And you think that a tool can do for me I'm very happy with.

Reuse Stuff

I also like to reuse stuff. Obviously, if you've already created a lot of extensions then you can reuse the previous word back copy-pasting but, Yeah you want to rename it so there's some work involved you might want to reuse Other people's work. Maybe somebody created something nice and we use that and obviously use libraries in general that contain abstract stuff.

Joomla Features

There is a lot of stuff in Joomla that we all love I think but you still have to do some stuff by yourself and your own component, if you want to have away made that work being multilingual support having from of groups, Access control structure Adding history to your Components use just as with article so that you can see you who changed what and what time Custom fields.

Limitations

And not all tools support that and obviously the tools out there have their limitations either be it cost or be it the licensing scheme or be it the skills required.

Advanced Items

And advanced items I would say ok, can you extend that tool Easily to Accommodate new features? So should that be a workflow extension to Joomla. How is it can you add up to your own component. Tools should, in theory, be able to Add that without bothering you with all the nitty-gritty details. Can you do reverse engineering JoomDD is a tool that can do that Impart so that's ok But To me more importantly is the roundtrip development which Rene mentioned Typically in the tool when you start you have their school while you can easily click together a table and view and stuff like that You exported to got your component then you start working on it As soon as you realize that you missed a field or what else something you're screwed because you can't go back to that nice graphical model then you have to delve into it 00:08:47 Round trip development is something that I value Collaborative development Working together on a single component with multiple people and that say model Those were things that I would like to see In a tool that supports my workflow Hans income Joomla component Builder And specifically Version 297 that's the

Latest version 2.7.9 on www.vdm.io

Latest and current version So anything I'm telling will projected this version not the earlier version so If you want to check it out check this version out that's the latest basically gather a little more So there is this Link Joomla component builder on www.vdm.io well Since this presentation will be available you will not need to copy it all It's only extensions directory Unfortunately in this talk We can but scratch 00:09:53 The surface so what I ought to Convey in the stork is that I thatch on the ideas. He say oh yeah if you could do that that will be fine still you would need to delve in To this yourself To get into the details fortunately there's Quite some Documentation in the form of videos Dozen 00:10:19 Dozen and dozen of hours of video Which doesn't make for the easiest in Looking up stuff but it does makes easy viewing just sitting in your own couch and streaming YouTube Videos to your TV on Suck it in Yeah we can but scratch the surface so you would really need to have a deeper look afterwards to see How to do stuff but if resonate with you in what you can do because Hope to convey that at least Then you're in for a real treat Let me go back 00:10:58 Because Contact why I started this is because my son wanted to have a website And children are like any customers It's really easy Nothing complex I just want And this case he wants to wanted to create a website with Disney characters and the autographs and stuff like that That's all he wanted Well Easy will do that with Fields custom fields 00:11:27 but 2 days in and require but I want to list and parades and I want to do this and I want to do that Not gonna happen so I introduce them to this Tool And He made it happen and he was able while he's not dumb for her is actually quite intelligent so What is not a diehard programmer Body could make it happen with some out now I must say that When we started Yeah they were weren't The number of resources were limited to help us so there were a few videos 00:12:07 but something were unclear Over the last few months I've been an extensive contact with a developer Llewelyn And over the months he Opened up to the idea of a number of challenges that we see And you will see in the giveaways at the end what that the result of them And that will actually really help you in Getting started.

The Dashboard

So if you look at JCB I think the first thing that you will see is the dashboard. On the control panel Wiki Notice board has some marketing links. But most importantly for you that says Wiki With Yeah you find in Find all the tutorials all the Links to the YouTube videos so once you install the component Builder 00:13:06 You'll got access to that to that just by looking at The wiki So unfortunately it's there is a explicit link obviously because it's Yeah it's part of open source unfortunately is not structured in terms of technical documentation whilst the Videos are indexed in terms of time stands and say he is talking about this here talking about that Still it's search ability is limited There's a forum on the way you can do Crash on answers And there's obviously you can directly access that list of videos to YouTube channel to look at Stuff.

Tutorials on Wiki

So if you look at the WiKi that some general planning and you will hit this is a sample of the Video on field types it's ok one minute and 5 we're talking about create field types at one minute 57 is list view It helps but it's not Perfect

Builder Workflow Chart

So let's not talk about The work for what does it take And what's possible in creating component I've put together this Diagram which is simplified These are the topics we are called to touch upon so we have to add the components that's the stuff that you want to build yourself The field types fields We have bespokel that's really custom code to yourself We have a dynamic get the view list view item view custom view. Stuff that has to do with interacting with the data Of your model controller Salivary some graphical stuff I will touch on each of these items

Components

Let's starts on the components first I've applicated the diagram So this is what you see when you Look and added a Component These are the tabs you have we'll cycle through and so well your details tab where you can setup The name the first name Do stuff with debugging line numbers yeah anything really you related to a Component 00:15:36 We have a settings manual Why you can configure that thing more in depth You see the list the reference to the administrator views the site views custom admin views I'll deal with it later Libraries and helpers The dashboard where you can create a custom dashboard for your extension with icons and stuff like that MySQL data The ReadMe file which is readme that gets Exported with your Extension And as Dynamic integration after Last part of the Presentation.

Field Types & Fields

Field Types

So How do we build a component The component How Michael come as a surprise we have field types I we have Fields 00:16:39 So field types so basically the things that we know a lot from Joomla There's a calendar category checkbox check boxes colour Anything like that so That's the extra definition of something that you would want to Create You could Add your own Filter type to that These types And those are the fields are share between all your Components So you don't that's where you get part of the reuse of You create a month and then if you've got a very specific field for a specific action Some kind of zip codes address validator thingee you create it here.

Fields

And then you can setup Fields and So are the institutions of field types You can create your own Fields you can paste special fields with dedicated validation Stuff like that and the fields are the stuff that Eventually will end up in the database 00:17:53 in the tables Probably unto now nothing is stored it it's just abstract You can set up your Bespoke Fields so stuff that you Like yourselves so there is the type value let it has can assign items And as you can info here You can have a lot of attributes to And if you just about anything that you would Like You can add extra properties 00:18:26 Here you can here you see And That's what we coming to where this is in this field in which views It's used So it is an admin view series in admin view preacher and admin view sermons That's of the installed applications that I have and here is Information on the Attributes used to filter so there's a lot of stuff That you can configure per field type To set it up.

View(s)

Here in the bottom on the right corner we gonna saw The views. it was used in and That's where it gets tangible so once you set up your field types and your fields If you at least need new ones that are not default with the tool You're gonna set up your views and I think you're familiar with the list views and the item views so the List views is where you got your tabular tabular display of multiple items and your items used a typical View of one of those 00:19:35 Items so that's the item View Component Builder it uses also a custom View Which is used to like for reporting where you can do graphing or anything special that's not Necessarily in the realm of a Item view Itself or list view So these fields are the stuff that's gonna get Added to the database You can add all kinds of conditions in the view 00:20:09 For that You can add buttons to a view Not necessarily understand what is saved I commit or Any other actions And there's a plethora of options to hook into your Code so Adding an Ajax called PHP that's run on the get item so when you get a singular item At the PHP for batch add PHP for 00:20:44

After publishing Before deleting Post save well For the list query so you could Read data from the database and manipulate it Too show it in the different forms or if you have Like numeric presentation of whatever attribute you could change that then to display as and item or What you would wish Lots of options Here added got a lot of 00:21:16 Items already So basically it tooks into while if you looks out to do if you would also it model and control apart At last part you saw something about the MySQL so you can add a MySQL done to initialize That table on installation And as the usual stuff regarding publishing And commissions that we all know from Hanni standerd Joomla thing But that also means that At this level you 00:21:53 The entire workflow in component Builder you can add the same restrictions to As we had a for other component so you can have some people in some groups have the right to Create fields or Not create Fields create tables Anything But you would want.

View: Linked Fields

So here we have the fields that are linked to that table so that's a view of it so And a overview you can see ok is this sortable Can I search it So you can turn it on and off Where does it show in a tab So not everything shows in long how does it Order What's with the permissions that's nothing here but links areas So there is a whole overview and you can add it each Item from here so you can added the attributes of how you behaves in a list view or in an item View To your hearts desire He has an opinion that I shouldn't be more than 60 fields in Admin view yeah Not Unrealistic.

View: Field Conditions

You can also add conditions To a field When it's supposed to be shown On which circumstances so that you can have a More Clean display And that's all Draws back in in one building on the standard Joomla mechanisms 00:23:30 That we have in the XML files to show hide or show on but you can show on Something of another field in the XML file So That in basic covers Of view and the stuff that we have in the basic table

Layouts,Templates & Libraries

Templates

Now obviously you want to visualize that It allows Dump the thing as a it's called I hope everybody recognize this structure while you have the default PHP if that's your site view And then you can split it up in Separate parts and make it more readable And those are called the tablets so you can multiple tablets that you can use in different Base views oh site views To set up your view

Layouts

And there's an option to Add Layouts These are basically the Joomla layout you set them up through the gooey and then you can reference them in the Usual way The point being that the gooey gives you access to all of these Items that typically are Normally called

Libraries

Furthermore we are the options to add libraries those are the Global URL Stand of support stuff for Bootstrap 4 UI kit a number of libraries what if you have a lot of a framework that you like for JavaScript You can find that for that views for who loads it in And it's reference and you don't need to worry about it It's just an example of how it looks like where if you got the URL 00:25:36 URL The type Yes. If you drags of the libraries is it the always gets latest No probably not depends on what URL you can provide here so I think in this case is get UI-kit 3.0.0 beta blah blah blah blah for that version Of Your created components So once you bring out the new component new version Your could Check if there's new version UI-Kit 00:26:12 Put it in here and generator your component again. Does it reference or does it really save are just lost. No what's answered here just ends up as a piece of code in loading the data but it said we interface to ensure that it gets on all the pages that is reference try to gooey Depending on so this is on cloudflare CDN So it gets it from there so it will just be a reference in the code to load it from there but there's nothing Calling you back to actually set it up locally you just change the URL here and then Tweak it Whatever you where you would want to.

Dynamic Get

Now we had a very basic Table Field that's one table But Yeah that's At least not our typically my components work Because we have Want to enroll and relations in decompose on normalizing in your data 00:27:18 So you would want to be able to Combine that In a view And that's why the Dynamic get Comes in The dynamic get has two basic tabs. The one that says Filter.

Tweak

It says tweak. I hope it's visible and here you can see where it says access level ID in A dot access so that the 00:27:50 so it actually knows about the access level Of the user And since we have a access level in the in that table Or for that element It will ensure that it'll only show So in the gooey you can Restrict access to stuff you can Have where feel things where you can say Ok I Only want the published ones 00:28:22 You can Sort it you can even set Global thats you can use in your code while Globals is not the best practice but hey Here you can do a lot of Things in Extending your data filtering it you can add this is where you Add search For it by Here addressing the search Elements from the post And let me make sure that you filter on that so it is very powerful

Joint

This August translated into Basic database language so typically it's MySQL queries And all the aspects obviously is How to Create relationships because having one table Probably he refers to other tables And that's why I this Is called a joint. I don't think 00:29:31 But Now you see your OK series single as B joint a series equal Yeah you find your joining queries between your tables So for that view You got 1 combined table That's also all the information To be displayed Which is kind of very Powerful. So indirectly I have joints to the gooey.

00:29:58 No define dynamically you can add. Can you multiple joints. Yes you can add as many as you want here. So there's no actual limitation to it this will just really translate 1 to 1 in MySQL stuff Yes this is a repeatable field you can an add in as many as you want them as complex as you want. I can see but you can make any kind of joints. Yes Left joint right joint in a joint out the joint So in just that combination we being able to 00:30:44 Joint tables Add the filtering That's an awful lot you can already do At database level What you can't do a database level you can do at the PHP level where I sort the Get list items you could do additional stuff there So options are Forcefully Limitless.

Custom Code

Custom code not to be confusive be spoke code. There is some options to have what is called custom code in the code snippets that you are defining and The Custom code Could be it's basic in the Micros So it's a research and replaced thing you define Snippets by Adding this in an axle piece of Code it will fetch in that larger piece of code so that you don't need to 00:31:52 Recode your get view ID Every time You can also pass values to that Snippet of code basically it's going down the function So that's just a centralised your code have Functions At the gooey level then.

Bespoke Modifications

Ok, this should have been the bespoke code and not the custom code because that's to me the Unicorn thing of this Component Builder and this is what got me interested in it. There's a lot of options in there but for whatever reason I always end up wanting to change something that can't be changed directly in the gooey. 00:32:44 and That's why I this Computer component builder excels I think Because it will allow you to Add code or change code anywhere In your compiled component The only limitation is that you have to Add some Structure on that are commenting on that so that it can be found so that's insert place like this and in with that anything in between there Will be inserted 00:33:17

The beauty of it if you do that The Builder tool will extract these pieces of code And the next time around you build it it will re insert them So you will Be able to change stuff at any location be it and PHP or HTML And Have it be imported So that would for example mean if you now have a 3.x components 00:33:47 Which has a shortened file layout structure etc. etc. If In a few months time There is a version that can build for Joomla 4.0 Your changes will be put In the relevant files in all the locations I won't need worry about it It will just build With your cross and changes that with Joomla 4 00:34:15 for those Familiar Joomla 4 has a slightly Was it works with Joomla 3 The directory structure and file structure That's not the best practice the best practices Baffles or Shuffle around a little bit Anybody wants to know just ask George He'll be happy to tell you about it There is a I've listed the number a number of stuff so you can say insert this or replace a piece of it 00:34:51 existing code And So when it so you see what happens when it gets Added back in the get again And add some tags so that it can do its homework and actually knows which piece of soft phrase change that what Location So this was really what got me enthusiastic about this tool because this is not something I've seen Before. 00:35:18

And it'll allow for Roundtrip development created it in gooey Modify to your extent in you can already modify lot in the component builder itself If not you can change it anywhere else And it will be sucked in again And then if you want to add a new Database table in new few extra columns Joomla component builder will take care of that it will create a associated update script for the MySQL databases It will do everything.

Compiler

Obviously some stuff needs to be compiled and this is A bit what you can see when it gets compiled So You select your component In this case I've got component builder, sermon distributor, question and answers, demo and demo advanced select one of them and hit the compile button and that's it Once it's done it make some assumptions assumptions about the time you saved It's assumptions but yeah so much time you have at least 00:36:35 get the sense that you actually save time because you didn't have to create the Directory structure Nothing like that Once you compile you can Click on this one to install it immediately or you download it or you Reference what ever that code is. And if you have it somewhere else Ryan you can use this URL or path depending on where it is Now you could if you have one development site is easy to run component builder there 00:37:17 And because every package can be exported An imported in an other site Without problems There is a option to if you have a commercial component to have it encrypted and secured by a key So that it only can be installed if you have that key Watching like this in Waterberg Yeah Started with some misc stuff you'll find some example for example in there that in the tutorials which I thought really a nice one that adds deals with 00:38:05 Drag and drop uploading with all kinds of Filtering on content type security looking if it's PDF Filesize resizing images There's a very complex example there on how to use that with ACL so that only certain group People can do that Yes very Interested Another thing that Probably Rene also would like to see is that there is a sorry I would say I know you but I know most of the people in the room so.

Collaborative Workflow

So familiar Collaborative workflow If you work on so you can work on the Sing Installation But then you deal with the normal Joomla Problems of locking up your article And then your article is locked and somebody else cannot work with it What does actually 00:39:12 you can't do stuff simultaneously There's actually a workflow setup while you can do We've multiple developers work on their local insulation Where the changes get merge Using git So you can have a collaborative workflow on that So the mapped component gets Versions in your own git stuff There's also community components that used the same workflow or similar workflow 00:39:48 As a similar way of working we have The Upstream repository So you forked that in your local Github you Clone it to your local development and environment You make changes to for simple question and answers component You set up your upstream And than you Push it and make a pull request and then Pull request may not be accept it And then you can download the new question and answer component again but that works ok you can also setup locally.

Give Aways

Now for the giveaways. So until the start of this presentation, VDM has been the company of Llewellyn which sold the Mapped Component Packages, So The question-and-answer modules would cost you 94 dollars. The Sermon distributor 00:40:57 would cost you 46 dollars. The big thing the Component Builder, the thing that we are actually talking about costed 800 dollars. All totalling over a thousand dollars which is a lot of money. I have in the last months talking to Llewellyn and he talked to his team and a big change in attitude came to give back. 00:41:28 So anybody that here, If you use this link, Take time to take pictures I'll step aside. So you can fetch time I meant this presentation this one. Why you can Hit on me later if you need it. All that dates you can get these three packages. If you open that page now you will see that you can access these and you Can get the keys, the only thing To be eligible for the keys is that Llewellyn asked you stared share or preferably fork 00:42:22 preferably fork The respective components If you have a public email address you we should get send the key Automatically. so public email address in get that publicly accessible. If not You can claim Your key on this page. So You can get The sermon distributor or the question and answers and the Joomla component builder itself. 00:42:49 Watch watch fork or stared it. And you got notified if you have a public email address in git. That is very easy in terms of You got to the components you can import the package is here. So it has an Import JCB packages that you can They were list No need to search for them you can also see that you can export packages. And then you got something Like this, 00:43:27 here you add the key that you got distributed And this is what shows when you Progress, so I got component build that pay a lot that it's installed and here it shows the All the extensions I've got a little privilege in getting these upfront. So And so I have keys but don't ask me for keys I will not give them. There's a perfectly simple way to get them. Just stare fork and share 00:44:01 And you got your own key. and with that I want to say huge thanks and shout out to Llewellyn van der Merwe who is somewhere in Africa, And sure to look this back.

Questions

Any questions of this It's a lot to take a knife and try I actually don't know I know he has employees But I actually don't know how big his company is the Picture of the office building is huge office building but I don't think he owns it all. This is a huge thing I guess you didn't click this together in one afternoon at least he didn't no absolute not he work very hard the last days. It isa real good package. why didn't we heard of it before I don't know I have you have heard or came across it before and that's actually how I urged it my son to use it I actually heard of it years back but to me it's a bit like Joomla itself I heard about it but only when I saw that it started to be multilingual and that access control in the core I got interested 00:45:20 And the thing that got me interested in here is the fact that I can do modification in any location of my Component I have no limitations on that and I can still do aroundtrip development By giving back obviously Llewellyn hope someone to contribute so that we can extend this even further And I've already started to talk with my friend from the JoomDD To see if there's maybe that's Common Ground because I also very much like their idea about having model driven Development Don't know how to reach it yet but since it's now going to be open source two ways the option exist 00:46:05 And that's really exciting to me. Yeah you could use it but you couldn't change it and It was totally free And you could use it for free but you could you couldn't have the mapped component and so the one that builds itself and change that And you wouldn't have the Example components example components so that you could look how does he do this how does he Filter how does he do this And starting Yeah but starting today you have two example components that Will really help you on the libs that I struggled in finding things out 00:46:59 And you have a Joomla component builder where I hope that the community will take it up and Ok So i've been signal that it's Janz Thank you Janz If there's any more questions just Ask me when I'm moving around