Arquivo de janeiro, 2015

Django – Model e View – MySQL – Python

Publicado: 6 de janeiro de 2015 em Python

Um modelo é a única e definitiva fonte de informações sobre seus dados. Ele contém os campos essenciais e os comportamentos dos dados que você está armazenando. Geralmente, cada modelo mapeia uma tabela do banco de dados. Como uma regra em geral, cada modelo é uma classe em Python e cada atributo do modelo representa um campo no banco de dados.

Em Django, a maioria das interações com um banco de dados são feitas por meio de seu ORM (Object-Relational Mapper), que é um recurso de ações do Django bem parecido com outros frameworks como o famoso Rails. Os quadros ORMs são cada vez mais populares entre os desenvolvedores, pois eles automatizam muitas interações comuns com um banco de dados e usam abordagens orientadas a objetos familiares em vez de instruções SQL. Contudo desenvolvedores podem optar por um não utilizar o ORM nativo do Django o substituindo por um Toolkit como o SQLAlchemy que é um kit de ferramentas Python SQL e Object Relational Mapper que dá aos desenvolvedores de aplicativos o poder e a flexibilidade do SQL.

Django Models: https://docs.djangoproject.com/en/1.7/topics/db/models/

Criando um Modelo e Exibindo seus Dados

Vamos começar criando um modelo básico para uma tabela do banco de dados igual a uma tabela no qual já utilizamos em outros exemplos e criamos usando scripts SQL. No entanto não podemos utilizar a tabela já pronta pois vamos cria-la através do ORM do Django sem utilizar instruções SQL.

Ao criar seus modelos o Django cria uma serie de outras tabelas no banco de dados que são necessárias para que um projeto funcione corretamente, não se preocupe com isto agora, o universo de frameworks ORMs são profundos e possuem seus próprios conceitos nos quais são capazes de facilitar a vida do desenvolvedor proporcionando uma sintaxe uniforme e regras sobre as boas praticas de utilização para se manipular dados, evitando assim que desenvolvedores utilizem o banco de dados de forma despadronizada, deste modo, garantindo de um jeito mais eficaz sua normalização e seu desempenho.

1 – Crie um projeto e uma aplicação Django, vamos utilizar o projeto e a aplicação criada anteriormente chamada HelloWorldApp, e vamos utilizar o conector Python para MySQL da Oracle, que você também encontra no post anterior. Para utilizar o conector, altere o arquivo settings.py do seu projeto e defina a conexão e seus parâmetros:

MySQL - settings.py

MySQL – settings.py

2 – Abra o arquivo models.py e crie seu modelo, utilizando o código abaixo:

Model

Model

3 – Abra o terminal do Linux, pois precisamos utilizar alguns comandos do administrador Django para efetuar as tarefas necessárias, elas são: A validação do modelo, a criação do script SQL para o modelo, e a execução do script SQL no banco de dados. Utilize os comandos abaixo:

python manage.py validate

python manage.py sqlall HelloWorldApp

python manage.py syncdb
Django - Validate - Sqlall, SyncDB

Django – Validate – Sqlall, SyncDB

4 – Através do ORM do Django, uma vez que você tem um modelo e sua respectiva tabela no banco de dados, você pode utilizar comandos para operações CRUD (ler, criar, alterar e deletar). Use o comando abaixo para criar um objeto do modelo e inserir dados no banco:

python manage.py shell

from HelloWorldApp.models import Funcionario

f1 = Funcionario(nome="James", sobrenome="Hetfield", cargo="Vocalista/Guitarrista", salario = "1234.56")
f1.save()
Python Shell

Python Shell

5 – Você pode abrir o MySQL Workbench para visualizar sua tabela e as tabelas que o ORM do Django criou assim que você definiu seu primeiro modelo:

MySQL Workbench

MySQL Workbench

6 – Modifique seu arquivo views.py de acordo com o código correspondente e rode o servidor Django e teste sua aplicação:

Django - Aplicação

Django – Aplicação

Exemplo:

Neste exemplo criamos uma aplicação simples que utiliza o banco de dados MySQL, criando um modelo de dados e o exibindo através de sua visão.

