> ## Documentation Index
> Fetch the complete documentation index at: https://docs.abbyy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Erstellen einer Anwendung mit grafischer Benutzeroberfläche

> Erstellen Sie unter Windows mit Visual Components eine OCR-Anwendung mit ABBYY FineReader Engine und grafischer Benutzeroberfläche für Bildanzeige, Navigation und Verifizierung der Erkennung.

<Warning>
  Visual Components sind in FRE für Windows implementiert.
</Warning>

Beim Erstellen einer Anwendung mit Benutzeroberfläche können Sie die [Visual Components](/de/fine-reader/engine/visual-components-reference) von ABBYY FineReader Engine verwenden. Visual Components stellen sofort einsetzbare Bausteine bereit, mit denen Sie Ihre eigene Benutzeroberfläche für eine OCR-Anwendung erstellen können.

Sie können dem Benutzer Ihrer Anwendung die zu verarbeitenden Dokumente anzeigen, ihm ermöglichen, Erkennungsergebnisse zu verifizieren, und erkannten Text zu bearbeiten. Visual Components können in allen Verarbeitungsszenarien nützlich sein. So kann beispielsweise die Textbearbeitung im Szenario [Document Conversion](/de/fine-reader/engine/guided-tour/basic-usage-scenarios-implementation/document-conversion) bereitgestellt werden, während die Verifizierung im Szenario [Field-Level Recognition](/de/fine-reader/engine/guided-tour/basic-usage-scenarios-implementation/field-level-recognition) besonders nützlich ist.

Betrachten wir die einfache OCR-Anwendung aus der Sicht der Benutzeroberfläche. Ein Dokument durchläuft mehrere Verarbeitungsschritte:

1. Öffnen eines Bildes

Sie können dem Benutzer das geöffnete Bild anzeigen und ihm ermöglichen, zwischen den Seiten des verarbeiteten Dokuments zu navigieren.

2. Erkennung

Um Textdaten aus einem Dokument zu extrahieren, muss das Dokument erkannt werden. Sie können dem Benutzer den erkannten Text anzeigen und ihm ermöglichen, den Text zu bearbeiten.

3. Verifizierung

Der erkannte Text muss möglicherweise verifiziert werden. Sie können dem Benutzer sowohl das Quellbild als auch den erkannten Text anzeigen, damit beides miteinander verglichen werden kann.

4. Export

Das erkannte Dokument kann in einem geeigneten Speicherformat gespeichert oder in einer externen Anwendung geöffnet werden.

Im Folgenden finden Sie eine detaillierte Beschreibung zur Verwendung der ABBYY FineReader Engine Visual Components.

<Warning>
  Die Visual Components setzen Microsoft Windows Common Controls ab Version 6.0 voraus.
</Warning>

