• Anasayfa
  • Nesne
  • Genel
  • Spring MVC'de Her 3 Saniyede Bir Sparkline Grafiği Nasıl Güncellenir (Gerçek Zamanlı Güncelleme)

Spring MVC'de Her 3 Saniyede Bir Sparkline Grafiği Nasıl Güncellenir (Gerçek Zamanlı Güncelleme)

Yayınlanan: 2013-06-17

Spring MVC 4.2.2 Kullanan Sparkline.js Grafik Eğitimi - Crunchify İpuçları

jQuery Sparkline: Bu jQuery eklentisi, çevrimiçi olarak iki HTML ve Javascript satırı kullanarak doğrudan tarayıcıda bir dizi farklı mini grafik oluşturmayı kolaylaştırır.

Eklentinin jQuery dışında hiçbir bağımlılığı yoktur ve tüm modern tarayıcılarla çalışır

Şimdi bu kütüphaneyi Spring MVC mimarisinde Real Time Web Uygulamanız için kullanalım. Burada yapacağımız şeyin hızlı bir akışı:

  • Spring MVC'de denetleyicim her 3 saniyede bir veri alır ve .jsp dosyasına gönderir (Görünüm).
  • (.jsp) dosyasını görüntüleyin, AJAX çağrısı yoluyla her 3 saniyede bir JSONArray verilerini alın
  • AJAX çağrısı, JSONData(jsonArray) işlevine veri gönderir
  • tüketJSONData, Sparkline'ı her 3 saniyede bir günceller

Kodlamaya başlayalım:

Aşama 1

Pre-Requisite: https://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Bu projeyi Tomcat'te başarıyla dağıtın)

Ek json.jar Maven bağımlılığına ihtiyacınız var. pom.xml dosyasını açın ve aşağıdaki bağımlılığı ekleyin.

pom.xml
1
2
3
4
5
< dependency >
< groupId > org . json < / groupId >
< artifactId > json < / artifactId >
< version > 20150729 < / version >
< / dependency >

Adım 2

CrunchifySpringSparklineConsumeJSONArray .java dosyasını com.crunchify.controller paketi altında oluşturun.

CrunchifySpringSparklineConsumeJSONArray.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package com . crunchify . controller ;
 
import java . util . Random ;
 
import org . json . JSONArray ;
import org . json . JSONException ;
import org . json . JSONObject ;
import org . springframework . stereotype . Controller ;
import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RequestMethod ;
import org . springframework . web . bind . annotation . ResponseBody ;
import org . springframework . web . servlet . ModelAndView ;
 
/**
* @author Crunchify.com
*
*/
 
@Controller
public class CrunchifySpringSparklineConsumeJSONArray {
 
     @RequestMapping ( "/sparkline" )
     public ModelAndView crunchifySparklineTest ( ) {
         return new ModelAndView ( "sparkline" , "message" , "Sparkline.js Example which accepts JSONArray value every 3 seconds & updates graphs.." ) ;
     }
 
     @RequestMapping ( value = "/sparklinetest" , method = RequestMethod . GET )
     public @ResponseBody
     String constructJSONArray ( ) throws JSONException {
 
         JSONObject one = new JSONObject ( ) ;
         JSONObject two = new JSONObject ( ) ;
         JSONObject three = new JSONObject ( ) ;
 
         JSONArray result = new JSONArray ( ) ;
         Random r = new Random ( ) ;
         int [ ] r1 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r2 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
         int [ ] r3 = { r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) , r . nextInt ( 100 ) } ;
 
         one . put ( "one" , r1 ) ;
         two . put ( "two" , r2 ) ;
         three . put ( "three" , r3 ) ;
 
         result . put ( one ) ;
         result . put ( two ) ;
         result . put ( three ) ;
 
         JSONObject jsonObj = new JSONObject ( ) ;
         jsonObj . put ( "sparkData" , result ) ;
         System . out . println ( "Sendig this data to view (sparkline.jsp): " + jsonObj . toString ( ) ) ;
 
         return jsonObj . toString ( ) ;
     }
}

Aşama 3

Sparkline.jsp dosyasını / sparkline.jsp /WebContent/WEB-INF/jsp klasörü altında oluşturun.

sparkline.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
< html >
< head >
< TITLE > Crunchify - Sparkline . js Example which accepts JSONArray
     value every 3 seconds < / TITLE >
 