Python

settings.py

"""
Django settings for devaberto project.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 's8eic)^+f@%gg0ffq9j3_kfsoo11k*a-&8x7jw@2p(ujy$=p4a'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'HelloWorldApp',    

)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

ROOT_URLCONF = 'devaberto.urls'

WSGI_APPLICATION = 'devaberto.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'NAME': 'DAsandbox',
        'ENGINE': 'mysql.connector.django',
        'USER': 'root',
        'PASSWORD': 'pass',
        'OPTIONS': {
          'autocommit': True,
        },
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_URL = '/static/'

models.py

from django.db import models

# Create your models here.

class Funcionario (models.Model):
    nome = models.CharField(max_length=30)
    sobrenome = models.CharField(max_length=50)
    cargo = models.CharField(max_length=50)
    salario = models.DecimalField(max_digits=19, decimal_places=10)

views.py

# coding=utf-8
from django.shortcuts import render
from django.http import HttpResponse

# Importa dados
from HelloWorldApp.models import Funcionario

# Retorna dados atraves do objeto do modelo
dados = Funcionario.objects.values_list(flat=True)

# Recupera campos de uma row
cod = str(dados[0][0])
nome = str(dados[0][1])
sobrenome = str(dados[0][2])
cargo = str(dados[0][3])
salario =str(dados[0][4])

# Cria simples HTML
html = """
 <h1>Desenvolvimento Aberto</h1>
