webOSfrance, Palm Pre, Palm Pixi, TouchPad, HP Veer, et webOS


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

Tutoriel
Publié par Guy Gnakouri


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
Développer un défilement d'un texte dans vos applications webOS sur Palm Pre

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);
}
Développer un défilement d'un texte dans vos applications webOS sur Palm Pre

aminate.zip Aminate.zip  (7.82 Ko)




Nouveau commentaire :
Facebook Twitter

Actualités | Applications | Divers | Matériel | Test | Tutoriel | WebOS | Edito | DevCast








webOSfrance : RT @WiFiHotzones: Found a #Chinese #manufacture to build #webOS #routers! Min order 4k units. #Router needs minor redesign to bring down ma…
Lundi 27 Février - 15:44
webOSfrance : RT @WiFiHotzones: Retweet if you'd buy a #webOS based #wireless #touchscreen #router Lets see how much interest exists for this! @pivotCE…
Jeudi 23 Février - 20:55
webOSfrance : RT @WiFiHotzones: To make the #WebOS #wireless #router a reality we would need to (#sell) #Crowdfund via #Kickstarter around 2,500 #touchsc…
Jeudi 23 Février - 20:54














Créer une app


Les autres sites du groupe : News-Mobiles, AccessOWeb et En 1 image
Retrouvez l'actualité de l'iPhone 5S de l'iPad Mini et du Samsung Galaxy S4