Arquivo de janeiro, 2015

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive a API do Javascript contempla métodos para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma página web, utilize os scripts JQuery adequados no qual você pode conferir no código abaixo:

JQuery UI - Validação - Regex

JQuery UI – Validação – Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação JQuery. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!--
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar

         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI
         jquery-ui.css = JQuery Theme
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">

</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">

</script>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação  - Adiciona método JQuery Validation
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Menssagem substituída pela mensagem do Plug-in JQuery Validation.");

		// Cria regras de validação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais."
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

Anúncios

JQuery UI – Validation Plug-in – Linux

Publicado: 31 de janeiro de 2015 em JavaScript, JQuery

O JQuery possui uma gama de plug-ins escritos sob o código aberto que permitem que você estenda as funcionalidades do JQuery, o JQuery Validation faz a validação de formulários do lado cliente de um modo simples e fácil, enquanto continua a oferecer uma abundância de opções de personalização. Faz dele uma boa escolha se você está construindo algo novo a partir do zero, mas também se você está tentando integrar algo em uma aplicação existente com muita marcação.

O JQuery Validation é open source e escrito sob a licença MIT e foi construído por um desenvolvedor líder na equipe jQuery UI, com o plug-in você pode validar campos requeridos de uma forma simples, ou customizar suas validações contando com inúmeras possibilidades, desde simples mensagens personalizadas até complexas validações sob regras que você pode definir. O download do JQuery Validation conta com vários exemplos de como utilizar o plug-in.

JQuery Validation: http://jqueryvalidation.org/

JQuery Validation

JQuery Validation

Exemplo:

Neste exemplo utilizamos o JQuery Validation para validar automaticamente os campos requeridos de um formulário. Para utiliza-lo basta efetuar o download e usar o arquivo contido na pasta Dist.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>

