psToolboxPlugin - 0.1.0

f***book like token autocompleter

You are currently browsing
the website for symfony 1

Visit the Symfony2 website


« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
Show source

psToolboxPlugin

The psToolboxPlugin is a symfony plugin that may provide various tools in the future.

For now it contains a widget called psWidgetFormJQueryTokenAutocompleter that favourably replace a select element when many choices are available. You can found similar widgets on f***book mailbox, on aple mail application, on aple *phone sms application...

Using the widget

  • Create two actions. init action will be used to populate tokens using default values. search action will be used for... search !

    class exampleActions extends sfActions
    {
      protected $results = array(
        1 => 'Jean Claude',
        2 => 'Marie Louise',
        3 => 'Jacques Henri',
        4 => 'Henri Jean',
        5 => 'Claude Marie'
      );
     
      public function executeInit(sfWebRequest $request)
      {
        $results = array();
        $default = $request->getParameter('default', array());
     
        if ($default)
        {
          foreach($default as $id)
          {
            if (isset($this->results[$id]))
            {
              array_push($results, array('id' => $id, 'label' => $this->results[$id]));
            }
          }
        }
     
        $this->getResponse()->setHttpHeader('Content-Type', 'application/json; charset=utf-8');
        return $this->renderText('(' . json_encode($results) . ')');
      }
     
      public function executeSearch(sfWebRequest $request)
      {
        $results = array();
        $q = $request->getParameter('q', '');
     
        if ($q)
        {
          foreach($this->results as $id => $label)
          {
            if (false===stristr($label, $q)) continue;
            array_push($results, array('id' => $id, 'label' => $label));
          }
        }
     
        $this->getResponse()->setHttpHeader('Content-Type', 'application/json; charset=utf-8');
        return $this->renderText('(' . json_encode($results) . ')');
      }
    }
  • Create two routes in your routing.yml file

    autocomplete_init:
      url: /autocomplete/init
      param: { module: example, action: init }
     
    autocomplete_search:
      url: /autocomplete/search
      param: { module: example, action: search }
  • Add the widget to your form

    public function configure()
    {
      // (...)
     
      $this->setWidget('author', new psWidgetFormJQueryTokenAutocompleter(array(
        'default' => array(1, 2),
        'init_url' => url_for('autocomplete_init'),
        'search_url' => url_for('autocomplete_search'),
        'theme' => 'fcbk'
      )));
     
      $this->setValidator('author', new sfValidatorChoiceMany(array(
        'choices' => array(1, 2, 3, 4, 5)
      )));
     
      // (...)
    }

    Actually two themes are available : 'fcbk' and 'lrn', but you can customize the widget as explained later in this document.

  • Don't forget to load jquery library in your views, and to load form javascripts and stylesheets

    <?php include_javascript('jquery/jquery-1.3.2.min.js') ?>
    <?php include_stylesheets_for_form($form) ?>
    <?php include_javascripts_for_form($form) ?>
     
    <?php echo $form ?>
  • It should work now !

Customizing the widget

You can of course create your own css files (take a look at the provided themes css)

If you need more control, say you need to display a small picture inside each token, you can create your own javascript formatter. Please note that '%close%' will be replaced by the close link.

sampleFormatter = {
  formatToken: function(data) {
    return '<img src="' + data.img + '" />' + data.label + ' %close%'
  },
  formatFeedItem: function(data) {
    return data.label;
  }
}

Then you can use widget's 'formatter' option.

$this->setWidget('author', new psWidgetFormJQueryTokenAutocompleter(array(
  'default' => array(1, 2),
  'init_url' => url_for('autocomplete_init'),
  'search_url' => url_for('autocomplete_search'),
  'formatter' => 'sampleFormatter'
)));