Install the App?

Forum

Questions and answers

If you need help about ZnetDK for Mobile, please post your questions on the SOURCEFORGE Discussion page of ZnetDK by clicking the button below.

Topics

ZnetDK 4 Mobile version 3.1 is released
Fri, 22 Dec 2023 22:33:36

Hello,

The new version 3.1 of ZnetDK 4 Mobile is released.

  • Application accessibility is improved : keyboard navigation, labels associated to their entry field, ...
  • New features to track controller action and SQL query performance.
  • Fixed 7 minor software bugs.
  • This version is compatible with PHP 8.2.

To get all changes and bug fixes, see CHANGELOG page.

Pascal,
ZnetDK developer

ZnetDK 4 Mobile v3.0 is released
Fri, 15 Sep 2023 16:24:54

Hello,

The new version 3.0 of ZnetDK 4 Mobile is released.

  • A total of 7 improvements to strengthen application security: automatically generated .htaccess, token to prevent CSRF attacks, limitation of connections by login identifier, critical errors hidden from the user, limitation of access to authorization management , ...
  • Minor adaptations to make ZnetDK fully compatible with PHP 8.2 in this version.
  • Fixed 19 minor software bugs.

To get all changes and bug fixes, see CHANGELOG page.

Pascal,
ZnetDK developer

intentando adaptar w3c a bootstrap
Wed, 26 Jul 2023 08:14:20

Hello,

To replace the W3.CSS framework with another CSS framework such as Bootstrap, you mainly need to modify the scripts engine/core/layout/mobile.php (HTML5 structure of the application page) and engine/public /js/mobile.js (JavaScript API needed for authentication, navigation menu management, sending AJAX requests etc.).

To continue to easily install the next versions of ZnetDK after changing the CSS framework, I advise you not to directly modify the ZnetDK 4 Mobile scripts located in the engine/core/ and engine/public folders.
Instead, here is the procedure that I advise you to follow:

  1. Copy INSTALL_DIR/engine/core/layout/mobile.php script to INSTALL_DIR/applications/default/app/layout/ folder.
    The INSTALL_DIR/applications/default/app/layout/mobile.php script thus becomes the new page template loaded to display the application.
    It is to be customized so that the CSS classes correspond to the new CSS framework chosen to replace W3.CSS.
  2. Copy the INSTALL_DIR/engine/public/js/mobile.js script to the INSTALL_DIR/applications/default/public/js/ folder.
    The INSTALL_DIR/applications/default/public/js/mobile.js script is to be adapted to the new CSS framework chosen to replace W3.CSS.
  3. Add the following empty files (to be completed later):
    INSTALL_DIR/applications/default/public/css/my_framework.css : the CSS framework styles replacing W3.CSS
    INSTALL_DIR/applications/default/public/css/my_layout.css : styles specific to the mobile.php custom page template.
  4. Edit the INSTALL_DIR/applications/default/app/config.php script and modify the following parameters:
define('CFG_MOBILE_W3_CSS','applications/'.ZNETDK_APP_NAME.'/public/css/my_framework.css');
define('CFG_ZNETDK_CSS','applications/'.ZNETDK_APP_NAME.'/public/css/my_layout.css');
define('CFG_MOBILE_W3CSS_THEME', NULL); // to not load the style sheet INSTALL_DIR/resources/w3css/themes/w3-theme-blue.css
define('CFG_DEV_JS_ENABLED', TRUE); // Load unminified version of mobile.js
define('CFG_ZNETDK_JS_DIR', 'applications/'.ZNETDK_APP_NAME.'/public/js'); // Load custom mobile.js instead of the standard script.

