Arquivo da tag: limite

Plugin para Umbraco 7 (belle)

Tutorial Umbraco 7 de Plugin Backoffice simples

Com o lançamento do Umbraco 7 em 21 de Novembro de 2013, a plataforma CMS do Umbraco mudou considerávelmente e deixou a vida dos usuários e, principalmente, dos desenvolvedores, muito mais fácil.

Não somente a interface administrativa (backoffice) foi bastante melhorada, mais fluida e compatível com aparelhos móveis.

Com isso, o tempo de desenvolvimento diminui bastante, facilitando bastante a vida. Agora, com o uso de simples Html5, CSS3, e Angular.js ficou fácil de criar extensões para a área administrativa.

Para demonstrar, vou mostrar a criação de uma extensão de backoffice simples de limite de carateres, e usei como exemplo o tutorial do Tim Geyssens Char Limit Property Editor for Umbraco Belle (http://www.nibble.be/?p=285)

Como comentei, o processo é simples:

  1. Para se criar um plugin, é necessário criar uma pasta dentro de App_Plugins
    Estrutura Umbraco
  2. Cria-se o package.manifest
    {
        propertyEditors: [
            {
    		alias: "Input.CharLimitEditor",
    		name: "Input Char limit",
    		"hideLabel": false,
          	"icon": "icon-stop-hand",
          	"group": "Common",
    		editor: {
    		view: "~/App_Plugins/Input.CharLimitEditor/views/view.html"
    		},
    		prevalues: {
    			fields: [
    				{
    					label: "Number of Characters",
    					description: "Enter the max number of characters allowed",
    					key: "limit",
    					view: "requiredfield",
    					validation: [
    						{
    							type: "Required" 
    						}						
    					]
    				}
    			]
    		}
            }
        ]
        ,
        javascript: [
            '~/App_Plugins/Input.CharLimitEditor/js/controller.js'
        ],
        css: [
        "~/App_Plugins/Input.CharLimitEditor/css/style.css"
      ]
    }
    
  3. O layout do Html
    
    <div ng-controller="Input.CharLimitEditorController" class="input-limit">
    	<span ng-if="model.config.limit >= 100">
           <textarea ng-model="model.value" ng-change="limitChars()" rows="10" class="umb-editor umb-textarea textstring"></textarea>
       </span>
       <span ng-if="model.config.limit < 100">
           <input ng-model="model.value" ng-change="limitChars()" type="text" class="umb-editor umb-textstring textstring" />
       </span>
       
       <span class="counter {{css}}">
        <i class="icon icon-{{icon}}"></i>
        <span ng-show="countLeft"> 
            <localize key="inputlimit_youhave">you have</localize> {{counter}} <localize key="inputlimit_charleft" >characters left</localize>
        </span>
        <span ng-show="maxReached">
            <localize key="inputlimit_limitReachedOnly">Only</localize> {{limit}} <localize key="inputlimit_limitReachedAllowed">allowed</localize>
        </span>
    </span>
    </div>
    
    
    
    

    Note que a tag

    <localize key="inputlimit_limitReachedOnly">Only</localize>

    está relacionada à Localização e não é obrigatória, mas ajuda se for publicar o pacote na comunidade

  4. (Opcional) Criar os arquivos de Idiomas para Localização
    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <language alias="pt_br" intName="Portuguese Brazil" localName="Portuguese Brazil" lcid="" culture="pt-BR">
      <creator>
        <name>Carlos Casalicchio</name>
        <link>http://www.ccasalicchio.com</link>
      </creator>
    
    
    <area alias="inputlimit">
        <key alias="youhave">Você tem</key>
        <key alias="charleft">caracteres sobrando</key>
        <key alias="limitReachedOnly">Somente</key>
        <key alias="limitReachedAllowed">caracteres permitidos!</key>
      </area>
    
    
    </language>
    
  5. O CSS (opcional)
    .input-limit .counter{
    	-webkit-transition: all 0.8s ease-in-out;
    	-moz-transition: all 0.8s ease-in-out;
    	-ms-transition: all 0.8s ease-in-out;
    	-o-transition: all 0.8s ease-in-out;
    	transition: all 0.8s ease-in-out;
    }
    
    .input-limit .thumb-up,.input-limit .alert,.input-limit .stop-hand{
    	padding: 5px 10px;
    }
    
    .input-limit .thumb-up{
    	background:#4FA23C;
    	color:#fff;
    }
    
    .input-limit .alert{
    	background: #B8860B;
    	color: #fff;
    }
    
    .input-limit .stop-hand{
    	color: #fff;
    	background: #DD793F;
    }
    
  6. E o mais importante, o controller.js (Angular.js)
    angular.module("umbraco")
    .controller("Input.CharLimitEditorController",
    	function ($scope) {
    		var limit = parseInt($scope.model.config.limit);
    		var thumbUp = "thumb-up", alert = "alert", warning = "stop-hand";
    		$scope.counter = limit - $scope.model.value.length;
    		$scope.limit = limit;
    		$scope.countLeft = true;
    		$scope.maxReached = false;
    		$scope.icon = thumbUp;
    		$scope.css = thumbUp;
    		
    		$scope.limitChars = function(){
    			$scope.counter = limit - $scope.model.value.length;
    			CheckChars();
    		};
    
    		function CheckChars(){
    			if($scope.model.value.length === 0){
    				$scope.countLeft = true;
    				$scope.maxReached = false;
    				$scope.icon = thumbUp;
    				$scope.css = thumbUp;
    			}
    
    			else if ($scope.model.value.length >= limit)
    			{
    				$scope.maxReached = true;
    				$scope.countLeft = false;
    				$scope.icon	= warning;
    				$scope.css = warning;
    				$scope.model.value = $scope.model.value.substr(0, limit );
    			}
    			
    			else if($scope.model.value.length < (limit/2)){ $scope.icon = thumbUp; $scope.css = thumbUp; $scope.maxReached = false; $scope.countLeft = true; } else if($scope.model.value.length > (limit/2)){
    				$scope.icon = alert;
    				$scope.css = alert;
    				$scope.maxReached = false;
    				$scope.countLeft = true;
    			}
    
    			else
    			{
    				$scope.icon = alert;
    				$scope.css = alert;
    				$scope.maxReached = false;
    				$scope.countLeft = true;
    			}
    		}
    		CheckChars();
    	});
    

Após isso, pode-se criar um pacote e submeter à comunidade, para que outras pessoas também usem, mas isso também é opcional. Este pacote, em particular está disponível em https://our.umbraco.org/projects/backoffice-extensions/input-character-limit/ e o código fonte no GitHub

Este plugin cria uma caixa de texto ou area de texto com um contador de caracteres, com várias chamadas visuais, afim de auxiliar o usuário a digitar o número de caracteres permitido.

Vazio

Em resumo, criar plugins para Umbraco ficou ainda mais fácil, e a curva de aprendizado ainda menor! Vale a pena investir nesse CMS.