Slider Vertical

Slider Vertical Olá, Tenho uma tarefa para uma entrevista de emprego que gostaria de desenvolver usando o framework. Todavia é solicitado que o formulário tenha vários campos do tipo slider verticais, tal como (https://jqueryui.com/slider/#multiple-vertical), porém no framework, até onde vi, só tem slide horizontal. Gostaria muito se alguém pudesse indicar o melhor caminho a seguir nesse caso. Abs...

Slider Vertical

Fechado

Felipe Costa 02/07/2015 (há 10 anos)

Olá,

Tenho uma tarefa para uma entrevista de emprego que gostaria de desenvolver usando o framework.
Todavia é solicitado que o formulário tenha vários campos do tipo slider verticais, tal como (https://jqueryui.com/slider/#multiple-vertical), porém no framework, até onde vi, só tem slide horizontal.
Gostaria muito se alguém pudesse indicar o melhor caminho a seguir nesse caso.

Abs,

Felipe

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!

Dominando o Adianti Framework Quero me inscrever agora!

Comentários (3)

Felipe Cortez 02/07/2015 (há 10 anos)

Olá Xará o primeiro salário será meu. ou como fazemos aqui no serviço vai perder o ticket rsrss

Essa alteração exige um pouco de conhecimento em JavaScript porém como o Framework é fantástico fica fácil fazer modificações lembrando que a solução que te passarei deveria seguir algumas regras de extensibilidade porém como há a necessidade de modificar o Java Script quando tiver atualização do core irá precisar rever.

Será necessário alterar a classe TSlider e o arquivo Java Sript components.min.js

Arquivo components.min.js JavaScript troque essa função note que acrescentei uma variável

function tslider_start(a, b, c, d, e, f) { $(function() { $(a + "_div").slider({ orientation: f, value: b, min: c, max: d, step: e, slide: function(b, c) { $(a).val(c.value) } }) }) }

Ok na Classe TSlider ficará assim

 <?php
Namespace Adianti\\Widget\\Form;
use Adianti\\Widget\\Form\\AdiantiWidgetInterface;
use Adianti\\Widget\\Base\\TElement;
use Adianti\\Widget\\Base\\TScript;
use Adianti\\Widget\\Form\\TField;
/**
 * Slider Widget
 *
 * @version    2.0
 * @package    widget
 * @subpackage form
 * @author     Pablo Dall'Oglio
 * @copyright  Copyright (c) 2006-2014 Adianti Solutions Ltd. (http://www.adianti.com.br)
 * @license    http://www.adianti.com.br/framework-license
 */
class TSlider extends TField implements AdiantiWidgetInterface
{
    protected $id;
    private $min;
    private $max;
    private $step;
    private $direction;
    
    /**
     * Class Constructor
     * @param $name Name of the widget
     */
    public function __construct($name)
    {
        parent::__construct($name);
        $this->id   = 'tslider_'.uniqid();
    }
    
    /**
     * Define the field's range
     * @param $min Minimal value
     * @param $max Maximal value
     * @param $step Step value
     */
    public function setRange($min, $max, $step, $direction)
    {
        $this->min = $min;
        $this->max = $max;
        $this->step = $step;
        $this->value = $min;
        $this->direction = '"'.$direction.'"';
        
    }
    
    /**
     * Enable the field
     * @param $form_name Form name
     * @param $field Field name
     */
    public static function enableField($form_name, $field)
    {
        TScript::create( " tslider_enable_field('{$form_name}', '{$field}'); " );
    }
    
    /**
     * Disable the field
     * @param $form_name Form name
     * @param $field Field name
     */
    public static function disableField($form_name, $field)
    {
        TScript::create( " tslider_disable_field('{$form_name}', '{$field}'); " );
    }
    
    /**
     * Shows the widget at the screen
     */
    public function show()
    {
        // define the tag properties
        $this->tag-> name  = $this->name;    // TAG name
        $this->tag-> value = $this->value;   // TAG value
        $this->tag-> type  = 'text';         // input type
        $this->tag-> style = "width:{$this->size}px";  // size
        
        if ($this->id)
        {
            $this->tag->{'id'} = $this->id;
        }
        
        // verify if the widget is editable
        if (parent::getEditable())
        {
            $this->tag-> readonly = "1";
            $this->tag-> style = "width:40px;-moz-user-select:none;border:0;text-align:center";
            
            $div = new TElement('div');
            $div-> id = $this->id.'_div';
            $div-> style = "width:{$this->size}px";
            
            $main_div = new TElement('div');
            $main_div-> style="text-align:center;width:{$this->size}px";
            
            TScript::create(" tslider_start( '#{$this->id}', {$this->value}, {$this->min}, {$this->max}, {$this->step}, {$this->direction} ); ");
            
            $main_div->add($this->tag);
            $main_div->add($div);
            $main_div->show();
        }
        else
        {
            $this->tag-> readonly = "1";
            $this->tag->{'class'} = 'tfield_disabled'; // CSS
            $this->tag-> style = "width:40px;-moz-user-select:none;";
            $this->tag-> onmouseover = "style.cursor='default'";
            $this->tag->show();
        }
    }
    
    /**
     * Set the value
     */
    public function setValue($value)
    {
        parent::setValue( (int) $value);
    }
}
?>

agora o que nós fizemos acrescentamos uma variável que iremos dizer a orientação do Slider conforme a documentação
https://api.jqueryui.com/slider/

Eu usei um form do tutor para testar:

 <?php
/**
 * FormCustomView
 *
 * @version    1.0
 * @package    samples
 * @subpackage tutor
 * @author     Pablo Dall'Oglio
 * @copyright  Copyright (c) 2006-2014 Adianti Solutions Ltd. (http://www.adianti.com.br)
 * @license    http://www.adianti.com.br/framework-license
 */
class FormCustomView extends TPage
{
    private $form;
    
    /**
     * Class constructor
     * Creates the page
     */
    function __construct()
    {
        parent::__construct();
        
        // create the notebook
        $notebook = new TNotebook(620, 340);
        
        // create the form
        $this->form = new TForm;
        
        // creates the notebook page
        $table = new TTable;
        
        // add the notebook inside the form
        $this->form->add($table);
        
        // adds the notebook page
        $notebook->appendPage('Input elements', $this->form);
        
        // create the form fields
        $field1  = new TEntry('field1');
        $field2  = new TEntry('field2');
        $field3  = new TEntry('field3');
        $field4  = new TEntry('field4');
        $field5  = new TPassword('field5');
        $field6  = new TDate('field6');
        $field7  = new TSpinner('field7');
        $field8  = new TSlider('field8');
        $field9 = new TText('field9');
        
        $field1->setTip('Tip for field 1');
        $field2->setTip('Tip for field 2');
        $field3->setTip('Tip for field 3');
        $field4->setTip('Tip for field 4');
        $field5->setTip('Tip for field 5');
        $field6->setTip('Tip for field 6');
        $field7->setTip('Tip for field 7');
        $field8->setTip('Tip for field 8');
        $field9->setTip('Tip for field 9');
        
        $field2->setValue('123');
        $field2->setEditable(FALSE);
        $field3->setMask('99.999-999');
        $field4->setMaxLength(10);
        $field6->setSize(100);
        $field7->setRange(0,100,10);
        $field8->setSize(10);//alterado o tamanho do slider 
        $field8->setRange(0,100,5,'vertical');//acresentado a variavel direction
        $field7->setValue(30);
        $field8->setValue(50);
        $field9->setSize(300, 50);
        
        // add rows for the fields
        $table->addRowSet( new TLabel('TEntry object:'), $field1 );
        $table->addRowSet( new TLabel('TEntry not editable:'), $field2 );
        $table->addRowSet( new TLabel('TEntry with mask:'), $field3, new TLabel('99.999-999') );
        $table->addRowSet( new TLabel('TEntry with maxlength (10):'), $field4 );
        $table->addRowSet( new TLabel('TPassword object:'), $field5 );
        $table->addRowSet( new TLabel('TDate Object:'), $field6 );
        $table->addRowSet( new TLabel('Spinner Object:'), $field7 );
        $table->addRowSet( new TLabel('Slider Object:'), $field8 );
        $table->addRowSet( new TLabel('TText Object:'), $field9 );
        
        // creates the action button
        $button1=new TButton('action1');
        // define the button action
        $button1->setAction(new TAction(array($this, 'onSave')), 'Save');
        $button1->setImage('ico_save.png');
        
        // define wich are the form fields
        $this->form->setFields(array($field1, $field2, $field3, $field4, $field5,
                                      $field6, $field7, $field8, $field9, $button1));
        
        // add a row for the button
        $row=$table->addRow();
        $row->addCell($button1);
        
        // wrap the page content using vertical box
        $vbox = new TVBox;
        $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
        $vbox->add($notebook);
        
        parent::add($vbox);
    }
    
    /**
     * Simulates an save button
     * Show the form content
     */
    public function onSave($param)
    {
        $data = $this->form->getData(); // optional parameter: active record class
        
        // put the data back to the form
        $this->form->setData($data);
        
        // creates a string with the form element's values
        $message = 'Field 1 : ' . $data->field1 . '<br>';
        $message.= 'Field 2 : ' . $data->field2 . '<br>';
        $message.= 'Field 3 : ' . $data->field3 . '<br>';
        $message.= 'Field 4 : ' . $data->field4 . '<br>';
        $message.= 'Field 5 : ' . $data->field5 . '<br>';
        $message.= 'Field 6 : ' . $data->field6 . '<br>';
        $message.= 'Field 7 : ' . $data->field7 . '<br>';
        $message.= 'Field 8 : ' . $data->field8 . '<br>';
        $message.= 'Field 9 : ' . $data->field9 . '<br>';
        
        // show the message
        new TMessage('info', $message);
    }
}
?>

Boa Sorte !

Felipe Cortez

Felipe Cortez 02/07/2015 (há 10 anos)

Felipe Fica melhor assim não acha?

$field8->setSize(10);//alterado o tamanho do slider
$field8->setRange(0,100,10);// Range
$field8->setDirection('vertical');//acresentado a variavel direction

 <?php
Namespace Adianti\Widget\Form;
use Adianti\Widget\Form\AdiantiWidgetInterface;
use Adianti\Widget\Base\TElement;
use Adianti\Widget\Base\TScript;
use Adianti\Widget\Form\TField;
/**
 * Slider Widget
 *
 * @version    2.0
 * @package    widget
 * @subpackage form
 * @author     Pablo Dall'Oglio
 * @copyright  Copyright (c) 2006-2014 Adianti Solutions Ltd. (http://www.adianti.com.br)
 * @license    http://www.adianti.com.br/framework-license
 */
class TSlider extends TField implements AdiantiWidgetInterface
{
    protected $id;
    private $min;
    private $max;
    private $step;
    private $direction;
    
    /**
     * Class Constructor
     * @param $name Name of the widget
     */
    public function __construct($name)
    {
        parent::__construct($name);
        $this->id   = 'tslider_'.uniqid();
    }
    
    /**
     * Define the field's range
     * @param $min Minimal value
     * @param $max Maximal value
     * @param $step Step value
     */
    public function setRange($min, $max, $step)
    {
        $this->min = $min;
        $this->max = $max;
        $this->step = $step;
        $this->value = $min;
        
        
    }
    
    //rotina para modificar o direction do slider
    public function setDirection($direction)
    {
        $this->direction = '"'.$direction.'"';
        
    }
    
    
    
    
    /**
     * Enable the field
     * @param $form_name Form name
     * @param $field Field name
     */
    public static function enableField($form_name, $field)
    {
        TScript::create( " tslider_enable_field('{$form_name}', '{$field}'); " );
    }
    
    /**
     * Disable the field
     * @param $form_name Form name
     * @param $field Field name
     */
    public static function disableField($form_name, $field)
    {
        TScript::create( " tslider_disable_field('{$form_name}', '{$field}'); " );
    }
    
    /**
     * Shows the widget at the screen
     */
    public function show()
    {
        // define the tag properties
        $this->tag-> name  = $this->name;    // TAG name
        $this->tag-> value = $this->value;   // TAG value
        $this->tag-> type  = 'text';         // input type
        $this->tag-> style = "width:{$this->size}px";  // size
        
        if ($this->id)
        {
            $this->tag->{'id'} = $this->id;
        }
        
        // verify if the widget is editable
        if (parent::getEditable())
        {
            $this->tag-> readonly = "1";
            $this->tag-> style = "width:40px;-moz-user-select:none;border:0;text-align:center";
            
            $div = new TElement('div');
            $div-> id = $this->id.'_div';
            $div-> style = "width:{$this->size}px";
            
            $main_div = new TElement('div');
            $main_div-> style="text-align:center;width:{$this->size}px";
            
            TScript::create(" tslider_start( '#{$this->id}', {$this->value}, {$this->min}, {$this->max}, {$this->step}, {$this->direction} ); ");
            
            $main_div->add($this->tag);
            $main_div->add($div);
            $main_div->show();
        }
        else
        {
            $this->tag-> readonly = "1";
            $this->tag->{'class'} = 'tfield_disabled'; // CSS
            $this->tag-> style = "width:40px;-moz-user-select:none;";
            $this->tag-> onmouseover = "style.cursor='default'";
            $this->tag->show();
        }
    }
    
    /**
     * Set the value
     */
    public function setValue($value)
    {
        parent::setValue( (int) $value);
    }
}
?>

Felipe Costa - AUTOR DO POST 02/07/2015 (há 10 anos)

Caro Felipe,

Você ajudou muito, não sabe quanto... Me passa a conta, rsrsrs.
Vou executar suas sugestões e assim que conseguir lhe falo.

Muito obrigado mesmo.

Abs,

Felipe