If you need to load extra JavaScript and CSS scripts, see the description of the CFG_APPLICATION_CSS and CFG_APP_JS parameters (see page http://localhost/znetdk4mobile-website/settings#z4m-settings-libraries).
To change the ZnetDK icons, refer to the procedure described on the page http://localhost/znetdk4mobile-website/getting-started#z4m-gs-custom-logos

The most complicated now is to adapt the scripts INSTALL_DIR/applications/default/app/layout/mobile.php and INSTALL_DIR/applications/default/public/js/mobile.js to the new CSS framework.

Hope this post will be useful to you.

Pascal MARTINEZ
ZnetDK developper

intentando adaptar w3c a bootstrap
Tue, 25 Jul 2023 11:17:58

Ante todo gracias por tu respuesta, si lo que hago es pasarlo al layout custom, tengo que dejar o cambiar estas constantes que aparecen en el config.php que esta en el engine/core? o por el contrario todos los js,css esten o no minificados los cargo desde el config.php que esta en \applications\default\app? son compatibles todas las constantes o hay que eliminar alguna?

/** Relative path of the jQuery CSS file */
define('CFG_JQUERYUI_CSS','resources/jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css');

/** Relative path of the PrimeUI CSS file */
define('CFG_PRIMEUI_CSS','resources/primeui-1.1/production/primeui-1.1-min.css');

/** Relative path of the FontAwesome CSS file */
define('CFG_FONTAWESOME_CSS','resources/font-awesome-4.7.0/css/font-awesome.min.css');

/** Relative path of the W3CSS file (for mobile layout) */
define('CFG_MOBILE_W3_CSS','resources/w3css/w3.css');

/** Relative path of the ZnetDK CSS files */
define('CFG_ZNETDK_CSS','engine/public/css/minified/%1-min.css');

/** Relative path of the CSS file specially developed for the application
 * Extra CDN CSS libraries can also be included in the application by
 * specifying its URL (for example 'https://extracsslibrary.net/lib.css').
 * At last, several libraries can be set using a serialized array. For example:
 * <code>serialize(array(
 *      'applications/' . ZNETDK_APP_NAME . '/public/css/myscript.css',
 *      'https://extracsslibrary.net/lib.css'))</code>
 */
define('CFG_APPLICATION_CSS',NULL);

Gracias

intentando adaptar w3c a bootstrap
Sat, 10 Jun 2023 10:11:48

Buenos dias,
ZnetDK 4 Mobile no está diseñado para funcionar con el framework CSS de Bootstrap.
Reemplazar las clases de w3css con las de Bootstrap en la vista 'contactlist.php' no será suficiente para que ZnetDK 4 Mobile funcione.
También es necesario modificar las clases CSS en el script 'engine/public/js/mobile.js', en la hoja de estilo 'engine/public/css/mobile.css' y en la plantilla de página 'engine/core/layout /móvil.php'.
Este es un proyecto completo que es técnicamente factible pero requiere un esfuerzo de desarrollo bastante significativo.

Salud
Pascal MARTINEZ

intentando adaptar w3c a bootstrap
Fri, 09 Jun 2023 10:44:21

Buenos dias, estoy intentando adaptar el css de la página de prueba contactlist.php que esta con css w3c:

<ul id="contactlist" class="w3-ul w3-hide"
    data-zdk-load="contactctrl:all"
    data-zdk-autocomplete="contactctrl:suggestions">
    <li class="w3-border-theme" data-id="{{id}}">
        <div class="w3-row">
            <div class="w3-col" style="width: 60px;">
                <a class="edit w3-button w3-circle w3-ripple w3-xlarge w3-theme-action w3-hover-theme"><i class="fa fa-edit"></i></a>
            </div>
            <div class="w3-rest w3-row">
                <div class="w3-col s12 m5 l3 w3-padding-small">
                    <span class="w3-tag w3-theme-d1">{{id}}</span>
                    <span class="w3-text-theme w3-large"><strong>{{name}}</strong></span>
                </div>
                <div class="w3-col s12 m7 l3 w3-padding-small">
                    <i class="w3-text-theme fa fa-map-signs fa-lg"></i>&nbsp;<span>{{zip}} - {{city}}</span>
                </div>
                <div class="w3-col s12 m9 l4 w3-padding-small">
                    <a href="mailto:{{email}}">
                        <i class="w3-text-theme fa fa-envelope fa-lg"></i>&nbsp;<span>{{email}}</span>
                    </a>
                </div>
                <div class="w3-col s12 m3 l2 w3-padding-small">
                    <a href="tel:{{phone}}">
                        <i class="w3-text-theme fa fa-phone-square fa-lg"></i>&nbsp;<span>{{phone}}</span>
                    </a>
                </div>

            </div>
        </div>
    </li>
</ul>
<div id="contact-modal" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
        <header class="w3-container w3-theme-d5">
            <span class="close w3-button w3-xlarge w3-hover-theme w3-display-topright"><i class="fa fa-times-circle fa-lg"></i></span>
            <h4 class="title">Contact</h4>
        </header>
        <form class="w3-container w3-theme-light" data-zdk-load="contactctrl:detail"
              data-zdk-submit="contactctrl:store">
            <input type="hidden" name="id">
            <div class="w3-section w3-display-container">
                <a class="remove w3-text-red w3-display-right" href="#"><i class="fa fa-close"></i>&nbsp;Remove contact</a>
            </div>
            <div class="w3-section">
                <label class="zdk-required"><b>Name</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="name" required>
                <label><b>Birthdate</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="date" name="birthdate">
                <label><b>Address</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="address">
                <label><b>ZIP</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="zip">
                <label><b>City</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="city">
                <label><b>Country</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="country">
                <label><b>Phone</b></label>
                <input class="w3-input w3-border w3-margin-bottom" type="text" name="phone">
                <label><b>Email</b></label>
                <input class="w3-input w3-border" type="email" name="email">
                <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit"><?php echo LC_BTN_SAVE; ?></button>
            </div>
        </form>
    </div>
</div>
<script>
    var myContactList = znetdkMobile.list.make('#contactlist', false, true);
    myContactList.setModal('#contact-modal', true, function () { // NEW
        this.setTitle('New contact');
        this.element.find('a.remove').hide();
    }, function (formObject) { // EDIT
        var contactId = formObject.getInputValue('id');
        this.setTitle('Edit contact #' + contactId);
        this.element.find('a.remove').show();
    });
    // Click remove link events handler
    $('#contact-modal a.remove').on('click', function (event) {
        event.preventDefault();
        znetdkMobile.messages.ask('Confirmation', 'Remove this contact?', null, function (isYes) {
            if (isYes) { // OK to remove
                var myForm = znetdkMobile.form.make('#contact-modal form'),
                        contactId = myForm.getInputValue('id');
                znetdkMobile.ajax.request({
                    controller: 'contactctrl',
                    action: 'remove',
                    data: {id: contactId},
                    callback: function (response) {
                        if (response.success) { // Removal succeeded
                            // Modal dialog is closed
                            var myModal = znetdkMobile.modal.make('#contact-modal');
                            myModal.close();
                            // The list of contacts is refreshed
                            myContactList.refresh();
                            // The removed contact message is displayed
                            znetdkMobile.messages.showSnackbar(response.msg);
                        } else { // Removal failed
                            // Error message directly displayed in the form
                            myForm.showError(response.msg);
                        }
                    }
                });
            }
        });
    });
</script>

pero no me funciona, te paso el código ya hecho el paso a bootstrap:

<ul id="contactlist" class="list-group d-none"
    data-zdk-load="contactctrl:all"
    data-zdk-autocomplete="contactctrl:suggestions">
    <li class="list-group-item border border-primary" data-id="{{id}}">
        <div class="row">
            <div class="col-2">
                <a class="edit btn btn-primary btn-circle btn-lg ripple" href="#"><i class="fa fa-edit"></i></a>
            </div>
            <div class="col">
                <div class="row">
                    <div class="col-12 col-md-5 col-lg-3 p-1">
                        <span class="badge bg-primary">{{id}}</span>
                        <span class="text-primary h5"><strong>{{name}}</strong></span>
                    </div>
                    <div class="col-12 col-md-7 col-lg-3 p-1">
                        <i class="text-primary fa fa-map-signs fa-lg"></i>&nbsp;<span>{{zip}} - {{city}}</span>
                    </div>
                    <div class="col-12 col-md-9 col-lg-4 p-1">
                        <a href="mailto:{{email}}">
                            <i class="text-primary fa fa-envelope fa-lg"></i>&nbsp;<span>{{email}}</span>
                        </a>
                    </div>
                    <div class="col-12 col-md-3 col-lg-2 p-1">
                        <a href="tel:{{phone}}">
                            <i class="text-primary fa fa-phone-square fa-lg"></i>&nbsp;<span>{{phone}}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>
<div id="contact-modal" class="modal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title">Contact</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form class="modal-body" data-zdk-load="contactctrl:detail"
                  data-zdk-submit="contactctrl:store">
                <input type="hidden" name="id">
                <div class="mb-3 d-flex justify-content-end">
                    <a class="text-danger" href="#"><i class="fa fa-close"></i>&nbsp;Remove contact</a>
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>Name</b></label>
                    <input class="form-control" type="text" name="name" required>
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>Birthdate</b></label>
                    <input class="form-control" type="date" name="birthdate">
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>Address</b></label>
                    <input class="form-control" type="text" name="address">
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>ZIP</b></label>
                    <input class="form-control" type="text" name="zip">
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>City</b></label>
                    <input class="form-control" type="text" name="city">
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>Country</b></label>
                    <input class="form-control" type="text" name="country">
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>Phone</b></label>
                    <input class="form-control" type="text" name="phone">
                </div>
                <div class="mb-3">
                    <label class="form-label"><b>Email</b></label>
                    <input class="form-control" type="email" name="email">
                </div>
                <button class="btn btn-success btn-block" type="submit">Save</button>
            </form>
        </div>
    </div>
</div>

<script>
    var myContactList = znetdkMobile.list.make('#contactlist', false, true);
    myContactList.setModal('#contact-modal', true, function () {
        this.setTitle('New contact');
        this.element.find('a.text-danger').hide();
    }, function (formObject) {
        var contactId = formObject.getInputValue('id');
        this.setTitle('Edit contact #' + contactId);
        this.element.find('a.text-danger').show();
    });

    // Click remove link events handler
    $('#contact-modal').on('click', 'a.text-danger', function (event) {
        event.preventDefault();
        znetdkMobile.messages.ask('Confirmation', 'Remove this contact?', null, function (isYes) {
            if (isYes) { // OK to remove
                var myForm = znetdkMobile.form.make('#contact-modal form');
                var contactId = myForm.getInputValue('id');
                znetdkMobile.ajax.request({
                    controller: 'contactctrl',
                    action: 'remove',
                    data: {id: contactId},
                    callback: function (response) {
                        if (response.success) { // Removal succeeded
                            // Modal dialog is closed
                            var myModal = znetdkMobile.modal.make('#contact-modal');
                            myModal.close();
                            // The list of contacts is refreshed
                            myContactList.refresh();
                            // The removed contact message is displayed
                            znetdkMobile.messages.showSnackbar(response.msg);
                        } else { // Removal failed
                            // Error message directly displayed in the form
                            myForm.showError(response.msg);
                        }
                    }
                });
            }
        });
    });
</script>

Me puedes echar un cable?

Saludos

ZnetDK 4 Mobile v2.9 is released
Tue, 11 Apr 2023 20:17:38

Hello,

The new version 2.9 of ZnetDK is released.

  • Optimized version minimizing the network traffic between the web server and the MySQL server.
  • Minor adaptations to be compatible with PHP 8.2 in the next version.
  • Improved user language detection for app display.
  • Added additional JavaScript events to widgets, especially to make it easier to perform automatic UI tests.
  • Fixed 17 minor software bugs.

To get all changes and bug fixes, see CHANGELOG page.

Pascal,
ZnetDK developer

Code Snippets: Multiple selection in a form
Sun, 12 Mar 2023 11:23:29

Hello,

The ZnetDK 4 Mobile website was updated this week with new code snippets for Multiple selection in a form.
See the step-by-step procedure to add this functionality to the ZnetDK 4 Mobile Starter application.

Hoping you'll enjoy,

Pascal
ZnetDK developer.

ZnetDK 4 Mobile v2.8 is released
Mon, 12 Dec 2022 17:45:45

Hello,

The new version 2.8 of ZnetDK is released.

To get all changes and bug fixes, see CHANGELOG page.

Pascal,
ZnetDK developer

Code Snippets: Uploading files from your Application
Sun, 13 Nov 2022 13:00:26

Hello,

The ZnetDK 4 Mobile website was updated this week with new code snippets for Uploading files from your Application.
See the step-by-step procedure to add this functionality to the ZnetDK 4 Mobile Starter application.

Hoping you'll enjoy,

Pascal
ZnetDK developer.