<h2>Django - Models e Views</h2>
<br>
<h3>MySQL - Dados:</h3>
"""

# Formataçao simples
row =  cod + " - " + nome + " " + sobrenome + \
       " - " + cargo + " - R$: " + salario

# Exibe View
def hello(request):
    return HttpResponse(html + row)

O MySQL Community Edition é uma versão gratuita do banco de dados de código aberto mais popular do mundo, que é apoiado por uma comunidade ativa de desenvolvedores de código aberto e entusiastas. O MySQL hoje suporta Unicode, Full Text Indexes, replicação, Hot Backup, GIS, OLAP e muitos outros recursos de banco de dados.

O MySQL Workbench fornece aos DBAs e desenvolvedores um ambiente integrado de ferramentas para, design e modelagem do banco de dados, desenvolvimento SQL, administração do banco de dados e migração. O MySQL Workbench necessita de bibliotecas adicionais para que funcione corretamente, deste modo consulte o site oficial caso queira instalar em um sistema operacional diferente do Linux.

MySQL Community Edition: http://www.mysql.com/

O MySQL Connector/Python habilita programas escritos em Python acessar o bancos de dados MySQL, usando uma API que é compatível com o Python Database API Specification v2.0 (PEP 249). O conector é escrito em Python puro e não tem quaisquer dependências, exceto a biblioteca padrão do Python.

MySQL Connector/Python: http://dev.mysql.com/downloads/connector/python

Instalando e Testando o MySQL e o Python Connector

1- Primeiro você precisa baixar o MySQL Connector/Python do site acima em uma pasta de sua escolha, é necessário um login no site da Oracle, crie um perfil gratuito caso ainda não tenha um. Para instalar o banco de dados MySQL, a ferramenta de administração digite os comandos abaixo no terminal do Linux. Quando questionado escolha uma senha para o usuário root:

sudo apt-get install mysql-server

sudo apt-get install mysql-workbench

sudo apt-get install libmysqlclient-dev
MySQL Community Edition

MySQL Community Edition

2 – Após a instalação das três aplicações digite no terminal mysql-workbench para abrir a ferramenta de administração e desenvolvimento do MySQL:

MySQL Workbench

MySQL Workbench

3 – Clique no quadro Local Instance e digite a senha para o usuário root para se conectar, rode as instruções SQL abaixo para criar um banco de dados e uma tabela para testes:

Workbench - SQL

Workbench – SQL

4 – De volta ao terminal do Linux, instale o conector Python baixado anteriormente utilizando o seguinte comando:

sudo dpkg -i mysql-connector-python_2.0.2-1ubuntu14.04_all.deb
Pacote Debian - Oracle Connector/Python

Pacote Debian – Oracle Connector/Python

5 – Abra a IDE ou o editor e de sua preferencia e utilize o código abaixo para testar o conector:

PyCharm Community - Python

PyCharm Community – Python

Exemplo:

Neste exemplo instalamos o banco de dados MySQL, sua ferramenta de desenvolvimento e administração e as bibliotecas necessária para que o Workbench funcione corretamente, ainda instalamos e testamos o MySQL Connector Python da Oracle.

SQL

-- Cria banco de dados
Create database DAsandbox;
 
-- Cria privilegios para o usuário root
Grant all privileges on DAsandbox.*
to 'root'@'localhost' identified by 'password';
 
-- nivela privilegios
FLUSH PRIVILEGES;

-- Usa database
use DAsandbox;

-- Cria tabela
Create table Teste ( 
  id int, 
  nome varchar(50),
  sobrenome varchar(70),
  cargo varchar(30),
  salario decimal(9,2));

-- Insere dados na tabela
insert into Teste values (1, 'John','Lennon',
      'Guitarrista/Vocalista', 1234.56);

-- Testa tabela
select * from Teste;

Python

__author__ = 'Desenvolvimento Aberto'

# Importa modulos
import mysql.connector

# Cria conexao
conn = mysql.connector.connect(user='root', password='*******',
                              host='127.0.0.1',
                              database='DAsandbox')
# Abre cursor
cursor = conn.cursor()

# Define pesquisa
query = ("SELECT * FROM Teste ")

# Executa pesquisa
cursor.execute(query)

# Imprime resultado
for (id, nome, sobrenome, cargo, salario) in cursor:
  print("{}, {}, {}, {}, {}".format(
    id, nome, sobrenome, cargo, salario))

# Fecha cursor e conexao
cursor.close()
conn.close()

O Django é um framework Web para Python de alto nível que incentiva o desenvolvimento rápido e um design clean e pragmático. Criado por desenvolvedores experientes, ele cuida de grande parte do trabalho de desenvolvimento Web, para que você possa se concentrar em escrever seu aplicativo sem a necessidade de reinventar a roda. Django é um framework livre e open source.

Existem outros frameworks ótimos para Python direcionados ao desenvolvimento Web, como o Web2py, no entanto o Django é o mais famoso e o mais requisitado no mercado de trabalho atual, podemos dizer que o Django em termos de popularidade se assemelha ao framework Rails para Ruby mas conceitualmente possui diferenças significativas, Rails utiliza o Pattern MVC enquanto o Django utiliza o conceito MVT (Model View Template).

Django: https://www.djangoproject.com/

Instalando o Django e Criando Uma Aplicação Web

O Django é fácil de instalar e simples de utilizar, pode ser utilizado pela linha de comando de um modo parecido com o Rails, ou através de IDEs que permitem integração com o Django como, o Eclipse com PyDev (licença gratuita), Visual Studio com Python Tools (versão comunitária gratuita) ou PyCharm Pro (licença com custo).  Neste site você encontra um walkthrough sobre como instalar cada IDE citada. Não se preocupe em entender os conceitos MVT agora, veremos muito sobre o assunto durante o decorrer dos post sobre o Django.

1 – Para instalar o Django digite as instruções abaixo no terminal do Linux:

sudo apt-get install python-django

# Para testar
Python
import django
django.VERSION
Instalar Django - Versão

Instalar Django – Versão

2 – Entre em uma pasta de sua escolha para criar seu primeiro projeto e testa-lo,  digite:

django-admin startproject devaberto
python manage.py runserver
Projeto - Servidor

Django – Projeto – Servidor

3 – Com servidor rodando abra seu navegador e digite o endereço local e a porta 8000:

Testando Servidor

Django – Testando Servidor

4 – Agora que já temos um projeto criado, precisamos criar uma nova aplicação, digite:

django-admin startapp HelloWorldApp
Django - Cria Aplicação

Django – Cria Aplicação

5 – Com o projeto e a aplicação criados, basicamente precisamos alterar dois arquivos do projeto e um arquivo da aplicação. Vamos começar com o arquivo do projeto settings.py onde adicionaremos nossa aplicação:

Django - Settings.py

Django – Settings.py

6 – O arquivo do projeto url.py é onde importaremos nossa View e mapearemos a URL desejada para a nossa View:

Django - URL - View

Django – URL – View

7 – No arquivo da aplicação views.py é onde criaremos o código Python para executar a View. O código HTML deste programa foi retirado do site W3Schools, recomendamos que você o utilize para aprender mais sobre HTML e outras linguagens de script para web, você encontra o link para o site no menu Uteis:

Django - View

Django – View

8 – Com o servidor Django do seu projeto rodando, digite o nome da sua aplicação na url do navegador:

Django - Aplicação

Django – Aplicação – Hello World

Exemplo:

Neste exemplo instalamos o Django e criamos um projeto e uma aplicação básica, onde configuramos os arquivos necessários para que o projeto consiga enxergar nossa View e mapear sua URL, logo criamos uma View para ser executada no navegador.

Python

settings.py

"""
Django settings for devaberto project.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 's8eic)^+f@%gg0ffq9j3_kfsoo11k*a-&8x7jw@2p(ujy$=p4a'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'HelloWorldApp',

)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

