Web Development Framework7 এর Event Handling গাইড ও নোট

Framework7 একটি ইভেন্ট-চালিত (Event-Driven) আর্কিটেকচার সমর্থন করে, যা বিভিন্ন ইউজার ইন্টারঅ্যাকশন (Interaction) বা অ্যাপ্লিকেশন স্টেট পরিবর্তনের সময় ইভেন্ট ট্রিগার করে। এসব ইভেন্ট শোনা (Listen) এবং হ্যান্ডল (Handle) করে আপনি অ্যাপ্লিকেশনকে ডায়নামিকভাবে নিয়ন্ত্রণ করতে পারেন।

Framework7 ইভেন্ট প্যাটার্ন

Framework7 এর অনেক কম্পোনেন্ট এবং অ্যাপ্লিকেশন লাইফসাইকেল পর্যায়ে বিভিন্ন ইভেন্ট জেনারেট হয়। যেমন:

• Page Events: পৃষ্ঠা লোড হওয়া, দেখানো, লুকানো ইত্যাদি।
• App Events: অ্যাপ ইনিশিয়ালাইজেশন, রাউট পরিবর্তন।
• UI Component Events: বিভিন্ন UI উপাদান যেমন ডায়ালগ, অ্যাকর্ডিয়ান, পপআপ, ট্যাব ইত্যাদির ইভেন্ট।

ইভেন্ট শোনা (Listening Events)

Framework7 এ ইভেন্ট শোনার জন্য সাধারণত app.on() বা নির্দিষ্ট কম্পোনেন্টের ইভেন্ট লিসনার ব্যবহার করা হয়। app.on() ব্যবহার করে আপনি অ্যাপ স্তরে ইভেন্ট শোনাতে পারেন।

উদাহরণ: অ্যাপ ইভেন্ট শোনা

var app = new Framework7();

app.on('init', function () {
  console.log('App initialized');
});

এখানে init ইভেন্ট তখন ট্রিগার হবে যখন অ্যাপ ইনিশিয়ালাইজ সম্পন্ন হবে।

পৃষ্ঠা ইভেন্ট (Page Events)

Framework7 পৃষ্ঠা-ভিত্তিক আর্কিটেকচার অনুসরণ করে, যেখানে প্রতিটি পৃষ্ঠা লোড হওয়া, দেখানো, লুকানো, বা বের হওয়ার সময় নির্দিষ্ট ইভেন্ট ফায়ার হয়।

• page:init: পৃষ্ঠা ইনিশিয়ালাইজ হলে।
• page:mounted: পৃষ্ঠা DOM এ যোগ হলে।
• page:beforein: পৃষ্ঠা দেখানোর আগ মুহূর্তে।
• page:afterin: পৃষ্ঠা দেখানোর পর।
• page:beforeout: পৃষ্ঠা থেকে বের হওয়ার আগ মুহূর্তে।
• page:afterout: পৃষ্ঠা থেকে বের হওয়ার পর।

উদাহরণ: পৃষ্ঠা ইভেন্ট হ্যান্ডল করা

// Assuming current page context
$(document).on('page:init', '.page[data-name="about"]', function (e) {
  console.log('About page initialized');
});
</code></pre><p>উপরের উদাহরণে “about” নামের পৃষ্ঠা ইনিশিয়ালাইজ হওয়ার সময় কনসোলে মেসেজ প্রদর্শন করবে।</p><hr><h3>UI কম্পোনেন্ট ইভেন্ট (Component Events)</h3><p>Framework7 এর বিভিন্ন UI কম্পোনেন্টে ইভেন্ট থাকে যা ইনিশিয়ালাইজ, ওপেন, ক্লোজ ইত্যাদি পরিস্থিতিতে ট্রিগার হয়।</p><h4>উদাহরণ: ডায়ালগ ইভেন্ট</h4><pre><code class="language-javascript">var dialog = app.dialog.alert('Hello Framework7!');

// Dialog ইভেন্ট শোনা
dialog.on('opened', function () {
  console.log('Dialog is opened');
});