<!-- JQuery Validatr -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery
	$(document).ready(function() {

		$("#cadastro").validate();

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

 

Os Widgets do JQuery UI são ricos em recursos, são plugi-ns que têm um ciclo de vida completo, você pode utiliza-los juntamente com métodos e eventos do JQuery. Você usar os Widgets para criar formulários modernos, interativos e animados na medida certa.

Os elementos basicos são o Accordion que converte um par de cabeçalhos e painéis de conteúdo em um acordeão, você pode usa-lo de varias maneiras. O Button permite que você use botões que possuem temas. O Dialog abre um conteúdo em uma sobreposição interativa e animada.

Widgets: http://api.jqueryui.com/1.10/category/widgets/

JQuery - Widgets

JQuery – Widgets

Exemplo:

Neste exemplo utilizamos o JQuery e o JQuery UI para criar um simples cadastro e exibir a informação inserida pelo usuário em uma caixa de dialogo.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}
</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>
<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery
	$(document).ready(
			function() {

				$("#accordion").accordion({
					heightStyle : "content"
				}).accordion("option", "icons", null)

				$("#abrir").button()

				$("#dialog").dialog({
					autoOpen : false,
					show : {
						effect : "blind",
						duration : 1000
					},

					hide : {
						effect : "blind",
						duration : 1000
					}

				});

				$("#abrir").click(
						function() {

							$("#dialog").html(
									"Você digitou: <br><br>" + "Nome:      "
											+ $("#nome").val() + "<br>"
											+ "Sobrenome: "
											+ $("#sobrenome").val() + "<br>"
											+ "Cargo:     " + $("#cargo").val()
											+ "<br>" + "Salario:   "
											+ $("#salario").val())

							$("#dialog").dialog("open");

						});

			});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Accordion - Dialog - Button</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<table>
				<tr>
					<td><label for="nome">Nome:</label></td>
					<td><input id="nome" size="27" /> <br></td>
				</tr>
				<tr>
					<td><label for="sobrenome">Sobrenome:</label></td>
					<td><input id="sobrenome" size="35" /> <br></td>
				</tr>
				<tr>
					<td><label for="cargo">Cargo:</label></td>
					<td><input id="cargo" size="28" /> <br></td>
				</tr>
				<tr>
					<td><label for="salario">Salario:</label></td>
					<td><input id="salario" size="18" /> <br></td>
				</tr>
			</table>
			<br>
			<button id="abrir">Enviar Dados</button>
		</div>
	</div>
	<div id="dialog" title="Resultado">
		<p></p>
	</div>
</body>
</html>

JQuery – Instalando o JQuery UI – Linux

Publicado: 29 de janeiro de 2015 em JavaScript, JQuery

O jQuery UI é uma coleção de widgets que é usado para criar uma interface do usuário que contém, efeitos visuais animados e temas implementados com jQuery, que utiliza sua biblioteca JavaScript, Cascading Style Sheets, e HTML. Todos os efeitos, widgets e temas foram construídos em cima da Biblioteca JavaScript jQuery. O Jquery e jQuery UI são softwares livres e de código aberto distribuído pela Fundação jQuery sob a licença MIT.

jQuery UI foi desenvolvido por designers e desenvolvedores, no qual projetaram todos os  plug-ins para que você comece a trabalhar rapidamente de um modo flexível o suficiente para evoluir com suas necessidades e resolver uma infinidade de casos de uso.

JQuery UI: http://jqueryui.com/

Instalando e Usando o JQuery UI

1 – Ao instalar o JQuery, você possui varias opções e uma delas é escolher um dos vários temas e baixa-lo com a configuração da biblioteca desejada, ou seja você pode escolher somente o que precisa usar. Entre no menu temas e em seguida clique em Gallery e escolha um tema desejado, nos escolhemos o Redmond e clique em download:

JQuery UI - Galeria de Temas

JQuery UI – Galeria de Temas

2 – Você será redirecionado para a pagina de download, nela você pode escolher a versão do JQuery UI desejada e os elementos de sua biblioteca, somente clique em download:

JQuery UI - Download

JQuery UI – Download

3 – Descompacte o JQuery no diretório de sua aplicação Web:

Descompactar JQuery

Descompactar JQuery

4 – O pacote já contempla a biblioteca JQuery, JQuery UI e a folha de estilos CSS. Você precisa chama-los de sua pagina Web:

JQuery UI - Bibliotecas

JQuery UI – Bibliotecas

5 – Para utilizar os widgets do JQuery UI você simplesmente os chama utilizando o ID do elemento HTML e referenciando através de instruções JQuery para cada componente, utilize o código abaixo para criar uma simples página web.

JQuery UI - Aplicação

JQuery UI – Aplicação

Exemplo:

Neste exemplo utilizamos as bibliotecas JQuery e JQuery UI e sua folha de estilos para criar elementos da interface do usuário que utiliza um menu do tipo acordeão e um botão que dispara uma caixa de dialogo.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Bluefish 2.2.6" />
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">

body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

</style>
<!-- 
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar
                  
         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI     
         jquery-ui.css = JQuery Theme    
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">
	
</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">
	
</script>
<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">

	// Declara UI e funções JQuery
	$(document).ready(function() {

		$("#accordion").accordion()

		$("#abrir").button()

		$("#dialogo").dialog({
			autoOpen : false,
			show : {
				effect : "blind",
				duration : 1000
			},

			hide : {
				effect : "explode",
				duration : 1000
			}
		});

		$("#abrir").click(function() {
			$("#dialogo").dialog("open");
		});

	});

</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Accordion - Dialog - Button</h2>
	<div id="accordion">
		<h3>Sobre</h3>
		<div>
			<p>Desenvolvimento Aberto utiliza um método de desenvolvimento de
				software que utiliza a transparência do processo. A promessa de
				código aberto é de melhor qualidade, maior confiabilidade, maior
				flexibilidade e um menor custo.</p>
			<p>Desenvolvimento Aberto é uma organização voltada para o
				aprendizado e discussão de técnicas de desenvolvimento focado em
				algumas linguagens de programação sendo parcialmente/totalmente
				abertas ou com licenças gratuitas para desenvolvedores de cada uma
				de suas respectivas marcas registradas.</p>
		</div>
		<h3>Clique em mim!</h3>
		<div>
			<div id="dialogo" title="Desenvolvimento Aberto">
				<p>Desenvolvimento Aberto é formado para educar sobre e defender
					os benefícios do código aberto e de construir pontes entre os
					diferentes círculos eleitorais na comunidade de código aberto.</p>
			</div>
			<button id="abrir">Clique Aqui.</button>
		</div>
	</div>
</body>
</html>

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive o ABAP Objects contempla as classes CL_ABAP_REGEX e CL_ABAP_MATCHER para combinar sequências de caracteres contra padrões especificados por expressões regulares. O ABAP também utiliza expressões regulares nas funções FIND e REPLACE através da instrução REGEX.

Regex: Regular Expressions in Routines.

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie um componente Web Dynpro utilizando os elementos básicos como rótulos, campos de texto e um botão. Use a figura abaixo para referencia:

Web Dynpro - Layout

Web Dynpro – Layout

2 – Crie uma Action para o botão e no seu método de evento ONACTIONACAO_BOTAO_ENVIAR utilize o código abaixo:

Web Dynpro - Action - Método

Web Dynpro – Action – Método

3 – Ative seu componente, crie sua aplicação e teste. Insira caracteres no campo Cargo que não correspondem aos caracteres do Pattern escolhido:

Web Dynpro - Validação Regex

Web Dynpro – Validação Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação Web Dynpro. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

Abap

Método – ONACTIONACAO_BOTAO_ENVIAR

method ONACTIONACAO_BOTAO_ENVIAR .

* // Retorna campos do contexto da View
  DATA lo_nd_usuario_controler TYPE REF TO if_wd_context_node.

  DATA lo_el_usuario_controler TYPE REF TO if_wd_context_element.
  DATA ls_usuario_controler TYPE wd_this->Element_usuario_controler.
  DATA lv_cargo TYPE wd_this->Element_usuario_controler-cargo.

* // Recupera node controller
  lo_nd_usuario_controler = wd_context->get_child_node( name = wd_this->wdctx_usuario_controler ).

* // Recupera elemento via lead selection
  lo_el_usuario_controler = lo_nd_usuario_controler->get_element( ).

* //  @TODO handle not set lead selection
  IF lo_el_usuario_controler IS INITIAL.
  ENDIF.

* // Recupera atributo
  lo_el_usuario_controler->get_attribute(
    EXPORTING
      name =  'CARGO'
    IMPORTING
      value = lv_cargo ).

* // Define objetos Regex
  DATA:  regex   TYPE REF TO cl_abap_regex,
         matcher TYPE REF TO cl_abap_matcher.

* // Cria objeto Regex e define Pattern
  CREATE OBJECT regex
    EXPORTING
      pattern     = '[a-zA-Z]+'.

* // Verifica valot do elemento contra o Pattern
  matcher = regex->create_matcher( text =  lv_cargo ).

IF matcher->match( ) NE 'X'.

* // Define menssagem
    data lo_api_controller     type ref to if_wd_controller.
    data lo_message_manager    type ref to if_wd_message_manager.

    lo_api_controller ?= wd_This->Wd_Get_Api( ).

* // Chama método de menssagem
    CALL METHOD lo_api_controller->GET_MESSAGE_MANAGER
      RECEIVING
        MESSAGE_MANAGER = lo_message_manager.

* // Exibe mensagem
    CALL METHOD lo_message_manager->REPORT_MESSAGE
      EXPORTING
        MESSAGE_TEXT      = 'Cargo é exclusivamente um campo alphanumérico'
        CANCEL_NAVIGATION = ABAP_TRUE.

  ENDIF.

* // Dispara botão
  wd_this->fire_ir_saudacao_plg(
  ).
endmethod.

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive o Ruby contempla classes para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: http://www.ruby-doc.org/core-2.2.0/Regexp.html

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma aplicação web dinâmica JSF e utilize os códigos abaixo:

JSF - Validando Expressões Regulares

JSF – Validando Expressões Regulares

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação Rails. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

Ruby

Model – modelo01.rb

class Modelo01 < ActiveRecord::Base

  # Cria validação
  validates  :nome, :sobrenome, :cargo, :salario,
             :presence => {:message => "Campo obrigatório"}             

  # Regex - valores alphanumericos
  validates  :nome, :sobrenome, :cargo,
             :format => {:with => /[A-Za-z]+/,
                         :message => "Permitido somente caracteres alphanuméricos"}

end

View – index.html.erb

<h1>Desenvolvimento Aberto</h1>
<h2>Ruby on Rails - Validate </h2>

<%= form_for @modelo, :url => {:action => :create} do  |cad|%>

<% if @modelo.errors.any?  %>
<h3>Erros: </h3>
<ul style="color:red">
	<% @modelo.errors.full_messages.each do |menssagem| %>
	<li>
		<%= menssagem %>
	</li>
	<% end %>
</ul>
<% end %>

<p>
	<%= cad.label :nome%>
	<br />
	<%= cad.text_field :nome  %>
</p>

<p>
	<%= cad.label :sobrenome%>
	<br />
	<%= cad.text_field :sobrenome, :size => "35x10"%>
</p>

<p>
	<%= cad.label :cargo%>
	<br />
	<%= cad.text_field :cargo, :size => "30x10"%>
</p>

<p>
	<%= cad.label :salario%>
	<br />
	<%= cad.text_field :salario, :size => "15x10"%>
</p>

<p>
	<%= cad.submit "Adicionar dados" %>
</p>

<% end %>

Controller – meucontrole_controller.rb

class MeucontroleController < ApplicationController

  # Controladores
  def index
    @modelo  = Modelo01.new
  end

  def new
    @modelo  = Modelo01.new
  end

  # Cria registro
  def create
    @modelo = Modelo01.new(modelo_params)
    if @modelo.save

      # Você pode colocar uma menssagem aqui.
      render "index"
    else
      render "index"
    end
  end

  # Define parametros requeridos
  private

  def modelo_params
    params.require(:modelo01).permit(:nome, :sobrenome, :cargo, :salario)
  end

end

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive o Modulo re do Python contempla classes para combinar sequências de caracteres contra padrões especificados por expressões regulares.

Regex: https://docs.python.org/2/library/re.html

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

PyRegex: http://www.pyregex.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie um projeto e uma aplicação Django e utilize os códigos abaixo para cada arquivo de sua aplicação, configure corretamente o arquivo de configuração para o Template, MySQL e as URLs:

Django - Regex

Django – Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação Django. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

Python

Model.py

from django.db import models

# Cria modelo
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)

    # Define unicode para o Django Admin
    def __unicode__(self):
        return self.nome

View.py

from django.shortcuts import render, render_to_response, RequestContext
from django.http import HttpResponse

# Importa form
from meusite.forms import MeuForm

# Exibe View
def home(request):

    # Cria form
    form = MeuForm(request.POST or None)   

    # Valida e salva
    if form.is_valid():
        salvar = form.save(commit=False)
        salvar.save()
        return HttpResponse("Dados inseridos com sucesso!")

    # Chama Template
    return render_to_response("devaberto.html",
                              locals(),
                              context_instance = RequestContext(request))

Template – DevAberto.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div>
			<header>
				<h1>Desenvolvimento Aberto</h1>
				<h2>Django - Validations </h2>
			</header>
			<div>
				<p>
					Meu Formulário
				</p>
				<form method="post" action="">
					{% csrf_token %}
					{{ form.as_p }}
					<input type="submit" />
				</form>
			</div>
		</div>
	</body>
</html>

Forms.py

from  django import forms
from django.core.validators import RegexValidator

#Importa modulo Regex
import re 

# cria objeto Regex
caracteres = RegexValidator(
    regex= re.compile(r"[a-zA-Z]+"),
    message="Permitido somente caracteres Alpha numericos",
    code="invalid")

# Importa modelo
from models import Funcionario

# Cria classe do form para o modelo
class MeuForm(forms.ModelForm):
    nome = forms.CharField(required= True, validators=[caracteres])
    sobrenome = forms.CharField(required= True, validators= [caracteres])
    cargo = forms.CharField(required= True, validators= [caracteres])
    salario = forms.DecimalField()

    # Associa formulario ao modelo
    class Meta:
        model = Funcionario

    # Django Validations  - customizado campo sobrenome
    def clean_sobrenome(self):
        snome = self.cleaned_data['sobrenome']
        if len(snome) <= 3:
            raise forms.ValidationError("Sobrenome precisa conter mais de 3 caracteres.")
        return snome

