Arquivo de abril, 2014

Visual – MFC – CToolBar – C++

Publicado: 18 de abril de 2014 em C/C++

Para usar o componente Toolbar em C++ MFC, você precisa primeiro conhecer alguns conceitos. O componente Toolbar é um componente criado através de um arquivo de Resource,  neste arquivo se localizada os ícones da barra de ferramentas. O Toolbar também é composto da classe CToolbar no qual precisa ser criada dinamicamente no evento OnCreate  do Frame principal declarada através de uma variável no seu respectivo arquivo  de cabeçalho .h,

Outro importante ponto do qual você precisa saber é que o componente ToolBar não pode ser criado em uma aplicação Dialog Based como vimos até agora, caso tente, não encontrará erros, sua aplicação apenas não poderá desenhar a barra de ferramentas.

Para cria um componente toolbar você precisa utilizar um tipo de aplicação MFC chamada Multiple Top-Level documents. Se você criar uma interface de documentos múltiplos (MDI), que significa aplicativo baseado em formulários, o aplicativo será capaz de suportar múltiplas instâncias do mesmo formulário.

Toolbar - Programa

Toolbar – Programa – DA

Visual Studio

Para criar um componente Toolbar MFC, siga os seguintes passos.

  1. Crie uma aplicação Multiple Top-Level documents.
  2. Abra a tela de Resources ou aperte CTRL + SHIFT + E.
  3. Com o botão direito do mouse, adicione um novo Resource  e na janela escolha ToolBar, use a figura abaixo:

    Toolbar - Resource

    Toolbar – Resource

  4. Use a barra de ferramentas para desenhar os três botões ou o menu IMAGE/Tools, veja a figura abaixo:

    Design - Ícones

    Design – Ícones

  5. Troque ID de cada botão por um já existente exemplo: ID_NEW_FILE, ID_FILE_OPEN e ID_FILE_CLOSE, note que cada ID de botão é ligado a um botão do menu que também já foi criado automaticamente e possui seu próprio evento.
  6. Declare a variável m_ferramenta na interface da classe do arquivo MainFrm.h, como no primeiro código abaixo.
  7. Complete o evento OnCreate do arquivo MainFrm.cpp com os trechos marcados do segundo código abaixo.

 

Exemplo:

Neste exemplo criamos um componente Toolbar MFC para C++ em uma aplicação Multiple Top-Level documents, visto que temos algumas restrições e conceitos para respeitar, ao criar nosso aplicativo,  automaticamente já é criado uma toolbar padrão e vamos criar uma nova toolbar com ícones no qual vamos desenhar manualmente.

C++

Arquivo 1 – MainFrm.h

// Código gerado automaticamente
// MainFrm.h : interface of the CMainFrame class
//

#pragma once

class CMainFrame : public CFrameWnd
{

protected:
	CMainFrame();
	DECLARE_DYNCREATE(CMainFrame)

public:

public:

public:
	virtual BOOL PreCreateWindow(CREATESTRUCT& cs);
	virtual BOOL LoadFrame(UINT nIDResource, DWORD dwDefaultStyle = WS_OVERLAPPEDWINDOW |
		                   FWS_ADDTOTITLE, CWnd* pParentWnd = NULL, CCreateContext* pContext = NULL);

public:
	virtual ~CMainFrame();
#ifdef _DEBUG
	virtual void AssertValid() const;
	virtual void Dump(CDumpContext& dc) const;
#endif

protected:  

	CToolBar          m_wndToolBar;

	// Desenvolvimento Aberto
	// Declara nova toolbar

	CToolBar          m_ferramenta; 

protected:
	afx_msg int OnCreate(LPCREATESTRUCT lpCreateStruct);
	afx_msg void OnFileClose();
	DECLARE_MESSAGE_MAP()

};

Arquivo 2 – MainFrm.cpp


// MainFrm.cpp : implementation of the CMainFrame class
//

#include "stdafx.h"
#include "MFCApplication2.h"

#include "MainFrm.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

IMPLEMENT_DYNCREATE(CMainFrame, CFrameWnd)

BEGIN_MESSAGE_MAP(CMainFrame, CFrameWnd)
	ON_WM_CREATE()
	ON_COMMAND(ID_FILE_CLOSE, &CMainFrame::OnFileClose)
END_MESSAGE_MAP()

CMainFrame::CMainFrame()
{
	// TODO: add member initialization code here
}

CMainFrame::~CMainFrame()
{
}

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
	if (CFrameWnd::OnCreate(lpCreateStruct) == -1)
		return -1;

	// Desenvolvimento Aberto
	// Toolbar MFC Default 

	if (!m_wndToolBar.CreateEx(this, TBSTYLE_FLAT, WS_CHILD | WS_VISIBLE |
		                             CBRS_TOP | CBRS_GRIPPER | CBRS_TOOLTIPS
								   | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||
		!m_wndToolBar.LoadToolBar(IDR_MAINFRAME))
	{
		TRACE0("Failed to create toolbar\n");
		return -1;      // fail to create
	}

	m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
	EnableDocking(CBRS_ALIGN_ANY);
	DockControlBar(&m_wndToolBar);

	// Desenvolvimento Aberto
	// Minha segunda Ctoolbar

	if (!m_ferramenta.CreateEx(this, TBSTYLE_FLAT, WS_CHILD | WS_VISIBLE |
		                             CBRS_TOP | CBRS_GRIPPER | CBRS_TOOLTIPS |
									 CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||
		!m_ferramenta.LoadToolBar(IDR_TOOLBAR1))
	{
		TRACE0("Failed to create toolbar\n");
		return -1;
	}

	// TODO: Apague estas 3 linhas se não quiser que a barra de ferramentas seja arrastada
	m_ferramenta.EnableDocking(CBRS_ALIGN_ANY);
	EnableDocking(CBRS_ALIGN_ANY);
	DockControlBar(&m_ferramenta);

	return 0;
}

BOOL CMainFrame::PreCreateWindow(CREATESTRUCT& cs)
{
	if( !CFrameWnd::PreCreateWindow(cs) )
		return FALSE;

	cs.style = WS_OVERLAPPED | WS_CAPTION | FWS_ADDTOTITLE
		 | WS_THICKFRAME | WS_SYSMENU;

	return TRUE;
}

#ifdef _DEBUG
void CMainFrame::AssertValid() const
{
	CFrameWnd::AssertValid();
}

void CMainFrame::Dump(CDumpContext& dc) const
{
	CFrameWnd::Dump(dc);
}
#endif 

BOOL CMainFrame::LoadFrame(UINT nIDResource, DWORD dwDefaultStyle, CWnd* pParentWnd, CCreateContext* pContext)
{

	if (!CFrameWnd::LoadFrame(nIDResource, dwDefaultStyle, pParentWnd, pContext))
	{
		return FALSE;
	}

	CWinApp* pApp = AfxGetApp();
	if (pApp->m_pMainWnd == NULL)
		pApp->m_pMainWnd = this;

	if (AfxGetApp()->m_pMainWnd != this)
	{
		CMenu *pMenu = GetMenu();
		ASSERT(pMenu);
		BOOL bNameValid;
		CString strTemp;
		bNameValid = strTemp.LoadString(IDS_CLOSE);
		ASSERT(bNameValid);
		pMenu->ModifyMenu(ID_APP_EXIT, MF_BYCOMMAND | MF_STRING, ID_FILE_CLOSE, strTemp);
	}

	return TRUE;
}

void CMainFrame::OnFileClose()
{
	DestroyWindow();
}

 

Visual – ToolBar, ToolButton e ImageList – C#

Publicado: 17 de abril de 2014 em C#

A Barra de ferramentas é um componente utilizado pelos softwares com interface gráfica (GUI) com a finalidade de permitir uma ação rápida por parte do usuário, facilitando o acesso a funções do programa. Uma das suas características é possuir ícones para as operações mais corriqueiras e representar através de imagens operações que poderiam demandar uma grande quantidade de informações para chegar ao mesmo objetivo

ToolBar

Representa uma barra de ferramentas do Windows. Embora ToolStrip substitui e adiciona funcionalidade para o ToolBar em versões anteriores, ToolBar é mantido para compatibilidade com versões anteriores e o uso futuro, se você escolher.

ToolButton

Representa um botão da barra de ferramentas do Windows. Embora ToolStripButton substitui e estende o controle ToolBarButton das versões anteriores, ToolBarButton é mantido para compatibilidade com versões anteriores e o uso futuro, se você escolher.

ImageList

Fornece métodos para gerenciar uma coleção de objetos de imagem. Esta classe não pode ser herdada.

Exemplo:

Neste exemplo criamos uma barra de tarefas utilizando botões e seus eventos de clique. Para testar este exemplo você precisa de imagens de ícones do formato PNG, as imagens podem ser baixadas neste link: http://www.iconesbr.net/icone/Linux

C#

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace toolbarcs
{
    public partial class Form1 : Form
    {
        // Declara componentes
        Label rotulo;
        ToolBar ferramenta;
        ImageList imagens;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Shown(object sender, EventArgs e)
        {
            // Define propriedades do formulario
            this.Text = "DA - Barra de Ferramentas";
            this.Size = new Size(300, 150);

            // Cria componentes
            rotulo = new Label();
            ferramenta = new ToolBar();
            imagens = new ImageList();

            // Define propriedades do rotulo
            rotulo.Text = "Eventos do botão.";
            rotulo.Size = new Size(250, 20);
            rotulo.Location = new Point(0, 50);
            rotulo.TextAlign = ContentAlignment.TopCenter;

            // Adiciona imagens
            imagens.Images.Add(Image.FromFile("C:\\Desenvolvimento Aberto\\9445_128x128.png"));
            imagens.Images.Add(Image.FromFile("C:\\Desenvolvimento Aberto\\9450_128x128.png"));
            imagens.Images.Add(Image.FromFile("C:\\Desenvolvimento Aberto\\9451_128x128.png"));

            // Liga imagens a barra de ferramentas
            ferramenta.ImageList = imagens;

            // Cria botões da barra de ferramentas
            ToolBarButton bnt1 = new ToolBarButton();
            ToolBarButton bnt2 = new ToolBarButton();
            ToolBarButton bnt3 = new ToolBarButton();           

            // Define imagens dos botões
            bnt1.ImageIndex = 0;
            bnt2.ImageIndex = 1;
            bnt3.ImageIndex = 2;

            // Adiciona botões as barras de ferramentas
            ferramenta.Buttons.Add(bnt1);
            ferramenta.Buttons.Add(bnt2);
            ferramenta.Buttons.Add(bnt3);

            // Cria evento para a barra de ferramentas
            ferramenta.ButtonClick += new ToolBarButtonClickEventHandler( this.ferramenta_ButtonClick);

            // Adiciona componentes ao formulario
            this.Controls.Add(ferramenta);
            this.Controls.Add(rotulo);

        }     

         private void ferramenta_ButtonClick (Object sender, ToolBarButtonClickEventArgs e)
        {
             // Captura clique da barra de ferramentas
            switch (ferramenta.Buttons.IndexOf(e.Button))
            {

                case 0:
                    rotulo.Text = "Você clicou no botão 1";
                    break;

                case 1:
                    rotulo.Text = "Você clicou no botão 2";
                    break;

                case 2:
                    rotulo.Text = "Você clicou no botão 3";
                    break;

            }

        }

    }
}

 

Visual – JToolBar – Drag and Drop – Java

Publicado: 17 de abril de 2014 em Java

A Barra de ferramentas é um componente utilizado pelos softwares com interface gráfica (GUI) com a finalidade de permitir uma ação rápida por parte do usuário, facilitando o acesso a funções do programa. Uma das suas características é possuir ícones para as operações mais corriqueiras e representar através de imagens operações que poderiam demandar uma grande quantidade de informações para chegar ao mesmo objetivo.

JToolBar

Proporciona um componente que é útil para indicar ações ou comandos muito utilizado, gerando atalhos através de uma barra de tarefas. Caso queira que a barra de ferramentas possua a funcionalidade drag and drop, você precisa cria-la em um BorderLayout.

JToolBar

JToolBar

Exemplo:

Neste exemplo criamos uma barra de tarefas utilizando botões e seus eventos de clique. Para testar este exemplo você precisa de imagens de ícones do formato PNG, as imagens podem ser baixadas neste link: http://www.iconesbr.net/icone/Linux

Java

import java.awt.BorderLayout;
import java.awt.Container;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JToolBar;

public class BarraFerramenta implements ActionListener {

	// Declara componentes
	JToolBar ferramenta;
	JLabel rotulo;
	JButton botao = null;

	public Container criaPainel()
	{
		// Cria painel
		JPanel painel = new JPanel();

		// Define layout
		painel.setLayout(new BorderLayout());
		painel.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));

		// Cria componentes
		ferramenta = new JToolBar();
		rotulo = new JLabel("Evento da barra de ferramentas");

		botao  = criaBotao("9445_128x128", "BNT1");
		ferramenta.add(botao);

		botao  = criaBotao("9450_128x128", "BNT2");
		ferramenta.add(botao);

		botao  = criaBotao("9451_128x128", "BNT3");
		ferramenta.add(botao);

		// Adiciona componentes ao painel
		painel.add(ferramenta, BorderLayout.PAGE_START);
		painel.add(Box.createVerticalStrut(20));
		painel.add(rotulo, BorderLayout.PAGE_END);

		return painel;
	}

	private JButton criaBotao(String icone, String acao) 

	{
		// Cria botões
		JButton bto = new JButton();
		String caminho = "C:/Desenvolvimento Aberto/" + icone + ".png";

		// Define eventos
		bto.setActionCommand(acao);
		bto.addActionListener(this);

		// Adiciona imagem
		bto.setIcon(new ImageIcon(caminho, "Icone"));

		return bto;
	}

	public void actionPerformed(ActionEvent arg0)
	{
		// Eventos dos botões
		String acao = arg0.getActionCommand();

		if (acao == "BNT1" )
		{
			rotulo.setText("Você clicou no botão 1");
		}

		if (acao == "BNT2" )
		{
			rotulo.setText("Você clicou no botão 2");
		}

		if (acao == "BNT3" )
		{
			rotulo.setText("Você clicou no botão 3");
		}		

	}

	public static void criaGUI()
	{
		// Cria Formulario
		JFrame formulario = new JFrame("DA - Barra de Ferramentas");
		formulario.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		// Instancia da classe
		BarraFerramenta barra = new BarraFerramenta();

		// Adiciona painel ao formulario
		formulario.setContentPane(barra.criaPainel());

		formulario.pack();
		formulario.setVisible(true);	

	}

	public static void main(String[] args) {

		javax.swing.SwingUtilities.invokeLater(new Runnable() {

			@Override
			public void run() {

				// Cria GUI
				criaGUI();

			}
		});
	}
}

Em computação, um tree view (literalmente do inglês vista de árvore) é um elemento de interface gráfica (isto é um componente widget) que permite ao usuário mostrar dados hierárquicos em forma de árvore, expandir ou recolher os ramos e nós. Dependendo do wiget toolkit ou aplicação em uso, existem muitos estilos de apresentação gráfica de tree views.

SAP Tree

É um controle que permite que você exiba estruturas de árvore em uma tela. Ele foi desenvolvido pela SAP, e enquanto ela cumpre os requisitos básicos de um controle de árvore (Treeview), não foi adaptado para aplicações individuais. Existem três versões diferentes do SAP Tree:

Classes do SAP Tree

  • CL_GUI_SIMPLE_TREE – Classe  que instancia um Treeview tradicional com uma única coluna.
  • CL_GUI_COLUMN_TREE – Classe que instancia um Treeview com exibição de colunas.
  • CL_GUI_LIST_TREE – Classe que instancia um Treeview com uma exibição de listas.

Screen Painter

Para usar o SAP Tree siga os seguintes passos:

  1. Crie um novo programa chamado ztreeview.
  2. Crie uma tela 100 para este programa.
  3. Preencha o elemento tipo OK para OK_CODE para a tela 100.
  4. Em Layout, arraste para o design um Text Field, um Custom Control e um Input/Output Field.
  5. Nomeie o Custom Control de: DISCO.
  6. Nomeie o Input/Output Field de: RODAPE.
  7. Use a figura abaixo para criar o seu Layout:

    SAP Tree- Layout

    SAP Tree- Layout

  8. Em Flow Logic crie os elementos PBO e PAI default.
  9. Ative a tela 100.
  10. Digite o código abaixo no seu programa, ative e teste.
SAP Tree - Programa

SAP Tree – Programa

Exemplo:

Neste exemplo usamos uma visão de arvore para exibir uma discografia musical, você pode abrir e fechar os nós do modelo de dados em visão de  árvore, um duplo clique do mouse em cada nó dispara um evento para que exibe a chave do nó corrente em um rodapé. No código abaixo os comentários completam a explicação do componente SAP Tree e o evento duplo clique.

Abap

*&---------------------------------------------------------------------*
*& Report  ZTREEVIEW
*&
*&---------------------------------------------------------------------*
*& Desenvolvimento Aberto
*& Treeview
*&---------------------------------------------------------------------*

REPORT  ZTREEVIEW.

* Declara componentes e eventos de botões
DATA: DISCO TYPE REF TO cl_gui_custom_container,
      Arvore TYPE REF TO cl_simple_tree_model,
      g_ok_code TYPE sy-ucomm.

DATA rodape TYPE string.

* Declara eventos para duplo clique

CLASS duploclique DEFINITION.

  PUBLIC SECTION.

    METHODS:
      handle_node_double_click
        FOR EVENT node_double_click
        OF cl_simple_tree_model
        IMPORTING node_key.

ENDCLASS.

* Implementação da classe de eventos

CLASS duploclique IMPLEMENTATION.

  METHOD handle_node_double_click.

    RODAPE = node_key.

  ENDMETHOD.

ENDCLASS.

* Chama evento em um ponto particular do programa.
CLASS cl_gui_cfw DEFINITION LOAD.

* Instacia da classe eventos.
DATA eventos TYPE REF TO duploclique.

START-OF-SELECTION.

* Cria objeto da classe
  CREATE OBJECT Eventos.

  CALL SCREEN 100.

MODULE STATUS_0100 OUTPUT.
*  SET PF-STATUS 'xxxxxxxx'.
*  SET TITLEBAR 'xxx'.

* Cria o SAP Tree
  IF ARVORE IS INITIAL.
    PERFORM criaArvore.
  ENDIF.

ENDMODULE.                 " STATUS_0100  OUTPUT

MODULE USER_COMMAND_0100.

* Declara variavel de captura do evento
  DATA: return_code TYPE i.

* chama o evento.

  CALL METHOD cl_gui_cfw=>dispatch
    IMPORTING
      return_code = return_code.

* Caso nennhum evento seja detectado limpa OK_CODE.
  IF return_code <> cl_gui_cfw=>rc_noevent.

    CLEAR g_ok_code.
    EXIT.

  ENDIF.

  CASE g_ok_code.

* Termina o programa e destroi os componentes
    WHEN 'BACK'.
      IF NOT DISCO IS INITIAL.

        CALL METHOD DISCO->free
          EXCEPTIONS
            cntl_system_error = 1
            cntl_error        = 2.

        CLEAR DISCO.
        CLEAR ARVORE.

      ENDIF.
      LEAVE PROGRAM.

  ENDCASE.

* Limpa o ok_code
  CLEAR g_ok_code.

ENDMODULE.

FORM criaArvore.

* Declara eventos
  DATA: event TYPE cntl_simple_event,
          events TYPE cntl_simple_events.

* Cria Objeto da classe SAP Tree
  CREATE OBJECT ARVORE
    EXPORTING
      NODE_SELECTION_MODE = cl_simple_tree_model=>node_sel_mode_single
    EXCEPTIONS
      illegal_node_selection_mode = 1.

* Cria objeto Custom Control
  CREATE OBJECT DISCO
    EXPORTING
      CONTAINER_NAME = 'DISCO'.

  CALL METHOD ARVORE->CREATE_TREE_CONTROL
    EXPORTING
      PARENT = DISCO.

* Adicona nodes

  PERFORM adicionaNodes.

* Cria eventos
  event-eventid = cl_simple_tree_model=>eventid_node_double_click.
  event-appl_event = 'X'.              " process PAI if event occurs

* Adiciona Eventos
  APPEND event TO events.

* Registra Eventos
  CALL METHOD ARVORE->set_registered_events
    EXPORTING
      events                    = events
    EXCEPTIONS
      illegal_event_combination = 1
      unknown_event             = 2.


* Adicina eventos na classe da aplicação para capturar evento duplo clique
  SET HANDLER eventos->handle_node_double_click FOR ARVORE.


  CALL METHOD ARVORE->EXPAND_NODE
    EXPORTING
      NODE_KEY = 'Root'.


ENDFORM.

FORM adicionaNodes.

* Insere node principal

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      NODE_KEY = 'Root'
      ISFOLDER = 'X'
      TEXT     = 'Discografia'.

* Insere nodes para as bandas

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'BANDA1'
      relative_node_key = 'Root'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = 'X'
      text              = 'Beatles'.

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'BANDA2'
      relative_node_key = 'Root'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = 'X'
      text              = 'Rolling Stones'.

* Insere Nodes para os Albuns

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'ALBUM1'
      relative_node_key = 'BANDA1'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = 'X'
      text              = 'Please, Please Me'.


  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'ALBUM2'
      relative_node_key = 'BANDA2'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = 'X'
      text              = 'The Rolling Stones'.

* Insere nodes para o Album 1

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA1'
      relative_node_key = 'ALBUM1'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = 'I Saw Her Standing There'.


  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA2'
      relative_node_key = 'ALBUM1'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = 'Misery'.

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA3'
      relative_node_key = 'ALBUM1'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = 'Anna (Go to Him)'.

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA4'
      relative_node_key = 'ALBUM1'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = '...'.

*  Insere node para o Album 2

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA5'
      relative_node_key = 'ALBUM2'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = 'Route 66'.

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA6'
      relative_node_key = 'ALBUM2'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = 'I Just Want to Make Love to You'.

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA7'
      relative_node_key = 'ALBUM2'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = 'Honest I Do'.

  CALL METHOD ARVORE->ADD_NODE
    EXPORTING
      node_key          = 'MUSICA8'
      relative_node_key = 'ALBUM2'
      relationship      = cl_simple_tree_model=>relat_last_child
      isfolder          = ''
      text              = '...'.

ENDFORM.

Visual – Treeview – ttk – Python – Linux

Publicado: 16 de abril de 2014 em Python

Em computação, um tree view (literalmente do inglês vista de árvore) é um elemento de interface gráfica (isto é um componente widget) que permite ao usuário mostrar dados hierárquicos em forma de árvore, expandir ou recolher os ramos e nós. Dependendo do wiget toolkit ou aplicação em uso, existem muitos estilos de apresentação gráfica de tree views.

TreeView

O Widget ttk.Treeview exibe uma coleção hierárquica de itens. Cada item tem um rótulo de texto, uma imagem opcional, e uma lista opcional de valores de dados. Os valores dados são exibidas em colunas sucessivas após o rótulo árvore.

Treeview

Treeview

Exemplo:

Neste exemplo usamos uma visão de arvore para exibir uma discografia musical, você pode abrir e fechar os nós do modelo de dados em visão de  árvore, um duplo clique do mouse em cada nó dispara um evento para que exibe a descrição do nó corrente em um rodapé.

Python

#!/usr/bin/env python
# -*- coding: latin-1 -*-
# Desenvolvimento Aberto
# Treeview.py

# importa modulo 

from Tkinter import *
from ttk import *

# Cria formulario
formulario = Tk()
formulario.title = "Desenvolvimento Aberto"

# declara variaveis e arrays
albumB = "Please, Please Me";
 
MusicaB = [  "I Saw Her Standing There",  "Misery",  "Anna (Go to Him)",
             "Chains" ,  "Boys" , "Ask Me Why",  "Please Please Me",  "Love Me Do" ,
             "P.S. I Love You",  "Baby It's You",  "Do You Want To Know A Secret?",
             "A Taste of Honey",  "There's A Place",  "Twist and Shout" ]
 
albumR = "The Rolling Stones";
 
MusicaR =[ "Route 66", "I Just Want to Make Love to You", "Honest I Do",
           "Mona (I Need You Baby)",  "You Can Make It If You Try", "Little by Little",
           "I\'m a King Bee", "Carol", "Tell Me (You \'re Coming Back)", "Can I Get a Witness",
           "Tell Me (You\'re Coming Back)",  "Walking the Dog" ]   
           
# Evento duplo clique do treeview
def duplo_clique(*args):
    item = disco.selection()[0]
    rodape["text"] = disco.item(item,"text")
                 
# Cria componentes
rotulo = Label(formulario, text="Duplo clique em um node da arvore:")
rodape = Label(formulario, text="Evento do mouse")
disco = Treeview(formulario) 

# Define tamanho da coluna
disco.column("#0",minwidth=0,width=250)
      
# Cria barra de rolagem      
barra = Scrollbar(formulario, orient='vertical', command=disco.yview)

# Adiciona barra de rolagem
disco.configure(yscroll=barra.set)
barra.pack( side = RIGHT, fill=Y )

# Cria cabeçario do treeview
disco.heading('#0', text='Primeiro Album', anchor='w')

# Insere Node principal
titulo = disco.insert('', 'end', text="Discografia", open=False)

# Insere nodes filhos
bandaB = disco.insert(titulo, 'end', text="Beatles")
bandaR = disco.insert(titulo, 'end', text="Rolling Stones")

# Insere variaveis
album1 = disco.insert(bandaB, 'end', text=albumB)
album2 = disco.insert(bandaR, 'end', text=albumR)

# Insere Arrays
b=0
r=0

for b in MusicaB:
    disco.insert(album1, 'end', text=b)
    
for r in MusicaR:
    disco.insert(album2, 'end', text=r)    
    
# Cria evento duplo clique
disco.bind("<Double-Button-1>", duplo_clique)    

# Posiciona componentes no formulario
rotulo.pack(padx=20, pady=5)
disco.pack(padx=20, pady=10)
rodape.pack(padx=20, pady=5)

# loop do tcl
mainloop()

Em computação, um tree view (literalmente do inglês vista de árvore) é um elemento de interface gráfica (isto é um componente widget) que permite ao usuário mostrar dados hierárquicos em forma de árvore, expandir ou recolher os ramos e nós. Dependendo do wiget toolkit ou aplicação em uso, existem muitos estilos de apresentação gráfica de tree views.

CTreeCtrl

Um controle de árvore, representada pela classe CTreeCtrl, é uma janela que exibe uma lista hierárquica de itens, tais como os títulos de um documento, as entradas em um índice, ou os arquivos e diretórios em um disco. Cada item consiste em um rótulo e uma imagem bitmap opcional e cada item pode ter uma lista de subitens associados. Ao clicar em um item, o usuário pode expandir e recolher a lista associada de subitens. A árvore de diretórios no painel do lado esquerdo do File Explorer é um exemplo de um controle de árvore.

HTREEITEM

Representa um nó na arvore de controle.

GetSelectedItem

Retorna o item selecionado da arvore de controle.

GetItemText

Retorna o texto de um item.

Visual Studio

Para usar um Tree Control siga os seguintes passos:

  1. Crie um novo projeto MFC Dialog Based.
  2. Arraste para o dialogo dois componentes Static Text e um Componente Tree Control.
  3. Mude a propriedade Has_Button do componente Tree Control para True.
  4. Crie uma variável chamada m_disco para o Tree Control.
  5. Mude a propriedade ID de um dos Static Text para IDC_Rodape.
  6. Disponha os componentes como na figura abaixo:

    treecontrol-design

    Tree Control – Design

  7. Crie um evento NM_DBCLK para o Tree Control.
  8. Preencha seu código gerado automaticamente com os trechos marcados do código abaixo.
treecontrol-programa

Tree Control – programa

 

Exemplo:

Neste exemplo usamos uma visão de arvore para exibir uma discografia musical, você pode abrir e fechar os nós do modelo de dados em visão de  árvore, um duplo clique do mouse em cada nó dispara um evento para que exibido a descrição do nó corrente em um rodapé.

C++

// Código gerado automaticamente
// treeviewcppDlg.cpp : implementation file
//

#include "stdafx.h"
#include "treeviewcpp.h"
#include "treeviewcppDlg.h"
#include "afxdialogex.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

// Desenvolvimento Aberto
// Inicializa constantes, variaveis e arrays

const int itemb = 14;
const int itemr = 12;

CString albumB = L"Please, Please Me";

CString MusicaB[itemb] = { L"I Saw Her Standing There", L"Misery", L"Anna (Go to Him)",
                      L"Chains", L"Boys", L"Ask Me Why", L"Please Please Me", L"Love Me Do",
                      L"P.S. I Love You", L"Baby It's You", L"Do You Want To Know A Secret?",
                      L"A Taste of Honey", L"There's A Place", L"Twist and Shout" };

CString albumR = L"The Rolling Stones";

CString MusicaR[itemr] = { L"Route 66", L"I Just Want to Make Love to You", L"Honest I Do",
                      L"Mona (I Need You Baby)", L"You Can Make It If You Try", L"Little by Little",
                      L"I\'m a King Bee", L"Carol", L"Tell Me (You \'re Coming Back)", L"Can I Get a Witness",
                      L"Tell Me (You\'re Coming Back)", L"Walking the Dog" };

CtreeviewcppDlg::CtreeviewcppDlg(CWnd* pParent /*=NULL*/)
	: CDialogEx(CtreeviewcppDlg::IDD, pParent)
{
	m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);
}

void CtreeviewcppDlg::DoDataExchange(CDataExchange* pDX)
{
	CDialogEx::DoDataExchange(pDX);
	DDX_Control(pDX, IDC_TREE1, m_disco);
}

BEGIN_MESSAGE_MAP(CtreeviewcppDlg, CDialogEx)
	ON_WM_PAINT()
	ON_WM_QUERYDRAGICON()
	ON_NOTIFY(NM_DBLCLK, IDC_TREE1, &CtreeviewcppDlg::OnNMDblclkTree1)
END_MESSAGE_MAP()

BOOL CtreeviewcppDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	SetIcon(m_hIcon, TRUE);			// Set big icon
	SetIcon(m_hIcon, FALSE);		// Set small icon

	// Desenvolvimento Aberto
	// Inicializa Tree Control

	// Cria nós da arvore
	HTREEITEM arvore, bandasB, bandasR, albunsB, albunsR, listaB, listaR ;

	// Insere nós
	arvore = m_disco.InsertItem(L"Discografia", TVI_ROOT);

	bandasB = m_disco.InsertItem(L"Beatles", arvore);
	bandasR = m_disco.InsertItem(L"Rolling Stones", arvore);

	albunsB = m_disco.InsertItem(albumB, bandasB);
	albunsR = m_disco.InsertItem(albumR, bandasR);

	for (int i = 0; i < itemb; i++)
	{
		listaB = m_disco.InsertItem(MusicaB[i], albunsB);
	}

	for (int i = 0; i < itemr; i++)
	{
		listaR = m_disco.InsertItem(MusicaR[i], albunsR);
	}

	return TRUE;
}

void CtreeviewcppDlg::OnPaint()
{
	if (IsIconic())
	{
		CPaintDC dc(this);

		SendMessage(WM_ICONERASEBKGND, reinterpret_cast<WPARAM>(dc.GetSafeHdc()), 0);

		int cxIcon = GetSystemMetrics(SM_CXICON);
		int cyIcon = GetSystemMetrics(SM_CYICON);
		CRect rect;
		GetClientRect(&rect);
		int x = (rect.Width() - cxIcon + 1) / 2;
		int y = (rect.Height() - cyIcon + 1) / 2;

		dc.DrawIcon(x, y, m_hIcon);
	}
	else
	{
		CDialogEx::OnPaint();
	}
}

HCURSOR CtreeviewcppDlg::OnQueryDragIcon()
{
	return static_cast<HCURSOR>(m_hIcon);
}

// Desenvolvimento Aberto
// Evento duplo clique do tree control

void CtreeviewcppDlg::OnNMDblclkTree1(NMHDR *pNMHDR, LRESULT *pResult)
{	

	// Captura item selecionado
	HTREEITEM hItem = m_disco.GetSelectedItem();

	// retorna texto do item
	CString item;
	item = m_disco.GetItemText(hItem);

	// Adiona texto em controle statico
	GetDlgItem(IDC_Rodape)->SetWindowTextW(item);

	*pResult = 0;
}

Visual – TreeView – TreeNode – C#

Publicado: 15 de abril de 2014 em C#

Em computação, um tree view (literalmente do inglês vista de árvore) é um elemento de interface gráfica (isto é um componente widget) que permite ao usuário mostrar dados hierárquicos em forma de árvore, expandir ou recolher os ramos e nós. Dependendo do wiget toolkit ou aplicação em uso, existem muitos estilos de apresentação gráfica de tree views.

TreeView

Exibe uma coleção hierárquica de itens rotulados, cada um representado por um TreeNode.

TreeNode

Representa um de um TreeView.

treeviewcs

Tree View

 

Exemplo:

Neste exemplo usamos uma visão de arvore para exibir uma discografia musical, você pode abrir e fechar os nós do modelo de dados em visão de  árvore, um duplo clique do mouse em cada nó dispara um evento para que exibido a descrição do nó corrente em um rodapé.

C#

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Arvorecs
{
    public partial class Form1 : Form
    {
        // Declara componentes
        Label rotulo;
        Label rodape;
        TreeView disco;

        // Declara variaveis e Arrays
        String albumB = "Please, Please Me";

        String[] MusicaB = {  "I Saw Her Standing There",  "Misery",  "Anna (Go to Him)",
                "Chains" ,  "Boys" , "Ask Me Why",  "Please Please Me",  "Love Me Do" ,
                "P.S. I Love You",  "Baby It's You",  "Do You Want To Know A Secret?",
                "A Taste of Honey",  "There's A Place",  "Twist and Shout"  };

        String albumR = "The Rolling Stones";

        String[] MusicaR ={ "Route 66", "I Just Want to Make Love to You", "Honest I Do",
               "Mona (I Need You Baby)",  "You Can Make It If You Try", "Little by Little",
               "I\'m a King Bee", "Carol", "Tell Me (You \'re Coming Back)", "Can I Get a Witness",
               "Tell Me (You\'re Coming Back)",  "Walking the Dog" };   


        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Shown(object sender, EventArgs e)
        {
            // Define propriedades do formulario
            this.Text = "DA - TreeView";
            this.Size = new Size(350, 600);

            // Cria componentes
            rotulo = new Label();
            rodape = new Label();
            disco = new TreeView();
            
            // Define texto dos componentes
            rotulo.Text = "Duplo clique em um nó da arvore:";
            rodape.Text = "Evento do mouse";

            // Define tamanho dos componentes
            rotulo.Size = new Size(300, 20);
            rodape.Size = new Size(300, 20);
            disco.Size = new Size(300, 500);

            // Alinha textos
            rotulo.TextAlign = ContentAlignment.TopCenter;
            rodape.TextAlign = ContentAlignment.TopCenter;

            // Posiciona componentes
            rotulo.Location = new Point(10, 10);
            rodape.Location = new Point(10, 540);
            disco.Location = new Point(10, 30);

            // Cria nós da arvore
            TreeNode titulo = new TreeNode("Discografia");
            TreeNode b1 = new TreeNode("Beatles");
            TreeNode b2 = new TreeNode("Rolling Stones");

            TreeNode a1 = new TreeNode(albumB);
            TreeNode a2 = new TreeNode(albumR);

            // Adiciona nós na arvore e sub-nós
            titulo.Nodes.Add(b1);
            titulo.Nodes.Add(b2);

            b1.Nodes.Add(a1);
            b2.Nodes.Add(a2);

            TreeNode m1 = new TreeNode();
            TreeNode m2 = new TreeNode();

            for (int i = 0;  i < MusicaB.Length ; i++)
            {
                m1 = new TreeNode(MusicaB[i]);
                a1.Nodes.Add(m1);

            }

            for (int i = 0; i < MusicaR.Length; i++)
            {
                m2 = new TreeNode(MusicaR[i]);
                a2.Nodes.Add(m2);

            }

           // Adiciona nó principal
            disco.Nodes.Add(titulo);

            // Evento da arvore
            disco.DoubleClick += new System.EventHandler(this.disco_DoubleClick);

            // Adiciona componentes no formulario
            this.Controls.Add(rotulo);
            this.Controls.Add(rodape);
            this.Controls.Add(disco);

        }

        private void disco_DoubleClick(object sender, EventArgs e)
        {
            // Seleciona nó corrente
            rodape.Text = disco.SelectedNode.ToString();
        }
    }
}

Em computação, um tree view (literalmente do inglês vista de árvore) é um elemento de interface gráfica (isto é um componente widget) que permite ao usuário mostrar dados hierárquicos em forma de árvore, expandir ou recolher os ramos e nós. Dependendo do wiget toolkit ou aplicação em uso, existem muitos estilos de apresentação gráfica de tree views.

JTree

Um controle que exibe um conjunto de dados hierárquicos como um esboço.

DefaultTreeModel

Um modelo simples de dados em árvore que usa nós em uma árvore.

DefaultMutableTreeNode

É um  de uso geral em uma estrutura de dados em árvore.

jtree

JTree – Tree View

 

Exemplo:

Neste exemplo usamos uma visão de arvore para exibir uma discografia musical, você pode abrir e fechar os nós do modelo de dados em visão de  árvore, um duplo clique do mouse em cada nó dispara um evento para que exibido a descrição do nó corrente em um rodapé.

Java

import java.awt.Component;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.ScrollPane;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTree;
import javax.swing.tree.DefaultMutableTreeNode;
import javax.swing.tree.DefaultTreeModel;
import javax.swing.tree.TreeSelectionModel;

public class Arvore {

	// Declara componentes
	JLabel rotulo;
	JLabel rodape;
	JTree disco;
	DefaultTreeModel modelo;
	DefaultMutableTreeNode titulo;

	// Declara variaveis e Arrays
	String albumB = "Please, Please Me";

	String[] MusicaB = {  "I Saw Her Standing There",  "Misery",  "Anna (Go to Him)",
			    "Chains" ,  "Boys" , "Ask Me Why",  "Please Please Me",  "Love Me Do" ,
			    "P.S. I Love You",  "Baby It's You",  "Do You Want To Know A Secret?",
			    "A Taste of Honey",  "There's A Place",  "Twist and Shout"	};

	String albumR = "The Rolling Stones";

	String [] MusicaR ={ "Route 66", "I Just Want to Make Love to You", "Honest I Do",
			   "Mona (I Need You Baby)",  "You Can Make It If You Try", "Little by Little",
			   "I\'m a King Bee", "Carol", "Tell Me (You \'re Coming Back)", "Can I Get a Witness",
			   "Tell Me (You\'re Coming Back)",  "Walking the Dog" };   

	public Container criaPainel()
	{
		// Cria painel
		JPanel painel = new JPanel();

		// Define laylout
		painel.setLayout(new BoxLayout(painel, BoxLayout.PAGE_AXIS));
		painel.setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20));

		// Cria componentes
		rotulo = new JLabel("Duplo clique em um nó da arvore:");
		rodape = new JLabel("Evento do mouse");

		titulo = new DefaultMutableTreeNode("Discografia");
		modelo = new DefaultTreeModel(titulo);
		disco = new JTree(modelo);

		// Alinha componente4s
		rotulo.setAlignmentX(Component.CENTER_ALIGNMENT);
		rodape.setAlignmentX(Component.CENTER_ALIGNMENT);

		// Cria evento do mouse
		disco.addMouseListener(new MouseAdapter()
		{
			// Duplo clique do mouse
			public void mouseClicked(MouseEvent e)
			{
				if (e.getClickCount() == 2 )
				{
					// retorna texto da arvore
					rodape.setText(disco.getLastSelectedPathComponent().toString());
				}

			}
		});

		// Define propriedades da arvore
		disco.setEditable(true);
                  disco.getSelectionModel().setSelectionMode(TreeSelectionModel.SINGLE_TREE_SELECTION);
                  disco.setShowsRootHandles(true);

                  // Cria painel de rolagem
		ScrollPane barra = new ScrollPane();

		// Define tamanho do painel
		barra.setPreferredSize(new Dimension(300, 500));

		// Cria Nodes da arvore
		DefaultMutableTreeNode b1 = new DefaultMutableTreeNode("Beatles");
		DefaultMutableTreeNode b2 = new DefaultMutableTreeNode("Rolling Stones");

		DefaultMutableTreeNode a1 = new DefaultMutableTreeNode(albumB);
		DefaultMutableTreeNode a2 = new DefaultMutableTreeNode(albumR);

		DefaultMutableTreeNode m1;
		DefaultMutableTreeNode m2; 

		// Adiciona nodes na arvore
		titulo.add(b1);
		titulo.add(b2);

		b1.add(a1);
		b2.add(a2);

		// Adicina lista de musicas
		for (int i = 0; i < MusicaB.length; i++)
		{
			m1 = new DefaultMutableTreeNode (MusicaB[i]);
			a1.add(m1);
		}

		for (int i = 0; i < MusicaR.length; i++)
		{
			m2 = new DefaultMutableTreeNode (MusicaR[i]);
			a2.add(m2);
		}

		// Adiciona arvore ao painel de rolagem
		barra.add(disco);	

		// Adiciona componentes ao painel
		painel.add(rotulo);
		painel.add(Box.createVerticalStrut(10));
		painel.add(barra);
		painel.add(Box.createVerticalStrut(10));
		painel.add(rodape);

		return painel;

	}

	public static void criaGUI()
	{
		// Cria formulario
		JFrame formulario = new JFrame("DA - JTree");
		formulario.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		// Cria classe arvore
		Arvore arvore = new Arvore();

		formulario.setContentPane(arvore.criaPainel());

		formulario.pack();

		formulario.setVisible(true);

	}

	public static void main(String[] args) {

		// Thread do swing
		javax.swing.SwingUtilities.invokeLater(new Runnable() {

			@Override
			public void run() {				

				// Chama a GUI
				criaGUI();
			}
		});

	}

}

O ECMAScript 3 define uma série de funções de manipulação de matriz úteis sobre Array.prototype, o que significa que estão disponíveis como métodos de qualquer matriz. Aqui vamos mostrar alguns métodos uteis.

arrays3

Manipulando Matrizes

 

UnShift

Insere um elemento no inicio da matriz.

Shift

Remove um elemento no inicio da matriz.

Splice

Remove um certo numero de elementos de uma matriz

Slice

Retorna uma substring de uma matriz.

Concat

Concatena uma  ou mais strings a uma matriz.

Exemplo:

Neste exemplo criamos uma matriz e testamos todos os métodos acima.

Html / Javascript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto</h2>
<h3>UnShift - Shift, Splice, Slice, Concat</h3>
<h4>JavaScript</h4>
<br>

<pre>
<script>

var valor = ["D", "C", "B", "A"];

document.writeln("Valor da Array:");
document.writeln(valor);

//   Unshift
document.writeln("\nUSnhift - insere um elemento no incio da Array");

valor.unshift("E");

document.writeln(valor);

//  Shift
document.writeln("\nShift - remove um elemento no incio da Array");

valor.shift();

document.writeln(valor);

//  Splice
document.writeln("\nSplice - remove um numero de elementos da Array");

valor.splice(2);

document.writeln(valor);

//  Slice
document.writeln("\nSlice - retorna uma substring da Array");

document.writeln(valor.slice(0,1));

//  Concat
document.writeln("\nConcat - concatena uma string a uma Array");

document.writeln(valor.concat("B","A"));

</script>
</pre>

</body>

</html>

O ECMAScript 3 define uma série de funções de manipulação de matriz úteis sobre Array.prototype, o que significa que estão disponíveis como métodos de qualquer matriz. Aqui vamos mostrar alguns métodos uteis.

Join

Converte todos os elementos de uma matriz e os concatena.

Reverse

Inverte a ordem dos elementos de uma matriz.

Sort

Ordena os elementos de uma matriz.

Push

Adiciona um ou mais elementos em uma matriz.

Pop

Remove o ultimo elemento de uma matriz.

aarays-js

Matriz

Exemplo:

Neste exemplo criamos uma matriz e testamos todos os elementos acima.

Html / Javascript

<!DOCTYPE html>
<html>

<head>
   <title>Desenvolvimento Aberto</title>
</head>

<body>

<h2>Desenvolvimento Aberto -Join - Reverse - Sort </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

var valor = ["D", "C", "B","A"];

// Exibe Array
document.writeln("Valores da Array:");
document.writeln(valor);

//  Join
document.writeln("\nComando Join une os valores de uma Array:");
document.writeln(valor.join(" - "));

//  Reverse
document.writeln("\nComando Reverse inverte os valores de uma Array:");
document.writeln(valor.reverse());

//  Sort
document.writeln("\nComando Sort ordena os valores de uma Array:");
document.writeln(valor.sort());

//  Pop
document.writeln("\nComando Pop deleta um valor de uma Array:");

valor.pop();

document.writeln(valor);

//  Push
document.writeln("\nComando Pop insere um valor de uma Array:");

valor.push("D");

document.writeln(valor);

</script>
</pre>

</body>

</html>