HTML collectie

[andries]

tijdens FMSummit in Gent heb ik een presentatie gegeven over mogelijkheden met de webviewer en HTML interfaces.

 

Ik had beloofd om een filetje online te gooien waar we met zijn allen wat ideetjes kunnen opbouwen. En ik heb een eerste versie online gezet: http://fmp://fms.clarify.net/NPW_html5.fmp12

 

Wat is het doel?

Het doel is om snippets op te gaan bouwen die we makkelijk kunnen implementeren in een file van ons. Er staat nu een knop "Copy" bij de preview die je toelaat om heel de code te gaan kopieren, en die je dan in een veld/variable kan kopieren.

Het is dan nog een kwestie van het "data object" op te gaan bouwen, en dit in de HTML te zetten.

 

Het moet een "platform" worden waarbij mensen code kunnen delen, gebruiken, feedback geven, etc. En zo hopelijk tot een leuke bibliotheek te komen met allemaal voorbeelden.

 

Waar staat de ontwikkeling?

Dit is echt een eerste opzet, heb het ook allemaal nog niet grondig getest, maar ik werk wel hard verder aan deze file om ze snel 100% operationeel te krijgen.

 

Op dit moment is het enkel mogelijk om code te kopieren, en moet ik nog het deel ontwikkelen "contribute". Je kan altijd via mail of via dit forum al zaken aandragen die ik er dan zelf insteek.

 

Wat kan je nu al doen?

Je kan inloggen als Guest, en dan in de file registreren. Je kan je email adres invullen als je op de hoogte wil gehouden worden van updates of nieuwe modules.

 

Geef hier gerust feedback over modules, of de file zelf, wat niet werkt, wat wel werkt etc. Je kent het wel, als je te diep in een file ziet, zie je soms dingen niet meer die zouden moeten werken.

 

Ik hoop echt dat dit iets leuks wordt!

[Peter Wagemans]

Ik heb je suggesties gevolgd en post binnen 5 minuutjes een nieuwe versie in de andere thread.

[andries]

super!

 

ik zal dan ook eens een goed voorbeeldbestandje maken.

 

Gisteren tijdens de sessie ging het over het feit dat het nog altidj niet mogelijk is om echt data te gaan pollen.

 

Bijvoorbeeld een kalender view, en een andere gebruiker voegt een evenement toe. Tot op heden zouden we de maand opnieuw moeten inladen. Ik heb nu een polling mechanisme ontwikkeld in de kalender. Als het helemaal af is, post ik het voorbeeldje (kan wel enkel met de plugin werken).

[andries]

nog een extra feature request: wvg_getPortNumber

 

gewoon om te weten op welke poort we aan het luisteren zijn.

[Peter Wagemans]

1.0.0.6 voegt de extra functie toe die je vraagt.

[andries]

videootje over FullCalendar implementatie met HTML5 Snippets library:

 

nog even wachten "youtube verwerkt de video..."

[Felix]

.

5 oktober 2015 aangepast door Gast

[andries]

 

heb het ingekort

[Felix]

.

5 oktober 2015 aangepast door Gast

[andries]

thanks!

[akpapad]

Hello Andries,

 

thank you for the video and the solution. to run a script from the calendar mode, what should be the url syntax? If you have the file local? not hosted?

 

Thanks,

Akis

[andries]

hi

 

the fmp protocol is not supported for a local file, only hosted files.

 

if you want it to run locally there are two options:

- Install OnTimer Script step

- use the webviewer helper plugin

 

1. Install OnTimer Script

 

For this to work, you need to export the HTML code to an HTML file, as we will use the hash part of the url to communicate data back.

The script that you install should read the "source" of the webviewer ( GetLayoutObjectAttribute ( "wv_calendar" ; "source" ) ) and see if there is "#" in the url.

 

In the javascript code you will push the data to the url by using the function: window.location.hash = result (or something like that).

 

The script will detect the "#" in the url, and with some textparsing you get the parameter that you need to call.

 

 

2. Use the webviewer helper plugin

 

See this thread (I hope google translate can help you with the translation): viewtopic.php?f=45&t=8310&start=75

 

This plugin transforms your FileMaker Pro client into a mini webserver where you can communicate via HTTP. The url would be:

 

http://:/?script=&param="

[andries]

