Archives quotidiennes :

Journal de bord: création d’une application de création de schéma en HTML5: Jour 3

Publié le par
Répondre

Introduction
Ce billet fait suite au billet: http://blog.developpez.com/ducodeetdulibre/p12470/developpement/journal-de-bord-creation-dune-application-de-creation-de-schema-en-html5-jour-2

Dans ce billet, je vais expliquer la méthode pour enregistrer un schéma et le charger.
Je vais également indiquer les dernières avancées.

Enregistrer un schéma
L’idée est simple: sérialiser les éléments et les enregistrer en base de données.
Pour cela, un bouton « save » qui fait appel à une function save()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function loadSave(){
    //on serialize le tableau tObject
    var stObject=JSON.stringify( oApplication.tObject);
   
    //on enregistre la serialisation dans l'input tObject
    var b=getById('tObject');
    if(b){
        b.value=stObject;
    }
   
    //on fait de meme pour les calques objet, afin de conserver l'ordre
    var stMenuLayerObject=JSON.stringify( oApplication.tMenuLayerObject);
   
    var c=getById('tMenuLayerObject');
    if(c){
        c.value=stMenuLayerObject;
    }
}
function save(){
   
    loadSave();
   
    //une fois le chargement fait, on soumet le formulaire
    var a=getById('formSave');
    if(a){
        a.submit();
    }
}

Et coté php, dans le framework dans me module default

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private function processSave($oSchema){
        if(!_root::getRequest()->isPost()){
            return;
        }
       
        //on modifie les proporiétés tObject et tMenuLayerObject
        $oSchema->tObject=_root::getParam('tObject');
        $oSchema->tMenuLayerObject=_root::getParam('tMenuLayerObject');
        //on enregistre le shema
        $oSchema->save();
       
        //on redirige sur la page
        _root::redirect('default::schema',array('id'=>$oSchema->id));
    }

Processus de chargement du shéma
L’idée est simple: on récupère le tableau d’objet sérialisé ainsi que le tableau indiquant l’ordre des calques objets
Données que l’on assigne à la vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//dans l'action schema
public function _schema(){
        //on initialize les variables a vide
        $tObject=null;
        $tMenuLayerObject=null;
       
        //on recupere l'enregistrement du shema en base
        $oSchema=model_schema::getInstance()->findById(_root::getParam('id'));
        if($oSchema){
            //on appel le processus d'enregistrement
            $this->processSave($oSchema);
           
            //on recupere les valeurs serialises
            $tObject=$oSchema->tObject;
            $tMenuLayerObject=$oSchema->tMenuLayerObject;
        }
       
       
        $oView=new _view('default::index');
        $oView->tObject=html_entity_decode($tObject);
        $oView->tMenuLayerObject=html_entity_decode($tMenuLayerObject);
       
        $this->oLayout->add('main',$oView);
    }

Ensuite dans la vue, on va reconstruire le schéma: on instancie un tableau avec la valeur serialisé de tObject (malheureusement, la coloration syntaxique ne permet pas de le voir correctement)

1
var tObject=tObject?>;

On boucle sur ce tableau serialisé pour recréé les objets Datas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
for(var i=0;i< tObject.length;i++){
    if(!tObject[i]){ continue; }
    var oData=new Data(tObject[i].type,tObject[i].idLayer);
    oData.x=tObject[i].x;
    oData.y=tObject[i].y;
    oData.strokeStyle=tObject[i].strokeStyle;
    oData.fillStyle=tObject[i].fillStyle;
    oData.width=tObject[i].width;
    oData.height=tObject[i].height;
    oData.from=tObject[i].from;
    oData.comment=tObject[i].comment;
    oData.to=tObject[i].to;
    oData.lineWidth=tObject[i].lineWidth;
    oData.x2=tObject[i].x2;
    oData.y2=tObject[i].y2;
    oData.texte=tObject[i].texte;
    oData.size=tObject[i].size;
    oData.info=tObject[i].info;
    oData.relativeObject=tObject[i].relativeObject;
    oData.relativeX=tObject[i].relativeX;
    oData.relativeY=tObject[i].relativeY;
    oData.textAlign=tObject[i].textAlign;
    oData.strokeStyleText=tObject[i].strokeStyleText;
   
    oData.fromPosition=tObject[i].fromPosition;
    oData.toPosition=tObject[i].toPosition;
   
   
    oData.build();
   
    oApplication.addLayerObject(1,oData);
}

On fait de même pour le tableau de calques objet: sauf que cette fois on l’enregistre dans l’objet application, puis on boucle pour reconstruire les différents calques.

1
2
3
4
5
6
7
oApplication.tMenuLayerObject=tMenuLayerObject?>;

for(var i=1;i<=iMax;i++){
   
    oApplication.clearMenuObject(i);
    oApplication.builListMenuLayerObject(i);
}

Les avancées
On peut désormais ordonner les calques objets et cliquer sur un objet pour l’envoyer sur un autre calque.

Dépot Github
Le dépot github: https://github.com/imikado/mkdraw