2009-07-01 6 views
2

Est-il possible de créer des URI de données dans GWT?URI de données dans GWT

Je souhaite injecter une image de tableau d'octets en tant qu'image réelle à l'aide d'une adresse URI de données.

Répondre

2

Vous devriez vérifier ClientBundle dans la jonction de GWT. Il crée automatiquement des URL de données pour les navigateurs qui les prennent en charge et des solutions de repli pour cet autre navigateur: http://code.google.com/p/google-web-toolkit/wiki/ClientBundle

La fonctionnalité ne sera pas disponible avant GWT 2.0, mais elle est actuellement très utilisée.

+0

+1 pour recommander clientBundle. Bien que les URL de données sont peut-être moins efficaces en termes de bande passante car les chaînes codées en base64 sont plus grandes que l'image équivalente. Je ne suis pas sûr de l'URL de données sur les sprites CSS (que ImageBundle fait déjà automatiquement pour vous). – Chii

+0

Cela dépend vraiment du type de données que votre modèle d'objet a. Au travail, nous interagissons avec un standard de données XML contenant des données binaires. Il est parfaitement logique d'utiliser ces données sur le client. Autrement, nous devons le décomposer, le retirer du message, le stocker sur le serveur quelque part, puis avoir un appel de servlet pour revenir en arrière et obtenir l'information. En d'autres termes: parfois cela bat une servlet d'image. –

+0

Merci les gars, c'est PARFAIT! :) –

2

Oui. C'est complètement possible de le faire. Je l'avais fait pour une application jusqu'à ce que je réalise que IE6 ne gère pas les flux de données binaires de cette façon. Vous pouvez le faire de plusieurs façons. Pour les besoins de mon exemple, je suppose déjà que vous avez converti le tableau d'octets en une chaîne quelque part, et qu'il est correctement codé et de type approprié pour votre URI de données. Je suppose également que vous connaissez le format de base (ou pouvez le trouver) de votre schéma de données choisi. J'ai pris ces exemples from the Wikipedia article on data URI scheme. La première consiste à utiliser du code HTML brut pour faire référence à l'image comme vous le feriez normalement et l'insérer dans la page.

HTML html = new HTML("<img src=\"data:image/png;base64, 
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP 
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA 
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J 
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq 
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 
vr4MkhoXe0rZigAAAABJRU5ErkJggg==\" alt=\"Red dot\">"); 

Vous pouvez également utiliser une image. (Qui devrait produire à peu près la même sortie HTML/JS.)

Image image = new Image("data:image/png;base64, 
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP 
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA 
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J 
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq 
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 
vr4MkhoXe0rZigAAAABJRU5ErkJggg=="); 

Cela vous permet d'utiliser la pleine puissance de l'abstraction d'image sur le dessus de votre image chargée.

Je pense toujours que vous pouvez développer cette solution et utiliser le mécanisme de liaison différée de GWT pour gérer les navigateurs qui ne supportent pas les URI de données. (IE6, IE7)