Import translations from another project

Introduction

This tutorial shows how to import the translations of project strings from another project, using OPC UA communication. The translations are displayed at runtime based on the user locale.

The server project contains the user interface and the translations. The client project has no user interface and at runtime connects to the server to import the user interface and translations from the server to show to the user, based on their locale.

Note

the procedure refers to projects with it-IT locale (Locale property of the project root node).

To create the access page in the client project, a predefined Q Studio widget is used, which sets its user interface and the basic mechanisms.

Download the example projects from here.

Steps

  1. Create server and client projects

  2. Server: configure the user interface and the translations

  3. Client: configure the users and prepare the user interface

  4. Client: configure import

  5. Check operation

Create server and client projects

  1. Create a new standard project named ServerProject. The project already contains an OPC UA server object, which displays all the project nodes if there are no specific settings.

  2. Create another new standard project called ClientProject*.

    Hint

    before proceeding, remove the OPC UA Server object in the OPC UA project folder as it is not needed for this tutorial.

Server: configure the user interface and the translations

  1. Create a Panels folder in the UI folder. In it, create a Panel1 panel.

  2. In MainWindow, create a Label1 label (New > Basic controls > Label) and in its Text property, enter the string “Hello world!”.

  3. Open the TranslationTable1 LocalizationDictionary, click Display translation references and synchronize the text of the Label1 label.

  4. Click Display Translations table and enter the Italian translation “Ciao mondo!”.

  5. In MainWindow, create a Dynamic panel object called ServerPanelLoader. In its Panel* property, select **Panel1.

  6. (Optional) In MainWindow, create a Label2 label that displays the session user locale. To do this, in the Text property, set a dynamic link with {Session}/Session/User/User/LocaleIds.

  7. (Optional) To verify that the label text changes based on the current user, perform the steps that follow:

    1. Create a ServerUsers folder in the Users folder. In it, create two users, Alice and Bob with it-IT and en-US locale, respectively.

    2. In the UI folder, create a Popup object (New > Containers > Popup) called LoginPopup.

    3. Open the template library and drag the Access module widget in the LoginPopup* object. In the LoginForm1 object that it contains, set the Users alias to point to the UsersServer folder.

    4. In the MainWindow object, create a Button with panel object (New > Containers > Button with panel) called LoginPopupButton. In its Panel properties, select the LoginPopup object.

    5. Execute the project to verify that the label text changes based on the current user.

Client: configure the users and prepare the user interface

  1. Create a UsersClient folder in the Users folder. In it, create two users, Alice and Bob with it-IT and en-US locale, respectively.

  2. In the UI folder, create a Popup object (New > Containers > Popup) called LoginPopup.

  3. Open the template library and drag the Access module widget in the LoginPopup* object. In the LoginForm1 object that it contains, set the Users alias to point to the ClientUsers folder.

  4. In the MainWindow object, create a Button with panel object (New > Containers > Button with panel) called LoginPopupButton. In its Panel properties, select the LoginPopup object.

  5. In MainWindow, create a Dynamic panel object called ClientPanelLoader to display the imported panel content at runtime.

  6. In MainWindow, create a runtime NetLogic with the following code in the Start() method. NetLogic initializes the ClientPanelLoader dynamic panel with the panel imported from the server:

    public override void Start()
    {
        var importedPanel = Project.Current.Get("UI/Panels/Panel1");
        if (importedPanel == null)
        {
            Log.Error("Could not find remote panel");
            return;
        }
    
        var mainWindowPanelLoader = LogicObject.Owner.Get<PanelLoader>("ClientPanelLoader");
    
        //Change panel to the imported remote panel mainWindowPanelLoader.ChangePanel(importedPanel.NodeId, NodeId.Empty);
    }
    

Client: configure import

  1. Create a Client OPC UA object in the OPC UA folder (New > OPC UA Client): the ClientOpcUa1 object is created.

  2. In the Endpoint URL server property of ClientOpcUa1, enter the endpoint of the OPC UA Server object present in the server project.

  3. In the ClientOpcUa1 properties, add two runtime configurations (see Configure the import of the nodes at runtime).

  4. Set the properties of the first runtime configuration to import the user interface:

    • Local destination node: ClientProject/UI

    • Remote source node: /Objects/ServerProject/UI/Panels, i.e. the path for the Panels folder on the server at runtime

    • Content synchronization mode: Only import

    • Include remote source node: True

  5. Set the properties of the second runtime configuration to import the translations:

    • Local destination node: ClientProject/Translations

    • Remote source node: /Objects/ServerProject/Translations, i.e. the path for the Translations folder on the server at runtime

    • Content synchronization mode: Only import

    • Include remote source node: False

Check operation

Start, in order, the server project and the client project to verify that the translations have been imported correctly into the client project and that they are displayed according to the session user locale.