Klear.yaml

Este archivo es creado por el generador yaml, así que solo nos basaremos en cómo configurar las opciones ya generadas para nuestro proyecto. El archivo de configuración de Klear está situado en application/configs/klear/klear.yaml.

Nota

Recordar, en el tag oasis, se puede tirar de ${auth.*} para este fichero.

production:
  main:
    log:
      writerName: "Null"
      writerParams:
    sitename: MyApp
    logo: klear/images/klear.png
    year: 2013
    lang: es
    langs:
      es:
        title: Español
        language: es
        locale: es_ES
      en:
        title: English
        language: en
        locale: en_US
      eu:
        title: Euskera
        language: eu
        locale: eu_ES
    jqueryUI:
      theme: redmond
      path: /ui/themes/absolution-red/jquery-ui.css #ruta para temas externos: theme se utilizará como nombre de éste.
      themeRoller:
        paths: #para temas externos
          verdecito: /ui/themes/aristo-green/jquery-ui.css
        themes: #para temas predefinidos
          - pepper-grinder
          - redmond
          - ui-darkness
          - aristo-red
    raw:
      css:
        - "css/klear.css"
    cssExtended:
    actionHelpers:
    defaultCustomConfiguration:
      optionCollectionPlacement: both
    rememberScroll: true
    auth:
      adapter: Klear_Auth_Adapter_Basic
      title: _("Access denied")
      description: _("Insert your username")
    timezone: Europe/Madrid
  menu:
    General:
      title: _("Main management")
      description: _("Main management")
      submenus:
        DevelopersList:
          title: ngettext('Developer', 'Developers', 0)
          class: ui-silk-text-list-bullets
          description: _("List of %s", ngettext('Developer', 'Developers', 0))
          showOnlyIf: true|false
          meta: "literal que viajará hasta el atributo data-meta del elemento de menú."
        KlearImageGalleriesList:
          title: ngettext('Klear image gallery', 'Klear image galleries', 0)
          class: ui-silk-text-list-bullets
          description: _("List of %s", ngettext('Klear image gallery', 'Klear image galleries', 0))
testing:
  _extends: production
staging:
  _extends: production
development:
  _extends: production

main

Configuración básica del Interfaz del Klear

log

Nos sirve para especificar una ubicación para redireccionar los logs de nuestra aplicación.

log:
   writerName: stream
   writerParams:
     stream: /tmp/klear.log
     mode: a

Para syslog

log:
   writerName: syslog
   writerParams:
     application: app-admin-portal
     facility: LOG_USER

sitename

Define el nombre de la aplicación.

sitename: Mi aplicación de Klear

year

Año de la aplicación, por defecto se pone el año en el que fue generado este yaml.

lang

Con esta opción se define el idioma por defecto de la aplicación.

lang: Euskera

Advertencia

El idioma elegido deberá estar configurado dentro de la etiqueta de langs.

langs

Lista con los idiomas soportados en la aplicación.

Cada idioma debe definir:

  • title: Título del idioma
  • language: Nombre corto del idioma (ejem.: eu)
  • locale: El código locale del idioma (ejem.: eu_ES)
langs:
   Euskera:
     title: Euskera
     language: eu
     locale: eu_ES
   Espanol:
     title: Español
     language: es
     locale: es_ES

jqueryUI

Es el tema que adoptará la interfaz del Klear. Los css que optará podría estar en local o en la nube. Por ejemplo:

Formato local: los css deben ubicarse en la zona pública (carpeta public). Esta opción suele ser usada cuando algunas aplicaciones no tienen acceso al exterior. El formato sería el siguiente:

jqueryUI:
   path: /css/south-street/jquery-ui-1.8.22.custom.css

CSS en la nube: Los estilos a elegir son limitados, pero son los más recomendados, serán seleccionados según la imagen que tiene que dar la aplicación. El formato sería el siguiente:

jqueryUI:
   theme: redmond

themeRoller

Muestra una lista de temas a elegir.

themeRoller:
   paths: #para temas externos
      verdecito: /ui/themes/aristo-green/jquery-ui.css
   themes: #para temas predefinidos
      - pepper-grinder
      - redmond
      - ui-darkness
      - aristo-red

Themes oficiales

  • base
  • black-tie
  • blitzer
  • cupertino
  • dark-hive
  • dot-luv
  • eggplant
  • excite-bike
  • flick
  • hot-sneaks
  • humanity
  • le-frog
  • mint-choc
  • overcast
  • pepper-grinder
  • redmond
  • smoothness
  • south-street
  • start
  • sunny
  • swanky-purse
  • trontastic
  • ui-darkness
  • ui-lightness
  • vader

Themes irontec

  • absolution
  • absolution-green
  • absolution-red
  • aristo
  • aristo-dark
  • aristo-green
  • aristo-red
  • delta
  • twitter
  • redmond-red

cssExtended

Esta configuración es opcional, normalmente es usada para que podamos elegir un favicon o ampliar nuestro listado de iconos en la interfaz. Ya sea porque los iconos por defecto no se adecuan al tema de la aplicación o porque se requiere nuevas imágenes para representar nuestras secciones.

Seleccionar favicon

Solo se necesita poner la imagen en la carpeta public de nuestro proyecto y a partir de allí señalar su ubicación.

cssExtended:
   silkExtendedIconPath: /images/favicon.ico

Nota

Los navegadores solo reconocen como un favicon, las imágenes con la extensión .ico que suele tener un tamaño de 16x16 o 32x32 (px).

Generar nuevos iconos