dialog.on('closed', function () {
  console.log('Dialog is closed');
});
</code></pre><p>ডায়ালগ ওপেন হওয়ার পর <code inline="">opened</code> ইভেন্ট ট্রিগার হবে এবং ক্লোজ হওয়ার পর <code inline="">closed</code> ইভেন্ট ট্রিগার হবে।</p><hr><h3>ইভেন্ট হ্যান্ডলার অতিরিক্ত তথ্য</h3><p>ইভেন্ট হ্যান্ডলার সাধারণত একটি <strong>ইভেন্ট অবজেক্ট</strong> পায়, যাতে ইভেন্ট সম্পর্কিত তথ্য থাকে। পৃষ্ঠা ইভেন্টের ক্ষেত্রে, ইভেন্ট অবজেক্ট পৃষ্ঠা সম্পর্কে তথ্য দেয়, যেমন রাউট, প্যারামিটার ইত্যাদি।</p><h4>উদাহরণ: পৃষ্ঠা ইভেন্ট অবজেক্ট পরীক্ষা</h4><pre><code class="language-javascript">$(document).on('page:init', '.page[data-name="about"]', function (e, page) {
  console.log('Page name:', page.name); // "about"
  console.log('Route url:', page.route.url);
});

কাস্টম ইভেন্ট

Framework7 এর পাশাপাশি আপনি কাস্টম ইভেন্ট তৈরি করে সেগুলো ট্রিগার এবং শোনা করতে পারেন। app.emit() ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার এবং app.on() ব্যবহার করে শোনা যায়।

উদাহরণ: কাস্টম ইভেন্ট

// কাস্টম ইভেন্ট শোনা
app.on('custom-event', function (data) {
  console.log('Custom event fired with data:', data);
});

// কাস্টম ইভেন্ট ট্রিগার
app.emit('custom-event', { key: 'value' });

সারাংশ

Framework7 ইভেন্ট হ্যান্ডলিং আপনাকে অ্যাপ্লিকেশনের বিভিন্ন পর্যায়ে, যেমন পৃষ্ঠা রেন্ডার হওয়া, কম্পোনেন্ট ওপেন-ক্লোজ, বা কাস্টম অ্যাকশন সম্পন্ন হওয়ার সময় নির্দিষ্ট কাজ করার সুযোগ দেয়। app.on(), app.emit() এবং পৃষ্ঠা বা কম্পোনেন্ট ইভেন্ট ব্যবহার করে আপনি অ্যাপ্লিকেশনকে ইন্টারঅ্যাকটিভ এবং গতিশীল করে তুলতে পারবেন।

Framework7 এ Event Listeners এবং Handlers ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন ইন্টারঅ্যাকশন পরিচালনা করা যায়। কোনো একটি অ্যাকশন (যেমন বাটন ক্লিক, পেজ লোড, ইনপুট পরিবর্তন) ঘটলে নির্দিষ্ট ফাংশন (Event Handler) কল করা হয়।

Framework7 এ ইভেন্টের ধারণা

Framework7 এ ডিফল্টভাবে DOM ইভেন্ট (click, input, change, submit ইত্যাদি) সমর্থন করে, সাথে ফ্রেমওয়ার্ক নিজস্ব কিছু ইভেন্টও প্রদান করে (যেমন page:init, page:mounted, page:beforeout ইত্যাদি)। Event Listener ব্যবহার করে যখন নির্দিষ্ট ইভেন্ট ঘটে তখন কী ঘটবে তা নির্ধারণ করা যায়।

সাধারণ DOM ইভেন্ট Listener

উদাহরণ (বাটন ক্লিক):

<div class="block">
  <button class="button button-fill" id="myButton">Click Me</button>
</div>

// ইভেন্ট Listener যোগ করা
$('#myButton').on('click', function() {
  app.dialog.alert('Button Clicked!');
});
</code></pre><p>উপরের উদাহরণে <code inline="">$(...) Framework7 এর Dom7 সিলেক্টর। on('click', ...) দিয়ে আমরা "click" ইভেন্টের জন্য Listener সেট করেছি। যখন এই বাটনটি ক্লিক করা হবে, একটি অ্যালার্ট প্রদর্শিত হবে।
ইনপুট চেঞ্জ ইভেন্ট
<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Your Name</div>
          <div class="item-input-wrap">
            <input type="text" id="nameInput" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
