[résolu] WebKit

LexxisLexxis Membre
novembre 2010 modifié dans Objective-C, Swift, C, C++ #1
Bonjour à  tous !

J'ai un problème dans l'utilisation de WebKit et plus spécifiquement (enfin je penses) dans le langage HTML et Cie.

J'utilise dans un de mes programmes l'affichage de hint "personnalisé" qui donne des informations concernant l'objet que l'utilisateur survole avec sa souris. Mon approche actuelle pour la création du hint est l'utilisation d'une NSView dans une NSWindow que j'affiche à  coté du curseur. Bien que fonctionnelle cette approche manque cruellement de possibilités de personnalisation sans modifications du code et compilation de l'application. Ma seconde approche utilise la classe WebView. Dans ce cas j'utilise le HTML pour mettre en page les informations affiché dans mon hint. Mon problème concerne la façon de mettre ses informations en place.

Je m'explique, voici en gros comment est consitué mon hint (les [] représente une cellule dans un table - au sens HTML):


[Image][Nom de la catégorie de l'objet]


Tags de l'objet


[Informations sur l'objet]



Mon problème vient du formatage de la troisième ligne. Je voudrais que sa taille (qui conditionne la taille de la fenêtre contenant le hint) soit variables mais au maximum 400 pixel. Actuellement la largeur de la webview est calé sur la largeur de la première ligne.

WebKit peut-il me permettre de faire ce que je veux ? Auriez-vous des idées ? Je séche...

PS: Je joint une image donnant un exemple de ce que j'obtiens, de ce que je voudrais obtenir et le code html que j'utilise.

<br />&lt;style type=&quot;text/css&quot;&gt;<br />&nbsp; categoriestyle { font: bold 8pt arial; white-space: nowrap; vertical-align: middle }<br />	objectnamestyle { font: bold 9pt arial; color:%objectnamecolor%; white-space: nowrap; }<br />	tagliststyle { font: italic 7pt arial }<br />	tagstyle { vertical-align: middle }<br />	commentstyle { font: 8pt arial; }<br />	body { margin-left:2px; margin-right:2px; margin-top:2px; margin-bottom:2px }<br />	table { border: 0px solid black; border-collapse: collapse; }<br />	tr { max-width: 400px; }<br />	td { padding:1px; }<br />&lt;/style&gt;<br />&lt;html&gt;<br />	&lt;body bgcolor=&quot;#FFFEBA&quot;&gt;<br />		&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; style=&quot;max-width: 400px&quot;&gt;<br />			&lt;tr&gt;<br />				&lt;td width=&quot;11&quot; height=&quot;11&quot;&gt;&lt;img src=&quot;internal:categimage&quot;/&gt;&lt;/td&gt;<br />				&lt;td&gt;&lt;categoriestyle&gt;%categname%&lt;/categoriestyle&gt;&lt;/td&gt;<br />				&lt;td align=right&gt;&lt;categoriestyle&gt;%level%&lt;/categoriestyle&gt;&lt;/td&gt;<br />			&lt;/tr&gt;<br />			&lt;tr&gt;<br />				&lt;td&gt;&lt;/td&gt;<br />				&lt;td colspan=2 valign=center&gt;&lt;tagstyle&gt;&lt;objectnamestyle&gt;%objectname%&lt;/objectnamestyle&gt;&amp;nbsp;&amp;nbsp;%objecttaglisticon%&amp;nbsp;&amp;nbsp;&lt;/tagstyle&gt;&lt;/td&gt;<br />			&lt;/tr&gt;<br />			&lt;tr&gt;<br />				&lt;td&gt;&lt;/td&gt;<br />				&lt;td colspan=2&gt;&lt;nobr&gt;&lt;tagliststyle&gt;%objecttaglist%&lt;/tagliststyle&gt;&lt;/nobr&gt;&lt;/td&gt;<br />			&lt;/tr&gt;<br />			&lt;tr&gt;<br />				&lt;td colspan=3 style=&quot;width:400px&quot;&gt;&lt;commentstyle&gt;%objectcomment%&lt;/commentstyle&gt;&lt;/td&gt;<br />			&lt;/tr&gt;<br />		&lt;/table&gt;<br />	&lt;/body&gt;<br />&lt;/html&gt;<br />

Réponses

  • sekaijinsekaijin Membre
    20:57 modifié #2
    pourquoi une NSWindow et pas simplement un div dans le HTML ?
    &lt;div&gt; un bout de &lt;span onmouseover=&quot;document.getElementById(&#39;myTips&#39;).style.display=&#39;block&#39;&quot; on ouseout=&quot;document.getElementById(&#39;myTips&#39;).style.display=&#39;none&#39;&quot;&gt;html&lt;/span&gt; pour la démo&lt;/div&gt;<br />&lt;div id=&#39;myTips&#39; style=&quot;display:none;&quot;&gt;un tips pour informer l&#39;utilisateur&lt;/div&gt;
    


    du coup tu génère ton HTML et c'est webkit qu'il affiche le tout hints compris.

    pour ce qui est de la mise en forme j'utilise http://dev.sencha.com/deploy/dev/examples/simple-widgets/qtips.html qui offre une multitude de possibilité comme définir des "template HTML"
    mais aussi des thèmes
    on peut ne charger que le strict nécessaire de la lib. mais il y a de nombres lib sur le net avec diverse licence qui font ça très bien

    A+JYT
  • LexxisLexxis Membre
    20:57 modifié #3
    Bonjour,

    J'utilise une NSWindow pour afficher mon hint car le document principal (la carte sur les exemples fournie) n'est pas un document HTML mais un NSView "simple".

    Je vais tout de même regarder du coté des lib. Merci pour la piste.
  • LexxisLexxis Membre
    20:57 modifié #4
    Voila j'ai trouvé une solution.

    Lorsqu'il faut affichagee un tooltip, je crée une fenêtre (et une webview à  l'interieur) assez grande (640*480). Dans mon code HTML je remplace toute mes variables (%var%) par les informations qui doivent être affiché. Puis, lorsque la webview à  fini sont travail de "téléchargement" je modifie la taille de la fenêtre (et de la webview) avec les valeurs de l'élément table 'tooltip'.

    Je suis obligé de passé par un évaluation javascript pour trouver la taille de l'élément table. Ce n'est pas la solution idéale je trouve... mais je n'en ai pas trouvé d'autre.

    <br />- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)frame {<br /><br />	if([frame isEqual:[sender mainFrame]]) {<br />		<br />		NSRect newWebViewRect = NSZeroRect;<br />		newWebViewRect.size.width&nbsp; = [[[sender windowScriptObject] evaluateWebScript:@&quot;window.getComputedStyle(document.getElementById(&#39;tooltip&#39;),null).getPropertyValue(&#39;width&#39;)&quot;] integerValue] + 1;<br />		newWebViewRect.size.height = [[[sender windowScriptObject] evaluateWebScript:@&quot;window.getComputedStyle(document.getElementById(&#39;tooltip&#39;),null).getPropertyValue(&#39;height&#39;)&quot;] integerValue] + 1;<br />		<br />		//set the frame<br />		[sender setFrame:newWebViewRect];<br />		[self.window setContentSize:newWebViewRect.size];<br />		<br />		NSPoint cursorScreenPosition = [NSEvent mouseLocation];<br />		<br />		[window setFrameTopLeftPoint:NSMakePoint(cursorScreenPosition.x + 10, cursorScreenPosition.y - 15)];<br /><br />		if (![window isVisible])<br />			[window orderFront:nil];<br />	}	<br />}<br />
    


    Code HTML du tooltip:
    <br />&lt;html&gt;<br />	&lt;style type=&quot;text/css&quot;&gt;<br />		categoriestyle { font: bold 8pt arial; white-space: nowrap; }<br />		objectnamestyle { font: bold 9pt arial; color:%objectnamecolor%; white-space: nowrap; }<br />		tagliststyle { font: italic 7pt arial }<br />		commentstyle { font: 8pt arial; }<br />		linkstyle { font: bold italic 8pt arial; color:blue; }<br />		body { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px }<br />		table { border:1px solid black; border-collapse: collapse; table-layout:fixed; }<br />		tr { border:0px solid black; }<br />		td { padding:1px; border:0px solid black; }<br />	&lt;/style&gt;<br />	&lt;body bgcolor=&quot;#FFFEBA&quot;&gt;<br />		&lt;table id=&quot;tooltip&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;<br />			&lt;tr&gt;<br />				&lt;td width=&quot;9&quot; height=&quot;9&quot;&gt;<br />					&lt;img src=&quot;internal:categimage&quot;/&gt;<br />				&lt;/td&gt;<br />				&lt;td&gt;<br />					&lt;categoriestyle&gt;%categname%&lt;/categoriestyle&gt;<br />				&lt;/td&gt;<br />				&lt;td align=right&gt;<br />					&lt;categoriestyle&gt;%level%&lt;/categoriestyle&gt;<br />				&lt;/td&gt;<br />			&lt;/tr&gt;<br />			&lt;tr&gt;<br />				&lt;td/&gt;<br />				&lt;td style=&quot;text-valign:center; vertical-align:center;&quot; colspan=2&gt;<br />					&lt;objectnamestyle&gt;%objectname%&lt;/objectnamestyle&gt;&amp;nbsp;&amp;nbsp;%objecttaglisticon%&amp;nbsp;&amp;nbsp;<br />				&lt;/td&gt;<br />			&lt;/tr&gt;<br />			&lt;tr&gt;<br />				&lt;td/&gt;<br />				&lt;td style=&quot;text-valign:center;&quot; colspan=2&gt;<br />					&lt;tagliststyle&gt;%objecttaglist%&lt;/tagliststyle&gt;<br />				&lt;/td&gt;<br />			&lt;/tr&gt;<br />			&lt;tr&gt;<br />				&lt;td style=&quot;&quot; colspan=3&gt;<br />					&lt;div style=&quot;max-width:400px&quot;&gt;<br />						&lt;commentstyle&gt;%objectcomment%&lt;/commentstyle&gt;<br />					&lt;/div&gt;<br />				&lt;/td&gt;<br />			&lt;/tr&gt;<br />		&lt;/table&gt;<br />	&lt;/body&gt;<br />&lt;/html&gt;<br />
    
Connectez-vous ou Inscrivez-vous pour répondre.