Du bist nicht angemeldet. [Anmelden]
Optionen
Thema bewerten
HTMLUI: Ausgabe von aktuellen Nutzerdaten - #2859764 - 08.08.2017, 20:52:03
Tagtraum
Famil​ymitg​lied​

Registriert: 08.04.2003
Beiträge: 94
So sieht meine Beispiel-start.html aus:

Html:
<html>
	<head>
		<meta charset="utf-8" />
		
		<script src="/apps/api/knuddels-api.js"></script>

		<script>
			Client.includeCSS('style.css');
			Client.includeJS('/apps/api/jquery.min.js');
			Client.includeJS('eins.js');
		</script>
	</head>
	<body>
		<div id="game">
			<div id="header"></div>
			<div id="playtext">Hier ein Text</div>
			<div id="playbutton">Hier klicken</div>
		</div>	
	</body>
</html>


Dazu die eins.js:

Code:
var nickname = Client.getNick();

var irgendwas = user.getPersistence().getNumber('irgendwas', 0);

// var inhalt = document.getElementById('playtext');

document.getElementsByTagName('div')[0].innerHTML = "Absatz durch JavaScript geändert "+irgendwas;
document.getElementsByTagName('div')[1].innerHTML = "Absatz durch JavaScript geändert "+irgendwas;
document.getElementsByTagName('div')[2].innerHTML = "Absatz durch JavaScript geändert "+irgendwas;


Ich probiere mich gerade zum ersten Mal an der HTML-UI, darum versuche ich ein paar Grundlagen.

Mit obigem wollte ich erreichen, dass in der HTML-UI die Zahl aus dem Feld "irgendwas" in der UserPersistence angezeigt wird. Obiges mit document.getElementsByTagName funktioniert aber nicht, es bleiben die alten Werte aus start.html.

Gibt es hier einen Fehler bzw. wie müsste man das umsetzen, wenn es nicht wie oben möglich ist?
Die Anzeige in der UI sollte sich auch automatisch ändern, wenn sich der entsprechende Wert in der UserPersistence ändert, zum Beispiel durch chatcommands aus der main.js.



Bearbeitet von Tagtraum (08.08.2017, 20:52:47)

[zum Seitenanfang]  
Re: HTMLUI: Ausgabe von aktuellen Nutzerdaten [Re: Tagtraum] - #2859767 - 08.08.2017, 20:56:34
DerNeuanfang
​Keksimperator

Registriert: 29.10.2007
Beiträge: 354
Ort: Cybernet
Hey,

Zur HTML UI habe ich 3 Videos veröffentlicht.

Ich denke, dass gibt dir einen kleinen Einblick wie das mit der Kommunikation zwischen Client und Server funktioniert.

Youtube Chat-Apps Tutorials


PS: Du Kannst im CLient nicht mit getPersistence() oder so arbeiten. Das solltest du dann alles vom Server zum Client senden. :-)


Bearbeitet von DerNeuanfang (08.08.2017, 20:57:27)
_________________________
Desto mehr Käse desto weniger Löcher.
Desto mehr Löcher desto weniger Käse.
Also mehr Käse desto weiniger Käse ?!?

[zum Seitenanfang]  
Re: HTMLUI: Ausgabe von aktuellen Nutzerdaten [Re: Tagtraum] - #2859792 - 08.08.2017, 22:36:34
Senzious
I'm n​ot a ​Hero​

Registriert: 10.11.2015
Beiträge: 72
Ort: Germany
Das sollte dir helfen:

