Merge pull request #116 from kgoo124/localization-signals

Localization for signals example

Author: jtpio

basics/signals/README.md

@@ -21,7 +21,7 @@ JupyterLab's Lumino engine uses the `ISignal` interface and the
 
 The basic concept is as follows:
 
-First, a widget (`button.ts`), in this case the one that contains
+First, a widget (`button.tsx`), in this case the one that contains
 some visual elements such as a button, defines a `_stateChanged` signal:
 
 ```ts
@@ -44,7 +44,7 @@ Another widget, in this case the panel (`panel.ts`) that boxes several different
 subscribes to the `stateChanged` signal and links some function to it:
 
 ```ts
-// src/panel.ts#L22-L22
+// src/panel.ts#L29-L29
 
 this._widget.stateChanged.connect(this._logMessage, this);
 ```
@@ -141,13 +141,14 @@ The `panel.ts` class defines an extension panel that displays the
 This is done in the constructor.
 
 ```ts
-// src/panel.ts#L13-L23
+// src/panel.ts#L19-L30
 
-constructor() {
   super();
+  this._translator = translator || nullTranslator;
+  this._trans = this._translator.load('jupyterlab');
   this.addClass(PANEL_CLASS);
   this.id = 'SignalExamplePanel';
-  this.title.label = 'Signal Example View';
+  this.title.label = this._trans.__('Signal Example View');
   this.title.closable = true;
 
   this._widget = new ButtonWidget();
@@ -160,7 +161,7 @@ Subscription to a signal is done using the `connect` method of the
 `stateChanged` attribute.
 
 ```ts
-// src/panel.ts#L22-L22
+// src/panel.ts#L29-L29
 
 this._widget.stateChanged.connect(this._logMessage, this);
 ```
@@ -178,7 +179,7 @@ The `_logMessage` function receives as parameters the emitter (of type `ButtonWi
 and the count (of type `ICount`) sent by the signal emitter.
 
 ```ts
-// src/panel.ts#L25-L25
+// src/panel.ts#L32-L32
 
 private _logMessage(emitter: ButtonWidget, count: ICount): void {
 ```
@@ -187,7 +188,7 @@ In our case, that function writes `Button has been clicked ... times.` text
 to the browser console and in an alert when the big red button is clicked.
 
 ```ts
-// src/panel.ts#L25-L29
+// src/panel.ts#L32-L36
 
 private _logMessage(emitter: ButtonWidget, count: ICount): void {
   console.log('Hey, a Signal has been received from', emitter);

basics/signals/package.json

@@ -42,9 +42,10 @@
     "watch:src": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "~3.0.0-beta.4",
-    "@jupyterlab/launcher": "~3.0.0-beta.4",
-    "@jupyterlab/mainmenu": "~3.0.0-beta.4",
+    "@jupyterlab/application": "~3.0.0-beta.8",
+    "@jupyterlab/launcher": "~3.0.0-beta.8",
+    "@jupyterlab/mainmenu": "~3.0.0-beta.8",
+    "@jupyterlab/translation": "^3.0.0-beta.8",
     "@lumino/algorithm": "^1.3.3",
     "@lumino/coreutils": "^1.5.3",
     "@lumino/datagrid": "^0.3.1",
@@ -71,4 +72,4 @@
     "extension": true,
     "outputDir": "jupyterlab_examples_signals/static"
   }
-}
+}

basics/signals/src/index.ts

@@ -9,6 +9,8 @@ import { ILauncher } from '@jupyterlab/launcher';
 
 import { IMainMenu } from '@jupyterlab/mainmenu';
 
+import { ITranslator } from '@jupyterlab/translation';
+
 import { Menu } from '@lumino/widgets';
 
 import { SignalExamplePanel } from './panel';
@@ -27,8 +29,8 @@ const extension: JupyterFrontEndPlugin<void> = {
   id: 'signals',
   autoStart: true,
   optional: [ILauncher],
-  requires: [ICommandPalette, IMainMenu],
-  activate: activate
+  requires: [ICommandPalette, IMainMenu, ITranslator],
+  activate
 };
 
 /**
@@ -37,17 +39,20 @@ const extension: JupyterFrontEndPlugin<void> = {
  * @param app Jupyter Font End
  * @param palette Jupyter Commands Palette
  * @param mainMenu Jupyter Menu
+ * @param translator Jupyter Translator
  * @param launcher [optional] Jupyter Launcher
  */
 function activate(
   app: JupyterFrontEnd,
   palette: ICommandPalette,
   mainMenu: IMainMenu,
+  translator: ITranslator,
   launcher: ILauncher | null
 ): void {
   const manager = app.serviceManager;
   const { commands, shell } = app;
   const category = 'Extension Examples';
+  const trans = translator.load('jupyterlab');
 
   // Add launcher
   if (launcher) {
@@ -65,21 +70,21 @@ function activate(
   function createPanel(): Promise<SignalExamplePanel> {
     let panel: SignalExamplePanel;
     return manager.ready.then(() => {
-      panel = new SignalExamplePanel();
+      panel = new SignalExamplePanel(translator);
       shell.add(panel, 'main');
       return panel;
     });
   }
 
   // Add menu tab
   const signalMenu = new Menu({ commands });
-  signalMenu.title.label = 'Signal Example';
+  signalMenu.title.label = trans.__('Signal Example');
   mainMenu.addMenu(signalMenu);
 
   // Add commands to registry
   commands.addCommand(CommandIDs.create, {
-    label: 'Open the Signal Example Panel',
-    caption: 'Open the Signal Example Panel',
+    label: trans.__('Open the Signal Example Panel'),
+    caption: trans.__('Open the Signal Example Panel'),
     execute: createPanel
   });
 

basics/signals/src/panel.ts

@@ -1,3 +1,8 @@
+import {
+  ITranslator,
+  nullTranslator,
+  TranslationBundle
+} from '@jupyterlab/translation';
 import { StackedPanel } from '@lumino/widgets';
 
 import { ButtonWidget, ICount } from './button';
@@ -10,11 +15,13 @@ const PANEL_CLASS = 'jp-tutorial-view';
  * A panel which contains a console and the ability to add other children.
  */
 export class SignalExamplePanel extends StackedPanel {
-  constructor() {
+  constructor(translator?: ITranslator) {
     super();
+    this._translator = translator || nullTranslator;
+    this._trans = this._translator.load('jupyterlab');
     this.addClass(PANEL_CLASS);
     this.id = 'SignalExamplePanel';
-    this.title.label = 'Signal Example View';
+    this.title.label = this._trans.__('Signal Example View');
     this.title.closable = true;
 
     this._widget = new ButtonWidget();
@@ -33,4 +40,7 @@ export class SignalExamplePanel extends StackedPanel {
   }
 
   private _widget: ButtonWidget;
+
+  private _translator: ITranslator;
+  private _trans: TranslationBundle;
 }