Flexibel bis zum Kern

Ein weiteres Plus liegt in der Möglichkeit, die Software weitgehend zu modifizieren. Ein Package Generator erzeugt bei Bedarf ein Grundgerüst für ein Paket, das im Test klassischerweise hello-world heißt. Es macht nichts weiter, als ein kleines Fenster mit der Nachricht anzuzeigen (Abbildung 2).

Abbildung 2: Das Paket hello-world holt ein unspektakuläres Fenster mit den entsprechenden Worten in den Editor.

Starten Sie über [Strg]+[Umschalt]+[P] die Suche für Befehle und rufen Sie Package Generator: Generate Package auf. Der dabei erzeugte Boilerplate-Code landet im Verzeichnis github/Projekt, wobei das Projekt im Beispiel hello-world heißt. Zugleich erscheint der erzeugte Baum von Verzeichnissen in der Ansicht links, Abbildung 3 zeigt das Grundgerüst des hello-world-Pakets. Die darin sichtbare vorletzte Datei von unten heißt package.json. Sie enthält verschiedene Meta-Informationen zum Paket (Abbildung 4), darunter die Versionsnummer sowie den Pfad zu den ausführbaren Dateien im Unterverzeichnis lib.

Abbildung 3: In der Ansicht links sehen Sie die Struktur des automatisch erzeugten Pakets. Rechts: Der Code, der sich um die Logik des Programms kümmert.
Abbildung 4: Die Datei package.json liegt im Wurzelverzeichnis eines Pakets und enthält Metadaten wie den Pfad zur ausführbaren Datei und die Versionsnummer.

Das Letztgenannte sehen Sie weiter oben in Abbildung 3. Es enthält gleich zwei Dateien, hello-world.coffee und hello-world-view.coffee. Während Letztere die Elemente für das grafische Interface arrangiert (Listing 3), zeigt Abbildung 3 auch den Code für die Logik hinter dem Paket. Die Methoden activate, deactivate, serialize und toggle sind per Folding gekürzt, um die Struktur zu verdeutlichen. Listing 4 zeigt den nicht sichtbaren Code.

Listing 3

module.exports =
class HelloWorldView
  constructor: (serializedState) ->
    # Root-Element erzeugen
    @element = document.createElement('div')
    @element.classList.add('hello-world')
    # Nachrichten-Element erzeugen
    message = document.createElement('div')
    message.textContent = "Hallo Welt!"
    message.classList.add('message')
    @element.appendChild(message)
  # Gibt ein Objekt zurück, wenn Nutzer das Paket aktiviert
  serialize: ->
  # Element entfernen
  destroy: ->
    @element.remove()
  getElement: ->
    @element

Der Code in Listing 3 erzeugt zunächst das Root-Element (@element) und ordnet diesem dann das Nachrichten-Element message als Child zu (Zeile 12). Darunter legt der Code fest, wie das Element auf die Aufrufe getElement() und destroy() reagiert.

Listing 4

[...]
  activate: (state) ->
    @helloWorldView = new HelloWorldView(state.helloWorldViewState)
    @modalPanel = atom.workspace.addModalPanel(item: @helloWorldView.getElement(), visible: false)
    # Atom-Events lassen sich über CompositeDisposable einfach aufräumen
    @subscriptions = new CompositeDisposable
    # @toggle()-Methode mit 'hello-world:toggle' verknüpfen
    @subscriptions.add atom.commands.add 'atom-workspace', 'hello-world:toggle': => @toggle()
  deactivate: ->
    @modalPanel.destroy()
    @subscriptions.dispose()
    @helloWorldView.destroy()
  serialize: ->
    helloWorldViewState: @helloWorldView.serialize()
  toggle: ->
    console.log 'HelloWorld was toggled!'
    if @modalPanel.isVisible()
      @modalPanel.hide()
    else
      @modalPanel.show()

Die ersten drei der vier Methoden in Listing 4 gehören in der Regel zu jedem Package. Die Methode activate() erzeugt ein modales Element (ModalPanel) und ordnet es Atoms Arbeitsfläche zu (Zeile 4). Die Methode subscriptions() wiederum ordnet den in Listing 5 definierten Menüeintrag der Methode @toggle() zu (Zeile 11). Die optionale Methode @toggle() (Zeile 22) sorgt dafür, dass unter dem Menüpunkt Packages ein Eintrag für hello-world auftaucht. Klicken Sie in dessen Submenü auf Toggle oder drücken [Alt]+[Strg]+[O], sehen Sie das Fenster aus Abbildung 2 auftauchen oder verschwinden.

