জাভাতে গ্রাফিক্যাল ইউজার ইন্টারফেস – একটি ক্ষুদ্র টিউটোরিয়াল

আমরা তো সারাজীবন কনসোল এপলিকেশনই তৈরি করব না, কিছু রিয়েল লাইফের সফটওতো তৈরি করতে হবে তাই না?? হ্যা তার জন্য রয়েছে গ্রাফিক্যাল ইউজার ইন্টারফেস ইমপ্লিম্যান্টেশন। জাভাতে Swing নামক একটি বস্তু রয়েছে যার সাহায্যে এসব গ্রাফিক্যাল ইউজার ইন্টারফেস এর কাজ করা হয়। তা কোড করে লিখতে গেলে আপনার শুরুই করতে ইচ্ছে করবে না। কারন ছোট্ট একটা ইন্টারফেসের জন্য লিখতে হবে অনেক শত লাইন কোড। আর একটু আধটু ভুল হলে তো ঠিক মত কিছু দেখাবেই না।

আমরা যেহেতু শিখতে শুরু করছি তাই আমরা এত কোডিং এর দিকে যাবো না। কিভাবে সর্টকার্ট মারা যায় তাই দেখব 🙂 অলস বলে কথা। আমরা তো শুধু অলস না, মহা অলস। বিশ্বাস হচ্ছে না? তাহলে দেখুন দুই লাইনের কোড লিখে নিছেত মত আউটপুট পাব আজকেঃ

এখানে আমরা NetBeans ব্যবহার করব সর্টকার্টমেরে গ্রাফিক্যাল ইউজার ইন্টারফেস তৈরি করার জন্য। আর আলোচনাও করব অনেক ক্ষুদ্র একটা বিষয় নিয়ে তাই পোস্টের সাইজও ছোট হবে 🙂 বলছি না আমরা মাত্র দুই লাইন কোড লিখব? যাদের কম্পিউটারেNetBeans  ইনস্টল করা নেই তারা ইনস্টল করে নিন। আর না থাকলে ডাউনলোড করে নিন http://netbeans.org/ এখানে গিয়ে।

NetBeans ওপেন করে একটা প্রজেক্ট খুলুন। এখন Project টাইপ থেকে Java এর পরিবর্তে Java Desktop Application সিলেক্ট করুন। সুবিধার জন্য নিচে একটি ছবি দিয়ে দিলামঃ

আপনার প্রজেক্টের নাম দিয়ে Finish করুন। তাহলে নিচের মত একটা ইন্টারফেস ওপেন হবে। এটাই হচ্ছে আমাদের গ্রাফিক্যাল ইউজার ইন্টারফেস।

এ ইন্টারফেসটা NetBeans আমাদের জন্য তৈরি করে দিয়েছে। একটু উপরে তাকালে দেখবেন দুইটা ট্যাব রয়েছে, Source এবং Design নামে। আপনি এখন ডিজাইন ভিউ দেখতেছেন। এবার একটূ Source এ ক্লিক করুন।। কি দেখলেন!!!! অবাক করা বিষয় তাই না? ছোট্ট একটা ইন্টারফেসের জন্য এত গুলো কোড! ভাগ্য ভালো যে আমাদের এগুলো লিখতে হয় নি। যাই হোক এগুলো নিয়ে আমাদের এত মাথা না ঘামালেও হবে আপাতত। কারন আমরা তো একদিনেই সব বুঝতে পারব না। NetBeans আমাদের জন্য অটোমেটিক ভাবে এ কোড গুলো লিখে দিয়েছে। আমাদের আর কষ্ট করতে হয় নি। একটু ডানে তাকালে অনেক গুলো অপশন দেখতে পাবেন। যা দেখতে নিচের মত।

উপরের মত না দেখতে পেলে মন খারাপ করার দরকার নেই। একজনের কনফিগারেশন তো একরম হবেই। আর যদি একটুও না দেখেন তাহলে NetBeans এর মেনু বার থেকে Window তে ক্লি করে Palette তে ক্লিক করলে এগুলো দেখতে পাবেন। আমরা আজ এখানে দুই একটা বিষয় নিয়ে দেখব।

Palette থেকে Swing Controls গুলো থেকে Text Field এর উপর ক্লি করুন। এবার আপনার প্রোগ্রামের ইন্টারফেসের উপর মাউস নিয়ে আসুন। এবং ইন্টারফেসের উপর কোন জাগায় রাখবেন Text Field তা সিলেক্ট করুন। টেনে এনে ছেড়ে দিয়ে আরো সহজে করতে পারেন।

তাহলে Text Field টা সেট হবে ইন্টারফেসে। টেক্সট ফিল্ড সিলেক্ট করে Right Click করুন। তাহলে অনেক গুলো অপশন পাবেন। আপনি Edit Text এ ক্লিক করুন। তাহলে তারপর টেক্স গুলো মুছে দিন। আমরা এ Text Field থেকে প্রোগ্রামটা রান করার সময় কিছু Word ইনপুট নিব।

আবার রাইট ক্লিক করুন। এবার Change Variable Name সিলেক্ট করুন। Text Field একটা ভ্যারিয়েবলের মত কাজ করবে। ডিফল্ট ভাবে একটি ভ্যারিয়েবল এসাইন করা থাকবে। এর নাম পরিবর্তন করে দিলাম textF । আপনি ইচ্ছে মত ভ্যারিয়েবলের নাম দিতে পারেন।

