[Rio-pm] Mojolicious - inserindo código HTML no template via rota
breno
oainikusama em gmail.com
Domingo Setembro 9 08:22:13 PDT 2012
Eu iria um pouco além, já que muita coisa da estrutura do highcharts é
específica e, pra mim, faria pouco sentido ser passada como parâmetro.
O backend deve retornar dados, e deixar a responsabilidade de
formatação (ainda que precise fazer um ou outro ajuste nos dados
recebidos para alimentar o framework de gráficos desejado) com o
frontend. Supondo que tenha vindo tudo em "var data", ficaria mais ou
menos assim:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: data.title,
x: -20 //center
},
subtitle: {
text: data.subtitle,
x: -20
},
xAxis: {
categories: data.xAxis.categories
},
yAxis: {
title: {
text: data.yAxis.title
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: data.series
});
});
});
O motivo é que se amanhã outra pessoa decide consumir dados da sua API
ela não precisa ficar amarrada a essa estrutura do HighCharts. Da
mesma forma, se vc um dia quiser mudar de renderizador, do HighCharts
pro Google Chart Tools ou até mesmo pro d3.js, só precisa mudar o
frontend.
[]s
-b
2012/9/9 Bruno Buss <bruno.buss em gmail.com>:
> Você pode fazer o seu controller gerar e retornar esse map que é passado
> para o new Highcharts.Chart().
>
> E daí você faria algo do tipo:
> $.getJSON('ajax/test.json', function(data) {
> chart = new Highcharts.Chart(data);
> ...
> });
>
> É só se lembrar que o seu código javascript é estático. A única coisa
> dinâmica são os dados que você quer mostrar, os parametros necessários para
> montar o seu gráfico bonitinho. E é isso que você precisa retornar no
> request do getJSON.
>
> [ ]'s
>
> 2012/9/8 Manoel Domingues Junior <manoel.domingues.junior em gmail.com>
>>
>> Oi,
>>
>> Não entendi muito bem.
>> Eu faria um request para o servidor de forma a buscar os dados que serão
>> exibidos?
>>
>> Então no código da página eu teria uma função em javascript que buscaria
>> os dados em /widget_timeline, por exemplo? Tipo:
>>
>> $.getJSON("/widget_timeline",
>>
>>
>> {
>> time: "24"
>>
>>
>> },
>>
>> Que dados eu retornaria? Poderia retornar o objeto Highcharts.Chart
>> (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/)
>>
>> Como eu faria para minha função em javascript acessar esses dados?
>>
>> Estou perdido...
>>
>> Abraços,
>>
>> Em 8 de setembro de 2012 17:10, Bruno Buss <bruno.buss em gmail.com>
>> escreveu:
>>
>>> Quase, mas ainda não.
>>>
>>> O ideal é que o seu código em Perl não "gere" o código em Javascript.
>>> Deixe o código em Javascript na página e faça um request pro seu servidor
>>> apenas para buscar os dados que serão exibidos (e isso você já pode arrumar
>>> para que o JSON retornado seja enviado diretamente para a sua função em
>>> Javascript.)
>>>
>>> Se você não tiver a menor ideia de como fazer isso, de uma olhada no
>>> jQuery... os métodos básicos de ajax dele, são bem fáceis de usar :-)
>>> http://api.jquery.com/jQuery.getJSON/
>>>
>>> [ ]'s
>>>
>>> 2012/9/8 Manoel Domingues Junior <manoel.domingues.junior em gmail.com>
>>>>
>>>> Vou ir para essa estratégia então...
>>>>
>>>> Mas nesse caso eu criaria uma rota onde haveria esse render_json?
>>>>
>>>> Tipo, no meu frontend eu teria:
>>>>
>>>> <script src="/widget_timeline"></script>
>>>>
>>>> E no Mojolicious e teria:
>>>>
>>>> get '/widget_timeline' => sub {
>>>> ...
>>>> $self->render_json($widget_timeline);
>>>> };
>>>>
>>>> Onde a variável $widget_timeline fosse uma estrutura em perl que seria
>>>> traduzida para JSON.
>>>>
>>>> É isso?
>>>>
>>>>
>>>> Abraços,
>>>>
>>>> Em 8 de setembro de 2012 00:24, breno <oainikusama em gmail.com> escreveu:
>>>>
>>>>> Manoel, procure evitar escrever código JavaScript dentro do seu
>>>>> backend. O mais adequado para dados mudando dinamicamente é passar
>>>>> objetos JSON apenas, deixando que o JavaScript no frontend faça as
>>>>> solicitações por estruturas diferentes conforme necessário.
>>>>>
>>>>> Pra esse tipo de solicitação o Mojolicious oferece o método
>>>>> render_json(), que já transforma suas variáveis Perl em JSON.
>>>>> https://metacpan.org/module/Mojolicious::Controller#METHODS
>>>>>
>>>>> []s
>>>>>
>>>>> -b
>>>>>
>>>>> 2012/9/8 Manoel Domingues Junior <manoel.domingues.junior em gmail.com>:
>>>>> > Perfeito.
>>>>> >
>>>>> > Muito obrigado.
>>>>> >
>>>>> > Abraços,
>>>>> >
>>>>> > Em 7 de setembro de 2012 23:52, Renato Santos <renato.cron em gmail.com>
>>>>> > escreveu:
>>>>> >
>>>>> >> Olá,
>>>>> >>
>>>>> >> você deve mudar sua view para:
>>>>> >>
>>>>> >> de <%= 'lalala' %>
>>>>> >> para <%== '<p>test</p>' %>
>>>>> >>
>>>>> >> vi no
>>>>> >>
>>>>> >> http://search.cpan.org/~sri/Mojolicious-3.36/lib/Mojolicious/Guides/Rendering.pod#Embedded_Perl
>>>>> >> 2012/9/7 Manoel Domingues Junior <manoel.domingues.junior em gmail.com>
>>>>> >>>
>>>>> >>> Olá pessoal,
>>>>> >>>
>>>>> >>> Estou construindo mais uma aplicação web com mojolicious::lite e
>>>>> >>> estou
>>>>> >>> enfrentando mais uma dificuldade.
>>>>> >>> A minha aplicação irá gerar gráficos via javascript, mas preciso
>>>>> >>> enviar
>>>>> >>> esses dados pre-formatados entre tags <script></script>.
>>>>> >>>
>>>>> >>> A ideia é colocar um grafico semenhante a esse:
>>>>> >>> http://www.highcharts.com/demo/line-basic/gray
>>>>> >>>
>>>>> >>> Como verão, existe alguns <div>'s que devo colocar no template, mas
>>>>> >>> também devo colocar um código javascript. Esse código muda, pois
>>>>> >>> realiza
>>>>> >>> consultas no banco de dados para obter os valores, logo criei uma
>>>>> >>> funcão que
>>>>> >>> gera ele.
>>>>> >>>
>>>>> >>> Essa função retorna uma string com todo o código ($widget_timeline)
>>>>> >>> e
>>>>> >>> tento então passar o valor dessa string para o template, mas o
>>>>> >>> mojolicious
>>>>> >>> faz a conversão para HTML, logo não aparece como código...
>>>>> >>>
>>>>> >>> Dentro da rota da minha aplicação coloquei um
>>>>> >>> $self->stash(widget_timeline => $widget_timeline), acredito que
>>>>> >>> tenha que
>>>>> >>> usar outra função para passar o código, ou então usar outra
>>>>> >>> abordagem...
>>>>> >>>
>>>>> >>> Sugestões?
>>>>> >>>
>>>>> >>> Abraços,
>>>>> >>> --
>>>>> >>> --
>>>>> >>> Manoel Domingues Junior
>>>>> >>> "Coletar dados é o primeiro passo para a sabedoria, mas
>>>>> >>> compartilhar
>>>>> >>> dados é o primeiro passo para a comunidade."
>>>>> >>> IBM - Prodigy Linux
>>>>> >>>
>>>>> >>>
>>>>> >>> _______________________________________________
>>>>> >>> Rio-pm mailing list
>>>>> >>> Rio-pm em pm.org
>>>>> >>> http://mail.pm.org/mailman/listinfo/rio-pm
>>>>> >>
>>>>> >>
>>>>> >>
>>>>> >>
>>>>> >> --
>>>>> >> Saravá,
>>>>> >> Renato CRON
>>>>> >> http://www.renatocron.com/blog/
>>>>> >> @renato_cron
>>>>> >>
>>>>> >>
>>>>> >> _______________________________________________
>>>>> >> Rio-pm mailing list
>>>>> >> Rio-pm em pm.org
>>>>> >> http://mail.pm.org/mailman/listinfo/rio-pm
>>>>> >
>>>>> >
>>>>> >
>>>>> >
>>>>> > --
>>>>> > --
>>>>> > Manoel Domingues Junior
>>>>> > "Coletar dados é o primeiro passo para a sabedoria, mas compartilhar
>>>>> > dados é
>>>>> > o primeiro passo para a comunidade."
>>>>> > IBM - Prodigy Linux
>>>>> >
>>>>> >
>>>>> > _______________________________________________
>>>>> > Rio-pm mailing list
>>>>> > Rio-pm em pm.org
>>>>> > http://mail.pm.org/mailman/listinfo/rio-pm
>>>>> _______________________________________________
>>>>> Rio-pm mailing list
>>>>> Rio-pm em pm.org
>>>>> http://mail.pm.org/mailman/listinfo/rio-pm
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> --
>>>> Manoel Domingues Junior
>>>> "Coletar dados é o primeiro passo para a sabedoria, mas compartilhar
>>>> dados é o primeiro passo para a comunidade."
>>>> IBM - Prodigy Linux
>>>>
>>>>
>>>> _______________________________________________
>>>> Rio-pm mailing list
>>>> Rio-pm em pm.org
>>>> http://mail.pm.org/mailman/listinfo/rio-pm
>>>
>>>
>>>
>>>
>>> --
>>> Bruno C. Buss
>>> http://www.brunobuss.net
>>>
>>> _______________________________________________
>>> Rio-pm mailing list
>>> Rio-pm em pm.org
>>> http://mail.pm.org/mailman/listinfo/rio-pm
>>
>>
>>
>>
>> --
>> --
>> Manoel Domingues Junior
>> "Coletar dados é o primeiro passo para a sabedoria, mas compartilhar dados
>> é o primeiro passo para a comunidade."
>> IBM - Prodigy Linux
>>
>>
>> _______________________________________________
>> Rio-pm mailing list
>> Rio-pm em pm.org
>> http://mail.pm.org/mailman/listinfo/rio-pm
>
>
>
>
> --
> Bruno C. Buss
> http://www.brunobuss.net
>
> _______________________________________________
> Rio-pm mailing list
> Rio-pm em pm.org
> http://mail.pm.org/mailman/listinfo/rio-pm
Mais detalhes sobre a lista de discussão Rio-pm