VRaptor3 + Flexigrid + JSON

Assuntos Gerais
#1

Olá pessoal,

blz?

estou testando um grid chamado flexigrid com o vraptor3 porem eu não estou conseguindo carregar os dados nele, o componente chama em modo debug meu metodo com passando o arquivo json e tals, porem não aparece nada !!!

A unica coisa que comecou a dar erro foi agora o jquery, que antes estava funcionando perfeito

Erro Jquery:

object is undefined
[Break on this error] length = object.length,

Controller:

  @Path("/user.json")
	public void listUsers(){
		User user = userDao.getUserDao().listAll().get(0); 
		result.use(json()).from(user).serialize();
	}

View:

$("#flex1").flexigrid({
		url: '/JPM/user.json',
		dataType: 'json',
		colModel : [
			{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
			{display: 'Email', name : 'email', width : 250, sortable : true, align: 'left'},
			{display: 'Password', name : 'password', width : 40, sortable : true, align: 'left'},
			{display: 'Name', name : 'name', width : 250, sortable : true, align: 'left'},
			{display: 'Rule', name : 'rule', width : 150, sortable : true, align: 'left'}			
		],
		buttons : [
			{name: 'Add', bclass: 'add', onpress : onClick},
			{name: 'Delete', bclass: 'delete', onpress : onClick},
			{separator: true}
		],
		searchitems : [
			{display: 'Email', name : 'email'},
			{display: 'Rule', name : 'Rule'},
			{display: 'Name', name : 'name', isdefault: true}
		],
		sortname: "id",
		sortorder: "asc",
		usepager: true,
		singleSelect: true,
		title: 'Users',
		useRp: true,
		rp: 15,
		showTableToggleBtn: true,
		width: 950,
		height: 200
	});

Se alguem tiver alguma dica, ficarei grato!

Obrigado.

OBS:

Coloquei a versão min do jquery 1.4.2 e agora o erro mudou para:

a is undefined
[Break on this error] a))();else c.error("Invalid JSON: "+a)...(d)if(i)for(f in a){if(b.apply(a[f],
#2

faça uma requisição direto para o /user.json e poste aqui o json que ele está retornando plz

#3

Lucas,

segue o json:

{"user": {
  "id": 1,
  "email": "thiago@thiago.com",
  "password": "123456",
  "name": "t",
  "rule": "ADMINISTRATOR"
}}

Obrigado.

#4

vc quer mesmo mostrar a senha dos usuários?

enfim, mude a geração do json para:

result.use(json()).withoutRoot().from(user).serialize();
#5

Não, lucas isso é só um teste ! É logico que não !! Quero fazer funcionar primeiro, depois vou ajustando !

Ajustei do jeito que você falou e mesmoa ssim não funcionou!!!

Segue json:

{
  "id": 1,
  "email": "thiago@thiago.com",
  "password": "123456",
  "name": "t",
  "rule": "ADMINISTRATOR"
}
#6

Esse erro ainda no firebug esta ocorrendo:


a is undefined
[Break on this error] a))();else c.error("Invalid JSON: "+a)...(d)if(i)for(f in a){if(b.apply(a[f],
#7

então… na documentação do flexgrid qual é o formato de json que ele espera?

#8

Lucas,

pelo o qe vi na net, o povo usando com PHP ele, usa uma estrutura de cel, segue exemplo:

"{id: '" . $pais['Country']['iso'] . "', 
    cell: ['"  . $pais['Country']['iso'] . "', '"
               . $pais['Country']['name'] . "', '" 
               . $pais['Country']['printable_name'] . "', '" 
               . $pais['Country']['iso3'] . "', '" 
               . $pais['Country']['numcode'] . 
        "']
}";
#9

bom, se vc precisa que seja assim, vc precisa criar um converter pra gerar o json desse jeito…

ou talvez tenha no flexgrid um método que trate o json antes de qqer coisa, daí vc pode converter o json padrão do vraptor

#10

achei esse é o formato que o flexigrid verifica:

{
  "page": 1,
  "total": 2,
  "rows":[
    {"id": "ALFKI", "cell": ["ALFKI","Alfreds Futterkiste",
                             "Maria Anders", ... ,"030-0076545"]},
    {"id": "ANATR", "cell": ["ANATR","Ana Trujillo Emparedados y helados",
                             "Ana Trujillo","Owner", ... ,"(5) 555-3745"]}
  ]
}

Bem diferente do formato do vraptor !!!

Não teria algum grid que melhor se adequa ao Vraptor?

#11

Eu olhei no site e conforme a documentação esse é o JSON esperado para a listagem.

Creio que nesse caso você precise criar um POJO aí para conter os dados da listagem, e a partir dele o Vraptor serializa o JSON.

pubic class Grid { private Integer page; private Integer total; private List<User> rows; }

E no controller:

@Path("/user.json") public void listUsers(){ List<User> users = userDao.getUserDao().listAll(); Grig grid = // monta a grid com os dados para o flexigrid result.use(json()).withoutRoot().from(grid).include(users).serialize(); }

[quote=Cherubini]achei esse é o formato que o flexigrid verifica:

{
  "page": 1,
  "total": 2,
  "rows":[
    {"id": "ALFKI", "cell": ["ALFKI","Alfreds Futterkiste",
                             "Maria Anders", ... ,"030-0076545"]},
    {"id": "ANATR", "cell": ["ANATR","Ana Trujillo Emparedados y helados",
                             "Ana Trujillo","Owner", ... ,"(5) 555-3745"]}
  ]
}

Bem diferente do formato do vraptor !!!

Não teria algum grid que melhor se adequa ao Vraptor? [/quote]

#12

Garcia,

na verdade da documentacao do flexgrid segue esse pojo:


public class FlexigridRow {

	public String id;
	public List<String> cell;

}


public class FlexiGridJson {

	private Integer page;
	private Integer total;
	private List<FlexigridRow> rows;
}

Porem nao estou conseguindo mandar o atributo cell para o json, ele esta ignorando os valores, e dando o seguinte erro:

row.cell is undefined
[Break on this error] td.innerHTML = row.cell[idx];

com razao, pois meu pojo esta vindo sem ele!

Segue codigo

@Path("/user.json")
	public void listUsers(){
		List<User> users = userDao.getUserDao().listAll();
		List<FlexigridRow> rows = new ArrayList<FlexigridRow>();
		
			FlexigridRow row = new FlexigridRow();
			row.setId(users.get(0).getId()+"");
			row.setCell(users);
			rows.add(row);
		
		FlexiGridJson grid = new FlexiGridJson(1, users.size(), rows);
		result.use(json()).withoutRoot().from(grid).include("rows").serialize();  
	}

e o json gerado

{
  "page": 1,
  "total": 1,
  "rows": [
    {
      "id": "1"
    }
  ]
}

Alguem tem alguma dica ?

#13

tentei dar um include no “cell” porem nada feito.

segue code:

@Path("/user.json")
	public void listUsers(){
		List<User> users = userDao.getUserDao().listAll();
		List<FlexigridRow> rows = new ArrayList<FlexigridRow>();
		
			FlexigridRow row = new FlexigridRow();
			row.setId(users.get(0).getId()+"");
			row.setCell(users);
			rows.add(row);
		
		FlexiGridJson grid = new FlexiGridJson(1, users.size(), rows);
		result.use(json()).withoutRoot().from(grid).include("rows").include("cell").serialize();  
	}
#14

O Lucas pode dizer se estou certo, mas se não me engano no include deve ser o caminho completo da propriedade:

#15

Garcia funciou !!!

Porem flexigrid é um lixo ! Tive que transformar meu json nesse formato

O Flexigrid aceita o segundo json nao o primeiro

{
  "page": 1,
  "total": 1,
  "rows": [
    {
      "id": "1",
      "cell": [
        {
          "id": 1,
          "email": "thiago@thiago.com",
          "password": "123456",
          "name": "t",
          "rule": "ADMINISTRATOR"
        }
      ]
    }
  ]
}

//ACEITO PELO FLEXIGRID

{
  "page": 1,
  "total": 1,
  "rows": [
    {
      "id": "1",
      "cell": [
        "1",
        "thiago@thiago.com",
        "123456",
        "t",
        "ADMINISTRATOR"
      ]
    }
  ]
}

ai tive que fazer uma gambi para aceitar

@Path("/user.json")
	public void listUsers(){
		List<User> users = userDao.getUserDao().listAll();
		List<FlexigridRow> rows = new ArrayList<FlexigridRow>();
			
			List<String> cell = new ArrayList<String>();
			FlexigridRow row = new FlexigridRow();
			row.setId(users.get(0).getId()+"");
			
			String id = users.get(0).getId()+"";
			String email = users.get(0).getEmail()+"";
			String password = users.get(0).getPassword()+"";
			String name = users.get(0).getName()+"";
			String rule = users.get(0).getRule()+"";
			cell.add(id);
			cell.add(email);
			cell.add(password);
			cell.add(name);
			cell.add(rule);
			
			row.setCell(cell);
			rows.add(row);
		
		FlexiGridJson grid = new FlexiGridJson(1, users.size(), rows);
		result.use(json()).withoutRoot().from(grid).include("rows").include("rows.cell").serialize();   
	}

Vocês não uma maneira mais bonita ?rs

Vlws

#16

Duas dicas: é bom você evitar fazer várias chamadas de get em um List. Ao invés associe a uma variavel e busque dela os valores:

[code]// disso
users.get(0).getId()

// para isso
User user = users.get(0);

user.getId();
user.getName();[/code]

Além disso evite criar StringBuilder/StringBuffers desnecessários:

[code]//disso
user.getId()+"";

//para isso
String.valueOf(user.getId());[/code]

#17

ao invés dos includes, vc pode usar um recursive()…

dá pra criar um conversor do XStream que já gera o formato do flexgrid…

dá pra ver se o flexgrid pode ser customizado tb

ou dá pra tentar outra biblioteca de grids

#18

[quote=Lucas Cavalcanti]ao invés dos includes, vc pode usar um recursive()…

dá pra criar um conversor do XStream que já gera o formato do flexgrid…

dá pra ver se o flexgrid pode ser customizado tb

ou dá pra tentar outra biblioteca de grids[/quote]

Aproveitando seu comentario vejo que na web e muito pobre a parte de grids editaveis hoje eu uso JqGrid mas ainda acho q tem muito q melhorar vc tem outras opcoes de Grids ?

#19

Também estou a procura de uma biblioteca para grid… vou tentar integrar o meu projeto que usa vraptor3 com o Flexigrid mesmo… será que existem outras opções mais fáceis de integrar com o vraptor?

Aguardo resposta.
Obrigado.
Att,
Leandro.

#20

o ExtJS tem um grid, e existe um jQuery Grid plugin tb…

não tenho certeza se é mais fácil, mas são outras opções