First lern with Mario's App samples

[sinus]

I am trying to lern some JS. 
And I think, the sample-app from Mario "File Window" is a good start for me

Because it shows, how many files are selected, shows the focussed file and reacts immediately on changing the selection.
And I can even open the selection in a Result Window.
Cool stuff but for me interesting:

it seems  to be not toooo complicated.
I copied it and can not try myself some stuff.

First I will try to read a metadata and hold this metadata as a variable.
Then I will try to change this variable with an input - box.

Because for me is not quite clear, how working with variables, like read the headline, e.g.

a) Tomatoes

And in an input field (what is empty), I can write b) "apples" and

the result would displayed in another field c "Tomatoes and apples".

Trivial for most of you, but not for me.  ... specialy, what happens with the variable, if I change the selection and/or focus.

Hence I hope, if I play a bit with this sample, I can "check" this once really, this sample seems really to be cool.


BTW: if I write sometimes such stuff here, I can remember later by myself and sometimes it helps users, how are on the same level (what is here very little)

[Mario]

I'm not quite sure if you are asking a question in all that text...??

I assume you studied the HTML form examples (https://www.w3schools.com/html/html_forms.asp) at w3schools already?
They explain how HTML forms work (to allow the user to input text, for example).
They also have a tutorial which explains how you can set and get the values of form elements via jQuery.

The Boostrap web site (https://getbootstrap.com/docs/3.3/css/#forms) explains how to create cool looking forms quickly.

All links are available in the Developer Center

Don't try to figure this out "somehow" by peeking and poking around. You will learn it wrong and then have tons of problems down the road.
Best to see how it's done properly and then do it the same way.

Start with a simple HTML page that displays a form. Use the examples on the Bootstrap web site to copy/paste your form together. Might look a bit strange at first, but works and even makes your form responsive (working on all devices) out of the box.

Once you have your form, getting / setting form values is easy. Typically you have something like

<input id="my-data" type="text" class="form-control">

and then you get set the value of that control using jQuery

$('#my-data').val('This is my text');

or get it

var temp = $('#my-data).val();

Many of the example apps with IMatch display forms, get user input, do stuff with that input etc. Enough to get you stared.

But you have to read the w3schools HTML form tutorial to understand what's going on.

[thrinn]

Markus,
I will try to rephrase what you want to do. If I misinterpreted your post please correct me.

specialy, what happens with the variable, if I change the selection and/or focus.

Per se nothing happens to the variable at all. There is no automatic link between a (JavaScript) variable and an (HTML) input field or an (IMatch) Metadata tag.
But you can establish such a link (kind of, anyway) by reacting on events like "the selection has changed" or "there was an input in the field". I think what you want to do is:
If the selection in the file window changes, you want to "update" you variable with e.g. the description. To achieve this, your app hasa to react on some of the messages IMatch sends whenever a "selection change" event occurs. This is what happens in function openWebSocket() in the File Windows app: Whenever the app receives a fileWindow.selectionChanged message, it calls updateInfo. To translate this to your example: In updateInfo() you would put code to read the headline of the newly selected file(s) into your variable, using GET v1/metadata or whatever. This first step fulfils the first of your requirements,  (a): If you change the selection to a file which has "Tomatoe" as headline, your variable will contain this string, too. To see the result on the screen in your field (c), you add a code line to concatenate the variable and your other input field (b).

Code Select Expand


$("#field_c").val( yourVariable + $("#field_b").val() ):

(This is oversimplied, you should add some spaces, or "AND", between the parts).

Now, you want to go one step further: You have an input field (b) which will be filled by hand. If the content changes, this change should be reflected in your "result" field (c). Again, you use the event concept to "listen" for changes in the input field and taking appropiate actions. But while the concept is the same as above, the syntax is slightly different: For HTML input fields, have a look at the Attribute Calculator App. You will find some code lines like this:

Code Select Expand

<td><input class="form-control" type="number" step="any" name="attr_tax" id="attr_tax" oninput="app.recalculate()"></td>

The interesting part here is oninput="app.recalculate()": Some function app.recalculate() is called whenever the content of the input field changes. In the function that is called you can use the same code as above to fill your result field (c).

Bottom line:
For "doing something when some other thing happens" you use event listeners (= functions that are called whenever the event is fired).
IMatch sends events whenever specific things happen. You must check the message from IMatchwebSocket().onmessage if the event is something you want to react on.
HTML elements send (other) events, depending on the type (like the "click" event of a button or "input" event of an input field). Here, you can use the on<event> attribute directly on the element to install you event listener.

[sinus]

Hi Mario and Thorsten

Thanks a lot for your input, both of you!!!

It is exactly, what will help me.
I looked for example in the w3 and in the bootstrap-site, but I could not find really the correct side.
Now, your link, Mario, helps me very much and also your "warning", not to poking around  is very wise and just a good hint for me. 

And Thorsten, yes, what you wrote, is also correct and you have interpreted fully right. 
And your line from your Attibute Calculator is very common for me in the meantime, no problem to find it.

I have now a lot to, you gave me some "brain-food" for the weekend, to read and lern ... 

Thank you very much, both of you!