joomla/Component-Builder
joomla
/
Component-Builder
38
20
Fork 11
Code Issues 55 Pull Requests Projects 3 Releases Wiki Activity

Updated 007 Admin Views (markdown)

Amigo 2019-05-31 12:31:25 +02:00
parent 047fddcda7
commit bf6d6d5278
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
007-Admin-Views.md

@ -109,25 +109,28 @@ We had looked at permissions, tabs, fields, conditions, and linked views. The ne
**Custom CSS View**
The next tab is a place for you to add custom CSS that is related to your specific view. You can add CSS here, which is for the edit view or the single view; or you can add CSS here, which is for the list view or the multiple views (plural). (See video.) Now it will be placed in its prospective places. The same goes with the JavaScript.
The next tab is a place for you to add custom CSS that is related to your specific view. You can add CSS here, which is for the edit view or the single view; or you can add CSS here, which is for the list view or the multiple views (plural). (See video.) Now it will be placed in its prospective places. The same goes with the JavaScript, except that you'd have four places to target instead of one.
**Custom Javascript View**
If you remember when we looked at the way that we are [01:00:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m51s) building the JavaScript there is a file, a JavaScript file, which just has JavaScript for the view and then there is the footer area which is under the HTML and PHP at the end of the file there is a whole area which is just JavaScript at the footer of the file. And so we decided to add the option of adding JavaScript to the file or JavaScript to the footer. (The view file or the view footer or views file or views footer). So it just gives you the option of targeting. If you know list and this script can run as a function and I just wanted to be able to be on the page. Then you add it to the file and then if you want to use the function you can add it to the footer. That it's up to you.
When we looked at the way that we are building the JavaScript, you'd remember that there was a JavaScript file, which has JavaScript for the view. [01:00:51](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h00m51s) There is also the footer area which is under the HTML and PHP at the end of the file which is just JavaScript. We decided to add the option of adding JavaScript to the file or to the footer. It just gives you the option of targeting. If you know list this script can run as a function. You add it to the file and, if you want to use the function, you can add it to the footer.
**Custom PhP - Adding AJAX for Controller - Model**
**Adding AJAX Via the Controller and Method Implementation**
Then there is a PHP area and here you have the option of adding JavaScript to your editing view [01:01:55](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m55s) primarily. If we look at editing views, the moment you click on add JavaScript, it opens a tab and now the way that we want to implement ajax is primarily via the controller and method implementation. So if I explain that to you the component has a controller called ajax.json.php, you can open that. Then it has a model we call it ajax. So you have a controller and you have a model. Now the controller is like the gatekeeper. He first does a few checks and balances to ensure that the data is correct that that the token is right that if you have set this to be [01:02:59](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m59s) validating whether he is a user, then it also checks that there's a user ID. If you have set it that it doesn't require them to be a user it basically would drop off this validation. I will show you that in a moment so that you can follow me.
There is a php area where you have the option of adding JavaScript to your editing view primarily. [01:01:55](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h01m55s) Looking at editing views, the moment you click on 'Add JavaScript,' it opens a tab. The way that we want to implement AJAX is via the controller and method implementation. The component has a controller called ajax.json.php which has a model called ajax. So you have a controller and a model. The controller is like the gatekeeper. It does a few checks and balances to ensure that the data is correct and the token is right. If you had set this to validate whether he is a user or not, it also checks for a user ID. [01:02:59](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h02m59s) If you set it that not to require him to be a user, it would drop off this validation.
There is a controller area and then there is some model area. The model is basically a place where you can write a method which is queried from the controller. So you can see in the controller it basically gets the ajax model, and then it is querying a method in that model called Dropbox. Here we are querying the Dropbox method and it's getting the view name. I'm not [01:04:03](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m03s) using this variable but it is here and I possibly will use it later if it becomes necessary so I'm basically just activating this method to run and when this method runs it triggers some global methods to run and on the return of that value it triggers another local method so again I'm not trying to teach you php here. All I want to show you is that this part of the code was custom written.
There is a controller area and a model area. The model is a place where you can write a method which is queried from the controller. You can see in the controller that it gets the Ajax model, and then queries a method in that model called Dropbox. Here we are querying the Dropbox method; it's getting the view name. [01:04:03](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h04m03s) I'm activating this method to run, and when it runs it triggers some global methods to run. On the return of that value it triggers another local method. So you can see that this part of the code was custom written. If we go back to our component you'd see that code there.
If we go back to our component you'd see that there is that code. So when you click on ajax you add that name basically writing a method make sure that it's set to public and your write your method in here and in the ajax input, you would say the task name is check dropbox listing. The values I want to pass it is view and [01:05:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m07s) type. And both of them are integers and it needs to run the view, needs to run a dropbox method. And the type needs to run an update dropbox. And both of them should check whether it is a user. So only users can fire these back end methods and the you can see that you have control to tick that. The filters are the same as with any field that you can select. [01:05:45](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) And so integer here would be fine and if there's no value you set null. This task name is what you be using in your JavaScript.
When you click on Ajax, you add the name thereby writing your method. (Make sure that it's set to public.) In the Ajax input you'd set the task name as checkDropboxlisting; the values as view and type; it should run a dropbox and update dropbox method; and the user check are on 'yes' for both so that only users can fire these back end methods. (See video.) [01:05:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m07s) The filters are the same as with any field that you can select. If there is no value, you set default to null. The task name that you'd be using in your JavaScript. [01:05:45](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h05m45s) The method name is set here; it should correspond to the method that you set up in your php Ajax method. [01:06:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m07s) This is the method in which you model the data, get the data, structure the data, and give it back to the Ajax call. You return the data inside of this method.
However, in your JavaScript you will be using the task name to get to the system. [01:06:29](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m29s)
In sermondistributor, which is the component to which that view belongs, there is a place called 'Scripts.' I have added a feature called chronic global events. [01:07:23](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m23s) Global events, or the way I am implementing it, is an event that should run every time a page in the system opens. The way I target it is by saying loadDropboxAjax; it is a global event and it needs to do that. (See video.) [01:07:50](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m50s) The Dropbox Ajax is set up in the helper class. I have a helper class which is called loadDropboxAjax which gets the document object. [01:08:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m11s) It takes the document objec and adds a script declaration to it. Here is the JavaScript that it is adding. (See video.) There it is using checkDropboxListing as the task. So it's targeting the Ajax controller and asking for checkDropboxListing as the task. It's passing to it a token and a view name. [01:08:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m32s) We would like to use that view ID later to log from which area this automated feature gets triggered. [01:08:52](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m52s) There is jQuery which only fires after the page is loaded. At the moment it's just adding a 3 in there to trigger the method. [01:09:10](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m10s) That is how this script ends up on the page. [01:09:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m32s)
This is where this php script is going to be used. (See video.) I added the Ajax controller concepts here, but the actual JavaScript that fires off all this is set to the global event which means that every time a back end area is opened in this component, it loads that JavaScript to the view. [01:10:00](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m00s) JavaScript then executes an Ajax request which starts updating the Dropbox listing. Sermondistributor is able to link to media inside of a shared Dropbox folder. This whole method here that we looking at passes that Dropbox folder every so often to make sure that it's up to date. [01:10:28](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m28s) That's what it's all about.
So I first wanted to show you the PhP side and then the task name itself. Let's just make sure I do not miscommunicate here. The method name is set here and that should correspond [01:06:07](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m07s) to the method that you set up in your php Ajax method. Which is possibly the method in which you model the data, get the data, structure the data, and give it back to the Ajax call. So you return the data inside of this method, but in your JavaScript you will be using the task name to [01:06:29](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h06m29s) get to the system. So if we go to the JavaScript, close out, go JavaScript. It seems I used the JavaScript example which is going to get way ahead of us but since we started let me not leave you in mid air. So I have to close out here. [01:07:00](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m00s)
In sermon distributor which is the component to which that view belongs is a place called scripts and I have added a feature which is called chronic global [01:07:23](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m23s) events. So I have added a feature to add global events. Now global events or the way I am implementing it, is simply an event that should run every time a page opens. Anytime any page in the system opens, I wanted it to run the global event. Now the way I target it is, I say load Dropbox Ajax [01:07:50](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h07m50s) is a global event and it needs to do that. And the Dropbox Ajax is basically set up in the helper class. So I have a helper class which is called load Dropbox Ajax and it gets the document object. [01:08:11](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m11s) It takes the document object it adds a script declaration to it and here is the JavaScript that it is adding. And you see, in that, it is using check Dropbox listing as the task. So it's targeting the ajax [01:08:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m32s) controller and asking for check Dropbox listing as the task and it's passing to it a token and a view name. So possibly we would like to use that view ID later to log from which area this automated [01:08:52](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h08m52s) feature mostly gets triggered. I'm not doing that as yet so this is just what the script will do. So there is jQuery which only fires of after the page is loaded. And at the moment it's just adding a dummy 3 in there to just trig - List Footerger the method. [01:09:10](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m10s)
And so that is really how this script ends up on the page. I'm sorry that I used that as an example I realise it's a little bit ahead of ourselves, but nonetheless I want to not leave it at a loose end. So I am redoing it actually for you. [01:09:32](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h09m32s) That is where this php script are going to be used. So since I need to add this somewhere I just selected a view to advantage it to this sermon view. And I added the ajax controller concepts here, but the actual JavaScript that fires off all this, is set to the global event and that means every time a back end area is opened in this component, [01:10:00](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m00s) it loads that JavaScript to the view. And JavaScript executes a ajax request which starts updating the Dropbox listing. I'm not going explain all of that Dropbox listing to you now, it's a quite an advance concept but it's basically sermon distributor that is able to link to a media inside of a shared Dropbox folder. And this whole method here that we looking at [01:10:28](https://www.youtube.com/watch?v=CdSKSCTzmRA&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=01h10m28s) parses that Dropbox folder every so often to make sure that it's to date. That's what it's all about. So that is just looking at adding ajax.
**Get Item - Items Joomla API Method**