Setup

If not already done :

• Install Firefox
• Install Firebug
• Install FireQuery
• Restart Firefox

Try it!

So, at this point, we have everything we need. Within 30 seconds you will have an overview of what you are able to do with jQuery, and more important, how much it’s easy and accessible (yes, you can).

• Open Firefox, and go to any webpage
• Open Firebug (that little insect at the bottom, or just F12)
• Click “jQuerify” (Console tab) – that will include jQuery in the page without having to declare anything and touch your sources
• Now, use the console (the big blank square often on the right side of the Console panel, or a blank input at the bottom, depending on if you minimize/maximize arrow) to type your jQuery

  jQuery("#logo").slideUp(1000).fadeIn(2000);

• Click Run, you’re done

Congratulations, you just tried jQuery. After that, you can start having fun, and why not, include jQuery in your page to implement some effects and features. There are a lot of good resources on the web and my goal is not to write yet another getting similar tutorial.

Quick note :

I used “jQuery” instead of the traditional and popular “$”, because some websites, like Google, already use $ for their own framewok (or Mootools for example, another javascript framework).

I’d like to show you a simple piece of code for AutoIt. First, you HAVE to know AutoIT, because it’s very simple to develop with, and it’s very useful. The aim of AutoIt is to generate small executable files that help you automatizing tasks, like renaming, processing XSLT on an XML file, etc.

When you install AutoIt, you install the libraries needed to compile the scripts you will develop, and Scite, the integrated text editor based on Scintilla with autocompletion, syntax coloring, compiling options etc. After installing you may want to start a small tutorial to familiarize with the development environment. And you’re lucky, because the AutoIt documentation is very good.

From now, I will assume you have some basic programmation skills, and that you’re familiarized with the environment. So let’s code.

First, we will get the files listed under the folder we explore. (SORRY, NO SYNTAX BRUSH FOR AUTOIT OR AUTOHOTKEY FOR NOW, I’LL HAVE TO CREATE ONE)

#include <Array.au3>
Func getFileList($folderName)
 $fileArray = _FileListToArray($folderName)
 _ArrayDisplay($fileArray)
EndFunc

Yes, it is THAT simple. If you call the function with for example

getFileList(@ScriptDir)

you will get a pop-up that will list all files AND folders under that path (@ScriptDir is just the directory where is your script, you can try with @MyDocumentsDir etc.). So now, what we need is diferentiate folders from files, and then call recursively the function for each folder.
To do that, there’s several solutions. You can for example ask for the size of the file, and if the script throws you an error, you know it’s a folder. But, the best solution might be to retrieve information from the path thanks to the FileGetAttrib function and check if it contains a ‘D’

#include <Array.au3>
#include <File.au3>
Func getFileList($folderName)
 Local $fileArray, $i, $fullFilePath, $fileAttributes

 $fileArray = _FileListToArray($folderName)

 For $i=1 To $fileArray[0]
 $fullFilePath = $folderName & "\" & $fileArray[$i] ;retrieve the full path
 $fileAttributes = FileGetAttrib($fullFilePath)
 If StringInStr($fileAttributes,"D") Then ;folder, have to explore
 ConsoleWrite("FOLDER - " & $fullFilePath & @CRLF)
 getFileList($fullFilePath) ;recursive call
 Else ;file
 ConsoleWrite("FILE - " & $fullFilePath & @CRLF)
 EndIf
 Next
EndFunc

Finally, we come with this piece of code. The files are listed, stored in an array, and returned. Maybe not very useful, but it was a good introduction to AutoIt, isn’t it? This code is not perfect, we should for example verify if the directory we explore is not empty, otherwise the ‘For’ loop would stop with an error.

#include <Array.au3>
#include <File.au3>

Func getFileList($folderName)
 Local $fileArray, $i, $fullFilePath, $fileAttributes
 Local $filePathArray[1]=[0]
