Slide Bar Button

[shimizuryuhei]

You should definitely add so-called slide bar button
to your button sets. If you do not know what I mean
by "slide bar button", please visit the following URL

http://www.iokio.com/

Be patient until the animation ends. After the top
page appears, click "Camera Finder Demo" in the left
bottom part of the page. Then you will jump to online
camera demo shopping site made by Flash. What I call
slide bar buttons are located in the right part of
the page: "maximum price", "minimum resolution", and
"maximum weight". Drag and slide those bars. You will
see how slide bars are convinient when selecting.

What I would like to do is to develop websites like
this by Laszlo, not by Flash and ColdFusion. Maybe it
is possible to manually creating slide bars in Laszlo
like I would do in DHTML, but a tag like

<button type="slide" name="camera_price" min="0"
max="20000" onchange="myAction();" class="myClass">

is available, I would love it. What do you say?

Forgive me if this is a topic already done...

Ryuhei

[Anne]

That is pretty cool. I don't know if we have this as a basic component, but I bet you could build your own pretty easily. I will see if I can get one of our LZX whiz dudes to weigh in on how... Thanks for the suggestion!

[antun]

Hey Ryuhei

As Anne pointed out, this would be straightforward to build. I would start by writing two classes:

1) A slidebar class that represents the entire sliding bar.
2) A slidebarbutton class that represents a single entry in the slidebar.

The slidebuttonbar class would have methods that were based on clicking it. The slidebuttonbar class would have events that were based on where the mouse rolled over it, as well as methods for dealing with clicks.

The slidebar class would have to worry about clipping.

I would configure it so that the slidebuttonbar class would accept a single argument for the resource, as well as instructions on what to do when the user clicks on it.

Does that help? If I have some free time I'll throw together a mockup.

Take care,

Antun

[antun]

Oooops!

Sorry I was looking at the slider on your homepage. Then I realized you were talking about the slider on the cameras page. You're right, a slider component is something that would be a very good idea.

I'm going to look into it and see if I can get some code to point you in the right direction.

Sorry for the confusion.

-Antun

[antun]

Hey again Ryuhei

As promised, here's a quick slider:


<canvas>
<!-- The grey slider background bar -->
<view name="slider" x="20" y="20"
width="400" height="20" bgcolor="#e5e5e5" >
<!-- The red slider -->
<view name="sliderButton" width="20" height="20" bgcolor="red"
onmousedown="startDrag()" onmouseup="stopDrag()">
<method name="startDrag">
// set distances from right and bottom edges
this.sliderOffsetX = this.getMouse( 'x' );
if ( !this.getAttribute( 'sliderDel' ) ) {
this.sliderDel = new LzDelegate( this,
'adjustSliderPos',
LzIdle, 'onidle' );
}
</method>

<method name="stopDrag">
this.sliderDel.unregisterAll();
this.sliderDel = null;
</method>

<method name="adjustSliderPos">
<![CDATA[
var newX = this.immediateparent.getMouse( 'x' )
- this.sliderOffsetX;
// Prevent slider from going under 0 or more than max
var minX = 0;
var maxX = this.immediateparent.getAttribute( 'width' );
if ( newX <= minX ) {
newX = minX;
} else if ( newX >= maxX ) {
newX = maxX;
}
locationoutput.setText( newX );
this.setAttribute( 'x', newX );
]]>
</method>
</view>
</view>

<!-- The output window -->
<view name="outputscreen" x="25" y="60" bgcolor="#e5e5e5">
<text id="locationoutput" x="5" y="15" fontsize="35" width="100">
0
</text>
</view>
</canvas>


Let me know if this is useful, and if you're interested in how to customize it.

-Antun

[shimizuryuhei]

antun,

Thanks so much for your quick slider code! Yes,
it is VERY useful. Now I am interested in customizing
it... I would like to use it like:

<canvas>
<include href="lz/slideBar.lzx" />
<slideBar width="150" value="4500" id="mySlide">
//set slider color, bgColor, etc
</slideBar>
</canvas>

