Utilisation du code javascript externe pour ajouter des effets à une page générée par GWT

J'ai été fourni avec du code html/css statique du concepteur, et il utilise javascript pour ajouter les effets désirés à la page. Notre application utilise l'architecture MVP comme décrit sur les pages officielles de GWT, donc pour le test initial, je viens de mettre le html statique dans un fichier xml UiBinder d'une vue souhaitée. La sortie était agréable, et la page était la même que celle fournie lors de son ouverture dans le navigateur. Le seul problème est que les effets javascript ne fonctionnent pas.

Plus précisément, c'est l'effet accordéon du framework Rico. Quand une souris est sur un élément de liste, il devrait changer de couleur. Et quand un utilisateur clique sur l'élément de liste, il se développe pour afficher plus de détails (comme un widget arbre).

L'inclusion de script dans la page d'accueil du module ressemble à ceci:

<head> 
    ... 
    <script src="javascript/rico.js" type="text/javascript"></script> 
    <script type='text/javascript'> 
     Rico.loadModule('Accordion'); 
     Rico.onLoad(function() { 
      new Rico.Accordion($$('div.panelheader'), $$('div.panelContent'), 
           {panelHeight:66, hoverClass: 'mdHover', selectedClass: 'mdSelected'}); 
     }); 
    </script> 
    ... 
    </head>

Toutes les .js fichiers qui ont été fournis par le concepteur sont dans le dossier war/javascript, et lors de l'inspection en Firebug (en à la fois le mode de développement et tomcat déployé), le navigateur semble voir ces fichiers. Je peux cliquer sur le src="../...js" et le navigateur ouvre les bons fichiers.

Où le problème pourrait-il être? Depuis la page statique fonctionne et les effets sont visibles, je suppose que le problème était dans la fusion avec le GWT. Ai-je fait quelque chose de mal avec l'inclusion, ou le javascript externe a-t-il un problème avec l'accès aux parties générées par gwt de la page?

Source

2010-09-16 igorbel

Cela peut être un problème de synchronisation que le gwt n'a pas ajouté son élément à la page lorsque votre fonction js essaie d'ajouter les effets. – pathed

Dans ce cas, je vais dans l'autre sens - j'appelle une fonction JS définie dans la page d'accueil (juste envelopper ce que vous avez dans les <script> balises dans une fonction) de mon code GWT via la fonction JSNI (habituellement dans onModuleLoad) . La fonction JSNI ressemblerait à quelque chose comme ceci:

public final native void initRico() /*-{ 
    $wnd.ricoInitFunction(); 
}-*/;

Oh, et êtes-vous sûr que $$('div.panelheader') obtient effectivement cet élément? Si vous utilisez UiBinder et définissez des styles dans les tags <ui:style>, ils seront obfusqués (<ui:style> est converti en CssResource au moment de la compilation). Si vous voulez être sûr que vous utilisez les bons éléments, vous pouvez facilement passer un GWT Widget à votre fonction init - il suffit d'utiliser la méthode getElement():

public final native void initRico(Element e1, Element e2) /*-{ 
    $wnd.ricoInitFunction(e1, e2); 
}-*/; 

// The actual call would then look like this: 
initRico(widget1.getElement(), widget2.getElement());

Ensuite, utilisez ces éléments dans votre code:

function ricoInitFunction(e1, e2) { 
    Rico.loadModule('Accordion'); 
    Rico.onLoad(function() { 
    new Rico.Accordion($$(e1), $$(e2), 
     {panelHeight:66, hoverClass: 'mdHover', selectedClass: 'mdSelected'}); 
    }); 
}

De toute façon, vous ne devriez pas essayer de "interroger" les éléments dont vous avez besoin, vous devez les suivre comme Widget s. Utilisez les fonctions OO fournies par Java - c'est l'une des principales raisons pour lesquelles j'utilise GWT :)

Source

2010-09-17 12:07:54

THX. Bien sûr, c'était une erreur de débutant. Le problème était comme vous et pathed remarqué. Les éléments en question n'ont pas été créés au moment de l'appel du nouvel Accordéon(), et n'ont donc pas été ajoutés. Le style était correct, donc je n'ai pas besoin de la fonction paramétrée, mais de toute façon, merci pour une bonne idée. La solution finale consistait à appeler la fonction native pour init l'accordéon après que le présentateur ait déjà ajouté la vue à la page. – igorbel

Utilisation du code javascript externe pour ajouter des effets à une page générée par GWT

Répondre

Questions connexes