main.js ({APPCONTENT} durch deinen Code ersetzen. Am besten schaust du hier das an...
Code:

	this.onAppStart = function onAppStart() {
	
		KnuddelsServer.getChannel().getOnlineUsers(UserType.Human).forEach(function(user) {
		
			if(user.canSendAppContent({APPCONTENT}) {
				user.sendAppContent({APPCONTENT})
				{APPCONTENT}.sendEvent('eventReceived', {
				
					OnlineMinutes: user.getPersistence().getNumber('OnlineMinutes', user.getOnlineMinutes()),
					Irgendwas: 'Irgendwas...'
				
				});
			}
		
		});
	
	}


eins.js
Code:
	(function($) {
	
		Client.addEventListener('eventReceived', function(e) {
		
			var data = e.data;
			
			document.getElementById('OnlineMinutes').innerHTML = data.OnlineMinutes;
			document.getElementById('Irgendwas').innerHTML = data.Irgendwas;

		});
	
	});


html.js
Html:
	<div id="OnlineMinutes">0</div>
	<div id="Irgendwas">...oder auch nicht!</div>


Aber schaue dir trotzdem die Youtube-Videos von DerNeuanfang an! Die sind wirklich hilfreich und für deinen Anfänger für dich erfährst du dort nützliche Hinweiße und Tips!


Bearbeitet von Senzious (08.08.2017, 22:38:35)
_________________________
Mit freundlichen Grüßen,
Senzious

[zum Seitenanfang]  
Re: HTMLUI: Ausgabe von aktuellen Nutzerdaten [Re: Senzious] - #2859797 - 08.08.2017, 22:46:43
Senzious
I'm n​ot a ​Hero​

Registriert: 10.11.2015
Beiträge: 72
Ort: Germany
Muss mich korrigieren! Nicht user.getPersistence().getNumber('OnlineMinutes', user.getOnlineMinutes()) sondern user.getPersistence().getNumber('OnlineMinutes', 0) oder deine Persistenzuser.getPersistence().getNumber('irgendwas', 0).

Kannst natürlich auch andere Dinge nutzen..


Bearbeitet von Senzious (08.08.2017, 22:47:28)
_________________________
Mit freundlichen Grüßen,
Senzious

[zum Seitenanfang]  
Re: HTMLUI: Ausgabe von aktuellen Nutzerdaten [Re: Senzious] - #2860230 - 11.08.2017, 18:16:06
Tagtraum
Famil​ymitg​lied​

Registriert: 08.04.2003
Beiträge: 94
Danke für die Rückmeldungen, die Youtube-Videos werde ich mir demnächst gönnen.

@Senzious: Im Beispiel steht

Zitat:
main.js ({APPCONTENT} durch deinen Code ersetzen.


Was für Code sollte das sein? Mir geht es nur um das Übertragen der Persistenz-Daten in die HTML-UI und ich verstehe noch nicht, was für Code in {APPCONTENT} stehen soll und wozu das überhaupt gebraucht wird.

Könntest du zur Klärung dieser beiden Fragen im Beispiel {APPCONTENT} durch Beispielcode ersetzen, ein Beispiel das so einfach wie möglich ist? Dann wird es mir und anderen HTML-UI-Einsteigern, die den Thread später lesen, vielleicht klarer.

[zum Seitenanfang]  
Re: HTMLUI: Ausgabe von aktuellen Nutzerdaten [Re: Tagtraum] - #2860355 - 12.08.2017, 21:59:00
Senzious
I'm n​ot a ​Hero​

Registriert: 10.11.2015
Beiträge: 72
Ort: Germany
{APPCONTENT} sollst du ganz einfach durch das ersetzen:
Code:
var appContainer = AppContent.popup/overlayContent(new HTMLFile('file.html'), 200, 200);


Und eben {APPCONTENT} mit appContainer ersetzen :-)

Du brauchst ein AppContent, damit du ein Overlay/Popup öffnen kannst. Dies passiert beim starten der App mit meinem Code automatisch. (In diesem Fall ein Overlay)
Code:

	this.onAppStart = function onAppStart() {

	        var appContainer = AppContent.overlayContent(new HTMLFile('file.html'), 200, 200);
		KnuddelsServer.getChannel().getOnlineUsers(UserType.Human).forEach(function(user) {
		
			if(user.canSendAppContent(appContainer) {
				user.sendAppContent(appContainer);
                                appContainer.sendEvent('eventReceived', {});
			}
		
		});
	
	}


Sobald die Funktion aufgerufen wird, wird ein Event an AppContent gesendet:

Code:
appContent.sendEvent('eventReceived', {});


Bei sendEvent ist hier im Beispiel eventReceived der Key. In deiner eins.js müsste das dann wie folgt aussehen:

Code:
Client.addEventListener('eventReceived', function(e) {
  var data = e.data;
});


Möchtest du nun beispielsweiße eine Persistenz von einem User auslesen, so musst du diesen im Event mit verschicken:

Code:
appContent.sendEvent('eventReceived', { UserPersistenceNumber: user.getPersistence().getNumber('irgendwas', 0) });


Das ganze fängst du in deiner eins.js wie folgt ab:

Code:
Client.addEventListener('eventReceived', function(e) {
  var data = e.data;
  var getUserNumber = data.UserPersistenceNumber;  
});


data.UserPersistenceNumber ist jetzt sozusagen dein user.getPersistence().getNumber('irgendwas', 0);

Um es in der HTMLFile auslesen zu können, musst du folgendes nun machen:

eins.js
Code:
Client.addEventListener('eventReceived', function(e) {
  var data = e.data;
  var getUserNumber = data.UserPersistenceNumber; 

  document.getElementById('test').innerHTML = getUserNumber;

});


file.html
Html:
  <div id="test"></div>


Im DIV Bereich "test" wird nun ausgegeben, welche Nummer der User in user.getPersistence().getNumber('irgendwas', 0); gespeichert hat. Falls nichts, wird 0 ausgegeben.

Ich hoffe es ist nun verständlicher :-)


Bearbeitet von Senzious (12.08.2017, 22:04:25)
_________________________
Mit freundlichen Grüßen,
Senzious

[zum Seitenanfang]  
Re: HTMLUI: Ausgabe von aktuellen Nutzerdaten [Re: Tagtraum] - #2860356 - 12.08.2017, 22:07:23
Senzious
I'm n​ot a ​Hero​

Registriert: 10.11.2015
Beiträge: 72
Ort: Germany
Achtung. Ich habe mich bei appContent verschrieben, soll natürlich appContainer (wie var appContainer) heißen.
_________________________
Mit freundlichen Grüßen,
Senzious

[zum Seitenanfang]  


Moderator(en):  unamiable