biblioteca ChartJS

[Jose Puertas]

Hola Pascal,  necesito ayuda para integrar esta biblioteca en ZnetDK,

Saludos

[Pascal Martinez]

Hola José,

Allí esta el procedimiento para integrar Chart.js en ZnetDK.

1) Telecargar los archivos Chart.bundle.js y Chart.bundle.min.js. 

2) Copiar los dos archivos en los directorios siguientes :

• znetdk/engine/modules/chartjs/public/js/Chart.bundle.js
• znetdk/engine/modules/chartjs/public/js/minified/Chart.bundle.min.js

3) Crear la vista znetdk/applications/default/app/view/chart.php con el código siguiente :

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

4) Modificar el archivo znetdk/applications/default/app/menu.php  y añadir la linea siguiente :

\MenuManager::addMenuItem(NULL, 'chart', 'Chart');

5) Obtienes el resultado siguiente.

Saludos,

Pascal MARTINEZ

www.znetdk.fr

[Jose Puertas]

Perfecto, entiendo que para cualquier implementación debo poner los archivos en el directorio que me has comentado, por ejemplo si quiero poner bootstrap tengo que crear la carpeta asi:

• znetdk/engine/modules/bootstrap/public/js
• znetdk/engine/modules/bootstrap/public/css
• znetdk/engine/modules/bootstrap/public/fonts

¿Es correcto?

[Jose Puertas]

Buenos dias Pascal, me queda la duda de cómo implementar los archivos css, ya que tal como dije en mi último post de este hilo, no me carga de este modo.

Saludos

[Pascal Martinez]

Hola José,

Puedes cargar los archivos CSS de un módulo poniendolos en los directorios siguientes :

• znetdk/engine/modules/mymodule/public/css/minified : en estándar, los archivos CSS estan cargados automáticamente por ZnetDK desde este directorio. Ten cuidado, el archivo tiene que llamarse respectando el formato %1-min.css (por ejemplo mystyles-min.css).
  
• znetdk/engine/modules/mymodule/public/css : los archivos CSS están cargados desde este directorio solamente cuando el parámetro CFG_ZNETDK_CSS tiene el valor  'engine/public/css/%1.css'. En este caso reservado a la depuración, tu archivo CSS tiene que llamarse siguiente el formato %1.css (por ejemplo mystyles.css).
  

A propósito de tus tipos de letra, ZnetDK no propone mecanismos par cargarlos automáticamente. Puedes ponerlos en el directorio znetdk/engine/modules/mymodule/public/fonts si quieres, pero tienes que adaptar el camino en tu archivo CSS si usas por ejemplo @font-face para cargarlos.

Saludos,

Pascal MARTINEZ

www.znetdk.fr

[Jose Puertas]

Muchas gracias Pascal, imagino que para que la estructura de tu magnifica aplicación no se altere, se deberían modificar los archivos incluidos en el directorio layout del core, y que posiblemente no sea compatible con los primeface ui verdad ?

Saludos

[Pascal Martinez]

Hola José,

No sé si entendió bien tu pregunta.

Puedes copiar uno de los modelos de pagina del directorio znetdk/engine/core/layout hacia el directorio znetdk/applications/app/layout para personalizarlo.

En particular si quieres utilizar un framework CSS como bootstrap, el modelo de pagina custom.php fue creado en este objetivo (ver el post Responsive Layout que trata de este caso).

Saludos,

Pascal MARTINEZ

www.znetdk.fr

[Jose Puertas]

Entendido, también tengo que copiar el archivo layout.php del directorio core?, si lo copio tengo que hacer alguna modificación en los config?

Saludos

[Pascal Martinez]

José,

Exactamente, tienes que indicar en el config.php que quieres utilizar el modelo de pagina 'custom'.

/** Page layout choosen for the application.
 *  @return 'classic'|'office'|'custom' Name of the layout used by the application.
 */
define('CFG_PAGE_LAYOUT','custom');

Pascal MARTINEZ

www.znetdk.fr

[Jose Puertas]

Hola Pascal, he indicado como dices en el config, pero cuando autocarga el menú se redirige e ignora los parámetros que yo le introduzco.