$('#nameInput').on('input', function(e) {
  var value =$(this).val();
  console.log('Name input changed: ' + value);
});
উপরের কোডে input ইভেন্ট ব্যবহার করে যখন ইনপুট ফিল্ডে কোনো কিছু টাইপ করা হয়, তখন কনসোলে মেসেজ প্রিন্ট হবে।
Page ইভেন্ট Listener
Framework7 এ পেজ সংক্রান্ত ইভেন্ট রয়েছে, যেগুলো পৃষ্ঠা লোড হওয়ার আগে, পরে, কিংবা পৃষ্ঠা পরিবর্তন হলে ট্রিগার হয়।
উদাহরণ (page:init ইভেন্ট):
ধরি, about.html নামে একটি পৃষ্ঠা আছে:
<div class="page" data-name="about">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">About</div>
    </div>
  </div>
  <div class="page-content">
    <p>This is the About page.</p>
  </div>
</div>
// Page ইভেন্ট Listener
$(document).on('page:init', '.page[data-name="about"]', function (e) {
  console.log('About page initialized');
});
</code></pre><p>উপরের উদাহরণে <code inline="">page:init</code> ইভেন্টটি যখন <code inline="">about</code> পৃষ্ঠা ইнишিয়ালাইজ হবে তখন ট্রিগার হবে। এখানে <code inline="">.page[data-name="about"]</code> সিলেক্টর ব্যবহার করা হয়েছে, যাতে নির্দিষ্ট পৃষ্ঠায় ইভেন্ট ফায়ার হয়।</p><hr><h3>Custom ইভেন্ট ট্রিগার করা এবং শোনা</h3><p>আপনি চাইলে নিজের ইভেন্ট তৈরি করে তা ট্রিগার করতে পারেন। Framework7 এর Dom7 দিয়ে <code inline="">trigger</code> এবং <code inline="">on</code> ব্যবহার করে কাস্টম ইভেন্ট পরিচালনা করা যায়।</p><pre><code class="language-javascript">// Custom ইভেন্ট ট্রিগার$('.my-element').trigger('myCustomEvent', {someData: 123});

// Custom ইভেন্ট Listener
$('.my-element').on('myCustomEvent', function(e, data) {
  console.log('My Custom Event Fired!', data);
});
</code></pre><p>উপরের উদাহরণে <code inline="">myCustomEvent</code> নামে একটি ইভেন্ট তৈরি করা হয়েছে, যা কিছু ডেটা সহ ট্রিগার করা হয়। ইভেন্ট Listener সেই ডেটা গ্রহণ করে কাজ করবে।</p><hr><h3>একাধিক Event Listener যোগ করা</h3><p>একই এলিমেন্টে একাধিক ইভেন্ট Listener যোগ করতে পারেন। উদাহরণস্বরূপ, একই বাটনে ক্লিক এবং হোভার ইভেন্ট অ্যাড করা:</p><pre><code class="language-javascript">$('#myButton').on('click', function() {
  console.log('Button Clicked');
});

$('#myButton').on('mouseover', function() {
  console.log('Mouse Over Button');
});
</code></pre><hr><h3>ইভেন্ট Listener সরিয়ে ফেলা</h3><p>কোনো কারণে ইভেন্ট Listener সরিয়ে ফেলতে হলে <code inline="">off</code> মেথড ব্যবহার করা হয়:</p><pre><code class="language-javascript">$('#myButton').off('click');
এটি #myButton এর জন্য যুক্ত করা ক্লিক ইভেন্ট Listener সরিয়ে ফেলবে।
Framework7 এ Event Listener এবং Handler তৈরি করা সহজ। Dom7 সিলেক্টর দিয়ে এলিমেন্ট সিলেক্ট করে on মেথডের মাধ্যমে ইভেন্ট Listener যোগ করা হয়। পেজ লেভেল ইভেন্ট, ইনপুট ইভেন্ট, ক্লিক ইভেন্ট, কাস্টম ইভেন্ট ইত্যাদির মাধ্যমে আপনার অ্যাপ্লিকেশনকে ইন্টারঅ্যাক্টিভ ও ডায়নামিক করে তোলা সম্ভব।
                                                

