Java/JSF2 fasulyesinden Javascript/jQuery Bileşenlerine veriyi dönüş değerleri olarak geçirmek için en iyi yöntem

Bir Java yedekleme/yönetilen fasülyeden Highcharts gibi bir jQuery/Javascript bileşenine veri aktarmak için en iyi yöntemi kullanmama konusunda sorun yaşıyorum, böylece web uygulamam veriyi dinamik, gerçek zamanlı olarak üretiyor/gösteriyor. Java tarafımdan oldukça sağlamyım ama javascript/jQuery hakkında oldukça sınırlı bir bilgiye sahibim. Okuduğum kadarıyla, en iyi yol, web uygulamamdaki gizli bir alanı Ajaxify ve bir JSON nesnesini veya dizesini geçmek mi? ona ve sonra bu değeri JS bileşenime ilet.

Öncelikle bu, JSON verilerini güncellemek için bir Ajax çağrısı ve daha sonra verileri JS bileşenine yeniden okumak için bir setInterval çağrısı alacağından biraz yoğun bir iş gibi görünüyor. Verileri doğrudan JS bileşenine iletebileceğimi umuyordum ...

Her iki durumda da sadece benim bilgi kadar sıkı ve yukarıda farklı farklı bir denenmiş ve test edilmiş bir yöntem anlatmak olabilir ... Kılavuzları/Demo da kitlesel takdir edilecektir!

Bu, önerilen bir metodolojiyi etkileyecekse, Primeface'ın 2.2.1'ini de kullanıyorum?

Şerefe

Müttefik

GÜNCELLEŞTİRME:

Kod aşağıda ama sadece ne çabucak ulaşmaya çalıştığımı tanımlamak istiyorum: Etkili Ben destekleyici fasulyemden basit bir sayı ++ işlevini kullanarak dinamik bir Highcharts grafiği uygulamaya çalışıyorum. Tabii ki, bu veriyi sağlamak için gerçek zamanlı bir feed kullanacağım ama şu anda sadece JSF backing bean'ımdan değişen bilgileri temel alarak Highcharts'ı çalışmaya çalışıyorum.

İşte benim basit sayım işlevim ve JSON'a dönüştürme (JSON yönteminin gerçekten sadece 1 değeri (int) geçtiğinden beri gerekli olup olmadığından emin değilim, ancak daha fazla kullanacağımdan emin olduğumdan bu yöntemi saklamak istiyorum. web uygulamasının diğer bölümlerinde kapsamlı olarak:

public class TestBean {

    private int output;

    public TestBean() {
        output = 1;
    }

    public int getOutput() {
        return output;
    }

    public void setOutput(int output) {
        this.output = output;
    }

    public void update() {
        setOutput(getOutput() + 1);
    }

    public void prepareChartDate() {
       //Produce you JSON string (I use Gson here)
        RequestContext reqCtx = RequestContext.getCurrentInstance();
        reqCtx.addCallbackParam("chartData", new Gson().toJson(output));
    }
}

Highcharts Harici JS Dosyası, yine de, JSF Fasulyelerinden elde edilen değerleri eklemeye başlamadan önce grafiğin oluşturulması/yerleştirilmesi için grafiğin alt kısmında dizi işlevini sürdürdüğümün farkına varıyorum:

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            backgroundColor: "#F8F0DB",
            renderTo: 'containerHigh',
            defaultSeriesType: 'area',
            margin: 10,
            marginLeft:30,
            marginBottom:17,
            zoomType: 'y',
            events: {
                load: updateChartData
            }
        },
        title: {
            text: 'Feed Flow Rate '

        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return ''+ this.series.name +'
'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%s', this.x) +'
'+ Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: [0, 0, 0, 100], stops: [ [0, Highcharts.getOptions().colors[0]], [1, 'rgba(2,0,0,0)'] ] }, lineWidth: 1, marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } }, shadow: false, states: { hover: { lineWidth: 1 } } } }, series: [{ name: 'Random data', data: (function() { //generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: time + i * 10000, y: 50 * Math.random() }); } return data; })() }] }); });

