ComboBox opacity and View masking

[TripleToe]

Two questions:

1. Is there a way to put a view over other components that appears transparent but prevents access to the components/views underneath? I have a login form in a window and when it appears, I want to 'gray-out' the components behind it to make them appear in-accessible. I also want the view to prevent them from interacting with these components. While I have achieved the first goal by having the view 'gray-out' the background components, the user can still interact with them. Any suggestions?

2. Continuing on, my login window (which contains a combobox) fades in and out at several points of the application using an animator that controls the opacity. There is a semi-tranparent view behind the window as previously mentioned. When I fade this window (containing the combobox) in or out, I see a 'residue' left behind where the combobox is positioned. I also see it before the combobox appears when the window is being animated from 0.0 to 1.0 opacity. It looks like the combobox has a gradient filling that is not being transitioned along with the other components that make up the combobox. Anyone else seen this? I can post sample code if anyone wants to see it.



Thanks

[antun]

1. Is there a way to put a view over other components that appears transparent but prevents access to the components/views underneath?

Yes - you can have a large, semi-transparent view with a background color between your login box and the rest of your app. That'll give you the grayed-out effect.

To prevent the user from clicking the rest of the app, either make that view clickable so that it captures mouse events, or use the Modality manager: http://www.laszlosystems.com/lps-2.1.2/docs/lzx-reference/lzmodemanager.html

Also, don't forget that there is a Modaldialog component:
http://www.laszlosystems.com/lps-2.1.2/docs/lzx-reference/lz-modaldialog.html

I can post sample code if anyone wants to see it.

That might be useful, if it's not a problem for you to post it.

-Antun

[TripleToe]

Also, don't forget that there is a Modaldialog component


I actually tried that before, but I had some other windows that were open behind the modal dialog and I think I was still able to move them around, which seemed confusing to me. Does the modal dialog only block access to other input components?


Here is a code sample that shows the combobox 'residue'. You'll see it when it loads. You can also see it when the dialog disappears. Just click 'ok' and watch the combobox disappear. You'll see what appears to be a gradient that is not fading out behind it. Also, feel free to comment on any of the other techniques I've used in this code. I hope I'm handling this as efficiently as possible with the delegates, etc.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE canvas SYSTEM "http://www.laszlosystems.com/lps/tools/lzx.dtd">
<canvas width="500" height="700">

<!-- dataset containing users to display in the combobox -->
<dataset name="users_dataset">
<users>
<user id="1" value="1" text="John Doe">
<firstname>John</firstname>
<lastname>Doe</lastname>
</user>
<user id="1" value="1" text="Jane Doe">
<firstname>Jane</firstname>
<lastname>Doe</lastname>
</user>
</users>
</dataset>

<!-- login screen -->
<view name="login_screen" id="login_screen" width="${canvas.width}" height="${canvas.height}"
initstage="early" visible="false">

<!-- methods -->
<method event="oninit" reference="canvas">
showLoginScreen();
</method>
<method name="showLoginScreen">
// transition in the login screen.
// first, make this view visible.
login_screen.setVisible(true);
login_screen.login_mask.setVisible(true);
login_screen.login_window.setVisible(true);
// second, animate the login window and display it
login_screen.login_window.reveal.doStart();
</method>
<method name="hideLoginScreen">
// delegate to hide the login mask when the dissolve animation completes
var animationDelegate1 =
new LzDelegate(login_screen.login_mask,"hide",login_screen.login_window.dissolve,"onstop");
// delegate to hide the login screen when the dissolve animation completes
var animationDelegate2 =
new LzDelegate(login_screen,"hide",login_screen.login_window.dissolve,"onstop");
// delegate to hide the login screen when the dissolve animation completes
// start the dissolve animation
login_screen.login_window.dissolve.doStart();
</method>
<method name="login" args="userid, password">
hideLoginScreen();
</method>
<method name="hide">
this.setVisible(false);
</method>

<!-- login mask -->
<view name="login_mask" id="login_mask" width="${canvas.width}" height="${canvas.height}"
visible="false" opacity=".80" bgcolor="#666699">
<method name="hide">
this.setVisible(false);
</method>
</view>

<!-- login window -->
<window name="login_window" id="login_window" x="${(this.parent.width/2)-(this.width/2)}" y="200"
width="320" height="170" opacity="0.0">

<!-- animators -->
<animatorgroup name="reveal" start="false">
<animator attribute="opacity" from="0.0" to="1.0" duration="1500" start="false"/>
</animatorgroup>
<animatorgroup name="dissolve" start="false">
<animator attribute="opacity" from="1.0" to="0.0" duration="1500" start="false"/>
<method event="onstop">
debug.write('dissolve.onstop()');
login_screen.login_window.setVisible(false);
</method>
</animatorgroup>