Framework7 এ Custom Events (কাস্টম ইভেন্ট) এবং Global Events (গ্লোবাল ইভেন্ট) ব্যবহার করে অ্যাপ্লিকেশনের লজিক নিয়ন্ত্রণ করা সহজ হয়। Custom Events আপনার তৈরি করা ইভেন্ট যা প্রয়োজন অনুযায়ী ট্রিগার করা যায়, আর Global Events হলো Framework7 দ্বারা সরবরাহকৃত ইভেন্ট যা অ্যাপের বিভিন্ন পর্যায়ে ঘটে।

Custom Events ব্যবহার করা

Custom Events কী

Custom Events এমন ইভেন্ট যা আপনি নিজে সংজ্ঞায়িত (define) করতে পারেন। উদাহরণস্বরূপ, আপনি যখন কোনো ডেটা লোড শেষ করবেন তখন একটি Custom Event ট্রিগার (trigger) করতে পারেন, এবং অ্যাপের অন্য অংশ সেই ইভেন্ট শোনার (listen) মাধ্যমে ব্যবস্থা নিতে পারে।

Custom Events তৈরি

Custom Event তৈরি করতে app.emit('ইভেন্ট-নাম', ডেটা) ব্যবহার করা হয়। এটি ইভেন্টটি ট্রিগার করবে এবং যেসব লিসনার ইভেন্টের জন্য অপেক্ষা করছে তারা এই ইভেন্ট পাবেন।

// ডেটা লোড হলে ইভেন্ট ট্রিগার
app.emit('dataLoaded', { items: [1, 2, 3] });

Custom Events শোনা

Custom Events শোনার জন্য app.on('ইভেন্ট-নাম', ক্যালব্যাক) ব্যবহার করতে হয়। ক্যালব্যাক ফাংশনে ইভেন্ট থেকে প্রাপ্ত ডেটা প্যারামিটার হিসেবে পাওয়া যায়।

app.on('dataLoaded', (data) => {
  console.log('Data received:', data.items);
});

Global Events ব্যবহার করা

Global Events কী

Global Events হলো Framework7-এর বিল্ট-ইন (built-in) ইভেন্ট, যা অ্যাপ্লিকেশনের বিভিন্ন ধাপ বা অ্যাকশনে ট্রিগার হয়। যেমন রাউট পরিবর্তন, পেজ ইনিট (init) ইত্যাদি।

Global Events শোনা

Global Events শোনার জন্য app.on('ইভেন্ট-নাম', ক্যালব্যাক) ব্যবহার করতে হয়, যেভাবে Custom Events শোনা হয়। পার্থক্য হলো ইভেন্টগুলো Framework7 নিজেই তৈরি এবং ট্রিগার করে।

// রাউট পরিবর্তন হলে ইভেন্ট শোনা
app.on('routeChange', (route) => {
  console.log('New Route:', route.url);
});

সারাংশ: Framework7 এ Custom Events ব্যবহার করে নিজস্ব ইভেন্ট সংজ্ঞায়িত ও শোনা যায়, আর Global Events ব্যবহার করে অ্যাপের বিল্ট-ইন ইভেন্টগুলোতে প্রতিক্রিয়া জানানোর সুযোগ মেলে। এটি অ্যাপের ভেতরে যোগাযোগ ও ডেটা প্রবাহ আরও সহজ এবং সংগঠিত করে।

Framework7 মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য User Interactions (ইউজার ইন্টারঅ্যাকশন) এবং Touch Events (টাচ ইভেন্ট) হ্যান্ডল করা সহজ করে। এতে বিল্ট-ইন ক্লাস এবং ইভেন্ট লিসনার ব্যবহার করে ব্যবহারকারীর স্পর্শ, স্ক্রল, সোয়াইপ ইত্যাদি ইভেন্টগুলি নিয়ন্ত্রণ করা যায়।

User Interactions কী?

User Interactions বলতে বোঝায় ব্যবহারকারী যখন অ্যাপের কোন উপাদানের উপর ক্লিক, ট্যাপ, ড্র্যাগ, সোয়াইপ বা স্ক্রল করে, তখন সেই ইভেন্টগুলোকে অ্যাপ্লিকেশন কিভাবে প্রসেস করে। Framework7 এই ইন্টারঅ্যাকশনগুলোকে পরিচালনা করার জন্য একটি সুস্পষ্ট API প্রদান করে।

