Forums Développement Multimédia

Aller au contenu

Mobile text html

CODE Actionscript

7 réponses à ce sujet

#1 Jwhy

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 131 messages

Posté 22 February 2013 - 00:41 AM

Bonjour,

Je cherche désespérément un moyen de faire afficher un text html dans un projet Flex mobile.

Après de nombreuses recherches sur le web impossible de trouver un exemple qui fonctionne. D’après ce que j’ai pu lire la classe « StyleableTextField » serait buggé mais les infos date un peu…

Est ce que depuis que Air 3.6 et Flex 4.9 sont sortis il y a un moyen de faire un texte html (avec des mots en gras, en italique, les liens en couleur...) ?

Quelqu’un aurait il un exemple qui fonctionne ?

#2 youtch77

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 51 messages

Posté 24 February 2013 - 14:38 PM

Une idée élégante, je pense, c'est de créer une page HTML locale avec votre texte au fomat HTML avec un objet stageWebView (dans flash.media) qui fait office de browser simplifié (cf http://help.adobe.co...ageWebView.html).
Sinon vous pouvez chargez votre texte avec loadString() plutôt qu'un fichier...
Bon exemple de code à utiliser :

var myString:String=
"<html>"+
"<body bgcolor=\"#CECE33\">"+
"<font color=\"#FF0000\">Hello world</font color>"+9
"</body>"+
"</html>";

myStageWebView.loadString(myString,"text/html");
 


#3 Jwhy

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 131 messages

Posté 24 February 2013 - 21:05 PM

Merci pour ta réponse, mais j'ai grand peur que cela ne convienne pas à ce que je veux faire.

Quand j'essaye de rajouter le StageWebView dans un Vgroup, j'ai un message d'erreur, d'après la doc d'Adobe il semblerait que cela ne soit pas possible, hors j'ai besoin que StageWebView se place entre mes autres éléments du Vgroup et qu'il suive le scroll du Vgroup.
Autre point problématique je n'ai pas réussi à rendre le fond du StageWebView transparent.

Sur le papier la classe "StyleableTextField" serait idéale mais je n'arrive pas à la faire fonctionner.

Si quelqu’un à une autre solution …

#4 Tonic

    Plop

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5712 messages

Posté 25 February 2013 - 16:49 PM

Salut,

avec le Flex SDK 4.6 et Air 3.6, en settant une skin contenant un StyleableTextField, ca fonctionne :


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          applicationDPI="160"
          applicationComplete="application1_applicationCompleteHandler(event)"
>
<fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
 
   import spark.components.supportClasses.StyleableTextField;
 
   [Bindable]
   public var test : String = "bonjour, voila du <b>gras</b> avec un <a href='http://www.google.fr'>lien</a>";
 
   public var styles:String =
    "a { color: #FFE043; textDecoration: underline; } " +
    "a:active{ color: #ffffff;}" +
    "b{fontWeight:bold; fontFamily: Arial;} " +
    "i{fontStyle:italic; fontFamily: Arial;}";
 
   protected function application1_applicationCompleteHandler(event:FlexEvent):void
   {
    var myStyleSheet:StyleSheet = new StyleSheet();
    myStyleSheet.parseCSS(styles);
    StyleableTextField(labelTest.textDisplay).styleSheet = myStyleSheet;
    StyleableTextField(labelTest.textDisplay).htmlText = test;
   }
 
  ]]>
</fx:Script>
<s:TextArea
    paddingLeft="20" paddingRight="20"
    id="labelTest"
    borderVisible="false"  
    width="100%"
    skinClass="spark.skins.mobile.TextAreaSkin"
/>

</s:Application>
 

++ ^^

#5 Jwhy

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 131 messages

Posté 25 February 2013 - 20:06 PM

Ouiii ça marche , Merci !!! :smile:
Pourquoi y a pas des exemples aussi simple dans la doc d'Adobe ! :evil: arf

#6 Tonic

    Plop

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5712 messages

Posté 26 February 2013 - 09:15 AM

;-)

Le truc c'est qu'a chaque version du SDK jusqu'au 4.6, la gestion des textes a évolué, alors tu trouveras pas mal d'exemples "périmés".

La dernière version du SDK (4.6 au 4.9) utilise la skin StageTextAreaSkin par défaut, qui utilise le moteur de rendu natif du device. Tu verras ici les avantages, mais aussi les inconvénients de l'utiliser et l'intérêt parfois de passer par l'ancienne version de skin qui utilise un StyleableTextField :

