Use the native iOS UIStepper in your Titanium application. This module provides Titanium accessibility to Apple's native UIStepper introduced in iOS5.
* You need Titanium 1.8.1 or greater. * This module will only work with iOS 5 or great.There is two ways you can download this module. The go to the releases/UseIfDownloadingFromGithub folder. This will have a release compiled for anyone download it from github.
Shortly you will also be able to download the compiled module from Appcelerator's marketplace/
If you are building from source you will need to do the following:
- Modify the titanium.xcconfig file with the path to your Titanium installation
- Make sure the the method moduleGUID in the class BencodingDictionaryModule has the variable marketPlace set to NO. This will avoid you running into any licensing issues.
There is two ways you can download this module. The go to the releases/UseIfDownloadingFromGithub folder. This will have a release compiled for anyone download it from github.
If you are building from source you will need to do the following:
- Modify the titanium.xcconfig file with the path to your Titanium installation
- Make sure the the method moduleGUID in the class BencodingDictionaryModule has the variable marketPlace set to NO. This will avoid you running into any licensing issues.
- Download the latest release from the releases folder ( or you can build it yourself )
- Install the bencoding.stepper module. If you need help here is a "How To" guide.
- You can now use the module via the commonJS require method, example shown below.
var stepper = require('bencoding.stepper');
Now we have the module installed and avoid in our project we can start to use the components, see the feature guide below for details.
The below is an example on how to create a stepper control that starts at 10 and goes to 200. The initial value is set to 25 and the fire event will be called each time the value is changed.
var myStepper = stepper.createStepper({
min:10, //Minimum stepper value
max:200,//Maximum stepper value
value:25, //Initial or starting value of the stepper
continuous:true //Stepper will increment by 1 ( or stepvalue ) per touch
});
The stepper controls have the following properties. They can be set or read at anytime.
- min - the minimum stepper value (number value) (read/write)
- max - the maximum stepper value (number value) (read/write)
- enabled - boolean to indicate the enabled state of the stepper
- continuous - if true, value change events are sent immediately when the value changes during user interaction. If false, a value change event is sent when user interaction ends. If true the stepper's value will continue to increase/decrease until the touchend event is fired. (read/write)
- value - the current value of the stepper (float value) (read/write)
- wraps - if true, incrementing beyond max sets value to min; likewise, decrementing below min sets value to max. If false, the stepper does not increment beyond max nor does it decrement below min but rather holds at those values. (boolean)(read/write)
- stepValue - the step, or increment, value for the stepper. Must be numerically greater than 0, by default this value is 1.
The below example shows how to create the stepper control using all of the properties. Please note any of these properties can be read or set after the control has been created.
var stepper = require('bencoding.stepper');
var myStepper = stepper.createStepper({
min:10, //Minimum stepper value (1 by default)
max:200,//Maximum stepper value (100 by default)
value:25, //Initial or starting value of the stepper (1 by default)
enabled:true, //Control is enabled (true by default)
wraps:true, //Control will start back at 10 after it hits it's max, off by default
stepValue:2, //Will increment each stepper change action by 2, this is 1 by default
continuous:true //Stepper will increment by 1 ( or stepvalue ) per touch
});
The stepper has a change event that is fired when the stepper value is changed. Please see below for an example.
myStepper.addEventListener('change',function(e){
myLabel.text = 'Quality: ' + Math.round(e.value);
showEventsLabel.text='Event = e.value: ' + Math.round(e.value) + ' myStepper.value=' + myStepper.value;
});
Please see the example directory for a working "How To" example application.
See the included sample app in action http://www.youtube.com/watch?v=IMEdwPi96iw.
This project is licensed under the OSI approved Apache Public License (version 2). For details please see the license associated with each project.
Developed by Ben Bahrenburg available on twitter @benCoding
Please consider following the @benCoding Twitter for updates and more about Titanium.
For module updates, Titanium tutorials and more please check out my blog at benCoding.Com.