ROOT_URLCONF = 'devaberto.urls'

WSGI_APPLICATION = 'devaberto.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_URL = '/static/'

url.py

from django.conf.urls import patterns, include, url

# Importa View
from HelloWorldApp.views import hello

# from django.contrib import admin
# admin.autodiscover()

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'devaberto.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),

    # url(r'^admin/', include(admin.site.urls)),
    url(r'HelloWorldApp/$', hello),
)

views.py

from django.shortcuts import render
from django.http import HttpResponse

html = """
<!DOCTYPE html>
<html>
<body>
<h1> Hello World - Python - Django </h1>
<div style="position:relative;">  <div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div>  <div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#8AC007"></div>
  <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;">
	<h1>CSS = Styles and Colors</h1>
	<div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
	<div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;">Colors,
	<span style="background-color:#B4009E;color:#ffffff;"> Boxes</span></div>
	</div></div>
</body>
</html>
"""

def hello(request):
    return HttpResponse(html)

A interface gráfica das ferramentas do Web Dynpro nos proporciona um modo de criar aplicações web usando um ambiente RAD que em português significa, desenvolvimento rápido de aplicações. Além do ambiente RAD, o Web Dynpro nos proporciona o paradigma da programação declarativa, que significa que vamos desenvolver uma aplicação escrevendo o mínimo de código fonte possível. Vamos fazer isto utilizando o Pattern mais difundido para aplicações para web na atualidade, o MVC, que nos permite maior controle sobre os elementos e objetos da aplicação em relação aos modelos e visões.

Criando um Aplicação Web Dynpro

1 – Crie um novo componente Web Dynpro e arraste para a tela um elemento Header, um TransparentContainer, um Label, um Input_Field e um Button. Preencha os campos textos e para o elemento Header e ligue a propriedade Label For no elemento Input_Field. Para o elemento TransparentContainer mude a propriedade Height para 10 px:

View - Main - Layout

View – Main – Layout

2 – Clique em Views e com o botão direito crie uma nova View chamada Saudação:

Nova - View - Saudacao

Nova – View – Saudação

3 – Abra a nova View e insira em seu Layout os elementos Header, TransparentContainer e 2 TextView. Mude as propriedades Text dos elementos TextViews para “Bem-vindo:” e “usuário” e a propriedade Height do TransparentContainer para 10px:

View - Saudação - Layout

View – Saudação – Layout

4 – Agora vamos utilizar atributos para guardar o valor do campo de entrada de texto, vamos fazer isto no contexto do controlador. No seu componente Dynpro, clique em COMPONENTCONTROLLER e selecione Context e com o botão direito Create->Node:

Controller - Contexto

Controller – Contexto

5 – Crie um Node para o controlador chamado Usuario_Controller, este node será onde guardaremos nosso atributo, ele está localizado no contexto do controlador, isto significa que todas as visões podem vê-lo:

Node - Controle Usuário

Node – Controle Usuário

6 – No novo Node crie um atributo chamado usuario_login do tipo string, este atributo será usado para guardar o valor digitado no campo de texto:

