Como carregar dados vindos de uma servelet numa .jsp feita sobre a framework ext.js

3 respostas
Z

Oi malta aqui estou eu de novo. Não consigo carregar dados de um array ou lista retornados de um banco de dados, numa pagina jsp nos seus respectivos comboboxs e depois obter o seu valor seleccionado para obter outra lista para um novo combo box, isto sobre a framework ext.js

o que tenho de momento é :

NA página JSP:

<%–
Document : passo1
Created on : 30/Jun/2008, 15:24:46
Author : ASC
–%>

<%@page contentType=“text/html” pageEncoding=“UTF-8”%>

<%@ taglib  tagdir="/WEB-INF/tags/ext/" prefix=ext %>

<%@ page import=java.util.*%>

<%@ page import=controler.Gestor %>

<%@ page import=ligacaoBD.ApiPostgresql %>
Passo1
<body bgcolor="#BFD5EA">
    
<script>
   
      
inArea=[[1],[2],[3]];          
inAssunto=[[1],[2],[3]];
inFormulario=[[1],[2],[3]];


</script>



            <ext:body theme="blue">
               <!--   utiliza uma tabela como base de suporte aos objectos graficos que irá usar --> 
               <ext:viewport layout="table">
                  <!-- inicio dos forms da página -->
                  <ext:form.formPanel baseCls="caixaBox" renderTo="combo" id="form" url="index.jsp" bodyStyle="padding:10px" border="false" name="passo1">      
                        <!-- Combo box relativa ao area -->
                        <ext:form.comboBox name="area" mode="local" triggerAction="all" fieldLabel="Area"  displayField="area" align="center" valign="middle" >         
                         <ext:data.store  data="inArea" autoLoad="true">
                                <ext:data.arrayReader>
                                <ext:data.fields>
                                            <ext:data.field  name="area"/>
                                      </ext:data.fields>
                                </ext:data.arrayReader>
                            </ext:data.store>            
                         </ext:form.comboBox>

                 <!-- Combo box relativa ao assunto -->
                         <ext:form.comboBox name="assunto" mode="local" triggerAction="all" fieldLabel="Assuntos"  displayField="assunto">         
                         <ext:data.store data="inAssunto" autoLoad="true" >
                                <ext:data.arrayReader>
                                      <ext:data.fields>
                                            <ext:data.field name="assunto"/>
                                      </ext:data.fields>
                                </ext:data.arrayReader>
                            </ext:data.store>            
                         </ext:form.comboBox>

                   <!-- Combo box relativa ao Formulario -->
                         <ext:form.comboBox name="formulario" mode="local" triggerAction="all" fieldLabel="Formulario"  displayField="formulario">         
                            <ext:data.store data="inFormulario" autoLoad="true">
                                <ext:data.arrayReader>
                                      <ext:data.fields>
                                            <ext:data.field name="formulario"/>
                                      </ext:data.fields>
                                </ext:data.arrayReader>
                            </ext:data.store>            
                         </ext:form.comboBox> 
                 </ext:form.formPanel>
                 
                 
                 <ext:tabPanel cls="caixaPanel" renderTo="panel" defaults="{bodyStyle:'padding:3px'}" height="250" width="250" border="true">
                     <ext:panel baseCls="caixaPanel" title="Ajuda" width="150" height="150">
                    <br>
                    <br>    
                        <h3 align="center" valign="middle" class="textPanel">Seleccione a Área, seguidamente o Assunto relativo à Área seleccionada, e por fim quando selecionado o Assunto, seleccione então o Formulario que pertende preencher</h3>
                 </ext:panel>
                 </ext:tabPanel>
               
                 </ext:viewport>
           
           </ext:body> 

         
<table width="100%"  border="0">
   
 
   
</body>

na servelt não sei como fazer:

os metodos da api do banco de dados tenho:

//metodo responsavel por efectuar o retorno de todos as categorias presentes na BD

public static List<Apoio_Seleccao> getArea()

