Solucioné este requerimiento usando pasos muy similares a los que describo en este post, y el resultado final que usted tendrá al culminar este ejercicio será así.
Tenga en cuenta que se utiliza una tabla ADF como destino, y un menú emergente para que el usuario pueda situar sobre que columna quiere realizar el copiado.
Puede descargar el ejemplo completo en el siguiente enlace.
Código Fuente.
Bien vemos como solucionamos este requerimiento en ADF.
Requerimientos :
Jdeveloper 11.1.1.3
1.Para el ejemplo primero crearemos una aplicación ADF. Los pasos de creación los omito debido a que uso las opciones por default.
2. En el proyecto ViewController agregaremos el bean “EmpleadoBean” con los datos de código y nombre de empleado. Asegúrese de incluir los métodos accesores.
3.Crearemos además una managed Bean “DatosBean” de JSF a nivel de sesión donde almacenaremos los datos ingresados desde la página. Noté que esta clase tendrá una lista de Empleados. Asegúrese de incluir los métodos accesores.
4.Sobre escribimos el constructor de este bean para agregar un empleado al iniciar la pagina.
public DatosBean() { super(); EmpleadoBean empleado = new EmpleadoBean(); listaEmpleados.add(empleado); }
5.Para definir a la clase como un managed bean de sesión es necesario configurarlo en el adfc-config.xml
6.Ahora creamos la pagina ADF
7.Arrastramos de la paleta el control Table hacia la pagina
8.Asociamos los datos mostrados a la lista creada previamente.
9. Configuramos el contenido de nuestra tabla, estamos cambiando los headers, values y el tipo de componente por inputText, tal como se muestra en la figura.
Ojo, debe respetar los nombres de los atributos de manera similar como lo definió en el bean : EmpleadoBean.
10.Ejecutamos la página. En una primera prueba, esto debería mostrarse.
11. Bien, la idea ahora será que el usuario haga clic derecho sobre algunas de las celdas y se muestre un menú contextual que ofrezca una opción de pegado de contenido de una hoja excel.
Para eso primero crearemos el menú contextual. Arrastre el control popup hacia la página,
12. Incluya dentro del popup, los componentes Menu (Que define el menú vertical) y finalmente un “Menu Item” que será el botón que pulsará el usuario. Al final usted debe tener algo similar a lo mostrado a continuación.
Tenga en cuenta que se cambio la propiedad Text del Menu Item por “Pegar Contenido” y además la propiedad ContetDelivery del popup por “Inmediate” lo cual acelerará la presentación del contenido del popup y que es recomendada para las ventanas emergentes que serán siempre usadas en las pantallas, como es el caso de esta opción.
13 Ahora será necesario programar un evento a nivel de las celdas que lancen el popup que acabamos de crear. Para ello, usaremos un componente llamado Client Listener que permite invocar a funciones javaScript en nuestra página. Arrastremos este componente sobre la primera celda (inputText) de nuestra tabla.
Note que estamos indicando que se invocará a la función mostrarPopup y el evento asociado es el contextMenu. Este evento se ejecuta cuando hacemos clic derecho sobre la celda (input text)
14. Colocamos la función JavaScript en la página tal como se indica a continuación.
function mostrarPopup(popupId)
{
return function(evt)
{
evt.cancel();
var clientId = evt.getSource().getClientId();
var popup = AdfPage.PAGE.findComponentByAbsoluteId(popupId);
var hints = {align:"end_before", alignId:clientId};
popup.show(hints);
}
}
Note que la función java script cancela el comportamiento por default del evento, define la variable clienId asociado al control que recibe el evento (la caja de texto),define la varible popup, asociado al control popup que creamos previamente, define la varible hints permite definir la ubicación donde aparecerá nuestra ventana emergente y finalmente muestra el popup (popup.show).
15. Probemos la pantalla hasta este punto. Al hacer clic derecho sobre la celda, debe mostrar el menú contextual.
16.Es momento ahora de programar el listener de botón “Pegar Contenido”. El código usará un inputText como intermediario entre el contenido de la hoja excel y la tabla de ADF. Por eso primero vamos a agregar un control input Text. Arrastre el inputText a la página. Verifique el id del control, en este caso se creo el id it3.
En la paleta de estructura se debería reflejar lo siguiente :
17. Ahora asociaremos el botón “Pegar Contenido” con una rutina JavaScript. Para eso arrastraremos un control clientListener hacía el control commandMenuItem.
Verifique que tenga un resultado similar a lo mostrado a continuación.
Tenga en cuenta que se invoca a una función mostrarContenido pasando como parámetro el id del popup.
18. La función JavaScript tendrá la siguiente implementación.
function pegarContenido(popupId)
{
return function(evt)
{
var txtContenido = document.getElementById("it3::content");
txtContenido.focus();
txtContenido.select();
rangeExcel=txtContenido.createTextRange();
rangeExcel.execCommand("Paste");
}
}
Las dos últimas líneas sólo funcionan para IE y permiten obtener el contenido del portapapeles de wndows hacía el control inputText it3.
19. Probemos hasta este punto cual es el efecto en tiempo de ejecución.
Noté que el contenido ahora reside en el control inputText en la página. Lo que requerimos ahora es mover el contenido hacía la tabla ADF. Para eso usaremos un listener ligado a un botón. Para eso, arrastremos un button hacía la página y la asociamos al método “pegarDatos”
20. Implementamos el método en el backig bean.
public String pegarDatos() {
// Add event code here...
FacesContext ctx = FacesContext.getCurrentInstance();
DatosBean desarrolloBean = (DatosBean)ctx.getExternalContext().getSessionMap().get("datosBean");
EmpleadoBean empleado = desarrolloBean.getListaEmpleados().get(0);
StringTokenizer st = new StringTokenizer(it3.getValue().toString(), "\t");
empleado.setCodigo(st.nextToken());
empleado.setNombre(st.nextToken());
return null;
}
21. Finalmente, tenemos que modificar el javaScript “Pegar Contenido” para que posteriormente a la obtención de datos de la hoja excel, invoque al botón cb1, creado en el paso anterior.
function pegarContenido(popupId)
{
return function(evt)
{
var txtContenido = document.getElementById("it3::content");
txtContenido.focus();
txtContenido.select();
rangeExcel=txtContenido.createTextRange();
rangeExcel.execCommand("Paste");
var component = AdfPage.PAGE.findComponentByAbsoluteId("cb1");
AdfActionEvent.queue(component, component.getPartialSubmit());
}
}
22. El resultado final será el siguiente.
No comments:
Post a Comment