`fa.jquery.renderers`¶

This is the predefined renderers. You can have a look at the Online Demo.

If you need your own, use the jQueryFieldRenderer as base class.

Some plugins use extra resources stored at the StaticApp. By default the prefix used is /jquery. If you want to change this you can use this snippet:

>>> from fa.jquery import renderers
>>> renderers.url.root_url = '/jquery'

Classes¶

`DateFieldRenderer`¶

class fa.jquery.renderers.DateFieldRenderer(field)¶

Use http://jqueryui.com/demos/datepicker/:

>>> from testing import fs
>>> print fs.date.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<input type="text" autocomplete="off" size="10" value="" id="Sample--date" name="Sample--date" />
<script type="text/javascript">
  jQuery.fa.datepicker('Sample--date', {"dateFormat": "yy-mm-dd"});
</script>...

`DateTimeFieldRenderer`¶

class fa.jquery.renderers.DateTimeFieldRenderer(field)¶: Use http://jqueryui.com/demos/datepicker/

`date`¶

class fa.jquery.renderers.date(field)¶: Alias for DateFieldRenderer with preset options {}

`datetime`¶

class fa.jquery.renderers.datetime(field)¶: Alias for DateTimeFieldRenderer with preset options {}

Functions¶

`AutoCompleteFieldRenderer()`¶

fa.jquery.renderers.AutoCompleteFieldRenderer(url_or_data, renderer=<class 'formalchemy.fields.TextFieldRenderer'>, **jq_options)¶

Use http://docs.jquery.com/UI/Autocomplete:

>>> from testing import fs
>>> field = fs.title.set(renderer=AutoCompleteFieldRenderer(['aa', 'bb']))

With more advanced options:

>>> field = fs.title.set(
...     renderer=AutoCompleteFieldRenderer(
...         '/my/uri',
...         width=320,
...         scroll=True,
...         scrollHeight=300,
...         ))

`ButtonSetFieldRenderer()`¶

fa.jquery.renderers.ButtonSetFieldRenderer(multiple=False, **jq_options)¶

Fill a list field using http://jqueryui.com/demos/button/:

>>> from testing import fs
>>> print fs.radioset.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<div style="display:none;"><input autocomplete="off" id="Sample--radioset_0" 
                                  name="Sample--radioset" type="radio"
                                  value="a" /><label for="Sample--radioset_0">a</label>...</div>
<div id="Sample--radioset_buttonset"></div>
<script type="text/javascript">
  jQuery.fa.buttonset('Sample--radioset', {"multiple": false, "options": ["a", "b", "c", "d", "e", "f"]});
</script>
<BLANKLINE>

`ColorPickerFieldRenderer()`¶

fa.jquery.renderers.ColorPickerFieldRenderer(colors=[], **jq_options)¶

Color Picker using http://www.syronex.com/software/jquery-color-picker:

>>> from testing import fs
>>> print fs.color.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<div style="display:none;"><input autocomplete="off" id="Sample--color" name="Sample--color" type="text" /></div>
<div id="Sample--color_colorpicker"></div>
<script type="text/javascript">
  jQuery.fa.colorpicker('Sample--color', {"color": ["#FFFFFF", ...]});
</script>
<BLANKLINE>

<div style="display:none;"><input autocomplete="off" id="Sample--color" name="Sample--color" type="text" /></div>
<div id="Sample--color_colors"></div>
<script type="text/javascript">
  jQuery.fa.colorpicker('Sample--color', {"color": ["#FFFFFF", ..., "#FF0096", "#B02B2C", "#000000"]});
</script>...

`RichTextFieldRenderer()`¶

fa.jquery.renderers.RichTextFieldRenderer(use='tinymce', resources_prefix=None, **jq_options)¶

RichTextFieldRenderer using TinyMCE or MarkitUp!:

>>> from testing import fs
>>> field = fs.rich.set(renderer=RichTextFieldRenderer(use='tinymce', theme='advanced'))
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_tinymce"></div>
<script type="text/javascript">
  jQuery.fa.tinymce('Sample--rich', {"theme_advanced_toolbar_location": "top", "theme_advanced_toolbar_align": "left", "theme": "advanced", "theme_advanced_statusbar_location": "bottom", "options": [], "theme_advanced_resizing": true});
</script>

...

<script type="text/javascript">
  jQuery.fa.add_resource("/jquery/tiny_mce/tiny_mce.js");
  jQuery.fa.add_resource("/jquery/tiny_mce/jquery.tinymce.js");
</script>
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_tinymce"></div>
<script type="text/javascript">
  jQuery.fa.tinymce('Sample--rich', {... "theme": "advanced", ...});
</script>

If you want to use your own TinyMCE/MarkitUp! version:

>>> field = fs.rich.set(renderer=RichTextFieldRenderer(use='tinymce', resources_prefix='/my_js'))
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_tinymce"></div>
<script type="text/javascript">
  jQuery.fa.tinymce('Sample--rich', {"theme_advanced_toolbar_location": "top", "theme_advanced_toolbar_align": "left", "theme": "advanced", "theme_advanced_statusbar_location": "bottom", "options": [], "theme_advanced_resizing": true});
</script>

...

There is also some aliases:

>>> field = fs.rich.set(renderer=tinymce())
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_tinymce"></div>
<script type="text/javascript">
  jQuery.fa.tinymce('Sample--rich', {"theme_advanced_toolbar_location": "top", "theme_advanced_toolbar_align": "left", "theme": "advanced", "theme_advanced_statusbar_location": "bottom", "options": [], "theme_advanced_resizing": true});
</script>

...

>>> field = fs.rich.set(renderer=textile())
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_markitup"></div>
<script type="text/javascript">
  jQuery.fa.markitup('Sample--rich', {"previewAutoRefresh": true, "nameSpace": "textile", "options": [], "resizeHandle": true, "previewParserPath": "/jquery/markup_parser.html?markup=textile"});
</script>

>>> field = fs.rich.set(renderer=markdown())
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_markitup"></div>
<script type="text/javascript">
  jQuery.fa.markitup('Sample--rich', {"previewAutoRefresh": true, "nameSpace": "markdown", "options": [], "resizeHandle": true, "previewParserPath": "/jquery/markup_parser.html?markup=markdown"});
</script>

<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
...

>>> field = fs.rich.set(renderer=bbcode())
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
<div id="Sample--rich_markitup"></div>
<script type="text/javascript">
  jQuery.fa.markitup('Sample--rich', {"previewAutoRefresh": true, "nameSpace": "bbcode", "options": [], "resizeHandle": true, "previewParserPath": "/jquery/markup_parser.html?markup=bbcode"});
</script>

<textarea autocomplete="off" id="Sample--rich" name="Sample--rich"></textarea>
...

`SelectableFieldRenderer()`¶

fa.jquery.renderers.SelectableFieldRenderer(multiple=False, **jq_options)¶

Fill a list field using http://jqueryui.com/demos/selectable/:

>>> from testing import fs
>>> print fs.selectable.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<div style="display:none;"><select autocomplete="off" id="Sample--selectable" name="Sample--selectable">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
</select></div>
<div id="Sample--selectable_selectable"></div>
<script type="text/javascript">
  jQuery.fa.selectable('Sample--selectable', {"multiple": false, "options": ["a", "b", "c", "d", "e", "f"]});
</script>

`SliderFieldRenderer()`¶

fa.jquery.renderers.SliderFieldRenderer(min=0, max=100, show_value=True, **jq_options)¶

Fill an integer field using http://jqueryui.com/demos/slider/:

>>> from testing import fs
>>> field = fs.slider.set(renderer=SliderFieldRenderer(min=10, max=150))

`SortableTokenTextFieldRenderer()`¶

fa.jquery.renderers.SortableTokenTextFieldRenderer(sep=';', show_input=False, **jq_options)¶

Sortable token using http://jqueryui.com/demos/sortable/:

>>> from testing import fs
>>> field = fs.sortable.set(renderer=SortableTokenTextFieldRenderer())
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<input type="hidden" value="fisrt;second" id="Sample--sortable" name="Sample--sortable" />
<ul id="Sample--sortable_sortable" class="fa_sortable">
<li class="ui-state-default" alt="fisrt"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>fisrt</li>
<li class="ui-state-default" alt="second"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>second</li>
</ul>
<script type="text/javascript">
  jQuery.fa.sortable('Sample--sortable', {sep:';'});
</script>...

`alias()`¶

fa.jquery.renderers.alias(obj, **alias_kwargs)¶: decorator to make aliases with docs

`autocomplete()`¶

fa.jquery.renderers.autocomplete(*args, **kwargs)¶: Alias for AutoCompleteFieldRenderer() with preset options {}

`bbcode()`¶

fa.jquery.renderers.bbcode(*args, **kwargs)¶: Alias for RichTextFieldRenderer() with preset options {‘use’: ‘bbcode’}

`checkboxset()`¶

fa.jquery.renderers.checkboxset(*args, **kwargs)¶: Alias for ButtonSetFieldRenderer() with preset options {‘multiple’: True}

`colorpicker()`¶

fa.jquery.renderers.colorpicker(*args, **kwargs)¶: Alias for ColorPickerFieldRenderer() with preset options {}

`ellipsys()`¶

fa.jquery.renderers.ellipsys(renderer)¶: Update a renderer to remove tags and strip text

`jQueryFieldRenderer()`¶

fa.jquery.renderers.jQueryFieldRenderer(plugin, show_input=False, tag='div', renderer=<class 'formalchemy.fields.TextFieldRenderer'>, resources_prefix=None, resources=[], **jq_options)¶

Extending jQuery.fa:

>>> from testing import fs
>>> renderer = jQueryFieldRenderer('myplugin', option1=True, option2=['a', 'b'])
>>> field = fs.title.set(renderer=renderer)
>>> print field.render() #doctest: +ELLIPSIS +NORMALIZE_WHITESPACE
<div style="display:none;"><input autocomplete="off" id="Sample--title" name="Sample--title" type="text" /></div>
<div id="Sample--title_myplugin"></div>
<script type="text/javascript">
  jQuery.fa.myplugin('Sample--title', {"option2": ["a", "b"], "options": [], "option1": true});
</script>...

Then in your javascript code:

jQuery.fa.extend({
     myplugin: function(field, plugin, options) {
         // do what you want
    }
});

Where field is the input, plugin the empty div and options the jq_options passed to the renderer.

If you are using pyramid, resources should be a list of static url like yourpackage:path/to/resource.js

`markdown()`¶

fa.jquery.renderers.markdown(*args, **kwargs)¶: Alias for RichTextFieldRenderer() with preset options {‘use’: ‘markdown’}

`plugin()`¶

fa.jquery.renderers.plugin(*args, **kwargs)¶: Alias for jQueryFieldRenderer() with preset options {}

`radioset()`¶

fa.jquery.renderers.radioset(*args, **kwargs)¶: Alias for ButtonSetFieldRenderer() with preset options {‘multiple’: False}

`selectable()`¶

fa.jquery.renderers.selectable(*args, **kwargs)¶: Alias for SelectableFieldRenderer() with preset options {‘multiple’: False}

`selectables()`¶

fa.jquery.renderers.selectables(*args, **kwargs)¶: Alias for SelectableFieldRenderer() with preset options {‘multiple’: True}

`slider()`¶

fa.jquery.renderers.slider(*args, **kwargs)¶: Alias for SliderFieldRenderer() with preset options {}

`sortable_token()`¶

fa.jquery.renderers.sortable_token(*args, **kwargs)¶: Alias for SortableTokenTextFieldRenderer() with preset options {}

`textile()`¶

fa.jquery.renderers.textile(*args, **kwargs)¶: Alias for RichTextFieldRenderer() with preset options {‘use’: ‘textile’}

`tinymce()`¶

fa.jquery.renderers.tinymce(*args, **kwargs)¶: Alias for RichTextFieldRenderer() with preset options {‘use’: ‘tinymce’}

`fa.jquery.renderers`¶

Classes¶

`DateFieldRenderer`¶

`DateTimeFieldRenderer`¶

`date`¶

`datetime`¶

Functions¶

`AutoCompleteFieldRenderer()`¶

`ButtonSetFieldRenderer()`¶

`ColorPickerFieldRenderer()`¶

`RichTextFieldRenderer()`¶

`SelectableFieldRenderer()`¶

`SliderFieldRenderer()`¶

`SortableTokenTextFieldRenderer()`¶

`alias()`¶

`autocomplete()`¶

`bbcode()`¶

`checkboxset()`¶

`colorpicker()`¶

`ellipsys()`¶

`jQueryFieldRenderer()`¶

`markdown()`¶

`plugin()`¶

`radioset()`¶

`selectable()`¶

`selectables()`¶

`slider()`¶

`sortable_token()`¶

`textile()`¶

`tinymce()`¶

Table Of Contents

Previous topic

Next topic

This Page

Navigation

Classes¶

Functions¶

Previous topic

Next topic

This Page

Quick search

Navigation