Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel kılavuz ekleme

Makale
10/04/2018

Bu makalede, Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimindeki bir sayfaya nasıl yeni bir kılavuz ekleneceği gösterilmektedir. Makalede şunlar açıklanmaktadır:

Yerel geliştirme ortamı hazırlama.
Web kullanıcı arabirimindeki bir sayfaya yeni kılavuz ekleme.

Bu makaledeki örnek kılavuz, Uzaktan İzleme çözümü hızlandırıcısına özel hizmet ekleme web kullanıcı arabirimi nasıl yapılır makalesinin nasıl ekleneceğini gösterdiği hizmet verilerini görüntüler.

Önkoşullar

Bu nasıl yapılır kılavuzundaki adımları tamamlamak için yerel geliştirme makinenizde aşağıdaki yazılımların yüklü olması gerekir:

Git
Node.js

Başlamadan önce

Devam etmeden önce aşağıdaki makalelerde yer alan adımları tamamlamanız gerekir:

Kılavuz ekleme

Web kullanıcı arabirimine kılavuz eklemek için, kılavuzu tanımlayan kaynak dosyaları eklemeniz ve web kullanıcı arabiriminin yeni bileşenden haberdar olmasını sağlamak için bazı mevcut dosyaları değiştirmeniz gerekir.

Kılavuzu tanımlayan yeni dosyaları ekleme

Başlamak için src/walkthrough/components/pages/pageWithGrid/exampleGrid klasörü kılavuz tanımlayan dosyaları içerir:

exampleGrid.js


import React, { Component } from 'react';
import { Btn, ComponentArray, PcsGrid } from 'components/shared';
import { exampleColumnDefs, defaultExampleGridProps } from './exampleGridConfig';
import { isFunc, svgs, translateColumnDefs } from 'utilities';
import { checkboxColumn } from 'components/shared/pcsGrid/pcsGridConfig';

const initialState = {
  softSelectedId: undefined
};

/**
 * A grid for displaying example data
 *
 * Encapsulates the PcsGrid props
 */
export class ExampleGrid extends Component {
  constructor(props) {
    super(props);

    // Set the initial state
    this.state = initialState;

    // Default device grid columns
    this.columnDefs = [
      checkboxColumn,
      exampleColumnDefs.id,
      exampleColumnDefs.description
    ];

    // Set up the available context buttons.
    // If these are subject to user permissions, use the Protected component (src/components/shared/protected).
    this.contextBtns =
      <ComponentArray>
        <Btn svg={svgs.reconfigure} onClick={this.clickContextBtn('btn1')}>{props.t('walkthrough.pageWithGrid.grid.btn1')}</Btn>
        <Btn svg={svgs.trash} onClick={this.clickContextBtn('btn2')}>{props.t('walkthrough.pageWithGrid.grid.btn2')}</Btn>
      </ComponentArray>;
  }

  /**
   * Get the grid api options
   *
   * @param {Object} gridReadyEvent An object containing access to the grid APIs
  */
  onGridReady = gridReadyEvent => {
    this.gridApi = gridReadyEvent.api;
    // Call the onReady props if it exists
    if (isFunc(this.props.onGridReady)) {
      this.props.onGridReady(gridReadyEvent);
    }
  };

  clickContextBtn = (input) => () => {
    //Just for demo purposes. Don't console log in a real grid.
    console.log('Context button clicked', input);
    console.log('Hard selected rows', this.gridApi.getSelectedRows());
  };

  /**
   * Handles soft select props method.
   * Soft selection happens when the user clicks on the row.
   *
   * @param rowId The id of the currently soft selected item
   * @param rowData The rowData from the underlying grid. MAY BE OUT OF DATE.
   */
  onSoftSelectChange = (rowId, rowData) => {
    //Note: only the Id is reliable, rowData may be out of date
    const { onSoftSelectChange } = this.props;
    if (rowId) {
      console.log('Soft selected', rowId); //Just for demo purposes. Don't console log a real grid.
      this.setState({ softSelectedId: rowId });
    }
    if (isFunc(onSoftSelectChange)) {
      onSoftSelectChange(rowId, rowData);
    }
  }

  /**
   * Handles context filter changes and calls any hard select props method.
   * Hard selection happens when the user checks the box for the row.
   *
   * @param {Array} selectedObjs A list of currently selected objects in the grid
   */
  onHardSelectChange = (selectedObjs) => {
    const { onContextMenuChange, onHardSelectChange } = this.props;
    // Show the context buttons when there are rows checked.
    if (isFunc(onContextMenuChange)) {
      onContextMenuChange(selectedObjs.length > 0 ? this.contextBtns : null);
    }
    if (isFunc(onHardSelectChange)) {
      onHardSelectChange(selectedObjs);
    }
  }

