Saturday, December 29, 2012

SAP HANA se mobiliza con PhoneGap (Cordova)


Hace tres dias, mis amigos de Packt Publishing me enviarion gratis un ebook llamado PhoneGap Beginner's Guide. Y aunque yo ya conocia PhoneGap nunca lo habia utilizado...asi que por supuesto, lo primero que pense fue...como puedo hacer que esto trabaje con SAP HANA?

Hace dos dias, comence a leer el libro e installar PhoneGap...que fue realmente dificil y encima ni siquiera funciono...asi que simplemente lo deje para el proximo anho...

Ayer...mi espiritu de desarrollador pudo mas que yo...y desde las 9 am hasta las 11:30 pm me embarque en una cruzada para tener PhoneGap listo y funcionando y por supuesto...hacerlo trabajar con SAP HANA...aqui esta mi historia...para que estedes no tengan que romperse la cabeza


Con todo eso...estaba casi listo para comenzar...puesto que me faltaba el archivo Cordova-2.2.0.jar...para eso...hice lo siguiente...

  • Descargar y copiar dentro de la carpeta Cordova\libs el archivo commons-codec-1.7.jar.
  • Fui a Cordova\android\framework\scr\org\apache\cordova y modifique el archivo CordovaWebView.java comentando estas dos lineas...
    • if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.HONEYCOMB)                            settings.setNavDump(true);
  • Utilizando CMD, me fui a Cordova\android\framework y ejecute ==> ant jar.

Ahora...estaba de verdad listo para comenzar...asi que cree una carpeta llamada Projects dentro de Corbova...y nuevamente en CMD hice lo siguiente...

  • Dentro de Corbova\Projects ==> create C:\Cordova\Projects com.BlagTest BlagTest

Esto creo una carpeta llamada Blag_Test con todos los archivos relacionados al projecto Cordova. Luego, simplemente lo cargue en Eclipse, e hice un par de pruebas para asegurarme de que todo estaba funcionando correctamente...asi fue...asi que la nueva odisea para conectarme con SAP HANA estaba a punto de empezar...

Al principio...mi primera idea fue...esto debe de ser facil...ya lo hecho con PowerBuilder, asi que basicamente necesito importar el archivo ngdbc.jar dentro de mi proyecto enEclipse y ya esta...error! No funciono...y luego de mucho intentos y fallos...finalmente vi la luz...borre el proyecto de Eclipse...copie el archivo ngdbc.jar dentro de la carpeta libs de mi carpeta BlagTest...lo volvi a importar a Eclipse...y como por arte de magia...tenia conexion con SAP HANA...

Ahora...hacer que la conexion funcionara fue otra pesadilla...para este blog tuve que desempolvar mi ya casi olvidados conocimientos de Java y JavaScript...y de paso...aprender nuevas cosas como PhoneGap y JQueryMobile...

Pero...voy a tratar de mantener la larga historia, corta...para que no se aburran...

  • Cree una nueva clase llamada MyClass.java (Estaba cansado...asi que no se fijen en el nombre)

MyClass.java 
package com.BlagTest;

import java.sql.*;
import java.util.ArrayList;

public class MyClass {
 public ArrayList<String> getData(String p_carrid){
     Connection connection = null;
     ArrayList<String> carrid = new ArrayList<String>();
     String data = "";
  try{
   Class.forName("com.sap.db.jdbc.Driver");
   try{
    connection =    
                       DriverManager.getConnection("jdbc:sap://XX.XX.XXX.XXX:30115",
                       "SYSTEM","manager");
   }
   catch (SQLException e){
   }
  } 
  catch (ClassNotFoundException e){
  }    
  if(connection != null){
   try{
    String sqlstring = "select CONNID, FLDATE, PRICE from 
                                SFLIGHT.SFLIGHT where carrid = '" + p_carrid + "'";
    Statement stmt = connection.createStatement();
    ResultSet rs = stmt.executeQuery(sqlstring);
    while(rs.next()){
     data = rs.getString("CONNID") + "/" + 
                                        rs.getString("FLDATE") + "/" +  
                                        rs.getString("PRICE"); 
     carrid.add(data);
    }
   }
   catch(SQLException e){  
   }
  }
  return carrid;
   }
}


En este archivo, lo que estoy haciendo, es establecer una conexion JDBC con mi servidor de SAP HANA Server localizado en TK ucloud biz. Luego, estoy seleccionado los campos CONNID, FLDATE y PRICE de la tabla SFLIGHT donde el CARRID va a ser un parametro enviado desde la aplicacion. Como no queria pasar un array multidimensional, o un array de arrays, o nada parecido...simplemente concatene los valores utilizando un "/" para poder separarlos mas adelante.


  • Modifique el ya existente archivo BlagTest.java


BlagTest.java 
package com.BlagTest;

import android.app.Activity;
import android.os.Bundle;
import org.apache.cordova.*;

public class BlagTest extends DroidGap
{
 
 private MyClass mc;
 
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
     super.onCreate(savedInstanceState);
        super.init(); 
        mc = new MyClass();
        super.appView.getSettings().setJavaScriptEnabled(true);
        super.appView.addJavascriptInterface(mc, "MyCls");
     super.loadUrl("file:///android_asset/www/index.html");        
    }
}


Aqui, basicamente estamos diciendo que queremos poder enviar data de Java a JavaScript utilizando el setJavaScriptEnabled(true) y luego agregando el addJavaScriptInterface(mc, "MyCls") estamos indicando como se va a llamar nuestra clase...cuando la llamemos desde JavaScript.


  • Finalmente...borre todo el contenido del ya existente archivo index.html file y puse este codigo...


index.html 
<html>
<head>
<title>SAP HANA from PhoneGap</title>
<meta name="viewport" content="width=device-width, initialscale=1.0"></meta>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>

 function getData(){
 var carridField = document.getElementById('carrid');

  var getCarrid = carridField.value;
  var myArrayList = window.MyCls.getData(getCarrid);
  carridField.value = "";
  $("#content").append("<ul id='list' data-role='listview' data-inset='true'</ul>");
  $("#content").trigger("create");
  for(var i = 0; i < myArrayList.size(); i++){
   var array = "" + myArrayList.get(i);
   array = array.split('/');
   var _connid = array[0], _fldate = array[1], _price = array[2];
   var list = "<li><p>CONNID: " + _connid + "</p><p>FLDATE: " + 
                        _fldate + "</p><p>PRICE: " + _price + "</p></li>";
   $("#list").append(list);
  }
  $("#list").listview("refresh");
 }

</script>
</head>
<body>

<div data-role="page">
 <div data-role="content" id="content">
  <div align="center"><h1>SAP HANA from PhoneGap</h1></div>
  Carrid: <input type="text" id="carrid" size="2"/>
  <button id="submitCarrid" onClick="getData()">Submit</button>
 </div>
</div>
</body>
</html>


Lo que estoy haciendo aqui...es lo que se ve a continuacion...


  • Tengo un input text y un button. En el input text, vamos a pasar el valor del CARRID y cuando presionemos el button, vamos a llamar a una funcion JavaScript.
  • La funcion JavaScript va a tomar el valor del input text, llamar a nuestra funcion Java utilizando window.MyCls.getData() y pasarle el valor del parametro CARRID. Esto deberia retornarnos un ArrayList...pero en vez de eso...nos retorna un Object...asi que deberemos manejarlo mas adelante...
  • Utilizando JQueryMobile vamos a crear un ListView que es como una tabla de HTML con esteroides...y algo que me encanta de JQueryMobile es que solo necesitamos incluir un "link rel" y dos "script src" para hacerlo funcionar...puesto que lo toma de una ubicacion online.
  • Vamos a hacer un FOR comenzando de 0 hasta el tamanho de nuestro Object, y luego extraer su contenido utilizando .get() y convirtiendo en un String utilizando "".
  • Simplemente hacemos un split al recientemente creado String y lo asignamos a variables.
  • Agregamos la lineas a nuestro ListView y lo actualizamos cuando hemos terminado.


Luego de eso, simplemente podemos ir a Project --> Clean para re-construir nuestro proyecto y luego hacer click derecho en la carpeta de nuestro proyecto y escoger Run As --> Android Application.





Me tomo bastante tiempo...pero la recompenza no puede ser mas grande...espero que les guste -:)

Saludos,

Blag.
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)