Cherry is a Twitter Bootstrap plugin for CakePHP
The master branch has the following requirements:
- CakePHP 2.2.0 or greater.
- PHP 5.3.0 or greater.
- Clone/Copy the files in this directory into
app/Plugin/Cherry. - Ensure the plugin is loaded in
app/Config/bootstrap.phpby callingCakePlugin::load('Cherry');. - Include the form helper in your
AppController.php:public $helpers = array('Form' => array('className' => 'Cherry.CherryForm', 'Html' => array('className' => 'Cherry.CherryHtml'),));
- Copy the
app/Plugin/Cherry/View/Layouts/default.ctpfile over your currentdefault.ctpfile to gain access to Bootstrap in your views. - Modify
default.ctpand any of your views to take advantage of Bootstrap's functionality.
You can replace Step 1 above with the following to add Cherry to your CakePHP project as a submodule:
$ cd /path/to/CakePHP/project/
$ git submodule add https://github.com/thisishuey/Cherry.git app/Plugin/Cherry
We have included Console Templates to allow you to easily bake a project and gain Bootstrap functionality throughout.
To utilize the Console Templates simply bake your project like usual but select Cherry when it asks you which template you would like to use.
The CherryFormHelper was built to take advantage of Bootstrap's form layouts. It will wrap form elements in the appropriate classes but passes on everything else to the default FormHelper.
To change a form from a regular CakePHP form to a Bootstrap form all you need to do is add 'cherry' => true to the FormHelper create method.
- For example:
<?php echo $this->Form->create('User', array('cherry' => true)); ?>
You can also utilize Bootstrap's build in form classes by passing them in the FormHelper create method instead.
- For example:
<?php echo $this->Form->create('User', array('cherry' => 'form-horizontal')); ?>
In most cases you will create form elements just like you would with CakePHP's default FormHelper, Cherry's FormHelper will take care of making the default elements compatible with Bootstrap.
The CherryHtmlHelper was built to take advantage of Bootstrap's element classes.
To add the class 'img-responsive' to images loaded with the CakePHP Image Helper all you need to do is add 'cherry' = true to the Image helper options array
- For example:
<?php echo $this->Html->image('image.jpg', array('cherry' => true)); ?>
There are three functions in the core.js file to help use Bootstrap modals:
- modal(args)
- alertModal(message)
- confirmModal(message, callback(confirmed))
The modal(args) function can be used to easily create a quick modal that will be added to the DOM on call and then destroyed when it is closed. The following args can be passed:
modalTitleis used to set the title of the modal, defaults to"The page at <domain> says:"to match javascripts default alert and confirm popups.modalBodyis used to set the body of the modal, defaults toundefined.modalIframecan be used to load an iframe into the modal, it will overwritemodalBodyif present.cancelTextcan be used to set the text of the cancel button, if it's set tofalsethe cancel button will not be shown, defaults tofalse.cancelClasscan be used to set the class of the cancel button using Bootstrap's built in button classes, defaults tobtn btn-default.cancelCallbackcan be used to pass in a callback function that is executed when the cancel button is pushed, defaults tofunction(confirmed) {};and it gets pass a confirmed boolean that will always be false, this is useful if you want to use the same function for both cancel and confirm and determine what to do inside the function itself, see confirmModal below.confirmTextcan be used to set the text of the confirm button, if it's set tofalsethe confirm button will not be shown, defaults tofalse.confirmClasscan be used to set the class of the confirm button using Bootstrap's built in button classes, defaults tobtn btn-success.confirmCallbackcan be used to pass in a callback function that is executed when the confirm button is pushed, defaults tofunction(confirmed) {};and it gets pass a confirmed boolean that will always be true, this is useful if you want to use the same function for both cancel and confirm and determine what to do inside the function itself, see confirmModal below.
The alertModal(message) function can be used to create a quick alert modal that will be added to the DOM on call and then destroyed when it is closed. The follwing args can be passed:
messagethis is the message you would like to display in the modal, defaults toundefined.
The alertModal(message) function also goes ahead and sets confirmText = 'OK' and can also be passed an object instead of message to take advantage of any of the modal args.
The confirmModal(message, callback) function can be used to create a quick confirm modal that will be added to the DOM on call and then destroyed when it is closed. The following args can be passed:
messagethis is the message that you would like to display in the modal, defaults toundefined.callbackthis is the callback that you would like to use on confirmation. This callback is passed to bothcancelCallbackandconfirmCallbackand is passed back aconfirmedargument that can be used to determine what to do in the function.
The confirmModal(message, callback) function also goes ahead and sets cancelText = 'Cancel' and confirmText = 'OK' and can also be passed an object instead of message to take advantage of any of the modal args.
The confirmModal(message, callback) is being used by the CherryFormHelper for postLink confirmations.
- Clean up postLink and delete links to allow for more than just 'Delete' confirmation as postLink could be used in many different places
- Override HtmlHelper to give some advanced functionality for images and confirmation links, etc.
- Add MenuHelper to help create dynamic menus or add menus to the HtmlHelper