$fileArray = _FileListToArray($folderName)

 For $i=1 To $fileArray[0]
  $fullFilePath = $folderName & "\" & $fileArray[$i] ;retrieve the full path
  $fileAttributes = FileGetAttrib($fullFilePath)
  If StringInStr($fileAttributes,"D") Then ;folder, have to explore
   Dim $tempArray = getFileList($fullFilePath) ;recursive call
   _ArrayConcatenate($filePathArray,$tempArray,1) ;add returned results to already found files
  Else ;file
   _ArrayAdd($filePathArray, $fullFilePath) ;add result to already found files
  EndIf
 Next
 $filePathArray[0] = UBound($filePathArray) - 1 ;adjust the size of the array
 Return $filePathArray
EndFunc

Next time we will write that result and some statistics (lines of code, last modified…), with some file type control (image/text etc.), in a text file. It can give you an overview of some statistics of your project quickly. ]]> http://pro.bastien-colmard.com/autoit-small-script-to-list-all-files-in-a-directory-63/feed/ 1 http://pro.bastien-colmard.com/firefox-in-rome-58/ http://pro.bastien-colmard.com/firefox-in-rome-58/#comments Mon, 09 Nov 2009 21:10:43 +0000 Baztoune http://pro.bastien-colmard.com/?p=58 Guys, why have you waited that I leave Rome to do stuff like this? Damn, it’s just f**king good! I like it
For my readers, there’s no photoshop or other related software involved. So those guys took pictures of the Firefox logo in some places of Rome to celebrate the Firefox 5 year anniversary…like on the Colosseum, or spanish steps (Trastevere, and Pyramide too).

Good work! Let’s do it again…everywhere else?

I’m currently at MozCamp in Prague, where we can since this morning, until tomorrow, attend some conferences about Mozil and his future, the Web (yeah, the OPEN Web), HTML5, Firebug, Prism, Weave, advocacy, support, and a lot of things about community.

Everything is going well, and talks are very interesting! Future of Firefox, and generally of Open Web seems promising!

As there are 180 attendees, you can find a lot of information on the internet about this event. But here are the official sources :

• EU MozCamp09 wiki
• EU MozCamp09 flickr
• EU MozCamp09 twitter

And here are some of my photos.

So, thanks Mozilla for the invitation! I’m very glad to be part of the event!

The documentation

I refered to the online documentation of VLC for developers. There are many ways to embed VLC in your application. Basicaly there are 3 main solutions :
-libVLC
-mediaControlAPI
-Javascript API (Mozilla plugin)

After reading the documentation of the two first ones, I was so afraid that I can’t find an effective solution that I decided to give a try to the JavaScript API.

The code

So here is the code to embed : as the “embed” element is a part of the HTML namespace, we have to define it in our code.

<window id="main" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&title;" style="width: 700px; height: 500px;"
persist="screenX screenY width height sizemode">

Then we can include the following piece of code, which is the Mozilla VLC plugin :

<html:embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
width="640"
height="480"
target="file://C:\video.avi"
id="vlc">
</html:embed>

And…here we go! We can now play with the JavaScript API!

var VLCUtils={
openFile : function(){
var vlc = top.document.getElementById("vlc");
var id = vlc.playlist.add("file:///C:/video.avi");
//alert(vlc.versionInfo());
vlc.playlist.playItem(id);
}
};

