CSE330 Wiki - User contributions [en]

Firefox Extensions

2009-11-18T20:18:50Z

Wiseman:

=XUL=
XUL (XML User-interface Language) is a markup language that describes the user interface. It is at the heart of Mozilla based browsers. Through XUL, you can defined input controls, toolbars, menus, dialogs, keyboard shortcuts and many more. XUL could be used for Mozilla/Firefox extensions or stand-alone applications. In fact, Firefox's interface is written in XUL. If the security permissions are enabled, you can also use XUL to remotely modify the interface of the browser.

You can access a XUL file just using regular URL. An alternative is to package several related files to a chrome package. There are two ways to create chrome packages, a JAR file and a chrome directory. The jar file is basically a ZIP file with chrome directory structure. Alternatively, you can directly put the chrome directory inside your browser's profile directory. Either way, chrome packages usually have three type of data: ''content'' (main windows, scripts etc.), ''skin'' (theme related files such as images, css etc.),, ''locale'' (local language related files).

If you have installed a chrome packages, you can access its XUL files directly using Firefox specific protocol (chrome://). For example, since Firefox user-interface is written in XUL, you can access its xul files using chrome:// protocol.
The typical format is
chrome://<package name>/<part>/<file.xul>

For example,
chrome://browser/content/browser.xul

will show you the main Firefox user-interface.

== Hello World in XUL ==

The following code displays ''Hello World'' message on the browser:

<code>
<pre>
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="helloworld-window"
title="Hello World"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="Hello World!!! "/>

</window>
</pre>
</code>

In this code, the first two lines specify that this is an XML file and it uses a stylesheet. Then XML file specifies a ''window'' element. This will be the main container. Its attributes contain an id and title as well as its orientation. Also there is a specifial attribute

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

This is a special attribute that informs the browser all its children are XUL.

This windows only child is a ''label'' with the value ''Hello World!!!''.

Once you have the above XUL file, you can load it in your firefox and observe its behavior.

== XUL Packages ==

The new file are added to they system using chrome packages. Packages are basically list of XUL files and supplementary material. Once a package is installed, the files can be accessed using ''chrome://'' protocol. Firefox becomes aware of installed packages through ''[http://developer.mozilla.org/en/docs/Chrome_Manifest manifest]'' files. The purpose of these files is to map the protocol access to the actual locations in the physcical disk. While Mozilla reads all manifest files under chrome directory, Firefox reads only extentions/*/chrome.manifest names. Manifest files have the keywords content, skin and locale for each type.
content package-name file-path

skin package-name skin-name file-path

locale package-name skin-name file-path

file-path could be a physicall directory ''file:///path-name-here'', or a JAR file, ''jar:<filename.jar>!/<path_in_archive>''.

===Installing XUL Packages===

Both XUL installation and extension installation uses the same technique. You first need to create an XPI file. This is basically a zip file with some specific files inside. Lets see an example installation of hello.xul (above)

In order to install hello.xul, we will install a dummy extension. First, create a directory (lets call it helloworld) and edit a new manifest file

helloworld/chrome.manifest
content helloworld chrome/

This tells Firefox that the package helloworld has its contents under ''chrome'' directory. Next create this directory under helloworld and copy your hello.xul there.
Finally, create ''[http://kb.mozillazine.org/Install.rdf install.rdf]'' file under helloworld directory.

''install.rdf'' is a specifal file that describes your extension. In the very basic format, you need at least the following:

install.rdf
<code>
<pre><?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest">

<em:id>{4f212b04-8063-11dc-8314-0800200c9a66}</em:id>
<em:name>Hello World </em:name>
<em:version>1.0</em:version>
<em:description>This is my hellow world</em:description>
<em:creator>Burchan</em:creator>


<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>0.9</em:minVersion>
<em:maxVersion>3.0</em:maxVersion>
</Description>
</em:targetApplication>

</Description>

</RDF>
</pre>
</code>

''<nowiki><em:id></nowiki>'' describes the unique id for your extension. There are several ID generators available. You can use a web based one, such as [http://www.famkruithof.net/uuid/uuidgen]. ''<nowiki><em:name></nowiki>'', ''<nowiki><em:version></nowiki>'', ''<nowiki><em:description></nowiki>'',
''<nowiki><em:description></nowiki>'',''<nowiki><em:creator></nowiki>'' are straight forward.
''<nowiki><em:targetApplication></nowiki>'' describes which applications can use this extension, all Mozilla.org tools have their unique ids.

At this step, your should have the following directory structure.
<code>
<pre>
helloworld
|-- chrome
| `-- hello.xul
|-- chrome.manifest
`-- install.rdf

</pre>
</code>

Inside helloworld directory, create a new zip file:
zip -r ../helloworld.xpi *

and open this file in Firefox. This will install your new extenstion. Now, you can reach your hello.xul with
chrome://helloworld/content/hello.xul
===Modifying Firefox ===

''chrome'' command ''overlay'' overwrites XUL pages with other XULs. The format is
overlay chrome://first-package chrome://overwrite-the-first-package

You can use this command to overwrite Firefox XUL files. For example,
content news_blogger chrome/content/
overlay chrome://browser/content/browser.xul chrome://news_blogger/content/news_blogger.xul

first defines a new chrome for ''news_blogger'' and then let its definitions replace existing firefox definitions. This way you can define new sidebars, toolboxes or context menus.

====Toolbox====

For toolboxes, you can use <toolbox element. After toolbox, you can define a toolbar in which you can put other items.
<code>
<pre>
<?xml version="1.0"?>
<overlay id="picture-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbox id="navigator-toolbox">
<toolbar id="picture-toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" toolbarname="picture toolbar" hidden="false" persist="hidden">
<label id="picture-url" value="this is a test"/>
</toolbar>
</toolbox>
</overlay>

</pre>
</code>

====Sidebar====

You can define a sidebar using a second XUL file. The first XUL defines a menu item. In this case, it is attached to the View→Sidebar menu using the viewSidebarMenuid, which opens or closes ''News Blogger'' in the sidebar when activated. The menu item is then hooked up to a broadcaster via the observes attribute. The new broadcaster for the sidebar is overlaid into Firefox's main broadcaster set. The menu-item attributes are abstracted to the overlay simply to allow it to be used in more than one place.

<code>
<pre>
<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<menupopup id="viewSidebarMenu">
<menuitem key="key_NewsSidebar" observes="viewNewsSidebar" />
</menupopup>

<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewNewsSidebar"

autoCheck="false"
type="checkbox"
group="sidebar"
sidebarurl="chrome://news_blogger/content/sidebar.xul"
sidebartitle="News Blogger"
oncommand="toggleSidebar('viewNewsSidebar');" />
</broadcasterset>

</overlay>
</pre>
</code>

Then in the second XUL, you can define the sidebar the way you want.

<code>
<pre>
<?xml version="1.0"?>

<page id="sbEmptySidebar" title="News Blogger;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

...... your XUL elements are here......

</page>
</pre>
</code>

====Context Menu Changes====
You can add new context menu (right mouse button) items using ''overlay''
<code>
<pre>
<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<popup id="contentAreaContextMenu" insertafter="context-searchselect">
<menuseparator id="menuseperator" />
<menuitem id="add_article" label="Add Article" oncommand="AddArticle(event); event.preventBubble()"/>
<menuitem id="add_picture" label="Add Picture " oncommand="AddPicture(event); event.preventBubble()"/>

</popup>
</overlay>

</pre>
</code>

This adds two new menu items just after a firefox defined item (context-searchselect). It also sets the function to be called when these items are selected.

==Adding Javascript==

You can add javascript after within ''window'',''overlay'' or ''page'' elements. You can also refer to an existing file.
<code>
<pre>
<script type="application/x-javascript" src="chrome://news_blogger/content/news_blogger.js"/>

<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://news_blogger/content/news_blogger.js"/>

......
</pre>
</code>
==Adding HTML Elements==
If you want to use regular HTML elements, you need to include XHTML definition in your root tag.
<window id="topWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" >

Once you have included XHTML definitions, then you can put regular HTML elements using <html:TAG> and </html:TAG>. For example, you can define an ''input'' field.

<code>
<pre>
<html:input type="text" name="myinput"/>
</pre>
</code>

=Links=
[http://www.hevanet.com/acorbin/xul/top.xul Example set of XUL elements]

[http://www.xulplanet.com/references/elemref/ XUL Element References]

CSE 330 Online Textbook - Table of Contents

2009-11-13T03:33:25Z

Wiseman:

Module 1: [[System Administration]]

Module 2: [[PHP]]

Module 3: [[Databases and MySQL]]

Module 4: [[Javascript and AJAX]]

Module 5: Creative Programming 1

Module 6: [[Perl]]

Module 7: [[Remote Procedure Calls]]

Module 8: Creative Programming 2

2009-09-24T04:15:33Z

Wiseman:

JavaScript

2009-09-24T04:09:56Z

Wiseman: /* Asynchronous Javascript And XML */

2009-09-17T22:50:45Z

Wiseman: /* Using MySQL */

=SQL With MySQL=

SQL (Structured Query Language) is a language used to interact with a relational database. While SQL is the standard basis for database communication, different database vendors usually add their own small modifications or enhancements. In order to use SQL, you need to use a client that communicates with the server. Many high-level languages like Java, C, and PHP have the libraries for that purpose. We will be using ''MySQL'' in this class (pronounced: My S-Q-L), which is one of the most widely used databases. You can use the command line program ''mysql'' to communicate with the server directly.

=Installing MySQL=

You will need both the mysql server and the mysql client. Installing the server automatically installs the client package, so you can get them both by running:

apt-get install mysql-server

When the server is being installed, it will ask you for a root password for the mysql server. Pick anything you like for the password, but make sure you can remember it. You will need this password when you access your database server for administration purposes (like adding new databases or database users). If you forget the password, you can reset it later, but it's not a simple process.

There are also several tools that can help you manage mysql databases easily. One in particular is is ''PhpMyAdmin'' that allows you to manage your database over the web. You can install it with:

apt-get install phpmyadmin

Installing phpmyadmin will automatically configure Apache for you if you let it. When installing, select ''Apache2'' with the space bar when it asks which databases to auto configure. Then selecte ''Yes'' when it asks if you want to configure the database for phpmyadmin. You will have to supply the root mysql password you chose when installing mysql. You will also have to add a phpmyadmin password for use later. Make sure to pick something you can remember.

=Using MySQL=
==Starting MySQL==

The interface to mysql is the ''mysql'' command. It is generally run like this:

mysql -u USERNAME -p -h HOSTNAME DATABASENAME

Note that, the user USERNAME needs to have access to the database DATABASENAME, otherwise mysql will return an error. See the next section to learn how to give users access to databases. When you run the command as above, it will prompt you for a password, which is the password for user USERNAME. Also, if you are connecting to a mysql server on the local PC, you can leave off the ''-h HOSTNAME'' argument. For example, to connect to the ''mydb'' database on the local host with user ''me'', do:

mysql -u me -p mydb

To do the same for a mysql server running on host ''somewhere.dyndns.org'', do:

mysql -u me -p -h somewhere.dyndns.org mydb

==Managing Databases==
Each mysql server can host many different ''databases''. Each database contains many tables (described later), which store the actual information in the database. There is no relationship between data or tables in separate databases, i.e., each database should be a self contained entity.

Databases in mysql are created with:

create database DATABASENAME;

The user must have administrative administrative rights in order to create a database. A database can be deleted with the ''drop'' command:

drop database DATABASENAME;

At the mysql command prompt, you can change your active database like so:

use DATABASE;

Once the active database is changed, all your commands will be applied to the newly active database.

For example, the following commands will create and switch to a new database:

create database company;
use company;

==Managing Users==
All administrative information about the mysql server is contained in the ''mysql'' database. To manage users or databases, you need to access mysql as the root user for the ''mysql'' database (assuming you are on the localhost with the server):

mysql -u root -p mysql

You will be prompted for a password, which in this case is the root password you selected when you installed mysql. User information is stored in the ''user'' table. The fields of this table are:

<code>
<pre>
+-----------------------+-----------------------------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+-----------------------+-----------------------------------+------+-----+---------+-------+
| Host | char(60) | NO | PRI | | |
| User | char(16) | NO | PRI | | |
| Password | char(41) | NO | | | |
| Select_priv | enum('N','Y') | NO | | N | |
| Insert_priv | enum('N','Y') | NO | | N | |
| Update_priv | enum('N','Y') | NO | | N | |
| Delete_priv | enum('N','Y') | NO | | N | |
| Create_priv | enum('N','Y') | NO | | N | |
| Drop_priv | enum('N','Y') | NO | | N | |
| Reload_priv | enum('N','Y') | NO | | N | |
| Shutdown_priv | enum('N','Y') | NO | | N | |
| Process_priv | enum('N','Y') | NO | | N | |
| File_priv | enum('N','Y') | NO | | N | |
| Grant_priv | enum('N','Y') | NO | | N | |
| References_priv | enum('N','Y') | NO | | N | |
| Index_priv | enum('N','Y') | NO | | N | |
| Alter_priv | enum('N','Y') | NO | | N | |
| Show_db_priv | enum('N','Y') | NO | | N | |
| Super_priv | enum('N','Y') | NO | | N | |
| Create_tmp_table_priv | enum('N','Y') | NO | | N | |
| Lock_tables_priv | enum('N','Y') | NO | | N | |
| Execute_priv | enum('N','Y') | NO | | N | |
| Repl_slave_priv | enum('N','Y') | NO | | N | |
| Repl_client_priv | enum('N','Y') | NO | | N | |
| Create_view_priv | enum('N','Y') | NO | | N | |
| Show_view_priv | enum('N','Y') | NO | | N | |
| Create_routine_priv | enum('N','Y') | NO | | N | |
| Alter_routine_priv | enum('N','Y') | NO | | N | |
| Create_user_priv | enum('N','Y') | NO | | N | |
| ssl_type | enum('','ANY','X509','SPECIFIED') | NO | | | |
| ssl_cipher | blob | NO | | | |
| x509_issuer | blob | NO | | | |
| x509_subject | blob | NO | | | |
| max_questions | int(11) unsigned | NO | | 0 | |
| max_updates | int(11) unsigned | NO | | 0 | |
| max_connections | int(11) unsigned | NO | | 0 | |
| max_user_connections | int(11) unsigned | NO | | 0 | |
+-----------------------+-----------------------------------+------+-----+---------+-------+
</pre>
</code>

Important fields are ''Host'' (which specifies from which host(s) a user can access the database), ''User'' (name of the user), ''Password'' (the password for this user), and several boolean privilege attributes. Fortunately, mysql provides the ''grant'' command that makes dealing with mysql users simpler. The format of ''grant'' is

grant PRIVILEGE_NAMES on DATABASE.TABLE to 'USERNAME'@'HOSTNAME' identified by 'USERPASSWORD';

The PRIVILEGE_NAMES could be individual privileges (SELECT, INSERT, DROP, etc.), it could be a group of privileges (USAGE), or it could be the special ''ALL'' privilege which grants USERNAME all possible privileges. The TABLE name can be, and often is, a wild card (*) which means that USERNAME is given the indicated privileges for all tables in the database DATABASE. The HOSTNAME can be any host name (somewhere.dyndns.org), it could contain the SQL wild card '%' (%.dynsdns.org) to allow access from multiple hosts that share a common domain, or it could be just the wild card (%) to indicate access should be granted from all hosts.

Here is an example that gives all privileges to the user ''boss' with the password ''employer'', where the user connects only from the localhost.

grant all on company.* to 'boss'@'localhost' identified by 'employer';

After each grant, you need to tell mysql to reload grant tables by flushing privileges:

flush privileges;

==Managing Tables==
Similar to databases, tables are created and deleted with ''create table'', ''drop table'' command. When creating a table, the user needs to supply the attribute information.

create table TABLENAME (ATTRIBUTE TYPE, ATTRIBUTE TYPE,.....);

MySQL contains several attribute types for strings, numerical values, dates etc. The common types include char, varchar, text, blob, int, float,date etc. MySQL manual contains full list of available types [[http://dev.mysql.com/doc/refman/5.0/en/data-types.html]]

For example, the following command will create a new table called employee
create table employee ( name char(20), dept char(20), jobtitle char(20));

You can see the tables in a database with
show tables;
command. You can get a detailed description of a table with:
describe TABLENAME;

==SQL Commands==
===Inserting New Data===
''insert into'' command inserts a new row to the database
insert into TABLENAME values (ATTRIBUTE1_VALUE, ATTRIBUTE2_VALUE,.....)
If you want to insert a new row with only some attributes set, you can do that by telling which attributes you want to be set:
insert into TABLENAME (ATTIBUTE1,ATTRIBUTE2) values (ATTRIBUTE1_VALUE, ATTRIBUTE2_VALUE)

For example, the following commands will insert new employees to the company database.

insert into employee values ("Alice","Wonderland","Lost traveler");
insert into employee values ("Peter","Neverland","Leader");
insert into employee values ("Frodo","Shire","Ring beerer");
===Retrieving Existing Data===
''select'' command returns the rows from a database where some conditions are matched.
select ATTRIBUTE1,ATTRIBUTE2,..... from TABLE [where CONDITION]

Instead of individual attributes, you can ask to receive all row with ''select *''

For example
select * from employee;
will return
<code>
<pre>
+-------+------------+---------------+
| name | dept | jobtitle |
+-------+------------+---------------+
| Alice | Wonderland | Lost traveler |
| Peter | Neverland | Leader |
| Frodo | Shire | Ring beerer |
+-------+------------+---------------+
</pre>
</code>

or you can get Peter's title.
select `jobtitle` from employee where `name` like 'Peter';

===Updating Existing Data===
''update'' command is used to update individual rows. The format is
update TABLENAME set ATTRIBUTE1=value1,ATTRIBUTE2=value2 .... [where conditions]

For example, the following will update Frodo's job title.

update employee set `jobtitle`='Hero' where `name` like 'Frodo'

===Deleting Existing Data===
''delete from'' command is used to delete row(s) from the database
delete from employee where CONDITION;

For example, the following command will delete Frodo.

delete from employee where `name` like 'Frodo';
where as
delete from employee;
deletes everything from the table.

=PHP and MySQL=

In order to use mysql function in php, you need to install ''php5-mysql'' package first. Then from a PHP page, you can connect to a mysql database by using ''mysql_connect'' command.

$link=mysql_connect('HOSTNAME','DATABASEUSER','PASSWORD');

The hostname is either IP or name of the server running MySQL daemon, the database user is the name of the user who can run the required commands and password is the user's the user's password. ''mysql_connect'' returns a mysql object that you will use later to communicate with the server. If the connection fails, $link will be NULL. Once connected, you can select a database:
mysql_select_db('DATABASENAME',[$link]);
If $link is not specified, mysql_select_db tries to find an open connection.

You can close a connection with mysql_close
mysql_close($link);

SQL commands are send through ''mysql_query'' command.

mysql_query(SQLQUERY)

for example,
mysql_query("insert into employee values ('Sheridan','B5','Commander')") or die('Error, insert query failed');

will insert data to employee table. ''mysql_query'' also receive the data from the server. For example, if you have send a ''select'' query, then you can loop over the results for each returned row.
<code>
<pre>
$result = mysql_query('select * from employee');

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
echo "Name :{$row['name']} <br>" .
"Department : {$row['dept']} <br>" .
"Job Title : {$row['jobtitle']} <br><br>";
}

</pre>
</code>

After the sql command is sent, the individual rows are fetched with ''mysql_fetch_array''. The parameter ''MYSQL_ASSOC'' tells the function that the results should be in the format of an associative array, i.e., the attributes can be reached by their names. If you want a numeric array, you can use MYSQL_NUM. The default is MYSQL_BOTH, hence you can avoid specifying this parameter. If you are interested in the number of rows returned, you can call ''mysql_num_rows'' function.

PHP Manual has a very detailed description of each mysql related function [http://us2.php.net/manual/en/ref.mysql.php]

=Other MySQL Information=

The configuration file for MySQL is ''/etc/mysql/my.cnf''. It specifies MySQL directories and other parameters. If you want to migrate MySQL, it is sufficient to copy files from ''datadir'', which is in debian located at ''/var/lib/mysql''. One interesting parameter is bind-address. By default, it restricts the database access to the localhost, so you may want to comment it out.

The program ''mysqladmin'' is the official program to communicate with the server for managerial tasks. Common tasks that can be handled by ''mysqladmin'' include flushing some MySQL elements (such as tables, privileges etc.), kill mysql threads, restart, shutdown, or validate a client. In order to use this command, you need to provide the administrator password.