Arquivos tutorial - Carlos Casalicchio

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:

Para se criar um plugin, é necessário criar uma pasta dentro de App_Plugins

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"
  ]
}

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

(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>https://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>

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;
}

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.

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

Carlos Casalicchio

Arquivo da tag: tutorial

Plugin para Umbraco 7 (belle)

Tutorial Umbraco 7 de Plugin Backoffice simples

Assuntos diversos, desde Tecnologia até Psicologia