XCon Studio

Appearance

XCon Widget Core API Overview ​

In this document, you can find information about the core API and features of the XCon Widget Framework.

Main API Features ​

Registry and DOM Management ​

registry ​

Widget registry main access point. The central system where all widgets are registered and managed.

domManager ​

The system that manages DOM scanning and automatic widget initialization processes.

Widget Management Methods ​

registerWidget(selector, widgetClass, config, initMode) ​

Registers a new widget to the system.

javascript
XConWidgets.registerWidget('.my-widget', MyWidgetClass, {
  widgetName: 'MyWidget',
  template: '<div>Hello Widget!</div>'
});

activateWidget(widgetClass, context) ​

Activates a widget class with the specified context.

javascript
const widgetInstance = XConWidgets.activateWidget(MyWidgetClass, {
  container: document.getElementById('widget-container'),
  scope: {},
  width: 300,
  height: 200
});

Registry Query Methods ​

isRegistered(selector) ​

Checks whether the specified selector is registered.

javascript
if (XConWidgets.isRegistered('.my-widget')) {
  console.log('Widget is registered');
}

getWidgets() ​

Returns all registered widget selectors.

javascript
const selectors = XConWidgets.getWidgets();
console.log('Registered widgets:', selectors);

getRegisteredWidgets() ​

Returns detailed information of all registered widgets.

javascript
const widgets = XConWidgets.getRegisteredWidgets();
widgets.forEach(widget => {
  console.log(`Widget: ${widget.selector}, Class: ${widget.widgetClass.name}`);
});

getWidgetFactory(selector) ​

Gets the widget factory information for the specified selector.

javascript
const factory = XConWidgets.getWidgetFactory('.my-widget');
if (factory) {
  console.log('Widget configuration:', factory.config);
}

getWidgetConfig(selector) ​

Gets the configuration information of the specified widget.

javascript
const config = XConWidgets.getWidgetConfig('.my-widget');
console.log('Widget configuration:', config);

getRegisteredCount() ​

Returns the number of registered widgets.

javascript
const count = XConWidgets.getRegisteredCount();
console.log(`Total ${count} widgets registered`);

DOM Management Methods ​

initializeAllWidgets() ​

Initializes all registered widgets in the DOM.

javascript
// Initialize all widgets after page load
XConWidgets.initializeAllWidgets();

rescanDOM() ​

Rescans the DOM and finds newly added widgets.

javascript
// Rescan after dynamic content is added
XConWidgets.rescanDOM();

getWidgetInstance(element) ​

Gets the widget instance in the specified DOM element.

javascript
const element = document.querySelector('.my-widget');
const instance = XConWidgets.getWidgetInstance(element);
if (instance) {
  console.log('Widget instance found:', instance);
}

destroyWidget(element) ​

Destroys the widget in the specified DOM element.

javascript
const element = document.querySelector('.my-widget');
const destroyed = XConWidgets.destroyWidget(element);
if (destroyed) {
  console.log('Widget successfully destroyed');
}

setupAutoScan() ​

Automatically monitors DOM changes and initializes new widgets.

javascript
// Activate auto-scan feature
XConWidgets.setupAutoScan();

Usage Examples ​

Simple Widget Registration ​

javascript
// Register widget class
XConWidgets.registerWidget('.hello-widget', HelloWidget, {
  widgetName: 'HelloWidget',
  template: '<div>Hello {{name}}!</div>'
});

// Scan DOM and initialize widgets
XConWidgets.initializeAllWidgets();

Manual Widget Activation ​

javascript
// Manually activate widget
const context = {
  container: document.getElementById('my-container'),
  scope: { name: 'World' },
  width: 400,
  height: 300
};

const widget = XConWidgets.activateWidget(HelloWidget, context);

Checking Widget Status ​

javascript
// List registered widgets
const widgets = XConWidgets.getWidgets();
console.log('Registered widgets:', widgets);

// Check existence of a specific widget
if (XConWidgets.isRegistered('.my-widget')) {
  const config = XConWidgets.getWidgetConfig('.my-widget');
  console.log('Widget configuration:', config);
}

Dynamic Content Management ​

javascript
// Add new content
document.body.innerHTML += '<div class="new-widget"></div>';

// Rescan DOM
XConWidgets.rescanDOM();

// Activate auto-scan (only needs to be done once)
XConWidgets.setupAutoScan();

Global Access ​

This API is accessible through window.XConWidgets in the browser environment:

javascript
// Access through global object
console.log('XCon Widget Framework version:', XConWidgets.version);
console.log('Number of registered widgets:', XConWidgets.getRegisteredCount());