Testing the PrimeUI 2.1 widgets in ZnetDK

[Pascal Martinez]

Hello,

For those who want to test the latest PrimeUI widgets version 2.1, you can do so through the procedure described in this post.

1. Create an newZnetDK application into the znetdk/applications, named primeui21, and its sub-directories primeui21/public, primeui21/app, and primeui21/app/view.
2. Download the last version 2.1 of the PrimeUI widgets at https://github.com/primefaces/primeui/releases and copy the ZIP archive content into the primeui21/public/primeui-2.1 sub-directory,
3. Download the last version 4.4 of the Font Awesome icons (new prerequisite in version 2 of PrimeUI) at http://fortawesome.github.io/Font-Awesome/ and copy the ZIP archive content into the primeui21/public/font-awesome-4.4.0 sub-directory,
4. Add a new config.php file in the sub-directory znetdk/applications/app with the following parameters:

<?php
/** Relative path of the PrimeUI CSS file */
define('CFG_PRIMEUI_CSS','applications/' . ZNETDK_APP_NAME . '/public/primeui-2.1/production/primeui-2.1-min.css');


/** Relative path of the custom CSS file of the application */
define('CFG_APPLICATION_CSS','applications/' . ZNETDK_APP_NAME . '/public/font-awesome-4.4.0/css/font-awesome.css');


/** Relative path of the PrimeUI directory */
define('CFG_PRIMEUI_DIR','applications/' . ZNETDK_APP_NAME . '/public/primeui-2.1');


/** Relative path of the PrimeUI Javascript file */
define('CFG_PRIMEUI_JS',CFG_PRIMEUI_DIR.'/production/primeui-2.1-min.js');


/** Relative path of the PrimeUI Javascript development directory */
define('CFG_PRIMEUI_JS_DEV_DIR',CFG_PRIMEUI_DIR.'/development/js');


/** Load Development version of the PrimeUI & ZnetDK widgets for debug purpose */
define('CFG_DEV_JS_ENABLED',TRUE);


/** Theme enabled for the application ('znetdk' in standard)
 * @return string Name of the theme choosen for the application.<br>
 * For example: 'znetdk', 'flat-blue', 'aristo', 'south-street' ...
 */
define('CFG_THEME','aristo');

     5. Create into the primeui21/app directory, a new menu.php script with the following code:

<?php
namespace app;
class Menu implements \iMenu {
    static public function initAppMenuItems() {
        \MenuManager::addMenuItem(null,'new_widgets',"New widgets 2.1");
    }
}

     6 Finally, add the specified view named new_widgets.php in the primeui21/app/view directory. Add for example the            following code to test the datagrid widget:

<style type='text/css'>

    .pui-datagrid .pui-datagrid-header {

        font-size: 18px;

    }

    .pui-datagrid .pui-datagrid-column {

        text-align: center; 

    }

    .pui-datagrid .pui-datagrid-column .pui-panel-content {

        padding: 10px 0px;

    }

    .pui-datagrid .pui-datagrid-column .pui-panel-content .car-detail {

        margin-top: 10px;

    }  

</style>

