-
Not Synced
With WebIDE you can create and debug
Web Apps directly inside Firefox
-
Not Synced
To open WebIDE, select WebIDE from the
Web Developer menu
-
Not Synced
Before we make an App, we will
set up a runtime
-
Not Synced
A runtime is an environment in witch
we can run and debug the App
-
Not Synced
It could be a FirefoxOS Phone
connected via USB
-
Not Synced
or a Firefox OS Simulator
running on a desktop
-
Not Synced
In this tutorial we will use a simulator
-
Not Synced
If you don't already have a
simulator installed,
-
Not Synced
You will be asked to install one
-
Not Synced
There are different simulators
for different versionsof Firefox OS
-
Not Synced
You can install as many as you like
-
Not Synced
We just will install one
-
Not Synced
The simulator is big and downloading
can take a minute or more
-
Not Synced
Once the simulator is installed it
appears in the list of runtimes
-
Not Synced
I can open an existing app or
create a new one
-
Not Synced
If I create a new one the WebIDE asks
me to choose a template to use
-
Not Synced
One template inculdes the
minimum needed to get started
-
Not Synced
The other one shows how to use
privileged APIs to load remote content
-
Not Synced
I will choose the second template
-
Not Synced
Choose a name for the app
-
Not Synced
Choose location on disk to keep the files
-
Not Synced
The template includes CSS,
JavaScript, a HTML source.
-
Not Synced
a manifest file, placeholder icons
and localization machinery
-
Not Synced
list left************************************
-
Not Synced
On the right hand side
there is a source editor
-
Not Synced
To run the app select
a runtime and press play
-
Not Synced
To debug the app, the pause button
brings up the Firefox Developer Tools
-
Not Synced
that you can use to exam
and modify the program
-
Not Synced
And experiment with any changes that ***************
-
Not Synced
Back in the editor, I can
make my changes permanent
-
Not Synced
I am going to modify template, so I just place ****************
-
Not Synced
First I will change the title and description
-
Not Synced
Next, ******************** move to placeholder attribute from the search box.
-
Not Synced
Finally, I will update the JavaScript,
so it runs adifferent query
-
Not Synced
*************** JavaScript
-
Not Synced
auto-complete and help
-
Not Synced
Lets run the app.
-
Not Synced
It is not working
-
Not Synced
************ console
-
Not Synced
And it looks if we missing a part ******************
-
Not Synced
********************* build the URL String
-
Not Synced
It looks like ************* needs a trailing slash
-
Not Synced
************ test this out using the console.
-
Not Synced
Now it works
-
Not Synced
So, back in the editor,
fix the code, reload the app
-
Not Synced
And it works properly now
-
Not Synced
This is just a realy quick introdution to
the main features of the WebIDE
-
Not Synced
To learn more, see the docs at
http://developer.mozilla.org/