Ve XHTML sayfamda düzenlenen satır içi JS İşlevi:

Bu çalışıyor:

 function updateChartData(xhr, status, args) { 
    var series = this.series[0];
    setInterval(function() {            
        var x = (new Date()).getTime()
        y = 50 * Math.random();
        series.addPoint([x, y], true, true);   

    }, 1000)       
//parse it, process it and load it into the chart
}

ama fasulyem değerini geçmeye çalıştığımda:

 function updateChartData(xhr, status, args) { 
    var jsonString = args.chartData
    var series = this.series[0];

    setInterval(function() {            
        var x = (new Date()).getTime()
        y = jsonString 
        series.addPoint([x, y], true, true);   

    }, 1000)       
//parse it, process it and load it into the chart
}

Bu işe yaramıyor ...

Ayrıca, her ikisi de başarılı olduğum grafiklerin çalışmasını sağlamak için hem remoteCommand hem de Poll'i deniyorum:

                        
                     

                     

Bhesh'den önce söylediğim gibi, yardımınız büyük beğeni topluyor ve artık harika olacak!

Şerefe

Müttefik

7

1 cevap

PrimeFaces 2.2.1 kullanıyorsanız, yapmaya çalıştığınız şeyi anlamak oldukça kolay olmalıdır.

PF, Ajaxicaly'nin yönetilen fasulye yöntemini kullanabileceği bir p: remoteCommand bileşenine sahiptir.


    

Ve prepareChartData() yönteminde JSON dizginizi üretirsiniz ve müşteriye geri göndermek için PF tarafından sağlanan RequestContext komutunu kullanırsınız:

public void prepareChartDate() {
   //Produce you JSON string (I use Gson here)
    RequestContext reqCtx = RequestContext.getCurrentInstance();        
    reqCtx.addCallbackParam("chartData", jsonString);
}

Ve updateChartData (xhr, status, args) Javascript geri arama işlevinde JSON yanıtını işleyebilir ve grafiğe yükleyebilirsiniz:

function updateChartData(xhr, status, args) {
    var jsonResponse = args.chartData;
    //parse it, process it and load it into the chart
}

Grafiği düzenli aralıklarla güncellemek için Javascript setInterval veya setTimeout komutlarını kullanın ve remoteCommand 'un name komutunu kullanın. aslında bir Javascript işlevi.

setInterval("fetchChartData()", 5000);

Ben böyle yaparım.

PF ayrıca canlı grafiklerin uygulanmasını kolaylaştıran başka bir p: poll bileşenine de sahiptir.

Güncelleme:

Yanlış anladın. üzerinde

Yapmanız gereken şey, belgeye hazır olmak için önce grafiği oluşturup sonra ankete başlamaktır.

$(document).ready(function() {
    chart = new Highcharts.Chart({
        //....
    });
   //start your poll here
});

p: poll geri arama işlevi updateChartData (xhr, status, args) , anketin completecomplete olayı üzerinde çağırabilmesi için global olması gerekir.

function updateChartData(xhr, status, args) {
    var jsonResponse = args.chartData;
    //parse it, process it and load it into the chart
    //you will load data into the same chart created in document-ready
}

Anketi kullandığınızda setTimeout veya setInterval 'a ihtiyacınız yoktur.

2 Güncellemesi:

Öncelikle updateChartData </​​code> fonksiyonunda, oluşturduğunuz chart 'ı güncellemeniz gerekir:

function updateChartData(xhr, status, args) { 
    var series = chart.series[0];//<--- no more this instead global variable "chart"
    var newData = args.chartData;
    var x = (new Date()).getTime()
    var y = eval('(' + newData + ')');
    series.addPoint([x, y], true, true);
}

Ardından, updateChartData </​​code> geri arama işlevidir, bu yüzden kendiniz aramamayın, istek tamamlandığında uzaktan kumanda tarafından çağrılır.

Ve uzaktan kumandaya kendisinin ayrı bir formunu verin:


    