The most difficult part, the one which made me waste like 2 hours, was to find the good path…and the good format! (“file://” ok let’s try “file:\\\C:/”…). But I think there will be some other problems to fix, like the path (windows/linux/mac), or the fact that the user may not have the Mozilla VLC plugin.

And then?

Now, I have to include a file browser, so I can manage the files, and play it in the embedded VLC player to check if the subtitle file is the good one.

So the good news are that the project is on his way, but the bad news are…I’m currently looking for a job, as you may already know, and I don’t have as much time as I planed to.

See you soon!

As I’m currently ending my training period in Rome, Italy, and as I have a lot of important projects (like, I don’t know…find a job!), I don’t have so much time. But it seems I’m not the only one .

So today, let’s start a XUL application from scratch, in less than 2 minutes.
I work on Windows XP, but the linux way isn’t more difficult as you are familiar to command lines and know how to use a text-editor…

*Option – Install a much more powerfull shell on your windows!

Windows suffers from a lack. The command prompt is so poor…but we will fix it.

So first, I installed Powershell which a very good shell for Windows. You can use the previous command lines from the old shell if you are familiar to it, or the commands from linux! For example, “dir” (windows) and “ls” (linux) will list files and folders in your directory. Furthermore, the features are much more powerfull, such as autocompletion etc.

Set your environment

You can create a folder which will include the xulRunner binaries and your projects sources. We will call it “XULDev”. Then we need to create the project structure

Create the structure of your application

XULRunner has to know some information about your application, the most important is the Gecko supported versions range (Gecko is the rendering engine used by XULRunner).
So, let’s use the Mozilla technology wizzard I spoke about a few weeks ago! That will just make your job easier and faster. You can let the default properties, just to try, and change it later. Don’t worry.
Hit “Create”, unzip in a folder (let’s call it “yourproject”, and…here we are! We have our complete project structure!

Download XULRunner

Yes, we need of course XULRunner. So we just have to download the last version here, and unzip it in a “xulrunner” folder.

• Download XULRunner

Structure overview

XULDev
|-xulrunner
|-xulrunner structure
|-yourProject
|-default project structure (content, chrome, skin…)

Launch!

Open PowerShell, go to the directory we called “XULDev” using the command “cd Path\To\XULDev”.
Tip : in case you don’t know, just try to hit “Tab” key while you type the path to the folder.
Then enter the “xulrunner” directory. Now, just enter this command line
xulrunner.exe “..\yourproject\application.ini”

Using Powershell and the “Tab” autocompletion is very helpful, as in the original command prompt you have to look at slashes/antislashes, quotes etc. Note that Powershell replaces your relative path with an absolute one.

Hack!

Now that we have our example application, all you have to do is to hack! Code, try, read, learn, experiment, re-code, re-try, discuss, share, improve, distribute.

2 minutes wasn’t enough? That’s because you have to practice   Seriously, if you already downloaded xulrunner, and already know how to use the command prompt, then 2 minutes is overmuch.

‘sounds great!

You can, for now, create Firefox and Songbird add-on, an XPCOM component, or even a XUL-based application! The wizzard creates what some of us consider painful, or boring, the architecture of the application/add-on. So, fill in the form, and once you click the “create” button, you’ll get -that’s magic- a beautiful zip file containing all you need to start your project easily!

Go! Go! Go!

So, MMTC students and others, why don’t you give it a try?! That’s…this way :

• Mozilla project wizard

GMail superstars turbo demo

So you need Firefox of course, the Greasemonkey add-on, and the script linked at the end of this post. The GMail “superstars” feature is a labs option, which you can find and enable in the labs part of GMail settings.

After the install, all you have to do to see the result is to “star” an email. You should see the default icon set in action.
The source code is pretty simple and well documented. The script mostly modify the image source, replacing the google picture location by the one encoded in the script with Base64. Everything else just saves your preferences, adds a menu, or imports a custom icon collection. So, yes, you can create your own icon set, upload it on an image hosting service (imageshask, flickr…), then replace the one provided with this script.

You will find more information in the page linked below. Oh, and by the way, I’m proud to say that Lifehacker mentioned it and wrote an article about.

• Script homepage (userscripts)
• Lifehacker article

First mockup of the application

What do you think about it? Even if that won’t fit to your needs, I accept any remark or idea By the way I just found a name for the project “srtSort”, as “srt” is the common file extension of a subtitle file. Sounds good, no?

The next step is to build the XUL structure of the application, and embed this VLC client inside. See you…as soon as I can.

But here is the deal : users care about their privacy, and they don’t want to spend one hour filling a boring form (who would?).

So, here is the Mozilla project, to encourage the users to give their feedback, preserving their privacy and security :

Test Pilot is an idea for a new user testing program for Mozilla Labs that aims to build a 1% representative sample of the Firefox user base for soliciting wide participation and structured feedback for Labs experiments….

You just have to install the add-on Test Pilot. Then you will be asked to participate at some “experiment”, and if you don’t want to, just leave. You could in the near future try some new features, give your feedback about the usability, or test a new Mozilla labs add-on.

• Test pilot project (Mozilla labs)
• Blog posts (2009/08), (2009/01) and (2008/03)