Développer un défilement d'un texte dans vos applications webOS sur Palm Pre

Dans ce tuto je vais développer une fonction qui permet de faire défiler un texte de droite à gauche.
D'abord je créé mon projet  que j'appelle Animate (lire ce billet pour la création de projet ).

Je crée une nouvelle scène que j'appelle Aminatext. J'obtiens cette arborescence

Dans mon fichier  /assistants/sate-assistant.js  je mets ma scène Animatetext  en scène principale

 function StageAssistant() {
}

StageAssistant.prototype.setup = function() {
     //ici j'appelle ma scene
    this.controller.pushScene("Aminatetext");
}

Je crée mon interface qui sera composée d'un bouton  pour lancer l'application et d'une zone d'affichage pour afficher mon texte. Dans mon fichier /views/Anmatetext/Animatetext-scene.html je rajoute

 <div id="main" class="palm-hasheader">
    <div class="palm-header left" id="main-hdr">
      Animation de texte
    </div>
   
    <div id="animateButton" class="palm-button">Lancer l'animation</div>

<div id="affiche" style="position:absolute; height: 25px; top:130px; left:300px; width:0px; overflow:hidden;"/>
   
</div>

C'est dans le fichier app/assistants/Animatetext-assistant.js que je vais implémenter l'ensemble des fonctions qui vont me permettre de réaliser cette action.

1 er fonction AminatetextAssistant() elle permet de définir les fonctions appelées

function AminatetextAssistant() {
    this.stop = false;
     this.animateButtonHandler = this.animateButton.bind(this);
}

2eme fonction prototype.setup dans laquelle j'implémente les objets de mon interface et les actions

AminatetextAssistant.prototype.setup = function() {
   // on crer une varaible sur l'objet div affiche
    this.tickerInfo = $('affiche');
//affect l'action sur le bouton lancer l'application
    this.controller.listen('animateButton',Mojo.Event.tap, this.animateButtonHandler);
  //controler ici la memoire utilisée
    Mojo.Event.listen(this.controller.stageController.document,
        Mojo.Event.stageDeactivate,
        this.stopAnimatingHandler,
        true
    );       
   
}


Fonction permettant de faire revenir le texte

AminatetextAssistant.prototype.doCircularTicker = function (toWidth,widthGrowDuration,toLeft,leftShrinkDuration)
{
    var that = this;
    //reset the message's left & width properties so that it's back offscreen to the right
    this.tickerInfo.setStyle({'left': "300px"});
    this.tickerInfo.setStyle({'width': "0px"});
   
    //grow the width property so that it gets big enough to display the full message
  Mojo.Animation.animateStyle(this.tickerInfo, 'width', 'linear', {
              from: 0,
              to: toWidth,
              duration: widthGrowDuration});                  
                                               
    //decrease the left property so that the message appears to be moving to the left &
    //call us again when the ticker message has gone off the left side of the screen
  Mojo.Animation.animateStyle(this.tickerInfo, 'left', 'linear', {
              from: 300,
              to: toLeft,
              duration: leftShrinkDuration,
                    onComplete: function(){
                    if (!that.stop) {
                        that.doCircularTicker(toWidth, widthGrowDuration, toLeft, leftShrinkDuration);
                    }
                }
    });     
}

Dans cette troisième partie j'implémente l'ensemble des fonction permettant de réaliser cette actions

Fonction  qui lance l'application avec doAnimation

AminatetextAssistant.prototype.animateButton =function(e) {
    this.stop = false;
    var message = 'Palm pre france........................................' +
    '**************THE END*****************';
    this.doAnimation(message,4); //speedLevel goes from 1(slowest) to 7(fastest)               
}


Fonction de gestion de l'animation vitesse défilement

AminatetextAssistant.prototype.doAnimation = function(message, speedLevel) {
   
    this.tickerInfo.update(message);
   
    //adjust the speed level to an Animation class related factor
    switch (speedLevel)
    {
        case 1: speedLevel = 10; break;
        case 2: speedLevel = 5; break;
        case 3: speedLevel = 1; break;
        case 4: speedLevel = .75; break;
        case 5: speedLevel = .5; break;
        case 6: speedLevel = .25; break;
        case 7: speedLevel = .1; break;
        default: speedLevel = 1; break;
    }
   
    
    //how wide to grow the div   
  toWidth = message.length*10;
   //temps de défilement
    widthGrowDuration = speedLevel*message.length/100;
    //distance du bord gauche
    toLeft = -(message.length*10); 
    //duration for moving the div to the left.
    leftShrinkDuration = speedLevel*message.length/10;
   
    //fonction doCircularTicket pour la rotation
    this.doCircularTicker(toWidth,widthGrowDuration,toLeft,leftShrinkDuration);
}