Page 1 of 1

060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 01, 2007 3:31 pm
by willwill
I have already wrote the docs but [email protected] posted that I need to use API call.
Where to put that command to? The template? Some component? or where?

Thank you.

Google Task
[me=AmyStephen]Changed subject slightly for sorting all threads to match against Google resource  :)[/me]

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 01, 2007 3:45 pm
by jlleblanc
Yes, there are API calls you can use to put Javascript and CSS files in the head section of the document. These can be called from components, modules, or plugins. I do this very frequently for projects where I want to add styles and scripts to my components, but I still want to maintain valid HTML by keeping all CSS and JS references in the header.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 01, 2007 4:26 pm
by willwill
And in the tutorial, where I should put it?
I remembered it said that who that don't know PHP/JS can understand this howto so I think they must don't edit the component without PHP knowledge.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 01, 2007 9:40 pm
by jlleblanc
The audience will need some very basic PHP knowledge, probably at the level where they could echo "Hello World!" within an if() statement. However, they won't need knowledge of object-oriented programming or complex array structures to accomplish this.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sun Dec 02, 2007 3:28 am
by annerajb
are you the same guy that claimed this task on the google webpage? because i only see another person that unclaimed it and after him i clamied the task. anyway i have a draft already going to upload to the google issue tracker. going to upload as html but i am not sure in what format to upload the file. heres the draft as a attachtment and the image that should go at the botton of the file. would like some feedback guys  :DImage

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sun Dec 02, 2007 5:36 am
by AmyStephen

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sun Dec 02, 2007 2:01 pm
by annerajb
i would like to call for a final review as i dont see anything else that i could improve unless anyone has some feedback on things to add to it.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 12:18 am
by annerajb
i fixed some stuff hopefully its better now i removed the image because i fell it wasnt needed but if somebody things its ok with a screenshot i will put it back :D. BTW: joomla is a great community :D

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 3:57 am
by AmyStephen
annerajb wrote: BTW: joomla is a great community :D
That makes me -->  :)

Feedback:

- API - all caps
- Never forget the ! on Joomla! (don't ask, just do it!  ;))
- Get rid of "we"
- remove extra words, too. For example, you can change this:
Requirements: You will need some basic knowledge of PHP programming language
To:
Requirements: Basic knowledge of PHP
Geeks don't like to read.  ;)

- perfom should be perform

- exampe if we are putting -- For example, if we are putting

In general - try to format your code with a Courier New 10 (something fixed).

In the addScript function - consider printing all of the lines together, either before or after each individual line is explained.

++++

This is an example of a plugin I wrote that uses the addScript. That might be a better format since it uses the JURI::base().
global $mainframe;

// Load the Mootools library
JHTML::_('behavior.mootools');
     
// Add Javascript
$document =& JFactory::getDocument();
$document->addScript( JURI::base() . 'plugins/content/mootoolsaccordion.js' );
It's getting there - and this will be useful - so thanks for your efforts!
Amy :)

PS - White space is very helpful with technical documents.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 1:49 pm
by annerajb
sorry my native language is not English thats why i have so many typos.
In general - try to format your code with a Courier New 10 (something fixed).
you mean change the font of the document? if yes i don't have that font in openoffice

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 1:59 pm
by AmyStephen
Don't worry - we all have typo's!

I would use Courier New (size 10) for the code examples - not the entire document. It is a very standard font - I wonder if you looked in the font drop down list box for Open Office, if you would find it? Check it out and see.

Thanks!
Amy :)

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 3:00 pm
by annerajb
i checked only have courier i am using fedora so maybe thats why is not there. also i remember reading somewhere that complete path ie. http://www.joomla.org/hello.js are more resource intensive on the server or the other way around. does JURI:base() returns the complete path as webadress or just the folder that joomla is in?

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 3:08 pm
by AmyStephen
JURI:base() returns the folder.

Courier is fine! :)

Doing good! Thanks!
Amy :)

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Tue Dec 04, 2007 3:55 pm
by annerajb
well done for today need to head to school. heres my latest revision. enjoy :D

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Thu Dec 06, 2007 6:04 am
by annerajb
anybody has any feedback on the latest revision of my doc?

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Fri Dec 07, 2007 9:06 am
by Chris Davenport
Good work Chalet.  I can see that you have listened to the feedback and taken it on board.  Here are some suggestions to make it even better:

