Arquivo da categoria: JQuery

JointJS – Biblioteca para criação de diagramas JS

jointjs

Surgiu-se a necessidade de criação de diagramas, fui a pesquisa para encontrar alguma ferramenta para auxiliar, como existe vários prontos não é necessário criar a roda.

Encontrei diversos plugins mas nenhum havia me chamado atenção, uma que gostei muito foi o D3.js mas achei muito complicado sui manipulação, muito trabalhoso pra criar exatamente o que queria.

Das que encontrei, me chamaram muito atenção esses plugin:
GoJS – Infelizmente é paga
img_551d33df0354a

JsPlumb – Grátis
img_551d34ebec5c3

mermaid – Grátis
header

A que mais gostei foi JointJS com esse plugin é possível criar diagramas interessante, de um forma simples e poderosa.

A instalação super simples, necessário:

<link rel="stylesheet" type="text/css" href="joint.css" />
<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>

jQuery: 2.0.3
Lodash: 3.10.1
Backbone: 1.2.1

Development version (0.9.5)
joint.js joint.css

Production version (0.9.5)
joint.min.js joint.min.css

Algumas imagens das possibilidades do JointJS.
ivr

traceroutes

rappid-new-showcase

rappid_attack_designer

Introdução ao Kendo UI Core

Estou inicializando a utilização do Kendo UI Core em novos projetos, então eu pensei em documentar o processo que eu uso para obter Kendo UI Core instalado e funcionando.

Passo 1) Baixar
Estarei utilizando o Bower, Gerenciador de pacotes para aplicações web:

$ bower install kendo-ui-core

Você pode baixar por alternativa Kendo UI Core pelo GitHub

Passo 2) HTML
Em seguida vamos criar um index.html e colar o seguinte código HTML:

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>Meu Projeto</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bower_components/kendo-ui-core/src/styles/web/kendo.common.core.css">
    <link rel="stylesheet" href="bower_components/kendo-ui-core/src/styles/web/kendo.flat.css">
</head>
<body>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/kendo-ui-core/src/js/kendo.ui.core.js"></script>

</body>
</html>

Etapa 3) Gerenciamento de Pacotes
Vou utilizar a biblioteca RequireJS para gerenciar as dependências do meu aplicativo, e como felizmente Kendo UI Core é inteligentemente dividido em módulos fica mais fácil essa utilização. Para começar vamos baixar RequireJS o que irá manipular quais scripts serão carregados na página que estarei trabalhando vamos utilizar o Bower:

$ bower install requirejs

Em seguida vou criar um arquivo app.js para servir como o principal arquivo JavaScript para meu aplicativo. Neste ponto estrutura de pastas do meu projeto será desta forma:

.
├── bower_components
│   ├── jquery
│   │   └── ...
│   ├── kendo-ui-core
│   │   └── ...
│   └── requirejs
│       └── ...
├── index.html
└── js
    └── app.js

Com esta estrutura vou incluir na minha index.html esta única tag

<script>

:

<script src="bower_components/requirejs/require.js" data-main="js/app"></script>

Em “app.js” vou incluir o seguinte código:

require.config({
    paths: {
        "jquery": "/bower_components/jquery/dist/jquery",
        "kendo-ui-core": "/bower_components/kendo-ui-core/src/js"
    }
});

require([ "jquery", "kendo-ui-core/kendo.ui.core" ], function( $ ) {

});

Isso me dá um ponto de entrada para o meu app que carrega jQuery UI e Kendo Core dinamicamente. Se meu aplicativo precisa apenas de uma uma parte do Kendo UI Core eu só vou especificar os módulos que eu preciso na chamada

require()

. Evitando a chamada total de scripts a não ser utilizando dando uma melhor performance.