Neste tutorial veremos os passos que devem ser seguidos para criar um formulário com exibição e edição de um mapa mental.
Criação da aplicação Formulário
1 – Crie uma aplicação do tipo formulário “Único Registro”
2 – Adicione um novo campo ao formulário. Este será do tipo “label”, o nome será chart_mindmap.
3 – Acesse “Layout>>Blocos” para colocar a posição dos labels acima dos campos.
4 – Acesse “Editar campos” e organize os campos conforme a imagem.
5 – Acesse a edição do campo “mindmap_jason”
6 – Marque a opção de “campo escondido”
7 – Agora vamos criar uma função Javascript que se encarregará da construção do mindmap. Acesse “Programação>>Métodos JavaScript>>Novo Método”.
8 – O nome da função será “drawChart”, e o código:
ar_langs = arrLangs.split(";");
var mind_data = {};
if (jsonobj == 0 ){
mind_data = {
"meta":{
"name":"jsMind remote",
"author":"hizzgdev@163.com",
"version":"0.2"
},
"format":"node_tree",
"data":{"id":"root","topic":"jsMind","children":[
{"id":"easy","topic":"Easy","direction":"left","children":[
{"id":"easy1","topic":"Easy to show"},
{"id":"easy2","topic":"Easy to edit"}
]},
{"id":"open","topic":"Open Source","direction":"right","children":[
{"id":"open1","topic":"on GitHub", "background-color":"#eee", "foreground-color":"blue"},
{"id":"open2","topic":"BSD License"}
]},
{"id":"powerful","topic":"Powerful","direction":"right","children":[
{"id":"powerful1","topic":"Base on Javascript"},
{"id":"powerful2","topic":"Base on HTML5"}
]},
{"id":"other","topic":"test node","direction":"left","children":[
{"id":"other1","topic":"Im from local variable"},
{"id":"other2","topic":"I can do everything"}
]}
]}
}
}else{
mind_data = JSON.parse(jsonobj);
}
var mind_options = {
container: 'mindmap',
theme: 'scriptcase',
editable: true
}
var mind = jsMind.show(mind_options,mind_data);
var mind_tree = {};
$(document).ready(function(){
// Actual items
mind_tree = JSON.stringify(mind_tree.data);
// Append menu
$('jmnode').append('<div class="node-menu"><span></span><ul><li class="item-add"><a href="#">New node</a></li><li class="item-del"><a href="#">Remove node</a></li></ul></div>');
// Open Menu
$('jmnode .node-menu span').click(function(e){
e.stopPropagation();
$(this).parent().toggleClass('active');
})
// Refresh node tree
function refreshMindTree() {
mind_tree = jsMind.current.get_data();
var objstr = mind_tree;
mind_tree = JSON.stringify(mind_tree.data);
document.getElementById(strJsonFld).value = JSON.stringify(objstr);
console.log(document.getElementById(strJsonFld).value);
}
// Add item
$('.item-add a').click(function(e){
e.preventDefault();
var node_selected = mind.get_selected_node();
var node_topic = 'test';
var node_id = jsMind.util.uuid.newid();
mind.add_node(node_selected, node_id, node_topic);
// Refresh node tree
refreshMindTree();
})
// Remove item
$('.item-del a').click(function(e){
e.preventDefault();
var node_selected = mind.get_selected_node();
node_selected = node_selected.id;
mind.remove_node(node_selected);
// Refresh node tree
refreshMindTree();
})
// Click outside to hide menu
$('html, body').click(function(){
$('jmnode.selected .node-menu').removeClass('active')
})
});
9 – Utilize a opção para inserir parâmetros na chamada da função.
10 – Utilizaremos 3 parâmetros: jsonobj, strJsonFld e arrLangs
11 – Finalmente, dentro do evento onLoad, o seguinte código é adicionado
{chart_mindmap} = '<div id="mindmap" style="width:98%;height:350px;"></div>';
if(empty({mindmap_json})){
{mindmap_json} = 0;
}
?>
sc_include_lib("jsmind")
<?php
// Call javascript function
$langs = {lang_mindmaps_update}.";".{lang_mindmaps_layout}.";".{lang_mindmaps_undo}.";".{lang_mindmaps_redo}.";".{lang_mindmaps_save}.";".{lang_mindmaps_load};
sc_ajax_javascript( 'drawChart', array({mindmap_json}, 'id_sc_field_mindmap_json',$langs) );
12 – Agora salvamos e executamos o aplicativo
Comente este post