Monday, November 13, 2006
test #10
Namespaces in XML
Frobnostication everything is in the HTML namespace, in this case by default -- ...
www.w3.org/TR/1998/WD-xml-names-19980916 - 46k - Cached - Similar pages - Note this
www.w3.org/TR/1998/WD-xml-names-19980916 - 46k - Cached - Similar pages - Note this
powered by performancing firefox
Sunday, November 12, 2006
01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
Super long Title post test!
Super long Title post test!
powered by performancing firefox
testing PFF 1.3.5
 | Love Firefox? So do millions of others. Help us spread the word! |
| Firefox Help Add-ons | About Mozilla | CDs Merchandise | Get Involved |
powered by performancing firefox
Monday, November 06, 2006
Sunday, November 05, 2006
Welcome to Firefox, the new, easy-to-use browser firefox 2.0 baby hell yeay baby!
The mission of the Mozilla project is
to preserve choice and innovation on the Internet.
We are:
- The producer and provider of the award-winning
Firefox web browser and Thunderbird e-mail software.
- A software development tools provider.
- An open source community of developers and testers.
- A partner for the technology industry.
- An advocate for standards on the Net who provides
tools for developing standard web content.
- Educators, providing educational materials about
Internet technologies and software development.
We are leading innovators, developing the next generation of
web browser and e-mail software
"Security, Cool Features Of Firefox Web Browser Beat Microsoft's IE" - Walt
Mossberg, Wall Street Journal
- Mozilla Firefox:
Our next generation browser will simplify and speed up your browsing experience.
- Thunderbird:
Our next generation standalone e-mail and newsgroup client can be used as a
companion to Mozilla Firefox or by itself. Lightweight, fast,
extensible and featuring sophisticated junk mail filters, Thunderbird
sets a new standard for e-mail software.
We are a software development tools provider
The tools we've built to develop and manage our own
projects power hundreds of open source projects.
- Bugzilla:
the Mozilla bug tracking webtool to help you track progress in fixing
bugs and implementing features that affect your applications.
- Bonsai:
a web interface to the checkin log that you can query for checkins
between certain dates, of certain files, or by certain developers.
- Tinderbox:
our 24/7 build and test webtool that constantly builds, tests, and
reports on the Mozilla application suite on multiple platforms so you
can see the state of the application at any given point in time.
We are an open source community of developers and testers
- The Mozilla project's launch by Netscape in 1998 was
a defining moment for the open source movement. We continue to
be a leader and partner in open source development, providing low cost
and alternative choices for technology. And, with millions of users,
we are one of the largest distributors of open source software.
- We have a large, active
development community that interacts via newsgroups, mailing lists,
IRC channels, and web sites. We welcome
all newcomers.
- Our development takes place in the public eye. See our
development roadmap for the directions our
technology is heading.
- We believe and practice the canons of open source development:
release early and often, listen to your users, and
given enough eyeballs, all bugs are shallow.
We are a partner for the technology industry
- You can join the many companies and organizations
that are using, distributing, and assisting in the development of
Mozilla technologies. Mozilla partners include IBM, Sun Microsystems,
Hewlett Packard, Red Hat and Linspire. Leading enterprises and
large institutions around the world, including numerous universities
and the French Ministry of Agriculture, have already switched to Mozilla.
- We provide a wide variety of information to assist in developing
products based on mozilla:
- Flexible open source licensing conditions.
- Embedding information.
- Configurability and customization information.
A
Client Customization Kit.
- XUL Planet -
Information site for XUL (XML User Interface Language) and
Mozilla XPCOM (Cross-Platform Component Object Model).
- A new project to deploy Mozilla on
small-footprint devices.
Ready to partner with Mozilla or deploy Mozilla in your enterprise or
institution? Check out our
Partners page.
We are an advocate for standards on the Net and provide tools for
developing web standards content
- Mozilla offers
the best implementations of Internet
standards.
- Venkman: a
JavaScript debugger with support for breakpoints, conditional
breakpoints, local variable inspection, watch variables, single step,
stop on error, profile data collection, report generation, code
reformatting (pretty printing), and more.
- DOM Inspector: a
tool for inspecting and editing the structure and widgets of your user
interface while your application is running.
We are educators, providing educational materials about Internet
technologies and software development
- We have developed documentation for
software developers,
web developers and
end-users.
- We have started
a project to develop and improve
knowledge about Mozilla technologies, particularly in the form of
educational material that can be distributed and reused in a variety of
instructional settings.
Want More Information?
Information about the Mozilla Foundation is available on the
Mozilla Foundation page.
More detailed information about the Mozilla
project is available in the Mozilla Developer Documentation's
Introductory Material.
powered by performancing firefox
Saturday, October 28, 2006
Monday, October 16, 2006
Sunday, October 15, 2006
Welcome to Firefox, the new, easy-to-use browser from Mozilla. The producer and provider of the award-winning Firefox web browser and Thunderbird e-mail software.
The mission of the Mozilla project is
to preserve choice and innovation on the Internet.
We are:
- The producer and provider of the award-winning
Firefox web browser and Thunderbird e-mail software.
- A software development tools provider.
- An open source community of developers and testers.
- A partner for the technology industry.
- An advocate for standards on the Net who provides
tools for developing standard web content.
- Educators, providing educational materials about
Internet technologies and software development.
We are leading innovators, developing the next generation of
web browser and e-mail software
"Security, Cool Features Of Firefox Web Browser Beat Microsoft's IE" - Walt
Mossberg, Wall Street Journal
- Mozilla Firefox:
Our next generation browser will simplify and speed up your browsing experience.
- Thunderbird:
Our next generation standalone e-mail and newsgroup client can be used as a
companion to Mozilla Firefox or by itself. Lightweight, fast,
extensible and featuring sophisticated junk mail filters, Thunderbird
sets a new standard for e-mail software.
We are a software development tools provider
The tools we've built to develop and manage our own
projects power hundreds of open source projects.
- Bugzilla:
the Mozilla bug tracking webtool to help you track progress in fixing
bugs and implementing features that affect your applications.
- Bonsai:
a web interface to the checkin log that you can query for checkins
between certain dates, of certain files, or by certain developers.
- Tinderbox:
our 24/7 build and test webtool that constantly builds, tests, and
reports on the Mozilla application suite on multiple platforms so you
can see the state of the application at any given point in time.
We are an open source community of developers and testers
- The Mozilla project's launch by Netscape in 1998 was
a defining moment for the open source movement. We continue to
be a leader and partner in open source development, providing low cost
and alternative choices for technology. And, with millions of users,
we are one of the largest distributors of open source software.
- We have a large, active
development community that interacts via newsgroups, mailing lists,
IRC channels, and web sites. We welcome
all newcomers.
- Our development takes place in the public eye. See our
development roadmap for the directions our
technology is heading.
- We believe and practice the canons of open source development:
release early and often, listen to your users, and
given enough eyeballs, all bugs are shallow.
We are a partner for the technology industry
- You can join the many companies and organizations
that are using, distributing, and assisting in the development of
Mozilla technologies. Mozilla partners include IBM, Sun Microsystems,
Hewlett Packard, Red Hat and Linspire. Leading enterprises and
large institutions around the world, including numerous universities
and the French Ministry of Agriculture, have already switched to Mozilla.
- We provide a wide variety of information to assist in developing
products based on mozilla:
- Flexible open source licensing conditions.
- Embedding information.
- Configurability and customization information.
A
Client Customization Kit.
- XUL Planet -
Information site for XUL (XML User Interface Language) and
Mozilla XPCOM (Cross-Platform Component Object Model).
- A new project to deploy Mozilla on
small-footprint devices.
Ready to partner with Mozilla or deploy Mozilla in your enterprise or
institution? Check out our
Partners page.
We are an advocate for standards on the Net and provide tools for
developing web standards content
- Mozilla offers
the best implementations of Internet
standards.
- Venkman: a
JavaScript debugger with support for breakpoints, conditional
breakpoints, local variable inspection, watch variables, single step,
stop on error, profile data collection, report generation, code
reformatting (pretty printing), and more.
- DOM Inspector: a
tool for inspecting and editing the structure and widgets of your user
interface while your application is running.
We are educators, providing educational materials about Internet
technologies and software development
- We have developed documentation for
software developers,
web developers and
end-users.
- We have started
a project to develop and improve
knowledge about Mozilla technologies, particularly in the form of
educational material that can be distributed and reused in a variety of
instructional settings.
Want More Information?
Information about the Mozilla Foundation is available on the
Mozilla Foundation page.
More detailed information about the Mozilla
project is available in the Mozilla Developer Documentation's
Introductory Material.
powered by performancing firefox
Saturday, October 14, 2006
Friday, October 06, 2006
Thursday, October 05, 2006
Tuesday, October 03, 2006
Tuesday, September 19, 2006
Monday, September 18, 2006
Friday, September 08, 2006
Wednesday, August 30, 2006
Saturday, August 26, 2006
Creating a Theme for PFF 1.3
One of the new features in Performancing Firefox 1.3 allows you to write Addons and Themes. This tutorial will get you started on your first theme for PFF.
1) First, grab the following three themes, and copy them to your hard drive:
2) Open up PFF into a Tab in firefox or flock (right click the toolbar icon and choose to open in tab)
3) Click on the "Settings" nav bar button then the 'Theme' tab
3) Click on the 'Add' button, or drag and drop the .css files onto the tab one by one.
You should then see all 4 themes installed.
4) Select the diferent themes and enable them to see them in action.
5) Decide what theme you would like to start off with. I recommend starting with the 'Template Theme' so you can see what the pff css looks like and what you can modify.
6) Copy the template_theme.css file to a new location and rename it.
For this example I'm calling mine 'mytheme.css'.
7) Open the mytheme.css file in your favorite text editor (Mine is jEdit).
8) Leaving it in the exact format it's in now, change the the following:
You'll notice I only changed the values of '@name', '@Author' and '@desc'
Please change those values and only those values for the time being.
9) Now add the mytheme.css file to the pff theme list (drag and drop or using the 'add' button.
8) Select your theme ("My Theme" in my example) and enable it.
9) Locate your Firefox Profile (see Locate your profile folder)
then go to the performancing\skins\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\ajybcm75.pff\performancing\skins\
10) You should see mytheme.css there now. Close your old version of mytheme.css and open the version from this directory.
You are done, you have now created your first PFF Theme!
The template theme is heavily documented at the begining of the file, however I will go over the basics in details here.
The Requirements:
For a css file to be a PFF Theme, it must contain 7 key information bits.
If you are only going to make minor changes to the theme, like I have in the 'Black' theme, you would want to keep lddef (load default) on, as it will load the default pff theme first, then your custom theme. For example, I will do this in the mytheme.css file as I only want to add some small changes, effectivley overwritting some of the default theme, as opposed to recreating it from scratch.
This is great so that you don't have to re-code every element in pff to get a functional theme.
If however you do want to start from zero set lddef to false.
This is what the 'naked' theme has done. lddef is false and does not have any css at all (empty).
Open it up if you don't believe me :).
So for the sake of this tutorial, lets assume I want to keep the PFF Default theme loaded and I want to make some changes to it.
Finding elements to style
The theme we are editing (Template theme now called 'My Theme'), has the exact code from the default pff theme. It's there for you to look over and get an idea of what is styled, etc.
For this tutorial I am going to remove all the styles from this mytheme.css file and start adding my own css.
Now with PFF in a tab in my firefox browser (right click the toolbar icon and choose to open in tab or type in the url: chrome://performancing/content/editor.xul )
Either hit "Ctrl-Shift-i" or go to "Tools- inspector".
This will launch Firefox's Dom Inspector with PFF as the target
(if you don't have the dom inspector, re-install firefox and select "custom" from the install options and enable the 'Dome inspector' from the tools section.)
Inspect an element
So for this tutorial, I want to change the Navigational button on the left side of PFF.
From the dom inspector window i click on the inspection (
) icon and click on the navbar tab I want to see.
(In the image below, I clicked on the 'editor' tab to inspect it)
So now i see a bunch of very usefull information
In my editor, I paste in the following:
Code:
jEdit Screenshot:
I save the file then hit refresh (
) in firefox (refresh button or F5) and..
... we see the changes live. Wasn't that easy?!
I can do other nifty stuff like:
Now when i hover over a navbar I get this (yeah it's ugly, but it's an example):
I can do other cool stuff from information I get from the dom inspector like say,
any child of the navbar vbox that is a box should have a black background.
code:
result:
Remember, Firefox supports a whole boat load of CSS 1, 2 and 3 features.
So go ahead and use Type selectors, Child Selectors, Descendant Selectors, and all the other goodies. to make your life easier.
Well you have two choices
In my theme, I want to change the insert image toolbar icon (
) with this one 
code:
Done, damn that was easy!
Now, assuming i want to package my theme and give it to someone, I don't want them downloing that image from my server every time they open up PFF.
So let's make a theme package for PFF!
Making a Theme Package
While we are in our theme folder in our profile, it's easy to add local files.
First, for a valid package, we need to create a new folder that has the same name as our .css file
My Theme's file name is mytheme.css, so I create a directory called mytheme\
(..\performancing\skins\mytheme\)
I drop the
Cool. So what does that mean?
It means anything I drop into that directory, all I need to access it is mythemename/someimage.png
You can also have folders inside of there. I might have this for example:
mytheme/ui-images/myicon.png
and all I'd have to do is:
Awesome, but what about the package?
All you have to do is zip up the mytheme.css file with it's corresponding folder.
As an example, my new zip file looks like this:
mytheme.zip
\mytheme.css
\mytheme\insertimage-icon2.png
So to refrase, the requirements for a theme package are;
That's it!
Easy to distribute .css or .zip files for your new PFF theme!
To install your theme and test it out, all you have to do is either drag and drop it onto the Theme settings or use the 'add' button and select the zip file.
Any questions, comments or corrections please post here!
Enjoy
Technorati Tags: performancing, blogger beta, blogger
Getting Started
1) First, grab the following three themes, and copy them to your hard drive:
- Black Theme
- Naked Theme (a.k.a No theme)
- PFF Default Template Theme
2) Open up PFF into a Tab in firefox or flock (right click the toolbar icon and choose to open in tab)
3) Click on the "Settings" nav bar button then the 'Theme' tab
3) Click on the 'Add' button, or drag and drop the .css files onto the tab one by one.
You should then see all 4 themes installed.
4) Select the diferent themes and enable them to see them in action.
5) Decide what theme you would like to start off with. I recommend starting with the 'Template Theme' so you can see what the pff css looks like and what you can modify.
6) Copy the template_theme.css file to a new location and rename it.
For this example I'm calling mine 'mytheme.css'.
7) Open the mytheme.css file in your favorite text editor (Mine is jEdit).
8) Leaving it in the exact format it's in now, change the the following:
####################################
# @type: PFF Skin
####################################
# @name: My Theme
# @author: Jed Brown
# @desc: My First Theme
# @ver: 1.0
# @lddef: true
# @ver: 1.0
# @pffver: 1.3
####################################
You'll notice I only changed the values of '@name', '@Author' and '@desc'
Please change those values and only those values for the time being.
9) Now add the mytheme.css file to the pff theme list (drag and drop or using the 'add' button.
8) Select your theme ("My Theme" in my example) and enable it.
9) Locate your Firefox Profile (see Locate your profile folder)
then go to the performancing\skins\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\ajybcm75.pff\performancing\skins\
10) You should see mytheme.css there now. Close your old version of mytheme.css and open the version from this directory.
You are done, you have now created your first PFF Theme!
Understanding the CSS file
Now that you have the mytheme.css open in your favorite editor, let the fun begin.The template theme is heavily documented at the begining of the file, however I will go over the basics in details here.
The Requirements:
For a css file to be a PFF Theme, it must contain 7 key information bits.
@type - This says it's a pff theme, the value has to be "PFF Theme"
@name- This is the Theme's name (i.e. My Theme)
@author - This is your name (i.e. Jed Brown)
@desc - This a description of the Theme(i.e. My FIrst PFF Theme)
@ver - This the version number (i.e. 1.0)
@lddef - This defines if the default pff theme should be on or not. (defaults to true)
@pffver - Specifies the lowest version of PFF this theme is compatible with.
If you are only going to make minor changes to the theme, like I have in the 'Black' theme, you would want to keep lddef (load default) on, as it will load the default pff theme first, then your custom theme. For example, I will do this in the mytheme.css file as I only want to add some small changes, effectivley overwritting some of the default theme, as opposed to recreating it from scratch.
This is great so that you don't have to re-code every element in pff to get a functional theme.
If however you do want to start from zero set lddef to false.
This is what the 'naked' theme has done. lddef is false and does not have any css at all (empty).
Open it up if you don't believe me :).
So for the sake of this tutorial, lets assume I want to keep the PFF Default theme loaded and I want to make some changes to it.
Finding elements to style
The theme we are editing (Template theme now called 'My Theme'), has the exact code from the default pff theme. It's there for you to look over and get an idea of what is styled, etc.
For this tutorial I am going to remove all the styles from this mytheme.css file and start adding my own css.
Now with PFF in a tab in my firefox browser (right click the toolbar icon and choose to open in tab or type in the url: chrome://performancing/content/editor.xul )
Either hit "Ctrl-Shift-i" or go to "Tools- inspector".
This will launch Firefox's Dom Inspector with PFF as the target
(if you don't have the dom inspector, re-install firefox and select "custom" from the install options and enable the 'Dome inspector' from the tools section.)
Inspect an element
So for this tutorial, I want to change the Navigational button on the left side of PFF.
From the dom inspector window i click on the inspection (
) icon and click on the navbar tab I want to see.(In the image below, I clicked on the 'editor' tab to inspect it)
So now i see a bunch of very usefull information
- The xul:box's parent id is 'performancing-editor-tab'.
- It's class is 'performancing-navbuttons-small'
In my editor, I paste in the following:
Code:
.performancing-navbuttons-small{
font-size: x-small;
color: red;
background-color: blue;
}
jEdit Screenshot:
I save the file then hit refresh (
) in firefox (refresh button or F5) and..... we see the changes live. Wasn't that easy?!
I can do other nifty stuff like:
.performancing-navbuttons-small:hover{
font-size: large;
color: yellow;
background-color: black;
}
Now when i hover over a navbar I get this (yeah it's ugly, but it's an example):
I can do other cool stuff from information I get from the dom inspector like say,
any child of the navbar vbox that is a box should have a black background.
code:
#performancing-navbar-tabs box{
black;
}result:
Remember, Firefox supports a whole boat load of CSS 1, 2 and 3 features.
So go ahead and use Type selectors, Child Selectors, Descendant Selectors, and all the other goodies. to make your life easier.
Using Images in your css file
So, now I showed you how to make a plain jane .css theme for PFF, but what about images?Well you have two choices
- Use urls to an image from a site or your harddrive
- Packed images with your theme
In my theme, I want to change the insert image toolbar icon (
) with this one code:
#image-button{
list-style-image: url('http://performancing.com/files/insertimage-icon2.png');
}
Done, damn that was easy!
Now, assuming i want to package my theme and give it to someone, I don't want them downloing that image from my server every time they open up PFF.
So let's make a theme package for PFF!
Making a Theme Package
While we are in our theme folder in our profile, it's easy to add local files.First, for a valid package, we need to create a new folder that has the same name as our .css file
My Theme's file name is mytheme.css, so I create a directory called mytheme\
(..\performancing\skins\mytheme\)
I drop the
insertimage-icon2.png in there and change mytheme.css to the following:#image-button{
list-style-image: url('mytheme/insertimage-icon2.png');
}Cool. So what does that mean?
It means anything I drop into that directory, all I need to access it is mythemename/someimage.png
You can also have folders inside of there. I might have this for example:
mytheme/ui-images/myicon.png
and all I'd have to do is:
#image-button{
list-style-image: url('mytheme/ui-images/myicon.png');
}Awesome, but what about the package?
All you have to do is zip up the mytheme.css file with it's corresponding folder.
As an example, my new zip file looks like this:
mytheme.zip
\mytheme.css
\mytheme\insertimage-icon2.png
So to refrase, the requirements for a theme package are;
- The .css file name and directory name have to be the same
- Only said .css and directory can be in the parent level
That's it!
Easy to distribute .css or .zip files for your new PFF theme!
To install your theme and test it out, all you have to do is either drag and drop it onto the Theme settings or use the 'add' button and select the zip file.
Any questions, comments or corrections please post here!
Enjoy
powered by performancing firefox
Technorati Tags: performancing, blogger beta, blogger
Creating an Add-on for PFF 1.3
Two of the new features in Performancing Firefox 1.3 allows you to write Addons and Themes. This tutorial will get you started on your first Add-on for PFF.
PFF Addons are basically Firefox extensions tailored for PFF integration, so this tutorial assumes you know a tab bit of XUL, CSS and Javascript.
In reality you can get away with knowing any XUL for the time being and to use this tutorial, and as you go along you'll start to pick it up really easily.
1) First, grab the following two Add-ons for PFF 1.3
2) Drag and drop each .xpi file onto firefox (seperately) and you will be prompted to install the addons as Firefox extension.
3) Restart Firefox and launch pff, then click on the "Settings" nav bar button then the 'Add-ons' tab
3) Enable both of the add-ons by clicking on them, you should see their checkboxe's checked
You have now both installed and enabled your first PFF Add-ons.
The template extension was built to facilitate you for packaging your add-on as a template and as a showcase for the easy api calls in PFF.
Understanding the Template Functionality:
The template add-on has placeholder prompts for events in PFF and placeholder XUL elements for the tab listing and content. We'll explain that a bit more further down.
Add-ons in PFF can have 3 main components
Before looking at the code, let's show what the first two look like,
When you enabled the Template add-on, you saw a prompt stating that the addon was loaded (this is a placeholder) as seen in the image below:
The function that displays this prompt is called everytime pff has loaded.
This is usefull if you need to run some code when PFF starts.
Now that the addon has loaded you will see it under the Addons tab. Note however that the addons tab will only show when you have one or more addons enabled.
The second function call the Template add-on accepts is when the add-on's tab is clicked.
Clicking on the PFF Template tab as shown in the image above will load the add-on's content and fire off a function call that shows us the following prompt:
This aswell is a placeholder so you know where to place any code you want executed when the tab is clicked and the content is shown.
The contet placeholder for the Template looks like this:
This will all make more sense furthur on where we look at the code.
In the example of the Fireftp plugin. We only use #2 and #3,
Since we only care about when the FireFTP tab is clicked, when that function is called we load FireFTP into our content's placeholder effectively giving you an embeded FireFTP.
Template Add-on Content
Now we get into the fun part.
An addon has the following structure
Or the text version would be:
The important bits here are;
Editing the Template add-on
Now that you have installed the template addon, let's modify it to make your own.
First, locate your Firefox Profile (see Locate your profile folder)
then go to the extensions\pffaddontemplate@performancing.com\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\se6t32gw.pff-svn-dev\extensions\pffaddontemplate@performancing.com\
The pffaddontemplate@performancing.com is the unique identifer for the add-on.
In my case I'm going to rename it to myfirstaddon@performancing.com however you can use whatever name you want somename@somedomain.com
In this directory you will find the exact directory structure as I mentioned above.
Now that I've edited this dir to myfirstaddon@performancing.com
I then want to procede by renaming all instances of
pffaddontemplate with myfirstaddon
You can easily do this with jEdit by doing a search and replace and selecting 'directory' as shown in the image below:
Now that I've done that, lets open up the
overlay.js file
( /chrome/content/overlay.js )
This most important part of this file is the following:
This is what defines this Firefox extension as a PFF addon.
It's pretty obvious what each field does. In this example,I've changed mine to look like this:
Now we have a new and working PFF Addon.
Let's open up the overlay.xul file and change the name of the Addon tab.
You'll see the following code:
The only change you need to make here is to the value=""
I've changed mine to looks like this
Optionally you could skip doing this is you did a search and replace for "PFF Template" to "My First".
For kicks, I'm also going to change the words of the content:
From:
To:
Here I changed the name of the 'label' element and added on onclick handler that will prompt us with the words "I clicked it" when you click on the 'This is my first!" text.
If you restart Firefox and re-launch pff, you should now have the following in your add-on's tab:
Clicking on the tab should then give you a similar prompt as the Template add-on and show the following:
Here you can see the prompt that appears when I clicked on the "This is my first!" text
That was easy!
Now let's look at the overlay.js file again, specifically the following functions:
and
In both of these sections, you can remove the alert(....); functions and replace them with your own code. For the FireFTP add-on I just placed a '//foo' where the alert function was in the onPFFLoad function to ignore when pff has loaded as I don't want to run any code then.
In onThisTabClick, I run code that loads fireFTP into an iframe I defined in the overlay.xul file.
Packaging the files for distributing you addon is easy.
Creat a .zip file with the content in your myfirst@... directory and rename your .zip to .xpi so your new XPI should have the following structure:
Depending on what you did with Search and Replace, you will also want to upen up the install.rdf file and edit the entries in there.
Specifically you will want to change the ID, Name, version, description and homepage to reflect your own addon.
As mentioned before PFF Addons are basically Firefox extensions tailored for PFF integration.
To learn more about Firefox Extension development, I'd start with the following links;
PFF Addons are basically Firefox extensions tailored for PFF integration, so this tutorial assumes you know a tab bit of XUL, CSS and Javascript.
In reality you can get away with knowing any XUL for the time being and to use this tutorial, and as you go along you'll start to pick it up really easily.
Getting Started
1) First, grab the following two Add-ons for PFF 1.3
2) Drag and drop each .xpi file onto firefox (seperately) and you will be prompted to install the addons as Firefox extension.
3) Restart Firefox and launch pff, then click on the "Settings" nav bar button then the 'Add-ons' tab
3) Enable both of the add-ons by clicking on them, you should see their checkboxe's checked
You have now both installed and enabled your first PFF Add-ons.
Getting to know the Template Add-on
The template extension was built to facilitate you for packaging your add-on as a template and as a showcase for the easy api calls in PFF.
Understanding the Template Functionality:
The template add-on has placeholder prompts for events in PFF and placeholder XUL elements for the tab listing and content. We'll explain that a bit more further down.
Add-ons in PFF can have 3 main components
- A function call at PFF Startup
- A function call when it's tab is
- Registering with PFF
Before looking at the code, let's show what the first two look like,
When you enabled the Template add-on, you saw a prompt stating that the addon was loaded (this is a placeholder) as seen in the image below:
The function that displays this prompt is called everytime pff has loaded.
This is usefull if you need to run some code when PFF starts.
Now that the addon has loaded you will see it under the Addons tab. Note however that the addons tab will only show when you have one or more addons enabled.
The second function call the Template add-on accepts is when the add-on's tab is clicked.
Clicking on the PFF Template tab as shown in the image above will load the add-on's content and fire off a function call that shows us the following prompt:
This aswell is a placeholder so you know where to place any code you want executed when the tab is clicked and the content is shown.
The contet placeholder for the Template looks like this:
This will all make more sense furthur on where we look at the code.
In the example of the Fireftp plugin. We only use #2 and #3,
Since we only care about when the FireFTP tab is clicked, when that function is called we load FireFTP into our content's placeholder effectively giving you an embeded FireFTP.
Template Add-on Content
Now we get into the fun part.
An addon has the following structure
Or the text version would be:
pffaddontemplate.xpi
/chrome.manifest
/install.rdf
/chrome/
/chrome/content/
/overlay.js
/overlay.xul
/chrome/skin/
/overlay.css
/pffaddontemplate-icon.png
The important bits here are;
- overlay.js -- Where your addon's code will be
- overlay.xul -- the xul (interface) for your addon
- overlay.css -- the css styling for your xul
Editing the Template add-on
Now that you have installed the template addon, let's modify it to make your own.
First, locate your Firefox Profile (see Locate your profile folder)
then go to the extensions\pffaddontemplate@performancing.com\ directory.
i.e. On windows mine looks something like this:
C:\Documents and Settings\Jed\Application Data\Mozilla\Firefox\Profiles\se6t32gw.pff-svn-dev\extensions\pffaddontemplate@performancing.com\
The pffaddontemplate@performancing.com is the unique identifer for the add-on.
In my case I'm going to rename it to myfirstaddon@performancing.com however you can use whatever name you want somename@somedomain.com
In this directory you will find the exact directory structure as I mentioned above.
Now that I've edited this dir to myfirstaddon@performancing.com
I then want to procede by renaming all instances of
pffaddontemplate with myfirstaddon
You can easily do this with jEdit by doing a search and replace and selecting 'directory' as shown in the image below:
Now that I've done that, lets open up the
overlay.js file
( /chrome/content/overlay.js )
This most important part of this file is the following:
var myfirstaddon = {
//Required fields: Change these values to reflect your Add-on
name: "PFF Template Add-on", //Add-on Name
version: "1.0", //Add-on version number
description: "A template add-on for PFF", //Add-on Description
author: "Jed Brown", //Add-on Author
id: "myfirstaddon", //Add-on internal name
pffver: 1.3, //Min PFF version supported
//User fields: add your own
myvariable: "hello" //Make sure the last defined var does not have a trailing ','
}
This is what defines this Firefox extension as a PFF addon.
It's pretty obvious what each field does. In this example,I've changed mine to look like this:
var myfirstaddon = {
//Required fields: Change these values to reflect your Add-on
name: "My First", //Add-on Name
version: "0.5", //Add-on version number
description: "My First PFF Add-on", //Add-on Description
author: "Jed Brown", //Add-on Author
id: "myfirstaddon", //Add-on internal name
pffver: 1.3 //Min PFF version supported
}
Now we have a new and working PFF Addon.
Let's open up the overlay.xul file and change the name of the Addon tab.
You'll see the following code:
The only change you need to make here is to the value=""
I've changed mine to looks like this
Optionally you could skip doing this is you did a search and replace for "PFF Template" to "My First".
For kicks, I'm also going to change the words of the content:
From:
To:
Here I changed the name of the 'label' element and added on onclick handler that will prompt us with the words "I clicked it" when you click on the 'This is my first!" text.
If you restart Firefox and re-launch pff, you should now have the following in your add-on's tab:
Clicking on the tab should then give you a similar prompt as the Template add-on and show the following:
Here you can see the prompt that appears when I clicked on the "This is my first!" text
That was easy!
Now let's look at the overlay.js file again, specifically the following functions:
myfirstaddon.onPFFLoad = function () {
alert("Hello world, its the "+myfirstaddon.name+" addon\n Doing something when PFF loads\n or this addon is enabled!")
}
and
myfirstaddon.onThisTabClick = function () {
alert("Hello world, its the "+myfirstaddon.name+" addon\n Doing something after it's tab was clicked!");
}
In both of these sections, you can remove the alert(....); functions and replace them with your own code. For the FireFTP add-on I just placed a '//foo' where the alert function was in the onPFFLoad function to ignore when pff has loaded as I don't want to run any code then.
In onThisTabClick, I run code that loads fireFTP into an iframe I defined in the overlay.xul file.
Packaging your Add-on files:
Packaging the files for distributing you addon is easy.
Creat a .zip file with the content in your myfirst@... directory and rename your .zip to .xpi so your new XPI should have the following structure:
myfirstaddon.xpi
/chrome.manifest
/install.rdf
/chrome/
/chrome/content/
/overlay.js
/overlay.xul
/chrome/skin/
/overlay.css
/myfirstaddon-icon.png
Depending on what you did with Search and Replace, you will also want to upen up the install.rdf file and edit the entries in there.
Specifically you will want to change the ID, Name, version, description and homepage to reflect your own addon.
More about Extension Writtting
As mentioned before PFF Addons are basically Firefox extensions tailored for PFF integration.
To learn more about Firefox Extension development, I'd start with the following links;
powered by performancing firefox
Testing blogger Beta again
Testing blogger Beta again
Technorati Tags: performancing, blogger, atom
Technorati Tags: performancing, blogger, atom
powered by performancing firefox
Friday, August 25, 2006
Delicoius Test #4
Delicoius Test #4
Technorati Tags: performancing, blogger, beta, atom
Technorati Tags: performancing, blogger, beta, atom
powered by performancing firefox
Delicoius Test #3
Delicoius Test #3
Technorati Tags: performancing, blogger, beta, atom
Technorati Tags: performancing, blogger, beta, atom
powered by performancing firefox
Delicoius Test #2
Delicoius Test #2
Technorati Tags: performancing, blogger, beta, atom
Technorati Tags: performancing, blogger, beta, atom
powered by performancing firefox
Delicious Test
Delicious/ blogger beta test!
Technorati Tags: blogger, performancing
Technorati Tags: blogger, performancing
powered by performancing firefox
Subscribe to:
Comments (Atom)