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á 8 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

Pacotão Dominando o Adianti Framework 7

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

Dominando o Adianti 7 Quero me inscrever agora!

Comentários (3)

Felipe Cortez 02/07/2015 (há 8 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 . ' ';
$message.= 'Field 2 : ' . $data->field2 . ' ';
$message.= 'Field 3 : ' . $data->field3 . ' ';
$message.= 'Field 4 : ' . $data->field4 . ' ';
$message.= 'Field 5 : ' . $data->field5 . ' ';
$message.= 'Field 6 : ' . $data->field6 . ' ';
$message.= 'Field 7 : ' . $data->field7 . ' ';
$message.= 'Field 8 : ' . $data->field8 . ' ';
$message.= 'Field 9 : ' . $data->field9 . ' ';
// show the message
new TMessage('info', $message);
}
}
?>

Boa Sorte !

Felipe Cortez

Felipe Cortez 02/07/2015 (há 8 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á 8 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