Component-Builder

Now that we've added the admin views to the component Let's look at some of the features that is still available inside of components As you can see adding your custom admin views is done there And the site views is done here Then there is a custom admin menus now this this don't let this 3 yard Controlling the menu structures for these Custom at land use in the site views are done inside of these This is if you are actually adding Custom backend Views Which hasn't been developed inside of component Builder So for example Opera browser itself has a compiler View Y'all have seen that If I We go there It's this view here Now this whole view is done outside of component Builder I I actually This is just hand go to the script That kicks off a bunch of Events now It needs a model it needs a controller so I wrote that With my you know just manually Hans and Cody And it also needs a view And so basically the view and everything In regards to it If you look at my infrastructure of component Builder You would see That I have Pioneer I have a place called custom C Inside of cross them Is where everything that you want it into you know include inside of your component is added into the Custom folder Any files in folders anything that you want to integrate is in here now you might look there See there are a bunch of things already there And I would encourage you not to remove them because depending on what you do in component builder it will Automatically include those Specially the the food tables And the import View And you like it Not sure I think you would have sound manager as well That is for 7 distributor And in PHP Excel which is the use for the exporting Data to spreadsheet and Importing a promise pets using this This library So all of that is in the custom tab And then he will see about two files as well now the Report builder itself has its Compiler view here So as you can see it's basically just empty folders And then I have the actual files Here is well there's the default compiler file Which is Then if I open it up It's basically the The Script that shows the That little dropdown of items And I have That in there And I also have the controller somewhere Scroll down Obviously Compile a there's two controller Bester model There is the compiler as well The helper File And so I am including that Into my component We look here Let me open Bodybuilder quickly Go to settings In files I'm including A bunch of things ending and that also means I'm including that here it is the compiler And I'm saying take this file I put it in admin views compiler And view And rename it See it's got the wrong name here So if you add the right name at the end of the string Antique Yes it will rename that file to this Just adding custom Files And As well as custom folders So on Grabbing the compiler views and I'm dumping it interviews And I'm also say rename it to compare the sofa by the views becomes compiler Inside of the views folder And then Obviously we first the system will first build the folders And then move your data your files to those folders so you you you will put the files here And then have the system to the folders and then it will move the files Ok so that's adding custom files to any component and this custom admin menu Is basically what I use The map the compiler menu so I would say I wanna call it compiler the code is compiler I'm not using a link because it's not another extension or another website or something like that Which you can also do And then I would select an icon Here is the information On the same kind of switches As you see with adding and custom admin sorry Mbeki interview you can tweak whether it should be an admin menu or below dashboard And be a sub menu So you can tweak that And then also in which order behind it says select before what happened View This one Should be placed Now That we are facing it before component So that means it can Go The very top Ok so that is adding An custom admin menu Because of custom Feel the fear of the files and folders that you have Created by hand and are importing Into your component when you Violet The same is done with the compiler of component builder I'm actually including it as files so There is the compiler Oh you know what I am I took All the compiler Files and I put it in the folder called compiler it is And so it's a folder which moves all the files at once that obviously can also be done Like for example as you see here BHP Excel Which is a folder Has a lot of content in it if we were to open it You see that's all these files and folders and things And so I put everything I wanted To move Inside of this folder And then in in my component I simply target that folder And it pulls it in Ok so that That's simply showing you how I had it a whole lot of folders to Two component Builder And then When I need a backend admin view custom Deep Added this feature here does that for me Now I also want to quickly cover the The area called comfort Is it this area deals with something that is actually Whiter Useful And that is to set up your Back end Global fields Now It let me go out of this one Cause it's definitely not the best in mistration let me go to 7 distributor There we've done some really amazing things 7 distributor The settings and then config And as you can see it is a very long list of things But then if we go to The actual component Set me open it And then I'll click on options You see that has many many tabs Ok all of these switches Are done in the config area All of them except some of these default switch Is that it Buy simple switches For example the global timer remember we spoke about the check-in Yeah you can set it all whether it should be able 5 hours 12 hours 1 today every second day once a week will never Checking in your items automatically the version control buttons are added automatically as well Which means the person can set the version control on the RAF And also said how many You know break or should be set for Then all versions will be saved So this is the version control And then The author Areas also added automatically And you can when you click in the component here Disclose this thing You see here is a contributing area you can set whether you want at empty contributing level The fields Here you can add contributor as many as you like Those involved And then the amount of empty ones you want to leave there Is also Tweaker bill And that'll basically Let me show you at this area yet Contributor 1234 And When you use this witch IT controls whether it's been shown in the back or the front of all these kind of features I'm not gonna go into my step now But they also added automatically on also the permission and structure is added automatically And if you have in the component You can actually Set that it includes you I can I said that yes If you do that Aurora matic leads This feature Due to your component And every where where you are kid is used Ok so everything else this Dropbox preacher preacher categories category Series list and series and sermons Is all done through that Comsoc Every here Now to use to add Fields to the config area you need to feel you first need to add that field Two fields So you would you go to fields And whatever field you wanna use there you need to create here So you first create the fields Then obviously you need to remember the system name that you're using Because then when you open up this You would be able to Type in the name And it will be selected And then by Convention that tab name As long as you use the same tab name it will be bundled in the order of which you said it here So this is where the Dropbox Area All there Fields are being set Now the reason why we include these these Demo Component Into the Application with the tutorial Is that you can go and look and see ok well he's using Dropbox update method Year And Then you can go look at this file And then you can go look at And how it looks here The Dropbox update method And the files and the text and even Some of this I mean there is a years a button If I click it It starts an update And it even shows it here Now out to do that it's very tricky it's it's It's not that simple to do that because we not inside of our component as you can see were actually in the conflict Component In the global if you have Global settings So This whole feature that is building to summon distributor is so smart I would tell you For you to be able to do that is just stunning So You can look at how I've done that by Simply going to the To these fields And you would find The answer to how did he do that And you can look at these things in this list View All the Dropbox Information is there And then there is some Global Like local folder download link And then space HR You can see that I have that Space Age are quite often it's a It's a field that it will be included in Paid A version of Some industry of component bar Already has that spaceship space so h r in it And since spaces you can use the same spacer Over and over the system automatically implemented so it doesn't have conflict in name conventions So I'm just using the Same Space so every where is putting spaces which is which is this Little Line Sealine there It's very Marie Very small but it gives a space between these areas That is why I'm doing that Then also he can put default values which will be used with urine Installation of the component Did you have Switches in your config That you want to populate with default values should just have those values here And then during the install Does values will be added to the database and A bulletproof soul that in place for you So this is where you add config Fields And there is another Convention which is maybe Not Is not That It's not that obvious But I added a convention that if you use a tab name Which is exactly the same As a Front-end View Then I will add This field Do that front-end views menu Now If you can see it if you think about component sorry of Zuma last Content Manager manager It does the same thing In the global setting of your article manager you can set features for categories and 4 articles But if you create a new article and a menu item Then you can override those you can say use global or you can override them now this feature Of using the same tab name So let's look at this The features name is Preacher Switch Weather should be a table or a grid Ok we set the default to And we call that preachers plural That's quite important Now Let's look at the front Close this out Do you know I have a bunch of menus I'm gonna go to a menu that I've already created or preachers And then I'm also gonna go to this component backend Old preachers Do you see there is a list of items now all I did in the component Builder Is I simply added The name preacher as a tab name That's all I did And then the feels So there is the list of the fields from there 2 there These are the fields you can see them here These Fields I simply created in the field Area With your type so is Bailey's basically some radio buttons A drop down list Another dropdown list and again some radio button Essay these are the fields And then in the view if you click on 7 distributor You see those exact same Fields and it has the option of using The global Instead so there's use global or you can override it So you can decide ok just receiving admin do I want to use grid and not the global Auction So that whole system Of adding This extra features to every item view of the front end Is integrated simply by a convention If the front end is called preachers which in this case it is She can see there it's called preacher see I just selected a menu item port preaches Now we haven't dealt with setting up your side views and all that so this might be How did you get that item name right in everything But I'm trying to Sketch a picture which we will revisit when we eventually get to this area But this is just 8 you know from where it comes it's simply in the config I added the files and used to convention of the actual Front-end Page that has a name for preachers And So there is as well for preacher which is single So if I closed out as select 7 distributor and then select preacher Which is another View And then I clicked hear you see all these switches They also Map in here From there All the way Do there And they have some default values in there there there are there Feels And in the back in of the component if I click on preacher Here is the same Fields so you can send Global settings And then you can overwrite them sorry in the menu itself Why not using Global So that this whole feature Is possible Through this config Little tab sorry it looks Insignificant I suppose And you might not expect it like I said it's not that obvious that it does this But that is what it is doing And so as you can see all of those certain areas I just mapped it in config And because of the name of the tab let me stress that Because of the name of the tab The system does also this is related to any front and menus as well Therefore it will automatically create this front end Things for you Now to show you how it is done it's quite Simple Not that I want to teach you how The July works but I want you to at least know What is doing so I'm gonna go to the front of this component here it is And I'm gonna open that view preachers And you'd see in template there is a extra file called Default XML And then I'll open that if Alexa now Basically all component builder is doing Easy it is adding The convention to this file So if you're running into troubles and it's not working as you expected This is the file in which you can come and look To see what's happening That is in the front end In views In the specific view that you have to it must be this view must be the The tab name And then In that file called default XML Obviously And this is important Since we haven't dealt with adding site views The site is here I need to quickly touch on it so did you at least know Something that relates to this That is if you didn't click on add as a menu But you said it's to know Then that's far will not exist Ok so that's why I'll only exist if this is set to yes So silly sending it to us Dells component builder to build as default XML file And sitting the Cubs to the same name as this view Dells component builder to add those fields To this Few and make it so that Using kanban Have Unique Implementation obviously And this is important It doesn't thank yous Of This information necessary inside of your site View You need to Make use of this information in your side view If you're a developer you would expect that ride you would know Oh yeah ok so inside of your Component You have A place where you check Barons header Should it show then it shows it and it basically you getting it from the parameters The parameters are set inside of the view HTML dot PHP You see here we set the parameters We get We do on this app get parameters now this actually gets all the parameters in relation to this view The component parameters gets the menu parameters and it automatically If it has the Dustin So If you like I'm Have you going Beyond the scope but if they've used Global It will automatically fall back on what the set here which is excellent So you're using the same name Display And display where is it It's the same name And so if you are using Global basically what parameters does Is it getting this place parameter No display field it's getting that parameter And it first looks at the menus Settings and that one is set to Global it automatically Falls back to the global settings That is done by tumor God self it's not really something I thought it's just the way Joomla works which is excellent And That means that you immediately By using params And then doing a check-up So remember that this value Is inside of this params And if I didn't go to the default View And it's see where am I gonna do some of that Let's go to Hear the preacher display Gay So the field name wasn't used display I'm sorry it was for preachers display That's the The field name In the global Configurations So You're not with me It is What we Used for this field Switch preacher Table grid It's called preacher display If I was to go and open this field fact that we do that so if you see the whole picture Switch preachers table grid please remember that Ok here is the list of the switch preachers Fields as you can see I'm in the fields Tab Open that Specific Field And you'd see that the name Of that The name This field is preachers Underscore display Now You need to make sure that none of the fields have the same name That is quite important What I mean by none of the fields I mean This field must not be the same name is that field Every field in this Global area must be unique It should never overlap So that is why I use the convention of preachers display so that I can also use preacher Without the s display and I can use Category Underscore display in UC so that I have that sort of convention of implementation Is it all around as you develop think about conventions using sort of Logical repetitive scalable concepts And so this is one of them that I've done And then I just added it here It's that specific item And then in the Global area you going to preach is it is basically this view here Sorry field This field here And in the code On Simply saying If pressure equals 1 Then show the table If Preacher display = 2 then show the grid And if it's not selected and show the list Which is the three options if you look at the button The button is Table grid list And So I'm not asking that's the global have this so that none of that I'm just calling the field directly Because the way that you will I get that initial data like I showed you here Is they sort that out for you and that's quite nice And I've obviously placed in make sure that my Explanation is the truth And so goes with the colours you can see here I I again just your promises get colours But this is actually knowledge that you would have If you have developed a component for Joomla You would know about these tricks I suppose And I'm just showing to you how of component Build It makes it easy to implement these kind of things Otherwise would take so much time 2 Write this app and then make sure it's exactly the same inside of the XML for that menu and so forth So component all that does all of that Out of this config file Simply with a Convention that relates to the actual front-end And that is as simple as that Ok so I think we have covered that Thoroughly enough And That will be all for this tutorial I will continue looking at more Concepts of the component And it's features Possibly it might be ideal for us to Stop here With the component And go look at setting up a custom admin View What setting up a site for you And yet I'm thinking you know if we go that route It's gonna take us on a very long Road so Do I deal with me let me sort of Dealt with some of this component features First And finish that And then as soon as we've finished it We'll jump into the custom very Nice area of your front-end development and custom admin development And then we will obviously be relating back to what we have discussed here As we go So I've now looked at the ceiling tab And try to cover as much of this area as I can I didn't talk much about my secret week This is a very advanced feature And You can know that what it really does if we have dummy data You're able to Exclude them Through this area so that if you have different versions You will through this MySQL tweak Be able to exclude certain information Which I realise it's a little bit advance and so for most cases people will just not use this It's only when you start having multiple versions of the same extension And you selling them at different pricing in Want to be able to From Within component daughter just export the different versions Then you start using this feature And I think we possibly deal with it with when we start looking at more advanced implementations Thank you for watching Who starred in the next run with scripts