मास्क और कीबोर्ड

फ़ील्ड का EditMode एक साथ दो चीज़ें नियंत्रित करता है: फ़ॉर्मेटिंग (मास्क) और जो कीबोर्ड खुलता है। यह संरचित इनपुट का केंद्रीय भाग है।

EditMode → कीबोर्ड

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

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // TextFieldStyle (व्यवहारिक कॉन्फ़िग)

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

      // दिनांक फ़ील्ड: मास्क चालू होने पर टच करते ही DatePicker खोलता है
      TextField data = new TextField().caption("Data");
      data.setMode(EditMode.DATE, true);      // maskedEdit=true → फ़ॉर्मेट करता है और DatePicker खोलता है
      add(LAY_AUTO, data);

      // मुद्रा फ़ील्ड: टाइप करते समय मुद्रा के रूप में फ़ॉर्मेट करता है
      TextField valor = new TextField().caption("Valor");
      valor.setMode(EditMode.CURRENCY, true);
      valor.<TextFieldStyle>getStyle().decimalPlaces(2);
      add(LAY_AUTO, valor);

      // लेबल जहाँ पढ़े गए मान प्रदर्शित होंगे
      Label resultado = new Label("");
      add(LAY_AUTO, resultado);

      // प्रति-कुंजी कोई callback नहीं है: सबमिट पर getText() पढ़ें।
      // getTextWithoutMask() केवल अंक लौटाता है (डेटाबेस में सहेजने के लिए अच्छा)।
      Button enviar = new Button("Enviar");
      enviar.onAction(c -> resultado.setText(
         "Data = " + data.getText() + "  |  Valor = " + valor.getTextWithoutMask()));
      add(LAY_AUTO, enviar);
   }
}

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

स्वचालित मास्क सक्रिय करना

setMode(mode, true) वास्तविक समय की फ़ॉर्मेटिंग (maskedEdit) को चालू करता है:

TextField data = new TextField().caption("Data");
data.setMode(EditMode.DATE, true);         // टाइप करते समय, 15/03/2024 बन जाता है और DatePicker खोलता है

TextField valor = new TextField().caption("Valor");
valor.setMode(EditMode.CURRENCY, true);    // टाइप करते समय मुद्रा के रूप में फ़ॉर्मेट करता है
valor.<TextFieldStyle>getStyle().decimalPlaces(2);

कस्टम मास्क ('9' अंक है)

एक मास्क में, प्रत्येक '9' एक अंक की स्थिति है; अन्य सभी अक्षर निश्चित अक्षरशः हैं:

TextField cpf = new TextField().caption("CPF");
cpf.<TextFieldStyle>getStyle()
   .mask("999.999.999-99".toCharArray())    // 11 अंक + विभाजक
   .mode(EditMode.NUMERIC, true);
// getText()          -> "123.456.789-00"  (मास्क के साथ)
// getTextWithoutMask()-> "12345678900"    (केवल अंक)

तैयार मुद्रा: TextField.getDefaultCurrencyMask(int casasDecimais) locale के हज़ार/दशमलव विभाजकों के साथ मास्क उत्पन्न करता है।

कीबोर्ड को स्पष्ट रूप से चुनना

campo.keyboard(Keyboard.NUMERIC);   // संख्यात्मक लागू करता है
campo.keyboard(Keyboard.NONE);      // कभी कीबोर्ड नहीं खोलता (दृश्य रूप से केवल-पठन फ़ील्ड)

Keyboard (UIConstants में): NONE, DEFAULT, NUMERIC, KEYPAD, CALCULATOR, DATE, TIME। DEFAULT वर्तमान EditMode में निहित कीबोर्ड अपनाता है।

अंतर्निहित Keypad

Keyboard.KEYPAD/CALCULATOR CrossFly के अपने Keypad कॉम्पोनेंट का उपयोग करते हैं (OS के कीबोर्ड का नहीं) — कियोस्क/POS में उपयोगी। यह फ़ील्ड द्वारा स्वचालित रूप से खुलता है; इसे अलग से उपयोग करने के लिए:

new Keypad(meuCampo).show();        // फ़ील्ड से संबद्ध संख्यात्मक कीबोर्ड

अच्छे तौर-तरीके

• डेटाबेस में getTextWithoutMask() (कच्चे अंक) सहेजें; मास्क के साथ प्रदर्शित करें।
• दस्तावेज़ों (CPF, CEP, टेलीफ़ोन) के लिए mask(...) को mode(EditMode.NUMERIC, true) के साथ जोड़ें।
• डेस्कटॉप पर, NUMERIC स्वचालित रूप से Keypad पर आ जाता है — नेटिव कीबोर्ड न मानें।

आम गलतियाँ

• mode(EditMode.DATE) को maskedEdit=true के बिना चालू करना → कोई स्वचालित फ़ॉर्मेटिंग नहीं।
• जब बैक-एंड केवल अंक अपेक्षित करता है तो getText() (बिंदुओं/डैश के साथ) को स्थायी करना।
• बिना किसी '9' वाला मास्क → कोई अंक स्वीकार नहीं किया जाता।

यह भी देखें

• टेक्स्ट फ़ील्ड · कैटलॉग: DatePicker · TimePicker · Keypad