Para empezar necesitamos crear la carpeta “css” o “style” en nuestra carpeta public. Luego en nuestra carpeta /public/css/ crearemos la siguiente estructura de carpetas:

.
└── ui-klear
    ├── cache
    └── icons

Prudencia

Asegurarse que todas las carpetas tengan todos los permisos: chmod 777

Especificar la ruta de la carpeta icons:

cssExtended:
   silkExtendedIconPath: /css/ui-klear/icons

Por último, agregar “/css-extended/silk-extended/silk-extended-sprite.css?generate” en nuestro ruta después de “/klear”, por ejemplo:

http:// ~ /klear/css-extended/silk-extended/silk-extended-sprite.css?generate

Nota

Klear tiene disponible los iconos de la serie Silk Icon Sprite: https://klear-wiki.irontec.com/silk/

raw

Si no estamos satisfechos con los estilos que ya están definidos, podemos también incorporar algunos propios haciendo uso de esta opción.

Para ello, debemos crear una carpeta con el nombre “assets” en nuestra carpeta “application”, dentro de ella ya decidimos donde ubicaremos nuestro estilo; por ejemplo, yo crearía la carpeta “css” y dentro de ella mi archivo de estilo (.css), quedando algo como esto:

application
└── assets
    └── css
        └── style.css

En el yaml, debemos especificar la ruta de la siguiente manera:

raw:
  css:
    - "./default/css/style.css"

optionCollectionPlacement

Configurar las posiciones de los botones dentro de los módulos de Klear.

Los valores permitidos son: top | both | bottom

La configuración puede ser definida como string o como colección.

  • Configuración de string:
optionCollectionPlacement: both
  • Configuración de colección:
optionCollectionPlacement:
  default: 'both'
  list: 'top'
  edit: 'bottom'

rememberScroll

Permite recordar la posición de las pestañas.

Esto es útil en listados largos en los que al editar uno de los registros la página se mueve hacia arriba para facilitar la edición. En estos casos al cerrar la pestaña de edición o al volver a la pestaña original del listado el listado está al comienzo, teniendo que volver a buscar por que registro estábamos antes de editar.

Si se activa esta opción al cerrar la pestaña de edición o al volver a la pestaña del listado, el listado se moverá automáticamente a la posición en la que estábamos antes de editar.

rememberScroll: true

auth

Configuración del adaptador de autenticación.

Atención

El adaptador por defecto es Klear_Auth_Adapter_Basic, pero podemos modificarlo siempre y cuando el que utilicemos implemente Klear_Auth_Adapter_KlearAuthInterface.

Párametros configurables para el adaptador:

  • adapter: Nombre del adaptador.

  • title: Título de la ventana emergente de login.

  • description: Descripción que se muestra en la ventana de login.

  • userMapper: Clase Mapper que implementa Klear_Auth_Adapter_Interfaces_BasicUserMapper. El valor predeterminado es Klear_Model_Mapper_Users.

  • session: Configuración de almacenamiento de sesión.
    • name: Nombre de sesión para la autenticación (por defecto klear_auth) , si queremos tener mas de una instancia en el mismo host, esto debe modificarse.
    • disableChangeName: Si queremos que Klear comparta el namespace con la zona pública pondremos a true.
auth:
  adapter: Klear_Auth_Adapter_Basic
  title: _("Access denied")
  description: _("Insert your username")
  userMapper: \MyApp\Mapper\Sql\KlearUsers
  session:
    name: my_auth_session_name
    disableChangeName: false

El siguiente código genera la tabla necesaria, con el usuario admin y contraseña admin:

CREATE TABLE `KlearUsers` (
  `userId` mediumint(8) unsigned NOT NULL AUTO_INCREMENT,
  `login` varchar(40) NOT NULL,
  `email` varchar(255) NOT NULL,
  `pass` varchar(80) NOT NULL COMMENT '[password]',
  `active` tinyint(1) DEFAULT '0',
  `createdOn` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`userId`),
  UNIQUE KEY `login` (`login`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `KlearUsers`(login, email, pass, active) VALUES('admin','admin@example.com','$2a$08$OBG.QrnbL0iJh3O0LlKxBOFWhZKc77NeHqn8vutpg5velSt0dwkeK',1);

disableMinifier

Para activar o desactivar los minificadores dinámicos. Útil en entornos de desarrollo.

disableMinifier: true

disableAssetsCache

Para activar o desactivar la cache de css y js. Útil para entornos de desarrollo.

disableAssetsCache: true

defaultCustomConfiguration

Posibilita la configuración de propiedades fácilmente accesibles desde cualquier parte de la aplicación.

defaultCustomConfiguration:
     optionCollectionPlacement: both
     autoClose: true
     disableSave: false
     disableAddAnother: false
     autoShowSizeOnExpandableFields: true

Después en el código:

$bootstrap = Zend_Controller_Front::getInstance()->getParam('bootstrap');
$siteConfig = $bootstrap->getResource('modules')->offsetGet('klear')->getOption('siteConfig');

$property = $siteConfig->getDefaultCustomConfiguration('optionCollectionPlacement');

timezone

La base de datos, por defecto cuenta con la zona horaria UTC 0, pero para mostrar la fecha y hora, según a nuestra zona horaria, hay que modificar este apartado.

timezone: Europe/Madrid

footerMenu

Este menu esta en la parte inferior centrada de la pantalla. Solo lista el icono y el título de la sección. El primer tab de configuración es el nombre del menu, el siguiente es el del “title” y el “submenus” en el cual se configura las vistas que se listaran.

footerMenu:
  footer:
    title: ''
    submenus: