在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强。

WijmoJS的菜单和类似列表的控件(ListBox、ComboBox、MultiSelect)允许用户在 formatItem 事件中使用 JS 代码和 DOM API 为每个项目生成元素树,从而自定制项目的内容。在和 React 框架深度结合后,在 JSX 标记中使用 React 组件及其属性绑定将会更加方便,即,以声明方式定义项目内容

在 WijmoJS 的新版本中,我们为 WijmoJS React Interop 添加了两个特殊的功能项:

  • 对于 Menu,我们添加了 MenuItem 和 MenuSeparator 子组件,它允许您在JSX中以声明方式定义菜单项和分隔符

  • 对于所有类似列表的控件(ListBox、ComboBox、MultiSelect、Menu),我们添加了特殊的 wjItemTemplate 渲染道具,它允许您指定绘制项目内容的渲染函数。

React 菜单项(List Items)

纯javascript菜单控件假定其菜单项是在绑定到控件项源属性的数组中定义的,即,项目在React组件的模型部分中定义。但这并不是最佳选项,实际上菜单项与组件的UI关系更为紧密,因此,使用React UI方法(即JSX标记)定义它们会更方便。

使用WijmoJS,您可以通过 \@ grapecity/wijmo.react.input 模块中的新MenuItem组件快速实现菜单项目定义:在渲染函数的JSX标记中使用嵌套到其Menu部分的MenuItem组件,而不是在数组中定义项目,其中每个MenuItem定义一个单独的菜单项,其内容具有任意复杂性。

此外,使用MenuSeparator组件还可用于在菜单项之间插入分隔符。例如,此示例中的以下jsx代码定义了具有丰富内容的菜单项目,并在退出项之前使用分隔符:

<wjInput.Menu
    header="File"
    itemClicked={this.menuItemClicked}>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-asterisk"></span>
        <b>New</b>
        <br />
        <small><i>create a new file</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-folder-open"></span>
        <b>Open</b>
        <br />
        <small><i>open an existing file or folder</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-floppy-disk"></span>
        <b>Save</b>
        <br />
        <small><i>save the current file</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuSeparator></wjInput.MenuSeparator>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-remove"></span>
        <b>Exit</b>
        <br />
        <small><i>exit the application</i></small>
    </wjInput.MenuItem>
</wjInput.Menu>

您还可以从定义其数据的数据源中,动态生成多个MenuItem。

例如下方代码实现了:调色板数组映射到表示其数据的MenuItem数组中:

<wjInput.Menu
    header="Palette"
    maxDropDownHeight={300}
    value={this.state.thePalette}>
    {this.palettes.map((value) => {
        return <wjInput.MenuItem value={value.name}>
            {value.name}
            <span style={{float:'right'}}>
            {value.colors.map((color) => {
                return <div style={{
                    backgroundColor: color,
                    display:'inline',
                    padding:'2px',
                    height:'10px',
                    width:'3px'}}>
                </div>
            })}
            </span>
        </wjInput.MenuItem>
    })}
</wjInput.Menu>

请注意,此处的Menu组件未使用其itemsSource属性绑定数据数组。相反,它直接从数据数组中生成子MenuItem组件。

命令(Commands)

您现在可以用声明的方式,定义绑定带参数/命令的菜单项。MenuItem组件从其接口中公开了cmd和cmdParam属性,这些属性可以分别绑定命令及其参数。

下面的代码示例演示了:如何使用这些属性来定义递增或递减的菜单项。其中,每个项目表示作为命令参数指定的不同增量值:

<wjInput.Menu
    header="Tax Commands"
    id="changeTax"
    command={this.state.command}>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.50}>
        Increment by 50%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.25}>
        Increment by 25%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.05}>
        Increment by 5%
    </wjInput.MenuItem>
    <wjInput.MenuSeparator></wjInput.MenuSeparator>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.05}>
        Decrement by 5%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.25}>
        Decrement by 25%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.50}>
        Decrement by 50%
    </wjInput.MenuItem>
</wjInput.Menu>

值选择器(Value Picker)

随着MenuItem组件的引入,Menu现在可以用作值选择器。MenuItem组件的value属性包含了与该项关联的值。

WijmoJS 的菜单本身就具有value属性,其值显示在菜单标题旁边,其属性可以绑定到父组件状态,而其中的itemClicked事件可用于更新与所选菜单项关联值的状态。此示例演示了可用于选择浏览器名称的菜单:

render() {
    return <wjInput.Menu
            header="Run"
            value={this.state.browser}
            itemClicked={this.splitButtonItemClicked}>
        <wjInput.MenuItem value="IE">Internet Explorer</wjInput.MenuItem>
        <wjInput.MenuItem value="Chrome">Chrome</wjInput.MenuItem>
        <wjInput.MenuItem value="FF">FireFox</wjInput.MenuItem>
        <wjInput.MenuItem value="Safari">Safari</wjInput.MenuItem>
        <wjInput.MenuItem value="Opera">Opera</wjInput.MenuItem>
    </wjInput.Menu>
}
splitButtonItemClicked = (menu) => {
    this.setState({
        browser: menu.selectedItem.value
    });
};

项目模板(Item Templates)

您可以使用formatItem事件为纯JS的列表类控件创建自定义项目内容,如ListBox、ComboBox、MultiSelect和Menu。相应的React组件允许您使用JSX标记以声明方式定义项目内容。

此外,对于每个提到的组件,WijmoJS都会公开一个名为“wjItemTemplate”的渲染道具,它允许您指定绘制项目内容的渲染函数。例如,此示例演示了:通过标记绘制了一个字形,其名称取自源数组:

<wjInput.ListBox
    displayMemberPath="country"
    itemsSource={this.state.glyphs}
    selectedIndexChanged={this.onSelectedIndexChanged}
    initialized={this.onInitialized}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div>
            <div className="wj-glyph">
                <span className={`wj-glyph-${context.item}`}></span>
            </div>
            {context.item}
        </div>
    )}>
</wjInput.ListBox>

注意,wjItemTemplate渲染函数提供了一个上下文参数,该参数用以带来有关当前绘图项的信息对象,它公开了以下属性:

  • item - 正在呈现其内容的数据项
  • itemIndex - 要呈现的项的索引
  • control - 由React组件表示的底层纯JS控件

MultiSelect 组件

MultiSelect组件与其他类似列表的控件相比具备一个显著特征:其每个项目都包含了一个复选框,用于更改项目的已检查状态。

在使用项目模板进行项目自定义时,此功能也可以保留。与往常一样,项目模板中type =“checkbox”的第一个输入元素将用作检查状态开关。

此示例中的代码定义了包含此类复选框的项目模板:

<wjInput.MultiSelect
    displayMemberPath="name"
    headerPath="name"
    placeholder="Countries"
    itemsSource={this.state.data}
    showSelectAllCheckbox={this.state.showSelectAllCheckbox}
    checkedItemsChanged={this._onCheckedItemsChanged.bind(this)}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div className="item">
            <label><input type="checkbox"/>{context.item.name}</label>
            <br/>
            <b>{context.item.city}</b> ({context.item.state})<br/>
            {context.item.address}<br/>
            Phone: <b>{context.item.phone}</b><br/>
            Fax: <b>{context.item.fax}</b><br/>
            Website: <a href="{context.item.site}" target="_blank">{context.item.site}</a><br/>
        </div>
    )}>
</wjInput.MultiSelect>

菜单(Menu)

在上面的介绍中,我们已经向您演示了如何从一组数据项,动态创建MenuItem组件。下面将介绍的wjitemTemplate渲染属性是实现此类功能的另一种方法。

使用此方法,Menu组件应该绑定到一个项目数组中,而wjItemTemplate render prop定义一个用于呈现每个项目的模板。

例如,此示例中的代码片段显示绑定到音乐家数组的菜单的自定义项:

header="Artists"
    itemClicked={this.menuItemClicked}
    itemsSource={this.musicians}
    maxDropDownHeight={300}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div style={{minWidth: '160px'}}>
            {context.itemIndex + 1}. <b>{context.item.name}</b>
            {context.item.photo ?
            <div>
                <img src={context.item.photo} height="50" />
            </div>
            : null}
        </div>
    )}>
</wjInput.Menu>

结论

WijmoJS全新的MenuItem组件和wjItemTemplate渲染道具,全面提升了WijmoJS列表类组件的自定义扩展能力和便捷性。

毫不夸张的说,使用WijmoJS前端开发工具包,您现在可以通过传统的JSX标记,绑定带有其他应用程序组件的丰富项目,并定义其内容。