Arquivo de abril, 2014

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++

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

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ãolargura 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();
				
			}
		});

	}

}

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>

 

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);
}

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()

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

Visual – PictureBox – C#

Publicado: 10 de abril de 2014 em C#

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.

picturebox

PictureBox

PictureBox

Representa um controle de caixa de imagens do Windows para exibir uma imagem.

Exemplo:

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

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 Imagem
{
    public partial class Form1 : Form
    {
        // Declara componentes
        Label rotulo;
        PictureBox imagem;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Shown(object sender, EventArgs e)
        {
            // Muda propriedades do formulario
            this.Text = "DA - Imagem";
            this.Size = new Size(330, 290);

            // Cria componentes
            rotulo = new Label();
            imagem = new PictureBox();

            // Adiciona texto
            rotulo.Text = "Imagem - Picture";
            rotulo.TextAlign = ContentAlignment.TopCenter;

            // Adiciona tamanho aos componentes
            rotulo.Size = new Size(300, 20);
            imagem.Size = new Size(275, 183); 

            // Posiciona os componentes
            rotulo.Location = new Point(10, 20);
            imagem.Location = new Point(20, 40);

            // Lê e centraliza imagem
            imagem.ImageLocation = "https://desenvolvimentoaberto.org/wp-content/uploads/2014/04/images.jpg";
            imagem.SizeMode = PictureBoxSizeMode.CenterImage;

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

        }
    }
}

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.

Jimageicon

Image

 

BufferedImage

A subclasse BufferedImage descreve uma imagem com um buffer de acesso de dados de imagem. A BufferedImage é composto de um modelo de cor e um Raster de dados de imagem.

ImageIcon

Uma implementação da interface do ícone que pinta ícones de imagens. Imagens que são criados a partir de uma URL, nome de um arquivo ou da matriz de bytes que são pré-carregados usando o MediaTracker para monitorar o estado de carga da imagem.

ImageIO

Uma classe que contém métodos de conveniência estáticos para localizar os leitores de imagem e gravadores de imagem, e realizar a codificação e decodificação simples.

Url

A classe URL representa um Uniform Resource Locator, um ponteiro para um “recurso” na World Wide Web. Um recurso pode ser algo tão simples como um arquivo ou um diretório, ou pode ser uma referência a um objeto mais complexo, como uma consulta a um banco de dados ou a um motor de busca.

Exemplo:

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

Java

import java.awt.Component;
import java.awt.Container;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.net.URL;

import javax.imageio.ImageIO;
import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;


public class Imagem 
{
	// Declara componentes
	JLabel rotulo;
	JLabel figura;
	BufferedImage imagem;
	URL url;
	
	public Container criaPainel()
	{
		// Cria painel
		JPanel painel = new JPanel();
		
		// Cria layout
		painel.setLayout(new BoxLayout(painel, BoxLayout.PAGE_AXIS));
		painel.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
		
		// Cria componentes
		rotulo = new JLabel("Imagem - Picture");		
		
		// Tenta abrir uma imagem de uma url
		try 
		{
			url = new URL("https://desenvolvimentoaberto.org/wp-content/uploads/2014/04/images.jpg");
			imagem = ImageIO.read(url);		
		}
		catch ( IOException e)
		{			
			e.printStackTrace();
		}
		
		// Cria uma figura e a exibe em um JLabel
		ImageIcon fig = new ImageIcon(imagem);
		figura = new JLabel(fig);		
		
		// Alinha componentes
		rotulo.setAlignmentX(Component.CENTER_ALIGNMENT);
		figura.setAlignmentX(Component.CENTER_ALIGNMENT);
		
		// Adiciona componentes ao painel
		painel.add(rotulo);
		painel.add(Box.createVerticalStrut(10));
		painel.add(figura);		
		
		return painel;
	}
	
	// Cria GUI 
	public static void criaGUI()
	{
		// Cria formulario
		JFrame formulario = new JFrame("DA - Image");
		formulario.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		
		// cria nova instancia da classe
		Imagem pic = new Imagem();
		
		// Adiciona painel ao formulario
		formulario.setContentPane(pic.criaPainel());
		
		// Adiciona tamanho do formulario
		formulario.setSize(300,290);
		
		// Exibe formulario
		formulario.setVisible(true);
	}

	public static void main(String[] args) {
		
		// Thread do swing
		javax.swing.SwingUtilities.invokeLater(new Runnable() {	
			
			public void run() {
				// Mostra Gui
				criaGUI();				
			}
		});
	}
}

Uma barra de progresso é um componente de uma interface gráfica de usuário usado para visualizar a progressão de uma operação de computador estendida, como um download, transferência de arquivos, ou de instalação. Às vezes, o gráfico é acompanhada por uma representação textual do progresso em um formato por cento.

ttk.Progressbar

Representa um controle de barra de progresso. O objetivo desta ferramenta é para tranquilizar o usuário que algo está acontecendo.

progressbar-py

Progress Bar – ttk

 

Exemplo:

Neste exemplo usamos um contador e um temporizador para simular uma tarefa e usamos a classe BackgroundWorker para processar o andamento da tarefa.

Python

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

# importa modulo 

from Tkinter import *
from ttk import *

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

# Evento do botão
def clique():
    progresso.step(1)
    progresso.start()
          
# Cria componentes
rotulo = Label(formulario, text="Barra de Progresso")

progresso = Progressbar(formulario,length=200)

botao = Button(formulario, text="Ok", command=clique)

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

# looping do tcl
mainloop()