Die Details im Menü lassen sich ebenfalls anpassen; Listing 5 zeigt das leicht nachvollziehbare Schema. Es steckt im Ordner menus in der Datei hello-world.cson und erzeugt einen Eintrag für das Kontextmenü und für das Atom-Menü.

Listing 5

'context-menu':
  'atom-text-editor': [
    {
      'label': 'Toggle hello-world'
      'command': 'hello-world:toggle'
    }
  ]
'menu': [
  {
    'label': 'Packages'
    'submenu': [
      'label': 'hello-world'
      'submenu': [
        {
          'label': 'Toggle'
          'command': 'hello-world:toggle'
        }
      ]
    ]
  }
]

Daneben besteht die Möglichkeit, den Stil in einer Less-Datei zu ändern (unter styles), ein Tastaturkürzel festzulegen (keymaps) und Spezifikationen für Tests zu erstellen (spec). Mit den Specs testen Sie Funktionen gegen Regressionen [8], wofür die Atom-Macher auf Githubs Javascript-Test-Framework Jasmine [9] setzen.

Fazit

Der Atom Editor macht einen soliden Eindruck, obwohl er einen einfachen Weg bietet, um vieles anzupassen. Nutzern des Editors Sublime Text dürften viele Elemente bekannt vorkommen: Offensichtlich haben sich die Entwickler kräftig bei der proprietären Python-Software bedient. Die Community des Projekts wächst kontinuierlich: Seit Version 1.0 stieg die Zahl der Erweiterungen von 1861 Paketen auf rund 3300. Offensichtlich schließt der Editor eine echte Lücke. 

Infos

[1] Atom: https://atom.io

[2] Sublime Text: http://www.sublimetext.com

[3] Textmate: https://macromates.com

[4] Electron: http://electron.atom.io

[5] Atom Flight Manual: https://atom.io/docs/v0.198.0/

[6] Nodesource Node.js-Installationsanleitung: https://github.com/nodesource/distributions

[7] Grunt: http://gruntjs.com

[8] Specs für Atom schreiben: https://atom.io/docs/v0.186.0/writing-specs

[9] Jasmine: http://jasmine.github.io

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • GUI-Programme erstellen mit Glade
    Die Entwicklung auf GTK+ basierender, grafischer Benutzeroberflächen – ein schwieriges, umständliches Unterfangen? Der GUI-Builder Glade widerlegt solche Behauptungen.
  • Oberflächen gestalten mit QML und Qt Creator
    Mit QML und Qt Creator haben Sie in Minuten einen ersten Entwurf für eine Programmoberfläche erstellt.
  • Auf Trab gebracht
    Dualcore-Prozessoren sind längst Standard, Quadcores im Kommen. Mit OpenMP geben Sie ihren Programmen Zugriff auf diese Rechenleistung.
  • AVM Fritz!Card unter Suse 10.1
  • Ansprechbar
    Nicht erst seit der Übernahme durch Microsoft hegen Linux-Anwender eine Hassliebe zu Skype. Wer sich von dem proprietären Platzhirsch trennen möchte, findet zahlreiche Alternativen. Davon besetzt fast jede ganz gezielt eine Nische, in der sie ihre jeweilige Aufgabe sehr gut erfüllt.
Kommentare

Infos zur Publikation

LU 12/2017: Perfekte Videos

Digitale Ausgabe: Preis € 5,95
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Huawei
Pit Hampelmann, 13.12.2017 11:35, 1 Antworten
Welches Smartphone ist für euch momentan das beste? Sehe ja die Huawei gerade ganz weit vorne. Bi...
Fernstudium Informatik
Joe Cole, 12.12.2017 10:36, 2 Antworten
Hallo! habe früher als ich 13 Jahre angefangen mit HTML und später Java zu programmieren. Weit...
Installation Linux mint auf stick
Reiner Schulz, 10.12.2017 17:34, 3 Antworten
Hallo, ich hab ein ISO-image mit Linux Mint auf einem Stick untergebracht Jetzt kann ich auch...
Canon Maxify 2750 oder ähnlicher Drucker
Hannes Richert, 05.12.2017 20:14, 4 Antworten
Hallo, leider hat Canon mich weiterverwiesen, weil sie Linux nicht supporten.. deshalb hier die...
Ubuntu Server
Steffen Seidler, 05.12.2017 12:10, 1 Antworten
Hallo! Hat jemand eine gute Anleitung für mich, wie ich Ubuntu Server einrichte? Habe bisher...