<style type ="text/css">
body {
     background-image :
         url ( 'https://cdn.crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png' ) ;
}
</style>
<script type = "text/javascript"
     src = "http://code.jquery.com/jquery-1.10.1.min.js" > </script>
<script
     src = "https://cdn.crunchify.com/wp-content/uploads/code/jquery.sparkline.js" > </script>
 
<script type = "text/javascript" >
     function crunchifySparkline ( ) {
         $ . ajax ( {
             url : 'sparklinetest.html' ,
             dataType : "json" ,
             cache : false ,
             contentType : 'application/json; charset=utf-8' ,
             type : 'GET' ,
             success : function ( result ) {
                 var one = result . sparkData ;
                 //alert(one);
                 consumeJSONData ( one ) ;
             }
         } ) ;
     }
 
     function consumeJSONData ( sparkData ) {
         console . log ( sparkData ) ;
         for ( var i = 0 ; i < sparkData . length ; i ++ ) {
             var obj = sparkData [ i ] ;
             var crunchifyName ;
             var crunchifyValue ;
             for ( var key in obj ) {
                 crunchifyName = key ;
                 crunchifyValue = obj [ key ] . toString ( ) ;
                 crunchifyValue = crunchifyValue . substr ( 1 ) ;
                 crunchifyValue = crunchifyValue . substring ( 0 ,
                         crunchifyValue . length - 1 ) ;
                 var n = crunchifyValue . split ( "," ) ;
                 console . log ( n ) ;
                 $ ( "#" + crunchifyName ) . sparkline ( n , {
                     type : 'line' ,
                     width : '80' ,
                     fillColor : '#eeeeee'
                 } ) ;
             }
         }
     }
</script>
 
<script type = "text/javascript" >
     var intervalId = 0 ;
     intervalId = setInterval ( crunchifySparkline , 3000 ) ;
</script>
< / head >
 
< body >
     < div align = "center" >
         < br > < br > $ { message } < br > < br >
         < div id = "result" > < / div >
 
         < br >
         < br > Sparkline One : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "one" > . < / span >
         < br >
         < br > Sparkline Two : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "two" > . < / span >
         < br >
         < br > Sparkline Three : &nbsp; &nbsp; &nbsp; &nbsp; < span id = "three" > . < / span >
         < br >
         < br > < br > < br >
 
         < div
             style = "font-family: verdana; line-height: 25px; padding: 5px 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;" >
 
             Sparkline . js Example which accepts JSONArray value every 3 seconds by
             < a href = 'https://crunchify.com' > Crunchify < / a > . Click < a
                 href = 'https://crunchify.com/category/java-tutorials/' > here < / a >
             for all Java , Spring MVC , Web Development examples . < br >
         < / div >
     < / div >
< / body >
< / html >

Bir diğeri okumalı:

  • Basit Java Numaralandırma Örneği
  • Java MailAPI Örneği – GMail SMTP ile E-posta Gönderin
  • Java'da Daemon Thread nedir? Örnek Ekli

4. Adım

Bu dizin yapısını kontrol edin.

Spring MVC kullanan Sparkline Grafiği - Her 3 saniyede bir güncelleyin

Adım 5

CrunchifySpringMVCTutorial projesini yeniden Apache Tomcat Sunucusuna yeniden dağıtın.

  • Eclipse'de Server Sekmesine gidin
  • Clean...
  • Publish tıklayın
  • Restart tıklayın

Adım-6

Web Tarayıcısını açın ve sonucu görmek için bu URL'yi ziyaret edin: http://localhost:8080/CrunchifySpringMVCTutorial/sparkline.html

Sonuç nasıl doğrulanır ve tam akış nasıl kontrol edilir?

Aşama 1

Sonucuna dikkat et.. Bu sayfanın başında gördüğünle aynı olmalı.

Adım 2

Eclipse Konsol Çıktısını Kontrol Edin. Her 3 saniyede bir verilerle konsol günlüğünü göreceksiniz. Bu, Spring MVC denetleyicisinin her 3 saniyede bir JSP sayfasına veri gönderdiği anlamına gelir.

Spring MVC denetleyicisi, verileri her 3 saniyede bir JSP sayfasına itiyor

Aşama 3

Canlı verileri görmek için Checkout Tarayıcı konsolu.

  1. Inspect Element seçmek için sayfaya sağ tıklayın
  2. console sekmesini seçin

Spring MVC canlı verileri Chrome Tarayıcıya geliyor - Crunchify İpuçları