<!-- login dialog layout -->
<view align="center" valign="middle">
<view name="login_dialog_main_view">
<simplelayout axis="y" spacing="15"/>
<view name="userid_view">
<simplelayout axis="x" spacing="10"/>
<text width="100" valign="middle">User:</text>
<combobox name="userid_combobox" x="2" width="150" editable="false">
<textlistitem datapath="users_dataset:/users/user" value="$path{'@value'}"
text="$path{'@text'}"/>
</combobox>
</view>
<view name="password_view">
<simplelayout axis="x" spacing="10"/>
<text width="100" valign="middle">Password:</text>
<edittext name="password_textfield" password="true" x="2" width="150"/>
</view>
<view name="button_view" width="${parent.width}">
<resizelayout axis="x"/>
<view options="releasetolayout"/>
<button name="login_button" width="100">Ok
<method event="onclick">
// get the values for the userid and password from the input fields
var userid = parent.parent.userid_view.userid_combobox.getValue ();
var password = parent.parent.password_view.password_textfield.get Value();
// clear out the password field
parent.parent.password_view.password_textfield.cle arText();
login_screen.login(userid, password);
</method>
</button>
<view options="releasetolayout"/>
<button name="cancel_button" width="100">Cancel
<method event="onclick">
debug.write("cancel_button.onclick()");
</method>
</button>
<view options="releasetolayout"/>
</view>
</view>
</view>
</window>
<!-- end login dialog -->

</view> <!-- end intro view -->

</canvas>

[TripleToe]

I tried using the ModalDialog again to prevent users from interacting with the background components, but when I use it, the combobox that is contained within the ModalDialog does not work properly. I can open the selection list of the combobox with the mouse, but after that, I cannot select any items in the list using the mouse, nor does the listitem focus follow the mouse cursor. I can navigate through the items using the keyboard, and I can tab around the fields within the ModalDialog using the keyboard, but the combobox drop-down menu ignores mouse interaction once it is opened. If I change the ModalDialog to a Window, the combobox works fine. Is this a bug where a modaldialog blocks mouse events to the dropdown menu portion of the combobox component?

[TripleToe]

Here's some sample code that shows what I'm referring to. Click the button, then open the dialog and you can drop down the combobox with the list, but you cannot click on any of the items.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE canvas SYSTEM "http://www.laszlosystems.com/lps/tools/lzx.dtd">
<canvas debug="true">

<dataset name="testdataset">
<items>
<item value="1">option 1</item>
<item value="2">option 2</item>
<item value="3">option 3</item>
<item value="4">option 4</item>
<item value="5">option 5</item>
<item value="6">option 6</item>
</items>
</dataset>

<modaldialog name="testdialog" id="testdialog" width="250" height="200">
<view width="${parent.width}" height="${parent.height}">
<simplelayout axis="y" spacing="10"/>
<combobox name="testcombobox" width="150" editable="false" autoscrollbar="true" shownitems="5" >
<textlistitem datapath="testdataset:/items/item" value="$path{'@value'}"
text="$path{'text()'}"/>
</combobox>
<edittext width="150"/>
<button name="button1">Submit</button>
</view>
</modaldialog>

<view width="${parent.width}" height="${parent.height}">
<button name="button2">Open Dialog
<method event="onclick">
testdialog.open();
</method>
</button>
</view>
</canvas>

[TripleToe]

antrun,

Did you get a chance to see if this problem occurred was indeed a bug or if I'm just doing something wrong? Just curious.

Thanks
:)

Originally posted by TripleToe
Here's some sample code that shows what I'm referring to. Click the button, then open the dialog and you can drop down the combobox with the list, but you cannot click on any of the items.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE canvas SYSTEM "http://www.laszlosystems.com/lps/tools/lzx.dtd">
<canvas debug="true">

<dataset name="testdataset">
<items>
<item value="1">option 1</item>
<item value="2">option 2</item>
<item value="3">option 3</item>
<item value="4">option 4</item>
<item value="5">option 5</item>
<item value="6">option 6</item>
</items>
</dataset>

<modaldialog name="testdialog" id="testdialog" width="250" height="200">
<view width="${parent.width}" height="${parent.height}">
<simplelayout axis="y" spacing="10"/>
<combobox name="testcombobox" width="150" editable="false" autoscrollbar="true" shownitems="5" >
<textlistitem datapath="testdataset:/items/item" value="$path{'@value'}"
text="$path{'text()'}"/>
</combobox>
<edittext width="150"/>
<button name="button1">Submit</button>
</view>
</modaldialog>

<view width="${parent.width}" height="${parent.height}">
<button name="button2">Open Dialog
<method event="onclick">
testdialog.open();
</method>
</button>
</view>
</canvas>