de webviewer helper implementatie is aangepast om met de nieuwe http status codes te werken:

 

	var filemaker = {
		host: '127.0.0.1:10234',
		fmEvaluate: function(fmFunction,callback){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState===4){
					if (xmlhttp.status === 200 )
						var result = xmlhttp.responseText;
					else if (xmlhttp.status === 500 )
						var result = "ERROR: " + xmlhttp.response;
					callback(result);
				}
			}	
			var url = 'http://' + this.host + '/e' + encodeURI(' ' + fmFunction);
			xmlhttp.open('GET', url, true);
			xmlhttp.send();
		},
		fmRunScript:	function(fmScript,callback){
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.onreadystatechange = function(){
				if(xmlhttp.readyState===4){
					if (xmlhttp.status === 200 )
						var result = xmlhttp.responseText;
					else if (xmlhttp.status === 500 )
						var result = "ERROR: " + xmlhttp.response;
					callback(result);
				}
			}	
			var url = 'http://' + this.host + '/s' + encodeURI(' ' + fmScript);
			xmlhttp.open('GET', url, true);
			xmlhttp.send();
		},
	}

[Peter Wagemans]

Andries, die kalender van La Source, gebruikt die dan on timer scripts?

[Peter Wagemans]

Even voor alle duidelijkheid. De JavaScript callback functie zal niet het resultaat van het script opvangen zoals we dat in Filemaker kennen met Get(ScriptResult). De callback is de plug-in die zegt: "ja, het is gelukt om het script te starten", of "nee, niet gelukt om die of die reden".

 

Andries en ik hebben al aan het brainstormen geweest over hoe script resultaten op te vangen in de JavaScript code.

1 mogelijkheid is het instellen van een $$ variabele en die dan via een evaluate call achteraf op te vragen. Timing is hier een belangrijke issue want je weet wel vanuit JavaScript dat het script gestart is, maar niet dat het afgelopen is.

 

Ik laat toe dat de webviewer plug-in luistert tijdens het runnen van een script, dus denk aan een evaluate poller om te kijken of Get(CurrentScriptName) al terug leeg is. Misschien werkt dat wel, het testen waard.

[andries]

mooie denkpiste, in mensentaal zou ik zoiets dan doen:

 

-> roep script aan
-> kijk of scriptnaam er is
    -> indien ja -> kijk of variabele er is
              -> indien ja -> callback (script heeft variabele gedeclareerd)
              -> indien nee -> opnieuw testen
    -> indien nee -> callback (script is gedaan, geen variabele gedeclareerd)

 

nu dit in asynchroon javascript krijgen

[andries]

de kalender van lasource gebruikt denk ik het fmp script protocol. kan je zelf testen door je debugger aan te zetten.

 

 

De file is nu verplaatst, dankzij Peter hebben we nu een echte FileMaker Clarify Server, waar de file nu gehost wordt. De url is in de eerste post aangepast.

[Peter Wagemans]

De eerste testresulaten zijn positief.

 

Dit moet je eens proberen. Maak een script "myScript":

 

Set Variable [$$_DATA; Value:Get ( ScriptName ) & " running"]
Loop
Exit Loop If [$$_DATA = "end"]
End Loop
Set Variable [$$_DATA; Value:Get ( ScriptName ) & " done"]

 

Run dit in FileMaker.

 

Vanuit de browser:

 

http://localhost:10234/e%20$$_DATA

geeft als resultaat

 

myScript running

 

De plug-in is dus in staat om evaluates uit te voeren terwijl het script runt, zelfs als het NIET even pauzeert.

 

Daarentegen, een script uitvoeren via URL zal niet lukken, het wordt gequeued achter het loop script en zal pas runnen als dat script beëindigd is.

 

Probeer je nu:

 

http://localhost:10234/e%20let($$_DATA=%22end%22;1)

Dan evalueer je een calculatie die de $$_DATA variable op "end" zet, en het script gaat de loop uit.

 

Hier hebben we denk ik genoeg aan om niet alleen de outcome van het script te controleren, maar zelfs het script tijden het runnen te sturen.

 

De WebViewer plug-in gaat per default een gepauzeerd script opnieuw pauzeren als het een script via URL lanceert. Ik kan mij voorstellen dat het handig kan zijn om deze default behaviour te overriden met een resume. Wie snapt wat ik bedoel en dit kan gebruiken, laat maar weten.

[Peter Wagemans]

Ik ben geen grote held in JavaScript, maar heb me hier toch een keer mee bezig gehouden.

 

Hier een voorbeeldje van een webviewer die een script oproept, dat script toont een dialoog, op die dialoog wordt geantwoord en dat resultaat wordt terug doorgegeven aan de webviewer.

 

Terwijl ik hier mee stoei zie ik dat er in de FileMaker class nog heel wat methods mankeren.

Andries ik hoop dat je de tijd vind om alle mogelijke methods te implementeren, ik denk hier aan het doorgeven van een control parameter, want nu doe ik een call naar het "Halt" scriptje, maar dat kan natuurlijk iets eleganter. Ik vind ook dat de host en poort moeten kunnen ingesteld worden met een functie, en de authenticatie is ook nog niet geimplementeerd.

 