http://help.adobe.co...e7e87-7fff.html

++ ^^

#7 Jwhy

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 131 messages

Posté 26 February 2013 - 13:02 PM

Effectivement beaucoup de contenus périmés sur ce sujet...

Bon, j'ai un autre problème, le texte ne revient pas la ligne automatiquement et quand je rajoute un <br /> le cadre ne se réadapte pas en fonction de la hauteur du texte.

J'ai essayer en rajoutant cela, mais ça ne fonctionne pas :

StyleableTextField(labelTest.textDisplay).multiline = true
StyleableTextField(labelTest.textDisplay).wordWrap = true

Y a t'il une solution à ce problème ?

#8 Jwhy

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 131 messages

Posté 26 February 2013 - 16:35 PM

Bon, j’ai réussi à mettre le champ de texte en multilignes. Mais pas moyen de réadapter la hauteur du textArea en fonction du contenu.

J’ai essayé cela :


var temp:Number = StyleableTextField(TXTintro.textDisplay).getLineMetrics(1).height*StyleableTextField(TXTintro.textDisplay).numLines
StyleableTextField(TXTintro.textDisplay).height =  temp                                          
TXTintro.height =temp
 

Mais cela renvoi une erreur « Thread principal (Suspendu : Error: Error #2009: This method cannot be used on a text field with a style sheet.) »

Y a t’il un moyen de contourner cela ?

J'ai aussi essayé avec TXTintro.setStyle("height", temp) sans grand succès

Autre problème : quand je rajoute un style pour centrer le texte ("p{text-align: center;}"), le texte n’est pas tout a fait centré il y a une sorte de marge sur la droite (à peu près de la largeur de l’ascenseur…)… y a t'il un moyen de la supprimer ?


<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  title="intro"
  creationComplete="champDeTexteHtml(event);">
<fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   import flashx.textLayout.formats.LineBreak;
   import mx.events.FlexEvent;
   import spark.components.supportClasses.StyleableTextField;
 
   [Bindable]
   public var texteIntro : String = "<p><b>un texte en gras</b></p> Un texte long de plusieures lignes Un texte long de plusieures lignes Un texte long de plusieures lignes Un texte long de plusieures lignes Un texte long de plusieures lignes";
 
   public var styles:String =
        "a { color: #FFE043; textDecoration: underline; } " +
        "a:active{ color: #ffffff;}" +
        "p{text-align: center;}"+
        "b{fontWeight:bold; fontFamily: Arial;} " +
        "i{fontStyle:italic; fontFamily: Arial;}";
 
   protected function champDeTexteHtml(event:FlexEvent):void
   {
 
        var myStyleSheet:StyleSheet = new StyleSheet();
        myStyleSheet.parseCSS(styles);
        StyleableTextField(TXTintro.textDisplay).lineBreak =LineBreak.TO_FIT
         
        StyleableTextField(TXTintro.textDisplay).styleSheet = myStyleSheet;
        StyleableTextField(TXTintro.textDisplay).htmlText = texteIntro;
 
        var temp:Number =  StyleableTextField(TXTintro.textDisplay).height = StyleableTextField(TXTintro.textDisplay).getLineMetrics(1).height*StyleableTextField(TXTintro.textDisplay).numLines
        TXTintro.setStyle("height", temp)
   }
  ]]>
</fx:Script>
<fx:Declarations>
  <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
</fx:Declarations>
<s:Scroller width="100%" height="100%">
   <s:VGroup width="100%" horizontalAlign="center" id="myVgroup">
        <s:TextArea
         paddingLeft="5" paddingRight="5"
         id="TXTintro"
         borderVisible="false"
         contentBackgroundAlpha="0"
         selectable="false"
         focusEnabled="false"
         width="100%"
         height="100"
         skinClass="spark.skins.mobile.TextAreaSkin"
         />
        <s:Button label="bouton 1"/>
        <s:Button label="bouton 2"/>
        <s:Button label="bouton 3"/>
        <s:Button label="bouton 4"/>
        <s:Button label="bouton 5"/>
        <s:Button label="bouton 6"/>
        <s:Button label="bouton 7"/>
        <s:Button label="bouton 8"/>
        <s:Button label="bouton 9"/>
   </s:VGroup>
</s:Scroller>
</s:View>
 




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP