Comunidad de diseño web y desarrollo en internet online

Como obtener un imagen dentro de mi busqueda en flash + XML

Citar            
MensajeEscrito el 01 Sep 2010 01:09 am
Hola gente que tal les cuento que hace un buen tiempo que estoy buscando un buscador de xml que me ha simplificado muchas cosas, pero desde hace mucho que quiero lograr que ademas del texto, vinculo y datos me devuelva una imagen para poder utilizarlo para unas cuantas cosas mas que se me ocurren. Ya probé muchas maneras, algo no estoy haciendo bien.
Primero pongo el xml en el que realizo la busqueda:

Código XML :

<?xml version="1.0" encoding="UTF-8" ?>
<nicoweb url="http://www.cristalab.com">
   <post url="www.google.com.ar">      
   <codigo>251662</codigo>
   <rubro>buscadores</rubro>
   <descripcion>Google es mi mejor buscador y apunto a mejorar las posiciones en la web.(todos)</descripcion>
   <imagen>pavimento.jpg</imagen>
   </post>
   <post url="www.yahoo.com.ar">      
   <codigo>7185</codigo>
   <rubro>buscadores</rubro>
   <descripcion>Otro Buscador numero 2 y de los mejores</descripcion>
   <imagen>pavimento.jpg</imagen>
   </post>
   <post url="www.cristalab.com">      
   <codigo>74971</codigo>
   <rubro>foro</rubro>
   <descripcion>La mejor solución a la hora de aprender inventar y mejorar cosas sobre flash</descripcion>
   <imagen>pavimento.jpg</imagen>
   </post>
   <post url="www.hotmail.com">      
   <codigo>75901</codigo>
   <rubro>e-mail</rubro>
   <descripcion>el email mas comun de todos y el mejor a la hora de no genrar spam</descripcion>
   <imagen>pavimento.jpg</imagen>
   </post>
</nicoweb>



Luego dentro del flash hago:
• Un scrollbar (clip de película) no hace falta explicarlo para lo que estoy queriendo hacer.
• Un campo de texto dinámico “results_txt” con html y seleccionable habilitado
• Un clip de película donde están los elementos para buscar “search_fields”.


Dentro del clip de película “search_fields”.
• campo de introducción de texto “query_txt”
• Tres clip de película con diferentes tipos de busquedas (title_check, author_check, message_check) esto es solo la opción de que si esta apretado es trae sino es false nada del otro mundo.
• Un boton que después lo llamo con el script principal “search_btn”

Bueno eso es todo lo que hay en el swf mas las acciones que son:
En el primer fotograma de la primera capa: (esto es para que el scroll se adapte nada mas, por si le sirve a alguien).

Código ActionScript :

// global functions
Clamp = function(min, n, max){
   if (n<min) return min;
   if (n>max) return max;
   return n;
}

// SCROLLBAR
// references
scrollbar.range = scrollbar._height;
scrollbar.top = scrollbar._y;


// methods
scrollbar.resize = function(size_factor){
   this.body._yscale = Clamp(0, 100*size_factor, 100);
   this.cap._y = this.body._y + this.body._height;
}
scrollbar.updateSize = function(){
   if (!this.contentCanScroll()) this.noScroll();
   else{
      var range = this.target.txt.bottomScroll-this.target.txt.scroll;
      this.resize(range/(this.target.txt.maxscroll+range));
   }
}
scrollbar.setBarScroll = function(percent){
   if (percent == 0) this._y = this.top;
   else{
      var bottom = this.top + (this.range - this._height);
      var position = this.top + (this.range - this._height)*percent
      this._y = Clamp(this.top, position, bottom);
   }
}
scrollbar.getBarScroll = function(){
   return (this._y - this.top)/(this.range - this._height);
}
scrollbar.updateBarScroll = function(){
   this.updateSize();
   this.setBarScroll((this.target.txt.scroll-1)/(this.target.txt.maxscroll-1));
}
scrollbar.updateContentScroll = function(){
   if (!this.contentCanScroll()) this.noScroll();
   else this.target.txt.scroll = 1+Math.round((this.target.txt.maxscroll-1)*this.getBarScroll());
   this.target.last_scroll = this.target.txt.scroll;
}
scrollbar.setScroll = function(percent){
   this.setBarScroll(percent);
   this.updateContentScroll();
}

scrollbar.noScroll = function(){
   this.target.txt.scroll = 1;
   this._y = this.top;
   this.resize(1);
}

// checks
scrollbar.contentCanScroll = function(){
   return (this.target.txt.maxscroll > 1);
}
scrollbar.contentChanged = function(){ // checker/reactor
   if (this.target.txt.text != this.target.content ){
      this.target.content = this.target.txt.text;
      this.updateBarScroll();
   }else if (this.target.last_scroll != this.target.txt.scroll){
      this.target.last_scroll = this.target.txt.scroll;
      this.updateBarScroll();
   }
}

// interaction
scrollbar.drag = function(){
   if (this.body._yscale >= 100) return (0);
   var position = this._parent._ymouse - this._yoffset;
   var bottom = this.top + this.range - this._height;
   this._y = Clamp(this.top, position, bottom);
   this.updateContentScroll();
   updateAfterEvent();
}
scrollbar.onPress = function(){
   this._yoffset = this._ymouse;
   this.onMouseMove = this.drag;
}
scrollbar.onRelease = scrollbar.onReleaseOutside = function(){
   delete this.onMouseMove;
}

// define
scrollbar.setTarget = function(txt){
   this.target = {
      txt: txt,
      content: this.target.txt.text,
      last_scroll: this.target.txt.scroll
   }
   this.resize(txt.scroll/txt.maxscroll);
}
// poll for content changes
scrollbar.onEnterFrame = scrollbar.contentChanged;


En el primer fotograma de la segunda capa: (este es el que busca y el que me interesa cambiar)

Código ActionScript :

  String . prototype . contains = function ( searchString ) { 
  return ( this . toLowerCase ( ) . indexOf ( searchString. toLowerCase ( ) ) != - 1 ) ; 
  } 
  Array . prototype . contains = function ( searchValue ) { 
  var i = this . length ; 
  while ( i-- ) if ( this [ i ] . toLowerCase ( ) == searchValue. toLowerCase ( ) ) return true ; 
  return false ;
}

SearchXML = function(nodes, query, useChildElements){
   var results = [];
   for (var i=0; i<nodes.length; i++){
      for (var j=0; j<nodes[i].childNodes.length; j++){
         currNode = nodes[i].childNodes[j];
         if (useChildElements.contains(currNode.nodeName)){
            if (currNode.firstChild.nodeValue.contains(query)){
               results.push(nodes[i]);
               break;
            }
         }
      }
   }
   return results;
}

ElementsToSearch = function(){
   var childElementsToSearch = [];
   if (search_fields.title_check.checked){
      childElementsToSearch.push("codigo");
   }
   if (search_fields.author_check.checked){
      childElementsToSearch.push("rubro");
   }
   if (search_fields.message_check.checked){
      childElementsToSearch.push("descripcion");
      childElementsToSearch.push("foto");
   }
   return childElementsToSearch;
}

DisplayNodes = function(nodes, field_txt){
   field_txt.htmlText = "";
   var entry;
   var separator = "<br>_______________________<br><br>";
   for (var i=0; i<nodes.length; i++){
      entry = "";
      entry += "<b>"+ nodes[i].childNodes[0].firstChild.nodeValue +"</b>";
      entry += "<br>rubro:"+ nodes[i].childNodes[1].firstChild.nodeValue;
      entry += "<br>"+ nodes[i].childNodes[2].firstChild.nodeValue;
      entry += "<br>"+ nodes[i].childNodes[3].firstChild.nodeValue;
      if (nodes[i].attributes.url.length){
         entry += "<br><a href='" + nodes[i].attributes.url;
         entry += "'><font color='#0000FF'>Ver mas >>></font></a>";
      }
      field_txt.htmlText += entry + separator;
   }
}

search_highlight = new TextFormat();
search_highlight.color = 0xFF0000;
search_highlight.italic = true;

HighlightOccurences = function(str, field_txt, format){
   if (!str.length) return (0);
   var start = field_txt.text.indexOf(str);
   var end = start + str.length;
   while (start != -1){
      field_txt.setTextFormat(start, end, search_highlight);
      start = field_txt.text.indexOf(str, end);
      end = start + str.length;
   }
}


var posts_xml = new XML();
posts_xml.ignoreWhite = true;
posts_xml.onLoad = function(success){
   if (success){
      search_fields._visible = true;
   }else results_txt.text = "Error loading XML";
}
search_fields._visible = false;
posts_xml.load("nicoweb.xml");

search_fields.title_check.title_txt.text = "Codigo";
search_fields.author_check.title_txt.text = "Rubro";
search_fields.message_check.title_txt.text = "Descripcion";

search_fields.search_btn.onRelease = function(){
   if (search_fields.query_txt.text.length < 3){
      results_txt.text = "minimo de busqueda son 3 carateres.";
      return (0);
   }

   var searchElements = ElementsToSearch();
   var nodesWithQuery =   SearchXML(
                        posts_xml.firstChild.childNodes,
                        search_fields.query_txt.text,
                        searchElements
                     );
   
   if (nodesWithQuery.length){
      DisplayNodes(
         nodesWithQuery,
         results_txt
      );
   }else{
      results_txt.text = "no hay resultados de "+search_fields.query_txt.text+".";
      return (0);
   }
   
   HighlightOccurences(search_fields.query_txt.text,results_txt,search_highlight);
   
   scrollbar.setScroll(0);
}