Touch Events কী?

Touch Events (টাচ ইভেন্ট) হলো মোবাইল ডিভাইস বা টাচস্ক্রিনে ব্যবহারকারী যখন আঙুলের স্পর্শের মাধ্যমে কোন উপাদানের সঙ্গে যোগাযোগ করে, তখন যে ইভেন্টগুলো ট্রিগার হয়। যেমন ট্যাপ (tap), টাচস্টার্ট (touchstart), টাচমুভ (touchmove), টাচএন্ড (touchend), সোয়াইপ (swipe) ইত্যাদি।

Common User Interaction Events

ট্যাপ (Tap) ইভেন্ট

Tap ইভেন্ট একটি ক্লিকের মতোই, তবে টাচস্ক্রিনে আঙুল দিয়ে হালকা স্পর্শ করা বুঝায়। Framework7 এ .on('click', ...) বা .on('tap', ...) ব্যবহার করে এটি হ্যান্ডল করা যায়।

$('.my-button').on('click', function () {
  app.dialog.alert('Button tapped!');
});
</code></pre><h4>সোয়াইপ (Swipe) ইভেন্ট</h4><p>Swipe ইভেন্ট ব্যবহার করে ব্যবহারকারী যখন আঙুল ড্র্যাগ করে বাম, ডান, উপরে বা নিচে নিয়ে যায়, সেই মোশনটি শনাক্ত করা যায়। Framework7 তৈরি করা UI কম্পোনেন্টগুলোতেও সোয়াইপ ইন্টিগ্রেট করা যায়।</p><pre><code class="language-javascript">var swiper = app.swiper.create('.swiper-container', {
  on: {
    slideChange: function () {
      console.log('Slide changed');
    },
  },
});
</code></pre><h4>টাচস্টার্ট (touchstart), টাচমুভ (touchmove), টাচএন্ড (touchend)</h4><p>এগুলো লো-লেভেল টাচ ইভেন্ট যা কাস্টম জেশ্চার (gesture) তৈরি করতে সাহায্য করে।</p><pre><code class="language-javascript">var xStart, yStart;$('.touch-area').on('touchstart', function (e) {
  xStart = e.touches[0].clientX;
  yStart = e.touches[0].clientY;
});

$('.touch-area').on('touchmove', function (e) {
  var xEnd = e.touches[0].clientX;
  var yEnd = e.touches[0].clientY;
  var xDiff = xStart - xEnd;
  var yDiff = yStart - yEnd;

  // সোয়াইপ নির্ণয় করা
  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      console.log('Swiped left');
    } else {
      console.log('Swiped right');
    }
  } else {
    if (yDiff > 0) {
      console.log('Swiped up');
    } else {
      console.log('Swiped down');
    }
  }
});
</code></pre><hr><h3>Gesture (জেশ্চার) পরিচালনা</h3><p>Framework7 এর লো-লেভেল টাচ ইভেন্টগুলো ব্যবহার করে কাস্টম Gesture তৈরি করা যায়। যেমন পিঞ্চ, ড্র্যাগ, লং-প্রেস ইত্যাদি।</p><pre><code class="language-javascript">$('.long-press-button').on('taphold', function () {
  app.dialog.alert('Button long pressed!');
});

taphold ইভেন্ট ব্যবহার করে দীর্ঘক্ষণ ট্যাপ ধরে রাখার ইন্টারঅ্যাকশন সহজে হ্যান্ডল করা যায়।

Scroll (স্ক্রল) ইভেন্ট হ্যান্ডল করা

স্ক্রল ইভেন্ট ব্যবহার করে ব্যবহারকারী কখন স্ক্রল করছে, স্ক্রলের অবস্থান কতটুকু ইত্যাদি নির্ণয় করে ডায়নামিক কন্টেন্ট লোড বা ইনফিনিট স্ক্রল তৈরি করা সম্ভব।

$('.page-content').on('scroll', function () {
  var scrollTop =$(this).scrollTop();
  console.log('Current scroll position: ' + scrollTop);
});

