Information  Vous êtes sur mobile ou tablette ? Tenez votre appareil à l'horizontale !

Framework Mobile

Introduction

Note du développeur
La version cordova du framework n'est plus maintenue depuis 2018 par manque de temps.
Mais il n'est pas abandonné ! Une mise à niveau sera faite dès que cela sera possible.

Le framework mobile est un framework JS conçu pour être utilisé dans une application Cordova
contrairement au framework PHP, le framework JS ne peut pas servir à créer plusieurs projets, chaque application devra avoir sa copie du framework.

Prérequis

  • Connaitre Javascript et JQuery
  • Connaitre le principe de "Single Page Application" (SPA)
  • Savoir comment configurer correctement Cordova
  • Connaitre le principe de prototype (objet) en JS (pas obligatoire mais c'est un plus !)

Structure

La structure du Framework JS est très simple

  •   src
    •   Contient l'ensemble des librairie JS intégrées
    •   dwf
      •   Contient des "prototypes" du framework
    •   dwf.js
      •   Contient le "prototype" principal du framework
  •   index.html
    •   Comme pour tout projet Cordova

A noter que les lignes suivantes sont nécessaires au bon fonctionnement de Cordova,
ces fichiers sont générés à la compilation de l'application, ne créez pas ces fichiers !

", "html", "monaco_highlighter_0"); });

Debuter

Le framework mobile vous offre une quantité non négligeable de méthodes pour vous aider dans le développement de votre application
ces méthodes sont accessibles via $dwf

Appel d'un script JS

Pour débuter, vous pouvez créer vos propres fichiers de fonctions/prototypes JS/JQuery. Pour les ajouter, deux méthodes s'offrent à vous :

  1. Ajoutez-les directement dans le head du fichier index.html, le fichier sera donc toujours chargé au démarrage de l'application
  2. Utilisez $dwf.include_script() pour inclure un fichier JS,
    cette méthode permet de contextualiser l'appel du fichier
    pour ne pas avoir à le charger si l'utilisateur n'en a pas l'utilité dans son contexte d'utilisation

Exemple d'utilisation dans le fichier index.html

", "js; html-script: true", "monaco_highlighter_1"); });

Vérifier la connexion réseau du téléphone

Admettons que votre application aura obligatoirement besoin d'une connexion internet (wifi ou 3G/4G), vous pouvez effectuer une vérification grâce à
$dwf.cordova().is_connected_web(); qui retourne true si l'appareil est connecté, sinon false;

Les formulaires avec $dwf

Le framework permet de gérer les formulaires en toute simplicité, en 6 étapes

  1. Création de la balise form avec jquery.html()
  2. Récupération du proto formulaire avec $dwf.form();
  3. Ajout des champs du formulaire avec
    • $dwf.form().input()
    • $dwf.form().select()
    • $dwf.form().radio()
    • $dwf.form().checkbox()
    • $dwf.form().datepicker()
    • $dwf.form().submit()
    • ...
    Les champs seront stylisés avec bootstrap
  4. Soumission du formulaire avec jquery.submit()
  5. Récupération des saisies du formulaire avec $dwf.get_post() (retourne un tableau associatif nommé $_post, comme en PHP mais en minuscule)
  6. Utilisation des données pour localStorage ou requête Ajax

Heritage du framework php

Le framework mobile est apparu après le framework PHP,
il est donc évident que le framework mobile s'inspire, voir même retranscrive, du code du framework PHP
au-delà des prototypes "form", "math", "time" et "trad" qui sont de retranscription du code PHP vers JS.
Et le prototype "Cordova" qui est une spécificité, le framework mobile reprend principalement la classe "js" du framework PHP.
ainsi la fonction PHP js::datatable() existe sous la forme JS $dwf.datatable()
pour plus d'informations, voir la documentation technique.