Javascript Girl
  1. Javascript Girl
  3. Comment puis-je créer un champ de texte personnalisé dans Tapestry5 qui rend certains Javascript sur la page?
Intereting Posts
Comment utiliser Parse Push avec Cordova, Appcelerator, etc. Attraper un événement de navigation Close Comment puis-je créer et personnaliser un div en utilisant JavaScript? Onclick trigger ne fonctionne pas d'abord cliquez Uncaught SyntaxError: jeton inattendu) lors de l'utilisation de void () Comment puis-je rafraîchir une page de formulaire après la soumission du formulaire à _blank? Télécharger le fichier image à l'aide d'ajax et le codeur de code toujours lance l'erreur upload_path L'alternative de Chrome pour la console d'évaluation de Firebug? JQuery grep (…) VS fonctionnalité native du filtre JavaScript (…) L'utilisation de la déclaration "avec" dans javascript, dans certains cas extrêmes et rares Comment cloner un objet Date en JavaScript Champs de saisie de texte Javascript qui affichent le texte de l'instruction (espace réservé) Pourquoi JavaScript traite un nombre comme octal s'il a un zéro Filtrer et trier un tableau JavaScript Typeof foo ! == 'indefined' vs 'bar' in foo

Comment puis-je créer un champ de texte personnalisé dans Tapestry5 qui rend certains Javascript sur la page?

J'ai essayé de créer un champ de texte personnalisé dans la tapisserie qui rendra un javascript quand il atteindra l'accent. Mais j'ai eu du mal à essayer de trouver un exemple de ceci.

Voici le code avec lequel j'ai commencé: 

package asc.components; import org.apache.tapestry5.ComponentResources; import org.apache.tapestry5.Field; import org.apache.tapestry5.annotations.Parameter; import org.apache.tapestry5.ioc.annotations.Inject; import org.apache.tapestry5.services.ComponentDefaultProvider; public class DahserTextField implements Field { @Parameter (defaultPrefix = "literal") private String label; @Inject private ComponentResources resources; @Inject private ComponentDefaultProvider defaultProvider; @Parameter private boolean disabled; @Parameter private boolean required; String defaultLabel(){ return defaultProvider.defaultLabel(resources); } public String getControlName() { return null; } public String getLabel() { return label; } public boolean isDisabled() { return disabled; } public boolean isRequired() { return required; } public String getClientId() { return resources.getId(); } }

Je ne suis pas sûr de savoir quoi faire ensuite. Je ne sais pas quoi mettre dans le fichier .tml. Je vous serais reconnaissant si quelqu'un pouvait m'aider ou me montrer la bonne direction.

Il n'est pas nécessaire de répliquer les fonctionnalités de TextField dans votre propre composant, mais vous devriez créer un composant mixin. Les Mixins sont conçus pour ajouter du comportement aux composants existants.

De la tapisserie 5 docs :

La tapisserie 5 comprend une caractéristique radicale, les composants mixins. Les mélanges de composants sont un concept délicat; Il permet essentiellement de mélanger un véritable composant avec des composants spéciaux limités appelés mixins. Le composant plus ses mixins sont représentés comme une simple étiquette dans le modèle de composant, mais tout le comportement de tous les éléments.

Vous utiliserez le mixin comme ceci: 

 <input type="text" t:type="TextField" t:mixins="MyMixin" t:someParam="foo" />

Un talon de mélange: 

 @IncludeJavaScriptLibrary("MyMixin.js") public class MyMixin { /** * Some string param. */ @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL) private String someParam; @Environmental private RenderSupport renderSupport; @InjectContainer private AbstractTextField field; @AfterRender void addScript() { this.renderSupport.addScript("new MyJavascriptClass('%s', '%s');", this.field.getClientId(), this.someParam); } }

Notez l'annotation @InjectContainer , qui injecte le TextField contenant dans votre Mixin. Dans ce cas, nous voulons le clientId de TextField.

Notez également l'annotation @IncludeJavaScriptLibrary("MyMixin.js") , qui inclut le fichier Javascript requis.

Le Javascript pourrait ressembler à ceci: 

 MyJavascriptClass = Class.create({ initialize: function(textField, someParam) { this.textField = $(textField); this.someParam = someParam; this.textField.observe('focus', this.onFocus.bindAsEventListener(this)); }, onFocus: function(event) { //do something } }

La principale différence avec votre approche est que cela implique de définir votre propre classe JS et d'utiliser les installations intégrées de Tapestry pour charger et initialiser le JS. L'utilisation de mixins est également relativement légère et élégante par rapport à la création de vos propres composants.

Le .tml 

 <t:textfield onfocus="somethingCool()" />

Le Java devrait probablement étendre TextField? Il faudra probablement importer une nouvelle feuille de style.

– Les pages sont en fait des composants, donc vous construireiez un composant tel que vous auriez une autre page. Vous pouvez intégrer tout autre composant. J'espère que c'est un bon point de départ pour vous.