Sencha Touch কি?
Sencha Touch একটি JavaScript ফ্রেমওয়ার্ক যা মোবাইল ডিভাইসের জন্য স্পর্শ ভিত্তিক অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি HTML5 এবং CSS3 ব্যবহার করে উন্নত ইন্টারফেস তৈরি করতে সহায়তা করে এবং মোবাইল ডিভাইসে পারফরম্যান্স অপটিমাইজেশন নিশ্চিত করে। Sencha Touch বিশেষভাবে Smartphones এবং Tablets এর জন্য ব্যবহৃত হয়, এবং এটি অত্যন্ত শক্তিশালী UI কম্পোনেন্ট সরবরাহ করে যা মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টকে সহজ করে তোলে।
Sencha Touch-এ একটি নির্দিষ্ট ফোল্ডার স্ট্রাকচার রয়েছে, যা ডেভেলপারদের অ্যাপ্লিকেশন তৈরি করার সময় সিস্টেমেটিক এবং সংগঠিত কোড লেখার সুবিধা প্রদান করে।
Sencha Touch ফোল্ডার স্ট্রাকচার
Sencha Touch অ্যাপ্লিকেশন তৈরির সময় একটি নির্দিষ্ট ফোল্ডার স্ট্রাকচার অনুসরণ করা হয়। নিচে একটি সাধারণ Sencha Touch অ্যাপ্লিকেশনের ফোল্ডার স্ট্রাকচার দেওয়া হলো:
/my-app
├── app/ # অ্যাপ্লিকেশনের মূল সোর্স কোড
│ ├── model/ # মডেল ফোল্ডার
│ ├── store/ # স্টোর ফোল্ডার
│ ├── view/ # ভিউ ফোল্ডার
│ ├── controller/ # কন্ট্রোলার ফোল্ডার
│ ├── component/ # কাস্টম কম্পোনেন্ট
│ └── main.js # অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট (প্রধান স্ক্রিপ্ট)
├── resources/ # রিসোর্স ফোল্ডার (ইমেজ, আইকন, স্টাইলশিট)
│ ├── css/ # স্টাইলশিট ফোল্ডার
│ ├── fonts/ # ফন্ট ফোল্ডার
│ └── images/ # ইমেজ ফোল্ডার
├── build/ # বিল্ড ফোল্ডার (অ্যাপ্লিকেশন কম্পাইলড ফাইল)
├── sdk/ # Sencha SDK ফোল্ডার
└── index.html # অ্যাপ্লিকেশনের HTML ফাইল (এন্ট্রি পয়েন্ট)
এই ফোল্ডার স্ট্রাকচারটি আপনার অ্যাপ্লিকেশনকে সংগঠিত এবং রক্ষণাবেক্ষণযোগ্য রাখে, যাতে কোড সহজেই মডিফাই করা যায় এবং নতুন ফিচার অ্যাড করা সহজ হয়।
Sencha Touch এর মূল ফাইল সমূহ
এখন, Sencha Touch এর কিছু গুরুত্বপূর্ণ ফাইল সম্পর্কে বিস্তারিত আলোচনা করা যাক যা অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়।
১. index.html - অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট
এই ফাইলটি অ্যাপ্লিকেশনের শুরু। এটি ব্রাউজারের জন্য অ্যাপ্লিকেশন লোড করার মূল পয়েন্ট। এখানে, আপনি Sencha Touch এবং অ্যাপ্লিকেশনের স্ক্রিপ্ট ফাইলগুলিকে রেফারেন্স করেন।
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>My Sencha Touch App</title>
<link rel="stylesheet" type="text/css" href="resources/css/app.css">
<script type="text/javascript" src="sdk/sencha-touch.js"></script>
<script type="text/javascript" src="app/main.js"></script>
</head>
<body>
<div id="viewport"></div>
</body>
</html>
২. main.js - অ্যাপ্লিকেশনের প্রধান স্ক্রিপ্ট
এটি অ্যাপ্লিকেশনের মূল স্ক্রিপ্ট যা Sencha Touch ফ্রেমওয়ার্ককে ইনিশিয়ালাইজ করে এবং অ্যাপ্লিকেশনের প্রাথমিক কনফিগারেশন সেটআপ করে। এখানে অ্যাপ্লিকেশন শুরু করার জন্য প্রয়োজনীয় কোড থাকে।
উদাহরণ:
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add({
xtype: 'panel',
html: 'Hello, Sencha Touch!'
});
}
});
৩. app/model/ - মডেল ফোল্ডার
এখানে অ্যাপ্লিকেশনের ডেটা মডেল থাকে। প্রতিটি মডেল ডেটাবেস টেবিল বা অন্য কোন ডেটা স্টোরেজের সাথে সম্পর্কিত থাকে এবং ডেটা স্ট্রাকচার সংজ্ঞায়িত করে।
উদাহরণ:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});
৪. app/store/ - স্টোর ফোল্ডার
Store ডেটা ধরে রাখার জন্য ব্যবহৃত হয়। এটি ডেটা ফেচ এবং ক্যাশিংয়ের দায়িত্ব পালন করে। এখানে আপনি ডেটাবেস বা API থেকে ডেটা ফেচ করতে পারেন।
উদাহরণ:
Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',
model: 'MyApp.model.User',
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
});
৫. app/view/ - ভিউ ফোল্ডার
এখানে আপনি অ্যাপ্লিকেশনের ইউআই উপাদান তৈরি করেন। Ext.Component, Ext.Panel, Ext.List ইত্যাদি বিভিন্ন UI কম্পোনেন্ট তৈরি করার জন্য ব্যবহৃত হয়।
উদাহরণ:
Ext.define('MyApp.view.Main', {
extend: 'Ext.Panel',
config: {
html: 'Welcome to my Sencha Touch app!'
}
});
৬. app/controller/ - কন্ট্রোলার ফোল্ডার
এই ফোল্ডারে আপনার UI এবং Model এর মধ্যে লজিকাল কন্ট্রোলার থাকে। এটি ইউজারের ইন্টারঅ্যাকশন এবং ডেটা ম্যানিপুলেশন পরিচালনা করে।
উদাহরণ:
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'button': {
tap: 'onButtonTap'
}
}
},
onButtonTap: function() {
Ext.Msg.alert('Button tapped!');
}
});
৭. resources/css/ - সিএসএস ফোল্ডার
এখানে অ্যাপ্লিকেশনের স্টাইলশিট থাকে। Sencha Touch CSS ফাইলগুলি অ্যাপ্লিকেশনের থিমিং এবং লেআউট ডিজাইন করে।
উদাহরণ:
body {
font-family: Arial, sans-serif;
margin: 0;
}
সারাংশ
Sencha Touch একটি শক্তিশালী JavaScript ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ্লিকেশন ডেভেলপমেন্টকে সহজ করে তোলে। এটি মোবাইল ডিভাইসে উন্নত ইউআই উপাদান এবং পারফরম্যান্সের জন্য ডিজাইন করা হয়েছে। Sencha Touch-এর ফোল্ডার স্ট্রাকচার অ্যাপ্লিকেশনকে সংগঠিত এবং মডুলার রাখতে সাহায্য করে, যাতে কোড সহজে রক্ষণাবেক্ষণ এবং প্রসারিত করা যায়। index.html, main.js, model, store, view, controller এবং css ফোল্ডারগুলি Sencha Touch অ্যাপ্লিকেশন তৈরির মৌলিক অংশ হিসেবে কাজ করে।
Read more