ASP NET – Regex – Regular Expression – C#

Publicado: 27 de janeiro de 2015 em C#

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive o .NET Framework contempla classes para combinar sequências de caracteres contra padrões especificados por expressões regulares que representam uma expressão regular imutável.

Regex: https://msdn.microsoft.com/pt-br/library/system.text.regularexpressions.regex(v=vs.110).aspx

A Microsoft também disponibiliza uma referencia rápida da linguagem de expressão regular para o .NET Framework para que seja usada em suas aplicações.

Regular Expression Language: https://msdn.microsoft.com/en-us/library/az24scfc(v=vs.110).aspx

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma aplicação ASP.NET do tipo C# Empty e utilize os códigos abaixo, que contempla o RegularExpressionValidator e suas propriedades requeridas para que funcione corretamente:

ASP.NET RegularExpressionValidator

ASP.NET  – RegularExpressionValidator

2 – Rode sua aplicação e tente preencher os campos com valores inadequados ao seu tipo, após o foco deixar o campo ele será automaticamente validado:

ASP.NET - Aplicação

ASP.NET – Aplicação

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação ASP.NET. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

ASP NET – C#

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DAWebApp001._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style2 {
            width: 14%;
        }

        .auto-style3 {
            height: 23px;
        }

        .auto-style5 {
            width: 248px;
        }

        .auto-style6 {
            width: 54%;
        }

        .auto-style8 {
            height: 23px;
            width: 54%;
        }

        .auto-style9 {
            height: 23px;
            width: 248px;
        }
    </style>

</head>
<body>
    <h1>Desenvolvimento Aberto - ASP.NET</h1>
    <h2>Validação de Controles</h2>
    <form id="form1" runat="server">
        <div>

            <table style="width: 100%;">
                <tr>
                    <td class="auto-style3" colspan="2">
                        <asp:Label ID="LabelMenssagem" runat="server" Text="Entre com os dados abaixo:"></asp:Label>
                    </td>
                    <td class="auto-style8"></td>
                </tr>
                <tr>
                    <td class="auto-style2">
                        <asp:Label ID="Label2" runat="server" Text="Nome:"></asp:Label>
                    </td>
                    <td class="auto-style5">
                        <asp:TextBox ID="TextBox1nome" onMouseOver="meuMouseOver()" onMouseOut="meuMouseOut()" runat="server" Width="142px"></asp:TextBox>
                    </td>
                    <td class="auto-style6">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1nome" ErrorMessage="Nome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                        <br />
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1nome" ErrorMessage="Permitido somente caractere  alphanumericos" ForeColor="Red" ValidationExpression="[a-zA-Z]+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Label ID="Label3" runat="server" Text="Sobrenome:"></asp:Label>
                    </td>
                    <td class="auto-style9">
                        <asp:TextBox ID="TextBox2sobrenome" runat="server" Width="240px"></asp:TextBox>
                    </td>
                    <td class="auto-style8">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2sobrenome" ErrorMessage="Sobrenome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                        <br />
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="TextBox2sobrenome" ErrorMessage="Permitido somente caractere  alphanumericos" ForeColor="Red" ValidationExpression="[a-zA-Z]+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Label ID="Label4" runat="server" Text="Cargo:"></asp:Label>
                    </td>
                    <td class="auto-style9">
                        <asp:TextBox ID="TextBox3cargo" runat="server" Width="186px"></asp:TextBox>
                    </td>
                    <td class="auto-style8">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3cargo" ErrorMessage="Cargo é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                        <br />
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="TextBox3cargo" ErrorMessage="Permitido somente caractere  alphanumericos" ForeColor="Red" ValidationExpression="[a-zA-Z]+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Label ID="Label5" runat="server" Text="Salário:"></asp:Label>
                    </td>
                    <td class="auto-style9">
                        <asp:TextBox ID="TextBox4salario" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style8">
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4salario" ErrorMessage="Salário é obrigatório. " ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
                        <br />
                        <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="TextBox4salario" ErrorMessage="Permitido somente caractere  numericos e decimais." ForeColor="Red" ValidationExpression="(?:\d*\.)?\d+" ValidationGroup="AllValidator"></asp:RegularExpressionValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style3"></td>
                    <td class="auto-style9"></td>
                    <td class="auto-style8"></td>
                </tr>
                <tr>
                    <td class="auto-style3">
                        <asp:Button ID="Button1enviardados" runat="server" Text="Enviar Dados" OnClick="Button1enviardados_Click" ValidationGroup="AllValidator" />
                    </td>
                    <td class="auto-style9">&nbsp;</td>
                    <td class="auto-style8">&nbsp;</td>
                </tr>
            </table>
            <!-- Div - logs do evento javascript -->
            <div id="meulog"></div>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DAWebApp001
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1enviardados_Click(object sender, EventArgs e)
        {
            if (Page.IsValid)
            {
                // Envia menssagem quando todos os campos requeridos
                // forem preenchidos tornando a página valida.
                LabelMenssagem.ForeColor = System.Drawing.Color.Green;
                LabelMenssagem.Text = "Dados enviados com sucesso.";
            }

        }
    }
}

