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

Progress Control

Fornece a funcionalidade do controle de barra de progresso comum do Windows. O Progress Control é um componente da classe CProgressCtrl e quando instanciado utiliza sua própria thread para redesenhar o controle de posição da barra de progresso, o tornando assim, um componente muito fácil de ser utilizado, dispensando o uso de um temporizador e uma nova thread para o efeito de progressão da tarefa.

Visual Studio

Para utilizar o componente Progress Control siga os seguintes passos:

  1. Crie um programa C++ MFC Dialog Based.
  2. Coloque no dialogo um Static Text, um Progress Control e um Button.
  3. Crie uma variável para o componente Progress Control chamada m_progresso.
  4. Modele seu design como na figura abaixo:

    progresscontrol

    Progress Control – Design

  5. Crie um evento de clique para o botão.
  6. Complete seu código gerado automaticamente com o trecho marcado do código abaixo:

Exemplo:

Neste exemplo criamos uma barra de progresso e incrementamos seu valor para efeito de uma progressão de uma tarefa.

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

#include "stdafx.h"
#include "progressbarcpp.h"
#include "progressbarcppDlg.h"
#include "afxdialogex.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

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

void CprogressbarcppDlg::DoDataExchange(CDataExchange* pDX)
{
	CDialogEx::DoDataExchange(pDX);
	DDX_Control(pDX, IDC_PROGRESS1, m_progresso);
}

BEGIN_MESSAGE_MAP(CprogressbarcppDlg, CDialogEx)
	ON_WM_PAINT()
	ON_WM_QUERYDRAGICON()
	ON_BN_CLICKED(IDC_BUTTON1, &CprogressbarcppDlg::OnBnClickedButton1)
END_MESSAGE_MAP()

BOOL CprogressbarcppDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();
		
	SetIcon(m_hIcon, TRUE);			
	SetIcon(m_hIcon, FALSE);		
	
	return TRUE; 
}


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

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

void CprogressbarcppDlg::OnBnClickedButton1()
{
	// Zera a barra de progresso
	m_progresso.SetPos(0);
	
	// Adiciona limites de valores
	m_progresso.SetRange(0, 100);
	
	// Adiciona valor de incremento
	m_progresso.SetStep(1);
	
	// Incrementa barra de progresso
	for (int andamento = 0; andamento <= 100; andamento++)
	{
		m_progresso.SetPos(andamento);
	}
}

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.

ProgressBar

Representa um controle de barra de progresso do Windows.

Timer

Implementa um timer que gera um evento em intervalos definidos pelo usuário. Desta vez, é otimizado para uso em aplicações Windows Forms e deve ser usado em uma janela.

BackgroundWorker

Executa uma operação em um segmento separado.

ProgressChangedEventHandler

Representa o método que manipulará o evento ProgressChanged da classe BackgroundWorker. Esta classe não pode ser herdada.

Processando Menssagens

Imagine uma barra de progresso que por padrão atinge um valor de 0 à 100, a principio podemos incrementar este valor no evento do clique do botão, porem a GUI sozinha não conseguirá atualizar os frames do andamento do status da barra progresso porque esta ocupada processando o contador do incremento, deste modo podemos ver o progresso vazio(0%) quando iniciar e cheio(100%) quando o contador chegar ao final, entretanto não poderemos ver o andamento desta porcentagem.  Para que possamos ver o andamento precisamos trabalhar os processos simultaneamente, em algumas linguagens de programação como o Delphi por exemplo temos o comando Application.ProcessMessages que executa este trabalho para nós. O C# possui uma classe chamada BackgroundWorker e podemos usa-la para executar um trabalho equivalente ao comando do Delphi para processar mensagens.

progressbar

ProgressBar – BackGroundWorker

 

Exemplo:

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

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 barraprogresso
{
    public partial class Form1 : Form
    {
        // Declara componentes
        Label rotulo;
        ProgressBar progresso;
        Button botao;
        Timer tempo = new Timer();

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Shown(object sender, EventArgs e)
        {
            // Muda propriedades do formulario
            this.Text = "DA - Progress Bar";
            this.Size = new Size(240, 150);

            // Cria componentes
            rotulo = new Label();
            progresso = new ProgressBar();
            botao = new Button();

            // Adiciona texto
            rotulo.Text = "Progress Bar";
            botao.Text = "Ok";

            // Adiciona tamanho
            rotulo.Size = new Size(200, 20);
            progresso.Size = new Size(200, 20);

            // Adiciona posição
            rotulo.Location = new Point(12, 20);
            progresso.Location = new Point(12, 40);
            botao.Location = new Point(70, 70);

            // Alinha componenente
            rotulo.TextAlign = ContentAlignment.MiddleCenter;

            // Cria evento do botão
            botao.Click += new System.EventHandler(this.botao_Click);

            // Cria processo de background
            BackgroundWorker backgroundWorker = new BackgroundWorker();

            // Cria evento de progresso
            backgroundWorker.ProgressChanged +=
                new ProgressChangedEventHandler(backgroundWorker_ProgressChanged);

            // Adiciona componentes ao formulario
            this.Controls.Add(rotulo);
            this.Controls.Add(progresso);
            this.Controls.Add(botao);
        }

        // Cria um temporizador
        private void temporizador()
        {
            tempo.Interval = 250;
            tempo.Tick += new EventHandler(andamento);
            tempo.Start();

        }

        // Incrementa a barra de progresso baseado no temporizador
        private void andamento(object sender, EventArgs e)
        {
            progresso.Increment(1);

            if (progresso.Value == progresso.Maximum)
            {
                tempo.Stop();
            }
        }

        // Processa menssagens de progresso
        private void backgroundWorker_ProgressChanged(object sender,
           ProgressChangedEventArgs e)
        {
            progresso.Value = e.ProgressPercentage;
        }

        // Evento de clique do botão
        private void botao_Click(object sender, EventArgs e)
        {
            progresso.Value = 0;
            progresso.Maximum = 100;
            progresso.Step = 1;
            temporizador();
        }
    }
}

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.

JProgressBar

Um componente que exibe visualmente o progresso de alguma tarefa. À medida que a tarefa avança para a sua conclusão, a barra de progresso exibe porcentagem da tarefa de conclusão. Esse percentual é normalmente representado visualmente por um retângulo que começa vazio e gradualmente se torna cheio mostrando como a tarefa progride. Além disso, a barra de progresso pode exibir uma representação textual desse percentual.

Thread.sleep

Faz com que o segmento atual suspenda a execução por um período determinado.

SwingWorker

O SwingWorker em si é uma classe abstrata; você deve definir uma subclasse, a fim de criar um objeto SwingWorker; classes internas anônimas são muitas vezes útil para a criação de objetos.

doInBackground

O método doInBackground () é chamado nesta para executar uma tarefa simultânea as demais tarefas, e é como todas as atividades de fundo devem acontecer. Para notificar a mudança de alguma propriedade use PropertyChangeListeners. Por padrão, existem duas propriedades ligadas disponíveis: state e progress.

PropertyChangeListeners

Um evento PropertyChangeé disparado quando um objeto altera uma propriedade ligada a ele.

Processando Menssagens

Imagine uma barra de progresso que por padrão atinge um valor de 0 à 100, a principio podemos incrementar este valor no evento do clique do botão, porem a GUI sozinha não conseguirá atualizar os frames do andamento do status da barra progresso porque esta ocupada processando o contador do incremento, deste modo podemos ver o progresso vazio(0%) quando iniciar e cheio(100%) quando o contador chegar ao final, entretanto não poderemos ver o andamento desta porcentagem.  Para que possamos ver o andamento precisamos trabalhar os processos simultaneamente, em algumas linguagens de programação como o Delphi por exemplo temos o comando Application.ProcessMessages que executa este trabalho para nós. O Java possui uma classe abstrata chamada SwingWorker e podemos usa-la para executar um trabalho equivalente ao comando do Delphi para processar mensagens.

