Sliders

 From:  Michael Gibson
4749.2 In reply to 4749.1 
Hi Brian,

> Are the sliders in Bulge, Fillet, and Twist part of
> javascript, or built in to MoI?

They're kind of a combination - there is a slider control piece that is built into moi, but the look of the sliders is controlled through moi.css, see the section that has moi\:Slider in it.

There's not too much to the internal control part - it reads any min="" mid="" and max="" values from the html and creates 2 images for the knobs (regular and highlighted), and has an event handler to watch for mouse events to change the knob.


> Can I use the htm code in a different javascript?
> Or must a 3rd party slider be used?

You mean completely outside of MoI like on a regular web page? That won't work because it will be missing the internal parts of the control logic that MoI provides. You'll need to use a different slider control if you want to use it on a regular web page - try searching for something like "dhtml slider" in Google, or "jquery slider".


> Is there any documentation in using sliders?

I don't have any documentation for them currently. But there's not a whole lot to them - they make use of 2 images in the \ui subfolder: SliderKnob.png and SliderKnob_highlighted.png . There's also a template named Slider.htm which sets up the inner structure of the slider which uses 2 nested divs to apply some border lines. The styling of them is controlled from moi.css in the moi\:Slider section, there are some entries in there for controlling the borders on the nested divs for the body part of the slider, and also hiding the regular knob and showing the highlighted knob when you move the mouse over the control is set there with the :hover styling.

Sliders have a value property that contains their current position value, and during initialization they look for a min="" and max="" property (and optionally a mid="") that sets up the range of the slider.

The internal part of the slider inherits from the MoI base control class so it also gets some other capabilities like being able to set up a binding map to connect the "value" property to another property on some other object so that when the value changes the other object's property is also updated. That's also where the templating capability comes from, which is that the HTML from the Slider.htm template is inserted into the slider control when it is created.


> I see Bulge: , Easeout, and Easein, but these capitalized letters do
> not appear in the htm files?

Those are some label elements that are not directly part of the slider, they're in a table that also contains the slider.

Most text in MoI is set up to be localized for different languages, so in the HTML it usually does not set hard-coded text, it instead uses a <moi:Text> element which takes a textid="" attribute. The <moi:Text> element will look up the actual text from the current active language string table file. If you have English set as your language, that will be the file EnglishStrings.txt in your \ui sub-folder.

So the text for "Ease in" in the Twist command for example is like this in the html:
<moi:Text textid="Twist ease in slider label"/>

And the actual text itself will come from EnglishStrings.txt, where you'll find:
Twist ease in slider label=Ease in

The textid is on the left side there, and the actual text to use on the right of the =. Other languages will have different text on the right-hand side part that's in their particular language.

If you switch the current language all the <moi:Text> elements will update their inner text to contain the text from the new current language's string table.


Hope this helps explain some of the structure of the things you were looking at!

- Michael