The code samples are not particularly readable, mostly because of long lines getting wrapped.  I would suggest you remove the comment blocks containing the @copyright and @license tags as these are not really adding anything useful to the samples.  I think you can also drop the code samples down to 10pt instead of 12pt so they are less likely to wrap.

Code samples in the official documentation get copied and pasted a lot so we try to make sure they show best practice ways of doing things.  So with that in mind, all references to external files should be prefixed with JURI::base().

The second piece of example code can, I think, be stripped down to the single line:

Code: Select all

$document =& JFactory::getDocument();
leaving the third example to set it in context.

Always have a single line of white space above and below each code fragment.

There are numerous grammatical errors, but as you are not a native English-speaker I won't criticise you for that.  Contributions to the official documentation from native and non-native English-speakers are equally welcome as the Doc Team will always apply the final "translation" and polish.  However, these are a few things to watch out for:-
  • Always spell Joomla! with a capital "J" and with a final "!".
  • Be careful with the word "Joomla!" in the middle of a sentence as most word processors will automatically capitalise the first letter of the next word.
  • "Api" should be capitalised so it becomes "API".
Keep on it; you're nearly there.  :)

Regards,
Chris.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Fri Dec 07, 2007 2:27 pm
by annerajb
yeah i am focusing first on the actual content after that i will ask for somebody to help me find gramatical errors. thanks for your feedback guys ;)

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Fri Dec 07, 2007 3:18 pm
by annerajb
woot i took a look and there are some awesome task ;) to do.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Fri Dec 07, 2007 3:35 pm
by annerajb
where here it is latest version of my document as always any feedback will be welcome ;) if it's ok tell me to send it to somebody for grammar checking.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Fri Dec 07, 2007 10:18 pm
by Chris Davenport
Yep, that's a step closer.  :)

In the first code sample: you still have a problem with line wrapping.  This is a common issue that we face in the Doc Team all the time and we have developed some simple strategies for getting round such problems.  The obvious one is to reduce the font size, which you have done, but you still have a problem.  So then we might try shortening the code lines, perhaps by giving some variables shorter names or using shorter pathnames, but there doesn't seem to be much scope for that here.  So the next idea is to try re-phrasing the code to achieve the same effect but maybe use more, shorter lines, instead of a single, long line.  So try this..... try replacing this:

Code: Select all

$this->addScript(JURI::base()."templates/".$this->template."/hello.js");
with this:

Code: Select all

$js = 'templates/' . $this->template . '/hello.js';
$this->addScript( JURI::base() . $js );
Incidentally, are you sure that JURI::base() returns '/' when the Joomla! root is in the web server document root?  If it just returns an empty string then your code must supply the '/' itself, so it would become:

Code: Select all

$js = '/templates/' . $this->template . '/hello.js';
$this->addScript( JURI::base() . $js );
Still on the first code sample, I like the way you put the line(s) of interest to the reader into bold on your other code samples.  Perhaps you could do the same with this one.

On the third code sample, you seem to have included a call to addScript just before the call to addScriptDeclaration.  I think that should be removed (probably a cut-and-paste error).

Nearly there.  Keep up the good work. :)

Regards,
Chris.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 08, 2007 5:32 am
by annerajb
fixed a bug in the code
also deleted the xhtml dtd line because theres now way to stop if from wrapping and added a js variable as instructed in case that line of code wraps too i use the highest resolution on my pc's so i am not sure if its my end or yours so just to be sure ;). comments as always wanna get started coding :D

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 08, 2007 9:29 am
by Chris Davenport
Hi annerajb,

This looks really good now.  Well done.  :)

If you want to ask someone to correct grammatical errors that's up to you.  It won't affect your chances of winning any prize as we will make allowances for your being a non-native English-speaker.

When you are happy with your entry please call for a Final Review.

Good work!  :)
Chris.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 08, 2007 2:14 pm
by annerajb
wuju going to upload to google later today let me send it to somebody for prof reading.

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 08, 2007 4:15 pm
by annerajb
i uploaded into Google my final revision http://code.google.com/p/google-highly- ... %20Summary

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Posted: Sat Dec 08, 2007 7:07 pm
by Chris Davenport
Task closed.

Thanks annerjb. :)

Chris.