সেনচা টাচ (Sencha Touch) এর পরিচিতি
Sencha Touch হল একটি JavaScript ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়, বিশেষত স্মার্টফোন এবং ট্যাবলেটের জন্য। এটি HTML5, CSS3, এবং JavaScript এর সাহায্যে ক্রস-প্ল্যাটফর্ম মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্ট সহজ করে তোলে। Sencha Touch এর মাধ্যমে ডেভেলপাররা স্মার্টফোনের জন্য ইউজার ইন্টারফেস (UI) তৈরি করতে পারে এবং এটি Android, iOS, এবং অন্যান্য মোবাইল প্ল্যাটফর্মের সাথে সমর্থনশীল।
এটি Sencha Ext JS এর উপর ভিত্তি করে তৈরি, তবে Sencha Touch মূলত মোবাইল অ্যাপ্লিকেশনগুলির জন্য ডিজাইন করা হয়েছে এবং এতে অনেক প্রি-বিল্ট কম্পোনেন্ট এবং থিমিং সিস্টেম রয়েছে। আজকের আলোচনা থাকবে Custom Themes এবং Styling Techniques নিয়ে, যা Sencha Touch-এ ব্যবহার করা হয়।
Custom Themes in Sencha Touch
Custom Themes তৈরি করা একটি গুরুত্বপূর্ণ দিক, কারণ এটি অ্যাপ্লিকেশনের লুক এবং ফিলকে একেবারে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে সহায়তা করে। Sencha Touch এর থিমিং সিস্টেম অত্যন্ত ফ্লেক্সিবল, যেখানে আপনি নির্দিষ্ট UI উপাদানগুলির স্টাইল এবং ডিজাইন কাস্টমাইজ করতে পারবেন।
১. Theme তৈরি করার প্রাথমিক ধারণা
Sencha Touch থিম তৈরি করার জন্য আপনাকে sass (Syntactically Awesome Style Sheets) এবং compass ব্যবহার করতে হয়। আপনার থিমের জন্য সমস্ত CSS স্টাইল এবং কালার প্যালেট Sencha Touch Themes ফোল্ডারে রাখা হয় এবং এই থিমটি আপনার অ্যাপ্লিকেশনে যোগ করা হয়।
Sencha Touch থিমের জন্য কাস্টম স্টাইল এবং বৈশিষ্ট্য যুক্ত করতে, প্রথমে একটি নতুন থিম তৈরি করতে হবে। থিম তৈরি করার সময় আপনাকে কিছু মৌলিক উপাদান যেমন buttons, forms, list views ইত্যাদির ডিজাইন কাস্টমাইজ করতে হবে।
২. Theme তৈরি করার উদাহরণ
এখানে একটি কাস্টম থিম তৈরি করার জন্য ফোল্ডার স্ট্রাকচার:
app/ ├── app.js ├── resources/ ├── sass/ ├── app.scss └── custom-theme.scss ├── images/- Custom Theme-এ CSS/SCSS ডিফাইন করা
custom-theme.scss ফাইলে আপনি থিমের জন্য বিশেষ ডিজাইন এবং স্টাইল দিতে পারেন:
@import 'sencha-touch';
@import 'sencha-touch/themes/default';
// Custom theme settings
$base-color: #4CAF50; // Green color for primary buttons
$accent-color: #FF5722; // Accent color for secondary buttons
// Customizing the button
.x-button {
background-color: $base-color;
color: white;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
}
এখানে, আমরা $base-color এবং $accent-color পরিবর্তন করে কাস্টম বাটন ডিজাইন করেছি এবং তারপরে .x-button ক্লাসের জন্য নতুন স্টাইল যোগ করেছি।
৩. Thème-এ Colors এবং Fonts কাস্টমাইজ করা
Sencha Touch থিমের মধ্যে আপনি বিভিন্ন স্টাইল প্রোপার্টি কাস্টমাইজ করতে পারেন যেমন colors, fonts, backgrounds, padding, ইত্যাদি।
// Changing background color for the main view
.x-view {
background-color: #f0f0f0;
}
// Customizing font style for titles
.x-title {
font-family: 'Arial', sans-serif;
font-size: 22px;
color: $base-color;
}
এখানে, .x-view এবং .x-title ক্লাসের জন্য নতুন ডিজাইন দেওয়া হয়েছে যা অ্যাপ্লিকেশনের ব্যাকগ্রাউন্ড এবং টাইটেল স্টাইল পরিবর্তন করবে।
Styling Techniques in Sencha Touch
Sencha Touch এ styling বা customization এর বিভিন্ন কৌশল ব্যবহার করা যায়। আপনি বিভিন্ন CSS প্রোপার্টি এবং SCSS variables ব্যবহার করে থিম এবং UI কাস্টমাইজ করতে পারবেন। এখানে কিছু সাধারণ স্টাইলিং টেকনিকস দেওয়া হলো:
১. UI কম্পোনেন্ট কাস্টমাইজ করা
Sencha Touch তে বিভিন্ন UI কম্পোনেন্ট যেমন buttons, panels, cards, lists ইত্যাদি কাস্টমাইজ করা যায়। একটি উদাহরণ হিসেবে, button এর ডিজাইন কাস্টমাইজ করা:
.x-button {
background-color: #2196F3; // Blue color for button
border: none;
border-radius: 8px;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
}
এখানে .x-button ক্লাসের জন্য বিভিন্ন স্টাইলিং প্রোপার্টি ব্যবহার করা হয়েছে যা বাটনের লুক এবং ফিল পরিবর্তন করবে।
২. Font এবং Typography কাস্টমাইজ করা
Sencha Touch এ আপনি আপনার প্রয়োজনীয় ফন্ট এবং টাইপোগ্রাফি সেট করতে পারবেন:
// Custom fonts for headings and sub-headings
.x-title {
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #333;
}
.x-subtitle {
font-family: 'Arial', sans-serif;
font-size: 16px;
color: #777;
}
এখানে .x-title এবং .x-subtitle ক্লাসে কাস্টম ফন্ট এবং সাইজ সেট করা হয়েছে।
৩. Responsive Design (ডিভাইস অনুসারে ডিজাইন)
Sencha Touch তে responsive design খুবই গুরুত্বপূর্ণ, কারণ এটি বিভিন্ন ডিভাইসে ঠিকভাবে কাজ করতে সক্ষম। আপনি media queries ব্যবহার করে থিমের কাস্টমাইজেশন করতে পারেন যাতে বিভিন্ন স্ক্রীন সাইজের জন্য স্টাইল প্রযোজ্য হয়।
// Example of responsive design
@media (max-width: 768px) {
.x-button {
width: 100%;
padding: 12px 15px;
}
}
এখানে, 768px এর নিচে স্ক্রীন সাইজের জন্য বাটনের প্রস্থ 100% এবং প্যাডিং পরিবর্তিত হবে।
৪. Animation and Transitions
Sencha Touch এ আপনি CSS animations এবং transitions ব্যবহার করে অ্যাপ্লিকেশনে আকর্ষণীয় এফেক্ট যোগ করতে পারেন। উদাহরণস্বরূপ, বাটন ক্লিক করার সময় অ্যানিমেশন প্রয়োগ করা:
.x-button {
transition: all 0.3s ease-in-out;
}
.x-button:active {
transform: scale(0.95); // Scale down the button when clicked
}
এখানে, .x-button ক্লাসের জন্য একটি transition ব্যবহার করা হয়েছে যা বাটন ক্লিক করার সময় স্লো মোশন এফেক্ট তৈরি করবে।
সারাংশ
Sencha Touch এর মাধ্যমে আপনি কাস্টম থিম তৈরি এবং কাস্টম স্টাইলিং করতে পারেন যা আপনার মোবাইল অ্যাপ্লিকেশনকে আরও সুন্দর এবং ব্যবহারকারী-বান্ধব করে তোলে। Custom Themes তৈরির সময় আপনি SCSS, CSS এবং variables ব্যবহার করে থিমের ডিজাইন কাস্টমাইজ করতে পারেন। এর পাশাপাশি, UI components, font styling, responsive design এবং animations ব্যবহার করে অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ফ্লুইড করে তুলতে পারেন। Sencha Touch এর স্টাইলিং টেকনিকস এবং থিমিং সিস্টেম ব্যবহার করে আপনি আপনার মোবাইল অ্যাপ্লিকেশনের ডিজাইনকে পুরোপুরি কাস্টমাইজ করতে সক্ষম হবেন।
Read more