{

List<Apoio_Seleccao> lista = new ArrayList<Apoio_Seleccao>();

try {

Class.forName(org.postgresql.Driver);

Connection con = DriverManager.getConnection(jdbc:postgresql://localhost/bd_formulario”,“postgres”,“postgres2008”);

Statement stm = con.createStatement();

StringBuffer sb = new StringBuffer();

sb.append(" select formpk, formpk, designacao from “);

sb.append(” tipoForm “);

sb.append(” where formfk = Null");

ResultSet result = stm.executeQuery(sb.toString());

while(result.next())

{

Apoio_Seleccao tmp= new Apoio_Seleccao();

tmp.setFormPk(result.getInt(formPk));

tmp.setFormFk(result.getInt(formFk));

tmp.setDesignacao(result.getString(designacao));

lista.add(tmp);

}

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

return lista;

}
//metodo responsavel por efectuar o retorno de todos os registos na BD,
    //pertencentes a uma determinada opcao seleccionada nas comboBoxs
    public static List<Apoio_Seleccao> getRegisto(String formFk)
            //valor correspondente ao campo seleccionado
{
	List<Apoio_Seleccao> opcaoSeleccionada = new ArrayList<Apoio_Seleccao>();
	try {System.out.println("Fora13 ");
		Class.forName("org.postgresql.Driver");
		Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
		Statement stm = con.createStatement();
		StringBuffer sb = new StringBuffer();
		sb.append(" SELECT * FROM");
		sb.append(" tipoForm ");
		sb.append(" WHERE formFk = " + formFk); 
                    System.out.println(sb.toString());
		ResultSet result = stm.executeQuery(sb.toString());
		//System.out.println("Fora13 ");
                    while(result.next())
		{
			Apoio_Seleccao tmp= new Apoio_Seleccao();
			tmp.setFormPk(result.getInt("formPk"));
			tmp.setFormFk(result.getInt("formFk"));
			tmp.setDesignacao(result.getString("designacao"));
                            tmp.setXmlForm(result.getString("xmlForm"));
			opcaoSeleccionada.add(tmp);
                            System.out.println("Fora21 ");
		}
	} catch (ClassNotFoundException e) {
		e.printStackTrace();
	} catch (SQLException e) {
		e.printStackTrace();
	}
	return opcaoSeleccionada;
}
     
    //metodo responsavel por efectuar o retorno da string XML presente na BD,
    // de um determinado Form selecionado para preencher
      public static Apoio_Seleccao getXML(String formPk)
{
	Apoio_Seleccao xmlForm = new Apoio_Seleccao();
	try {
		Class.forName("org.postgresql.Driver");
		Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
		Statement stm = con.createStatement();
		StringBuffer sb = new StringBuffer();
		sb.append(" SELECT formPk, formFk, xmlForm FROM  ");
		sb.append(" tipoForm");
		sb.append(" WHERE formPk = " + formPk);
		ResultSet result = stm.executeQuery(sb.toString());
		while(result.next())
		{
			Apoio_Seleccao tmp= new Apoio_Seleccao();
			tmp.setFormPk(result.getInt("formPk"));
			tmp.setFormFk(result.getInt("formFk"));
                            tmp.setXmlForm(result.getString("xmlForm"));
			xmlForm = tmp;
		}
	} catch (ClassNotFoundException e) {
		e.printStackTrace();
	} catch (SQLException e) {
		e.printStackTrace();
	}
	return xmlForm;
}
      
    //metodo responsavel por efectuar a inserção de dados relativos ao preenchimento dos forms,
      // na tabela RegistoForm
   public static void insertForm(Apoio_Seleccao formPreenchido)
{
	try {
		Class.forName("org.postgresql.Driver");
		Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
		PreparedStatement stm = null;
		StringBuffer sb = new StringBuffer();
		sb.append(" INSERT INTO ");
		sb.append(" registoForm");
		sb.append(" (registoForm,dataInsercao,idTipoForm)");
		sb.append(" VALUES");
		sb.append(" (?,?,?)");
		stm = con.prepareStatement(sb.toString());
		stm.setString(1, formPreenchido.getRegistoForm());
		stm.setDate(2,(Date) formPreenchido.getDataInsercao());
		stm.setInt(3, formPreenchido.getFormPk());	
		stm.executeUpdate();
	} catch (ClassNotFoundException e) {
		e.printStackTrace();
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

}

Confio na vossa ajuda, de momento está sendo muito dificil trabalhar com a framework mas esta é um requisito não funcional no meu trabalho de faculdade.

Obrigado

3 Respostas

H

O zé, posta o seu código com a tag CODE pra facilitar a visualização,
nunca usei o extjs desta forma aí, mas a maneira mais fácil de carregar um combobox é:

Na resposta da servlet/jsp você envia os dados retornados pela consulta ao banco em JSON,
se não souber o que é procure por flexJSON no google…

depois, cria um datastore que acessa a servlet/jsp,
este datastore deve conter um JsonReader que irá mapear os resultados obtidos.

o datastore será o store do seu comboBox,
no evento select do seu combobox você da load no store do outro comboBox.

Z

então, aqui vai de novo, recordo que deverá ter por base extJs tags libs, mas o restant epode ser html ou java

<%-- 
Document : passo1 
Created on : 30/Jun/2008, 15:24:46 
Author : ASC 
--%> 
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" /> 
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/estiloCfost.css" /> 

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<%@ taglib tagdir="/WEB-INF/tags/ext/" prefix="ext" %> 
<%@ page import="java.util.*"%> 
<%@ page import="controler.Gestor" %> 
<%@ page import="ligacaoBD.ApiPostgresql" %> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Passo1</title> 
</head> 


<body bgcolor="#BFD5EA"> 

<script> 


inArea=[[1],[2],[3]]; 
inAssunto=[[1],[2],[3]]; 
inFormulario=[[1],[2],[3]]; 


</script> 



<ext:body theme="blue"> 
<!-- utiliza uma tabela como base de suporte aos objectos graficos que irá usar --> 
<ext:viewport layout="table"> 
<!-- inicio dos forms da página --> 
<ext:form.formPanel baseCls="caixaBox" renderTo="combo" id="form" url="index.jsp" bodyStyle="padding:10px" border="false" name="passo1"> 
<!-- Combo box relativa ao area --> 
<ext:form.comboBox name="area" mode="local" triggerAction="all" fieldLabel="Area" displayField="area" align="center" valign="middle" > 
<ext:data.store data="inArea" autoLoad="true"> 
<ext:data.arrayReader> 
<ext:data.fields> 
<ext:data.field name="area"/> 
</ext:data.fields> 
</ext:data.arrayReader> 
</ext:data.store> 
</ext:form.comboBox> 

<!-- Combo box relativa ao assunto --> 
<ext:form.comboBox name="assunto" mode="local" triggerAction="all" fieldLabel="Assuntos" displayField="assunto"> 
<ext:data.store data="inAssunto" autoLoad="true" > 
<ext:data.arrayReader> 
<ext:data.fields> 
<ext:data.field name="assunto"/> 
</ext:data.fields> 
</ext:data.arrayReader> 
</ext:data.store> 
</ext:form.comboBox> 

<!-- Combo box relativa ao Formulario --> 
<ext:form.comboBox name="formulario" mode="local" triggerAction="all" fieldLabel="Formulario" displayField="formulario"> 
<ext:data.store data="inFormulario" autoLoad="true"> 
<ext:data.arrayReader> 
<ext:data.fields> 
<ext:data.field name="formulario"/> 
</ext:data.fields> 
</ext:data.arrayReader> 
</ext:data.store> 
</ext:form.comboBox> 
</ext:form.formPanel> 


<ext:tabPanel cls="caixaPanel" renderTo="panel" defaults="{bodyStyle:'padding:3px'}" height="250" width="250" border="true"> 
<ext:panel baseCls="caixaPanel" title="Ajuda" width="150" height="150"> 
<br> 
<br> 
<h3 align="center" valign="middle" class="textPanel">Seleccione a Área, seguidamente o Assunto relativo à Área seleccionada, e por fim quando selecionado o Assunto, seleccione então o Formulario que pertende preencher</h3> 
</ext:panel> 
</ext:tabPanel> 

</ext:viewport> 

</ext:body> 


<table width="100%" border="0"> 
<tr> 
<td colspan="7" height="30%"> </td> 
</tr> 
<tr> 
<td width="20%"> </td> 
<td colspan="3" align="right" valign="middle"><div class="Style1" id="combo" align="center" valign="middle"></div></td> 
<td width="5%"> </td> 
<td align="center" valign="middle" width="30%"><div id="panel" align="center" valign="middle"></div> </td> 
<td width="20%"> </td> 
</tr> 
<tr> 
<td colspan="7" height="30%"> </td> 
</tr> 
</table> 

</body> 
</html>
A API do banco de dados tenho:
public static List<Apoio_Seleccao> getArea()
	{
		List<Apoio_Seleccao> lista = new ArrayList<Apoio_Seleccao>();
		try {
			Class.forName("org.postgresql.Driver");
			Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
			Statement stm = con.createStatement();
			StringBuffer sb = new StringBuffer();
			sb.append(" select formpk, formpk, designacao from ");
			sb.append(" tipoForm ");
			sb.append(" where formfk = Null");
                        ResultSet result = stm.executeQuery(sb.toString());
			while(result.next())
			{
				Apoio_Seleccao tmp= new Apoio_Seleccao();
				tmp.setFormPk(result.getInt("formPk"));
				tmp.setFormFk(result.getInt("formFk"));
				tmp.setDesignacao(result.getString("designacao"));
                                lista.add(tmp);
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return lista;
	}
        
        
        //metodo responsavel por efectuar o retorno de todos os registos na BD,
        //pertencentes a uma determinada opcao seleccionada nas comboBoxs
        public static List<Apoio_Seleccao> getRegisto(String formFk)
                //valor correspondente ao campo seleccionado
	{
		List<Apoio_Seleccao> opcaoSeleccionada = new ArrayList<Apoio_Seleccao>();
		try {System.out.println("Fora13 ");
			Class.forName("org.postgresql.Driver");
			Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
			Statement stm = con.createStatement();
			StringBuffer sb = new StringBuffer();
			sb.append(" select * from");
			sb.append(" tipoform ");
			sb.append(" where formfk = " + formFk); 
                        System.out.println(sb.toString());
			ResultSet result = stm.executeQuery(sb.toString());
			//System.out.println("Fora13 ");
                        while(result.next())
			{
				Apoio_Seleccao tmp= new Apoio_Seleccao();
				tmp.setFormPk(result.getInt("formfk"));
				tmp.setFormFk(result.getInt("formfk"));
				tmp.setDesignacao(result.getString("designacao"));
                                tmp.setXmlForm(result.getString("xmlform"));
				opcaoSeleccionada.add(tmp);
                                System.out.println("Fora21 ");
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return opcaoSeleccionada;
	}
         
        //metodo responsavel por efectuar o retorno da string XML presente na BD,
        // de um determinado Form selecionado para preencher
          public static Apoio_Seleccao getXML(String formPk)
	{
		Apoio_Seleccao xmlForm = new Apoio_Seleccao();
		try {
			Class.forName("org.postgresql.Driver");
			Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
			Statement stm = con.createStatement();
			StringBuffer sb = new StringBuffer();
			sb.append(" select formpk, formfk, xmlform from  ");
			sb.append(" tipoform");
			sb.append(" WHERE formpk = " + formPk);
			ResultSet result = stm.executeQuery(sb.toString());
			while(result.next())
			{
				Apoio_Seleccao tmp= new Apoio_Seleccao();
				tmp.setFormPk(result.getInt("formpk"));
				tmp.setFormFk(result.getInt("formfk"));
                                tmp.setXmlForm(result.getString("xmlform"));
				xmlForm = tmp;
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return xmlForm;
	}
          
        //metodo responsavel por efectuar a inserção de dados relativos ao preenchimento dos forms,
          // na tabela RegistoForm
       public static void insertForm(Apoio_Seleccao formPreenchido)
	{
		try {
			Class.forName("org.postgresql.Driver");
			Connection con = DriverManager.getConnection("jdbc:postgresql://localhost/bd_formulario","postgres","postgres2008");
			PreparedStatement stm = null;
			StringBuffer sb = new StringBuffer();
			sb.append(" insert into ");
			sb.append(" registoform");
			sb.append(" (registoform,datainsercao,idtipoform)");
			sb.append(" values");
			sb.append(" (?,?,?)");
			stm = con.prepareStatement(sb.toString());
			stm.setString(1, formPreenchido.getRegistoForm());
			stm.setDate(2,(Date) formPreenchido.getDataInsercao());
			stm.setInt(3, formPreenchido.getFormPk());	
			stm.executeUpdate();
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}
}

Na servelt não sei o que colocar!!! :(

obrigado

H

Zé,
suas funções estão trazendo a lista correta?
Se sim, baixe o flexJSON em https://sourceforge.net/project/downloading.php?group_id=194042&use_mirror=ufpr&filename=flexjson_1.6.zip&39680558
e teste o retorno da seguinte forma:

JSONSerializer serializer = new JSONSerializer();
List lista = x.getArea(); // x = seu objeto da classe que acessa o banco, ou como você declarou o método static... pode ser NomeDaClasse.getArea();
String resultado = serializer.serialize(lista);
System.out.println(resultado);

veja o que retornou no console, deve ficar + ou - assim : [ {“campo1”:“valor1”, “campo2”:“valor2”},{“campo1”:“valorX”,“campo2”:“valorY”}]

se preocupa com isso primeiro, e em criar o store com a taglib, depois o servlet só vai chamar esse método da tua classe e imprimir.

Criado 4 de julho de 2008
Ultima resposta 4 de jul. de 2008
Respostas 3
Participantes 2