Atributo - Usuário - String

Atributo – Usuário – String

7 – ATENÇÃO – Neste momento vamos ligar os componentes para que obtenhamos a funcionalidade desejada para a aplicação. Clique na View Main e na aba Context, arraste o Node criado no controlador para o contexto da View:

Main - Contexto - Atributos

Main – Contexto – Atributos

8 – Agora podemos enxergar o atributo do controlador em nossa View, clique em Layout e clique no elemento Input_Field, vamos ligar o atributo no valor da propriedade Value do elemento:

Ligação - Atributo - Valor

Ligação – Atributo – Valor

9 – Abra a View Saudacao e na aba Context faça a mesma coisa, arraste o Node do controlador para o contexto da View para que possamos enxergar o atributo:

View - Saudação - Contexto - Atributo

View – Saudação – Contexto – Atributo

10 – Abra a aba Layout e clique no segundo elemento TextView no qual está reservado para exibir o nome digitado pelo usuário e ligue a propriedade Text do elemento ao atributo da View:

View - Atributo - Text

View – Atributo – Text

11 – IMPORTANTE – Agora vamos criar a regra para uma ação, ou seja vamos criar plugs dizendo que queremos que a View Main abra a View Saudação. Para isto abra a aba OutBound Plugs e crie um Plug de saída chamado ir_saudação:

Plugs - OutBound - Saida

Plugs – OutBound – Saida

12 – Abra a View Saudação e na aba InBound Plugs vamos criar um plug de entrada chamado vir_main:

Plugs - InBound - Entrada

Plugs – InBound – Entrada

13 – No seu componente Dynpro abra o item Windows e arraste a View Saudação para a estrutura do objeto Window:

Window - Estrutura das Views

Window – Estrutura das Views

14 – Agora vamos plugar os plugs criados anteriormente arraste o plug Out (vermelho) IR_SAUDACAO para o plug In VIR_MAIN:

Ligação - Plugar Out -> In

Ligação – Plugar Out -> In

15 – Volte para a View Main e clique no elemento Button, em sua propriedade onAction vamos criar uma ação para o evento de clique do botão, preencha os dados para o evento e escolha o plug de saída IR_SAUDACAO:

Eventos - Botão - Ação

Eventos – Botão – Ação

16 -Salve, ative o componente e teste sua aplicação. Alimente o usuário e senha para login, com o navegador aberto entre seu nome no campo de texto e clique no botão enviar:

Aplicação - View - Main

Aplicação – View – Main

17 – O controlador processará a ação alimentando o valor ligado ao atributo ao dado inserido na propriedade de texto do campo de entrada e o enviará para a visão de saudação alimentando a propriedade de texto do elemento de texto, criando assim a funcionalidade da aplicação:

View - Saudação

View – Saudação

Como utilizamos o paradigma de programação declarativa não escrevemos uma única linha de código sequer, mas isto não significa que não haja código fonte.  Para ver o código da aplicação, clique na View Main e na aba Action e dê um duplo clique na ação criada, você será levado ao método criado para executar o evento de clique do botão.

Abap

method ONACTIONACAO_BOTAO_ENVIAR .
  wd_this->fire_ir_saudacao_plg(
  ).
endmethod.

SAP – Web Dynpro – Hello World – Abap

Publicado: 2 de janeiro de 2015 em Abap

O Web Dynpro é a tecnologia padrão SAP para o desenvolvimento de aplicações Web no ambiente ABAP. Ela consiste de um ambiente de tempo de execução e um ambiente gráfico de desenvolvimento com ferramentas Dynpro especiais para web que estão integradas no ABAP Workbench. O modelo de programação Web Dynpro é baseado no Design Pattern Model View Controller (MVC) entretanto sua UI utiliza o paradigma de programação declarativa.

O Web Dynpro possui ferramentas gráficas para o desenvolvimento que de certo modo são similares a outras soluções para web que utilizam programação declarativa como por exemplo, o Oracle Application Express que também utiliza o paradigma declarativo, no entanto diferente do Web Dynpro o APEX possui uma IDE RAD que é executada inteiramente no navegador web e é parte integrante do Oracle Database. A principal característica deste paradigma de programação é a pouca necessidade de escrever código fonte para criar aplicações robustas.

