Напишете JSON към HTTP отговор в JSF

Искам да създавам динамични диаграми с JavaScript библиотека „D3.js“ в JSF. Искам да кажа с динамично, че методите на Java вземат данни от DB и записват съответния JSON. Този метод вече съм програмирал и работи. Тогава JavaScript трябва да има достъп до JSON и да създаде диаграмата.

Въпросът ми е: Как да предам JSON sting/файл към JavaScript. Мисля, че най-добрият начин е да го напишете в HTTP отговора. Но как да направите това в JSF? Или имате други предложения?


javascript json servlets httpresponse jsf
person InformatikBabo    schedule 22.09.2015    source източник
comment
Защо "jsf" за това? Какво не е проста услуга за почивка?   -  person Kukeltje    schedule 22.09.2015
comment
@Kukeltje, защото пиша JSON на java.   -  person InformatikBabo    schedule 22.09.2015
comment
jax-rs (реализацията на услугата за почивка на Java) Е java... Моля, направете крачка назад от разработката и научете някои основи за технологиите, които възнамерявате да използвате. Вижте stackoverflow.com/questions/29982657/   -  person Kukeltje    schedule 22.09.2015

Отговори (2)


arrow_upward
3
arrow_downward

Просто оставете JSF да отпечата JSON низа, сякаш е JS променлива.

<script>var data = #{bean.json};</script>
person BalusC    schedule 23.09.2015
comment
Да, по-просто от моето. - person Javier Haro; 23.09.2015

arrow_upward
2
arrow_downward

Стъпка по стъпка:

  • Създайте метод за поддържане на bean за актуализиране на атрибут String (jsonData) с JSON представяне на низ от цифров масив. Ти ще трябва да:

    • Call to an EJB bean or JAX-RS service that returns the data.
    • Прочетете данните в списък.
    • Преобразувайте колекцията List в JSON обект и след това я стрингирайте, например като използвате пакета javax.json от стандарта.
    • Актуализирайте атрибута на модела jsonData.

  • В JSF страницата трябва да включите компонент outputLabel, обвързан с атрибута jsonData. Можете да го скриете с CSS.

  • В JSF страницата напишете Javascript код, за да поставите стойността на компонента в променлива на Javascript. Можете да го постигнете с jQuery селектор или в обикновен Javascript с функцията getElementById.

  • Накрая използвате променливата на Javascript в библиотеката D3.

Забележка: Използването на D3 libraty е копирано от тук .

Кодът в JSF страницата ще бъде подобен на този:

<h:form id="myForm">
    <h:outputLabel id="myLink" value="#{yourBackingBean.jsonData}"  
        style="display:none;" styleClass="myLink"/>

    <div class="someclass">
        <h2>Create A Bar Chart With D3 JavaScript</h2>
        <div id="bar-chart">

        </div>
    </div>  

    <script>

        var chartdata = eval(document.getElementById("myForm:myLink").innerHTML);
        // you can use jQuery too: $(".myLink").html()

        //  the size of the overall svg element
        var height = 200,
            width = 720,

        //  the width of each bar and the offset between each bar
            barWidth = 40,
            barOffset = 20;


        d3.select('#bar-chart').append('svg')
          .attr('width', width)
          .attr('height', height)
          .style('background', '#dff0d8')
          .selectAll('rect').data(chartdata)
          .enter().append('rect')
            .style({'fill': '#3c763d', 'stroke': '#d6e9c6', 'stroke-width': '5'})
            .attr('width', barWidth)
            .attr('height', function (data) {
                return data;
            })
            .attr('x', function (data, i) {
                return i * (barWidth + barOffset);
            })
            .attr('y', function (data) {
                return height - data;
            });     
    </script>
</h:form>
person Javier Haro    schedule 22.09.2015