How do I display an HTML pop-up window using the ATOM API?


#1

I’d like to display a pop-up window containing HTML from an external source from within an ATOM package.

The following code does what I want. Is this a legitimate method for doing this? If not, is there a more legitimate way:

    {BrowserWindow} = (require 'electron').remote
    popup = new BrowserWindow({width: 800, height: 600, title: 'Hello'})
    popup.loadURL('http://atom.io')

#2

The best way would be to use the Atom API to create a panel and display the page within that.

What’s your end goal?


#3

I’m sending data to a device on my local network, which responds with an html page. I want to display the complete html page to the user from within Atom. I’ve used panels for html that I generate myself (using DOM functions), but I was looking for a way to display an html file coming from an external source. Creating an Electron BrowserWindow seems like an easy way to do what I want, but I suspect it’s outside the realm of what’s considered a valid use of the Atom API.


#4

It’s perfectly valid. And it is the only way to display a second window.


#5

Is there a minimal example somewhere of opening a browser window within a toggle-able atom panel? The active editor info example from chapter three of the flight manual shows how to render unresponsive HTML, but I’m trying to use interact.js within a panel and can’t find examples of responsive click/drag JS in an Atom panel. (The git-time-machine looks like a marvelous UI built on D3, but it’s far from a minimal learning example…)


#6

You’re asking about two completely separate things. For a browser, I would recommend you to browser-plus. You can open a URL in browser-plus from a package using atom.workspace.open() (as long as you have browser-plus installed and no other opener looking for http://, all URLs should open in that package). If you’re just creating a panel to display information from your package, then the HTMLElement or object that you pass to the open command as the item just has to be able to update itself, which can happen through raw DOM manipulation if nothing else. I know the theory about how all of this works, but I haven’t actually attempted to implement a library meant for the browser inside an Atom panel. It shouldn’t be that hard to figure out.


#7

Thank you for this response. I’m sorry to have been unclear. I’m creating a new Atom Package, and I want to open a panel that the user will click/drag objects around in; for this reason, I need to serve and display html and js code that will be sitting on the user’s machine locally.

I’m able to display information to an HTMLElement easily, as you suggest, but I’m having trouble turning this panel into anything mouse-interactive – even the most basic responsive code examples I can find don’t work when I add them as the inner html of a panel element.

For example, something as basic as a button that displays the time works fine in a browser, but not as this.element.innerHTML in my view class’s constructor.

Based on the flight manual’s tutorial, this is the sort of thing I’m departing from, in the view’s constructor:

constructor(serializedState) {
    // Create root element
    this.element = document.createElement('div');
    this.element.classList.add('lilyformalist');
    this.element.innerHTML =
    `

  <p>Click the button to display the time.</p>

  <button onclick="getElementById('demo').innerHTML=Date()">What is the time?</button>

  <p id="demo"></p>
    `

  }

…which displays a clickable button but does not respond by displaying the date/time when clicked – perhaps because I just need to detect a click event and refresh the panel view somehow?

Anyway, I hope this clarifies what I was hoping to ask about – I need the basic example above to behave in my package’s panel as it does when rendered in any web browser: clicking the button should change the HTML and refresh the display.

I can only come up with tortuous solutions so far, like serving my package’s html with the live-server package and then opening up a web view to the served local host, but trying this out quickly got me into a state where Atom would no longer display my project.


#8

It looks like the etch node package does what I need: it provides a virtual DOM for simplifying the development of Atom and Electron packages.


#9

Yes, I was going to suggest etch for you to look at. I think the live-server solution is viable if you use browser-plus, and in some cases it might be the best. If you did that, you would be able to make an entirely separate UI with no real interaction with the rest of Atom (although it’s still spawned by your package and thus should be able to communicate via the API). Maybe that’s what you want, but it also might be the case that you want to wrap interact.js in an etch component much like this react package. It might (if you’re lucky) be the case that react-interactjs actually works with etch already, either out of the box or with very minor tweaks (specifically, changing calls to react and react.dom to etch and etch.dom). This is worth trying. If it doesn’t, then react-interactjs can serve as a model for what you ultimately want to build with etch. If you do pursue that, I would recommend splitting the component code into its own file and perhaps even making it available as a separate package on NPM, because it could be useful for the Atom community to have an easy drag-and-drop component.