Titanium is not defined when attempting Titanium.UI.currentWindow using titanium appcelerator

When I run the app on the device I get no error (well nothing occurs at all) as there is no debug console but when I run the app in the browser I get "Titanium is not defined"

Is there a js file I need to include?

I got the camera code from here: http://www.mindfiresolutions.com/Capture-Image-with-device-camera-in-IPhoneAndroid-application-using-Titanium-1912.php

I call it from an html file from webview.

I created a new project from scratch and I get he same error. This is so frustrating:

in html:

<!doctype html>
<html lang="en">
    <head>

        <meta name="viewport" content="width=device-width;initial-scale=1.0 maximum-scale=1.0; user scalable=0;">

        <title>Notes</title>

        <script language="JavaScript" type="text/javascript">
            function play(locid) {
                Ti.App.fireEvent('play', {
                    locid : locid
                });
            }
        </script>

    </head>
    <body>

        <a id="Home" onclick ="play(125)" title = "" > hello </a>

    </body>

</html>

in app.js:

Ti.App.addEventListener('play', function(e) 
{ 
    alert(e.locid);

});

Uncaught ReferenceError: Ti is not defined in the HTML file!!!

Solution

That code has a number of things preventing it from working as a standalone app.js. I want to address a couple of the concerns brought up by it, and then I'll directly address the app.js so you can get on your way.

First, "Ti.UI.currentWindow" is how you get a reference to a window in a situation like this:

In the file "app.js", you have:

var win = Ti.UI.createWindow({
    url: 'win.js'
});
win.open();

And in "win.js", you have:

var win = Ti.UI.currentWindow;
win.add(Ti.UI.createLabel({
    text: 'Hello, world!', textAlign: 'center',
    color: '#000'
}));

But structuring your apps like that isn't the recommended approach anymore. If you're starting fresh, start right -- with Alloy. http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Quick_Start

If all you really care about is getting the example to work, below is the code updated to work:

//Define the current window
var myWin = Ti.UI.createWindow({
    backgroundColor: 'white'
});

//Define the button to activate camera
var cameraBtn = Ti.UI.createButton({
    title: 'Click to activate Camera',
    top: 10 //Set the button position on the screen
});

cameraBtn.addEventListener('click', function () {

    //Activate camera
    Ti.Media.showCamera({
        success: function (event) {

            //Holds the captured image
            var capturedImg = event.media;

            // Condition to check the selected media
            if (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {

                //Define an image view with captured image
                var imgView = Ti.UI.createImageView({
                    left: 10,
                    width: 250,
                    height: 250,
                    image: capturedImg   //Set captured image
                });

                //Add the image to window for displaying
                myWin.add(imgView);
            }
        },
        cancel: function () {
            //While cancellation of the process
        },
        error: function (error) {
            // If any error occurs during the process

        }
    });
});

myWin.add(cameraBtn);
myWin.open();