Zum Hauptinhalt springen

Custom-Komponenten

Custom-Komponenten bieten maximale Flexibilität und Kontrolle über Ihre brokerize-Integration. Im Gegensatz zur Haupt-Komponente ermöglichen Custom-Komponenten Ihnen, genau die Benutzeroberfläche zu erstellen, die Sie benötigen, indem Sie einzelne brokerize-Komponenten separat verwenden.

Wann Custom-Komponenten wählen​

Custom-Komponenten sind ideal, wenn Sie benötigen:

  • Benutzerdefinierte Layouts - Spezifische Positionierung und Anordnung von UI-Elementen
  • Selektive Funktionalität - Nur bestimmte brokerize-Features in Ihrer Anwendung
  • Erweiterte Integration - Tiefe Integration mit bestehenden UI-Frameworks oder Design-Systemen
  • Benutzerdefinierte Benutzerführung - Vollständige Kontrolle über die Benutzerreise und Navigation
  • Granulare Kontrolle - Feinabstimmung des Verhaltens und Stylings einzelner Komponenten

Voraussetzungen​

Installation​

npm install @brokerize/elements @brokerize/client

Brokerize Client einrichten​

Erstellen Sie zunächst eine brokerize Client-Instanz:

import { Brokerize } from '@brokerize/client';

const brokerizeClient = new Brokerize({
    basePath: 'https://api-preview.brokerize.com', // Preview-Umgebung verwenden
    clientId: '<YOUR-API-CLIENT-ID>',
    fetch: globalThis.fetch.bind(globalThis),
    createAbortController: () => new AbortController(),
    createWebSocket: (url, protocol) => new WebSocket(url, protocol)
});

API-Kontext erstellen​

const user = await brokerizeClient.createGuestUser();
const apiCtx = brokerizeClient.createAuthorizedContext(user);

Verfügbare Custom-Komponenten​

Broker-Liste Komponente​

Zeigen Sie eine Liste verfügbarer Broker mit benutzerdefinierter Behandlung an:

import { createBrokerList } from '@brokerize/elements';

createBrokerList({
    authorizedApiContext: apiCtx,
    theme: theme,
    addFrame: addFrame,
    renderTo: document.getElementById('broker-list-container'),
    onLogin({ brokerName }) {
        // Benutzerdefinierte Login-Behandlung
        // Zeige benutzerdefinierte Login-UI oder leite zu Ihrem Login-Flow weiter
        showCustomLoginModal(brokerName);
    },
    openExternalLink: (url) => {
        // Benutzerdefinierte externe Link-Behandlung
        window.open(url, '_blank');
    }
});

Overview-Komponente​

Implementieren Sie benutzerdefinierte Overview-Funktionalität:

import { createOverview } from '@brokerize/elements';

createOverview({
    theme,
    renderTo: resetRenderTo(),
    authorizedApiContext: globalApiCtx,
    onNavigate(portfolio) {
        /* navigate to the selected portfolio view, e.g. by calling `createPortfolioView(...)` */
        // showPortfolioView(portfolio.id);
    },
    onLogin({ brokerName }) {
        /* open the broker login for the given brokerName. */
        // createBrokerLoginForm(...) // function from @brokerize/elements
    }
});

Broker-Login-Komponente​

Implementieren Sie Broker-Login-Funktionalität:

import { createBrokerLoginForm } from '@brokerize/elements';

createBrokerLoginForm({
    authorizedApiContext,
    theme,
    addFrame,
    renderTo,
    brokerName,
    performOAuthRedirect({ url }) {
        /*
           if the broker login is implemented using OAuth redirects,
           this callback will be called with the URL to redirect to.
           After login, the client will redirect back to the configurated application URL.

           After that redirect, the client application must use `confirmOAuth` to confirm
           the session.
        */
    },
    onExit: ({ loggedIn }) => {
        /* application can handle a successful broker login (e.g. show a SessionsTable or PortfolioTable) */
    },
    openExternalLink
});

Custom-Komponenten Workflow​

1. Komponenten-Initialisierung​

Richten Sie Ihren brokerize Client und API-Kontext ein, wie im Voraussetzungen-Abschnitt gezeigt.

2. Einzelne Komponenten erstellen​

Verwenden Sie die entsprechenden Factory-Funktionen, um nur die Komponenten zu erstellen, die Sie benötigen:

// Erstelle mehrere Komponenten für ein benutzerdefiniertes Layout
const brokerList = createBrokerList({ /* config */ });
const overview = createOverview({ /* config */ });
const brokerlogin = createBrokerLoginForm({ /* config */ });

3. Komponenten-Interaktionen behandeln​

Implementieren Sie benutzerdefinierte Logik für Komponenten-Interaktionen durch Callbacks:

createBrokerList({
    // ... andere Konfiguration
    onLogin({ brokerName }) {
        // Verstecke Broker-Liste, zeige Login-Formular
        hideBrokerList();
        showLoginForm(brokerName);
    }
});

4. Komponenten-Lebenszyklus verwalten​

Kontrollieren Sie, wann Komponenten erstellt, aktualisiert und zerstört werden:

class TradingApp {
    private components = new Map();

    showBrokerSelection() {
        const brokerList = createBrokerList({
            // ... Konfiguration
            onLogin: (data) => this.handleBrokerLogin(data)
        });
        this.components.set('brokerList', brokerList);
    }

    handleBrokerLogin(data) {
        // Räume Broker-Liste auf
        this.components.get('brokerList')?.destroy();
        this.components.delete('brokerList');

        // Zeige Portfolio
        this.showPortfolio();
    }
}

5. Benutzerdefiniertes Routing implementieren​

Behandeln Sie Navigation zwischen verschiedenen Ansichten:

class Router {
    navigate(route, params = {}) {
        switch(route) {
            case 'brokers':
                this.showBrokerList();
                break;
            case 'portfolio':
                this.showOverview(params.brokerId);
                break;
            case 'trade':
                this.showBrokerLoginForm(params.brokerId);
                break;
        }
    }
}

Theming von Custom-Komponenten​

Custom-Komponenten verwenden das gleiche Theming-System wie die Haupt-Komponente:

const theme = {
    layout: 'columns',
    logoStyle: 'light',
    tokens: {
        'zl-primary-color': '#3870db',
        'zl-primary-bg-color': 'white',
        'zl-secondary-bg-color': 'var(--zl-color-gray-lighter)',
        'zl-outline-color': 'var(--zl-color-primary-light)',
        'zl-default-text-color': 'var(--zl-color-gray-darkest)',
        'zl-success-color': '#3db969',
        'zl-error-color': '#ff3e3e',
        // ... zusätzliche Theme-Token
    }
};

// Theme auf alle Komponenten anwenden
createBrokerList({ theme, /* ... */ });
createPortfolio({ theme, /* ... */ });

Im Artikel zum Theming gibt es mehr Informationen, Beispiele und eine Live Demo.

Erweiterte Integrationsmuster​

Zustandsverwaltung​

class BrokerizeStateManager {
    private state = {
        selectedBroker: null,
        portfolio: null,
        activeInstrument: null
    };

    private listeners = new Set();

    setState(updates) {
        this.state = { ...this.state, ...updates };
        this.notifyListeners();
    }

    subscribe(listener) {
        this.listeners.add(listener);
        return () => this.listeners.delete(listener);
    }

    private notifyListeners() {
        this.listeners.forEach(listener => listener(this.state));
    }
}

Bewährte Praktiken​

  1. Komponenten-Lebenszyklus-Management: Räumen Sie Komponenten immer auf, wenn sie nicht mehr benötigt werden, um Memory Leaks zu verhindern.

  2. Fehlerbehandlung: Implementieren Sie ordnungsgemäße Fehlerbehandlung für alle Komponenten-Interaktionen:

  3. Ladezustände: Bieten Sie Feedback wie zum Beispiel eigene Lade-Spinner, während der Komponenten-Initialisierung:

  4. Responsive Design: Stellen Sie sicher, dass Komponenten auf verschiedenen Bildschirmgrößen gut funktionieren, indem Sie entsprechende Themes und Layouts konfigurieren.

  5. Barrierefreiheit: Halten Sie Barrierefreheitsstandards ein, indem Sie Focus-Management und Tastaturnavigation zwischen Custom-Komponenten ordnungsgemäß behandeln.

Custom-Komponenten geben Ihnen die Macht, genau die Trading-Erfahrung zu schaffen, die Ihre Benutzer benötigen, mit vollständiger Kontrolle über jeden Aspekt der Oberfläche und des Benutzerflusses.