jprogressbar

JProgressBar – SwingWorker

Exemplo:

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

Java

import java.awt.Component;
import java.awt.Container;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;

import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JProgressBar;
import javax.swing.SwingWorker;

public class BarraProgresso implements ActionListener, PropertyChangeListener
{

	// Declara componentes
	JLabel rotulo;
	JProgressBar progresso;
	JButton botao;

	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("Barra de progresso");
		progresso = new JProgressBar(0,100);
		botao = new JButton("Ok");

		// Alinha componentes
		rotulo.setAlignmentX(Component.CENTER_ALIGNMENT);
		progresso.setAlignmentX(Component.CENTER_ALIGNMENT);
		botao.setAlignmentX(Component.CENTER_ALIGNMENT);

		// Adiciona propriedade a barra de progresso
		progresso.setStringPainted(true);

		// Cria evento do botão
		botao.addActionListener(this);

		// Adiciona componentes ao painel
		painel.add(rotulo);
		painel.add(Box.createVerticalStrut(10));
		painel.add(progresso);
		painel.add(Box.createVerticalStrut(10));
		painel.add(botao);

		return painel;
	}

	// Cria classe SwingWorker para a propriedade progress
	class ProcessaMenssagem extends SwingWorker<Void, Void>
	{

		@Override
		public Void doInBackground() throws Exception {

			// Progresso inical
			setProgress(0);

			// cria contador
			for (int andamento = 0; andamento <= 100; andamento++)
			{
				// Cria um efeito de espera
				try
				{
					Thread.sleep(500);
				}
			    catch (InterruptedException e)
				{
					e.printStackTrace();
				}

				// Atualiza o contador
				setProgress(Math.min(andamento, 100));
			}

			return null;
		}

	}

	// Evento do botão
	public void actionPerformed(ActionEvent arg0)
	{

		if (arg0.getSource() == botao)
		{
			// Cria objeto de progresso
			ProcessaMenssagem processa = new ProcessaMenssagem();
			processa.addPropertyChangeListener(this);
			processa.execute();
		}

	}

	// Atualiza a propriedade do objeto
	public void propertyChange(PropertyChangeEvent evt) {

		if ("progress" == evt.getPropertyName())
		{
			int andamento = (Integer) evt.getNewValue();
			progresso.setValue(andamento);
		}
	}

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

		// Cria instancia da classe
		BarraProgresso barra = new BarraProgresso();

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

		formulario.setSize(300,150);

		formulario.setVisible(true);
	}

	public static void main(String[] args) {

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

			public void run() {
				criaGUI();
			}
		});

	}

}

A classe CL_ABAP_BROWSER encapsula o uso da classe CL_GUI_HTML_VIEWER. O método estático SHOW_HTML pode ser usado para exibir um arquivo HTML em uma caixa de diálogo. Dados externos, neste caso, uma imagem carregada a partir do Repositório MIME ou um endereço da web, pode ser passado e exibido. Os eventos SAPEVENT também podem ser manuseados pelo desenvolvedor.

É possível exibir um arquivo HTM,  XML ou uma URL usando os métodos estáticos da classe CL_ABAP_BROWSER.

htmlbrowser

SAP – Browser

 

Exemplo:

Neste exemplo criamos uma variável String contendo o código Html e a exibimos como em um browser.

Abap

*&---------------------------------------------------------------------*
*& Report  ZHTML
*&
*&---------------------------------------------------------------------*
*& Desenvolvimento Aberto
*& SAP HTML Browser
*&---------------------------------------------------------------------*

REPORT  ZHTML.