Web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>

  <appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  </appSettings>

</configuration>

JSF – Regex – Regular Expression – Java

Publicado: 26 de janeiro de 2015 em Java

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive a API de utilidades do Java contempla classes para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: http://docs.oracle.com/javase/8/docs/api/java/util/regex/package-summary.html

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma aplicação web dinâmica JSF e utilize os códigos abaixo:

JSF - Validando Expressões Regulares

JSF – Validando Expressões Regulares

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação JSF. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

Java

Managed Bean – Participante

package org.desenvolvimento.aberto;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

// Define decoradores
@ManagedBean(name = "Participante")
@RequestScoped
public class Participante {

	// Define atributos privados
	private long id;
	private String nome;
	private String sobrenome;
	private String cargo;
	private Double salario;

	// Metodos Getter e Setter
	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	public String getSobrenome() {
		return sobrenome;
	}

	public void setSobrenome(String sobrenome) {
		this.sobrenome = sobrenome;
	}

	public String getCargo() {
		return cargo;
	}

	public void setCargo(String cargo) {
		this.cargo = cargo;
	}

	public Double getSalario() {
		return salario;
	}

	public void setSalario(Double salario) {
		this.salario = salario;
	}

	// Método de Ação (clique do botão)
	public String Acao() {
		System.out.println("Clique do botão");
		System.out.println("Nome: " + this.getNome() + "\n " +
						   "Sobrenome: " + this.getSobrenome() + "\n " +
						   "Cargo: " + this.getCargo() + "\n " +
						   "Salário: " + this.getSalario() + "\n ");
		return null;
	}
}

JSF – index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<f:loadBundle basename="resources.application" var="msg" />

