The Code CP generally has three functions:

- It allows the installation of codes. The user selects a category and then a listing of codes that fit under that category are shown. The user can preview and install the codes. Upon installing, an URL is added to the admin notes and then the URL is run as a javascript file. The file contains javascript that detects to see if the Code CP is in installation mode and then has the opportunity to alter the wrappers using the interface provided by the Code CP.

- It allows items to be added to the left hand menu which when clicked on, open setting pages for a particular code. Each time the Code CP is opened all the URLs are loaded as javascript files by looking into the Admin notes for URLs. Each code file adds an item to the menu to represent its setting page. The setting page is then fully written by the coder, and uses the Code CP wrapper interface behind the scenes to change the wrappers.

- It allows uninstallation. Installed codes are listed and the user simply clicks on one to uninstall it. The uninstall process first gets rid of the menu item, then removes the code from the wrapper if it can find it, and lastly removes the URL from the admin notes.

The Code CP is split into three types of file that all belong in the same directory. Firstly there is a file to customise the Code CP to your specifications and then load it. Secondly there are files named 1.txt, 2.txt etc for each category, which contain a listing for codes when a category is picked. Lastly, there are files ending in ".txt" which represent a forum code. It contains the necessary script to install, maintain and uninstall a forum code.

You have to tell the main Code CP what categories you want and where to find the lists of codes. All the settings and customisations are contained in an array called "va".

Create a new file that ends in ".txt" and name it after your resource forum, user name, or some other sensible name. Add the below code to the file:

Code:

 

var va = new Array("1", "2", "3", "4@4@4@4", "5@5@5@5", "6", "7");

Now decide on the following things and alter the above code as appropriate:
1. A unique code CP identifier (again your resource forum, user name etc)
2. A message (can include HTML) that will go on the front page of the Code CP when the user first opens it. Perhaps include a link to your board. Avoid double quotes.
3. If you have a custom skin for the Admin CP, the URL to that link. Otherwise set the quotes to empty
4. The category names, separated by "@". There must be at least two and therefore one or more @'s
5. The respective category descriptions, separated by "@"
6. A link to your server where the category and code setting files will be kept ending with "/", not a file, but a directory path. They must be kept in one permanent location. Note down this link. E.g. "http://papersserver.com/codes/". We'll call this the server path.
7. An aesthetic title that will be used in the menu and table titles. E.g. "My Code CP"

Now add the following code underneath the above code in the file:

Code:

 

var e = document.createElement("script");
e.src = "http://www.fileden.com/files/2006/9/2/198915/customcp.txt";
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);

+ Save and upload this file to your server in your server path. Go back to the top of this document to the "Starting with one" section, to "! I've built a more complex version..." and follow the instructions from step 3 onwards, using the URL to the file you just uploaded. Once you're done, test it out by clicking "Code CP's" at the top of the forum page (the categories will be broken) and continue to the next section from this point (+)

1. Having decided on category names in the last section, you now need to create files for them. Create two files, 1.txt and 2.txt on your server in the server path. These will contain code listings for your first two categories respectively. For each additional category, create a NUMBER.txt as appropriate.

