Apps in IMatch 2017

Started by JohnZeman, March 04, 2017, 11:37:08 PM

Previous topic - Next topic

JohnZeman

Hi Mario...Got a question..

Will an app which only uses html, CSS, and JavaScript that currently works in IMatch 5 also work in IMatch 2017 with little or no modifications?

Specifically I'm referring to my collapsible metadata viewer app in the app gallery.

Thanks...  :)

Mario

#1
Since the old scripting interfaces are no longer supported, you need to switch your app to use the IMWS methods.
HTML code etc. will run, but you need to change the parts which access IMatch data or parse variables.

Depending on how you have created your script this should not take long.

Note: The "Parse HTML and automatically replace all variables" type of template is no longer supported. t never worked that well and was only usable for the most basic things anyway.
Collapsible panels can be done in pure CSS in seconds thanks to the Bootstrap CSS library which is a standard part of IMatch scripting.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

JohnZeman

Thanks Mario, that's what I was looking to find out.

Mario

I would recommend you setup a new "app" which does everything except parsing variables / retrieving metadata.
The rest can be done once IMatch 2017 is out.

Demo 2 in the developer center

https://www.photools.com/imatch-anywhere/imatch-anywhere-developer-center/ima-dev-demo-2/

should be a good start. It includes jQuery and Bootstrap etc. If you comment out the code that calls into IMWS, you can use this to play around and see how things work.
The collapsible panels in Bootstrap are cool:

Example: http://getbootstrap.com/javascript/#collapse

I think the Accordion example is what you are looking for.

Combine them with a table or something and you have most of what you need to your app.
The Demo includes Boostrap and everything else you need. Just add your panels and display code  :)

-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

JohnZeman

Thanks again Mario.  I took a look at that sample code and it's very similar to coding I've written for some of my web sites.

Mario

#5
That's one of the advantages of the new scripting environment in IMatch 2017...
...if you learn a bit about HTML and JavaScript, you can also use this know-how for many other things.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

sinus

Quote from: Mario on March 06, 2017, 08:52:55 AM
That's one of the advantages of the new scripting environment in IMatch 2017...
...if you learn a bit about HTML and JavaScript, you can also use this know how for many other things.

Yes, and so we are with IMatch quite modern, I think.  ;D
Best wishes from Switzerland! :-)
Markus

Mario

Quote from: sinus on March 06, 2017, 09:13:51 AM
Yes, and so we are with IMatch quite modern, I think.  ;D
Yes. IMatch Anywhere, IMatch WebViewer and the scripting system in IMatch 2017 uses current web technologies. We can now use all the fascinating tools and technologies that are created for 'the web'. I expect some very cool and helpful / time-saving additions for IMatch 2017 coming from that.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

sinus

Quote from: Mario on March 06, 2017, 10:10:59 AM
I expect some very cool and helpful / time-saving additions for IMatch 2017 coming from that.

Yes, me too.
I am trying to do some lerning of JS, as I wrote here once.

Current I have a "project" and created this (see attachement).

But creating means for me; look here and there for some codes, tries here and there to find an answer for a problem and finally cut all code together and ok, write here and there something on my own.

I do not know the expression for such a "coder", but without finding codes and cut it into my lines, I would be helpless.
But finally the code works and yep, it is cool, if I see this code, like here, on my pc but also I can see the same result on my handy or tablet.

That makes really fun and I think, the same could be with IMatch Anywhere.  ;D

I am sure, John is miles aheas of me and will or has created some cool scripts.
And yes, we have all the fine examples of you, Mario, what are of course very good for lerning or/and using it for real with IMatch.




Best wishes from Switzerland! :-)
Markus

Mario

QuoteBut creating means for me; look here and there for some codes, tries here and there to find an answer for a problem and finally cut all code together and ok, write here and there something on my own.
I do not know the expression for such a "coder", but without finding codes and cut it into my lines, I would be helpless.

That's perfectly normal. Nobody knows it all, and when you learn programming or you learn programming in a new language or with new tools, you better learn from others who already did it.
When I learn something new I always try to find some "best practices" articles. This helps to avoid a lot of common beginner mistakes.

I look at what is current (which changes very often in web development because things move so fast) and then use it. I'm always prepared to 'refactor' my code (which means throw away parts and make them new, better). Web technology is fluid and "ship early, ship often" is standard. Since the workflow (you make a change, press <F5> in the browser and see the result) is so fast, you can achieve lots in little time.

And the developer tools in the browsers (debugger, performance analysis, network monitor, DOM inspector) are awesome.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook

dpop100

One of the features I used most in iMatch 5.x was the Collapsible Metadata Viewer. Even though I am at a loss with HTML, I was able to modify it slightly to meet my needs in iMatch 5.x. With the upgrade to 2017 I fell like I lost part of my environment!  I hope there is someone out there that might be interested in developing something like the Collapsible Metadata Viewer to return this valuable feature.

David

sinus

Quote from: dpop100 on June 28, 2017, 03:38:26 AM
One of the features I used most in iMatch 5.x was the Collapsible Metadata Viewer. Even though I am at a loss with HTML, I was able to modify it slightly to meet my needs in iMatch 5.x. With the upgrade to 2017 I fell like I lost part of my environment!  I hope there is someone out there that might be interested in developing something like the Collapsible Metadata Viewer to return this valuable feature.

David

The Collapsible Metadata Viewer made John. A very nice script.

Maybe one day he will do it in JS, but of course this depends on his own work, what he has to do. And/or if he want programm this script new in JS.

The longer IMatch2017 is out, the more scripts (I hope) will be here for using. If I could write JS much more better, I had programmed such a script and others, but I am still at the very beginning of lerning JS (JavaScript).
Best wishes from Switzerland! :-)
Markus

Mario

Writing such a script should be much easier in JavaScript than it was in IMatch 5.

Bootstrap, the CSS framekwork used by IMatch, already offers all the tools needed, e.g. the collapsible panels.
W3Schools has some nice examples here:

https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

All that is missing is some code that retrieves the data required (basically one call to /files) and then puts the data into the panels as need.

A very nice app for beginners.

- First create the basic app.
- Then add some collapsible panels by copy/paste from the W3Schools web site. Hard coded text.
- Then make the /files endpoint call and use jQuery to put real data into the panels.
-- Mario
IMatch Developer
Forum Administrator
http://www.photools.com  -  Contact & Support - Follow me on 𝕏 - Like photools.com on Facebook