ElectronJS 中的进度条 |套装 – 2

本文是文章的延续： ElectronJS 中的进度条 |设置 – 1 。在上一篇文章中，我们讨论了如何使用BrowserWindow对象的 Instance 方法在 Electron 应用程序的任务栏/停靠栏图标中创建进度条。在本文中，我们将使用我们之前在应用程序设置期间安装的electron-progressbar npm 包在 Electron 应用程序中实现自定义进度条。我们将继续使用我们在上一篇文章中停止的相同代码库。项目结构和package.json文件也保持不变。如上一篇文章所述， electron-progressbar包提供了一个简单且高度可定制的 API 来显示和控制 Electron 应用程序中的进度条。此包只能在Main Process 中直接导入和使用。要在Renderer Process 中导入和使用这个包，我们需要对main.js文件进行额外的更改。在这种情况下我们不能使用 Electron远程模块，因为它是一个外部包。此外，该包只能在应用程序的主进程中发出app模块的就绪事件后才能使用。

• main.js ：在该文件中添加以下代码段。之后，我们可以在应用程序的 Renderer Processes 中导入和使用此包，因为我们已将该导入添加到main.js文件中的全局对象中。如果我们直接在Renderer Process 中导入electron-progressbar包，就会遇到 Error: Uncaught TypeError: BrowserWindow is not a constructor 。抛出此错误是因为该包在内部尝试直接从 Electron 初始化BrowserWindow对象，而不使用仅在Main Process而不是在Renderer Processes 中支持的远程模块。

javascript

const { app, BrowserWindow } = require('electron')
global.ProgressBar = require('electron-progressbar');

• index.html ：在该文件中添加以下代码段。

html

Progress Bar in Electron
    
        Click to Launch BrowserWindow Progress Bar
    
    


    
        Click to Launch Electron ProgressBar from Package
    

• index.js ：单击以从包中启动 Electron ProgressBar按钮还没有任何相关的功能。要更改此设置，请在index.js文件中添加以下代码。

javascript

const { getGlobal, app, BrowserWindow } = electron.remote
// Importing ProgressBar in the Renderer Process from global
// Actual Import in main.js file
const ProgressBar = getGlobal('ProgressBar');
 
// Cannot Import Directly in the Renderer Process
// const ProgressBar = require('electron-progressbar')
 
var custom = document.getElementById('custom');
custom.addEventListener('click', () => {
    var progressBar = new ProgressBar({
        abortOnError: false,
        // Determinate Progress Bar
        indeterminate: false,
        initialValue: 0,
        maxValue: 100,
        // On Completion, Progress Bar window will not close.
        closeOnComplete: false,
        title: 'Title of the Progress Bar',
        text: 'Text of the Progress Bar',
        detail: 'Detail to Show actual Progress, ' +
                'Can be set as Dynamic to show actual Status',
        style: {
            text: {},
            detail: {},
            bar: { 'width': '100%', 'background-color': '#BBE0F1' },
            value: {}
        },
        browserWindow: {
            parent: null,
            modal: true,
            resizable: false,
            closable: false,
            minimizable: false,
            maximizable: false,
            width: 500,
            height: 170,
            // Important - If not passed, Progress Bar will not be displayed.
            webPreferences: {
                nodeIntegration: true
            }
        }
    });
 
    progressBar
        .on('completed', (value) => {
            console.log(progressBar.isCompleted());
            console.log('Progress Bar Completed');
            progressBar.detail = 'Task completed. Exiting...';
        })
        .on('ready', () => {
            console.log(progressBar.getOptions())
        })
        .on('aborted', (value) => {
            console.log(`aborted... ${value}`);
        })
        .on('progress', (value) => {
            progressBar.detail =
            `Value ${value} out of ${progressBar.getOptions().maxValue}...`;
        });
 
    setInterval(function () {
        if (!progressBar.isCompleted()) {
            progressBar.value += 1;
        }
    }, 100);
});

新的 ProgressBar(options)构造函数用于在应用程序中创建和初始化一个新的进度条。我们需要将选项对象传递给此构造函数，以使用自定义配置初始化进度条。它接受以下参数。此构造函数返回ProgressBar 的一个实例。