<Accordion title="Schritt 1. Hinzufügen von Visual Components zum Formular Ihrer Anwendung">
  Visual Studio ermöglicht es, ActiveX-Steuerelemente in Ihr Dialogfeld einzufügen. Sie können Visual Components zum Toolbox-Fenster hinzufügen (die Toolbox ist über das Menü View verfügbar) und mit ihnen arbeiten:

  1. Klicken Sie im Menü Tools auf Choose Toolbox Items (oder Add/Remove Toolbox Items).
  2. Klicken Sie im geöffneten Dialogfeld auf die Registerkarte COM Components und wählen Sie die Komponenten ABBYY DocumentViewer, ABBYY ImageViewer, ABBYY ZoomViewer, ABBYY TextEditor und ABBYY TextValidator aus.
  3. Klicken Sie auf OK. Symbole für die ausgewählten Elemente sind nun in der Toolbox verfügbar. Sie können jedes Symbol einer Visual Component per Drag-and-Drop auf eine Oberfläche in der Entwurfsansicht ziehen. Dadurch wird auch der grundlegende Code zum Erstellen einer Instanz der Visual Component in der aktiven Projektdatei hinzugefügt.
  4. Nachdem Sie die Visual Component zu einem Formular hinzugefügt haben, können Sie die in Visual Studio verfügbaren Eigenschaften festlegen. So sollte beispielsweise die Eigenschaft [SettingsPath](/de/fine-reader/engine/visual-components-reference/imageviewer#settingspath) jeder Komponente zur Entwurfszeit angegeben werden.

  <Note>
    Der Visual-Studio-Designer unterstützt keine 64-Bit-ActiveX-Steuerelemente. Daher können Sie keine 64-Bit-Visual Components zu einer Windows-Forms-Anwendung hinzufügen. Dies ist ein bekanntes Verhalten; ähnliche Probleme sind für Microsoft-ActiveX-Steuerelemente beschrieben, z. B. unter [http://support.microsoft.com/kb/980533/en-us](http://support.microsoft.com/kb/980533/en-us). Um dieses Problem zu umgehen, installiert FineReader Engine sowohl 32-Bit- als auch 64-Bit-Visual Components, wenn Sie auf einem 64-Bit-System bei der Entwicklerinstallation Visual Components auswählen. In diesem Fall können Sie im Visual-Studio-Designer mit der 32-Bit-Version der Komponenten arbeiten. Eine 64-Bit-Anwendung, die Visual Components verwendet, benötigt keine installierten 32-Bit-Visual Components.
  </Note>
</Accordion>

<Accordion title="Schritt 2. Synchronisieren von Visual Components">
  Mit der Komponente Component Synchronizer können Sie Visual Components in der Anwendung synchronisieren. Das bedeutet, dass alle Anzeige- und Bearbeitungsvorgänge in allen verbundenen Komponenten synchron verarbeitet werden. So synchronisieren Sie Visual Components:

  1. Erstellen Sie beim Laden des Formulars ein neues Objekt [ComponentSynchronizer](/de/fine-reader/engine/visual-components-reference/supplementary-objects/componentsynchronizer).
  2. Verwenden Sie die Eigenschaften DocumentViewer, ImageViewer, ZoomViewer, TextEditor und TextValidator des Objekts ComponentSynchronizer, um die Komponenten mit dem Synchronizer zu verbinden.

  Wenn eine Komponente über die API mit dem Synchronizer verbunden wird, arbeitet Component Synchronizer wie unter [How Component Synchronizer Works](/de/fine-reader/engine/guided-tour/advanced-techniques/using-gui-elements/how-component-synchronizer-works) beschrieben.

  ### C\#

  ```csharp theme={null}
  private void VisualComponentsForm_Load(object sender, System.EventArgs e)
  {
   // Komponenten mit dem Synchronizer verbinden
   Synchronizer = new FineReaderVisualComponents.ComponentSynchronizerClass();
   Synchronizer.DocumentViewer = ( FineReaderVisualComponents.DocumentViewer ) documentViewer.GetOcx();
   Synchronizer.ImageViewer = ( FineReaderVisualComponents.ImageViewer ) imageViewer.GetOcx();
   Synchronizer.ZoomViewer = ( FineReaderVisualComponents.ZoomViewer ) zoomViewer.GetOcx();
   Synchronizer.TextEditor = ( FineReaderVisualComponents.TextEditor ) textEditor.GetOcx();
  }
  ```
</Accordion>

<Accordion title="Schritt 3. Laden von ABBYY FineReader Engine">
  Um mit ABBYY FineReader Engine zu arbeiten, müssen Sie das Objekt [Engine](/de/fine-reader/engine/api-reference/engine-object-iengine-interface) erstellen. Zum Erstellen des Engine-Objekts können Sie die exportierte Funktion [InitializeEngine](/de/fine-reader/engine/api-reference/functions/initializeengine-function) verwenden. Siehe auch [other ways to load Engine object](/de/fine-reader/engine/guided-tour/advanced-techniques/programming-aspects/different-ways-to-load-engine). Sie können das Engine-Objekt beim Laden des Bildes oder bei der Initialisierung des Formulars laden.

  ### C\#

  ```csharp theme={null}
  [DllImport( "FREngine.dll", CharSet=CharSet.Unicode ), PreserveSig]
  private static extern int InitializeEngine(
   String customerProjectID,
   String licensePath,
   String licensePassword,
   String FREngineDataFolder,
   String FREngineTempFolder,
   Bool lsSharedCPUCoresMode,
   ref FREngine.IEngine engine );
  private void loadEngine()
  {
   int hresult = InitializeEngine( "<CustomerProjectID>",
   "<licensePath>",
   "<licensePassword>",
   "<FREngineDataFolder>",
   "<FREngineTempFolder>",
   false,
   ref Engine );
   Marshal.ThrowExceptionForHR( hresult );
  }
  ```
</Accordion>

<Accordion title="Schritt 4. Öffnen eines Bildes">
  Um das Bild in den Visual Components anzuzeigen, müssen Sie es öffnen. Dazu können Sie das folgende Verfahren zum Öffnen eines Bildes implementieren:

  1. Um Bilder für ein einzelnes Dokument zu laden, sollten Sie das Objekt [FRDocument](/de/fine-reader/engine/api-reference/document-related-objects/frdocument) erstellen und ihm Bilder hinzufügen. Dazu können Sie eine der folgenden Möglichkeiten verwenden:
     * Erstellen Sie das Objekt FRDocument mit der Methode [CreateFRDocumentFromImage](/de/fine-reader/engine/api-reference/engine-object-iengine-interface/creation-methods/createfrdocumentfromimage-method) des Engine-Objekts. Diese Methode erstellt das Objekt FRDocument und lädt Bilder aus der angegebenen Datei.
     * Erstellen Sie das Objekt FRDocument mithilfe der Methode [CreateFRDocument](/de/fine-reader/engine/api-reference/engine-object-iengine-interface/creation-methods/createlessobjectgreater-methods) des Engine-Objekts und fügen Sie dann Bilder aus der Datei zum erstellten Objekt FRDocument hinzu (verwenden Sie dazu die Methoden [AddImageFile](/de/fine-reader/engine/api-reference/document-related-objects/frdocument/addimagefile-method), [AddImageFileWithPassword](/de/fine-reader/engine/api-reference/document-related-objects/frdocument/addimagefilewithpassword-method) oder [AddImageFileWithPasswordCallback](/de/fine-reader/engine/api-reference/document-related-objects/frdocument/addimagefilewithpasswordcallback-method) des Objekts FRDocument).
  2. Verbinden Sie das Dokument über die Eigenschaft Document des Objekts [ComponentSynchronizer](/de/fine-reader/engine/visual-components-reference/supplementary-objects/componentsynchronizer) mit dem Component Synchronizer.

  Dieses Verfahren kann das „OnClick“-Ereignis einer Schaltfläche verarbeiten, mit der Bilder geöffnet werden.

  ### C\#

  ```csharp theme={null}
  private void openImage( string imageFileName )
  {
   // ABBYY FineReader Engine laden
   if( Engine == null )
   {
    loadEngine();
    Engine.ParentWindow = this.Handle.ToInt32();
    Engine.ApplicationTitle = this.Text;
   }
   // Bild öffnen
   Document = Engine.CreateFRDocumentFromImage( imageFileName, null );
   // Bild über den Synchronizer mit den Visual Components verbinden
   Synchronizer.Document = Document;
  }
  ```
</Accordion>

<Accordion title="Schritt 5. Dokumente erkennen">
  Die Erkennung eines Bildes in Visual Components kann entweder über die in den Komponenten verfügbaren Befehle oder über die FineReader Engine API aufgerufen werden (siehe zum Beispiel die Methode [Process](/de/fine-reader/engine/api-reference/document-related-objects/frdocument/process-method) des Objekts FRDocument).

  Sie können für die Erkennung das folgende Verfahren implementieren:

  1. Erkennen Sie das Dokument mit den Methoden des Objekts FRDocument.
  2. Das Dokument wurde nicht über die GUI von Visual Components geändert, daher müssen Sie die Änderungen an Visual Components übermitteln. Verwenden Sie dazu für jede Seite im Dokument die Methode [Update](/de/fine-reader/engine/api-reference/document-related-objects/frpage/update-method) des Objekts [FRPage](/de/fine-reader/engine/api-reference/document-related-objects/frpage).

  Das Verfahren kann das Ereignis „on click“ für eine Schaltfläche behandeln, die die Erkennung aufruft.

  ### C\#

  ```csharp theme={null}
  private void recognizeDocument()
  {
   // Gesamtes Dokument erkennen und synthetisieren
   Document.Process( Synchronizer.ProcessingParams );
   // Änderungen an Visual Components übermitteln
   for( int i = 0; i < Document.Pages.Count; i++ )
   {
    Document.Pages[i].Update();
   }
  }
  ```
</Accordion>

<Accordion title="Schritt 6. Erkennungsergebnisse verifizieren">
  Die erkannten Daten können mit der Komponente Text Validator verifiziert werden. Sie stellt eine Benutzeroberfläche bereit, mit der Sie prüfen können, ob ein Zeichen korrekt erkannt wurde, und es bei Bedarf korrigieren können.

  Sie können für die Verifizierung das folgende Verfahren implementieren:

  1. Fügen Sie die Komponente Text Validator zum aktuellen Formular hinzu oder erstellen Sie dafür ein neues Formular.
  2. Verbinden Sie die Komponente Text Validator mit dem Component Synchronizer. Verwenden Sie dazu die Eigenschaft TextValidator des Objekts [ComponentSynchronizer](/de/fine-reader/engine/visual-components-reference/supplementary-objects/componentsynchronizer).
  3. Starten Sie den Verifizierungsprozess mit der Methode [Spell](/de/fine-reader/engine/visual-components-reference/textvalidator/spell-method) des Objekts [TextValidator](/de/fine-reader/engine/visual-components-reference/textvalidator).

  ### C\#

  ```csharp theme={null}
  private void validateButton_Click(object sender, System.EventArgs e)
  {
   if( validatorForm == null )
   {
    // Neues Formular für die Verifizierung erstellen
    validatorForm = new ValidatorForm();
    validatorForm.Owner = this;
    // Validator mit dem Synchronizer verbinden
    Synchronizer.TextValidator = ( FineReaderVisualComponents.TextValidator ) validatorForm.TextValidator.GetOcx();
    validatorForm.Show();
    // Erkannten Text im verbundenen Dokument verifizieren
    validatorForm.TextValidator.Spell( null );
   }
  }
  ```
</Accordion>

<Accordion title="Schritt 7. Ergebnisse exportieren">
  Das erkannte Dokument kann entweder mit den im [Document Viewer](/de/fine-reader/engine/visual-components-reference/documentviewer/document-viewer-commands) verfügbaren Befehlen oder mit der FineReader Engine API gespeichert werden.

  Verwenden Sie zum Beispiel die Methode [Export](/de/fine-reader/engine/api-reference/document-related-objects/frdocument/export-method) des Objekts FRDocument, indem Sie die Konstante [FileExportFormatEnum](/de/fine-reader/engine/api-reference/enumerations/fileexportformatenum) als einen der Parameter angeben. Nachdem Sie Ihre Arbeit mit dem Objekt FRDocument abgeschlossen haben, geben Sie alle von diesem Objekt verwendeten Ressourcen frei. Verwenden Sie dazu die Methode [IFRDocument::Close](/de/fine-reader/engine/api-reference/document-related-objects/frdocument/close-method). Das Verfahren kann das Ereignis „on click“ für eine Schaltfläche behandeln, die den Export aufruft.

  ### C\#

  ```csharp theme={null}
  // Ein erkanntes Dokument als RTF speichern
  Document.Export( "<File name>", FREngine.FileExportFormatEnum.FEF_RTF, null );
  // Das FRDocument-Objekt freigeben
  Document.Close();
  ```
</Accordion>

<Accordion title="Schritt 8. ABBYY FineReader Engine entladen">
  Nachdem Sie Ihre Arbeit mit ABBYY FineReader Engine abgeschlossen haben, müssen Sie das Objekt [Engine](/de/fine-reader/engine/api-reference/engine-object-iengine-interface) entladen. Verwenden Sie dazu die exportierte Funktion [DeinitializeEngine](/de/fine-reader/engine/api-reference/functions/deinitializeengine-function).

  <Note>
    Wir empfehlen, den Component Synchronizer vor der Deinitialisierung von Engine freizugeben.
  </Note>

  Das Verfahren kann das Ereignis „on click“ für eine Schaltfläche behandeln, die das Anwendungsfenster schließt.

  ### C\#

  ```csharp theme={null}
  [DllImport( "FREngine.dll", CharSet=CharSet.Unicode ), PreserveSig]
  private static extern int DeinitializeEngine();
  private void unloadEngine()
  {
   if( Engine != null )
   {// Wenn Engine geladen wurde, entladen
    Engine = null;
    int hresult = DeinitializeEngine();
    Marshal.ThrowExceptionForHR( hresult );
   }
  }
  ```
</Accordion>

Ein Beispiel für die Implementierung des beschriebenen Verfahrens finden Sie im Beispiel [VisualComponents](/de/fine-reader/engine/guided-tour/samples#visualcomponents).

<div id="see-also">
  ## Siehe auch
</div>

[Anpassen von Kontextmenü und Symbolleiste einer Visual Component](/de/fine-reader/engine/guided-tour/advanced-techniques/using-gui-elements/customizing-the-context-menu-and-toolbar-of-a-visual-component)
