Desenvolvimento Código Aberto

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

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

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

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

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.