scrollbar.setTarget(results_txt);


Bueno se hiso un poco largo pero quería poner todo por si a alguien le sirve y ademas para que no quede nada de duda
Ya he probado varias maneras la mas clasica es respetar el HTML y utilizar como por ejemplo:

Código ActionScript :

entry += "<br><img src='"+  nodes[i].childNodes[3].firstChild.nodeValue + "'>"

Tambien probe de agregarlo dentro del xml dentro del:
<![CDATA[]]>
Pero no hay manera que funcione el tema de cargar una imagen en el resultado de la busqueda. Si alguien sabe como puedo dejar de renegar con este buscador se lo agradecería y si a alguien le gusta esto de hacer un buscador en flash y tiene alguna preguna no tengo problema en ayudar incluso podría subir el ejemplo si es necesario. Que largo que quedooooo!!!!!!
Muchas Gracias.
Nico

Por nicoweb85

18 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Sep 2010 09:54 pm
Doy una orientación para los que saben pero no tienen ganas de leer toda esta pregunta, tendría que ver el segundo scrip en la parte donde declara la variable entry ahí hay que modificar algo no se que es ya probé con la etiqueta "img src=" como dije antes pero no funciona y no encuentro por que?. Gracias igual por darle un vistazo.

Por nicoweb85

18 de clabLevel



 

msie7
Citar            
MensajeEscrito el 01 Sep 2010 11:24 pm
Tip: prueba a postearlo de nuevo con una explicación que no supere las 10 lineas y no mas de 10 lineas de código.

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 02 Sep 2010 12:53 am
Bueno lo simplifico, quiero meter una imagen dentro de un campo de texto dinamico de tipo htmlText que ademas cargo texto, vinculos, etc. todo dentro de un mismo campo convirtiendo los datos que obtengo del XML en HTML en el action scrip aca pongo la parte que digo:

Código ActionScript :

entry = "";
      entry += "<b>"+ nodes[i].childNodes[0].firstChild.nodeValue +"</b>";
      entry += "<br>rubro:"+ nodes[i].childNodes[1].firstChild.nodeValue;
      entry += "<br>"+ nodes[i].childNodes[2].firstChild.nodeValue;
      if (nodes[i].attributes.url.length){
         entry += "<br><a href='" + nodes[i].attributes.url;
         entry += "'><font color='#0000FF'>Ver mas >>></font></a>";
      }
      field_txt.htmlText += entry

Como ven convierto los resultados del XML en HTML para darle espacios (<br>), vinculos, color, tamaño etc. Pero ademas de esto, que anda perfecto quiero agregarle una imagen (la ruta esta en el XML). ya he probado agregando:

Código ActionScript :

entry += "<br><img src='"+  nodes[i].childNodes[3].firstChild.nodeValue + "'>"
pero no funciona alguna idea de que puedo esta haciendo mal?

Por nicoweb85

18 de clabLevel



 

msie7
Citar            
MensajeEscrito el 02 Sep 2010 02:43 pm
Excelente resúmen. Dado que los campos de texto soportan el tag img desde hace un par de versiones, me inclino por pensar que la ruta a la imagen no es la correcta, ¿Puedes trazarla y chequearlo?

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 04 Sep 2010 04:43 pm
Bueno ya había escrito esto pero se ve que no lo mando o algun problema con mi hermosa conexión, el tema es vergonsoso porque el problema estaba en que en configuración de publicación no se en que momento me quedo en la versión de Flash 6 y me parece que no soporta la etiqueta <img> asique cambie a version superior y anduvo como si nada. Pido mil disculpas a Solisarg y muchas gracias por ayudar =. El buscador anda perfecto incluso con imagenes asique si alguien le interesa algo puedo contestas.
Saludos
Nico

Por nicoweb85

18 de clabLevel



 

msie7
Citar            
MensajeEscrito el 27 Oct 2010 07:40 am
Holas,
Parece que tienes justo lo que estoy buscando.
Tengo que hacer un catalogo de publicaciones (Libros en PDF en un CD interactivo), la idea es hacer una lista de publicaciones, pero, necesariamente tengo que incluir un CAMPO DE BUSQUEDA para facilitar que el usuario encuentre el tema de su interés.

Espero puedas orientarme,
Mil gracias!

Por imasumaq

7 de clabLevel



 

chrome
Citar            
MensajeEscrito el 05 Nov 2010 04:38 pm
si ningun problema no soy de los grandes expertos pero pregunte no hay problemas, mil disculpas la demora de la respuesta no la había visto su pregunta. saludos Nico

Por nicoweb85

18 de clabLevel



 

msie8

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.