* Classe html Browser
CLASS HtmlBrowser DEFINITION.

  PUBLIC SECTION.

    CLASS-METHODS Browser.

  PRIVATE SECTION.

    TYPES: pict_line(1022) TYPE x,
           pict_tab TYPE STANDARD TABLE OF pict_line .

    CLASS-DATA pict TYPE pict_tab.

    CLASS-METHODS get_pict_tab
     IMPORTING
       mime_url TYPE csequence
     EXPORTING
       pict_tab TYPE STANDARD TABLE .

ENDCLASS.

* Implementação html browser
CLASS HtmlBrowser IMPLEMENTATION.

  METHOD Browser.

    " Declara variaveis para a pagina html
    DATA html_pagina   TYPE string.
    DATA titulo      TYPE cl_abap_browser=>title.
    DATA ext_data   TYPE cl_abap_browser=>load_tab.
    DATA ext_line   TYPE cl_abap_browser=>load_tab_line.
    DATA error_list TYPE cl_abap_browser=>html_table.

    FIELD-SYMBOLS <error> LIKE LINE OF error_list.

    titulo = 'Desenvolvimento Aberto'.

    get_pict_tab( EXPORTING mime_url = ''
                  IMPORTING pict_tab = pict ).

    ext_line-name = 'PICT.GIF'.
    ext_line-type = 'image'.

    GET REFERENCE OF pict INTO ext_line-dref.
    APPEND ext_line TO ext_data.

    " Cria pagina html
    html_pagina =
      '<html>' &&
      '<body>' &&
      '<H1><font SIZE=5 color="#000080">HTML - SAP</font></H1>' &&
      '<h3>Desenvolvimento Aberto</h3>' &&
      'Abap - Java - C++ - C# - Python - JavaScript - Transact, PL, DB2 SQL ...' &&
      '<br><img src="https://desenvolvimentoaberto.org/wp-content/uploads/2014/02/can-stock-photo_csp116670342.jpg" >' &&
      '<h4>Cl_Abap_Browser<h4>' &&
      'A classe CL_ABAP_BROWSER classe encapsula o uso da classe CL_GUI_HTML_VIEWER.' &&
      '<p>O método estático SHOW_HTML pode ser usado para exibir um arquivo HTML em uma caixa de diálogo.</p>' &&
      '<p>Dados externos, neste caso, uma imagem carregada a partir do Repositório MIME, pode ser passado e exibido.</p>'  &&
      '</body>' &&
      '</html>'.

    " Exibe pagina html
     cl_abap_browser=>show_html(
      EXPORTING
        html_string = html_pagina
        title       = titulo
        buttons     = cl_abap_browser=>navigate_html
        format      = cl_abap_browser=>landscape
        size        = cl_abap_browser=>medium
        data_table  = ext_data
      IMPORTING
         html_errors = error_list ).

  ENDMETHOD.

  " Manipula imagens da pagina.
  METHOD get_pict_tab.

    DATA pict_wa   TYPE xstring.
    DATA length   TYPE i.
    DATA mime_api TYPE REF TO if_mr_api.

    mime_api = cl_mime_repository_api=>get_api( ).
    mime_api->get( EXPORTING i_url = mime_url
                   IMPORTING e_content = pict_wa
                   EXCEPTIONS OTHERS = 4 ).

    IF sy-subrc = 4.
      RETURN.
    ENDIF.

    CLEAR pict_tab.

    length = xstrlen( pict_wa ).

    WHILE length >= 1022.

      APPEND pict_wa(1022) TO pict_tab.
      SHIFT pict_wa BY 1022 PLACES LEFT IN BYTE MODE.
      length = xstrlen( pict_wa ).

    ENDWHILE.

    IF length > 0.
      APPEND pict_wa TO pict_tab.
    ENDIF.

  ENDMETHOD.

ENDCLASS.

START-OF-SELECTION.

* Inicializa Browser
  HtmlBrowser=>BROWSER( ).

Custom Control

