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.
Hello,
The new version 3.1 of ZnetDK 4 Mobile is released.
To get all changes and bug fixes, see CHANGELOG page.
Pascal,
ZnetDK developer
Hello,
The new version 3.0 of ZnetDK 4 Mobile is released.
.htaccess
, token to prevent CSRF attacks, limitation of connections by login identifier, critical errors hidden from the user, limitation of access to authorization management , ...To get all changes and bug fixes, see CHANGELOG page.
Pascal,
ZnetDK developer
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:
INSTALL_DIR/engine/core/layout/mobile.php
script to INSTALL_DIR/applications/default/app/layout/
folder.INSTALL_DIR/applications/default/app/layout/mobile.php
script thus becomes the new page template loaded to display the application.INSTALL_DIR/engine/public/js/mobile.js
script to the INSTALL_DIR/applications/default/public/js/
folder.INSTALL_DIR/applications/default/public/js/mobile.js
script is to be adapted to the new CSS framework chosen to replace W3.CSS.INSTALL_DIR/applications/default/public/css/my_framework.css
: the CSS framework styles replacing W3.CSSINSTALL_DIR/applications/default/public/css/my_layout.css
: styles specific to the mobile.php custom page template.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
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
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
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> <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> <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> <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> 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> <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> <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> <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> 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
Hello,
The new version 2.9 of ZnetDK is released.
To get all changes and bug fixes, see CHANGELOG page.
Pascal,
ZnetDK developer
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.
Hello,
The new version 2.8 of ZnetDK is released.
To get all changes and bug fixes, see CHANGELOG page.
Pascal,
ZnetDK developer
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.