Palette থেকে Swing Controls গুলো থেকে Button এর উপর ক্লি করুন। এবার আপনার প্রোগ্রামের ইন্টারফেসের উপর মাউস নিয়ে আসুন। এবং ইন্টারফেসের উপর কোন জাগায় রাখবেন Button  তা সিলেক্ট করুন। তাহলে Button টা সেট হবে ইন্টারফেসে। Button সিলেক্ট করে Right Click করুন। তাহলে অনেক গুলো অপশন পাবেন। আপনি Edit Text এ ক্লিক করুন। তাহলে তারপর টেক্স গুলো এডিট করে ইচ্ছে মত নাম দিতে পারেন। আমি দিলাম Click Me । আমরা এ Button ব্যবহার করব প্রোগ্রামটা কিছু কাজ করার জন্য। প্রোগ্রামটা রান হলে টেক্সট ইনপুটের ঘরে কিছু ওয়ার্ড লিখে যখন Click Me তে ক্লিক করবে তখন আমরা অন্য একটা টেক্সট এরিয়াতে তা দেখাবো।

আবার রাইট ক্লিক করুন। এবার Change Variable Name সিলেক্ট করুন।Button ও একটা ভ্যারিয়েবলের মত কাজ করবে। ডিফল্ট ভাবে একটি ভ্যারিয়েবল এসাইন করা থাকবে। এর নাম দিলাম button। এটি যেহেতু একটি ভ্যারিয়েবল তাই আপনি ইচ্ছে মত এর নাম দিতে পারেন।

আমরা আরকেকটি জিনিস এড করব। আর তা হচ্ছেText Area । আপনি Text Area নামক swing অবজেক্টটি টেনে এনে আপনার ইন্টারফেসের উপর ছেড়ে দিন। তারপর রাইট ক্লিক করে তার ভ্যারিয়েবল ও চেঞ্জ করে নিন। আমি দিলাম textA ।

Click Me নামক বাটনে ক্লিক করলে আমাদের প্রোগ্রামটা কিছু কাজ সম্পর্ন করবে। এটা প্রোগ্রামকে তো বলতে হবে তাই না? এর জন্য বাটনের উপর রাইট ক্লিক করে Events >> Action >> actionPerformed এ ক্লিক করুন।

তাহলে আপনাকে সোর্স কোডে নিয়ে যাবে। Click Me নামক বাটনে ক্লিক করলে কি কি কাজ হবে তার জন্য আপনি এবার কোড লেখার জন্য প্রস্তুত। ঠিক মত বুঝতে না পারলে সোর্স ভিউতে গিয়ে নিচের লাইন গুলো খুজে বের করুনঃ

private void buttonActionPerformed(java.awt.event.ActionEvent evt) {
 // TODO add your handling code here:
 }

// TODO add your handling code here: এ লাইনের নিছে ভা উপরে আপনি কোড লিখুন।

আমরা যেহেতু শিখছি তাই এমন কঠিক কিছু না লিখে সহজ কিছু লিখব। উদেশ্য হচ্ছে টেক্স ফিল্ড থেকে লিখার পর Click Me তে ক্লিক করলে তা টেক্সট এরিয়াতে শো করানো। তার জন্য আমরা দুটি মেথড ব্যবহার করব একটা হচ্ছে getText(); যা দিয়ে টেক্সট ফিল্ড থেকে টেক্স নিব। আরেকটা হচ্ছে append(text); যা দিয়ে টেক্সট এরিয়াতে আমরা টেক্সট ফিল্ডের ওয়ার্ড বা যা আছে তা শো করব।

সম্পুর্ন ভাবে শুধু মাত্র দুইলাইন কোড আমাদের লিখতে হবে, আর তা হচ্ছেঃ

String text = textF.getText();
 textA.append(text);

বুঝতে অসুবিধে হলে নিছের ছবিটি দেখুনঃ

আপনি ইচ্ছে করলে আরেকটু মডিফাই করতে পারেনঃ

String text = textF.getText();
 textA.append("You Entered: " +text);

textF তো টেক্সট ফিল্ডের ভ্যারিয়বলের নাম তাই না? তাই textF.getText(); দিয়ে আমরা টেক্সট ফিল্ডে যা লিখব তা নেওয়ার জন্য ব্যবহার করেছি। কোনটা টেক্সট ফিল্ড আর কোনটা টেক্সট এরিয়া তা আবার ক্লিয়ার করার জন্য নিছের ছবিটিঃ

textA হচ্ছে টেক্সট এরিয়ার ভ্যারিয়েবল নেইম। আর তাতে আমাদের লেখা গুলো শো করার জন্য textA.append(text); মেথড ব্যবহার করছি। এবার রান করুন প্রোগ্রামটি। তাহলে স্বাভাবিক নিয়মে প্রোগ্রামটি রান হবে।
অনেক সহজ তাই না?
ঠিক মত করতে পারলে মজা করা শরু করুন। এটা করলে কি হয়, ঐটা করলে কি হয় এমন টেস্ট করুন 🙂 আর কোন সমস্যা বা প্রশ্ন মাথায় আশার সাথে সাথেই গুগলের সাহায্যে নিন। একটা সার্চ করতে তো এত বেশি কষ্ট করতে হয় না। তাই না?