011 Component Scripts

COMPONENT SCRIPTS

Hi now next we be looking at the scripts tab. Here is an area where you most probably add a lot of custom scripting. This area is focused on giving you area an interface to add custom scripting to your component in a global way. You can have custom scripting per admin back end view. 00:00:28 You can also do that within the global scope with regards to many certain values. The one thing that is nice to have here is, you can add create user helper method to the component.

Create User Helper Method

Now the user helper method is simply code. If you do not know how to write php this method will be of no use to you at all. 00:00:54 If you do, then this method will come in very handy. Let me illustrate that to you. If you click this yes, I have a component in which I've already implemented this feature, and it's called the cost-benefit projection tool. If you click on companies, you can actually click 'new'. 00:01:19 It has an area for you to create a company.

Example Helper Method(Create User)

Ideally you would connect that company to a user in the system, if you don't add that company to a user. Because a user can have multiple companies. That's why if you click on this tab(select user), you could select the user. But if you haven't selected a user and you've entered an email address and a name 00:01:49 and the needed information, then once you click save, close or save, the system will actually create a user for you. Automatically email the user details to that user. That is because of that specific helper class that I added. Clicking helper class, 00:02:14 it doesn't do it on its own you need to write the code for it. Let me show you where I did it in the controller. You have an area if we open up company, you have an area called: PostsaveHook. 00:02:38

Remember when we'd looking at the admin views we could target this area. That's exactly what I did. Let me show you. I'm in the admin view for company. And if I go to PHP you would see that I have some Ajax there. And then I have an area which is the postsavehook method. 00:03:03 In the postsavehook method, I'm basically checking some things, some values. When I realized that this user does not exist, if the user does not exist, I'm doing a check here. Then I'm using the create user. 00:03:41 I've spoken about this placeholder convention before. Here you are using the brackets convention not the # one. [Component]Helper and this will be replaced with the components code name. It gets the helper class: create_user. In the helper class of this component, 00:04:13 if I close this down, I go to the helper. I open the helper class. That is the name(costbenefitprojection). It is the components name. And then it's called helper. In helper class there is a feature called create_user. 00:04:39 It gets an array in it, and that array has some values which we will be using, like password 1, password 2. And it will set the password. I'm not going to explain this code. Basically it just shows you where the function is. The function was added to the components helper class, in that script, I'm simply calling that function after having build the user. I set the array is name and the email is that(validData). The function if there is no password set it will set a random password. Again use another method which also is part of the helper class. We exported it with all helper classes is random 00:05:28 method. We can get a random string. That is creating a user and then it sets up the password and then it gets the array ready. It gets a model. The model, I got it from there, getmodel. Again we are using a component builder custom method which gets the specific model from the system. And then fires the register method upon this dataset. And then updates 00:06:11 the parameters for the system regarding this new user. Sends the email. And then returns the ID. We are looking for an ID. We want to have the ID. 00:06:41 If you don't have the ID, it will send a message to the user. And if we have the ID, it will store it into that database to connect that item to that user automatically and then click save. That is custom scripting. 00:06:59

Add UiKit

This little switch is just adding that Method to your helper class. That's all it does. Where as this switch adds the Uikit library to your media folder. As well as integrates it dynamically wherever you use 00:07:19 the Uikit class names. You won't need to write that in any custom way, it automatically adds it. The same goes with FooTable.

Add Global CSS To Admin Back End

This CSS is global CSS for all the back end views, entire back end. If you want to add CSS that would target the whole back end, then you do it here.

Add Custom PhP Helper Admin Class

This is a place for you to add your own custom scripting to the helper_admin Class. 00:07:47 As you can see I have a whole custom scripting here for Sermon distributor. For the admin area, as well as an event.

Add Global Admin Event

I spoke about this event concept briefly before, but what we want to achieve with the event is basically on every page, 00:08:09 if you look at this sermon distributor, the back end part of it, it has a file which is the in main file which Joomla calls first. Calls sermon distributor, and in that file it basically triggers that global admin event. The global admin event is nothing else than a function inside of your helper function. So it always triggers it, 00:08:40 if you add that switch. Then it passes the document object. The document object is being built up here. I'm just passing it over to the global event. We don't need to clear it there. If I was to open the helper class, which we have here, and scroll to the top, it says here 00:09:08 loaddropboxajax. This again it's just another function. I wrote that function that you can add whatever functions you want to run globally every time a page opens.

????

