adz08
21 Feb 2008, 7:16 AM
Hi,
I have been experimenting with AIR and Ext and just wanted to throw together a quick bit of code to try and get the Ext window chrome working in air, just like the blog.
All I am doing is trying to load the app, put the chrome on and enter some text from a text file.
I just wanted to see how well the Ext chrome performs with air, but gosh I am having some issue! No matter what i try i end up with just a blue square with the text in it. There is no shadows or anything.
I was just hoping someone may be able to shed a light on what i am doing wrong :-?
Bare with me cuz I am new to both Ext and AIR.
I have the following file structure:
/extair2
/ext-2.0
/.. (all the ext files)
/ext-air
/images
left-corners.png
left-right.png
right-corners.png
top-bottom.png
ext-air.css
ext-air.js
/images
... (loads of images)
AIRAliases.js
application.xml
hello.txt
index.html
Here is what i have in my application.xml
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M6">
<name>extair2</name>
<id>com.testing.extair2</id>
<version>1.0</version>
<filename>extair2</filename>
<initialWindow>
<title>extair2</title>
<width>400</width>
<height>400</height>
<content>index.html</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>
</initialWindow>
</application>
here is my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>extair2</title>
<!-- Java scripts for ExtJS + AIR -->
<script src="AIRAliases.js" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/xtheme-aero.css" />
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="ext-air/ext-air.js"></script>
<link rel="stylesheet" type="text/css" href="ext-air/ext-air.css" />
<!-- end -->
<script language="javascript">
Ext.BLANK_IMAGE_URL = 'images/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
air.trace("Done cmd Ext.QuickTips.init();");
if(Ext.isAir){
air.trace("Creating the AIR main window..");
var win = new Ext.air.MainWindow({
layout:'border',
title: 'Simple Tasks',
iconCls: 'icon-show-all'
}).render();
air.trace("..done");
}else{
var viewport = new Ext.Viewport({
layout:'border'
});
}
});
</script>
<script language="javascript">
function appLoad() {
var textFile = new air.File("app:/hello.txt");
if (textFile.exists) {
air.trace("Loading hello.txt");
var textRead = new air.FileStream();
textRead.open(textFile, air.FileMode.READ);
if (textRead.bytesAvailable > 0) {
var textContents = textRead.readUTFBytes(textRead.bytesAvailable);
textRead.close();
air.trace("hello.txt:\n" + textContents);
var mainDiv = document.getElementById('main');
var paragraph = document.createElement('p');
var textNode = document.createTextNode(textContents);
paragraph.appendChild(textNode);
mainDiv.appendChild(paragraph);
} else {
air.trace("hello.txt is empty");
}
} else {
air.trace("hello.txt does not exist");
}
}
</script>
</head>
<body onload="appLoad();">
<div id="main"></div>
</body>
</html>
When i run this using the ADL i get the following errors:
TypeError: Undefined value
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11326
at app:/ext-2.0/ext-all.js : 11288
at app:/ext-2.0/ext-all.js : 11191
at app:/ext-2.0/ext-all.js : 10071
at app:/ext-2.0/ext-all.js : 10771
at app:/ext-2.0/ext-all.js : 11139
at app:/ext-2.0/adapter/ext/ext-base.js : 128
at app:/index.html : 35
at app:/index.html : 35
at app:/index.html : 33
at app:/ext-2.0/ext-all.js : 1259
at app:/ext-2.0/ext-all.js : 1259
at app:/ext-2.0/ext-all.js : 1292
at app:/ext-2.0/adapter/ext/ext-base.js : 736
at app:/ext-2.0/adapter/ext/ext-base.js : 736
undefined at undefined : undefined
Any one know what i am doing wrong?
Thanks,
Adam
I have been experimenting with AIR and Ext and just wanted to throw together a quick bit of code to try and get the Ext window chrome working in air, just like the blog.
All I am doing is trying to load the app, put the chrome on and enter some text from a text file.
I just wanted to see how well the Ext chrome performs with air, but gosh I am having some issue! No matter what i try i end up with just a blue square with the text in it. There is no shadows or anything.
I was just hoping someone may be able to shed a light on what i am doing wrong :-?
Bare with me cuz I am new to both Ext and AIR.
I have the following file structure:
/extair2
/ext-2.0
/.. (all the ext files)
/ext-air
/images
left-corners.png
left-right.png
right-corners.png
top-bottom.png
ext-air.css
ext-air.js
/images
... (loads of images)
AIRAliases.js
application.xml
hello.txt
index.html
Here is what i have in my application.xml
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M6">
<name>extair2</name>
<id>com.testing.extair2</id>
<version>1.0</version>
<filename>extair2</filename>
<initialWindow>
<title>extair2</title>
<width>400</width>
<height>400</height>
<content>index.html</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>
</initialWindow>
</application>
here is my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>extair2</title>
<!-- Java scripts for ExtJS + AIR -->
<script src="AIRAliases.js" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/xtheme-aero.css" />
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="ext-air/ext-air.js"></script>
<link rel="stylesheet" type="text/css" href="ext-air/ext-air.css" />
<!-- end -->
<script language="javascript">
Ext.BLANK_IMAGE_URL = 'images/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
air.trace("Done cmd Ext.QuickTips.init();");
if(Ext.isAir){
air.trace("Creating the AIR main window..");
var win = new Ext.air.MainWindow({
layout:'border',
title: 'Simple Tasks',
iconCls: 'icon-show-all'
}).render();
air.trace("..done");
}else{
var viewport = new Ext.Viewport({
layout:'border'
});
}
});
</script>
<script language="javascript">
function appLoad() {
var textFile = new air.File("app:/hello.txt");
if (textFile.exists) {
air.trace("Loading hello.txt");
var textRead = new air.FileStream();
textRead.open(textFile, air.FileMode.READ);
if (textRead.bytesAvailable > 0) {
var textContents = textRead.readUTFBytes(textRead.bytesAvailable);
textRead.close();
air.trace("hello.txt:\n" + textContents);
var mainDiv = document.getElementById('main');
var paragraph = document.createElement('p');
var textNode = document.createTextNode(textContents);
paragraph.appendChild(textNode);
mainDiv.appendChild(paragraph);
} else {
air.trace("hello.txt is empty");
}
} else {
air.trace("hello.txt does not exist");
}
}
</script>
</head>
<body onload="appLoad();">
<div id="main"></div>
</body>
</html>
When i run this using the ADL i get the following errors:
TypeError: Undefined value
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11574
at app:/ext-2.0/ext-all.js : 11326
at app:/ext-2.0/ext-all.js : 11288
at app:/ext-2.0/ext-all.js : 11191
at app:/ext-2.0/ext-all.js : 10071
at app:/ext-2.0/ext-all.js : 10771
at app:/ext-2.0/ext-all.js : 11139
at app:/ext-2.0/adapter/ext/ext-base.js : 128
at app:/index.html : 35
at app:/index.html : 35
at app:/index.html : 33
at app:/ext-2.0/ext-all.js : 1259
at app:/ext-2.0/ext-all.js : 1259
at app:/ext-2.0/ext-all.js : 1292
at app:/ext-2.0/adapter/ext/ext-base.js : 736
at app:/ext-2.0/adapter/ext/ext-base.js : 736
undefined at undefined : undefined
Any one know what i am doing wrong?
Thanks,
Adam