Dialog Button

[Charles Hoens]

I've created a dialog with one object on it - a big button. This is for a user Login/Logout which is not related to A5 basic security. When the user presses the button it should operate like a two-state button i.e. Login, then when pressed, Logout. I wanted the button to change the text and the color so it is obvious to the user what is happening. On each occurrence I need to write some code to capture the time, etc.

The question I have is can I do this from one dialog or do I have to create two dialogs and then somehow turn them on or off?

Thanks.

[Peter.Greulich]

Re: Dialog Button

Charles,

How about one dialog w. two buttons using a show/hide expression?

Haven't thought through all the logic. Guess it depends upon your situation.

[Charles Hoens]

Re: Dialog Button

That's where I was heading too. Picture of webpage attached. What I did was create a control with two buttons. On the show/hide I put a session variable like session.loginout=.T. On the other button, I put the reverse. On the OnClick event I put XBasic Server-Side code which reversed the logical. BTW, you have to address the session.loginout in caps like SESSION.LOGINOUT or it won't work.

Interesting problem that arises is that at times the button seems to depress, but doesn't change. Other times, (with a deliberate push) it will. Not sure why that is happening.

More to come.

LoginOut.gif

[-Jinx-]

Re: Dialog Button

Hi Charles. I tested this out in V12 but I think it should work with V11 as well.

This is an example using a SINGLE button.

I created a button and then in it's properties under "button Text" I put in the following:

<div id = "LILOBUTTON">Login</div>

Next I made a textbox field (which you can hide later of course) named bttst I set it to be a logical field.
In the textbox properties I set the default value to be 1, or "true"
Next, in the buttons, onclick event I converted it to text mode and put in this javascript:

var bttst = {dialog.Object}.getValue('BTTNST');

if (bttst==true){

	$('LILOBUTTON').innerHTML='LOGOUT';
	{dialog.Object}.setValue('BTTNST',2);
}
else{

	$('LILOBUTTON').innerHTML='LOGIN';
	{dialog.Object}.setValue('BTTNST',1);
}

Then I set the client side conditional style of the button to turn green if bttntst is true and red if it's false.


The code checks for the condition of the last click. Of course you can put any other code you want in there that you have to execute. You cal also break up the if/else statement into action javascript inline javascript commands instead of using text mode so you can have other action javascript commands in or around it if it's easier for you.

In any case; using the above, the login button's text will change to logout and back to login as clicked and the background color of the button changes as well.

Hopefully this helps and is somewhat what you want.

Here's a quick video of the component behavior:

http://screencast.com/t/uaw2kWsuA

[Charles Hoens]

Re: Dialog Button

Wow! Thanks. I'll work on this and let you know how it goes.

Thanks so much.

[Charles Hoens]

Re: Dialog Button

I set this up and tested it out. Just for clarification, in paragragh 2 you said you set the textbox name to "bttst" but I think you mean "bttnst". I'm just making a note for someone else (not complaining).

One other thing, that might prove helpful. How can I put some static text under the button, where, based on the button push it says different things, such as "Good job at logging out", etc.? I've also thought of adding a JS pop-up informing the user that the login/logout was successful or not. I'm not sure how to address the static text properties though.

Once again, thanks for going to the trouble of producing the video. That was really awesome!

[-Jinx-]

Re: Dialog Button

Yeah, I got confused on my naming conventions. You're right.

As for the static text. I personally would use a div again. It all depends on what you'd like to do.

For instance, you can make a free-form container and in it's free-form layout put in somthing like this:

<div id = "MSGDIV"></div>

Then in the button code you can basically copy a line and use the MSGDIV instead of the button one. This will change the internal html of the free-form div.

var bttst = {dialog.Object}.getValue('BTTNST');

if (bttst==true){

	$('LILOBUTTON').innerHTML='LOGOUT';
	{dialog.Object}.setValue('BTTNST',2);
	[COLOR="#FF0000"]$('MSGDIV').innerHTML='You are now logged in';[/COLOR]
	
}
else{

	$('LILOBUTTON').innerHTML='LOGIN';
	{dialog.Object}.setValue('BTTNST',1);
	[COLOR="#FF0000"]$('MSGDIV').innerHTML='You are now logged out';[/COLOR]
	
	
	
}

That's just one way to do it. You could hide or show a DIV or container as well. For instance, you could make a container at the bottom of all your controls and set it to hidden. Then there is an action javascript to "Toggle display of a container or a DIV with animation".

[Charles Hoens]

Re: Dialog Button

All of this is great. However, I am using V11 and it does not have the feature of changing the color properties. Is there a way of changing these properties in the JS?

Thanks.

[-Jinx-]

Re: Dialog Button

I just checked my version 11 and it does indeed have the color properties. My build is 3381-4096

"conditional style, text and events" is the name under button properties in V11

[-Jinx-]

Re: Dialog Button

If for some reason your build doesn't have it, Something like this will work:

$('LILOBUTTON').style.backgroundColor = 'Red';

You'll probably see that it misses a little around the periphery of the button. I think that has to do with the corners and such being an image or something in the CSS. definitely better to use the style setting if you have it.

[TheSmitchell]

Re: Dialog Button

All of this is great. However, I am using V11 and it does not have the feature of changing the color properties. Is there a way of changing these properties in the JS?

Thanks.

Yes.

You can use the add/remove class name functions:

$acn('ELEMENT_ID','CLASS_TO_ADD');
$rcn('ELEMENT_ID','CLASS_TO_REMOVE');

Or the set style functions:

$ss('ELEMENT_ID',{backgroundColor: 'red', fontWeight: 'bold'});

Both (and more) are documented here: http://wiki.alphasoftware.com/~alpha...+in+Version+10

PS:

$svs can be used to set the element's HTML:

$svs('ELEMENT_ID','This is the HTML to go inside');

[-Jinx-]

Re: Dialog Button

Sarah,
Some of the code in your post doesn't seem to work right with buttons. I tried it in V11 and V12.

Considering a button with the id of BUTTON_2:

$ss('BUTTON_2',{backgroundColor: 'red', fontWeight: 'bold'});

Doesn't work with the button ID, as in 'BUTTON_2'. You'd have to add the prefixes of DLG1.V.R1. in front of the ID
However, if you run something like this:
V12:

var ele = {dialog.Object}.getPointer('BUTTON_2');
$ss(ele,{backgroundColor: 'red', fontWeight: 'bold'});

OR V11 and V12

$ss('DLG1.V.R1.BUTTON_2',{backgroundColor: 'red', fontWeight: 'bold'});

or a shortcut which seems to work for both if you are using the code in the events of the button that you want to change:

$ss(this,{backgroundColor: 'red', fontWeight: 'bold'});

In all those cases, it will only change the color in a square around the periphery of the button. (which is the opposite of what I had above with my code to change the background since I had a div in the button.)

So now that I've figured it out, finally, you can use these in V11 and V12

$ss('DLG1.V.R1.BUTTON_2',{background: 'Red',backgroundColor: 'red', fontWeight: 'bold'});

if it's in the buttons events:

$ss(this,{background: 'Red',backgroundColor: 'red', fontWeight: 'bold'});

OR

$(this).style.backgroundColor = 'Red'
$(this).style.background= 'Red'

OR finally this:

$('DLG1.V.R1.BUTTON_2').style.backgroundColor = 'Red'
$('DLG1.V.R1.BUTTON_2').style.background= 'Red'

[TheSmitchell]

Re: Dialog Button

Doesn't work with the button ID, as in 'BUTTON_2'. You'd have to add the prefixes of DLG1.V.R1. in front of the ID

'BUTTON_2' is not the element ID of the button. You need to specify the complete object ID. 'ELEMENT_ID' = '{dialog.componentName}.V.R1.FIELD_NAME'. Alpha's JS library operates on the DOM. Sadly, the JS is not pre-compiled to replace things like 'BUTTON_2' with the fully formed ID.

[-Jinx-]

Re: Dialog Button

Yes. 'BUTTON_2' is not the element ID of the button. You need to specify the complete object ID. 'ELEMENT_ID' = '{dialog.componentName}.V.R1.FIELD_NAME'.

I didn't see that in the documentation. Maybe I'm blind.

Oh, and I just realized you don't need to set both backgroundColor and Background you can just use background:

$('DLG1.V.R1.BUTTON_2').style.background= 'Red'

OR

$ss('DLG1.V.R1.BUTTON_2',{background: 'red'});

Or in the buttons onclick:

$(this).style.background= 'Red'

or this:

$ss(this,{background: 'red'});

[TheSmitchell]

Re: Dialog Button

I didn't see that in the documentation. Maybe I'm blind.

Ah. It's there. It could be called out better, though.

The functions below provide an easy way to get and set the in-line style, can class of HTML elements. The passed in argument of "ELEMENT" can be a pointer to an HTML element, or the ID or NAME of an HTML element. The functions will automatically fetch the element if you pass in an ID or NAME.

I kinda wish Alpha would use IDs that were distinct from their examples in the documentation for {[dialog|grid].object}.[get|set]Value --- eg, don't reuse "firstname" and "lastname". And also include a short HTML portion on the wiki for the JS library examples. The whole of Alpha's JS library is convenience built on top of the JavaScript document & element API, and also some of Alpha's custom functions.