How to test the state of a "window" (is it open or closed)

[parkjammer]

I use a simple menu button that opens a "window" object. The window
is set to automatically close if you touch elsewhere on the panel.

However, I find that I and others naturally tend to want to press the
menu a second time in order to close the menu window.

20140918_Alpha_issue_-_check_state_of_a_menu_window.jpg

In order to toggle the window open or closed you need to be able to
ask the question "What state is the window currently in?".

I can use a variable to toggle the state but it is more reliable if you
can query the object itself.

Here is my simple code:

// --- // - Toggle the main menu open or closed // --- // Define a local variable (vl_) to hold the current state of the window. var vl_menu_state=""; // Determine current state of window vl_menu_state = ??? <-- what function or method goes here? // If open, then close; else it is closed and should be opened if (vl_menu_state == "open") { // Close the menu window {dialog.Object}.closeWindow('WIN_MENU_MAIN'); } else { // Open the menu window {dialog.object}.showContainerWindow(this,'WIN_MENU_MAIN'); }

Ideas are welcome!

[TheSmitchell]

Re: How to test the state of a "window" (is it open or closed)

So, the menu is in a DIV which is used to show and hide the contents. That DIV has a unique id --- which you'll need to look up (it may not be {dialog.componentName}.V.R1.WIN_MENU_MAIN, it might have a parent DIV that handles the visibility.)

At any rate, it will have 1 of 3 possible states:
1. Doesn't exist: $('{dialog.componentName}.V.R1.WIN_MENU_MAIN') === null
2. Exists, visible: $('{dialog.componentName}.V.R1.WIN_MENU_MAIN').style.display !== 'none'
3. Exists, hidden: $('{dialog.componentName}.V.R1.WIN_MENU_MAIN').style.display === 'none'

Hope that helps.
---
Sarah

[DaveF]

Re: How to test the state of a "window" (is it open or closed)

var wObj = {dialog.object}.getWindow('WIN_MENU_MAIN');

if (wObj.hidden)
{
{dialog.object}.showContainerWindow(this,'WIN_MENU_MAIN')
}
else
{
{dialog.Object}.closeWindow('WIN_MENU_MAIN');
}

[parkjammer]

Re: How to test the state of a "window" (is it open or closed)

Sara and Dave... very helpful. I'm rebuilding a suite of apps in preparation for a sale. Having focused on core app function in the past, I'm now trying to add little bits of polish.

Thanks much!

Look me up at the 2014 Alpha Developer's conference in Boston if you're there.

[parkjammer]

Re: How to test the state of a "window" (is it open or closed)

There are days when I hate both Alpha and javascript. I'll manage to
create lots of complex things with no particular issue and then burn
hours on something crazily stupid.

I have spent many hours (!?!) trying variations of your collective
suggestions but to no avail.

The ".hidden" property and the ".style.display" properties simply
do not respond (or may not exist in the case of ".hidden").

If by chance you have a moment to look at what I'm doing, here
are links to my test component, a video, and a screen shot.

Short Video (URL)

Component (URL)

TEST_UX_-_toggle_menu.jpg

NOTE: these links may not survive more than 3 months from 2014-SEP-20

Any additional input would be appreciated.

Thanks.

[DaveF]

Re: How to test the state of a "window" (is it open or closed)

Allan - You need to assign a name to your window in order for {dialog.object}.getWindow() to work. Open the window properties for the WIN_MENU_MAIN control and enter "WIN_MENU_MAIN" in the Window name property. Then change your if statement to the following:

if (vl_menu_ref1.hidden)
{
	// Open the menu window if closed
	{dialog.object}.showContainerWindow(this,'WIN_MENU_MAIN');
}
else
{
	// Close the menu window if open
	{dialog.Object}.closeWindow('WIN_MENU_MAIN');
}

[DaveF]

Re: How to test the state of a "window" (is it open or closed)

Allan - Here is a crude way to display the contents of a Javascript object in more than 1 alert dialog (if necessary). This will keep the alert dialog from expanding beyond the height of the screen. Just lower the ctr variable if there is an extra large property causing one of the alert dialogs to get too big.

function printObject(o)
{
	var out = '';
	var ctr = 0;
	
	for (var p in o)
	{
		out += p + ': ' + o[p] + '\n';
		ctr++;
		if (ctr > 24)
		{
			alert(out);
			out = '';
			ctr = 0;
		}
	}
 
 	if (ctr > 0)
 	{
 		alert(out);
 	}
}

Do you use the Chrome debugger? It is much easier to set a breakpoint using the "debugger;" directive and then expand the object in the watch window.

[parkjammer]

Re: How to test the state of a "window" (is it open or closed)

Allan - You need to assign a name to your window in order for {dialog.object}.getWindow() to work. Open the window properties for the WIN_MENU_MAIN control and enter "WIN_MENU_MAIN" in the Window name property. Then change your if statement to the following:

if (vl_menu_ref1.hidden)
{
	// Open the menu window if closed
	{dialog.object}.showContainerWindow(this,'WIN_MENU_MAIN');
}
else
{
	// Close the menu window if open
	{dialog.Object}.closeWindow('WIN_MENU_MAIN');
}

First, thanks much for taking a look. I'll try this shortly.

My question is... why is the "name" required in this instance? Every
other object responds based on the ID. The only other circumstance
I've run into where a name is required is when you have a parent UX
launching a child UX and then wanting to have the "onPanelActivate"
event to fire properly.

While my general coding skills are solid (many languages), my javascript
is simply "the basics, google, and bend". However, I have been writing
javascript and XBASIC over the last couple of years.

Clearly there must be a fundamental bit of knowledge re: "object ID" and
"object NAME" that I am missing.

I always thought the "name" was optional, especially since everything else
seems to work without them.

I'll check in later... have to crash for a few hours.

Danka!

[DaveF]

Re: How to test the state of a "window" (is it open or closed)

I don't know for sure, but my guess is because the new V12 showContainerWindow() method and Window container type are an extension of the older "Open a Pop-up Ajax Window" action javascript routine. This routine can use one of five different sources of window content including a container. The builder for this action javascript routine and the Window container properties are almost identical. Since the window content for the "Open a Pop-up Ajax Window" action javascript routine may not necessarily be connected to a container with a unique id, a Window name placeholder was included to give the window a unique name.

However, I don't see why they could not at least default a Window-type container's window name property to the container id.

[parkjammer]

Re: How to test the state of a "window" (is it open or closed)

function printObject(o)
{
	var out = '';
	var ctr = 0;
	
	for (var p in o)
	{
		out += p + ': ' + o[p] + '\n';
		ctr++;
		if (ctr > 24)
		{
			alert(out);
			out = '';
			ctr = 0;
		}
	}
 
 	if (ctr > 0)
 	{
 		alert(out);
 	}
}

Works great. My simple initial version attempted to show too much in the alert and
I was going to just redirect the content to another panel with a DIV. However, yours
is a quick 'n dirty version that gets me all the properties quickly.

Danka!

[parkjammer]

Re: How to test the state of a "window" (is it open or closed)

Allan - You need to assign a name to your window in order for {dialog.object}.getWindow() to work. Open the window properties for the WIN_MENU_MAIN control and enter "WIN_MENU_MAIN" in the Window name property. Then change your if statement to the following:

if (vl_menu_ref1.hidden)
{
	// Open the menu window if closed
	{dialog.object}.showContainerWindow(this,'WIN_MENU_MAIN');
}
else
{
	// Close the menu window if open
	{dialog.Object}.closeWindow('WIN_MENU_MAIN');
}

This worked great. Thanks much.