• abortOnError: Boolean此参数定义如果内部发生错误，进度条是否应中止和关闭。默认值为false 。
• indeterminate: Boolean此参数定义并初始化进度条的模式。如果设置为true ，则会初始化一个不确定的进度条，这相当于上一篇文章中讨论的不确定模式。如果设置为false ，进度条将在确定模式下初始化。默认值为true 。在本教程中，我们初始化了一个确定的进度条并使用setInterval()方法来模拟实际的进度条任务。请参阅输出以获得更好的理解。
• initialValue: Integer该参数设置进度条的初始值。这只能用于确定的进度条，即当indeterminate: false 时。默认值为0 。
• maxValue: Integer该参数设置进度条的最大值。当进度条值等于该参数值时，进度条将被设置为已完成并触发完成事件。 isCompleted()实例方法将返回true 。这只能用于确定的进度条，即当indeterminate: false 时。默认值为100 。
• closeOnComplete: Boolean此参数定义进度条窗口是否应在完成时自动关闭。如果设置为false ，则必须通过调用close()实例方法或关闭进度条窗口任务手动关闭进度条。默认值为true 。
• title: String该参数定义了要在进度条窗口标题栏上显示的文本。默认值为等待…
• text: String此参数定义要显示在窗口内但位于进度条元素上方的文本。默认值是Wait …可以使用进度条的实例属性动态设置或更改此值。
• detail: String此参数定义要在文本参数和实际进度条元素之间显示的文本。此参数用于显示进度条的当前状态，即已完成的值或正在完成的实际任务的进度百分比。该参数没有任何默认值。可以使用进度条的实例属性动态设置或更改此值。
• 样式：对象（可选）此参数接受一个对象。这是我们根据自己的 CSS 样式为进度条的不同元素定义视觉样式的地方。它接受以下参数。定义的所有样式都遵循严格的 CSS 规则。
  • 文本：对象此参数采用在含有定型进度条的文本元素的任何CSS属性的对象。该参数没有任何默认对象。
  • detail: Object此参数接受一个包含任何 CSS 属性的对象，用于为进度条的detail元素设置样式。该参数没有任何默认对象。
  • bar: Object此参数接受一个对象，该对象包含用于设置进度条bar元素样式的任何 CSS 属性。此参数具有预定义的默认 CSS 对象： {‘width’:’100%’, ‘background-color’:’#BBE0F1′}用于bar元素。
  • value: Object此参数接受一个对象，该对象包含用于设置进度条窗口中的value元素样式的任何 CSS 属性。这个参数有一个预定义的默认 CSS 对象： {‘background-color’:’#0976A9′}用于value元素。
• browserWindow: Object这个参数接受 Electron 的BrowserWindow Instance 选项。尽管默认情况下只使用了几个属性，但我们可以为支持的BrowserWindow实例选项对象指定任意数量的属性。该参数定义了进度条窗口的特性。它接受以下参数。
  注意：必须将此对象与进度条正确运行所需的默认参数一起传递。下面给出了此对象所需的所有默认参数的详细列表。
  • parent： BrowserWindow实例 该参数接受一个BrowserWindow实例。如果通过，进度条窗口将始终显示在父窗口的顶部并将阻止它，以便用户在进度条完成/中止和关闭之前无法与其交互。传递的默认值为null 。当BrowserWindow对象的 Instance 在这个参数中传递时，就说父窗口被通知了。
  • modal: Boolean该参数定义进度条窗口是否为模态窗口。模态窗口是禁用父窗口的子窗口。此参数仅在进度条窗口是子窗口时有效，即当BrowserWindow对象的实例在父参数中传递时。子窗口总是显示在父窗口的顶部。此参数的默认值为true 。
  • resizable: Boolean此参数定义进度条窗口是否可调整大小。默认值为false 。
  • closable: Boolean该参数定义了进度条窗口是否可关闭，即用户是否可以手动关闭该进度条窗口。默认值为false 。当此参数设置为false 时，关闭图标仍显示在进度条窗口的标题栏中，但没有响应。
  • minimizable: Boolean该参数定义了进度条窗口是否可以最小化。默认值为false 。
  • maximizable: Boolean该参数定义了进度条窗口是否可以最大化。默认值为false 。
  • width: Integer该参数以像素为单位定义进度条窗口的宽度。进度条窗口宽度的默认值为450px 。
  • height: Integer该参数以像素为单位定义进度条窗口的高度。进度条窗口高度的默认值为175px 。

从构造函数返回的ProgressBar的实例支持以下实例事件。 on(eventName, listener) Instance 方法为eventName事件添加了监听函数。不会检查是否已添加侦听器函数。多次调用传递相同的eventName事件和侦听器函数组合将导致侦听器被添加和调用多次。此 Instance 方法返回对此的引用，以便可以将多个EventListener调用链接到同一个ProgressBar实例。请参阅代码以获得更好的理解。

• ready: 事件当进度条初始化并准备好使用时，会触发此实例事件。上面已经提到，只有在app模块的ready事件发出后才能使用进度条。
• progress: Event仅在确定进度条的情况下才会触发此实例事件，即当indeterminate: false 时。每次progressBar的值更改时都会触发此实例事件。它接收一个名为value: Integer 的参数，它表示进度的当前值。此 Instance 事件用于动态设置并向用户显示进度条的当前状态。请参阅代码以获得更好的理解。
• Completed: 事件当进度条完成时，即当它的值等于定义的maxValue参数或在进度条上调用 Instance 方法complete()时，将触发此实例事件。它接收一个名为value: Integer 的参数，它表示进度的当前值。
• aborted: Event当进度条关闭但尚未完成时，即当用户手动关闭进度条窗口 ( closable: true ) 或在进度条完成之前调用 Instance 方法close()时，将触发此实例事件，即之前已完成的Instance 事件已触发。它接收一个名为value: Integer 的参数，它表示它被中止的进度的当前值。

从构造函数返回的ProgressBar的实例支持以下实例属性。这些实例属性可用于动态更改进度条的状态。

• value: Integer该实例属性用于获取或动态设置进度条的当前进度。当此值参数更改时，将触发进度实例事件并将此参数传递给实例事件。此实例属性仅可用于确定的进度条。请参阅代码以获得更好的理解。
• text: String该实例属性用于获取或动态设置文本参数。这表示要显示在进度条窗口内但在进度条元素上方的文本。
• detail: String该Instance属性用于获取或动态设置detail参数。这表示要在文本参数和实际进度条元素之间显示的文本。该参数用于显示进度条的当前状态，可以根据value参数动态改变。请参阅代码以获得更好的理解。

此外，从构造函数返回的ProgressBar的实例支持以下实例方法。这些 Instance 方法对于控制进度条的行为和检查进度条的当前状态很有用。

• isCompleted()：此 Instance 方法返回一个布尔值，表示进度条的当前状态。只有当进度条标记为完成时，此方法才会返回true ，否则返回false 。
• setCompleted()：此 Instance 方法将进度条的状态标记为complete 。如果进度条不确定，则需要手动调用此 Instance 方法，因为这是完成任务并触发完成事件的唯一方法，否则进度条将永远显示。此方法没有返回类型。
• isInProgress()：此 Instance 方法返回一个布尔值，表示进度条的当前状态。如果进度条尚未完成或中止，此方法将返回true ，否则返回false 。
• close()：此 Instance 方法关闭进度条窗口。如果进度条尚未完成，它将被中止并触发 Instance Event aborted 。此 Instance 方法没有返回类型。如果browserWindow参数中的closeable : false ，则需要调用此方法才能终止进度条窗口任务。
• getOptions()：此 Instance 方法仅返回一个对象，该对象表示在初始化时为进度条构造函数定义和设置的所有选项。

至此，我们已经成功实现了一个确定的进度条，该进度条在电子进度条npm 包的帮助下在应用程序窗口中可见。在本教程中，我们通过使用setInterval()方法模拟实际任务使进度条动态化。启动 Electron 应用程序后，我们应该看到以下输出：