logologo
शुरू करें
मार्गदर्शिका
विकास
प्लगइन
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
शुरू करें
मार्गदर्शिका
विकास
प्लगइन
API
logologo

परिचय

FlowEngine क्या है?
FlowEngine और Plugin के बीच संबंध
क्विक स्टार्ट
लर्निंग रोडमैप

गाइड

FlowModel रजिस्टर करें
FlowModel बनाएँ
FlowModel रेंडर करें
FlowModel इवेंट फ्लो और कॉन्फ़िगरेशन
FlowModel परसिस्टेंस
FlowModel लाइफसाइकिल
FlowModel कॉन्टेक्स्ट सिस्टम
रिएक्टिव मैकेनिज्म: Observable
FlowModel बनाम React.Component

डेफिनेशंस

ModelDefinition
FlowDefinition
EventDefinition
ActionDefinition
StepDefinition
Previous PageFlowDefinition
Next PageActionDefinition
TIP

यह दस्तावेज़ AI द्वारा अनुवादित किया गया है। किसी भी अशुद्धि के लिए, कृपया अंग्रेजी संस्करण देखें

#EventDefinition

EventDefinition एक वर्कफ़्लो (flow) में इवेंट हैंडलिंग लॉजिक को परिभाषित करता है, जिसका उपयोग विशिष्ट इवेंट ट्रिगर्स का जवाब देने के लिए किया जाता है। इवेंट्स, वर्कफ़्लो (flow) के निष्पादन को ट्रिगर करने के लिए FlowEngine में एक महत्वपूर्ण तंत्र हैं।

#प्रकार की परिभाषा

type EventDefinition<TModel extends FlowModel = FlowModel, TCtx extends FlowContext = FlowContext> = ActionDefinition<TModel, TCtx>;

EventDefinition वास्तव में ActionDefinition का एक उपनाम (alias) है, इसलिए इसमें वही गुण (properties) और विधियाँ (methods) होती हैं।

#पंजीकरण का तरीका

// वैश्विक पंजीकरण (FlowEngine के माध्यम से)
const engine = new FlowEngine();
engine.registerEvent({
  name: 'clickEvent',
  title: 'Click Event',
  handler: async (ctx, params) => {
    // इवेंट हैंडलिंग लॉजिक
  }
});

// मॉडल-स्तर पर पंजीकरण (FlowModel के माध्यम से)
class MyModel extends FlowModel {}
MyModel.registerEvent({
  name: 'submitEvent',
  title: 'Submit Event',
  handler: async (ctx, params) => {
    // इवेंट हैंडलिंग लॉजिक
  }
});

// वर्कफ़्लो (flow) में उपयोग
MyModel.registerFlow({
  key: 'formFlow',
  on: 'submitEvent',  // एक पंजीकृत इवेंट को संदर्भित करता है
  steps: {
    step1: {
      use: 'processFormAction'
    }
  }
});

#गुणों का विवरण

#name

प्रकार: string
आवश्यक: हाँ
विवरण: इवेंट का अद्वितीय पहचानकर्ता।

वर्कफ़्लो (flow) में on गुण (property) के माध्यम से इवेंट को संदर्भित करने के लिए उपयोग किया जाता है।

उदाहरण:

name: 'clickEvent'
name: 'submitEvent'
name: 'customEvent'

#title

प्रकार: string
आवश्यक: नहीं
विवरण: इवेंट के लिए प्रदर्शित होने वाला शीर्षक।

यूज़र इंटरफ़ेस (UI) में प्रदर्शित करने और डीबगिंग के लिए उपयोग किया जाता है।

उदाहरण:

title: 'Click Event'
title: 'Form Submit'
title: 'Data Change'

#handler

प्रकार: (ctx: TCtx, params: any) => Promise<any> | any
आवश्यक: हाँ
विवरण: इवेंट का हैंडलर फ़ंक्शन।

यह इवेंट का मुख्य लॉजिक है, जो कॉन्टेक्स्ट और पैरामीटर्स को प्राप्त करता है, और प्रोसेसिंग का परिणाम देता है।

उदाहरण:

handler: async (ctx, params) => {
  const { model, flowEngine } = ctx;
  
  try {
    // इवेंट हैंडलिंग लॉजिक निष्पादित करें
    const result = await handleEvent(params);
    
    // परिणाम वापस करें
    return {
      success: true,
      data: result,
      message: 'Event handled successfully'
    };
  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

#defaultParams

प्रकार: Record<string, any> | ((ctx: TCtx) => Record<string, any> | Promise<Record<string, any>>)
आवश्यक: नहीं
विवरण: इवेंट के लिए डिफ़ॉल्ट पैरामीटर्स।

इवेंट ट्रिगर होने पर पैरामीटर्स को डिफ़ॉल्ट मानों से भरता है।

उदाहरण:

// स्थिर डिफ़ॉल्ट पैरामीटर्स
defaultParams: {
  preventDefault: true,
  stopPropagation: false
}

// गतिशील डिफ़ॉल्ट पैरामीटर्स
defaultParams: (ctx) => {
  return {
    timestamp: Date.now(),
    userId: ctx.model.uid,
    eventSource: 'user'
  }
}

// अतुल्यकालिक (Asynchronous) डिफ़ॉल्ट पैरामीटर्स
defaultParams: async (ctx) => {
  const userInfo = await getUserInfo();
  return {
    user: userInfo,
    session: await getSessionInfo()
  }
}

#uiSchema

प्रकार: Record<string, ISchema> | ((ctx: TCtx) => Record<string, ISchema> | Promise<Record<string, ISchema>>)
आवश्यक: नहीं
विवरण: इवेंट के लिए यूज़र इंटरफ़ेस (UI) कॉन्फ़िगरेशन स्कीमा।

यह यूज़र इंटरफ़ेस (UI) में इवेंट के प्रदर्शन के तरीके और फ़ॉर्म कॉन्फ़िगरेशन को परिभाषित करता है।

उदाहरण:

uiSchema: {
  'x-component': 'Form',
  'x-component-props': {
    layout: 'vertical'
  },
  properties: {
    preventDefault: {
      type: 'boolean',
      title: 'Prevent Default',
      'x-component': 'Switch',
      'x-decorator': 'FormItem'
    },
    stopPropagation: {
      type: 'boolean',
      title: 'Stop Propagation',
      'x-component': 'Switch',
      'x-decorator': 'FormItem'
    },
    customData: {
      type: 'object',
      title: 'Custom Data',
      'x-component': 'Form',
      'x-decorator': 'FormItem',
      properties: {
        key: {
          type: 'string',
          title: 'Key',
          'x-component': 'Input'
        },
        value: {
          type: 'string',
          title: 'Value',
          'x-component': 'Input'
        }
      }
    }
  }
}

#beforeParamsSave

प्रकार: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
आवश्यक: नहीं
विवरण: पैरामीटर्स सहेजने से पहले निष्पादित होने वाला हुक फ़ंक्शन।

इवेंट पैरामीटर्स सहेजने से पहले निष्पादित होता है, जिसका उपयोग पैरामीटर सत्यापन (validation) या रूपांतरण (transformation) के लिए किया जा सकता है।

उदाहरण:

beforeParamsSave: (ctx, params, previousParams) => {
  // पैरामीटर सत्यापन
  if (!params.eventType) {
    throw new Error('Event type is required');
  }
  
  // पैरामीटर रूपांतरण
  params.eventType = params.eventType.toLowerCase();
  
  // परिवर्तनों को लॉग करें
  console.log('Event params changed:', {
    from: previousParams,
    to: params
  });
}

#afterParamsSave

प्रकार: (ctx: FlowSettingsContext<TModel>, params: any, previousParams: any) => void | Promise<void>
आवश्यक: नहीं
विवरण: पैरामीटर्स सहेजने के बाद निष्पादित होने वाला हुक फ़ंक्शन।

इवेंट पैरामीटर्स सहेजने के बाद निष्पादित होता है, जिसका उपयोग अन्य कार्रवाइयों (actions) को ट्रिगर करने के लिए किया जा सकता है।

उदाहरण:

afterParamsSave: (ctx, params, previousParams) => {
  // लॉग करें
  console.log('Event params saved:', params);
  
  // इवेंट ट्रिगर करें
  ctx.model.emitter.emit('eventConfigChanged', {
    eventName: 'clickEvent',
    params,
    previousParams
  });
  
  // कैश अपडेट करें
  ctx.model.updateCache('eventConfig', params);
}

#uiMode

प्रकार: StepUIMode | ((ctx: FlowRuntimeContext<TModel>) => StepUIMode | Promise<StepUIMode>)
आवश्यक: नहीं
विवरण: इवेंट के लिए यूज़र इंटरफ़ेस (UI) प्रदर्शन मोड।

यह नियंत्रित करता है कि इवेंट यूज़र इंटरफ़ेस (UI) में कैसे प्रदर्शित होता है।

समर्थित मोड:

  • 'dialog' - डायलॉग मोड
  • 'drawer' - ड्रॉअर मोड
  • 'embed' - एम्बेड मोड
  • या एक कस्टम कॉन्फ़िगरेशन ऑब्जेक्ट

उदाहरण:

// सरल मोड
uiMode: 'dialog'

// कस्टम कॉन्फ़िगरेशन
uiMode: {
  type: 'dialog',
  props: {
    width: 600,
    title: 'Event Configuration'
  }
}

// गतिशील मोड
uiMode: (ctx) => {
  return ctx.model.isMobile ? 'drawer' : 'dialog';
}

#अंतर्निहित इवेंट प्रकार

FlowEngine में निम्नलिखित सामान्य इवेंट प्रकार (types) अंतर्निहित (built-in) हैं:

  • 'click' - क्लिक इवेंट
  • 'submit' - सबमिट इवेंट
  • 'reset' - रीसेट इवेंट
  • 'remove' - हटाएँ इवेंट
  • 'openView' - व्यू खोलें इवेंट
  • 'dropdownOpen' - ड्रॉपडाउन खोलें इवेंट
  • 'popupScroll' - पॉपअप स्क्रॉल इवेंट
  • 'search' - खोज इवेंट
  • 'customRequest' - कस्टम अनुरोध इवेंट
  • 'collapseToggle' - कोलैप्स टॉगल इवेंट

#पूरा उदाहरण

class FormModel extends FlowModel {}

// फ़ॉर्म सबमिट इवेंट पंजीकृत करें
FormModel.registerEvent({
  name: 'formSubmitEvent',
  title: 'Form Submit Event',
  handler: async (ctx, params) => {
    const { formData, validation } = params;
    
    try {
      // फ़ॉर्म डेटा को मान्य करें
      if (validation && !validateFormData(formData)) {
        throw new Error('Form validation failed');
      }
      
      // फ़ॉर्म सबमिशन को प्रोसेस करें
      const result = await submitForm(formData);
      
      return {
        success: true,
        data: result,
        message: 'Form submitted successfully'
      };
    } catch (error) {
      return {
        success: false,
        error: error.message
      };
    }
  },
  defaultParams: {
    validation: true,
    preventDefault: true,
    stopPropagation: false
  },
  uiSchema: {
    'x-component': 'Form',
    properties: {
      validation: {
        type: 'boolean',
        title: 'Enable Validation',
        'x-component': 'Switch',
        'x-decorator': 'FormItem',
        default: true
      },
      preventDefault: {
        type: 'boolean',
        title: 'Prevent Default',
        'x-component': 'Switch',
        'x-decorator': 'FormItem',
        default: true
      },
      stopPropagation: {
        type: 'boolean',
        title: 'Stop Propagation',
        'x-component': 'Switch',
        'x-decorator': 'FormItem',
        default: false
      },
      customHandlers: {
        type: 'array',
        title: 'Custom Handlers',
        'x-component': 'ArrayItems',
        'x-decorator': 'FormItem',
        items: {
          type: 'object',
          properties: {
            name: {
              type: 'string',
              title: 'Handler Name',
              'x-component': 'Input'
            },
            enabled: {
              type: 'boolean',
              title: 'Enabled',
              'x-component': 'Switch'
            }
          }
        }
      }
    }
  },
  beforeParamsSave: (ctx, params) => {
    if (params.validation && !params.formData) {
      throw new Error('Form data is required when validation is enabled');
    }
  },
  afterParamsSave: (ctx, params) => {
    ctx.model.emitter.emit('formEventConfigChanged', params);
  },
  uiMode: 'dialog'
});

// डेटा परिवर्तन इवेंट पंजीकृत करें
FormModel.registerEvent({
  name: 'dataChangeEvent',
  title: 'Data Change Event',
  handler: async (ctx, params) => {
    const { field, oldValue, newValue } = params;
    
    try {
      // डेटा परिवर्तन को लॉग करें
      await logDataChange({
        field,
        oldValue,
        newValue,
        timestamp: Date.now(),
        userId: ctx.model.uid
      });
      
      // संबंधित कार्रवाइयों (actions) को ट्रिगर करें
      ctx.model.emitter.emit('dataChanged', {
        field,
        oldValue,
        newValue
      });
      
      return {
        success: true,
        message: 'Data change logged successfully'
      };
    } catch (error) {
      return {
        success: false,
        error: error.message
      };
    }
  },
  defaultParams: (ctx) => ({
    logLevel: 'info',
    notify: true,
    timestamp: Date.now()
  }),
  uiMode: 'embed'
});

// वर्कफ़्लो (flow) में इवेंट्स का उपयोग करना
FormModel.registerFlow({
  key: 'formProcessing',
  title: 'Form Processing',
  on: 'formSubmitEvent',
  steps: {
    validate: {
      use: 'validateFormAction',
      title: 'Validate Form',
      sort: 0
    },
    process: {
      use: 'processFormAction',
      title: 'Process Form',
      sort: 1
    },
    save: {
      use: 'saveFormAction',
      title: 'Save Form',
      sort: 2
    }
  }
});