Post Reply 
Author Mobile Touch Widgets
Girish
AT core team member

Find all posts by this user
Quote this message in a reply
Default  24 June 2013 12:13
1. Requirements

The requirement is to make the Widgets for the mobile devices.

Create a Switch widget, as an extension of the slider widget that is used for binary on/off or true/false data input. It can be either drag the flip handle like a slider or tap one side of the switch.

[Image: attachment.php?aid=1]

Create a Button widget with native behaviour. The widget should support different type of highlighting pattern for link and button types.
[Image: attachment.php?aid=2]
[Image: attachment.php?aid=3]

2. Technical solution

Switch Widget
Swich Widget is an extension to the Slider Widget and uses the same drag utilsclass for sliding.
  • SliderCfgBeans
    Add a new boolean configuration parameter toggleSwitch, step, tapToMove to the SliderCfgBeans.
    "toggleSwitch": {
                $type: "json:Boolean",
                $description: "to enable the Toggle switch",
                $default: "false"
            },    
    "step": {
                $type: "json:Integer",
                $description: "size or amount of each step the slider takes between the min and max",
                $default: 1
            },
    "tapToMove": {
                $type: "json:Boolean",
                $description: "Tap on the Slider Rail should move the thumb",
                $default: false
            },

    //......
    and it generates the below markup.
    <div style="width:100px;" class="touchLibSlider">
    <span id="w15_parent" style="width:100px;" class="touchContainer">
    <span style="left:70px;" class="sliderButton" id="w15" atdraggable="1"></span>
    <div style="width: 100px; left: 0px;" class="touchLibSwitchOn" id="w15_on">ON</div>
    <div style="width: 30px; left: 70px;" class="touchLibSwitchOff" id="w15_off">OFF</div>
    </span>
    </div>
  • SliderCfgBeans
    Change the _onMouseUp method of Mouse class to support the tap on the slider rail.
  • Toggle Switch API
    {Template {
            ...
            $wlibs : {
                'touch' : 'aria.touch.widgets.TouchWidgetLib'
            }
            ...
        }}

            ...

    {@touch:Slider {        
          bindValue: {
            to: "switchboolean",
            inside: data
          },
          width: 100,
          toggleSwitch: true      
        }/}
    The Value returns either true or false depending on the state of the switch.



Button Widget
  • aria.touch.widgets.Button
    The new aria.touch.widgets.Button class which is used to generate the button and extends the Element class.
    The button uses the Tap gesture and listens to tapstart, tap and tapcancel for determining the state of the button for highlighting.
  • ButtonCfg
    "isLink" : {
                        $type : "json:Boolean",
                        $description : "Check the type is a link or button, for highlighting different pattern.",
                        $default : false
            },
    "delay" : {
                        $type : "json:Integer",
                        $description : "delay between and tapstart event and highlighting of the link or button in miliseconds.",
                        $default : 30
            },
    "tagName" : {
                        $type : "json:String",
                        $description : "Tag to be Used for Button Markup",
                        $default : "div"
            }
            
            // ...
  • Button API
    {@touch:Button {
          isLink: false,
          tagName : "div",
          on: {tap : { fn : onButtonClick}}
        }}
        Button
      {/@touch:Button}

3. History

14/06/2013  Creation of the specification  - Girish
19/06/2013  Creation of the technical solution  - Girish


Attached File(s)
.png  Switch.png (Size: 3.44 KB / Downloads: 55)
.png  Button.png (Size: 3.79 KB / Downloads: 52)
.png  Link.png (Size: 3.64 KB / Downloads: 53)
Post Reply