 | This tutorial is no longer applicable for MODx Revolution SVN or beta-1, as modActions are no longer tied to contexts, but rather to namespaces. We will be releasing a new tutorial for those versions soon.
Also note in your lexicon, please use 'en' instead of 'english'. |
So, you've created your custom Doodles MODx component for Revolution. But you want to add a custom manager page or two to manage them. And you want to take advantage of ExtJS and all the other neat manager UI tools. Modules were 096's (Evolution's) answer, but Revolution does things differently. It's time to show the real power of the upgraded modx core and manager. Let's go deeper.
How Our Doodles Directory Structure Should Look
First off, let's reorganize some things and create some files. (This is not the final file list, but it's a start.) Now, if you're thinking, "Wow, that's a lot of files!" - don't worry. They're mostly all small. MODx Revolution works a lot more with smaller files to reduce load times, separate code from content and make finding portions of code easier. It also abstracts a lot more - tasks take a lot less code to do. So here's our starting structure: 
Note how we moved the model and lexicon into a "core" directory. This (a core dir) is required in Revolution to utilize custom manager functionality - it's nearly similar to how the default manager works (sort of). We also have a few new directories with some new terminology to tackle:
- controllers - These are the PHP files that load the page. Think of them as the PHP pre-loading script. Note: absolutely no database manipulation (besides reading) is done in these files, as a design principle.
- templates - These are the Smarty template files. They are no-PHP files that contain Smarty code. They're used primarily for loading content, visuals, and JavaScript code.
- includes - These are the PHP class files we'll create and use, and anything else we'd need that's PHP driven.
- model - Again, our model, moved to the core.
- connectors - These are the entry-points for AJAX calls. AJAX calls via ExtJS will point to these files, and provide an 'action' parameter that directs the connector to the proper processor. This way processors are never accessed directly, and stricter security and validation can be provided through the connectors.
- processors - These are the PHP files that handle manipulation and reading of the database. They are isolated from the rest of the script, and cannot be accessed directly.
So you might need to rearrange some of the files to match this model. Again, Revolution is very flexible, but if you want to use the custom manager page abilities, you have to match this directory structure.
Let's Get Started! Creating the Context
Okay. We're going to go create the custom modAction, modContext and modMenu objects that will build our custom pages. Go to MODx, and go to 'Tools -> Contexts'. Create a new context like so: 
This will create the manager context that the doodles UI (user interface) will operate in. Once it's created, right click on it and click 'Update Context'. We're going to add some settings. Click the 'Context Settings' tab, and create two new settings:
key: doodles.base_path
xtype: textfield
value: assets/snippets/doodles/
key: doodles.base_url
xtype: textfield
value: assets/snippets/doodles/
It should look like so when you're done: 
These will tell MODx to redirect controller/template/lexicon requests to the custom Doodles directory when loading Doodles-context based pages.
Creating the Actions and Menus
Okay, now go to Tools -> Actions, and let's create the actions and menus. Right-click on the 'doodles' context in the tree, and click 'Create Action Here'. Then put in the values for the first action: 
'Load headers' loads the common modx header/footer to the page, which we want. The language foci is the language file we want the page to auto-load for us.
And repeat this by right-clicking on the new action to create a subaction: 
Okay. Now click on the top-right tab in the main page, that says 'Top Menu'. We're going to create our top menu items, and link them to the modActions we just created. Right click on 'Site' (it doesn't matter where, really) and click 'Place Action Here'. You'll want to fill in the values like so: 
And again, right click the new menu item, and then 'Place Action Here': 
Success! Now you've created the basic structure and setup for the custom manager pages. We'll go into creating the actual code for the pages in the next article.
Creating Custom Manager Pages for a 3rd Party Component, Pt. I