É um controle personalizado que reserva uma área em uma tela. Você pode cria-los no Screen Painter, e, como todos os outros objetos de tela, eles têm um nome único. Você usa controles personalizados para incorporar controles. Um controle é um componente de software no servidor de apresentação, que pode ser tanto um controle ActiveX ou um JavaBean, dependendo do SAPgui que você estiver a utilizando. Eles permitem que você execute tarefas, como edição de textos, localmente no servidor de apresentação. O controle é impulsionado pela lógica do aplicativo, que ainda é executado no servidor de aplicativos.

Controles

Os controles são componentes de software binários independentes que podem ser reutilizados. Os desenvolvedores podem criar controles em seus aplicativos e usar as funções que eles fornecem. Normalmente, os controles são usados ​​para projetar a interface do usuário. No entanto, usando controles não se restringe a componentes necessariamente visíveis.

Screen Painter

Para usar o Custom Control siga os seguintes passos:

  1. Crie um programa chamado Zcustomcontrole.
  2. Na transação SE51 crie a tela 100 para este programa.
  3. Você pode criar um titulo e um menu opcional, este post não abrange a criação dos mesmos.
  4. Coloque 5 componentes Text Fields na tela.
  5. Coloque um componente Input/Output Field e o nomeie de CAMPO.
  6. Coloque um componente Custom Control e o nomeie de EDITOR.
  7. Use a figura abaixo para dispor os componentes na tela e preencher os textos dos componentes Text Fields:

    custom-design

    Custom Control

  8. Na aba Flow Logic da tela 100 digite o código correspondente.
  9. No programa digite o código abaixo.
  10. Ative a tela e o programa e teste.
custom-programa

Custom Control – Programa

 

Exemplo:

Neste exemplo criamos um Custom Control para um componente do próprio do NetWeaver  7 que é um editor de textos, mas você pode usar para exibir seus próprios componentes sejam eles visuais ou não.

Abap

Tela 100 – Flow Logic

PROCESS BEFORE OUTPUT.
  MODULE STATUS_0100.

PROCESS AFTER INPUT.
  MODULE CANCEL AT EXIT-COMMAND.
  MODULE USER_COMMAND_0100.

Programa – ZCustomcontrole

*&---------------------------------------------------------------------*
*& Report  ZCUSTOMCONTROLE
*&
*&---------------------------------------------------------------------*
*& Desenvolvimento Aberto
*& Custom Control
*&---------------------------------------------------------------------*

REPORT  ZCUSTOMCONTROLE.

* Declara eventos para os botões e teclas
DATA: ok_code LIKE sy-ucomm,
      clique_ok LIKE sy-ucomm.

* Declara componentes
DATA: init,
      container TYPE REF TO cl_gui_custom_container,
      editor    TYPE REF TO cl_gui_textedit.

DATA: evento_tab TYPE cntl_simple_events,
      evento     TYPE cntl_simple_event.

* Declara tabela interna
DATA: linha(256),
      texto_tab LIKE STANDARD TABLE OF linha,
      campo LIKE linha.

* Classe de manipulação de eventos
* Evento baseados em HOT KEYS (teclas)

* Declaração da classe
CLASS event_handler DEFINITION.

  PUBLIC SECTION.
    METHODS: handle_f1 FOR EVENT f1 OF cl_gui_textedit
                       IMPORTING sender,
             handle_f4 FOR EVENT f4 OF cl_gui_textedit
                       IMPORTING sender.
ENDCLASS.

* Declaração da implementação
CLASS event_handler IMPLEMENTATION.
  METHOD handle_f1.

    DATA row TYPE i.

    MESSAGE i888(sabapdocu) WITH 'Disparado evento F1'.

    CALL METHOD sender->get_selection_pos
         IMPORTING from_line = row.

    CALL METHOD sender->get_line_text
         EXPORTING line_number = row
         IMPORTING text = campo.

    CALL METHOD cl_gui_cfw=>set_new_ok_code
         EXPORTING new_code = 'F1'.

    CALL METHOD cl_gui_cfw=>flush.

  ENDMETHOD.

  METHOD handle_f4.

    DATA row TYPE i.

    MESSAGE i888(sabapdocu) WITH 'Disparado evento F4'.

    CALL METHOD sender->get_selection_pos
         IMPORTING from_line = row.

    CALL METHOD sender->get_line_text
         EXPORTING line_number = row
         IMPORTING text = campo.

    CALL METHOD cl_gui_cfw=>flush.

  ENDMETHOD.

