view release on metacpan or  search on metacpan

lib/JQuery.pm  view on Meta::CPAN

can be found in the Perl distribution under the JQuery directory. The
examples are mostly written using CGI::Application , so you will need
to install CGI-Application to run the examples. This is not a
restriction, as the modules will work using CGI and mod-apache as
well, and hopefully the framework of yor choice.

=head2 Demo.pm

The examples mostly use Demo.pm. This is a very simple module which 
initializes JQuery, calls get_jquery_code, get_css 

The module Demo.pm simply does some of the repetitive work. 

The setupfunction initiates $jquery.
cgiapp_postrun gets runs $jquery->get_jquery_code, $jquery->get_css and puts both of these, and
the HTML, into a very basic template.

=head2 Ajax

Let's start with the Ajax.

Suppose you have a button, not neccessarily in a form, and you want
some action to happen when the user presses the button.

Firstly, the JQuery module needs to be initialized.

  use JQuery ; 
  use JQuery::Taconite ; 
  my $jquery = new JQuery(jqueryDir => '/jquery_js') ; 

The button to be pressed needs an id, as it is going to accessed by javascript. So the HTML fragment could read:
   
  <input id="ex1" type="button" value="Run Example 1" />
 
  JQuery::Taconite->new(id => 'ex1', remoteProgram => '/cgi-bin/jquery_taconite_results.pl', rm => 'myRunMode', addToJQuery => $jquery) ; 

You may or may not need to set the run mode. CGI-Applications normally need
them, to define which function is to be executed in the CGI program.

When the button is pressed, some output will be shown, and a placeholder is needed to display the text.

The HTML fragment might be:
   
    <div id="example4" style="display:none; background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    Initially this div is hidden. 
    </div>

This is a div where, initially, the text is not shown.


=head1 Example Programs

=over 

=item jquery_accordion.pl

Shows an example of an accordion

=item jquery_clickmenu.pl

An example of a menu in a normal desktop application

Shows an example of an accordion

=item jquery_form.pl 

This is a small example showing how a from is constructed, and how the
Ajax reply is sent, causing only the specified fields to be updated.

=item jquery_splitter1.pl, jquery_splitter2.pl, jquery_splitter3.pl

Examples showing how to split an area into two or three panes with a
bar allowing the user to resize them.

=item jquery_tabs1.pl jquery_tabs2.pl jquery_tabs_results.pl

Examples showing a tabbing of a pane. When the tab is pressed a
different page is shown. The user can download the page remotely from
a server.

=item jquery_taconite1.pl and jquery_taconite_results1.pl jquery_taconite2.pl

Taconite is a word that doesn't sound very interesting, but this
module allows you update your screen very easily without needing to
know anything about the DOM. This is Ajax at its easiest. You really
want to use this.

jquery_taconite1.pl sets up the page and jquery_taconite_results1.pl
does the reply. This example show a variety of things to do with
Taconite, by adding radio buttons, wiring a button on the fly, adding
and removing items. 

=item jquery_taconite2.pl

jquery_taconite2.pl does the same sort of thing as
jquery_taconite1.pl, except that it uses a run mode to define the
reply.

Examples of split windows with a bar for resizing

=item jquery_treeview.pl

Show an expandable tree. You can choose grid lines or folder icons. 

=item jquery_heartbeat.pl

Show how to update a page every second.

=back

=head1 WRITING NEW MODULES

A module needs to provide the following methods

new - to create the object 

id - the id of the object. There are some modules that don't need this. This only happens in the case of where an instance does not have any css related to the id.

get_css - returns the css for the instance. The return value may be an array reference. css may be plain text or a JQuery:CSS object.

HTML - returns the HTML text for the instance