TX Text Control provides developers with a Resource Kit to customize its interface elements in languages other than English and German. While English and German are the default built-in languages and cannot be modified, other languages can be added using the satellite assembly mechanism, which is the preferred localization method in .NET. This article walks you through the process of building a satellite assembly using the Resource Kit to customize the language of the TX Text Control interface in the Angular Document Editor.

Building and Installing the Satellite Assembly

Follow these steps to build and install a satellite assembly to change the language to French (as an example) in the Angular Document Editor:

  1. Self-host your backend server and keep it running.

    Prerequisites

    For guidance on building a backend application using TX Text Control to host the Document Editor, refer to this article:

    Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer

    Host Backend Server

  1. Create your Angular application using the TX Text Control Document Editor.

    Learn More

    Use this reference as a guide:

    Getting Started: Document Editor with Angular CLI v17.0

  1. In your Angular project, update the webSocketURL attribute of the Document Editor component to match the URL of the backend application you created earlier.

    <tx-document-editor
    width="1000px"
    height="500px"
    webSocketURL="wss://localhost:7045/api/TXWebSocket">
    </tx-document-editor>
    view raw test.html hosted with ❤ by GitHub

    Ensure that wss is used if the backend is hosted over HTTPS and ws is used for HTTP.

  1. After building your Angular application, locate the Resource Kit directory. This directory is a subfolder within your TX Text Control .NET Server for ASP.NET main installation folder and contains all the necessary files:

    • TextControl.resx: An XML-based file that contains all built-in resources in a human-readable XML format. All parts of dialog boxes appear as strings.
    • buildres.bat: A command line batch file that calls the command line tools of the .NET Framework SDK necessary to build the satellite assembly.
    • txtextcontrol.public.snk: TX Text Control's public key file, which is also required to build the satellite assembly.

  1. Open the TextControl.resx file and translate the text resources found inside the value tags. For example, to test the French language, change the RibbonReportingTab name from Reporting to Rapports. After making changes, be sure to save the file. If prompted, grant admin permissions.

    Translate Text in Resource Kit

  1. Next, open your Developer Command Prompt for Visual Studio 2022, navigate to the Resource Kit directory, and call the buildres.bat batch file with the two-letter language code specified through ISO 639 as a parameter. To build the satellite assembly for French, enter buildres fr. This batch process generates all the necessary satellite assembly files in the Resource Kit.

    Build the Satellite Assembly

  1. In the TX Text Control .NET main installation directory, navigate to the Assembly subdirectory and create a new folder named fr for French. Then, copy all the .dll files from the Resource Kit directory into the newly created fr folder.

  1. Include both the uiCulture and culture attributes of the Document Editor component to French in your Angular project.

    <tx-document-editor
    width="1000px"
    height="500px"
    webSocketURL="wss://localhost:7045/api/TXWebSocket"
    uiCulture="fr-FR"
    culture="fr-FR">
    </tx-document-editor>
    view raw test.html hosted with ❤ by GitHub

    Learn More

    Refer to this blog article for a complete list of available attributes for the Angular Document Editor:

    Getting Started: Angular Document Editor Attributes Explained

  1. The satellite assembly for the French language has been successfully installed, and the Reporting ribbon tab has been updated to Rapports in French.

    Installed the Satellite Assembly

Conclusion

This tutorial demonstrated how to change the TX Text Control interface elements to a language other than English and German. This is achieved by building and installing satellite assemblies for the Angular Document Editor using the Resource Kit.