You will learn how to create and use your own HTML page outputs using CB and get a solid understanding of CB's built-in output for customizations.
For this article you must be familiar with the MVC development pattern. If you're not, best learn the basics of MVC using proper literature or resources on the web before going further.
A KenedoView is part of Kenedo's MVC pattern.
KenedoViews have two specific distinction from a classic MVC View:
View variables are not prepared in the controller, but in the View's prepareTemplateVars method.
KenedoViews are responsible for choosing CSS and JavaScript files involved in the rendering of a page.
Example of rendering a view:
// Gets you an instance of the View
$view = KenedoView::getView('ConfigboxViewCart');
// Returns the view's output
$output = $view->getHtml();
|
Each view has a unique name
Each view has a view folder named after the view's name, containing certain files
These view folders are in {application folder}/views
Custom view folders are in {customization folder}/views
Each view folder has a PHP file named view.html.php containing a view class (ConfigboxView{view name} extending KenedoView)
Each view folder has a sub folder called 'tmpl' with a template file
Example
Assume a view called 'example' in the customization folder:
{customization folder}/views/example/view.html.php
{customization folder}/views/example/tmpl/default.php
Recommended way is to override the method KenedoView::prepareTemplateVars() and setting values to class variables.
Example
Assume a view called 'example'. File location {customization folder}/views/example/view.html.php
class ConfigboxViewExample extends KenedoView {
/**
* @var string[]
*/
var $dataForMyTemplate;
function prepareTemplateVars() {
$this->dataForMyTemplate = array('so', 'much', 'to', 'show');
}
} |
(template file in {customization folder}/views/example/tmpl/default.php)
/** @var ConfigboxViewExample $this */ var_dump($this->dataForMyTemplate); |
At this point you can use your view to output something to page. Best practice is to create a custom controller as well, but you skip that
On Joomla using a controller and direct URL:
First you create a controller for that view. A controller takes in query string variables and handles the requested task.
Each controller class extends KenedoController and must implement 4 abstract methods (dealing with the default view and model it uses).
function getDefaultModel(): This returns NULL if the controller doesn't need any model or a KenedoModel (or any object really) that deals with data loading or manipulation.
function getDefaultView(): This returns NULL in case the controller doesn't deal with views or the KenedoView you want to use. You get your KenedoView object using the factory method KenedoView::getView(), supplying the class name of your view as parameter.
function getDefaultViewList(): This pertains to backend views for a list of KenedoModel data records, see upcoming articles on how to use those. Use NULL for our example
function getDefaultViewForm(): Just as above, but for edit forms to KenedoModel data records.
Location of controller files: {customization folder}/controllers/{controller name}.php (in our example 'example.php')
class ConfigboxControllerExample extends KenedoController {
/**
* @return NULL
*/
protected function getDefaultModel() {
return NULL;
}
/**
* @return ConfigboxViewExample
*/
protected function getDefaultView() {
return KenedoView::getView('ConfigboxViewExample');
}
/**
* @return NULL
*/
protected function getDefaultViewList() {
return NULL;
}
/**
* @return NULL
*/
protected function getDefaultViewForm() {
return NULL;
}
}
|
(controller file in {customization folder}/controllers/example.php)
Once you have this controller file in place, use your browser or HTTP client with this URL
index.php?option=com_configbox&controller=example&task=display |
On Joomla using a menu item
Once you have your view files in place, go to Joomla's menu manager and add a menu item, as 'menu item type' selectConfigbox → Custom and then enter the View Name (in our example, use 'example') in the menu item's form. Then you navigate to the menu item's URL and you will see the view's output.
On Wordpress using a short code handler
This part assumes you know how to create a short code handler. Be sure to refer to Wordpress literature or web resources to take advantage of this
In the short code handler you get an instance of your view and return the return value of the view's getHtml() function.
$view = KenedoView::getView('ConfigboxViewExample');
return $view->getHtml(); |
KenedoViews control which style sheets the platform will load. Mind that CB loads a stylesheet for customizations on any page that shows a KenedoView - depending on your use-case you can add another.
Determining which stylesheets to load is up to the KenedoViews rendered on the page. To control this, you override the method getStyleSheetUrls(). This method returns the full URLs to the stylesheets needed for this view (and this view only).
Example for having a stylesheet from the customization assets folder loaded:
class ConfigboxControllerExample extends KenedoController {
...
/**
* @return string[] Array of full URLs to the stylesheets you need loaded
*/
function getStyleSheetUrls() {
$urls = parent::getStyleSheetUrls();
$urls[] = KenedoPlatform::p()->getUrlCustomizationAssets().'/css/custom_stylesheet.css';
return $urls;
}
...
} |
Notes:
Always return the parent function's URLs along with your URLs
No need to worry about duplications (e.g. in case of multiple views rendered). The framework filters out duplicates.
If you use minified CSS, put the original and minified version on the site and return the non-minified version of the stylesheet. The framework will look for a .min.css file and use it instead.
See about cache invalidation for these stylesheets.
Use KenedoPlatform::p()->getUrlCustomizationAssets() to get the URL to the customization assets folder.
In case a separate stylesheet is overkill for your use-case, use the custom.css stylesheet instead.
KenedoView’s also control which JS to load. It is done by using AMD modules, managed by require.js. Learn how to take advantage of this in this article.