Natuurlijk ben je dat van plan. Maar ik ben een ongeduldig ventje...

 

Eigenlijk zou de polling die ik hier doe in de bibliotheek als een optie kunnen bestaan, het is veel beter dat die interval variabele goed gecontroleerd wordt, in plaats van slechte javascript zoals de mijne hier te moeten toepassen. Ik wil hier alleen het principe uit de doeken doen, en hoop in de toekomst zo weinig mogelijk javascript te moeten schrijven en voor al die dingen beroep kunnen doen op library calls.

Getting ScriptResult.fmp12

[andries]

He Peter

 

het filemaker object is inderdaad nog niet helemaal uitgewerkt zoals het hoort, maar je blijft ook altijd maar nieuwe features aandragen he. Op dit moment is het zelfs zo erg dat er twee versies bestaan...

 

Wat ik ga doen, een filemaker object maken dat:

- de evaluate functie gaat aanroepen via "e"

- een script gaat aanroepen via het uitgebreide protocol, waar je ook de naam van een variabelen kan ingeven voor het resultaat, en een timeout (anders blijft javascript mss wel eeuwig wachten), en dat je daar ook de authenticatie kan ingeven.

 

je kan al de host en zo aanpassen, door gewoon: filemaker.host = "192.168.2.2" bijvoorbeeld in je code te zetten. Je kan zo attributen aanpassen, en je hebt daar geen setters of getters nodig zoals in andere "fancy" talen

[andries]

wel super cool trouwens!!!

[Peter Wagemans]

je kan al de host en zo aanpassen, door gewoon: filemaker.host = "192.168.2.2" bijvoorbeeld in je code te zetten. Je kan zo attributen aanpassen, en je hebt daar geen setters of getters nodig zoals in andere "fancy" talen

Zo zie je maar hoe goed ik JavaScript in de vingers heb. Is ooit beter geweest, maar toen was JavaScript veel slechter

 

wel super cool trouwens!!!

Ja, maar ik ben niet zo tevreden of die e%20 syntax. Maar een "file?evaluate=..." is misleidend omdat ik geen pointer naar een environment kan zetten en daarna buiten die environment hergebruiken. In mensentaal: he is niet mogelijk de context naar een andere bestand te verzetten. Dus de huidige syntax moet maar blijven, ik zie trouwens dat FileMaker zelfs zo'n URLs fabriceert.

Huiidige timer instelling 100 milliseconden in de javascript timer. Kan waarschijnlijk verdubbeld zonder dat je 't merkt, maar ik zie heel weinig impact op de CPU, dus kan geen kwaad.

[Peter Wagemans]

De interval queries geven enorm veel mogelijkheden.

 

Je webviewer kan als het ware constant FileMaker in de gaten houden. Als je met $$ variabelen werkt in FileMaker scripts, dan kan de webviewer continue veranderingen detecteren en zichzelf up-to-date houden hiermee.

 

Als ik het interval mechanisme in JavaScript een beetje snap, kun je zelfs meerder interval queries aanmaken om verschillende zaken in FileMaker te checken.

Weerom lijkt het me een goed idee om het management van die interval scripts te laten managen door de filemaker class, maar waarschijnlijk heb ik gemakkelijk praten, en is dit helemaal niet zo simpel. Andries?

[andries]

ik maak er vanavond nog eens werk van!

 

Whisky en sigaren gekocht

[Peter Wagemans]

Ik begin er wat in te komen.

 

Weliswaar met een eigen bestandje, omdat ik nog wat moeite heb om de online file op fmp://fms.clarify.net/NPW_html5.fmp12 te begrijpen.

 

Ik heb de code wat opgeruimd, en mijn filemaker class heeft wat meer cochones. Support voor authentication, scriptcontrol en parameters ingebouwd, dus op het nieuwe fmp style protocol gebaseerd.

 

Het voorbeeldje roept nu het script op, haalt de button result van de dialoog op, en gaat verder met het script. Het "Halt" script is vervangen door een "Resume" script.

 

Wat mij opvalt is de inconsistency van FileMaker in functies zoals Get ( LastMessageChoice ) en Get ( ScriptResult ).

Get ( LastMessageChoice ) blijft aanwezig in de Data Viewer na het uitvoeren van een script, Get ( ScriptResult ), daar kan je naar fluiten. En dat zou eigenlijk heel handig geweest zijn.

Getting ScriptResult.fmp12.zip

[andries]

he Peter

 

kan je wat werkpunten meegeven? begin met de grote lijnen, nadien zakken we af naar de detail

 

ik zit zo met mijn neus in die file, dat ik weet waar naar toe. Maar je bent niet de eerste die feedback geeft dat het te ingewikkeld is.

 

Groetjes

 

Andries