Download the PHP package acplo/acploui without Composer

AcploUi

Introduction

This module provides a shortcut to several UI resources from some of the best front frameworks. I will add more libraries with time and add more resources to the current ones.

• Jquery: 2.1.3 jquery.com
• Bootstrap: 3.3.4 getbootstrap.com
• Font Awesome: 4.3.0 fortawesome.github.io
• Chosen: 1.4.1 http://harvesthq.github.io/chosen/
• MomentJs: 2.9.0 http://momentjs.com

The ideia is to facilitate the front development. You do not need to worry about download individually each library, control their versions, so on. Refer to the Usage bellow.

Requirements

• PHP 5.4 or greater
• Zend Framework 2 framework.zend.com.
• AssetManager from rwoverdijk rwoverdijk/assetmanager
• Any library above

Instalation

Instalation can be done with composer ou manually

Installation with composer

For composer documentation, please refer to getcomposer.org.

1. Enter your project directory

2. Create or edit your composer.json file with following contents:

3. Run php composer.phar install
4. Open my/project/directory/config/application.config.php and add AcploUi to your modules

Installation without composer

1. Clone this module AcploUi to your vendor directory
2. Enable it in your config/application.config.php like the step 4 in the previous section.

Usage

This module provides two main View Helpers: AcploHeadLink and AcploHeadScript. You can safely replace the default ZF HeadLink and HeadScript with this ones to use their resources.

Jquery

Jquery is provided as local files (default) or with CDN. Just pass "true" to the appendJquery method to use the CDN files. The second argument indicates the use of minified version (default) or not, while the third indicates a specific version of a CDN file.

Just add the following to your layout.phtml file:

It will generate the following html:

Font Awesome

Font Awesome is provided as local files (default) or with CDN. Just pass "true" to the appendFontAwesome method to use the CDN files. The second argument indicates the use of minified version (default) or not, while the third indicates a specific version of a CDN file.

Include the stylesheet with:

The last call will generate the following html:

To use their icon is simple, just use the AcploIcon View Helper:

Will generate:

You can pass a second parameter to add any style:

Will generate:

If you need to add a class, pass it along with the icon:

Will generate:

You can even call and icon as a method:

You can use icons with the "i" tag for both glyphicon and fontawesome:

Will generate:

Chosen

If you do not provide an element as the first parameter, the module will assume "select" and will apply the Chosen for all "select" elements. You can pass the Chosen attributes as an array (either as the first or second parameter).

It is not mandatory that you include the stylesheet and script beforehand. If you call the view helper as above, the module will include both for you as minified versions. To disabled this behavior, pass false as last parameter:

To manually include the stylesheet and script (can use append or prepend)

It will generate the following html:

Again, you can use the false parameter to get the default file:

UPDATE: Starting from version 1.0.19, you can style the Chosen element with Bootstrap 3. Just pass a true as fourth parameter: <?= $this->acploChosen('#my_select',['disable_search_threshold'=>10], true, true) ?>

Or ou can manually include the necessary styles with:

Moment

To include the script (can use append or prepend)

It will generate the following html:

Again, you can use the false parameter to get the default file:

You can specify which translations to add by passing and array to the appendMoment:

It will generate the following html:

You can combine with the unminified version:

It will generate the following html:

You can add all languages using one minified file:

It will generate the following html:

Bootstrap

Bootstrap is provided as local files (default) or with CDN. Just pass "true" to the appendBootstrap method to use the CDN files. The second argument indicates the use of minified version (default) or not, while the third indicates a specific version of a CDN file.

Include the stylesheet with (can use append or prepend)

The first call will generate the following html:

For each section bellow, please refer to the bootstrap documentation for the classes specifications.

Forms

This module provides a Form View Helper that automatically adds bootstrap style to forms. Just use the default form but with the new view helper:

To make the form horizontal, just pass true in the second argument, and the number of columns the label will use (default is 2):

In the horizontal form, buttons and checkboxes will be aligned with the other fields, not using the label column. To better style checkboxes and radios, add the following to your stylesheet:

There is a AcploFormRow view helper that prints just a row. It will add all necessary classes, including alerts for form errors.

If you need to change the order of the form elements, you can do (example for horizontal form with 4 columns for labels):

Alert

The default alert uses the warning style without the cacploe icon (X). But you can use any alert:

If you want the dismissible alert just call:

Badge

Button

Icons

To use their icon is simple, just use the AcploIcon View Helper:

Will generate:

You can pass a second parameter to add any style:

Will generate:

If you need to add a class, pass it along with the icon:

Will generate:

You can even call and icon as a method:

Image

As default, the image receives a img-responsive class. To remove it, call:

Label

The first call, will use the "default" style.

Navigation

For now, there is two Navigation View Helpers: Breadcrumbs and Menu.

The menu helper will use the "navbar" style form bootstrap, using the first level as navbar links and submenus as dropdown as in Bootstrap Navbar.

There is a new Page type that enable you to add a divider to the menu helper:

The breadcrumbs helper will follow Breadcrumbs.

If you define a page of type URI with just a '#' href, the breadcrumbs will print just it's label and not a link. Very useful if you have a category not linked to a route.

Paginator

You can use the Paginator View Helper to style as Default Paginator or Pager.

The default helper will use the 'Sliding' scroll system, and the 'default paginator' from bootstrap. To change this behavior, just use the second argument to the scroll system, null as the third (will use this lib view file).

The following options are available in the fourth parameter:

• 'type': 'pager'. If specified as pager, will use the Pager. If omited, will use the Default Paginator.
• 'aligned': true (default) or false. Will use the aligned version of the pager.
• 'size': 'sm' or 'lg'. Use the small or large, respectively.
• 'nextLabel': the label for the 'Next' buttton. Can be combined with glyphicon or FontAwesome.
• 'previousLabel': the same as nextLabel, but for the 'Previous' button.

Well