Now that is a way to run it like a Chronicle job On the front and the back end of the component If you have things that you want to be done chronically This feature is really targeted at doing that So 00:09:35 Here we are loading the Drop Box Ajax So if we go back to the component You see that I am Just adding That script first I just ticked Global admin event yes And I added that script that's all they added And that script was taken and placed inside of the global event The trigger This trigger is set by component builder itself you don't need to write that 00:10:03 It will insert this trigger itself just because you clicked yes You need to then just Add the script that must run inside of the global event Wich I decided to be another function And then this function Which I want to run I added To the admin View You see here at the admin helper class 00:10:29 I added that function here So I basically just used That name And called it "self" because we inside of that class right so that's how you call Static class Method And a past the same information because In my method I'm adding JavaScript to the dorm right So to the document object so I want that document and then I said add script declaration 00:10:59 And simply that means on every page of this component in the back end it adds this little script which then calls By Ajax Which I explained previously And it starts checking the Dropbox listing automatically So that's an automatic feature I wanted to add to my component And this is way that I did it And then I felt that I wanna add it that you can do this in other components and that's why I added this event switch Ok This event switch here Ok and then this same goes for the site area 00:11:37 I also added that same class You might ask why I have different helper classes for the front and the back Well it's about Pretty belt security I suppose and permissions There are things that I wanted to in the back end which I'm not asking that much questions Where on the front I might be more Protective I would suppose And So for that reason and implementation also is often different in the front then in the back so that's why we have to Different files helpers site class 00:12:09 And the Helper admin class And you can add custom scripting as you can see I added that same script to the front And I also add it A site Event Which also trigger is that same script Now you might say well if everybody Triggers The Script Then it's gonna be running multiple times Well 00:12:32 That's exactly part of what I did I actually added A feature In the Ajax call That logs weather it's already Active And if it's Active it just ignores that call So Basically it has a controller over Whether it should run or not Meaning that if it needs to run Because it even has a timer you see you can set 00:12:56 For the Sermon distributor you can set how often you want Dropbox links to be updated Every day every 2 days And so this Script If it checks wants to update and it's not time it just dies Doesn't do anything so it's very light since it's Ajax you don't the user himself don't Even notice a delay in his page so the page opens as fast as it always do and then fire that Ajax call to the server Which starts this whole process on the server So that's primarily what this is all about obviously you need to know programming and you need to know how to secure all that And I'm not gonna try and explain that to you now I'm just saying that this is all possible inside of component builder Simply through these custom areas you can also add a SQL dump 00:13:50 Instead of adding it to the actual views you can export all the views and add them here and it will be actually added to the same file And so don't do it twice but this is another area to add A SQL dump file And Then We have this nice feature called dashboard methods You see Let me show you what I've done with it Again just that you know all this data that I'm showing you is dummy 00:14:23 Not related Just me testing it So I wanted to add this Usage statistics to the component so you could see Which country has done what When in what area So So I needed to take a lot of different database tables and calculate used by certain ways in and I wanted to have that on the dashboard The dashboard really had always icons and so I didn't want it 00:14:53 Add another custom view wish I could have done custom admin view I wanted it simply right there at the moment of the page load And so we added that feature Component builder and we called it We call that dashboard methods Now let me go to one where I actually implementing it so I could Spend more time in explaining unless on typing Ok so here we go Basically I created a 00:15:26 Method called get usage data it's a public function Public method And inside it I added my script And obviously inside of this script I'm calling other methods which I made it made protected so the script that Must be called from The dashboard tab I'll show you that at the moment You said that up here So here is the tab and it's HTML so we called the tab usage statistics and a header we made Table 00:16:01 And here is the HTML Ok which we are using and in the HTML You see that I have PHP and the way we do that is with that convention of Open bracket ? PHP and Echo and then closing it again there so basically I'm checking whether the usage data is there Now how do I know that I should target usage this usage data and then items Well this is a convention this area there And the way that that Convention works Is 00:16:46 By that one there So usage data Relates to Usage data So the moment you add to word get This word get in front of a function it will be Added to a Global the result of that Get will be added to this And without the Get Name so that the convention 00:17:15 The convention is you could've called that Get the man on the moon Then this would be Man on the Moon This and obviously all lowercase Man on the Moon So That will be dropped And this is gonna be used Lowercase as the this So 00:17:37 That's the convention I know it might not be that obvious but it works So your other functions If they are protected Shouldn't have the word get in it At the moment it's set to Set that as that one is set And then this one is Visit check This one is set companies and set countries 00:18:03 So you can see I could add a lot of PHP in here And all these PHP together Basically gets the data That we want on the page And when I get the data I placed it In what is seen as the item Ok Oh you know what let me see set statistics return this statistics Ok so I'm returning a field here or a a method value 00:18:43 And this method value is being populated in this sub functions And in one of them It is adding Over here The name items as a a Pointer So it becomes an object Well it is an object in fact I Think I set it is an object up here there we go And 00:19:09 There I look through the companies and as I look through them I'm busy totalling and adding and going on I guess so I'm not going explain the code itself But basically this is getting returned And because he's an object If I look here I'm able to Target items as an object And then if it's exist And if it's set I start looping through items and certain places I'm using totals and Different values so that is just adding some of that data to the page 00:19:45 And this area here Now I could have made this much simpler right so maybe not look that intense to you but this could have been a simple Class in fact you could have let this out completely and just put a Comment so you could have done this Because it's gonna scream at you for you know this is if you see is not compulsory so you can set is Not needed and then in here you could just do HTML so if you just wanna give information To the user about who made the component maybe or some would like to run a rss feed here you could have done it right here Ok I'm just showing you that you can reach into PHP here and that the PHP that you reach in has the convention 00:20:34 Of dropping the get and then using that front area usage data To place information in which you can parse in your HTML here that you would do and any other component View Ok so that is just quickly looking at the script area of a component I realize there's so much more to say but I really can't Elaborate too much on this it since it requires skill in in PHP It's something that I think will only become very useful if you are a developer as Developed a few components And can then see how you can easily add custom scripting to his component through this Methods ok well next up will look at the ReadMe 00:21:27 And maybe their FTP server concepts. Thanks for watching