| Home |  Services |
Company |
Prices | Support | Clients | Tools | login |
"push" data to a SOLO Laszlo Application
After the file was done uploading I needed to update the current view in my Laszlo application to reflect the new file. Without lzSetCanvasAttribute() though, I needed to find a different way to do this.
Togawa over at www.laszlo.jp had found an interesting way to "push" data to the Laszlo application. Instead of setting a Laszlo canvas attribute, he set a canvas variable using the SetVariable() method. The setVariable() method is a way of sending any flash object a variable value. Not only that but he was using deconcepts flashobject to load his application. It was so incredibly simple I decided to also use deconcepts flashobject also.
My final html page was brief and easy to read:
By David Hayakawa
Take a quick look at the demo.
Here are the files for the demo
This short tutorial is meant to show a method of "pushing" data to your SOLO Laszlo Application. Currently, the suggested method of pushing data to a SOLO Laszlo application is to use the lzSetCanvasAttribute() method found in the embed.js script. For me, the lzSetCanvasAttribute() method worked well when working in server mode but it did not work when in SOLO mode. I wanted to deploy in SOLO mode for my project, so I had to find another way.
Since file upload is not currently supported, it was recommended in the laszlo forums that a small pop up window be used.
Opening a window is easy using the loadUrl() function. We use a little bit of javascript and we can create a small pop up window.
Opening a window is easy using the loadUrl() function. We use a little bit of javascript and we can create a small pop up window.
<button> pop a window
<method event="onclick">
<![CDATA[
LzBrowser.loadURL("javascript:var a = window.open('popup.html', '','height=100,width=400')")
]]>
</method>
</button>
<method event="onclick">
<![CDATA[
LzBrowser.loadURL("javascript:var a = window.open('popup.html', '','height=100,width=400')")
]]>
</method>
</button>
After the file was done uploading I needed to update the current view in my Laszlo application to reflect the new file. Without lzSetCanvasAttribute() though, I needed to find a different way to do this.
Togawa over at www.laszlo.jp had found an interesting way to "push" data to the Laszlo application. Instead of setting a Laszlo canvas attribute, he set a canvas variable using the SetVariable() method. The setVariable() method is a way of sending any flash object a variable value. Not only that but he was using deconcepts flashobject to load his application. It was so incredibly simple I decided to also use deconcepts flashobject also.
My final html page was brief and easy to read:
<html>
<head>
<script src="flashobject.js" type="text/javascript" ></script>
</head>
<body>
<div id="flashcontent">
</div>
<script type="text/javascript">
var fo = new FlashObject("colors.lzx.swf", "lzapp", "100%", "100%", "7", "#FFFFFF");
fo.write("flashcontent");
function lzMySetCanvasAttribute(val){
document.getElementById("lzapp").SetVariable("popColor",val);
}
</script>
</body>
</html>
<head>
<script src="flashobject.js" type="text/javascript" ></script>
</head>
<body>
<div id="flashcontent">
</div>
<script type="text/javascript">
var fo = new FlashObject("colors.lzx.swf", "lzapp", "100%", "100%", "7", "#FFFFFF");
fo.write("flashcontent");
function lzMySetCanvasAttribute(val){
document.getElementById("lzapp").SetVariable("popColor",val);
}
</script>
</body>
</html>
Without going into too much detail about the pop up window, I'll hit the important points.
We don't want to call the lzMySetCanvasAttribute(val) function until we want to update the Laszlo application, so we'll only call it after the form is done. We'll call it using: opener.lzMySetCanvasAttribute(color);
The "opener" object references the parent window that the pop up was spawned from and allows us to call the lzMySetCanvasAttribute() function and send it our new color. In my file upload case, I would send a message that said something like "success" or "failed".
Ok, so far all we have talked about is everything outside the Laszlo application. If you're antsy for the laszlo code we'll start now. As you look over my code you may notice that I've added what may seem to be an extra event to set the background color. It's true. I don't like hacking things and only do it when I need to. I'm assuming that Laszlo development team will eventually fix the lzSetCanvasAttribute() function, when they do, I will go back to using the embed.js script not use variables but attributes to "push" data.
When using variables we need a way to know when a variable has been set. The way we're going to do this to create a method with an onidle event.
<method name="onidle" event="onidle" reference="LzIdle">
if (popColor!=preColor) {
canvas.info.info1.ColorText.setText(popColor);
popColor =preColor;
}
</method>
As the event implies, the onidle event fires when the rest of the events aren't. It's basically always listening. If a variable has been set by our pop up window it will know it. Since the event is always listening then once we set the background color, if we're not careful, we would continuously set the background color over and over and over again. So, to help us only set the background color one time, after we change the color, we have to set up some conditions.
In our situation, we use two variables: popColor & preColor. popColor is the variable coming from our pop up window. preColor is our "holder" variable. It will keep the value of the current color.
When we first start the application the two variables are not equal to each other so when we initialize the popColor using:
var popColor = typeof(global.popColor) != 'undefined' ? global.popColor : '0xFFFFFF';
The onidle method fires and sets the background color to white.
This last line of code in the onidle method keeps it from updating the background color continuously.
popColor =preColor;
This line of code is where we could have set the background color of the canvas and be done with it.
canvas.info.info1.ColorText.setText(popColor);
Instead, I've chosen use the ontext method of a text compontent to trigger the background color. The reasoning behind this, like I explained above, is to allow for setting an attribute instead of a variable when the lzSetCanvasAttribute() works again. Canvas attributes do not have an event that we can use to let use know when the attribute value has changed. Instead, we'll use the ontext event of a text component (if there was an onchange event I would have used it). If we set the value of a text component to the value of the canvas attribute and it changes the ontext event will let us know when data has changed.
We don't want to call the lzMySetCanvasAttribute(val) function until we want to update the Laszlo application, so we'll only call it after the form is done. We'll call it using: opener.lzMySetCanvasAttribute(color);
The "opener" object references the parent window that the pop up was spawned from and allows us to call the lzMySetCanvasAttribute() function and send it our new color. In my file upload case, I would send a message that said something like "success" or "failed".
Ok, so far all we have talked about is everything outside the Laszlo application. If you're antsy for the laszlo code we'll start now. As you look over my code you may notice that I've added what may seem to be an extra event to set the background color. It's true. I don't like hacking things and only do it when I need to. I'm assuming that Laszlo development team will eventually fix the lzSetCanvasAttribute() function, when they do, I will go back to using the embed.js script not use variables but attributes to "push" data.
When using variables we need a way to know when a variable has been set. The way we're going to do this to create a method with an onidle event.
<method name="onidle" event="onidle" reference="LzIdle">
if (popColor!=preColor) {
canvas.info.info1.ColorText.setText(popColor);
popColor =preColor;
}
</method>
As the event implies, the onidle event fires when the rest of the events aren't. It's basically always listening. If a variable has been set by our pop up window it will know it. Since the event is always listening then once we set the background color, if we're not careful, we would continuously set the background color over and over and over again. So, to help us only set the background color one time, after we change the color, we have to set up some conditions.
In our situation, we use two variables: popColor & preColor. popColor is the variable coming from our pop up window. preColor is our "holder" variable. It will keep the value of the current color.
When we first start the application the two variables are not equal to each other so when we initialize the popColor using:
var popColor = typeof(global.popColor) != 'undefined' ? global.popColor : '0xFFFFFF';
The onidle method fires and sets the background color to white.
This last line of code in the onidle method keeps it from updating the background color continuously.
popColor =preColor;
This line of code is where we could have set the background color of the canvas and be done with it.
canvas.info.info1.ColorText.setText(popColor);
Instead, I've chosen use the ontext method of a text compontent to trigger the background color. The reasoning behind this, like I explained above, is to allow for setting an attribute instead of a variable when the lzSetCanvasAttribute() works again. Canvas attributes do not have an event that we can use to let use know when the attribute value has changed. Instead, we'll use the ontext event of a text component (if there was an onchange event I would have used it). If we set the value of a text component to the value of the canvas attribute and it changes the ontext event will let us know when data has changed.