By the way, should we move to "LZX coding help" ??

[antun]

To convert it into a reusable class is really easy:

The <view> tags for the slider would change to
<class> tags, so:-


<class name="slider" x="20" y="20"
width="400" height="20" bgcolor="#e5e5e5" >
<!-- lots of code commented out here -->
</class>


Then to instantiate it, you would write:-


<slider />


Any custom attributes (e.g. the value="4500" you suggested) would be declared in the class description:-


<class ...>
<attribute name="value" value="300" />
...


Then you could write:


<slider value="4500" />


Take care,

Antun

[shimizuryuhei]

Hi antun,

I am stuck with coding, so please help. Is it possible to set id Attribute like

<text id="parent.op_id" >

and change its text content by

getElementById(parent.op_id).setText( 'whatever...' );

I know getElementById is not available in Laszlo (or is it?). However, since I would like to change text id name dynamically from an instance page, not statically defining its value in a class page, I am looking for something similar to getElementById as it is in an HTML page. To refer to an object by a variable, not by its real name. And the reason why I want to do that is, when I put more than one slidebar instance on canvas, no output text but the last one can work in the page, because I set its name statically in the class page and thus their names are all the same. This sounds so stupid...

Or, could anybody give me a suggestion? I attach the class source, and the folloing is the instance part:

<canvas width="600">
<include href="quickslider.lzx" />

<slider name="slideOne" width="200" x="80" y="30" bgcolor="#cccccc" slidevalue="500"
bt_width="15" bt_height="10"
op_id="testOne" op_x="-60" op_y="-10" op_width="40">
</slider>

<slider name="slideTwo" width="200" x="80" y="80" bgcolor="#cccccc" slidevalue="100"
bt_width="5" bt_height="15"
op_id="testTwo" op_x="-60" op_y="-10" op_width="40"/>
</canvas>

Thank you,

[antun]

Hey Ryuhei,

First of all, this notation only works for size/position constraints:-

<view width="parent.width">

You can't use it for things like names and ids. Secondly, do not use ids in class definitions EVER!

To solve your problem, here is what I would do:-


<class name="slider">
...
<text name="myText" width="50" />
<method name="mySetText" args="s">
this.myText.setText( s );
</method>
...
</class>

<!-- instantiation -->
<slider id="mySlider" />

<!-- setting the text -->
<script>
mySlider.mySetText( "hello, world" ):
</script>


What I'm doing here is giving the class definition a method that writes to the text field, that is its child.

As for addressing an object by an id that you have as a string, have a look at the searchSubViews method:-

http://www.laszlosystems.com/developers/learn/documentation/lzxref/LzView.php#searchSubviews

Take care,

Antun

[shimizuryuhei]

> You can't use it for things like names and ids.

I see. However, if I can use it for bgcolor or resources, it would be nice. Then all I have to do is set values in the instantiation page instead of making miner changes to class definitions every single time... Will this be the same in the future versions?

And do you plan to open anything like "ma*rome*ia developer exchange" sites, where Laszlo developers can exchange their hand-made components? Writing custom components as well as using components created by other developers will be a good way to study Laszlo for some developers like me... let me know your opinions.

Thank you,

Ryuhei

[antun]

Hey Ryuhei

One of the reasons that you can't use that type of constraints everywhere is that it would be extremely expensive on the processor. I think you may find this useful:


<canvas>
<view bgcolor="#e5e5e5">
<simplelayout axis="x" spacing="20" />
<view name="firstView" bgcolor="red" width="20" height="20" />
<view name="secondView" width="20" height="20">
<attribute name="bgcolor" init="parent.firstView.bgcolor" />
</view>
</view>
</canvas>


That will set the bgcolor to the first views bgcolor. You could also say:


<attribute name="bgcolor" constraint="parent.firstView.bgcolor" />


That will constrain the bgcolor of secondView to that of firstView, so that if firstView's bgcolor changes, so will the second.

Take care,

Antun