  getSoftSelectId = ({ id } = '') => id;

  render() {
    const gridProps = {
      /* Grid Properties */
      ...defaultExampleGridProps,
      columnDefs: translateColumnDefs(this.props.t, this.columnDefs),
      sizeColumnsToFit: true,
      getSoftSelectId: this.getSoftSelectId,
      softSelectId: (this.state.softSelectedDevice || {}).id,
      ...this.props, // Allow default property overrides
      deltaRowDataMode: true,
      enableSorting: true,
      unSortIcon: true,
      getRowNodeId: ({ id }) => id,
      context: {
        t: this.props.t
      },
      /* Grid Events */
      onRowClicked: ({ node }) => node.setSelected(!node.isSelected()),
      onGridReady: this.onGridReady,
      onSoftSelectChange: this.onSoftSelectChange,
      onHardSelectChange: this.onHardSelectChange
    };

    return (
      <PcsGrid key="example-grid-key" {...gridProps} />
    );
  }
}

exampleGridConfig.js


import Config from 'app.config';
import { SoftSelectLinkRenderer } from 'components/shared/cellRenderers';

/** A collection of column definitions for the example grid */
export const exampleColumnDefs = {
  id: {
    headerName: 'walkthrough.pageWithGrid.grid.name',
    field: 'id',
    sort: 'asc',
    cellRendererFramework: SoftSelectLinkRenderer
  },
  description: {
    headerName: 'walkthrough.pageWithGrid.grid.description',
    field: 'descr'
  }
};

/** Given an example object, extract and return the device Id */
export const getSoftSelectId = ({ id }) => id;

/** Shared example grid AgGrid properties */
export const defaultExampleGridProps = {
  enableColResize: true,
  multiSelect: true,
  pagination: false,
  paginationPageSize: Config.paginationPageSize,
  rowSelection: 'multiple'
};

src/walkthrough/components/pages/pageWithGrid/exampleGrid klasörünü src/components/pages/example klasörüne kopyalayın.

Kılavuzu sayfaya ekleme

Hizmet tanımlarını içeri aktarmak için src/components/pages/example/basicPage.container.js aşağıdaki gibi değiştirin:

import { connect } from 'react-redux';
import { translate } from 'react-i18next';

import {
  epics as exampleEpics,
  getExamples,
  getExamplesError,
  getExamplesLastUpdated,
  getExamplesPendingStatus
} from 'store/reducers/exampleReducer';
import { BasicPage } from './basicPage';

// Pass the data
const mapStateToProps = state => ({
  data: getExamples(state),
  error: getExamplesError(state),
  isPending: getExamplesPendingStatus(state),
  lastUpdated: getExamplesLastUpdated(state)
});

// Wrap the dispatch method
const mapDispatchToProps = dispatch => ({
  fetchData: () => dispatch(exampleEpics.actions.fetchExamples())
});

export const BasicPageContainer = translate()(connect(mapStateToProps, mapDispatchToProps)(BasicPage));

Kılavuzu eklemek için src/components/pages/example/basicPage.js aşağıdaki gibi değiştirin:

// Copyright (c) Microsoft. All rights reserved.

import React, { Component } from 'react';

import {
  AjaxError,
  ContextMenu,
  PageContent,
  RefreshBar
} from 'components/shared';
import { ExampleGrid } from './exampleGrid';

import './basicPage.css';

export class BasicPage extends Component {
  constructor(props) {
    super(props);
    this.state = { contextBtns: null };
  }

  componentDidMount() {
    const { isPending, lastUpdated, fetchData } = this.props;
    if (!lastUpdated && !isPending) fetchData();
  }

  onGridReady = gridReadyEvent => this.gridApi = gridReadyEvent.api;

  onContextMenuChange = contextBtns => this.setState({ contextBtns });

  render() {
    const { t, data, error, isPending, lastUpdated, fetchData } = this.props;
    const gridProps = {
      onGridReady: this.onGridReady,
      rowData: isPending ? undefined : data || [],
      onContextMenuChange: this.onContextMenuChange,
      t: this.props.t
    };

    return [
      <ContextMenu key="context-menu">
        {this.state.contextBtns}
      </ContextMenu>,
      <PageContent className="basic-page-container" key="page-content">
        <RefreshBar refresh={fetchData} time={lastUpdated} isPending={isPending} t={t} />
        {!!error && <AjaxError t={t} error={error} />}
        {!error && <ExampleGrid {...gridProps} />}
      </PageContent>
    ];
  }
}

Testleri güncelleştirmek için src/components/pages/example/basicPage.test.js aşağıdaki gibi değiştirin:

// Copyright (c) Microsoft. All rights reserved.

import React from 'react';
import { shallow } from 'enzyme';
import 'polyfills';

