jQuery Mobile অসাধারণ একটা ফ্রন্টএন্ড ফ্রেমওয়ার্ক। HTML5 ভিত্তিক এই UI সিস্টেম ব্যবহার করে আমরা সহজেই মোবাইল অ্যাপ ডেভেলপ করতে পারি। jQuery Mobile অনেক সমৃদ্ধ একটা মোবাইল ফ্রেমওয়ার্ক। রয়েছে ইচ্ছে মত কাস্টোমাইজেশনের সুবিধে। আর অনলাইনে রয়েছে অনেক অসাধারণ সব টেমপ্লেট। HTML5 ভিত্তিক অ্যাপ তৈরি করার জন্য বলা যায় সেরা একটি ফ্রেমওয়ার্ক।
কিভাবে একটি লিস্ট ভিউ অ্যাপ তৈরি করা যায়, আজ তাই দেখব। অ্যাপটি হবে এমন, প্রথম পেইজে একটা লিস্ট দেখাবে বা টাইটেল বলা যায়। ঐ লিস্ট গুলোর এক একটাতে ক্লিক করলে এক একটা পেইজ ওপেন হবে। এবং ঐ পেইজে ঐ টাইটেল রিলেটেড কন্টেন্ট গুলো দেখাবে। শুরু করা যাক।
সবার প্রথমে আমাদের jQuery Mobile ডাউনলোড করতে হবে। ডাউনলোড করে এক্সটাক্ট করলে অনেক গুলো ফাইল পাবো। পাবো Demo নামক একটা ফোল্ডার। ঐ ফ্লোডারে অনেক গুলো ডেমো দেখতে পাবো। ভিন্ন ভিন্ন উদারহণ নিয়ে অনেক গুলো ফাইল। সময় করে সব গুলো দেখব… আমাদের ঐ ফাইল গুলো লাগবে না। আমাদের অল্প কয়েকটি ফাইল লাগবে কাজ করার জন্য।
যে কোন জায়গায় একটা ফোল্ডার তৈরি করে নি। যেমন My App, ফোল্ডারের ভেতর jQuery Mobile থেকে image ফোল্ডারটা কপি করি। আরো দুইটা ফোল্ডার তৈরি করি। একটা css আরেকটা js.
আমি যখন এ পোস্টটা লিখি, তখন jQuery Mobile এর লেটেস্ট ভার্সন ছিল Version 1.4.5। আপনি হয়তো দেখবেন তখন হয়তো এর পরের ভার্সন ডাউনলোড করে থাকতে পারেন যেমন Version 1.4.6 বা Version 1.4.9 etc..
আচ্ছা, এবার jQuery Mobile ফোল্ডার থেকে jquery.mobile-1.4.5.min.js বা এর লেটেস্ট ভার্সনটা আপনার তৈরি করা js ফোল্ডারে রাখুন। jquery.mobile-1.4.5.min.css ফাইলটি রাখুন css ফোল্ডারে।
jQuery Mobile নিয়ে কাজ করার জন্য আমাদের jQuery লাগবে। jQuery ডাউনলোড করে js ফোল্ডারে রাখতে হবে। ডাউনলোড করা যাবে নিচের লিঙ্ক থেকেঃ
লিঙ্কে গিয়ে Download the compressed, production jQuery তে ক্লিক করে ডাউনলোড করে নিব।
এবার আমাদের তৈরি ফোল্ডার, যেমন My App এর ভেতর একটা HTML ফাইল তৈরি করি। যেমন index.html. ফাইলটি যে কোন টেক্সট এডিটর যেমন নোটপ্যাড++ দিয়ে ওপেন করি। প্রথমে আমাদের jQuery মোবাইল এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল গুলো লিঙ্ক করতে হবে। তা করে নিব। এরপর আমরা একটা পেইজ তৈরি করব। index.html এর ভেতরে যা আরেকটি html পেইজ এর মত কাজ করবে। এরপর আমরা একটা লিস্ট তৈরি করব। যেমন আমরা এমন একটা অ্যাপ তৈরি করব, যার মধ্যে চারটা পেইজ থাকবে। লিস্ট এর এক একটা টাইটেলে ক্লিক করলে এক একটা পেইজ ওপেন হবে। কোড গুলো লিখলে নিচের মত হবেঃ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> ist View Multi Page</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>List View Multi Page</h1> </div><!-- /header --> <div role="main" class="ui-content"> <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#page1">Page One</a></li> <li><a href="#page2">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> </div> </body> </html>
আমরা যারা HTML নিয়ে কাজ করি, তারা জানি আমরা যদি চারটি পেইজ তৈরি করতে চাই, তাহলে আমাদের চারটি আলাদা আলাদা এইচটিএমএল ফাইল তৈরি করতে হবে। যেমন page1.html, page2.html etc . কিন্তু jQuery Mobile এর সুবিধে হচ্ছে আমরা একটা html ফাইলের ভেতরেই একের অধিক পেইজ তৈরি করতে পারি। যে গুলো আলাদা পেইজ এর মত কাজ করবে। ভার্চুয়াল পেইজ। আমরা তা করব div ব্যবহার করে। নতুন একটা পেইজ তৈরি করার জন্য নিচের শুধু লিখতে হবে <div data-role=”page” id=”page1″> … </div> এখানে id হচ্ছে unique id, যেটা দিয়ে পেইজটিকে কল করব। এটা লিঙ্ক এর মত কাজ করবে। আমরা যদি এখন আরেকটা পেইজ যুক্ত করি আমাদের index.html এ, তাহলে তার জন্য লিখতে হবেঃ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> ist View Multi Page</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>List View Multi Page</h1> </div><!-- /header --> <div role="main" class="ui-content"> <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#page1">Page One</a></li> <li><a href="#page2">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> </div> <div data-role="page" id="page1"> <div data-role="header"> <a href="./" data-shadow="false" data-iconshadow="false" data-icon="carat-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> <h1>Page One</h1> </div> <div role="main" class="ui-content"> <h1>Page one content</h1> </div> </div> <!-- page end--> </body> </html>
এখানের কোড গুলো লক্ষ্য করি। প্রথমে লিখছি <div data-role=”header”> ….</div> এ অংশটি পেইজের হেডার হিসেবে কাজ করবে। অ্যাপের হেডার… এটার ভেতরে আবার বিশাল একটা লাইন লিখেছিঃ <a href=”./” data-shadow=”false” data-iconshadow=”false” data-icon=”carat-l” data-iconpos=”notext” data-rel=”back” data-ajax=”false”>Back</a>
এটা দিয়ে আময়া page one এ আসলে আবার প্রথমে পেইজে যাওয়ার লিঙ্ক তৈরি করেছি।
এরপর<div role=”main” class=”ui-content”> … </div> এটার ভেতরে আমাদের কন্টেন্ট গুলো যুক্ত করব। এখানে যা ইচ্ছে তাই আমরা যুক্ত করতে পারি। যে কোন এইচটিএমএল কোডই লিখতে পারি।
এভাবে আমরা যত ইচ্ছে তত পেইজ তৈরি করতে পারব। যেমন আমরা এখন চারটা পেইজ তৈরি করবঃ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> ist View Multi Page</title> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>List View Multi Page</h1> </div><!-- /header --> <div role="main" class="ui-content"> <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#page1">Page One</a></li> <li><a href="#page2">Page Two</a></li> <li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> </div> <div data-role="page" id="page1"> <div data-role="header"> <a href="./" data-shadow="false" data-iconshadow="false" data-icon="carat-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> <h1>Page One</h1> </div> <div role="main" class="ui-content"> <pre><h1>Page one content</h1></pre> </div> </div> <!-- page end--> <div data-role="page" id="page2"> <div data-role="header"> <a href="./" data-shadow="false" data-iconshadow="false" data-icon="carat-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> <h1>Page Two</h1> </div> <div role="main" class="ui-content"> <pre><h1>Page two content</h1></pre> </div> </div> <!-- page end--> <div data-role="page" id="page3"> <div data-role="header"> <a href="./" data-shadow="false" data-iconshadow="false" data-icon="carat-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> <h1>Page Three</h1> </div> <div role="main" class="ui-content"> <pre><h1>Page threecontent</h1></pre> </div> </div> <!-- page end--> <div data-role="page" id="page4"> <div data-role="header"> <a href="./" data-shadow="false" data-iconshadow="false" data-icon="carat-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> <h1>Page Four</h1> </div> <div role="main" class="ui-content"> <pre><h1>Page four content</h1></pre> </div> </div> <!-- page end--> </body> </html>
এবার আমরা ইচ্ছে করলে পেইজ গুলোর ভেতরে নিজেদের ইচ্ছে মত কন্টেন্ট যুক্ত করতে পারি। যুক্ত করতে পারি যে কোন ইমেজ, সহ যে কোন কিছু।
উপরে কোড সহ সম্পুর্ণ প্রজেক্ট পাওয়া যাবে গিটহাবে jQuery-Mobile-List-View-Multipage নামে। ঐখান থেকে ডাউনলোড করে নেওয়া যাবে।
উপরে আমরা এতক্ষন একটা HTML প্রজেক্ট তৈরি করেছি। এবার একে অ্যাপ পরিনত করার জন্য আমরা সাহায্য নিব Cordova এর। Cordova ব্যবহার করে আমরা উপরের প্রজেক্টটিকে অ্যান্ড্রোয়েড, আইফোন, উইন্ডোজ ফোনের জন্য অ্যাপ তৈরি করতে পারি। এন্ড্রয়েডের জন্য এবং আইফোনের জন্য অ্যাপ তৈরি করার জন্য নিচের পোস্ট দুটি দেখা যেতে পারেঃ
- Cordova কমান্ডলাইন ইন্টারফেস [ Cordova CLI ] দিয়ে অ্যান্ড্রয়েড অ্যাপ তৈরির বিস্তারিত গাইড লাইন।
- Cordova / Phonegap CLI এবং HTML5 ব্যবহার করে iOS অ্যাপ ডেভেলপমেন্ট
jQuyer Mobile দিয়ে অসাধারণ সব অ্যাপ তৈরি করার জন্য দরকার HTML এবং CSS এ দক্ষতা। HTML এবং CSS এর কিছু টিউটোরিয়াল পাওয়া যাবে এ ব্লগে, নিচের লিঙ্ক দুটিটেঃ