Libraries: Master: Adding New Components

To add new components you have to follow the following steps:

First of all think about a key and a namespace for your component.

• Root namespaces are at this time:
  • frameworks: Basic CSS and JS Libraries.
  • polyfills: Components for legacy browser support.
  • gui-libraries: Components displaying GUI-Widgets or animate GUI-Elements. This namespace will be further divided into logical groups like "sliders", "grids" etc.
• Namespaces can be divided into further subnamespaces. Every division in a namespace will be separated by a point.

Now create a new subdirectory hierarchy within the folder components according to your namespace hierarchy.

• Name the last folder like the key of your component you want add followed by a dash and a version number. Using a version number enable the system to use long term caching while updating correctly new versions of the component.
• Within this folder you are free to place assets however you want. You can create subfolders or place all into the root of this folder. Put here only the minimum you need, and only minified versions of the library if possible.

Create a new subdirectory hierarchy within the folder codecoupler/views/components.

• Name the last folder like the key of your component you want to add, without any version information.
• Place in there four files including the HTML-code needed to for your component.
• You can use the folder codecoupler/views/components/_empty_template as template to copy from.
• The files have the following meanings and have to be named as follows:
  • head_init: HTML-Code to include into the start of the head.
  • head_finish: HTML-Code to include before the end of the head.
  • body_init: HTML-Code to include into the start of the body.
  • body_finish: HTML-Code to include before the end of the body.
• The links to the javascript files of the component should be placed into body_finish. This should done to display the page faster to the user. Components using javascript using javascript libraries like jQuery can only be placed there, because jQuery will be loaded at the end of the body first.

Add in the file application/config/components.php two configuration variables as follows:

• $config['master_components_config']['NAME_OF_YOUR_COMPONENT']['depends']: Set here a string or an array of strings, if your component depends other components. Otherwise set it to NULL. The strings are the names of the components your component depend on. Your component will loaded then after the components noted here and the depending components will be enabled automatically.
• $config['master_components_config']['NAME_OF_YOUR_COMPONENT']['after']: Set here a string or an array of strings, if your component should be loaded after other components, if they are enabled. Otherwise set it to NULL. The strings are the names of the components your component should be loaded after.

Add in the file application/config/master.php two configuration variables as follows:

• $config['master_components']['NAME_OF_YOUR_COMPONENT']['enabled']: Set this to TRUE, if you want to be your component enabled by default. Otherwise set it to FALSE.
• $config['master_components']['NAME_OF_YOUR_COMPONENT']['config']: Set here an assoziative array of objects if you want to be your component customizable. Otherwise set it to NULL. You can access the values of the keys in your views created at the step before. Just reference to it like a normal variable (Example: The value of theme within the configuration-array array('theme'=>'dark') can be accessed with $theme).