<p>Testing the New PrimeUI 2.1 widgets...</p>
<div id="localgrid"></div>
<script>
    $(function () {
        $('#localgrid').puidatagrid({
            paginator: {
                rows: 9
            },
            header: 'Local Javascript Array',
            datasource: [
                {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
                {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
                {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
                {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
                {'brand': 'Ford', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
                {'brand': 'Fiat', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
                {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
                {'brand': 'Volvo', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
                {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
                {'brand': 'BMW', 'year': 2013, 'color': 'Red', 'vin': '245t2s'},
                {'brand': 'Jaguar', 'year': 2011, 'color': 'Blue', 'vin': 'few234'},
                {'brand': 'Ford', 'year': 2010, 'color': 'White', 'vin': 'bfnt23'},
                {'brand': 'BMW', 'year': 2011, 'color': 'Green', 'vin': 'aad423'},
                {'brand': 'Mercedes', 'year': 2012, 'color': 'Black', 'vin': 'vx23f2'},
                {'brand': 'Fiat', 'year': 2014, 'color': 'Grey', 'vin': 'vxr23fd'},
                {'brand': 'Renault', 'year': 2015, 'color': 'Blue', 'vin': 'vxc23f'},
                {'brand': 'Volvo', 'year': 2015, 'color': 'Yellow', 'vin': 'vxcff4'},
                {'brand': 'Volvo', 'year': 2015, 'color': 'White', 'vin': 'ht3w1d'},
                {'brand': 'Renault', 'year': 2013, 'color': 'Black', 'vin': 'az12s2'},
                {'brand': 'Fiat', 'year': 2015, 'color': 'Green', 'vin': 'ds12d1'},
                {'brand': 'Volkswagen', 'year': 2001, 'color': 'Grey', 'vin': 'vsd3f2'},
                {'brand': 'Volvo', 'year': 2011, 'color': 'Blue', 'vin': 'dsy4g22'},
                {'brand': 'BMW', 'year': 1996, 'color': 'Black', 'vin': 'h3g254'},
                {'brand': 'Audi', 'year': 2005, 'color': 'Red', 'vin': 'g54gwg'},
                {'brand': 'Ford', 'year': 2011, 'color': 'Blue', 'vin': '14ffqf4'},
                {'brand': 'BMW', 'year': 2015, 'color': 'Black', 'vin': 'h465he6'},
                {'brand': 'Jaguar', 'year': 2010, 'color': 'White', 'vin': 'dsf4frt'},
                {'brand': 'Jaguar', 'year': 2009, 'color': 'Red', 'vin': 'g6hehr'},
            ],
            content: function (car) {
                return $('<div title="' + car.vin + '"><img src="http://www.primefaces.org/primeui/resources/demo/images/car/' + car.brand +
                        '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color + '</div></div>').puipanel();
            }
        });


    });
</script>

Now, enter the URL http://127.0.0.1/znetdk?appl=primeui21 to access to your test application.

Regards,

Pascal MARTINEZ.

 

[Jose Puertas]

En cuanto pueda lo pruebo,muchas gracias por tu trabajo

Saludos

[Anderson Florencio]

Pascal, did exactly as explained above, but the buttons icons no longer appear as if he had lost the css the icons, if the font-awesome, but I checked and saw that he is importing the font-awesome.css but the icons do not appear.

For example, I have a button with id = mybutton and the following code:

$ ('# mybutton'). puibutton ({
 icon: "ui-icon-plusthick"
 });

In another application without using primeui-2.1 and not the font-awesome 4.4, runs straight and when I was trying to do his step by step did not appear over the button icon

[Pascal Martinez]

Hello Anderson,

In PrimeUI 2.1, you have to specify a FontAwesome icon name.

For example:

<button id="mybutton" type="button">My button</button>
<script>
    $(function() {
        $('#mybutton').puibutton({
            icon:'fa-plus'
        });
    });
</script>

The result obtained with the application described in this post is shown below:

  

Regards,

Pascal MARTINEZ

www.znetdk.fr

[Anderson Florencio]

Hello Pascal,
the file "engine \ public \ js \ minified \ ZNet dk-min.js" contains, in the generation of zdkactionbar components and dialogs confirmations buttons, the parameter icons with the prefix "ui-icon," since to use the 2.1 PrimeUI the prefix changes to "fa" and some icon names change. In version 1.1 of ZnetDK will already come with these changes by default?
Thank you for your attention and I would like to congratulate him for his great work in this tool, it is a great tool!

[Pascal Martinez]

Hello Anderson,

I will see if I can add FontAwesome icons to the buttons and menus in the next version of ZnetDK.

I will update this post to let you know whether it's possible or not; I don't plan to upgrade ZnetDK to the PrimeUI 2.1 version in a short term because heavy regression tests are required.

Regards,

Pascal MARTINEZ

www.znetdk.fr

[Pascal Martinez]

Hello Anderson,

In the new version 1.1 of ZnetDK, you can by now add FontAwesome icons to a puibutton into an HTML ZnetDK data form or in JavaScript as shown below:

• Into a ZnetDK form

<form class="zdk-form">
    <label>Enter your name</label>
    <input type="text">
    <br>
    <div>
        <button class="zdk-bt-custom" data-zdk-icon="fa-futbol-o">My button</button>
        <button class="zdk-bt-custom" data-zdk-icon="fa-gears">My button</button>
    </div>
    <br>
    <label>Enter your address</label>
    <input type="text">
    <button class="zdk-bt-add">Save</button>
</form>

• In JavaScript

<button id="myfabutton">My button</button>
<script>
    $(document).ready(function() {
       $('#myfabutton').puibutton({icon:'fa-futbol-o'});
    });
</script>

See you,

Pascal MARTINEZ

www.znetdk.fr