Extjs, dynamic fieldsets with delete button

Extjs is powerful and flexible, fieldsets can be actually used to handle dynamic bloc fields ; such as publications for example which containing the same fields

here is a code example of what’s possible to do with fieldsets, in this case we add custom buttons for deletion

 

 

var form = new Ext.TabPanel({
        id: 'real-popin-edit-form-tab-id',
        border: false,
        labelWidth: 120,
        items: [
        new Ext.FormPanel({
            id: 'real-popin-edit-form-id',
            tbar : [{
                text: 'add fieldset',
                handler: fieldsetAdd,
                iconCls: 'new'
            }
            ],
            labelWidth: 120,
            title: " .. ",
            items: [

            ]
        });

var counter = 0;

fieldsetAdd = function()
{
    Ext.getCmp('real-popin-edit-form-id').add({
        xtype: 'fieldset',
        width: 500,
        labelWidth: 120,
        title: "Fieldset [ " + counter ++ + ' ]' ,
        defaults: {
            width: 350
        },
        defaultType: 'textfield',
        border: true,
        // for ie position pbs
        style: 'background-color: #F1F1F1; margin: 5px auto;position: relative;',
        iconCls: 'icon-properties',
        id : 'realisation-visuel-' + counter,
        items : [
        {
            width: 18,
            xtype: 'button',
            name: 'AddDirectAttr',
            style: 'position: absolute; top: ' +
              (Ext.isIE|| Ext.isChrome|| Ext.isGecko ? 0:-20) + 'px; right: 10px;',
            tooltip: {
                title:'',
                text: 'Delete fieldset.'
            },
            iconCls: 'delete',
            id : 'delete-' + counter,
            handler : function(t, e){
                Ext.MessageBox.confirm("Delete", "Are you sure ?" , function(btn){
                    if(btn == 'yes') {
                        currentId = t.getId();
                        temp = currentId.split('-');
                        Ext.getCmp('realisation-visuel-' + temp[1]).destroy();
                        Ext.getCmp('real-popin-edit-form-id').doLayout();
                    }
                });

            }

        },
        {
            xtype : 'textfield',
            name : 'position-' + counter,
            fieldLabel: 'Position'
        }, {
            xtype : 'textarea',
            name  : 'description-' + counter,
            fieldLabel: 'Description'
        }
        ]
    });

    Ext.getCmp('real-popin-edit-form-id').doLayout();

}

and here is the result

Enjoy !

Continuous integration, Hudson and PHP Setting up under Ubuntu – PART 2

In the previous article about Hudson : Continuous integration, Hudson and PHP Setting up under Ubuntu – PART 1 we’ve correctly setup the server and got up fully functional and now comes the funny part : Installing the plugins and the PHP Tools to get all the needed reports.

I will use the php-hudson-template which can be found here, this template provides an easy way to get a proper project configuration and it’s much quicker than configuring every thing manually.

Okay let’s start !

Installing plugins

you’ll need to get the hudson-cli to do this, but you can do this using the Web frontend of hudson Server :

curl -c - -O http://[SERVER]:8080/jnlpJars/hudson-cli.jar

java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin checkstyle
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin dry
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin htmlpublisher
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin jdepend
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin pmd
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin template-project
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin violations
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin xunit
java -jar hudson-cli.jar -s http://[SERVER]:8080 install-plugin clover

Installing PHP Tools


pear channel-discover pear.pdepend.org
pear channel-discover pear.phpmd.org
pear channel-discover pear.phpunit.de
pear channel-discover components.ez.no
pear channel-discover pear.symfony-project.com
pear install pdepend/PHP_Depend-beta
pear install phpmd/PHP_PMD-alpha
pear install phpunit/phpcpd
pear install PHPDocumentor
pear install PHP_CodeSniffer
pear install --alldeps phpunit/PHP_CodeBrowser-alpha
pear install --alldeps phpunit/PHPUnit

Getting the php-hudson-template

You’ll need to the hudson home, in my case it’s /var/lib/hudson and under jobs directory do :

git clone git://github.com/sebastianbergmann/php-hudson-template.git

after that you’ll have to change the owner and the group of the directory to let Hudson recognize it, this is very important !

chown -R hudson:hudson php-hudson-template

sudo /etc/init.d/hudson stop
sudo /etc/init.d/hudson start

Build.xml

this is an example of a standard build.xml file, but you’ll need to change executions options when needed, for example to change the code standard for Php checkstyle etc.

<project name="php-object-freezer" default="build" basedir=".">
 <target name="clean">
  <!-- Clean up -->
  <delete dir="build"/>

  <!-- Create build directories -->
  <mkdir dir="${basedir}/build/api"/>
  <mkdir dir="${basedir}/build/code-browser"/>
  <mkdir dir="${basedir}/build/coverage"/>
  <mkdir dir="${basedir}/build/logs"/>
  <mkdir dir="${basedir}/build/pdepend"/>
 </target>

 <!-- Run unit tests and generate junit.xml and clover.xml -->
 <target name="phpunit">
  <exec executable="phpunit" failonerror="true"/>
 </target>

 <!-- Run pdepend, phpmd, phpcpd, and phpcs in parallel -->
 <target name="parallelTasks">
  <parallel>
   <antcall target="pdepend"/>
   <antcall target="phpmd"/>
   <antcall target="phpcpd"/>
   <antcall target="phpcs"/>
   <antcall target="phpdoc"/>
  </parallel>
 </target>

 <!-- Generate jdepend.xml and software metrics charts -->
 <target name="pdepend">
  <exec executable="pdepend">
   <arg line="--jdepend-xml=${basedir}/build/logs/jdepend.xml ./«  />
  </exec>
 </target>

 <!-- Generate pmd.xml -->
 <target name="phpmd">
  <exec executable="phpmd">
   <arg line="./ xml codesize,unusedcode
              --reportfile ${basedir}/build/logs/pmd.xml" />
  </exec>
 </target>

 <!-- Generate pmd-cpd.xml -->
 <target name="phpcpd">
  <exec executable="phpcpd">
   <arg line="--log-pmd ${basedir}/build/logs/pmd-cpd.xml ./" />
  </exec>
 </target>

 <!-- Generate checkstyle.xml -->
 <target name="phpcs">
  <exec executable="phpcs" output="/dev/null">
   <arg line="--report=checkstyle
              --report-file=${basedir}/build/logs/checkstyle.xml
              --standard=Zend
              ./" />
  </exec>
 </target>

 <!-- Generate API documentation -->
 <target name="phpdoc">
  <exec executable="phpdoc">
   <arg line="-d ./ -t build/api" />
  </exec>
 </target>

 <target name="phpcb">
  <exec executable="phpcb">
   <arg line="--log    ${basedir}/build/logs
              --source ${basedir}/./
              --output ${basedir}/build/code-browser" />
  </exec>
 </target>

 <target name="build" depends="clean,parallelTasks,phpunit,phpcb"/>
</project>

Now the question that you should ask is : where to put this file ??? well it depends on your needs ..
for example when you will get source code from SVN the simpliest way is to add it into the root of your code.

it’s important to have the build.xml reachable by the hudson server ..

Final configuration

Now go back to the web interface of the hudson server, and choose New Job > free-style software project
Choose your Source code management : SVN or Git etc.
Under Build: click Add build Step -> Invoke Ant
Under Post-build Actions : click Use publishers from another project and write : “php-hudson-template
Hit Save.

Then Click Build Now

Enjoy !