Re: JavaScript-Component in a Java project(jar)

[Taha Hafeez <ta...@gmail.com>]

Hi Amr

I had this question in mind but couldn't get time to get back to you with an
example. Here is one

/**
 * A mixin to show the character count of a component is a given html
element.
 */
@Import(library = "character-count.js")
public class CharacterCount
{

   @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL,
              allowNull = false)
   private String output;

   @Parameter(value = "keydown", defaultPrefix = BindingConstants.LITERAL,
              allowNull = false)
   private String clientEvent;

   @Parameter(value = "value", defaultPrefix = BindingConstants.LITERAL,
              allowNull = false)
   private String field;

   @InjectContainer
   private ClientElement element;

   @Inject
   private JavaScriptSupport javaScriptSupport;

   void afterRender()
   {
      JSONObject params = new JSONObject();
      params.put("outputId", output);
      params.put("field", field);
      params.put("elementId", element.getClientId());
      params.put("event", clientEvent);
      javaScriptSupport.addInitializerCall("characterCount", params);
   }

}


with associated js as character-count.js

Tapestry.Initializer.characterCount = function(params)
{
   var elementId = params.elementId;
   var event = params.event;
   var outputId = params.outputId;
   var field = params.field;

   var showCharacterCount = function(event)
   {
      $(outputId).innerHTML = $(params.elementId)[field].length;
   };

   Event.observe($(elementId), event, showCharacterCount);

   showCharacterCount();
};


You can use it as

      <form t:type='form'>
         <input t:type='textfield'
                t:value='text'
                t:mixins='tawus/charactercount'
                t:output='outputSpan'/>
         <span id='outputSpan'></span>
      </form>

regards
Taha




On Mon, Jun 27, 2011 at 6:34 PM, Taha Hafeez <ta...@gmail.com>wrote:

> Hi Amr
>
> If you require a component's id your component should implement
> ClientElement interface. A typical example will be
>
>   @Inject
>   private JavaScriptSupport javaScriptSupport;
>
>   @Parameter(value = "prop:componentResources.id", defaultPrefix =
> BindingConstants.LITERAL)
>   private String clientId;
>
>   private String assignedClientId;
>
>   void setupRender()
>   {
>      assignedClientId = javaScriptSupport.allocateClientId(clientId);
>   }
>
>   public String getClientId()
>   {
>      return assignedClientId;
>   }
>
>   void afterRender()
>   {
>      javaScriptSupport.addScript(".....('%s') ...", getClientId());
>   }
> }
>
> Another thing, you should prefer to use addInitailizerCall instead of
> addScript() and then in the script do something like
>
> Tapestry.Initializer.myfunction = function(params){
> };
>
> in the java file
>
> void afterRender()
> {
>   JSONObject params = new JSONObject();
>   params.put("id", getClientId());
>   javaScriptSupport.addInitializerCall("myfunction", params);
> }
>
>
> Also, you cannot get the id of a component like you are trying here,
> as the ids are assigned later. If you really want to do it, then you
> will need a HeartBeat, (not the one we already have :) ) but typically
> you should not need it.
>
> regards
> Taha
>
> 2011/6/27 Amr Mohamed Mahmoud Hassanien <am...@ey.ae>:
> > Thanks a lot, No problem Now to add the java script or to refer to it. I
> am using tapestry 5.1 BTW and @IncludeJavaScriptLibrary("charcounter.js")
>  works.
> >
> > Now another Issue :)
> >
> > This is My Component
> >
> --------------------------------------------------------------------------------------
> > @IncludeJavaScriptLibrary("charcounter.js")
> > public class CharCounter {
> >
> >        @Parameter(required = true)
> >        @Property
> >        private String textFieldId;
> >
> >        @Parameter(required = true)
> >        @Property
> >        private String id;
> >
> >        @Inject
> >        private RenderSupport javaScriptSupport;
> >
> >        public void afterRender() {
> >                javaScriptSupport.addScript(String.format("new
> CharCounter('%s', '%s');", textFieldId, id));
> >        }
> >
> > }
> > ---------------------------------------------------------------
> > Here how I use it in a page..
> > ---------------------------------------------------------------
> > <t:CharCounter t:id="leadCounter" t:textFieldId="lead"/>
> > ---------------------------------------------------------------
> >
> > But the Javascript added as a result of the afterRender() is >> new
> CharCounter('null', 'null');
> >
> > Do you have any idea why the values are not set?
> >
> > Regards,
> > Amr
> >
> >
> > -----Original Message-----
> > From: Taha Tapestry [mailto:tawus.tapestry@gmail.com]
> > Sent: 27 يونيو, 2011 01:16 م
> > To: Tapestry users
> > Subject: Re: JavaScript-Component in a Java project(jar)
> >
> > Hi
> >
> > JavaScript is a resource and if you are packaging it in a jar you can use
> the resources folder typically src/main/resources. Also it is a good
> convention to put the file in the same hierarchy as the java file
> using/importing it
> >
> > e.g if the class file is a.b.MyClass which is importing the resource the
> put the file in folder a/b under resources directory
> >
> > You have not mentioned which version you are using. If you are using 5.2+
> then use @Import instead of @ImportJavaSrcipt
> >
> > Regards
> > Taha
> >
> > On Jun 27, 2011, at 2:24 PM, Amr Mohamed Mahmoud Hassanien <
> amr.hassanin@ey.ae> wrote:
> >
> >> Dear All,
> >>
> >>    I am Creating a Component inside a Java project (which will be
> packaged to jar), and there is javascript combined with this component.
> >> Where is the best place to put the .js file and have can I refere to it
> using @IncludeJavaScriptLibrary?
> >>
> >> Thanks,
> >> Amr
> >>
> >>
> >> ######################################################################
> >> ##########################################
> >> DISCLAIMER:
> >> This message is for the named person's use only. It may contain
> >> confidential information, proprietary in nature or legally privileged
> >> information. All trade secret, know how, formulas, researches,
> >> database, software, codes diagrams, documentations, attachments,
> >> voice, concepts and visual content are strictly protected by United
> >> Arab Emirates Laws and Dubai Media Incorporated codes which will have
> >> the right to take any legal action if you fail in doing the hereunder
> steps. If you receive this message in error, please immediately DELETE it
> and all copies of it from your system, DESTROY any hard copies of it and
> destroy any soft and backup copy of it saved in any kind of form under you
> possession and NOTIFY the sender.
> >> You must not, directly or indirectly, use, disclose, distribute,
> >> print, or copy any part of this message (email) if you are not the
> intended recipient.
> >> ######################################################################
> >> ##########################################
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
> ################################################################################################################
> > DISCLAIMER:
> > This message is for the named person's use only. It may contain
> confidential information, proprietary
> > in nature or legally privileged information. All trade secret, know how,
> formulas, researches, database,
> > software, codes diagrams, documentations, attachments, voice, concepts
> and visual content are strictly
> > protected by United Arab Emirates Laws and Dubai Media Incorporated codes
> which will have the right to
> > take any legal action if you fail in doing the hereunder steps. If you
> receive this message in error,
> > please immediately DELETE it and all copies of it from your system,
> DESTROY any hard copies of it and
> > destroy any soft and backup copy of it saved in any kind of form under
> you possession and NOTIFY the sender.
> > You must not, directly or indirectly, use, disclose, distribute, print,
> or copy any part of this message (email)
> > if you are not the intended recipient.
> >
> ################################################################################################################
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>