ENDCLASS.

* Declara eventos

DATA handle TYPE REF TO event_handler.

* Inicio da seleção
START-OF-SELECTION.

* Adiciona texto na tabela interna

  linha = '--------------------------------------------------'.
  APPEND linha TO texto_tab.
  linha = 'Desenvolvimento Aberto'.
  APPEND linha TO texto_tab.
  linha = 'Area de texto'.
  APPEND linha TO texto_tab.
  linha = '--------------------------------------------------'.
  APPEND linha TO texto_tab.
  linha = '...'.
  APPEND linha TO texto_tab.

* Chama tela
  CALL SCREEN 100.

* Modulos - Flow Logic

MODULE status_0100 OUTPUT.

* Cria controle custom

  IF init is initial.
    init = 'X'.

    CREATE OBJECT:
           container EXPORTING container_name = 'EDITOR',
           editor    EXPORTING parent = container,
           handle.

    evento-eventid = cl_gui_textedit=>event_f1.
    evento-appl_event = ' '.                     "system event

    APPEND evento TO evento_tab.
    evento-eventid = cl_gui_textedit=>event_f4.
    evento-appl_event = 'X'.                     "application event

    APPEND evento TO evento_tab.

    CALL METHOD: editor->set_registered_events
                 EXPORTING events = evento_tab.

    SET HANDLER handle->handle_f1
                handle->handle_f4 FOR editor.

  ENDIF.

  CALL METHOD editor->set_text_as_stream
              EXPORTING text = texto_tab.

ENDMODULE.

MODULE cancel INPUT.

  LEAVE PROGRAM.

ENDMODULE.

MODULE user_command_0100 INPUT.

* limpa evento
  clique_ok = ok_code.
  CLEAR ok_code.

* Eventos dos botões ou teclas
  CASE clique_ok.

    WHEN 'INSERT'.
      CALL METHOD editor->get_text_as_stream
                  IMPORTING text = texto_tab.

    WHEN 'F1'.
      MESSAGE i888(sabapdocu) WITH 'F1 - Evento do sistema'.

    WHEN OTHERS.
      MESSAGE i888(sabapdocu) WITH 'Evento da aplicação - Recorta o texto'.
      CALL METHOD cl_gui_cfw=>dispatch.

  ENDCASE.

ENDMODULE.

Em interfaces gráficas de usuário (GUI), uma interface tabulada  ou um Tab Control  é um widget que permite a interação de vários documentos ou painéis para ser contido dentro de uma única janela, usando guias como um widget de navegação para alternar entre conjuntos de painéis.

ttk,Notebook

Widget Notebook gerencia uma coleção de janelas e exibe uma única janela de cada vez. Cada janela filho é associado a um guia.

NotebookTabChanged

Evento que é disparado a cada mudança de guia do componente NoteBook.

notebook-py

ttk – NoteBook

 

Exemplo:

Neste exemplo criamos um painel tabulado com 3 guias onde na primeira e na segunda guia o usuário entrará com um numero inteiro e na terceira guia sobre o evento NotebookTabChanged efetuaremos a soma dos números escolhidos.

Python

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

# importa modulo 

from Tkinter import *
from ttk import *

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

# Cria Notebook
abas = Notebook(formulario)

# Cria paineis
painel1 = Frame(abas)
painel2 = Frame(abas)
painel3 = Frame(abas)

# Metodo do evento TabChange
def mudaEstado(*args):
    if (abas.index("current") == 2):
        soma = int(numero1.get()) + int(numero2.get())
        total["text"] = str(soma)    