Criando Sua Primeira Aplicação Web Dynpro

Para criar um aplicação Web Dynpro você precisa criar um componente Dynpro que é nada mais que um tipo de projeto MVC.

1- Abra ABAP Development Workbench com a transação SE80, escolha “Web Dynpro Comp./ Inf.” e preencha o campo de busca como ZMeuDynpro.

SE80 - Web Dynpro - Componente

SE80 – Web Dynpro – Componente

2- Clique em pesquisar, quando indagado escolha criar um componente Web Dynpro:

Dynpro - Criar Componente

Dynpro – Criar Componente

3 – Expanda Views e clique em Main. Na aba Layout clique com o botão direito em ROOTUIELEMENT e escolha Insert Element:

Dynpro - View

Dynpro – View

4 – Escolha um ID para o elemento e escolha o tipo Page Header:

Tipo de Elemento

Tipo de Elemento

5 – Com o elemento criado, o selecione e em sua propriedade title, escolha um titulo:

Modifica Elemento

Modifica Elemento

6 – ATENÇÃO – Clique no botão Show/Hide Layout Preview. O Preview irá lhe mostrar o design da pagina, entretanto todos os serviços necessários para que o Web Dynpro funcione precisam estar ativados, caso lhe mostre algum erro nesta tela, saia, ative os serviços requisitados e volte.

O Preview lhe permite utilizar uma caixa de ferramentas para que você arraste os elementos na pagina e monte seu design mais rapidamente. Adicione na tela um elemento TransparentContainer e um Label, mude a propriedade text do Label e associe sua propriedade Label For no TransparentContainer. A propriedade Label For é obrigatória e geralmente é associada a uma caixa de texto:

Layout Preview

Layout Preview

7 – Clique no seu componente com o botão direito e o ative:

Ativar - Dynpro

Ativar – Dynpro

8 – Agora precisamos criar uma aplicação Web Dynpro, com o botão direito escolha Create e Web Dynpro Application:

Criar Aplicação

Criar Aplicação

9 – Defina uma descrição para sua aplicação:

Descrição da Aplicação

Descrição da Aplicação

10 – Em sua aplicação, clique com o botão direito e escolha Test:

Testar Aplicação

Testar Aplicação

11 – O seu navegador padrão será aberto, no entanto ainda não definimos um protocolo seguro para aplicação e uma pagina lhe questionará sobre a autenticação, clique em Log On:

Web Dynpro - Log On

Web Dynpro – Log On

12 – Digite o seu usuário e senha:

Log On

Log On

13 – Pronto sua aplicação foi executada com sucesso:

Web Dynpro App

Web Dynpro App

Não se esqueça que todos os serviços básicos ICM e ICF precisam estar ativados para que você possa desenvolver e rodar aplicações Web Dynpro. A Aplicação é criada como um serviço ICF no seguinte local, Virtual Host: sap/bc/webdynpro/sap/SuaApp.

Para saber como configurar um ambiente básico para criar e rodar aplicações Web Dynpro clique aqui.

 

 

O Web Dynpro é uma tecnologia de aplicação web proprietária desenvolvida pela SAP AG que se concentra no desenvolvimento de aplicações de negócio  para web, do lado do servidor. Uma de suas principais características de seu projeto é que a interface do usuário é definida de uma forma totalmente declarativa. Aplicações Web Dynpro podem ser desenvolvidas usando um Java (Web Dynpro para Java) ou ABAP (Web Dynpro ABAP).

Por motivos de segurança os serviços necessários para que uma aplicação Web Dynpro seja executada ou escrita utilizando o Netweaver, por padrão estão desabilitados, deste modo é necessário uma serie de configurações adicionais para que possamos rodar um aplicação Web Dynpro. Podemos dizer então que basicamente o Web Dynpro utiliza os componentes ICM (Internet Communication Manager) e ICF (Internet Communication Framework).

SAP Oficial: Web Dynpro

Configuração Inicial Web Dynpro

