How to create a package view form


#1

Hi everyone!

I’m trying to create a package which is going to be a visual wrapper for this CLI tool. But that doesn’t matter now. What I want is to create an HTML form with default configurations.

Then, the user check if everything is fine and click on a button to submit that form. So it should send the form values to another function.

What I want to know is how do I create a form and submit it. I wrote a bunch of code only to display this option:

Have a nice day :slight_smile:


#2

I can’t read your dark screen cap but you can write the form html and submit it exactly as you would on any web page. If you want to put the form in an editor tab then I suggest checking out my html-tab package.


#3

Hi! Thanks for answering. I don’t want to put the code inside a tab, I want to put it into a modal panel on the top of editor.


#4

So you mean something like this?
It has a bunch more settings but the basic idea is:

  1. The initialize function ( your constructor ) receives a callback function and sets up events
  2. The show function sets default values and creates/shows the modal panel
  3. The event listener for pressing Enter (in Atom core:confirm) and the event listener for clicking on your Confirm button read the form values, hide the panel and call your callback function with the values as function arguments
  4. The event listener for pressing Escape (in Atom core:cancel) and the event listener for clicking on your Cancel button hide your panel

You should propably use Atom’s View class too and use its @content function to set up the HTML part.

Hope it helps


#5

Hi! Thank you a lot. I think it’s that. :smile: Tomorrow I will see it better. 10:43 pm here :smiley:


#6

It’s working @deprint. Thanks :wink:


#7

Hi

Sorry I cant see the link. I just wanted to ask how to create a popup with a form. Is that possible?
Sorry…i am a new user of atom.


#8

As far as I know, you will have to roll your own with standard html/css. There is nothing in the API to help with this. I have done this by creating the overall dom element and attaching it to body.


#9

Hi sir

I was just going through your packages and was wondering what you used to make the views ( space-pen, html etc?) I am a little stuck on how to make views and would love some guidance. Sorry for the inconvenience.


#10

Most of my packages, the older ones, used space-pen. If you tell me a little bit (or a lot) about your package maybe I can suggest something.


#11

Sorry for the delay ( I am in nz). My package is for research department at university of auckland ( and is open source). I am making it easy for students to compile a new language created at university via my package. Hence I need a popup that will allow them to enter compile options or debug etc. The package is at https://github.com/arrayoutofbounds/sysj

Thank you soo much for your help sir


#12

More detail:

Main views that are needed for me are popups. Dialogs and a debugging console. I found your projects very interesting and hence would love advice as you are really experienced in package dev.


#13

I checked out your dialog-view. Trying to add form elements directly to body won’t work, at least not in any useful way.

You need to create a div container for your form elements. It can be as simple as a fixed width height box. Make it’s position absolute with a high z-index. The append that div to body and you should see the form in the div over everything else, which is the pop-up. Hide and show that to control when it is popped up.


#14

Do I create the div normally as I already have…and then append to the body? Sorry but I am a little confused about what you meant by append to the body…do i have to use space pen for that? Or how exactly does atom allow me to append a div to itself? Sorry for the inconvenience.


#15

Yes.

You just append a div element as you tried before with the input element. This is all straight DOM manipulation. It doesn’t really have anything to do with Atom other than the fact that Atom is also in the DOM. If Atom did have a way to make a pop-up in the API it would just be helper code to do the same thing. Although they’d figure out how to make it complicated. (grin)


#16

Thanks!!! I tried to do document.body.appendChild(@dialogView.getElement()) in my sysj.coffee file in the activate method. But it wont show up. It does not seem to attach to the atom dom for some reason?


#17

If the dialog-view code is just for the pop-up then it shouldn’t be a view. Just run all the element creation code wherever you want. You need to get away from Atom things like views. Atom has no support for any kind of pop-up, view or otherwise.

Sometimes these things are too simple to understand. (grin)


#18

The link is broken, is it possible to fix/update it? I’m looking for an example of how to do exactly what you’ve described in this thread.


#19

Here is the old version.
I haven’t used modal panels in months, but it should still work.


#20

Is there something better you’ve moved on to instead of this technique? What’s the easiest, simplest way to get user input within a package?