Creating views in the Atom workspace


#1

I’d like to try building an Atom package which will create a sidebar in Atom to send and receive chat messages.

To start, I’d like to simply implement the sidebar. I’ve found a few relevant docs, such as here and here, however they don’t provide much info on exactly how to go about creating the new view.

How can I create a package which creates a sidebar in Atom? If examples of how to add views are somewhere in the documentation, please post a link.


#2

I think the best way to create views in Atom is to use etch. Once you installed it, you can write a simple component.

// my-component.js
/** @jsx etch.dom */

const etch = require('etch')

class MyComponent {
  // Define an ordinary constructor to initialize your component.
  constructor (props, children) {
    // perform custom initialization here...
    // then call `etch.initialize`:
    etch.initialize(this)
  }

  // The `render` method returns a virtual DOM tree representing the
  // current state of the component. Etch will call `render` to build and update
  // the component's associated DOM element. Babel is instructed to call the
  // `etch.dom` helper in compiled JSX expressions by the `@jsx` pragma above.
  render () {
    return <div>Hello, {name}!</div>
  }

  // Update the component with new properties and children.
  update (props, children) {
    return etch.update(this)
  }
}

Then you can show this view with a command.

import MyComponent from './my-component'

// in the `activate` function of your package...
atom.command.add('atom-workspace', {
  'package-name:show-view': () => {
  const view = new MyComponent({
    name: 'world'
  }, [])
  const panel = atom.workspace.addRightPanel({
    item: view.element
  })
}})