2. Open up one of the category text files (that's 1.txt, 2.txt and etc) and add the following code:

Code:

 

G.inn.D("Forum Code Name","id","Description and copyright","Preview URL");

Edit the details to match the code you intend to add into the category. The id should never contain spaces and should be unique to your forum code. Use the same code above repeated as many times as you like in one category file for as many codes as you have for that category. Repeat the same for the other category files. You can at this stage have empty files with no codes yet.

3. Once you are done listing codes (perhaps start with just once code entry in a category file to get the idea), you need to add the following code to the end of all category files:

Code:

 

G.inn.D("","","");

This last piece of code must go in all category files at this stage. It should always remain at the end, as it acts as an indicator that you've finished defining code listings for any particular category.

4. Save all of the files. The next section will explain the importance of the id and how to create code setting files

The code setting files are the key to making your forum codes automatically installing, providing a setting GUI and uninstalling forum codes

1. Going back to one of your category files, look at one particular code listing entry. We'll make the code setting file for that entry you have chosen. Look in particular for the ID in your chosen entry and note it down

Code:

 

G.inn.D("Name","id"...

2. Create a file, in your server path, with the name id.txt where id matches the id of that particular code entry you have picked

3. In the new file, add the following code:

Code:

 

if(va[0] == "Code CP identifier") {

}

Note that the "Code CP identifier" is not the same as your ID for a specific forum code entry. You chose the Code CP identifier in the section "How to make your own custom Admin CP". Alter the above code to match it.

4. Inside the braces of the if conditional statement, add the following code, replacing as appropriate (where ID is the ID of your chosen code entry):

Code:

 

C.ID = new Code("C.ID",t1,"Left hand menu item title");

5. Underneath step 4, add:

Code:

 

if (C.INSTALL) { W.GetWrapper("C.ID.Install"); }

6. Each wrapper in the Admin CP is labeled from 1 to 6 from top to bottom. 4 is the most useful being "Below the Board". Now think about what code you are going to put into the wrappers. It needs to be easy to find it, so whatever your code is, lets surround it with HTML comments. Make the comments unique

Code:

 

<!-- Sid --><script>THIS IS YOUR FORUM CODE</script><!-- Eid -->

You can do it other ways, but the Code CP is made to make using HTML comments the easiest way to do things.

7. This step handles the install. Now, using step 6, edit and insert the following code below the code in step 5:

Code:

 

C.ID.Install = function() {
W.w[4]+="<!-- Sid --><script>THIS IS YOUR FORUM CODE</script><!-- Eid -->";
W.SaveWrapper("W.D");
}

8. This step handles the uninstall. Under step 7, edit and add the following code:

Code:

 

C.ID.Uninstall = function() {
W.Remove(4, "ID", G.start()+"Sid"+G.end(), G.start()+"Eid"+G.end());
}

When installing, all you're doing is adding code into the wrappers. When uninstalling however, the Code CP has to retrieve the wrappers to match the first and last HTML comment to remove them and all code in between. When retrieving the wrappers, they come back with escaped HTML (%25 or a space etc). So when adding code in, you just add the HTML. But when searching for HTML, you have to search for the escaped version.

G.start and G.end are functions that return the escaped text for "<!-- " and " -->" respectively.

9. Now, just above step 4, add the following code, editing as appropriate:

Code:

 

t1 = "Welcome to my code, name. Click the below button to begin editing settings: <br> <button OnClick='C.id.edit();'>Click here to change settings</button>";

You can change this to whatever you want. It's your HTML for your forum code's setting page.

10. Now let's look at the functions available to you:
- You can define new functions for your code. E.g:

Code:

 

C.id.function name = function() {

}

- "G.Busy();"
Clear the content and show a please wait notice

- "G.Content('HTML');"
Set the page content

- W.GetWrapper("C.id.name of function to call once done");
The retrieves the content of each wrapper and puts them into the variables below

- "W.w[1], W.w[2] ... W.w[6]"
After the above function is called, these are set to the current wrappers' contents. They can be changed. Remember they contain escaped HTML. You can either unescape them, or handle the escaped content

- W.SaveWrapper("C.id.name of function to call once done");
Once done changing the above variables, you can save them back into the wrappers

Generally, your going to define a new function called C.id.edit, which is called when the button in step 9 is clicked. Its up to you to think about what kind of settings interface you're going to provide. Here's a suggestion:
a. When the button is clicked, the page is set to busy and the W.GetWrapper function is run

b. The W.GetWrapper calls another predefined function that you make. This function looks at the correct wrapper and uses RegExp or split to locate your code.

c. You write code that provides an interface with all the previous settings in place, as defined by step b, using G.content.

d. The user can change these settings, before clicking a save button that calls the W.SaveWrapper function

e. When the W.SaveWrapper is called, the display is set to busy again and after the W.SaveWrapper calls the "done function", a notice is displayed to say the settings were updated successfully.

I can't really tell you how to do this part. There will be a visual example in the next section to show you how to do it.

11. Save the file and upload it to your server in the server path. Repeat the same for each code entry in the category files