Visual – JTree – TreeView – DefaultTreeModel, DefaultMutableTreeNode – Java

Publicado: 15 de abril de 2014 em Java
0

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 nó 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();
			}
		});

	}

}

Websites – Manipulando Matrizes – parte 2 – UnShift – Shift, Splice, Slice e Concat – Javascript – Linux

Publicado: 14 de abril de 2014 em JavaScript
0

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>

Websites – Manipulação de Matrizes – Join, Reverse, Sort, Push, Pop – Javascript – Linux

Publicado: 13 de abril de 2014 em JavaScript
0

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>

Visual – List View Control – ListViewItem – Grid – C#

Publicado: 12 de abril de 2014 em C#
0

Ao contrario da linguagem de programação Java o C# não possui um controle de grid para se trabalhar desconectado de um banco de dados, para realizar esta funcionalidade o C# permite usar o controle utilizado para exibição de arquivos do Windows Explorer para simular uma exibição de grade de dados utilizando Arrays ou Strings.

listview-cs

List View

 

ListView

Representa um controle  de lista de exibição do Windows , que exibe uma coleção de itens que podem ser exibidos usando um dos quatro pontos de vista de diferentes estilos contidos no sistema operacional: Ícones grandes, Ícones pequenos, lista, detalhes.

Exemplo:

Neste exemplo usamos um controle de lista para simular uma grade de dados com conteúdo  baseado em caracteres literais.

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 tabela_cs
{
    public partial class Form1 : Form
    {
        // Declara componente
        ListView tabela;
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Shown(object sender, EventArgs e)
        {
            // Define propriedades do formulario
            this.Text = "DA - List View Control - Grid";
            this.Size = new Size(500, 250);

            // Cria componente de lista
            tabela = new ListView();

            // Define tamanho e localização
            tabela.Size = new Size(440, 170);
            tabela.Location = new Point(20, 20);
            
            // Define estilo de exibição
            tabela.View = View.Details;
            
            // Define estilo do conteudo
            tabela.GridLines = true;
            tabela.FullRowSelect = true;
            tabela.AllowColumnReorder = true;

            // Adiciona colunas
            tabela.Columns.Add("Album");
            tabela.Columns.Add("Artista");
            tabela.Columns.Add("Musica");
            tabela.Columns.Add("Ano");
            tabela.Columns.Add("Videoclip");

            // Cria itens e conteudo de linhas
            ListViewItem item1 = new ListViewItem("Nevermind", 0);
            ListViewItem item2 = new ListViewItem("Ten", 1);
            ListViewItem item3 = new ListViewItem("Facelift", 2);
            ListViewItem item4 = new ListViewItem("Badmotorfinger", 3);
            ListViewItem item5 = new ListViewItem("Sweet Oblivion", 4);
            ListViewItem item6 = new ListViewItem("Core", 5);

            // Adiciona conteudo das colunas
            item1.SubItems.Add("Nirvana");
            item1.SubItems.Add("Smell Like Teen Spirit");
            item1.SubItems.Add("1991");
            item1.SubItems.Add("Sim");
         
            item2.SubItems.Add("Pearl Jam");
            item2.SubItems.Add("Jeremy");
            item2.SubItems.Add("1991");
            item2.SubItems.Add("Sim");

            item3.SubItems.Add("Alice in Chains");
            item3.SubItems.Add("Man in the Box");
            item3.SubItems.Add("1990");
            item3.SubItems.Add("Sim");
         
            item4.SubItems.Add("SoundGarden");
            item4.SubItems.Add("Outshined");
            item4.SubItems.Add("1991");
            item4.SubItems.Add("Sim");

            item5.SubItems.Add("Screaming Trees");
            item5.SubItems.Add("Nearly I Lost You");
            item5.SubItems.Add("1993");
            item5.SubItems.Add("Sim");

            item6.SubItems.Add("Stone Temple Pilots");
            item6.SubItems.Add("Plush");
            item6.SubItems.Add("1992");
            item6.SubItems.Add("Sim");

            // Arranja a grade de dados
            tabela.Items.AddRange(new ListViewItem[] { item1, item2, item3, item4, item5, item6 });

            // Adiciona grade ao formulario
            this.Controls.Add(tabela);
            
        }
    }
}

Visual – MFC – LIst Control – Grid – C++

Publicado: 12 de abril de 2014 em C/C++
0

O Controle de lista para MFC, o List Control da classe, CListrCtrl é amplamente utilizado na aplicação GUI, pois suporta relatório de lista de exibição. Isso permite que os usuários tenham de linhas e colunas que simulam como funcionalidade uma grade de dados.

CListCtrl

Use um controle de lista para exibir qualquer arranjo de ícones com rótulos, como no File Explorer, ou listas de colunas de texto, com ou sem ícones. Para uma descrição das quatro possíveis “vistas” (não confundir com vistas MFC), você pode ter em um controle de lista – exibição de ícones, exibição em tamanho pequeno ícone, exibição de lista, e exibição de relatório.

listcontrol-programa

List Control

Visual Studio

Para usar o list Control siga os seguintes passos:

  1. Crie um novo projeto MFC Dialog Based.
  2. Arraste para o dialogo um componente List Control, use a figura abaixo para o design:

    listcontrol-design

    List Control – Design

  3. Crie uma variável para este componente chamada: m_tabela.
  4. No evento de inicialização OnInital, complete seu código gerado automaticamente com os trechos marcados do código abaixo:

Exemplo:

Neste exemplo usamos um List Control para simular uma grade de dados.

C++

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

#include "stdafx.h"
#include "gridcpp.h"
#include "gridcppDlg.h"
#include "afxdialogex.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

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

void CgridcppDlg::DoDataExchange(CDataExchange* pDX)
{
	CDialogEx::DoDataExchange(pDX);
	DDX_Control(pDX, IDC_LIST1, m_tabela);
}

BEGIN_MESSAGE_MAP(CgridcppDlg, CDialogEx)
	ON_WM_PAINT()
	ON_WM_QUERYDRAGICON()
END_MESSAGE_MAP()

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

	SetIcon(m_hIcon, TRUE);
	SetIcon(m_hIcon, FALSE);		

	// Desenvolvimento Aberto
	// nosso código começa aqui.

	// Define tipo de visualização para detalhes
	m_tabela.SetView(LV_VIEW_DETAILS);

	// Insere colunas
	m_tabela.InsertColumn(0, L"Album", LVCFMT_LEFT, 90, -1);
	m_tabela.InsertColumn(1, L"Artista", LVCFMT_LEFT, 110, -1);
	m_tabela.InsertColumn(2, L"Musica", LVCFMT_LEFT, 120, -1);
	m_tabela.InsertColumn(3, L"Ano", LVCFMT_LEFT, 50, -1);
	m_tabela.InsertColumn(4, L"VideoClip", LVCFMT_LEFT, 80, -1);

	// Define visual para grid
	m_tabela.SendMessage(LVM_SETEXTENDEDLISTVIEWSTYLE, 0, LVS_EX_GRIDLINES);

	// Cria item
	LVITEM lvItem;

	// cria estrutura para inserir o item
	typedef struct _LVITEM {
		UINT mask;
		int iItem;
		int iSubItem;
		UINT state;
		UINT stateMask;
		LPTSTR pszText;
		int cchTextMax;
		int iImage;
		LPARAM lParam;
    #if (_WIN32_IE >= 0x0300)
		int iIndent;
    #endif
	} LVITEM, FAR *LPLVITEM;

	// Define variaveis de itens
	int InsertItem(const LVITEM* pItem);
	int nItem;

	// Insere linha
	lvItem.mask = LVIF_TEXT;
	lvItem.iItem = 0;
	lvItem.iSubItem = 0;
	lvItem.pszText = L"Nevermind";
	nItem = m_tabela.InsertItem(&lvItem);

	// Insere colunas
	m_tabela.SetItemText(nItem, 1, L"Nirvana");
	m_tabela.SetItemText(nItem, 2, L"Smell Like Teen Spirit");
	m_tabela.SetItemText(nItem, 3, L"1991");
	m_tabela.SetItemText(nItem, 4, L"Sim");

	// Insere linha 2
	lvItem.mask = LVIF_TEXT;
	lvItem.iItem = 0;
	lvItem.iSubItem = 0;
	lvItem.pszText = L"Ten";
	nItem = m_tabela.InsertItem(&lvItem);

	// Insere colunas
	m_tabela.SetItemText(nItem, 1, L"Pearl Jam");
	m_tabela.SetItemText(nItem, 2, L"Jeremy");
	m_tabela.SetItemText(nItem, 3, L"1991");
	m_tabela.SetItemText(nItem, 4, L"Sim");

	// Insere linha 3
	lvItem.mask = LVIF_TEXT;
	lvItem.iItem = 0;
	lvItem.iSubItem = 0;
	lvItem.pszText = L"Badmotorfinger";
	nItem = m_tabela.InsertItem(&lvItem);

	// Insere colunas
	m_tabela.SetItemText(nItem, 1, L"SoundGarden");
	m_tabela.SetItemText(nItem, 2, L"Outshined");
	m_tabela.SetItemText(nItem, 3, L"1991");
	m_tabela.SetItemText(nItem, 4, L"Sim");

	// Insere linha 4
	lvItem.mask = LVIF_TEXT;
	lvItem.iItem = 0;
	lvItem.iSubItem = 0;
	lvItem.pszText = L"Sweet Oblivion";
	nItem = m_tabela.InsertItem(&lvItem);

	// Insere colunas
	m_tabela.SetItemText(nItem, 1, L"Screaming Trees");
	m_tabela.SetItemText(nItem, 2, L"Nearly I Lost You");
	m_tabela.SetItemText(nItem, 3, L"1993");
	m_tabela.SetItemText(nItem, 4, L"Sim");

	// Insere linha 5
	lvItem.mask = LVIF_TEXT;
	lvItem.iItem = 0;
	lvItem.iSubItem = 0;
	lvItem.pszText = L"Core";
	nItem = m_tabela.InsertItem(&lvItem);

    // Insere colunas
	m_tabela.SetItemText(nItem, 1, L"Stone Temple Pilots");
	m_tabela.SetItemText(nItem, 2, L"Plush");
	m_tabela.SetItemText(nItem, 3, L"1992");
	m_tabela.SetItemText(nItem, 4, L"Sim");

	return TRUE;
}

void CgridcppDlg::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 CgridcppDlg::OnQueryDragIcon()
{
	return static_cast<HCURSOR>(m_hIcon);
}

Visual – JTable – Table Column – Java

Publicado: 11 de abril de 2014 em Java
0

O JTable é usado para exibir e editar tabelas bidimensionais regulares de células. O JTable tem muitas facilidades que tornam possível personalizar seu processamento e edição, mas fornece padrões para esses recursos para que tabelas simples possam ser configuradas facilmente.

TableColumn

Uma TableColumn representa todos os atributos de uma coluna em um JTable, como largura, expansão,  largura mínima e máxima. Além disso, o TableColumn oferece vagas para um processador e um editor que pode ser usado para exibir e editar os valores nesta coluna.

jtable

JTable

Exemplo:

Neste exemplo criamos uma variável Array responsável pela linha de titulo da tabela e um objeto vetor responsável pelos dados da tabela e os exibimos na grade de dados.

Java

import java.awt.Container;
import java.awt.Dimension;

import javax.swing.BorderFactory;
import javax.swing.BoxLayout;
import javax.swing.DefaultCellEditor;
import javax.swing.JCheckBox;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.table.TableColumn;


public class Tabela
{
	// Declara componentes	
	JTable tabela;
	
	// Declara Array e Matriz
	String colunas[] =  { "Album", "Artista",  "Musica", "Ano", "VideoClip" };
	
	Object  dados [][] = 		
	{			
		{"Nevermind", "Nirvana", "Smell Like Teen Spirit", new Integer(1991), new Boolean (true)},
		{"Ten", "Pearl Jam", "Jeremy", new Integer(1991), new Boolean (true)},
		{"Facelift", "Alice in Chains", "Man in the Box", new Integer(1990), new Boolean (true)},
		{"Badmotorfinger", "SoundGarden", "Outshined", new Integer(1991), new Boolean (true)},
		{"Sweet Oblivion", "Screaming Trees", "Nearly I Lost You", new Integer(1993), new Boolean (true)},
		{"Core", "Stone Temple Pilots", "Plush", new Integer(1992), new Boolean (true)},
			
	};
	
	public Container criaPainel()
	{
		// Cria painel
		JPanel painel = new JPanel();
		
		// Define Layout
		painel.setLayout(new BoxLayout(painel, BoxLayout.PAGE_AXIS));
		painel.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
		painel.setOpaque(true);
		
		// Cria tabela
		tabela = new JTable(dados, colunas);		
		
		// Modifica ultima coluna
		JCheckBox box = new JCheckBox();
		TableColumn videoclip = tabela.getColumnModel().getColumn(4);
		videoclip.setCellEditor(new DefaultCellEditor(box));
		
		tabela.setPreferredScrollableViewportSize(new Dimension(600, 50));
		
		
		// Cria barra de rolagem
		JScrollPane barra = new JScrollPane(tabela);
			
		// Adiciona barra ao painel
		painel.add(barra);
		
		return painel;
		
	}
	
	public static void criaGUI()
	{
		// Cria formulario
		JFrame formulario = new JFrame("DA - Tabela - JTable");
		formulario.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		
		// Instancia classe 
		Tabela tab = new Tabela();
		formulario.setContentPane(tab.criaPainel());
		
		formulario.setSize(500, 300);
		formulario.setVisible(true);
	}

	public static void main(String[] args) {
		
		javax.swing.SwingUtilities.invokeLater(new Runnable() {
			
			@Override
			public void run() {
				
				// Cria GUI
				criaGUI();
				
			}
		});

	}

}

Websites – Objetos – Getter e Setter – JavaScript – Linux

Publicado: 11 de abril de 2014 em JavaScript
0

Assim como é comum métodos Getter e Setter para as linguagens de programação C++ e Java, também podemos criar métodos Getter e Setter para objetos JavaScript, entretanto precisamos respeitar as diferenças do conceito de objeto para a linguagem JavaScript. Um objeto em JavaScript tem propriedades associadas a ele. Uma propriedade de um objeto pode ser explicada como uma variável que é ligada ao objeto.

getter-setter

Getter e Setter

 

Objetos

A linguagem JavaScript é projetada com base em um simples paradigma orientado a objeto. Um objeto é uma coleção de propriedades, e uma propriedade é uma associação entre um nome e um valor. Um valor de propriedade pode ser uma função, que é então considerada um método do objeto. Além dos objetos que são pré-definidos no browser, você pode definir seus próprios objetos.

Getter

Um getter é um método que obtém o valor de uma propriedade específica.

Setter

Um setter é um método que define o valor de uma propriedade específica.

Exemplo:

Neste exemplo criamos um objeto com uma única propriedade e métodos getter e setter para manipular sua propriedade.

Html / JavaScript

<!DOCTYPE html>
<html>

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

<body>

<h2>Desenvolvimento Aberto -Getter e Setter </h2>
<br>
<h3>JavaScript</h3>
<br>

<pre>
<script>

// Cria objeto com getter and Setter

var objeto =
{
    nome:"", 

    get retorna() { return this.nome; },

    set adiciona(x) { this.nome = x; }

};

// Seta nome do objeto - Setter
objeto.adiciona = "Desenvolvimento Aberto";

// Recupera nome do objeto - Getter
document.writeln("Objeto - O metodo Setter adiciona o conteudo");
document.writeln("Objeto - O metodo Getter retorna o conteudo: " + objeto.retorna);
document.writeln("\nA propriedade nome do Objeto tamb&#233m &#233: " + objeto.nome);

</script>
</pre>

</body>

</html>

 

Visual – MFC – Picture Control – CStatic – HBITMAP – C++

Publicado: 11 de abril de 2014 em C/C++
0

Uma imagem digital é a representação de uma imagem bidimensional usando números binários codificados de modo a permitir seu armazenamento, transferência, impressão ou reprodução, e seu processamento por meios eletrônicos. Há dois tipos fundamentais de imagem digital. Uma é do tipo rastreio (raster) e outra do tipo vetorial. Uma imagem digital do tipo raster, ou bitmap, ou ainda matricial, é aquela que em algum momento apresenta uma correspondência bit-a-bit entre os pontos da imagem raster e os pontos da imagem reproduzida na tela de um monitor.

A imagem vetorial não é reproduzida necessariamente por aproximação de pontos, antes era destinada a ser reproduzida por plotters de traços que reproduziam a imagem por deslocamento de canetas-tinteiro.

Tipicamente, as imagens raster são imagens fotográficas, e as imagens vetoriais são desenhos técnicos de engenharia. Os quadrinhos ilustrados se assemelham em qualidade a imagens raster, mas são impressos em plotters que passaram a imprimir à maneira das impressoras comuns por jato de tinta.

picturecontrol-programa

CPicture Control – BMP – programa

 

CStatic

Fornece a funcionalidade de um controle estático do Windows.

HBITMAP

Um identificador para um bitmap. Para exibir imagens do tipo GIF e JPG use a classe CImage.

Visual Studio

Para usar o Picture Control siga os seguintes passos:

  1. Crie uma novo projeto MFC – Dialog Based.
  2. Arraste para o dialogo um componente Static Text e um Picture Control.
  3. Mude o ID do componente Picture Control para IDC_IMAGEM.
  4. Mude a propriedade Type do componente Picture Control para Bitmap.
  5. Use a figura abaixo para montar seu design:

    picturecontrol-design

    Picture Control – Design

  6. Efetue o download da imagem em: dowload da imagem.
  7. Abra a imagem no Paint Brush do Windows e a salve como tipo BMP em um diretório da sua escolha.
  8. Preencha seu código gerado automaticamente com os trechos do código abaixo.
  9. Lembre-se de trocar o diretório da imagem no código pelo seu diretório escolhido, em C++ as barras de diretório precisam ser invertidas.

Exemplo:

Neste exemplo usamos a mensagem de inicialização do Windows e um componente Picture Control para exibir uma imagem de Bitmap.

C++

// Código gerado autimaticamente
// ImagemcppDlg.cpp : implementation file
//

#include "stdafx.h"
#include "Imagemcpp.h"
#include "ImagemcppDlg.h"
#include "afxdialogex.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

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

void CImagemcppDlg::DoDataExchange(CDataExchange* pDX)
{
	CDialogEx::DoDataExchange(pDX);
}

BEGIN_MESSAGE_MAP(CImagemcppDlg, CDialogEx)
	ON_WM_PAINT()
	ON_WM_QUERYDRAGICON()

END_MESSAGE_MAP()

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

	SetIcon(m_hIcon, TRUE);
	SetIcon(m_hIcon, FALSE);		

	// Desenvolvimento Aberto
	// Este bloco exibe uma imagem no formato BMP

	CStatic * foto;
	CString imagem;

	foto = (CStatic *) GetDlgItem(IDC_IMAGEM);

	imagem = L"C:/Desenvolvimento Aberto/images.bmp";

	HBITMAP pic = (HBITMAP)LoadImage(NULL, imagem, IMAGE_BITMAP, 275, 183, LR_LOADFROMFILE);
	foto->SetBitmap(pic);

	return TRUE;  

}

void CImagemcppDlg::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 CImagemcppDlg::OnQueryDragIcon()
{
	return static_cast<HCURSOR>(m_hIcon);
}

Visual – Image – PhotoImage – PIL – Python Imaging Library – Python – Linux

Publicado: 11 de abril de 2014 em Python
0

PhotoImage

Você pode usar a classe PhotoImage sempre que você precisar exibir um ícone ou uma imagem em um aplicativo Tkinter. A classe PhotoImage é usada para exibir imagens (ou em tons de cinza ou imagens de cor real) em etiquetas, botões, telas e widgets de texto. Se você precisa trabalhar com outros formatos de arquivo, o Python Imaging Library (PIL) contém classes que permite carregar imagens em mais de 30 formatos e convertê-los em objetos de imagem compatíveis com Tkinter.

O PhotoImage  também pode ler arquivos GIF base64-codificado em Strings. Você pode usar isso para incorporar imagens no código fonte Python.

pil

PhotoImage – PIL

 

Como Instalar o PIL – Ubuntu 64

Para Instalar o Python Imaging Library (PIL) digite os seguintes comandos no terminal do Linux:


sudo apt-get build-dep python-imaging
sudo apt-get install libjpeg62 libjpeg62-dev

sudo ln -s /usr/lib/x86_64-linux-gnu/libz.so /usr/lib/libz.so
sudo ln -s /usr/lib/x86_64-linux-gnu/libjpeg.so /usr/lib/libjpeg.so
sudo ln -s /usr/lib/x86_64-linux-gnu/libfreetype.so /usr/lib/libfreetype.so

sudo apt-get install python-pip

sudo pip install PIL

sudo apt-get install python-imaging-tk

Exemplo:

Neste exemplo carregamos uma imagem cujo sua fonte é uma Url da internet e  a exibimos em um componente de imagem.

Python

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

# importa modulo

from Tkinter import *
from PIL import Image, ImageTk

# importa url e IO
import urllib2 as urllib
import cStringIO

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

# Cria componentes
rotulo = Label(formulario, text = "Imagem - Python Imaging Library")

# Cria Url
url = urllib.urlopen("https://desenvolvimentoaberto.org/wp-content/uploads/2014/04/images.jpg")

# Lê imagem da url
figura = cStringIO.StringIO(url.read())

# carrega a imagem
imagem = Image.open(figura)

# joga a imagem para o componente
foto = ImageTk.PhotoImage(imagem)

# Exibi a imagem
pic = Label(formulario, image = foto)

# Posiciona componentes
rotulo.pack(padx=20)
pic.pack(padx=20, pady=10)

# Loop do tcl
mainloop()

Visual – Picture Control – cl_gui_picture – load_picture_from_url – Custom Control – Complex Screen Element – Abap

Publicado: 10 de abril de 2014 em Abap
0

Picture Control

Você define uma instância com referência à classe cl_gui_picture. Uma instância SAP Picture administra todas as informações relativas a uma imagem na tela. Você pode chamar os métodos desta instância para definir e alterar os atributos da imagem.

Para usar o SAP Picture, você deve ter pelo menos o conhecimento básico de ABAP Objects. Você também deve estar familiarizado SAP Control Framework.

picturecontrol

SAP Picture Control

 

Lifetime Managment

O gerenciamento da vida útil controla o tempo de vida de um controle personalizado no frontend. Quando um controle chega ao fim da sua vida útil, o sistema SAP destrói o controle automaticamente no frontend.

load_picture_from_url 

Você pode usar esse método para exibir um gráfico em formato GIF, WMF, ou em formato JPG no SAP Picture.

Screen Painter

Para usar o SAP Picture Control siga os seguintes passos:

  1. Crie um programa chamado Zpicturecontrol.
  2. Crie uma tela de numero 100 para este programa no Screen Painter.
  3. Arraste um componente Text Fiels, um componente Box, um Componente Custom Control e um PushButton.
  4. Nomeie o Custom Control como IMAGEM, nomeie os outros componentes como desejar.
  5. No componente PushButton nomeie sua propriedade function code de F_SAIR.
  6. Use a figura abaixo para montar o design de tela:

    picturecontrol-design

    SAP Picture Control – Design

  7. Na aba Element List preencha ao campo tipo OK com OK_CODE.
  8. Na aba Flow Logic crie um PBO MODULE para seu programa, apagando o caractere de comentário da linha MODULE STATUS 100 e clique duas vezes na variável STATUS 100.
  9. Salve o programa, volte para o Screen Painter e ative sua tela.
  10. Vá para o programa e utilize o código abaixo.
  11. Ative e teste o programa.

Exemplo:

Neste exemplo criamos um programa que através de um Container utiliza um componente Custom para exibir uma imagem da Web utilizando sua URL para acesso a imagem,  utilizando o objeto Abap SAP Picture Control instanciado da classe cl_gui_picture.

Abap

*&---------------------------------------------------------------------*
*& Report  ZPICTURECONTROL
*&
*&---------------------------------------------------------------------*
*& Desenvolvimento Aberto
*& Picture Control
*&---------------------------------------------------------------------*

REPORT  ZPICTURECONTROL.

* Declara Eventos do botão
DATA: ok_code LIKE sy-ucomm,
      clique_ok LIKE sy-ucomm.

* Declara componentes

* Container
DATA imagem TYPE REF TO cl_gui_custom_container.

* Imagem
DATA figura TYPE REF TO cl_gui_picture.

* Chama a tela 100
CALL SCREEN 100.

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

* Cria objeto do container
  CREATE OBJECT imagem
    EXPORTING
      container_name = 'IMAGEM'
      lifetime       = imagem->LIFETIME_DYNPRO.

* Cria objeto da imagem
  CREATE OBJECT figura
    EXPORTING
      parent   = imagem
      lifetime = figura->LIFETIME_DYNPRO.

* Chama imagem da url
  CALL METHOD figura->load_picture_from_url
    EXPORTING
      url   = 'https://desenvolvimentoaberto.org/wp-content/uploads/2014/04/images.jpg'
    EXCEPTIONS
      error = 1.

* limpa evento
  clique_ok = ok_code.
  CLEAR ok_code.

* Eventos dos botões ou teclas
  CASE clique_ok.

    WHEN 'F_SAIR'.
      LEAVE PROGRAM.

  ENDCASE.

ENDMODULE.                 " STATUS_0100  OUTPUT
Entradas mais Antigas
Entradas mais Recentes