I have a panel which is partly off-screen, put there by a move effect with mode=“toOffset”.
The effects seem to work fine, but I can’t interact with the part of the panel which is in-screen (namely, a button).
When I click on another element, the panel jumps into the screen and then I can interact with it, but when I move it out again with the move effect, the button becomes unresponsive.
Here is my xml:
[xml]<!-- Left main panel -->
<panel childLayout=“absolute” width=“340” height=“400” id=“left_main_panel” x=“0” y="${CALL.getMiddleOfScreenY(400)}"
controller=“com.limewoodGames.holicity.client.gui.controllers.LeftPanelController”>
<effect>
<onStartScreen name=“move” mode=“toOffset” offsetX="-300" length=“0” startDelay=“0” inherit=“true” neverStopRendering=“true” />
<onCustom name=“move” customKey=“open” mode=“toOffset” offsetX=“0” length=“200” startDelay=“0” inherit=“true” neverStopRendering=“true” />
<onCustom name=“move” customKey=“close” mode=“toOffset” offsetX="-300" length=“200” startDelay=“0” inherit=“true” neverStopRendering=“true” />
</effect>
<panel childLayout=“vertical” width=“300” height=“400” backgroundColor="#77777777"
padding=“5px” x=“0” y=“0”>
<control name=“nifty-tabs” id=“tabs_panel” buttonWidth=“33%”>
<control id=“tab_groups” name=“nifty-tab” caption="${labels.community_groups}">
<panel childLayout=“vertical” width=“100%” height=“100%” style="">
<control name=“listBox” id=“groups_list” width=“100%” height="*"
vertical=“on” horizontal=“off” displayItems=“15” selection=“Single”
viewConverterClass=“com.limewoodGames.holicity.client.gui.community.GroupViewConverter”>
<control name=“group-list-item”/>
</control>
<control name=“button” id=“create_group_button” align=“center”
label="${labels.community_create_group}">
<interact onClick=“createGroup()”/>
</control>
</panel>
</control>
<control id=“tab_friends” name=“nifty-tab” caption="${labels.community_friends}">
<panel childLayout=“vertical” width=“100%” height=“100%”>
<text style=“base-font” text=“Friends tab”/>
</panel>
</control>
<control id=“tab_reputation” name=“nifty-tab” caption="${labels.community_reputation}">
<!-- <panel childLayout=“vertical” width=“100%” height=“100%”> -->
<text style=“base-font” text=“Reputation tab”/>
<!-- </panel> -->
</control>
</control>
</panel>
<!-- Left main menu -->
<panel id=“left_main_menu” childLayout=“vertical” width=“40” x=“300” y=“100”
padding=“5px” backgroundColor="#77777777">
<control name=“button” id=“show_test_button” label=“T” width=“30px”>
<interact onClick=“showTest()” />
</control>
</panel>
</panel>[/xml]
Does anyone know why the panel is unresponsive when partly off-screen?
Other panels are not, when moved by dragging.
Well, after some more experimenting, I found out why it was unresponsive.
The effect didn’t actually move the panel, rather it rendered its image in a different place, so when the effect was over and the panel looked to have moved, it actually hadn’t.
I solved it by using an “onEndEffect” callback on the effects to methods that actually moved the panel (when the effect was done rendering).
Here is my solution, for anyone who might have the same questions:
[xml]<!-- Left main panel -->
<panel childLayout=“absolute” width=“340” height=“400” id=“left_main_panel” x="-300" y="${CALL.getMiddleOfScreenY(400)}"
controller=“com.limewoodGames.holicity.client.gui.controllers.LeftPanelController”>
<effect>
<onCustom name=“move” customKey=“open” mode=“toOffset” offsetX=“300”
length=“200” startDelay=“0” inherit=“true” neverStopRendering=“true” onEndEffect=“endOpen()” />
<onCustom name=“move” customKey=“close” mode=“toOffset” offsetX="-300"
length=“200” startDelay=“0” inherit=“true” neverStopRendering=“true” onEndEffect=“endClose()” />
</effect>
<panel childLayout=“vertical” width=“300” height=“400” backgroundColor="#77777777"
padding=“5px” x=“0” y=“0”>
<control name=“nifty-tabs” id=“tabs_panel” buttonWidth=“33%”>
<control id=“tab_groups” name=“nifty-tab” caption="${labels.community_groups}">
<panel childLayout=“vertical” width=“100%” height=“100%” style="">
<control name=“listBox” id=“groups_list” width=“100%” height="*"
vertical=“on” horizontal=“off” displayItems=“15” selection=“Single”
viewConverterClass=“com.limewoodGames.holicity.client.gui.community.GroupViewConverter”>
<control name=“group-list-item”/>
</control>
<control name=“button” id=“create_group_button” align=“center”
label="${labels.community_create_group}">
<interact onClick=“createGroup()”/>
</control>
</panel>
</control>
<control id=“tab_friends” name=“nifty-tab” caption="${labels.community_friends}">
<panel childLayout=“vertical” width=“100%” height=“100%”>
<text style=“base-font” text=“Friends tab”/>
</panel>
</control>
<control id=“tab_reputation” name=“nifty-tab” caption="${labels.community_reputation}">
<!-- <panel childLayout=“vertical” width=“100%” height=“100%”> -->
<text style=“base-font” text=“Reputation tab”/>
<!-- </panel> -->
</control>
</control>
</panel>
<!-- Left main menu -->
<panel id=“left_main_menu” childLayout=“vertical” width=“40” x=“300” y=“100”
padding=“5px” backgroundColor="#77777777">
<control name=“button” id=“show_test_button” label=“T” width=“30px”>
<interact onClick=“showTest()” />
</control>
</panel>
</panel>[/xml]
In LeftPanelController (an AbstractController):
[java]private boolean showTest = false;
public void showTest() {
System.out.println(“test”);
if(showTest) {
getElement().startEffect(EffectEventId.onCustom, null, “close”);
}
else {
getElement().startEffect(EffectEventId.onCustom, null, “open”);
}
showTest = !showTest;
}
public void endClose() {
getElement().stopEffect(EffectEventId.onCustom);
getElement().setConstraintX(new SizeValue(-300+“px”));
getElement().getParent().layoutElements();
}
public void endOpen() {
getElement().stopEffect(EffectEventId.onCustom);
getElement().setConstraintX(new SizeValue(0+“px”));
getElement().getParent().layoutElements();
}[/java]