Skip to content

Commit 60bc0ff

Browse files
arman-boyakhchyanarman-boyakhchyan
authored
SpeechToText: Add API descriptions (#8048)
1 parent 510254f commit 60bc0ff

44 files changed

Lines changed: 564 additions & 101 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/Configuration.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
---
22
##### shortDescription
3-
<!-- Description goes here -->
3+
A configuration object for the SpeechToText UI component.
44

55
---
6+
#####See Also#####
7+
#include common-link-configurewidget

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/customSpeechRecognizer.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
---
22
id: dxSpeechToText.Options.customSpeechRecognizer
33
type: CustomSpeechRecognizer
4+
inheritsType: CustomSpeechRecognizer
45
---
56
---
67
##### shortDescription
7-
<!-- Description goes here -->
8+
Allows you to implement custom speech recognition engines.
89

910
---
10-
<!-- Description goes here -->
11+
If you want to integrate a custom speech recognition engine, set **customSpeechRecognizer**.[enabled](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/#enabled) to `true`. When you implement a custom speech recognizer, SpeechToText no longer does the following:
12+
13+
- Listens to user speech.
14+
- Updates the component state. Set the SpeechToText state using the **customSpeechRecognizer**.[isListening](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/#isListening) property.
15+
- Calls the [onResult](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/#onResult) and [onError](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/#onError) handlers.

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/onContentReady.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@ type: function(e)
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
A function that is executed when the UI component is rendered or repainted.
88

99
##### param(e): ui/speech_to_text:ContentReadyEvent
10-
<!-- Description goes here -->
10+
Information about the event.
1111

1212
##### field(e.component): {WidgetName}
13-
<!-- Description goes here -->
13+
The UI component's instance.
1414

1515
##### field(e.element): DxElement
16-
<!-- Description goes here -->
16+
#include common-ref-elementparam with { element: "UI component" }
1717

1818
---
19-
<!-- Description goes here -->

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/onDisposing.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ type: function(e)
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
A function that is executed before the UI component is [disposed of]({basewidgetpath}/Methods/#dispose).
88

99
##### param(e): ui/speech_to_text:DisposingEvent
10-
<!-- Description goes here -->
10+
Information about the event.
1111

1212
##### field(e.component): {WidgetName}
13-
<!-- Description goes here -->
13+
The UI component's instance.
1414

1515
##### field(e.element): DxElement
16-
<!-- Description goes here -->
16+
#include common-ref-elementparam with { element: "UI component" }
1717

1818
---
1919
<!-- Description goes here -->

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/onEnd.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ default: undefined
55
---
66
---
77
##### shortDescription
8-
<!-- Description goes here -->
8+
A function that is executed when the Web Speech API finishes transcription and SpeechToText switches to the initial component state.
99

1010
##### param(e): ui/speech_to_text:EndEvent
11-
<!-- Description goes here -->
11+
Information about the event.
1212

1313
##### field(e.component): {WidgetName}
14-
<!-- Description goes here -->
14+
The UI component's instance.
1515

1616
##### field(e.element): DxElement
17-
<!-- Description goes here -->
17+
#include common-ref-elementparam with { element: "UI component" }
1818

1919
---
20-
<!-- Description goes here -->
20+
[note] The component does not call this handler if you implement a [custom speech recognition engine](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/).

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/onError.md‎

Lines changed: 75 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,86 @@ default: undefined
55
---
66
---
77
##### shortDescription
8-
<!-- Description goes here -->
8+
A function that is executed when the Web Speech API encounters an [error](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/error_event).
99

1010
##### param(e): ui/speech_to_text:ErrorEvent
11-
<!-- Description goes here -->
11+
Information about the event.
1212

1313
##### field(e.component): {WidgetName}
14-
<!-- Description goes here -->
14+
The UI component's instance.
1515

1616
##### field(e.element): DxElement
17-
<!-- Description goes here -->
17+
#include common-ref-elementparam with { element: "UI component" }
1818

1919
---
20-
<!-- Description goes here -->
20+
The following code snippet demonstrates how to implement the [notify()](/Documentation/ApiReference/Common/Utils/ui/#notifymessage_stack) utility method to display a Web Speech API error in the **onError** handler:
21+
22+
---
23+
24+
##### jQuery
25+
26+
<!-- tab: index.js -->
27+
$('#speech-to-text').dxSpeechToText({
28+
onError(e) {
29+
DevExpress.ui.notify(`Web Speech API encountered an error: ${e.event.error}`);
30+
}
31+
})
32+
33+
##### Angular
34+
35+
<!-- tab: app.component.html -->
36+
<dx-speech-to-text
37+
(onError)="handleError($event)"
38+
></dx-speech-to-text>
39+
40+
<!-- tab: app.component.ts -->
41+
import { DxSpeechToTextComponent, type DxSpeechToTextTypes } from 'devextreme-angular/ui/speech-to-text';
42+
import notify from 'devextreme/ui/notify';
43+
44+
// ...
45+
export class AppComponent {
46+
handleError(e: DxSpeechToTextTypes.ErrorEvent) {
47+
notify(`Web Speech API encountered an error: ${e.event.error}`);
48+
}
49+
}
50+
51+
##### Vue
52+
53+
<!-- tab: App.vue -->
54+
<template>
55+
<DxSpeechToText
56+
@error="handleError"
57+
/>
58+
</template>
59+
60+
<script setup lang="ts">
61+
import { DxSpeechToText, type DxSpeechToTextTypes } from 'devextreme-vue/speech-to-text';
62+
import notify from 'devextreme/ui/notify';
63+
64+
function handleError(e: DxSpeechToTextTypes.ResultEvent) {
65+
notify(`Web Speech API encountered an error: ${e.event.error}`);
66+
}
67+
</script>
68+
69+
##### React
70+
71+
<!-- tab: App.tsx -->
72+
import React from 'react';
73+
import { SpeechToText, type SpeechToTextTypes } from 'devextreme-react/speech-to-text';
74+
import notify from 'devextreme/ui/notify';
75+
76+
function handleError(e: DxSpeechToTextTypes.ResultEvent): void {
77+
notify(`Web Speech API encountered an error: ${e.event.error}`);
78+
}
79+
80+
function App(): JSX.Element {
81+
return (
82+
<SpeechToText
83+
onError={handleError}
84+
/>
85+
);
86+
}
87+
88+
---
89+
90+
[note] The component does not call this handler if you implement a [custom speech recognition engine](/Documentation/ApiReference/UI_Components/dxSpeechToText/Configuration/customSpeechRecognizer/).

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/onInitialized.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,20 @@ type: function(e)
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
A function used in JavaScript frameworks to save the UI component instance.
88

99
##### param(e): ui/speech_to_text:InitializedEvent
10-
<!-- Description goes here -->
10+
Information about the event.
1111

1212
##### field(e.component): {WidgetName}
13-
<!-- Description goes here -->
13+
The UI component's instance.
1414

1515
##### field(e.element): DxElement
16-
<!-- Description goes here -->
16+
#include common-ref-elementparam with { element: "UI component" }
1717

1818
---
19-
<!-- Description goes here -->
19+
#include common-code-on-initialized
20+
21+
#####See Also#####
22+
23+
#include common-get-instance

‎api-reference/10 UI Components/dxSpeechToText/1 Configuration/onOptionChanged.md‎

Lines changed: 115 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,134 @@ type: function(e)
44
---
55
---
66
##### shortDescription
7-
<!-- Description goes here -->
7+
A function that is executed after a UI component property is changed.
88

99
##### param(e): ui/speech_to_text:OptionChangedEvent
10-
<!-- Description goes here -->
10+
Information about the event.
1111

1212
##### field(e.component): {WidgetName}
13-
<!-- Description goes here -->
13+
The UI component's instance.
1414

1515
##### field(e.element): DxElement
16-
<!-- Description goes here -->
16+
#include common-ref-elementparam with { element: "UI component" }
1717

1818
##### field(e.fullName): String
19-
<!-- Description goes here -->
19+
The path to the modified property that includes all parent properties.
2020

2121
##### field(e.name): String
22-
<!-- Description goes here -->
22+
The modified property. For nested properties, returns the root-level property.
2323

2424
##### field(e.previousValue): any
25-
<!-- Description goes here -->
25+
The modified property's previous value.
2626

2727
##### field(e.value): any
28-
<!-- Description goes here -->
28+
The modified property's new value.
29+
30+
---
31+
The following code snippet demonstrates how to subscribe to component property changes:
32+
33+
---
34+
35+
##### jQuery
36+
37+
<!-- tab: index.js -->
38+
$(function() {
39+
$("#{widgetName}Container").dx{WidgetName}({
40+
// ...
41+
onOptionChanged: function(e) {
42+
if(e.name === "changedProperty") {
43+
// handle the property change here
44+
}
45+
}
46+
});
47+
});
48+
49+
##### Angular
50+
51+
<!-- tab: app.component.html -->
52+
<dx-{widget-name} ...
53+
(onOptionChanged)="handlePropertyChange($event)">
54+
</dx-{widget-name}>
55+
56+
<!-- tab: app.component.ts -->
57+
import { Component } from '@angular/core';
58+
import { type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
59+
60+
@Component({
61+
selector: 'app-root',
62+
templateUrl: './app.component.html',
63+
styleUrls: ['./app.component.css']
64+
})
65+
66+
export class AppComponent {
67+
// ...
68+
handlePropertyChange(e: Dx{WidgetName}Types.OptionChangedEvent) {
69+
if(e.name === "changedProperty") {
70+
// handle the property change here
71+
}
72+
}
73+
}
74+
75+
<!-- tab: app.module.ts -->
76+
import { BrowserModule } from '@angular/platform-browser';
77+
import { NgModule } from '@angular/core';
78+
import { AppComponent } from './app.component';
79+
import { Dx{WidgetName}Module } from 'devextreme-angular/ui/{widget-name}';
80+
81+
@NgModule({
82+
declarations: [
83+
AppComponent
84+
],
85+
imports: [
86+
BrowserModule,
87+
Dx{WidgetName}Module
88+
],
89+
providers: [ ],
90+
bootstrap: [AppComponent]
91+
})
92+
93+
export class AppModule { }
94+
95+
##### Vue
96+
97+
<!-- tab: App.vue -->
98+
<template>
99+
<Dx{WidgetName} ...
100+
@option-changed="handlePropertyChange"
101+
/>
102+
</template>
103+
104+
<script>
105+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
106+
import { Dx{WidgetName}, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
107+
108+
function handlePropertyChange: function(e: Dx{WidgetName}Types.OptionChangedEvent) {
109+
if(e.name === "changedProperty") {
110+
// handle the property change here
111+
}
112+
}
113+
</script>
114+
115+
##### React
116+
117+
<!-- tab: App.js -->
118+
import React from 'react';
119+
import 'devextreme/dist/css/dx.fluent.blue.light.css';
120+
121+
import { {WidgetName}, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
122+
123+
function handlePropertyChange(e: {WidgetName}Types.OptionChangedEvent) {
124+
if(e.name === "changedProperty") {
125+
// handle the property change here
126+
}
127+
}
128+
129+
export default function App() {
130+
return (
131+
<{WidgetName} ...
132+
onOptionChanged={handlePropertyChange}
133+
/>
134+
);
135+
}
29136

30137
---
31-
<!-- Description goes here -->

0 commit comments

Comments
 (0)