WEBVTT

99:59:59.999 --> 99:59:59.999
With WebIDE you can create and debug
Web Apps directly inside Firefox

99:59:59.999 --> 99:59:59.999
To open WebIDE, select WebIDE from the
Web Developer menu

99:59:59.999 --> 99:59:59.999
Before we make an App, we will
set up a runtime

99:59:59.999 --> 99:59:59.999
A runtime is an environment in witch
we can run and debug the App

99:59:59.999 --> 99:59:59.999
It could be a FirefoxOS Phone
connected via USB

99:59:59.999 --> 99:59:59.999
or a Firefox OS Simulator
running on a desktop

99:59:59.999 --> 99:59:59.999
In this tutorial we will use a simulator

99:59:59.999 --> 99:59:59.999
If you don't already have a
simulator installed,

99:59:59.999 --> 99:59:59.999
You will be asked to install one

99:59:59.999 --> 99:59:59.999
There are different simulators
for different versionsof Firefox OS

99:59:59.999 --> 99:59:59.999
You can install as many as you like

99:59:59.999 --> 99:59:59.999
We just will install one

99:59:59.999 --> 99:59:59.999
The simulator is big and downloading
can take a minute or more

99:59:59.999 --> 99:59:59.999
Once the simulator is installed it
appears in the list of runtimes

99:59:59.999 --> 99:59:59.999
I can open an existing app or
create a new one

99:59:59.999 --> 99:59:59.999
If I create a new one the WebIDE asks
me to choose a template to use

99:59:59.999 --> 99:59:59.999
One template inculdes the
minimum needed to get started

99:59:59.999 --> 99:59:59.999
The other one shows how to use
privileged APIs to load remote content

99:59:59.999 --> 99:59:59.999
I will choose the second template

99:59:59.999 --> 99:59:59.999
Choose a name for the app

99:59:59.999 --> 99:59:59.999
Choose location on disk to keep the files

99:59:59.999 --> 99:59:59.999
The template includes CSS,
JavaScript, a HTML source.

99:59:59.999 --> 99:59:59.999
a manifest file, placeholder icons
and localization machinery

99:59:59.999 --> 99:59:59.999
list left************************************

99:59:59.999 --> 99:59:59.999
On the right hand side
there is a source editor

99:59:59.999 --> 99:59:59.999
To run the app select
a runtime and press play

99:59:59.999 --> 99:59:59.999
To debug the app, the pause button
brings up the Firefox Developer Tools

99:59:59.999 --> 99:59:59.999
that you can use to exam
and modify the program

99:59:59.999 --> 99:59:59.999
And experiment with any changes that ***************

99:59:59.999 --> 99:59:59.999
Back in the editor, I can
make my changes permanent

99:59:59.999 --> 99:59:59.999
I am going to modify template, so I just place ****************

99:59:59.999 --> 99:59:59.999
First I will change the title and description

99:59:59.999 --> 99:59:59.999
Next, ******************** move to placeholder attribute from the search box.

99:59:59.999 --> 99:59:59.999
Finally, I will update the JavaScript,
so it runs adifferent query

99:59:59.999 --> 99:59:59.999
*************** JavaScript

99:59:59.999 --> 99:59:59.999
auto-complete and help

99:59:59.999 --> 99:59:59.999
Lets run the app.

99:59:59.999 --> 99:59:59.999
It is not working

99:59:59.999 --> 99:59:59.999
************ console

99:59:59.999 --> 99:59:59.999
And it looks if we missing a part ******************

99:59:59.999 --> 99:59:59.999
********************* build the URL String

99:59:59.999 --> 99:59:59.999
It looks like ************* needs a trailing slash

99:59:59.999 --> 99:59:59.999
************ test this out using the console.

99:59:59.999 --> 99:59:59.999
Now it works

99:59:59.999 --> 99:59:59.999
So, back in the editor,
fix the code, reload the app

99:59:59.999 --> 99:59:59.999
And it works properly now

99:59:59.999 --> 99:59:59.999
This is just a realy quick introdution to
the main features of the WebIDE

99:59:59.999 --> 99:59:59.999
To learn more, see the docs at
http://developer.mozilla.org/