GWT (Google Web Toolkit) ব্যবহার করে যদি আপনি Highcharts লাইব্রেরি ইন্টিগ্রেট করতে চান এবং GWT অ্যাপ্লিকেশনের Entry Point Class এ চার্ট তৈরি করতে চান, তাহলে আপনাকে Java কোডে Highcharts JavaScript লাইব্রেরির ফাংশনালিটি ব্যবহার করতে হবে। GWT এর Entry Point Class হলো সেই ক্লাস যেখানে আপনার অ্যাপ্লিকেশনটি শুরু হয়। এখানে আপনি ওয়েব পৃষ্ঠায় চার্ট বা গ্রাফ রেন্ডার করার জন্য Highcharts লাইব্রেরি ব্যবহার করবেন।
নিচে GWT এর Entry Point Class এ Highcharts চার্ট তৈরি করার জন্য একটি সাধারণ উদাহরণ দেওয়া হলো:
প্রয়োজনীয় পদক্ষেপ:
- Highcharts লাইব্রেরি ইন্টিগ্রেট করা: প্রথমে আপনাকে Highcharts JavaScript লাইব্রেরি আপনার GWT প্রজেক্টে অন্তর্ভুক্ত করতে হবে। এটি সাধারণত
war/js/ফোল্ডারে রাখা হয় এবংindex.htmlফাইলে লোড করা হয়। - JavaScript Interop: GWT থেকে Highcharts JavaScript ফাংশন ব্যবহার করার জন্য GWT এর JavaScript Interop (JSNI) বা JSInterop ব্যবহার করতে হবে।
উদাহরণ: GWT Entry Point Class এ Highcharts চার্ট তৈরি
১. index.html ফাইলের মধ্যে Highcharts লাইব্রেরি লোড করা
<!DOCTYPE html>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script> <!-- Highcharts JavaScript লাইব্রেরি -->
<title>GWT Highcharts Example</title>
<script type="text/javascript" src="myproject.js"></script> <!-- GWT প্রজেক্টের JavaScript ফাইল -->
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div> <!-- চার্টের জন্য div -->
</body>
</html>
২. GWT Entry Point Class
GWT এর Entry Point Class এ JavaScript ইন্টিগ্রেশন করা হবে। এখানে আপনি Highcharts ব্যবহার করে একটি সিম্পল চার্ট তৈরি করবেন।
package com.mycompany.myproject.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.core.client.JavaScriptObject;
public class MyProject implements EntryPoint {
// Highcharts এর জন্য JavaScript কোড কল করার জন্য JSNI (JavaScript Native Interface) ব্যবহার করা হবে
private native void createHighcharts(String containerId) /*-{
// Highcharts JavaScript কোড
$wnd.Highcharts.chart(containerId, {
chart: {
type: 'line' // চার্টের টাইপ
},
title: {
text: 'My First Highcharts Chart'
},
series: [{
name: 'Sales',
data: [1, 3, 2, 4, 6, 7, 8, 9] // চার্টের ডেটা
}]
});
}-*/;
@Override
public void onModuleLoad() {
// EntryPoint class এর onModuleLoad() মেথডে Highcharts চার্ট তৈরি হবে
createHighcharts("container"); // HTML ফাইলে থাকা container div এর মধ্যে চার্ট তৈরি করা
}
}
কোড বিশ্লেষণ:
createHighchartsমেথড: এটি একটি JSNI (JavaScript Native Interface) মেথড, যার মাধ্যমে JavaScript কোড সরাসরি GWT অ্যাপ্লিকেশনের মধ্যে ব্যবহার করা হয়। এখানেHighcharts.chart()ফাংশন ব্যবহার করে একটি লাইন চার্ট তৈরি করা হয়েছে, যেখানেcontainerIdহল সেইdivএর ID যেখানে চার্টটি প্রদর্শিত হবে।- ডেটা:
seriesএর মধ্যে চারটি ডেটা পয়েন্ট দেওয়া হয়েছে যা লাইন চার্টে প্রদর্শিত হবে। onModuleLoad(): GWT এর EntryPoint ক্লাসের মূল মেথড, যা অ্যাপ্লিকেশন শুরু হওয়ার সময় কল হয়। এখানেcreateHighcharts()মেথডকে কল করা হয়েছে এবংcontainerআইডি দিয়ে Highcharts চার্ট তৈরি করা হচ্ছে।
সারাংশ
এই উদাহরণে, GWT এর Entry Point Class ব্যবহার করে Highcharts লাইব্রেরির মাধ্যমে একটি সিম্পল লাইন চার্ট তৈরি করা হয়েছে। JavaScript Interop (JSNI) ব্যবহার করে Highcharts লাইব্রেরি GWT অ্যাপ্লিকেশনের মধ্যে অন্তর্ভুক্ত করা হয়েছে এবং এই কোডের মাধ্যমে HTML পৃষ্ঠায় ডায়নামিকভাবে চার্ট রেন্ডার করা সম্ভব হয়েছে।
এটি GWT এর Entry Point Class এ Highcharts চার্ট তৈরি করার একটি সাধারণ পদ্ধতি। আপনি আপনার প্রজেক্টে এই পদ্ধতি ব্যবহার করে আরো জটিল ও কাস্টমাইজড চার্ট তৈরি করতে পারেন।
Read more
