2. Windows और नेविगेशन

आप क्या सीखेंगे: स्क्रीन की इकाई (Window), UI कहाँ बनानी है, और स्टैक-आधारित नेविगेशन मॉडल। पूर्वापेक्षाएँ: समग्र परिदृश्य।

संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

स्टैक द्वारा नेविगेट करती दो स्क्रीन (push/hide), जिनमें डेटा constructor से पास किया जाता है। MainWindow सूची है; TelaDetalhe विवरण है। जैसा है वैसा ही compile होता है।

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      add(LAY_AUTO, new Label("Minhas tarefas"));

      Button abrir = new Button("Abrir tarefa 42");
      abrir.onAction(c -> new TelaDetalhe(42).show());   // push: विवरण को स्टैक करता है
      add(LAY_AUTO, abrir);
   }
}

class TelaDetalhe extends Window
{
   private final int id;

   public TelaDetalhe(int id) { this.id = id; }          // कंस्ट्रक्टर से डेटा

   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      add(LAY_AUTO, new Label("Tarefa " + id));

      Button voltar = new Button("Voltar");
      voltar.onAction(c -> hide());                       // pop: स्टैक से हटाता है, सूची पर लौटता है
      add(LAY_AUTO, voltar);
   }
}

नीचे के अंश केवल मूल भाग दिखाते हैं (जो onShow() के भीतर जाता है)। चलाने के लिए, उन्हें ऊपर के MainWindow ढाँचे में रखें।

Window और onShow()

हर स्क्रीन Window का एक उपवर्ग है (जो एक Component है)। UI को onShow() में बनाएँ — साथ में super.onShow() — जहाँ bounds पहले से ही मान्य होते हैं (कभी भी constructor में नहीं)।

नेविगेशन स्टैक (LIFO)

show() एक window को स्टैक पर रखता है (push); hide() उसे हटाता है (pop)। शीर्ष का window input पाता है।

public class TelaLista extends Window {
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      Button abrir = new Button("Abrir tarefa 42");
      abrir.onAction(c -> new TelaDetalhe(42).show());   // push
      add(LAY_AUTO, abrir);
   }
}

public class TelaDetalhe extends Window {
   private final int id;
   public TelaDetalhe(int id) { this.id = id; }          // कंस्ट्रक्टर से डेटा
   @Override public void onShow() throws Exception {
      super.onShow();
      setLayout(new VerticalLayout());
      add(LAY_AUTO, new Label("Tarefa " + id));
      Button voltar = new Button("Voltar");
      voltar.onAction(c -> hide());                       // pop
      add(LAY_AUTO, voltar);
   }
}

डेटा पास करना और मान लौटाना

• डेटा के साथ किसी स्क्रीन पर जाना: constructor के माध्यम से (new TelaDetalhe(42).show())।
• एक मान लौटाना: pickers show(onAnswer) का उपयोग करते हैं; सामान्य स्क्रीन constructor के माध्यम से एक callback का उपयोग करती हैं; dialogs (Alert) buttonAction द्वारा उत्तर देते हैं (देखें मान लौटाना)।

इस चरण में क्या बनाया जाता है

मार्गदर्शक-सूत्र ऐप का दो-स्क्रीन ढाँचा: सूची → विवरण, एक-दूसरे के बीच नेविगेट करते हुए।

पुनरावलोकन

स्क्रीन = Window; UI onShow()+super.onShow() में; show()/hide() = push/pop; डेटा constructor से।

अगले कदम

→ कॉम्पोनेंट्स में सोचना

यह भी देखें

• नेविगेशन (ui) · अवधारणा: जीवन-चक्र