Parameterübergabe bei Dojo?

[Flachmann]

Hallo!

Ich versuche eine Dojox FisheyeLite (http://dojotoolkit.org/reference-guide/1.10/dojox/widget/FisheyeLite.html) mit XPages zum Laufen zu bekommen. Die passt als Funktion für meine Anwendung einfach super.    Funktioniert auch soweit, allerdings können, warum auch immer, keine Eigenschaften übergeben werden, zumindest ist es das, was mir Probleme bereitet:

Code

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
	dojoParseOnLoad="true">

	<xp:this.resources>
		<xp:dojoModule name="dojox.widget.FisheyeLite"></xp:dojoModule>
	</xp:this.resources>

	<xp:br></xp:br>
	<xp:br></xp:br>

	<xp:div dojoType="dojox.widget.FisheyeLite">
		<xp:this.dojoAttributes>
			<xp:dojoAttribute name="data-dojo-props" value="properties: {height:80}">
			</xp:dojoAttribute>
		</xp:this.dojoAttributes>

		<xp:label value="ZOOM"></xp:label>
	</xp:div>
</xp:view>

Lasse ich den Wert für data-dojo-props weg, also einfach nur "", funktioniert die Box. Da mit den Properties aber das Funktionsverhalten angepasst werden soll, frage ich mich, wie ich das eingeben kann.

Ich habe an einer anderen Stelle statt data-dojo-props properties als Parameter gefunden, aber das tut es leider auch nicht:

Code

<xp:dojoAttribute name="properties" value="height:80">
</xp:dojoAttribute>

Hat jemand eine Idee ober vielleicht schon Erfolg?

[Flachmann]

Hat noch keine Erfahrungen damit gemacht und kann mir einen Tipp geben? 

[Sven Hasselbach]

Funktioniert bei mir, d.h. der DIV Container wird bei mir um den Faktor 80 vergrößert.
Mach den DIV mal farbig, dann siehst Du den Effekt.

EDIT:

Code

<xp:label value="ZOOM">
    <xp:this.attrs>
        <xp:attr value="properties: {height:80}" name="data-dojo-props" />
    </xp:this.attrs>
</xp:label>

[Flachmann]

Du hast jetzt die Dojo-Attribute unter das Label gehängt? Dort scheinen sie ohne jegliche Funktion zu sein.

Ändere mal die 80 in 03, oder so. Das ändert leider nichts, weil hier nur der Default des Fisheye genommen wird, so als ob keine Größeneinstellung angegeben ist.

Du kannst das auch so angeben, weil das Property nicht zieht:

Code

	<xp:div dojoType="dojox.widget.FisheyeLite">
		<xp:label value="ZOOM">
			<xp:this.attrs>
				<xp:attr value="height:80" name="XX" />
			</xp:this.attrs>
		</xp:label>
	</xp:div>

[Sven Hasselbach]

Stimmt, habe ich wohl nicht aufgepasst.
Probier mal passende Eigenschaften zu verwenden. Du willst einen Text vergrößern:

Code

	<xp:div
		dojoType="dojox.widget.FisheyeLite"
		style="background-color:rgb(128,0,255)">
			<xp:this.attrs>
				<xp:attr
					value="properties: {fontSize:16.50,letterSpacing:22.00}"
					name="data-dojo-props">
				</xp:attr>
			</xp:this.attrs>
		<xp:label value="ZOOM"  />
	</xp:div>
	

[Flachmann]

Kein Problem, Sven.

Es ist bei mir vollkommen egal was ich in "properties: {}" eintrage: das Ergebnis ist immer dasselbe. Ich denke, dass "data-dojo-props" einfach kein gültiger Parameter ist.

Verwende ich aber statt "data-dojo-props" "properties" und habe einen Wert, dann funktioniert das Fisheye gar nicht mehr.    Wenn ich dann "properties" falsch schreibe, z.B. "propXerties", dann funtioniert es wieder, aber mit den Default-Werten. Ich habe irgendwie das Gefühl, dass die Parameter nicht genommen werden.

[Flachmann]

Könnte aber auch sein, dass das irgendwie mit Server-Einstellungen oder meinem lokalen Browser zusammenhängt. Ich spiele mal etwas in dieser Richtung herum...

[Sven Hasselbach]

Wie sieht denn der generierte HTML Quelltext aus?

[Flachmann]

Sorry für die verspätete Antwort. Es klappt dank Deiner Hilfe nun einwandfrei. Vielen Dank!
Ich habe aus dem Teil noch eine Custom Control gemacht.  

Testseite:

Code

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
	dojoParseOnLoad="true">

	<xc:stdFisheye fisheyeProps="properties: {fontSize:1.50,letterSpacing:22.00}">
		<xp:this.facets>
			<xp:label value="ZOOM" xp:key="facetFish"></xp:label>
		</xp:this.facets>
	</xc:stdFisheye>
</xp:view>

Custom Control:

Code

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true">

	<xp:this.resources>
		<xp:dojoModule name="dojox.widget.FisheyeLite"></xp:dojoModule>
	</xp:this.resources>

	<xp:div dojoType="dojox.widget.FisheyeLite">
		<xp:this.dojoAttributes>
			<xp:dojoAttribute name="data-dojo-props"
				value="#{javascript:compositeData.fisheyeProps}">
			</xp:dojoAttribute>
		</xp:this.dojoAttributes>

		<xp:callback facetName="facetFish"></xp:callback>
	</xp:div>
</xp:view>

Und hier noch der generierte HTML-Code-Auszug:

Code

<body class="lotusui lotusSpritesOn tundra">
<form id="view:_id1" method="post" action="/Templates/XPTemplate.nsf/Test.xsp" class="lotusForm" enctype="multipart/form-data">
<br>
<br>
<div dojoType="dojox.widget.FisheyeLite" data-dojo-props="properties: {fontSize:1.50,letterSpacing:22.00}" id="view:_id1:_id4:_id5"><span class="xspTextLabel">ZOOM</span></div>