मुख्य सामग्री पर जाएँ
CrossFly 100% ओपन सोर्सGitHub पर फ़ॉलो करें
CrossFlyCrossFly
शुरू करें

यह पृष्ठ पुर्तगाली से मशीन-अनुवादित है और इसमें त्रुटियाँ हो सकती हैं। पुर्तगाली संस्करण प्रामाणिक है।

क्लिक करने योग्य कार्ड कैसे बनाएं

उद्देश्य. एक “कार्ड” बनाना (पृष्ठभूमि, गोल बॉर्डर और आंतरिक सामग्री वाला एक Component) जो स्पर्श पर प्रतिक्रिया करता है, दबाए जाने पर दृश्य हाइलाइट लागू करता है और एक क्रिया ट्रिगर करता है। सूची आइटम, डैशबोर्ड टाइल, शॉर्टकट इत्यादि के लिए उपयोग करें।

प्रयुक्त APIs

  • new Component() — CrossFly में सब कुछ Component है; एक कार्ड बस शैली और लेआउट वाला एक Component है।
  • component.style(ComponentStyle s) — शैली लागू करता है (पृष्ठभूमि, बॉर्डर, त्रिज्या)। श्रृंखलन के लिए <T extends Component> लौटाता है।
  • ComponentStyle.pressable() — शैली को Pressable.YES के रूप में चिह्नित करता है: कंपोनेंट दबाए जाने पर हाइलाइट प्राप्त करता है और स्पर्श घटनाएँ प्राप्त करने लगता है।
  • component.setLayout(Layout l) — आंतरिक सामग्री का लेआउट प्रबंधक परिभाषित करता है (उदा.: new GridLayout(...))।
  • component.add(Object... params) — सक्रिय लेआउट के अनुसार संतानें जोड़ता है।
  • component.onAction(Component.Action action) — स्पर्श पर ट्रिगर होने वाला कॉलबैक पंजीकृत करता है (केवल तभी काम करता है जब शैली pressable हो)।
  • Styles.component() — आपके अनुकूलन के लिए सक्रिय Skin से एक आधार ComponentStyle लौटाता है।

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

package com.exemplo;

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

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // कार्ड शैली: सफेद पृष्ठभूमि, गोल कोने, क्लिक करने योग्य
      ComponentStyle cardStyle = Styles.component()
         .backColor(0xFFFFFFFF)
         .borderColor(0xFFE0E0E0)
         .borderRadius(0.5f)   // फ़ॉन्ट इकाइयों में त्रिज्या
         .ingap(Gap.ofFont(0.8f))
         .pressable();         // ← कार्ड को स्पर्श के प्रति संवेदनशील बनाता है

      Component card = new Component()
         .style(cardStyle);

      // आंतरिक कंटेंट एक कॉलम में (शीर्षक + उपशीर्षक)
      card.setLayout(new GridLayout(Position.START, Position.CENTER));
      card.add(new Label("Pedido #1234"));
      card.add(new Label("Entregue hoje"));

      // स्पर्श पर क्रिया
      card.onAction(origin -> abrirDetalhe(1234));

      // कार्ड को वर्तमान स्क्रीन/container में जोड़ता है
      add(card);
   }

   private void abrirDetalhe(int pedido)
   {
      // ... ऑर्डर विवरण स्क्रीन खोलें ...
   }
}

नीचे का अंश केवल मुख्य भाग दिखाता है। चलाने के लिए, इसे ऊपर दिए गए MainWindow ढाँचे में रखें।

न्यूनतम अंश

// कार्ड शैली: सफेद पृष्ठभूमि, गोल कोने, क्लिक करने योग्य
ComponentStyle cardStyle = Styles.component()
   .backColor(0xFFFFFFFF)
   .borderColor(0xFFE0E0E0)
   .borderRadius(0.5f)   // फ़ॉन्ट इकाइयों में त्रिज्या
   .ingap(Gap.ofFont(0.8f))
   .pressable();         // ← कार्ड को स्पर्श के प्रति संवेदनशील बनाता है

Component card = new Component()
   .style(cardStyle);

// आंतरिक कंटेंट एक कॉलम में (शीर्षक + उपशीर्षक)
card.setLayout(new GridLayout(Position.START, Position.CENTER));
card.add(new Label("Pedido #1234"));
card.add(new Label("Entregue hoje"));

// स्पर्श पर क्रिया
card.onAction(origin -> abrirDetalhe(1234));

// कार्ड को वर्तमान स्क्रीन/container में जोड़ता है
add(card);

सत्यापन नोट (कोड 2026). स्रोत में पुष्ट: Component.style(ComponentStyle) <T extends Component> T लौटाता है (फ्लुएंट), ComponentStyle.pressable() Pressable.YES सेट करता है, और Component.onAction(Action) hasAction(true) चिह्नित करता है। दबाए जाने का हाइलाइट Skin द्वारा हल की गई प्रति-स्थिति शैलियों (default/pressed) का उपयोग करता है — pressed स्थिति को अनुकूलित करने की आवश्यकता होने पर ही अध्याय 10 देखें। pressable() के बिना, onAction ट्रिगर नहीं होता क्योंकि कंपोनेंट स्पर्श का लक्ष्य नहीं होता।

और गहराई से जानें

क्या यह पृष्ठ उपयोगी था?