সেঞ্চা টাচ শুরু করা ।
Ext JS 5 এবং Sencha Cmd 5 শুরু করাটা খুবই সহজ, এ দুটো ধাপ এক সাথে করার মাধ্যমে লোকাল সার্ভারে শুরু করা যাবে। . বলে নেয়া ভাল এর সাথে একটি রুবি কমান্ড ভার্সন(ruby command compatible with 1.8 or 1.9) সিস্টেম পাথে(system path)দিয়ে দেয়া থাকে।
প্রথমে টার্মিনাল বা কনসোল উইন্ডো খুলে তাতে নিচের কমান্ডগুলো লিখতে হবেঃ
sencha generate app -ext MyApp ./app
cd app
sencha app watch
আপনি যদি ফ্রেমওয়ার্কের লোকাল কপি ব্যাবহার করতে চান তাহলে এই কোডগুলিও লিখতে পারেন আগের কোডগুলোর পরিবর্তেঃ
sencha -sdk /path/to/framework generate app MyApp ./app
প্রথম ধাপটা হয়ে গেল। আপনি অলরেডি এপ্লিকেশন তৈরি করেছেন এবং একটি সার্ভারে তা চালুও করেছেন। . তাই এখন এখানে নেভিগেট করে http://localhost:1841 বা আপনার লোকাল সার্ভারে নেভিগেট করে Ext JS 5 application টি দেখে নিন।
Sencha Cmd আপনার এপ্লিকেশনে এখন সুযোগ খুঁজবজবে,এ ধরনের একটি লেখাও আপনি দেখবেনঃ“Waiting for changes…”, যা প্রমান করবে আপনার আপ্লিকেশনটি আপটুডেট।. আপনি সেটিং ও সেভ অপশনের কারনে অন্য আরও কিছু কমান্ডও দেখতে পারেন তবে প্রধান হল এটাই,“Waiting for changes…” ম্যাসেজ. প্রক্রিয়াটি কিছুটা সময় নিতে পারে তাই ধৈর্য ধরে অল্প কিছুক্ষণ অপেক্ষা করাই ভাল। আরও বিস্তারিত জানতে চাইলে এখানে দেখতে পারেন Introduction to Sencha Cmd Guide.
পরবর্তী ধাপঃ
এখন পর্যন্ত কাঠামো ছাড়া তেমন কিছু করা হয়নি এপ্লিকেশনটির, তাই এটাকে আরেকটু প্রাণবন্ত করা যাকঃ
উত্তর দিকে টাইটেল দিতে হবেঃ
এপ্লিকেশনের কাঠামোটা আসলে একটি বর্ডার টাইপ বিষয় যা আমাদেরকে “regions” ধারনা দেয় cardinal directions এর ভিত্তিতে ।মেইন ট্যাব এরিয়া হল “center” region এবং খালি panel যেটা আছে তার নাম “west” আর সেটা আছে “west” regionএ।
ব্রান্ড টাইটেল হল সবচে আকর্ষণীয় তাই এই অ্যাপটির একটি কোম্পানি নেম দেয়া যাক।
আপনার পছন্দের IDE অথবা text editor,ব্যাবহার করে app/view/main/Main.js খুলুন।
items array তে আরেকটা আইটেম যোগ করা যাক। আমরা উচ্চতা রাখব 40px, 10px প্যাডিঙ, এবং টেক্সট লিখব: ‘My Company - My Company Motto’:
{
region: 'north',
xtype: 'component',
padding: 10,
height: 40,
html: 'My Company - My Company Motto'
}
আপনার items array যেটা Main.js সেটা এখন এমন দেখাবেঃ
[{
region: 'north',
xtype: 'component',
padding: 10,
height: 40,
html: 'My Company - My Company Motto'
},
{xtype: 'panel',
title: 'Navigation',
region: 'west',
html: '<ul><li>This area ...</li></ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
bodyPadding: 20,
html: '<h2>Content...</h2>'
}]
}]
এভাবেইMain.js ফাইলটা রাখুন। এবার প্রথমবারের মত “sencha app watch” কর্মক্ষম ভাবে দেখলেন. এবারnorth region.সহ “Waiting for changes…”টাইটেল আবার দেখলেন আপনি।
এখন এটা আরও ভাল লাগছে। স্টাইল পরিবর্তন করার অনেক পদ্ধতি আছে, .নির্দিষ্ট ক্ষেত্রে এই প্রথম পদ্ধতিটা ভালই, ধরুন আপনি north region এর টেক্সটের কালারটা চেঞ্জ করবেন,
{
region: 'north',
xtype: 'component',
cls: 'appBanner',
padding: 10,
height: 40,
html: 'My Company - My Company Motto'
}
এই কমান্ড ছাড়াও আপনি সিএসএস ফাইল অ্যাড করেও কালার চেঞ্জ করতে পারেনঃ
.appBanner{
color:#ffffff;
}
বর্তমানে SCSS (Sassy CSS) এরও ব্যাবহার হচ্ছে এধরনের কাজে।এক্ষেত্রে global SCSS variables এর লিস্ট দেখা যেতে পারে।
Sencha Cmd সবসময় corresponding SCSS file খোঁজে sass/var/তে, variables এর জন্য এবং sass/src/,rules এর জন্য। যেহেতু এই এপ্লিকেশনের এক নাম MyApp.view.main.Main, তাই sass/var/view/main/Main.scss তখনি সম্পৃক্ত হবে যখন আপনি বলবেন অর্থাৎ কমান্ড লিখবেন। আপ্নি অন্য কোন ভিউ পেতে লিখতে পারেনঃ{ViewName}.scss file যেটা sass/var/view/{namespace}/{ViewName}.scssএর ভেতরে থাকবে। এটা আপনার ইচ্ছা।কারন SCSS rules বিভিন্ন ভাবে আপ্লাই করা যায়।
এপ্লিকেশন কাঠামোয় টুলবার ব্যাবহার করেও অনেক ভাবে আউটলুক চেঞ্জ করা যায়।নিচে দেখানো হল কিভাবে Main.scss ফাইলে এটা করা যায়।
$color: #ffffff;
একবার কোড চেঞ্জ করে রিফ্রেস করলে পরিবর্তনটা বুঝা যাবে।
কলাপ্সিবল ওয়েস্ট রেজিওনঃ
এখন ওয়েস্ট প্যানেল নিয়ে কাজ যেটাকে বলে West Region টা করব আমরা। আমাদের Main.js west region কোডগুলো দেখাবে এরকমঃ
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
html: '<ul><li>This area...</li></ul>',
width: 250,
split: true,
collapsible: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
}
এখন রিফ্রেস করলে এরকম কলাপ্সিবল বাটন পাওয়া যাবে। বাটনকে আরও প্রানবন্ত করতে
ব্যাবহার করা যায় এই কোডগুলোঃ
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
html: '<ul><li>This area...</li></ul>',
width: 250,
split: true,
collapsible: true,
collapsed: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
}
ট্যাবস এবং গ্রিডস
আমাদের এপ্লিকেশন প্রান পেতে শুরু করেছে কিন্তু মাত্র একটি ট্যাব নিয়ে। কিন্তু আমরা যদি ট্যাবপ্যানেল পেতে চাই তাহলে কমপক্ষে দুটো ট্যাব হতে হবে।আরেকটি ট্যাব এড করতে লিখব নিচের কোডঃ
{
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Tab 1',
bodyPadding: 20,
html: '<h2>Content...</h2>'
},{
title: 'The Data'
}]
}
দারুন,আমাদের দুটো ট্যাব হয়ে গেছে. Ext JS আসলে খুবই ভাল কোন কঠিন বিষয়কে সহজ করে দেখানোর জন্য। যে গ্রিডটা তৈরি হল তাতে চারটা অংশ, গ্রিড নিজে, ডাটা রেকর্ড স্টোর, এবং মডেল ষ্টোরের ডাটা নিজে। বাস্তব এপ্লিকেশনে MVC architecture ব্যাবহার করা হয় অনেক সময়।
যাহোক দ্বিতীয় ট্যাবটা এরকম হবেঃ
{
title: 'The Data',
layout: 'fit',
items: [{
xtype: 'grid',
title: 'Simpsons',
store: {
fields:['name', 'email', 'phone'],
data:[
{ name: 'Lisa', email: "lisa@simpsons.com",
phone: "555-111-1224" },
{ name: 'Bart', email: "bart@simpsons.com",
phone: "555-222-1234" },
{ name: 'Homer', email: "home@simpsons.com",
phone: "555-222-1244" },
{ name: 'Marge', email: "marge@simpsons.com",
phone: "555-222-1254" }
],
proxy: {
type: 'memory'
}
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1},
{ text: 'Phone', dataIndex: 'phone' }
]
}]
}
লেআউট
Ext JS. এর অত্যন্ত গুরুত্বপূর্ণ অংশ হল লেআউট। এটা পজিশনিং নিয়ন্ত্রন করে, বর্তমান প্যানেল ‘fit’ লেআউট ব্যাবহার করছে।
স্টোর
বাস্তবে হয়ত url property সহ proxy ব্যাবহার করা হত যেখানে proxy database এ তথ্য দিত . বর্তমান উদাহরণে আমরা in-line data ব্যাবহার করছি ।
থিম পরিবর্তনঃ
"theme": "ext-theme-crisp"
এই কোড ব্যাবহার করে আমরা থিম পরিবর্তন করতে পারি।মুলত এই কোড লিখে রিফ্রেস করলে থিমটা বদলে যাবে।
শেষ কথাঃ
এভাবে সহজেই আমরা Ext JS এবং Sencha Cmd.ব্যাবহার করে এপ্লিকেশনটি রান করাতে পারি, কোডগুলো খুব ভাল করে নির্ভুলভাবে লিখতে হবে।