<html lang="<?php echo $language; ?>">
    <head>
        <?php self::renderMetaTags($metaDescription, $metaKeywords, $metaAuthor); ?>
        <title><?php echo $pageTitle; ?></title>
        <?php self::renderDependencies(); ?>
    </head>
    <body>
        <div id="zdk-messages"></div><div id="zdk-critical-err"></div>
        <span id="zdk-network-error-msg" class="ui-helper-hidden"><?php echo LC_MSG_ERR_NETWORK; ?></span>
        <img class="ui-helper-hidden" src="<?php echo ZNETDK_ROOT_URI; ?>resources/images/messages.png">
        <div id="zdk-header">
            <a id="zdk-header-logo" href="<?php self::renderLogoURL(); ?>"><img src="<?php echo LC_HEAD_IMG_LOGO; ?>" alt="banner logo" /></a>
            <h1><?php echo LC_HEAD_TITLE; ?></h1>
            <h2><?php echo LC_HEAD_SUBTITLE; ?></h2>
            <div id="zdk-connection-area" data-zdk-login="<?php echo $loginName; ?>" data-zdk-username="<?php echo $connectedUser; ?>"
                 data-zdk-usermail="<?php echo $userEmail; ?>" data-zdk-changepwd="<?php echo LC_FORM_LBL_PASSWORD; ?>" <?php if (!isset($connectedUser)) {
            echo 'class="ui-helper-hidden"';
        } ?>>
                <a id="zdk-profile" href="#"><img src="<?php echo ZNETDK_ROOT_URI . CFG_ZNETDK_IMG_DIR; ?>/profile.png" alt="profile"/><?php echo $loginName; ?></a>
                <a id="zdk-logout" href="#"><img src="<?php echo ZNETDK_ROOT_URI . CFG_ZNETDK_IMG_DIR; ?>/logout.png" alt="logout"/><?php echo LC_HEAD_LNK_LOGOUT; ?></a>
            </div>
<?php self::renderLangSelection(); ?>
            <div id="zdk-help-area" data-zdk-helptitle="<?php echo LC_FORM_TITLE_HELP; ?>" data-zdk-helpclosebutton="<?php echo LC_BTN_CLOSE; ?>"<?php if (!CFG_HELP_ENABLED) {
    echo ' class="ui-helper-hidden"';
} ?>>
                <a href="#">
                    <img src="<?php echo ZNETDK_ROOT_URI . CFG_ZNETDK_IMG_DIR; ?>/help.png" alt="help"/><?php echo LC_HEAD_LNK_HELP; ?>
                </a>
            </div>
        </div>
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu"><!-- sidebar menu -->
            <div class="menu_section">
                <?php self::renderNavigationMenu($controller); ?>
            </div>
        </div><!-- /sidebar menu -->  Esta es la sección que menciono.


<?php self::renderBreadcrumb(); ?>
<?php self::renderCustomContent($controller); ?>
    <img id="zdk-ajax-loading-img" class="ui-helper-hidden" src="<?php echo ZNETDK_ROOT_URI . CFG_AJAX_LOADING_IMG; ?>" alt="ajax loader"/>
    <div class="ui-helper-clearfix"></div>
    <div id="zdk-footer">
        <div><?php echo LC_FOOTER_LEFT; ?></div>
        <div><?php echo LC_FOOTER_CENTER; ?></div>
        <div><?php echo LC_FOOTER_RIGHT; ?></div>
    </div>
</body>
</html>

Saludos

[Pascal Martinez]

Holas José,

No puedes rodear la llamada a <?php self::renderNavigationMenu($controller); ?> con los elementos DIV.

Tienes que adaptar los estilos de tu menu al código HTML que genera el método renderNavigationMenu.

Mas abajo, tienes el código HTML generado para el menu :

<div id="zdk-custom-menu">

 <ul>

    <li id="znetdk-check_connection-menu"><a href="#">Welcome</a></li>

    <li id="znetdk-try_themes-menu"><a href="#">Themes</a></li>

    <li id="znetdk-check_widgets-menu"><a href="#">Widgets</a></li>

    <li id="znetdk-_authorization-menu" class="has-sub"><a href="#">Security</a>

      <ul>

         <li id="znetdk-users-menu"><a href="#">Users</a></li>

         <li id="znetdk-profiles-menu"><a href="#">Profiles</a></li>

      </ul>

    </li>

 </ul>

</div>

<div id="default_content" class="ui-widget ui-widget-content ui-corner-all ui-helper-hidden"></div>

Saludos,

Pascal MARTINEZ

www.znetdk.fr