What's the non deprecated way to create text output view?


#1

Hello,

I’m trying to write my own package, reading other packages is helpful but it feels like most of them have deprecated dependencies.
I’m now trying to create { MessagePanelView } from 'atom-message-panel'; or{ View } from 'atom-space-pen-views'; But my console was throwing errors at me since it doesn’t seem to be part of Atom by default (Atom core).

I’ve found this page : https://github.com/atom/atom-space-pen-views that says it’s deprecated and removed from Atom core but can still be used by linking the dependencies (That are not officially supported anymore).

Now the point is to create something new with non deprecated/officially supported elements so I was curious to know where I can find a list of all the UI elements currently available with Atom core.
Is it that page? https://atom.io/docs/api/v1.9.2/AtomEnvironment

Would TextBuffer be the replacement for MessagePanelView ?

Thanks


#2

Atom does not have a very good library of reusable components. It has a CSS framework that provides comprehensive default styling, but aside from that and atom-select-list, package authors have to provide the HTML and style rules that dictate how the package should be displayed. In some cases, what you’re doing is simple enough that you don’t need anything more, but for interactive panels it is recommended that you make use of a front-end framework for JavaScript. Any of them will do (the only requirement is that your package produce a valid HTMLElement for Atom to inject into its display), but you should probably be using etch unless you have a reason to do otherwise. etch is a small library that uses the same syntax as React but with none of the frills, that was specifically designed for the circumstance that Atom package designers are in, where we have a complete application already and just need to give it a self-contained UI element.

Here’s a package I rewrote from its previous implementation which used document.createElement() and defined it by setting the innerHTML to an etch component that expanded atom-select-list and added a few extra input elements.


#3

So there is no reusable TextBrowser/Field component that I could add into a dock ?
I will have to study how to do it with HTML but it is stupid if everybody has to write the same thing over and over again because Atom doesn’t make it a default component. It’s forcing people to base their work on other packages that might not be supported at some point.

But I thing TextBuffer should work for what I want to do.


#4

You do want an input element? I figured that you just wanted to display stuff, based on your citation of atom-message-panel. There’s a TextEditor component, yes. You can see it in action in the find-and-replace package.


#5

No I don’t need the input but it’s just so much easier to have like a TextView that you can have writable or not. The html solution seems very extreme to me …

I’m so used to Qt, they have so many things available.


#6

I think I will use the non official dependencies since it’s only pre made html, that will be much easier


#7

Look at my rewrite of shell-it. I use etch to make a view that’s much easier to read and write than the HTML solution, and I don’t recommend hardcoding innerHTML in part because it forces you to write code that your code could be writing for you.

That said, I think “extreme” is the wrong word. Atom is basically a web site, so HTML is the default. Anything you do, whether or not you have to interact with the tags themselves, has to resolve as HTML before Atom can display it. We’re past needing to write HTML for everything, but one of the reasons I like JSX is that HTML is the essence of what we’re doing when we create a display in web code, so it makes sense to have templates and render() statements read similarly to an HTML document.


#8

To me this is extreme because coming from Python, we have the amazing Qt library for UIs and it is soooooo simple to just create an output view. Just instantiate the thing and put your text in there.
I feel like Atom is lacking of wrappers in that way and I’m not confident enough with my HTML skills to actually write my UI elements directly.


#9

JavaScript has a lot of UI libraries, too, but the needs of the JavaScript community are different from the needs of the Python community. If you have a Python script and you want to add visuals to it, you have to give your script access to a program that knows how to accept instructions about what to draw and translate that into instructions for your GPU. For web coders, the flow chart is reversed: we started with rendering programs in the form of browsers (that initially could display anything you wanted, but couldn’t run programs), and computation capabilities have been built onto them via JavaScript. Since the browser natively understands HTML (which has become much easier to write well over the years), all a JavaScript library has to do is output HTML. That’s why there’s a much larger field of potential UI libraries for JS/HTML than for Python. It doesn’t make any sense to try to re-implement Qt if you have a minor quibble with how it works, but JS developers can very easily build new display libraries from the ground up because the browser takes care of the part that’s actually difficult to learn and engineer.

All you have to do is make a post on this forum with a detailed specification of what you’re going for and I’ll write it for you when I have time. I’m not going to write all of your code, but if you give me some input methods and a structure that doesn’t leave ambiguity about what you’re going for, I can whip something up in minutes because HTML and template languages that render into HTML (like JSX and MediaWiki’s code) are things that I’ve spent a lot of time with.


#10

I don’t want you to write code for me :stuck_out_tongue_closed_eyes:
I would like to learn and do it all by myself, it’s just that the logic is completely different from what I’m used too.

I need to figure out how things work, how that render thing works etc. Like now my biggest question is how do I write that view that can scroll and where I can set my test in.

I guess The scrolling would be handled by the pane but yeah, that’s what I need to learn.


#11

The scrolling will be handled by the “browser” (which is part of the Atom executable and is basically the rendering engine of Chrome). You can tell it how to scroll with CSS rules that define the size and layout of your elements, as well as the overflow property.

You’ll learn one way or the other. What I can do is save you some of the difficult figuring out that I’ve been through and short-cut your understanding to the most modern and effective way of doing what you want. I’m not a professional or an expert, just an obsessive researcher of my hobbies, and I have resources that I can link to throughout this conversation that have helped me. And I think that you should embrace having to work with HTML because you now know that you can come here and get at least one bored perfectionist to help close the gap between your current knowledge of HTML and what you want to do.