import { BasicPage } from './basicPage';

describe('BasicPage Component', () => {
  it('Renders without crashing', () => {

    const fakeProps = {
      data: undefined,
      error: undefined,
      isPending: false,
      lastUpdated: undefined,
      fetchData: () => { },
      t: () => { },
    };

    const wrapper = shallow(
      <BasicPage {...fakeProps} />
    );
  });
});

Kılavuzu test edin

Web kullanıcı arabirimi yerel olarak çalışmıyorsa, deponuzun yerel kopyasının kökünde aşağıdaki komutu çalıştırın:

npm start

Önceki komut, kullanıcı arabirimini konumunda https://localhost:3000/dashboardyerel olarak çalıştırır. Hizmetten gelen kılavuz görüntüleme verilerini görmek için Örnek sayfasına gidin.

Satırları seçme

Kullanıcının kılavuzdaki satırları seçmesini sağlamak için iki seçenek vardır:

Satırları sabit seçme

Kullanıcının aynı anda birden çok satır üzerinde işlem yapması gerekiyorsa, satırlardaki onay kutularını kullanın:

Kılavuza sağlanan columnDef'lere onay kutusuSütun ekleyerek satırların sabit seçimini etkinleştirin. onay kutusuSütun/src/components/shared/pcsGrid/pcsGrid.jsiçinde tanımlanır:
```
this.columnDefs = [
  checkboxColumn,
  exampleColumnDefs.id,
  exampleColumnDefs.description
];
```

Seçili öğelere erişmek için iç kılavuz API'sine bir başvuru alırsınız:

onGridReady = gridReadyEvent => {
  this.gridApi = gridReadyEvent.api;
  // Call the onReady props if it exists
  if (isFunc(this.props.onGridReady)) {
    this.props.onGridReady(gridReadyEvent);
  }
};

Kılavuzdaki bir satır sabit seçildiğinde sayfaya bağlam düğmeleri sağlayın:

this.contextBtns = [
  <Btn key="context-btn-1" svg={svgs.reconfigure} onClick={this.doSomething()}>Button 1</Btn>,
  <Btn key="context-btn-2" svg={svgs.trash} onClick={this.doSomethingElse()}>Button 2</Btn>
];

onHardSelectChange = (selectedObjs) => {
  const { onContextMenuChange, onHardSelectChange } = this.props;
  // Show the context buttons when there are rows checked.
  if (isFunc(onContextMenuChange)) {
    onContextMenuChange(selectedObjs.length > 0 ? this.contextBtns : null);
  }
  //...
}

Bir bağlam düğmesine tıklandığında, çalışmanızı yapmak için sabit seçilen öğeleri alın:

doSomething = () => {
  //Just for demo purposes. Don't console log in a real grid.
  console.log('Hard selected rows', this.gridApi.getSelectedRows());
};

Geçici seçim satırları

Kullanıcının yalnızca tek bir satır üzerinde işlem yapması gerekiyorsa columnDefs içindeki bir veya daha fazla sütun için geçici seçim bağlantısı yapılandırın.

exampleGridConfig.jsiçinde, bir columnDef için cellRendererFramework olarak SoftSelectLinkRenderer ekleyin.

export const exampleColumnDefs = {
  id: {
    headerName: 'examples.grid.name',
    field: 'id',
    sort: 'asc',
    cellRendererFramework: SoftSelectLinkRenderer
  }
};

Geçici seçim bağlantısına tıklandığında onSoftSelectChange olayını tetikler. Ayrıntılar açılır öğesini açmak gibi bu satır için istenen eylemi gerçekleştirin. Bu örnekte konsola yazmanız yeterlidir:

onSoftSelectChange = (rowId, rowData) => {
  //Note: only the Id is reliable, rowData may be out of date
  const { onSoftSelectChange } = this.props;
  if (rowId) {
    //Just for demo purposes. Don't console log a real grid.
    console.log('Soft selected', rowId);
    this.setState({ softSelectedId: rowId });
  }
  if (isFunc(onSoftSelectChange)) {
    onSoftSelectChange(rowId, rowData);
  }
}

Sonraki adımlar

Bu makalede, Uzaktan İzleme çözüm hızlandırıcısında web kullanıcı arabirimine sayfa eklemenize veya özelleştirmenize yardımcı olacak kaynaklar hakkında bilgi edindiyseniz.

Şimdi bir kılavuz tanımladığınızda, sonraki adım Örnek sayfada görüntülenen Uzaktan İzleme çözümü hızlandırıcısı web kullanıcı arabirimine özel bir açılır öğe eklemektir .

Uzaktan İzleme çözümü hızlandırıcısı hakkında daha fazla kavramsal bilgi için bkz. Uzaktan İzleme mimarisi.

Share via