#Declara componentes e insere a cada painel
Label(painel1, text = "Escolha o primero numero inteiro:" ).pack(padx=20, pady=10)
numero1 = Entry(painel1)

Label(painel2, text = "Escolha o segundo numero inteiro:" ).pack(padx=20, pady=10)
numero2 = Entry(painel2)

Label(painel3, text = "Total da soma:" ).pack(padx=20, pady=10)
total = Label(painel3, text = "0")

# Cria abas
abas.add(painel1, text="Numero 1")
abas.add(painel2, text="Numero 2")
abas.add(painel3, text="Total")

# Cria evento TabChange
abas.bind("<<NotebookTabChanged>> ", mudaEstado)

# Posiciona componentes aos paineis
abas.pack(padx=20, pady=20);
numero1.pack(padx=20, pady=5)
numero2.pack(padx=20, pady=5)
total.pack(padx=20, pady=5)

# loop do tcl
mainloop()

Em interfaces gráficas de usuário (GUI), uma interface tabulada  ou um Tab Control  é um widget que permite a interação de vários documentos ou painéis para ser contido dentro de uma única janela, usando guias como um widget de navegação para alternar entre conjuntos de painéis.

TabControl

O componente TabControl para C++ é um componente complexo, quando você o arrasta para o dialogo, logo você descobre que este componente não é nada intuitivo, um modo simples e eficaz de controlar o TabControl é usando um jogo de visualização entre suas guias e os componentes no dialogo manipulando seu evento de mudança de seleção de abas manualmente. Porem se torna um pouco complexo caso haja muitos componentes em um dialogo. Você também pode usar as classes CTabCtrl e CPropertySheet para criar um controle de tabulação e suas respectivas paginas.

Visual Studio

Para usar o componente Tab Control em uma aplicação C++ siga os seguintes passos:

  1. Crie um programa MFC Dialog Based para C++.
  2. Adicione no dialogo um componente Tab Control.
  3. Adicione 3 componentes Edit Control e 3 componentes Static Text.
  4. Mude os nomes dos componentes Static Text para: IDC_rotulo1, IDC_rotulo2, IDC_rotulo3.
  5. Crie uma variável para o componente Tab Control chamada: m_abas.
  6. Crie uma variável para cada Edit Control chamada: m_numero1, m_numero2 e m_total.
  7. Crie um evento TCN_SELCHANGE para o Tab Control.
  8. Seu dialogo deve conter os componentes nomeados como na figura abaixo:

    tabcontrol-comp

    Primeiro Passo – Design

  9. Sobreponha os componentes alinhados  um e cima do outro como mostra a imagem a seguir:

    tabcontrol

    Segundo Passo – Design

  10. Complete o seu código gerado automaticamente com os trechos marcados do código abaixo.
  11. Compile e rode o programa.

Efeito da Aplicação

A sobre posição dos componentes do dialogo combinado com evento de mudança do Tab Control nos dará uma aplicação com o seguinte efeito:

tabcontrol-programa1

Tab Control – Aba 1

tabcontrol-programa2

Tab Control – Aba – 2

tabcontrol-programa3

Tab Control – Aba 3

 

 

 

 

 

 

 

 

 

 

Exemplo:

Neste exemplo criamos um painel tabulado com 3 guias onde na primeira e na segunda guia o usuário entrará com um numero inteiro e na terceira guia sobre o evento TCN_SELCHANGE efetuaremos a soma dos números escolhidos.

C++

// Código gerado automaticamente
// tabcontrol-cppDlg.cpp : implementation file
//

#include "stdafx.h"
#include "tabcontrol-cpp.h"
#include "tabcontrol-cppDlg.h"
#include "afxdialogex.h"

#ifdef _DEBUG
#define new DEBUG_NEW
#endif

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