User Interactions ব্যবহারের সুবিধা

১) উন্নত ইউজার এক্সপেরিয়েন্স (UX): ব্যবহারকারীরা বিভিন্ন জেশ্চার, ট্যাপ, সোয়াইপের মাধ্যমে অ্যাপের সাথে প্রকৃতগতভাবে যোগাযোগ করতে পারে।
২) ডায়নামিক কন্টেন্ট: টাচ ইভেন্ট ব্যবহার করে ইনফিনিট স্ক্রল বা সোয়াইপ নেভিগেশন তৈরি করা যায়।
৩) দ্রুত প্রতিক্রিয়া: সরাসরি টাচ ইভেন্ট ব্যবহার করে ইউজার ইন্টারঅ্যাকশনের উপর রিয়েল-টাইম রেসপন্স দেওয়া যায়।

সারাংশ: Framework7 ব্যবহার করে User Interactions এবং Touch Events হ্যান্ডল করা খুবই সহজ। ট্যাপ, সোয়াইপ, স্ক্রল কিংবা কাস্টম জেশ্চার – সবকিছু সহজেই ইমপ্লিমেন্ট করা যায়। এর ফলে অ্যাপ্লিকেশন আরো ইন্টারঅ্যাকটিভ, ব্যবহারবান্ধব এবং গতিশীল হয়ে ওঠে।

Framework7 এ প্রতিটি Page-র জন্য কিছু নির্দিষ্ট Lifecycle Events রয়েছে, যা Page লোড, শো, হাইড বা ডেস্ট্রয়ের সময় ট্রিগার হয়। এই ইভেন্টগুলো ব্যবহার করে আপনি অ্যাপ্লিকেশনের স্টেট, ডেটা লোডিং, UI আপডেট এবং অন্যান্য কাস্টম অপারেশন পরিচালনা করতে পারেন।

Page Lifecycle Events কী?

Page Lifecycle Events হলো কিছু নির্দিষ্ট ইভেন্ট যা Framework7 পৃষ্ঠা লোড হওয়া, প্রদর্শিত হওয়া, আড়াল হওয়া, বা ধ্বংস হওয়ার সময় স্বয়ংক্রিয়ভাবে কল করা হয়। উদাহরণস্বরূপ, একটি পৃষ্ঠা যখন প্রথমবার লোড হয়, তখন pageInit ইভেন্ট ট্রিগার হয়। পৃষ্ঠা যখন দৃশ্যমান হয়, তখন pageBeforeIn বা pageAfterIn ইভেন্ট ট্রিগার হতে পারে।

এই ইভেন্টগুলো ডেভেলপারকে প্রতিটি অবস্থায় প্রয়োজনীয় কোড রান করার সুযোগ দেয়।

সাধারণ Page Lifecycle Events

pageInit

• কখন ট্রিগার হয়: পৃষ্ঠা প্রথমবার লোড হওয়ার সময়।
• ব্যবহার: প্রথমবার পৃষ্ঠা লোড হওয়ার সময় API ডেটা ফেচ করা, UI সেটআপ করা, বা ইনিশিয়াল স্টেট নির্ধারণ।

on: {
  pageInit: function (e, page) {
    console.log('Page initialized');
    // Data fetch বা UI স্টেট সেট করুন
  }
}

pageBeforeIn

• কখন ট্রিগার হয়: পৃষ্ঠা Display হওয়ার ঠিক আগে।
• ব্যবহার: পৃষ্ঠা প্রদর্শিত হওয়ার আগ মুহূর্তে UI আপডেট করা বা Transition শুরু করা।

on: {
  pageBeforeIn: function (e, page) {
    console.log('Page will be shown soon');
    // UI Transition শুরু করুন বা প্রয়োজনীয় আপডেট করুন
  }
}

pageAfterIn

• কখন ট্রিগার হয়: পৃষ্ঠা Display হওয়ার পর, যখন পৃষ্ঠা দৃশ্যমান।
• ব্যবহার: পৃষ্ঠা দৃশ্যমান হওয়ার পরে Animation শেষ করা, UI রিফ্রেশ বা অন্য কোনো স্টেট রিলেটেড কাজ।

