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.