<head>
<title><h:outputText value="#{msg.welcomeTitle}" /></title>

</head>

<h:body>
	<h2>JSF - Desenvolvimento Aberto - Managed Beans -</h2>
	<h3>
		<h:outputText id="lnome" value="Validação - Cadastros:" />
	</h3>
	<h:form>
		<h:panelGrid columns="3" cellpadding="2px">
			<h:outputText id="lnome" value="Nome:" />
			<h:inputText id="tnome" value="#{Participante.nome}" size="30"
				required="true" label="Nome">
				<f:validateRegex pattern="[a-zA-Z]+" />
			</h:inputText>
			<h:message for="tnome" style="color:red" />

			<h:outputText id="lsobrenome" value="Sobrenome:" />
			<h:inputText id="tsobrenome" value="#{Participante.sobrenome}"
				size="40" required="true" label="Sobrenome">
				<f:validateRegex pattern="[a-zA-Z]+" />
			</h:inputText>
			<h:message for="tsobrenome" style="color:red" />

			<h:outputText id="lcargo" value="Cargo" />
			<h:inputText id="tcargo" value="#{Participante.cargo}" size="25"
				required="true" label="Cargo">
				<f:validateRegex pattern="[a-zA-Z]+" />
			</h:inputText>
			<h:message for="tcargo" style="color:red" />

			<h:outputText id="lsalario" value="Salário" />
			<h:inputText id="tsalario" value="#{Participante.salario}"
				required="true" label="Salário"
				requiredMessage="#{msg['requerido.salario']}"
				validatorMessage="#{msg['validar.salario']}">
				<f:validateRegex pattern="(?:\d*\.)?\d+" />
				<f:validateDoubleRange minimum="788.00" maximum="9999.99" />
			</h:inputText>

			<h:message for="tsalario" style="color:red" />

		</h:panelGrid>
		<br />
		<h:commandButton id="botao" action="#{Participante.Acao}"
			value="Enviar Dados" />

		<div id="meulog"></div>
	</h:form>
</h:body>
</html>

Web Dynpro – Usando Javascript – SAP- Abap

Publicado: 25 de janeiro de 2015 em Abap, JavaScript

A tecnologia Web Dynpro até a sua versão 7.2 não permite que você utilize Javascript para manipular elementos de sua UI, no entanto o ABAP Objects nos presenteia com a classe CL_JAVA_SCRIPT para que possamos utilizar scripts externos para chamar nossas funções Javascript em aplicações Web Dynpro. As versões mais recentes do Web Dynpro como a 7.3 ou superiores já inclui elementos de integração HTML chamados HTMLIsland e HTMLContainer que possibilita integrar Javascript e CSS aos elementos de sua UI.

Você pode usar a classe CL_JAVA_SCRIPT para executar programas em JavaScript que, por exemplo, são carregados de recursos externos ou programados em um editor e escrito por você mesmo. Você também pode criar um arquivo Javascript dinamicamente de um código ABAP.

CL_JAVA_SCRIPT: Objetos Javascript

HTML Integration: Integração HTML

Usando uma Biblioteca Externa

1 – Crie um novo componente Web Dynpro e crie seu layout como na figura abaixo, usando os elementos básicos, como labels, caixa de texto, botões e containers transparentes para espaçar os elementos:

Web Dynpro - Layout

Web Dynpro – Layout

2 – Crie dois atributos no contexto da View Main, um para o Input_field e outro para exibir a mensagem no TextView:

Web Dynpro - Contexto - Atributos

Web Dynpro – Contexto – Atributos

3 – Crie um evento de clique para o botão e utilize o código abaixo para criar seu recurso javascript dinamicamente:

Web Dynpro - Botão - Evento

Web Dynpro – Botão – Evento

4 – Ative e teste sua aplicação, entre com um valor e a função Javascript do recurso criado dinamicamente chamado script.js será executada e seu resultado retornado em uma variável javascript chamada resultado que será recuperada e exibida na página Web.