on: {
  pageAfterIn: function (e, page) {
    console.log('Page is now fully visible');
    // Animation সম্পন্ন করা বা UI রিফ্রেশ
  }
}

pageBeforeOut

• কখন ট্রিগার হয়: পৃষ্ঠা আড়াল হওয়ার আগে।
• ব্যবহার: পৃষ্ঠা ছেড়ে যাওয়ার আগেই কোনো অপ্রয়োজনীয় ডেটা সংরক্ষণ বা আনসাবস্ক্রাইব ইভেন্ট।

on: {
  pageBeforeOut: function (e, page) {
    console.log('Page will be hidden soon');
    // ডেটা সেভ করা বা ইভেন্ট আনসাবস্ক্রাইব করা
  }
}

pageAfterOut

• কখন ট্রিগার হয়: পৃষ্ঠা আড়াল হওয়ার পরে।
• ব্যবহার: পৃষ্ঠা আড়াল হওয়ার পর রিসোর্স রিলিজ করা বা স্টেট রিসেট করা।

on: {
  pageAfterOut: function (e, page) {
    console.log('Page is now hidden');
    // স্টেট রিসেট বা রিসোর্স ক্লিন-আপ করা
  }
}

pageBeforeRemove

• কখন ট্রিগার হয়: পৃষ্ঠা DOM থেকে সরানোর আগে।
• ব্যবহার: পৃষ্ঠা সম্পূর্ণরূপে ধ্বংস হওয়ার আগে মেমোরি ম্যানেজমেন্ট বা Cleanup করা।

on: {
  pageBeforeRemove: function (e, page) {
    console.log('Page will be removed from DOM');
    // রিসোর্স ফ্রি করা বা মেমোরি ম্যানেজমেন্ট
  }
}

Page ইভেন্ট হ্যান্ডলার কোথায় সংজ্ঞায়িত করবেন?

Page Lifecycle Events হ্যান্ডলারগুলো আপনি সরাসরি রাউটারের রুট কনফিগারেশন বা পৃষ্ঠার টেমপ্লেট স্ক্রিপ্টে রাখতে পারেন।

Router Config-এ ইভেন্ট হ্যান্ডলার:

routes: [
  {
    path: '/about/',
    url: './pages/about.html',
    on: {
      pageInit: function (e, page) {
        console.log('About page init');
      },
      pageAfterIn: function (e, page) {
        console.log('About page after in');
      }
    }
  }
]

Page Script-এ ইভেন্ট হ্যান্ডলার (Template):

<div class="page" data-name="about">
  <!-- page content -->
</div>
<script>
  return {
    on: {
      pageInit: function (e, page) {
        console.log('About page init from template script');
      }
    }
  }
</script>

Lifecycle Events ব্যবহারের সুবিধা

1. স্টেট ম্যানেজমেন্ট সহজ: প্রতিটি পেজ ইভেন্টে প্রয়োজনীয় অ্যাকশন নিতে পারলে অ্যাপের স্টেট ম্যানেজমেন্ট সহজ হয়।
2. ডাটালোডিং অপ্টিমাইজেশন: পৃষ্ঠা লোড হওয়ার সময়ই API কল করে ডেটা লোড করা যায়, যা পারফরম্যান্স উন্নত করে।
3. রিসোর্স ম্যানেজমেন্ট: পৃষ্ঠা আড়াল হওয়া বা ধ্বংস হওয়ার সময় অপ্রয়োজনীয় রিসোর্স মুক্ত করা যায়।
4. Animation এবং Transition কন্ট্রোল: পৃষ্ঠা প্রদর্শিত হওয়া বা আড়াল হওয়ার ইভেন্টগুলো ব্যবহার করে Transition এবং Animation নিয়ন্ত্রণ করা যায়।

Page Lifecycle Events ব্যবহারের মাধ্যমে Framework7 এ পৃষ্ঠার লোডিং, প্রদর্শন, আড়াল, ও ধ্বংস প্রক্রিয়াকে নিয়ন্ত্রণ করা যায়। এটি অ্যাপ্লিকেশনের স্টেট এবং রিসোর্স ব্যবস্থাপনা সহজ করে এবং উন্নত UX নিশ্চিত করে।