Kodunuzda oncomplete = "updateChartTest (xhr, status, args);" notu, geri arama işlevinin updateChartTest yerine updateChartTest olması gerekir.

Grafik tamamlandıktan sonra ajaxical yoklamayı tetikle:

events: {
       load: function() {
           setInterval("fetchChartData()", 5000); //update the chart every 5 seconds               
       }
}

Yalnızca test için, yönetilen fasulye listesinden rastgele bir değer döndürmeye çalışın:

public void prepareChartDate() {
   //Produce you JSON string (I use Gson here)
    RequestContext reqCtx = RequestContext.getCurrentInstance();
    reqCtx.addCallbackParam("chartData", new Random().nextInt(500));
}
16
katma
@Ally: Sahip olduğunuz kodu gönderir misiniz?
katma yazar Bhesh Gurung, kaynak
@Ally: JSON'u fetchChartData (); 'da düzgün olarak alıyor musunuz? Eğer öyleyse, lütfen JS kodunuzu (Highcharts one) gönderin ve yorumda bulunmayın, orijinal yayınınızı güncelleyin.
katma yazar Bhesh Gurung, kaynak
@Ally: Güncellemeye bakın.
katma yazar Bhesh Gurung, kaynak
@Ally: Tüm JS kodunu gönderebilir, özellikle bu grafik oluşturur ve ajax isteği gönderir ve yanıt verisiyle grafiği günceller.
katma yazar Bhesh Gurung, kaynak
@Ally: Cevabımı güncelledim. "Güncelleme 2" ye bakınız.
katma yazar Bhesh Gurung, kaynak
Evet, p: web uygulamasında değeri güncellemek için anket kullanıyorum, sadece nasıl bir JS Fonksiyonu yani Highcharts içine geçmek için emin değildi! Bunu bir vereceğim ve bilmene izin vereceğim! Teşekkür ederim.
katma yazar Ally, kaynak
Yapısını gösterebilir veya size bir JSON verisi örneği verebilir ve bunu HighCharts'a nasıl yüklersiniz? Yukarıda yazmış olduğum şeye sahibim ama hala devam etmekte olduğum yüksek şemalara yükleniyor ... İçeri aktarmaya çalıştığım şeyden mi yoksa onu nasıl yüklemeye çalıştığımdan emin değilim!
katma yazar Ally, kaynak
Bir anket kullanarak im'de yukarıda yazdığınız gibi oldukça iyi: . .. Ayrıca, her 10 saniyede dize güncellemeyi görebildiğim için senaryona bir uyarı ekledim. Şu anda sadece 'Y' eksen değer dizilimimi geçmeye çalışıyorum, x eksenini şu şekilde koruyorum: var x = (yeni Tarih ()). GetTime (), ama dediğim gibi benim Tamamen yanlış olduğunu düşündüğüm Highcharts JS dosyasına değerler!
katma yazar Ally, kaynak
Grafiğin konusunu ekleyen highcharts kodunu ekledim! Bahsettiğim gibi, sadece bir sayıyı art arda göstermeye çalışıyorum.
katma yazar Ally, kaynak
Bhesh Hala bu konuda sıkıntı yaşıyorum, şimdiye kadar çok iyiydin ama benim asıl problemim 'onu ayrıştırmak, işlemek ve tabloya yüklüyorum' args.chartData bilgisi. Bu değeri her zaman Charts JS'ye eklediğimde, grafikler başlatılamıyor ya da grafik güncelleme yapıyor ve statik bir grafik kalıyor! Bilmem gereken şey, args.chartData’yi grafikler JS dosyasına nasıl ayrıştırıp yüklediniz. Teşekkürler
katma yazar Ally, kaynak
Asıl yazıyı güncel kodumla güncelledim ... yardımın için teşekkürler ve umarım yakında onu çözebiliriz! Şerefe
katma yazar Ally, kaynak
Siz bir kahramansınız! Mükemmel şeyler, büyük bir yardım Bhesh oldu .. Teşekkürler çok teşekkür ederim günüm :)
katma yazar Ally, kaynak