Example of a simple list view

ccp · 2015-07-26 12:09:18 UTC

Hi.
I’m new to Javascript/Coffeescript but fairly decent in other programming languages (python,c#).
I just can’t make a simple Popup/Treeview-like element. I read the documentation of Views, went trough several threads and read up here and here but couldn’t make it work. I usually never code anything with a GUI so I’m a bit lost here :). How would a complete minimum example of a package showing just a popup or a treeview-like element with a list of (clickable) strings look like? Thanks for any tips on this.

carlosingles · 2015-07-26 12:22:36 UTC

remote-edit uses a dialog class that you can find here:

github.com

sveale/remote-edit/blob/master/lib/view/dialog.coffee

{$, $$, View, TextEditorView} = require 'atom-space-pen-views'
{CompositeDisposable} = require 'atom'

module.exports =
class Dialog extends View
  @content: ({prompt} = {}) ->
    @div class: 'dialog', =>
      @label prompt, class: 'icon', outlet: 'promptText'
      @subview 'miniEditor', new TextEditorView(mini: true)
      @div class: 'error-message', outlet: 'errorMessage'

  initialize: ({iconClass} = {}) ->
    @promptText.addClass(iconClass) if iconClass

    @disposables = new CompositeDisposable
    @disposables.add atom.commands.add 'atom-workspace',
      'core:confirm': => @onConfirm(@miniEditor.getText())
      'core:cancel': (event) =>
        @cancel()
        event.stopPropagation()

This file has been truncated. show original

ccp · 2015-07-26 13:52:54 UTC

Well thanks but that doesn’t help me at all.
I can’t even figure out how to draw a really simple view of just a tile like tree-view.
How would I even add something like this?

As I said - I have no clue about anything that has to do with GUI because I didn’t need it until now.

carlosingles · 2015-07-26 14:19:02 UTC

Ah okay, well you would use the Workspace instance, the methods you need are documented here:

You can add Panels to the top, left, right, and bottom of the screen or a modal panel. The panels are just HTML that get inserted in a container. For views, you can use Atom’s deprecated space-pen-views since a lot of packages use this.

ccp · 2015-07-26 14:58:51 UTC

Thanks a lot! I read up on some basic stuff and now have a much better understanding of how everything around views works.

Alchiadus · 2015-07-26 20:43:49 UTC

You can also use the Styleguide (Styleguide : Show in the command palette, or Ctrl+Shift+G on Windows) to get an overview of all the built-in UI elements and their HTML markup: