Integrate Xataface with dojo toolkit

[fantomasdm]

Is possible to integrate dojotoolkit in edit form? It's a javascript toolkit open source url:http://www.dojotoolkit.org/

[shannah]

What type of integration did you have in mind. Using blocks and slots it is quite easy to do one-off solutions if there is a widget that you want to use from a javascript toolkit.

[fantomasdm]

Hi , I have integrate dojo, for usingi slider control... FYI. I think it's very useful!!
I using a slider con integer fields for value from 0 to 10...

Code: Select all

    function block__valoreInt_widget()
    {
       
        $app =& Dataface_Application::getInstance();
      $record =& $app->getRecord(); // get the parent record
     
?>
<link rel="stylesheet" type="text/css" href="dojo/dijit/themes/claro/claro.css"/>
             <div id="slider">
        </div>
        <p>
        <?php
            echo "<input type='text' id='sliderValue' dojoType='dijit.form.TextBox' value='".$record->val('valoreInt'). "'/>";
            ?>
        </p>
     <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true">
    </script>
<script type="text/javascript">
    dojo.require("dijit.form.Slider");
    dojo.require("dijit.form.TextBox"); // this we only include to make the textinput look prettier
    dojo.addOnLoad(function() {

        var slider = new dijit.form.HorizontalSlider({
            name: "valoreInt",
            value: <?php   echo $record->val('valoreInt'); ?>,
            minimum: 0,
            maximum: 10,
            discreteValues:11,
            intermediateChanges: true,
            style: "width:300px;",
            onChange: function(value) {
                dojo.byId("sliderValue").value = value;
            }
        },
        "slider");
    });
</script>




[fantomasdm]

Hi I have add a code for using rangeSlider of dojo javascript toolkit, but first we have to patch dojo source using this documentation:http://bugs.dojotoolkit.org/ticket/11503

This is an example for rangesliter on 2 integer field with value between 0 and 10.
I hope that's is useful!

P.S. I using document.body.className = ' claro '; for change style sheet of body..

Code: Select all

function block__ValMin_widget()
{
   
         $app =& Dataface_Application::getInstance();
      $record =& $app->getRecord(); // get the parent record
      ?>
              <style type="text/css">
            @import url(dojo/dojox/form/resources/RangeSlider.css);
        </style>
       <div id="rangeSlider" class=" nihilo ">
        </div>
      <?php
                 
echo "<input type='text' id='ValMin' dojoType='dijit.form.TextBox' value='".$record->val('ValMin'). "'/>";
           
?>
<script type="text/javascript">
        document.body.className = ' claro ';
        dojo.require("dojox.form.RangeSlider");
        dojo.addOnLoad(function() {

            var rangeSlider = new dojox.form.HorizontalRangeSlider({
                name: "ValMin",
                value: [ <?php   echo $record->val('ValMin').",".$record->val('ValMax') ; ?>],
                minimum: 0,
                maximum: 10,
                discreteValues:11,
                intermediateChanges: true,
                style: "width:300px;",
                onChange: function(value) {
                    dojo.byId("ValMin").value = value[0];
                    dojo.byId("ValMax").value = value[1];
                }
            },
            "rangeSlider");
        });
    </script>

<?php
}