Web Dynpro - Aplicação

Web Dynpro – Aplicação

Exemplo:

Neste exemplo utilizamos a classe CL_JAVA_SCRIPT para criar um arquivo Javascript que contem uma função e uma variável que retorna o resultado da função, utilizamos o evento de clique do botão para criar, compilar e executar a função Javascript e manipula-la através de código ABAP.

Abap

method ONACTIONONCLIQUEBOTAO .

* //Declara objetos javascript e scripts
  DATA: MSG       TYPE string,
        Get_valor TYPE string,
        JS_Objeto TYPE REF TO CL_JAVA_SCRIPT,
        MeuScript TYPE String.

* //Os códigos utilizando a instrução WRITE
* //Não tem efeito no Web Dynpro
* //você pode utilizar os trechos em um programa comum
* //para testar o seu javascript dinâmico.

* //Cria Script
  CONCATENATE
  ' function quadrado(x) { return x * x}; '
  ' var resultado = quadrado(mapa) '
  INTO MEUSCRIPT SEPARATED BY  CL_ABAP_CHAR_UTILITIES=>CR_LF.

* //Cria objeto javascript
  JS_OBJETO = CL_JAVA_SCRIPT=>CREATE( ).

* //Compila objeto javascript
  JS_OBJETO->COMPILE(
    exporting
      SCRIPT_NAME = 'script.js'
      SCRIPT      = MEUSCRIPT ).

* //Verifica compilação
  if JS_OBJETO->LAST_CONDITION_CODE <> 0.
    write: / 'Erro de compilação de script',
             JS_OBJETO->LAST_ERROR_MESSAGE.
  else.
    write / 'foi compilado com sucesso'.
  endif.

* //Recupera valor do usuário
  DATA lo_el_context TYPE REF TO if_wd_context_element.
  DATA ls_context TYPE wd_this->Element_context.
  DATA lv_valor TYPE wd_this->Element_context-valor.

* //Recupera elemento via lead selection
  lo_el_context = wd_context->get_element( ).

* // @TODO Caso queira validar o elemento vazio
  IF lo_el_context IS INITIAL.
  ENDIF.

* //Recupera o atributo
  lo_el_context->get_attribute(
    EXPORTING
      name =  `VALOR`
    IMPORTING
      value = lv_valor ).

* //Define um valor de variavel atravez do ABAP
  JS_OBJETO->SET( NAME = 'mapa' VALUE = lv_valor  ).

* //Executa Javascript
  JS_Objeto->EXECUTE(
                exporting SCRIPT_NAME = 'script.js' ).

* //Verifica se script foi executado
  if JS_OBJETO->LAST_CONDITION_CODE <> 0.
    write: / 'Erro na execução de script',
             JS_OBJETO->LAST_ERROR_MESSAGE.
  else.
    write / 'JavaScript foi executado com sucesso'.
  endif.

  skip.

* //Retorna valor de script
  GET_VALOR = JS_OBJETO->GET( NAME = 'resultado' ).

* //Define uma menssagem para o usuario
  DATA lv_msg TYPE wd_this->Element_context-msg.

* //Recupera o elemento via lead selection
  lo_el_context = wd_context->get_element( ).

* // @TODO - caso queira validar
  IF lo_el_context IS INITIAL.
  ENDIF.

* //Cria mensagem de retorno para o usuário
  CONCATENATE lv_valor ' * ' lv_valor ' = ' GET_VALOR INTO MSG.
  lv_msg = MSG.

* //Define valor do atributo
  lo_el_context->set_attribute(
    name =  `MSG`
    value = lv_msg ).

* //Verifica se o objeto retornou um valor
  if JS_OBJETO->LAST_CONDITION_CODE <> 0.
    write: / 'Erro em recuperar objeto javascript',
             JS_OBJETO->LAST_ERROR_MESSAGE.
  else.
    write: / 'Valor do objeto :', GET_VALOR.
  endif.

endmethod.