void CtabcontrolcppDlg::DoDataExchange(CDataExchange* pDX)
{
	CDialogEx::DoDataExchange(pDX);
	DDX_Control(pDX, IDC_TAB1, m_abas);
	DDX_Control(pDX, IDC_EDIT2, m_numero2);
	DDX_Control(pDX, IDC_EDIT1, m_numero1);
	DDX_Control(pDX, IDC_EDIT3, m_total);
}

BEGIN_MESSAGE_MAP(CtabcontrolcppDlg, CDialogEx)
	ON_WM_PAINT()
	ON_WM_QUERYDRAGICON()
	ON_NOTIFY(TCN_SELCHANGE, IDC_TAB1, &CtabcontrolcppDlg::OnTcnSelchangeTab1)
	
END_MESSAGE_MAP()

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

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

	// TODO: Add extra initialization here

   // Desenvolvimento Aberto --->>
   // Inicialização do programa

	m_abas.InsertItem(0, _T("Numero 1"));
	m_abas.InsertItem(1, _T("Numero 2"));
	m_abas.InsertItem(2, _T("Total"));

	// Inicializa visualização de componentes
	GetDlgItem(IDC_rotulo1)->ShowWindow(SW_SHOW);
	GetDlgItem(IDC_rotulo2)->ShowWindow(SW_HIDE);
	GetDlgItem(IDC_rotulo3)->ShowWindow(SW_HIDE);
	
	GetDlgItem(IDC_EDIT1)->ShowWindow(SW_SHOW);
	GetDlgItem(IDC_EDIT2)->ShowWindow(SW_HIDE);
	GetDlgItem(IDC_EDIT3)->ShowWindow(SW_HIDE);

	return TRUE;  
}

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

// Evento de mudança de abas do Tab Control

void CtabcontrolcppDlg::OnTcnSelchangeTab1(NMHDR *pNMHDR, LRESULT *pResult)
{
	// Captura evento de mudança
	int mudar = m_abas.GetCurSel();

	// Seleciona aba corrente
	if (mudar == 0)
	{
		// Exibe os itens na tela de acordo com aba selecionada
		GetDlgItem(IDC_rotulo1)->ShowWindow(SW_SHOW);
		GetDlgItem(IDC_rotulo2)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_rotulo3)->ShowWindow(SW_HIDE);
		
		GetDlgItem(IDC_EDIT1)->ShowWindow(SW_SHOW);
		GetDlgItem(IDC_EDIT2)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_EDIT3)->ShowWindow(SW_HIDE);
		
	}
	
	if (mudar == 1)
	{
		// Exibe os itens na tela de acordo com aba selecionada
		GetDlgItem(IDC_rotulo1)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_rotulo2)->ShowWindow(SW_SHOW);
		GetDlgItem(IDC_rotulo3)->ShowWindow(SW_HIDE);
		
		GetDlgItem(IDC_EDIT1)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_EDIT2)->ShowWindow(SW_SHOW);
		GetDlgItem(IDC_EDIT3)->ShowWindow(SW_HIDE);
	}

	if (mudar == 2)
	{
		// Exibe os itens na tela de acordo com aba selecionada
		GetDlgItem(IDC_rotulo1)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_rotulo2)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_rotulo3)->ShowWindow(SW_SHOW);
		
		GetDlgItem(IDC_EDIT1)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_EDIT2)->ShowWindow(SW_HIDE);
		GetDlgItem(IDC_EDIT3)->ShowWindow(SW_SHOW);

		// Declara variaveis
		CString valor1;
		CString valor2;
		CString total;

		// Alimenta variaveis 
		m_numero1.GetWindowTextW(valor1);
		m_numero2.GetWindowTextW(valor2);

		// Efetua calculo
		int soma = _wtoi(valor1) + _wtoi(valor2);
		
		// Converte variavel inteira para Cstring
		total.Format(_T("%d"), soma);
		
		// Exibe valor da variavel na tela
		m_total.SetWindowTextW(total);

	}

	*pResult = 0; 
}