1 – Abra a transação SMICM para acessar o ICM Monitor:

ICM Monitor

ICM Monitor

2- No menu GOTO escolha Parameters->Display. Procure pelo item icm/host_name_full, você verá que ele esta com o nome do seu computador que é o nome do servidor de aplicação do Netweaver.

ICM Parâmetros

ICM Parâmetros

3 – O ICM requer que tenhamos um DNS valido chamado de Fully Qualified Domain Names (FQDN) e não o nome do servidor de aplicação do Netweaver.

FQDN: Fully Qualified Domain Names 

Para realizar esta tarefa podemos efetuar uma configuração no perfil do Default do Netweaver, entre na transação RZ10 e selecione o perfil Default, clique em Extended Maintance e clique em Change:

Netweaver - Profile

Netweaver – Profile

4 – Adicione um novo parâmetro para o icm/host_name_full de valor devabertosap.com, este será o nosso FQDN, salve o parâmetro, volte a tela e ative o perfil:

Netweaver - ICM - FDQN Parâmetro

Netweaver – ICM – FQDN Parâmetro

Sabemos que estas configurações no mundo real precisam ser efetuadas por um consultor BASIS, por este motivo caso você tenha algum problema par importar, modificar, salvar e ativar seu perfil no qual depende de outras configurações, você pode utilizar diretamente o arquivo de configuração de perfil do Netweaver, com isso você corta os dois passos acima. Seu arquivo Default.PFL é encontrado no diretório: C:\usr\sap\NSP\SYS\profile.

Default.PFL (Utilizamos o cliente de desenvolvimento 200 nesta configuração)

SAPDBHOST = Estacao01
j2ee/dbtype = sap
j2ee/dbname = NSP
j2ee/dbhost = Estacao01
SAPSYSTEMNAME = NSP
SAPGLOBALHOST = Estacao01
system/type = ABAP
#-----------------------------------------------------------------------
# SAP Message Server for ABAP
#-----------------------------------------------------------------------
rdisp/mshost = Estacao01
rdisp/msserv = 0
rdisp/msserv_internal = 3900
login/system_client = 200
login/no_automatic_user_sapstar = 0
icm/host_name_full = devabertosap.com

5 – ATENÇÃO – Entre na transação SICF e clique no botão Execute. Neste passo você precisa ativar os serviços básicos para que possamos criar e rodar aplicações Web Dynpro:

ICF - Services

ICF – Services

Procure com cuidado e ative clicando com o botão direito em cima do serviço selecionado e escolhendo a opção Activate Service:

/default_host/sap/public/bc/ur
/default_host/sap/public/bc/icons
/default_host/sap/public/bc/icons_rtl
/default_host/sap/public/bc/webicons
/default_host/sap/public/bc/pictograms
/default_host/sap/public/bc/webdynpro/* (ssr, mimes, etc.)
/default_host/sap/public/myssocntl

/default host/sap/bc/webdynpro
/default host/sap/bc/wdvd

ICF: ICF services

6 – Após as configurações no Netweaver precisamos configurar o arquivo de host do Windows para utilizar o FQDN configurado no sistema SAP. Entre no prompt de comando e digite ipconfig, verifique o IP da sua placa de rede virtual (MS Loopback) ou qualquer outra que você utilize.

Nesta instalação não utilizamos o MS Loopback (recomendado pela SAP) e o substituímos pelo Oracle VirtualBox Host:

Servidor de Aplicação SAP - Placa Virtual

Servidor de Aplicação SAP – Placa Virtual

7 – Abra seu arquivo de hosts com direitos de administrador e insira o IP e o seu FQDN, vide imagem para referencia:

O arquivo hosts é encontrado no diretório: C:\Windows\System32\Drivers\etc

Hosts - IP - FQDN

Hosts – IP – FQDN

8 – Após todas estas configurações reinicie o servidor SAP e você estará apto a criar sua primeira aplicação Web Dynpro. Veja nosso post Hello World – Web Dynpro para saber como utilizar o Web Dynpro pela primeira vez:

Servidor SAP

Servidor SAP

Para criar sua primeira aplicação Web Dynpro clique aqui.