Archive for 2010
Quick Tip: Bypass Apple Mail automatic account detection
I personally don’t like using automatic setup wizards when creating email accounts in my mail client, and in Mac OS X 10.6 Snow Leopard, Apple have decided to remove the checkbox from Apple Mail that allows you to bypass the automated setup of accounts. In the case of my work Exchange mail account, this actually prevented me from setting up my mail account, as it was detecting the incorrect mail server address and failing each time. You’d think that at least if the auto-setup fails it would give you a manual failsafe, but alas, no.
After some rooting around the Web, I discovered that if you hold down the “Option” (alt) key when pressing the “Continue” button on the first page of the Account Setup wizard, it will bypass the auto-discovery step and ask you for the server details to be input manually.
Flex and JavaScript
I’m currently working on a Web application project that is primarily coded in JavaScript. As part of the project however, I needed to use a Flex component for part of the application. I would also need a series of components (search boxes, trees and grids) to interact with this component. At first, it seemed to make sense to do all of this in Flex. However, when it comes to client-side development, we’re primarily a JavaScript shop, and would prefer to keep the amount of Flex we write to a minimum. Also, from a styling perspective, our existing JavaScript components would fit in better with our overall application, so it made much more sense for us to use them rather than Flex’s trees, grids and so on. Of course, this raised a problem – how do we communicate between JavaScript and Flex?
Fortunately, this is actually very straightforward. To prove the concept, I decided to write up a basic application that would allow you to pass messages between Flex and JavaScript components and output them on the screen. Here is a screenshot of this application in action (click for a larger image):
Sample Project in action
So on the left hand side of the application, there is a standard HTML input field, button element and a read-only textarea element. The input field will allow the user to write a message to be passed to the Flex application, which gets sent when the user clicks the “Send to Flex” button. The textarea field will be updated with any messages that are sent to JavaScript by Flex. On the right-hand-side, you have the same thing, but this time it will allow you to enter a message to send to JavaScript from Flex, and has an area where messages sent by JavaScript to Flex will be shown.
Let’s walk through how I did this. It’s worth pointing out at this point that I used Flash Builder 4 and the Flex 4 SDK to create this application. If you have a different setup, you may need to change your code to suit your version.
In Flash Builder, create a new Flex Project, and call it TestJSFlex. Let’s start off with the Flex application interface. You can use the Design view if you wish, but for a simple application like this, it’s fairly straightforward to create everything in code. Just before the closing </s:Application> tag in your source code, add the following three lines of code:
<s:TextInput x="2" y="2" width="310" id="flexInput"/> <s:Button x="320" y="3" width="100" label="Send to JS" /> <s:TextArea x="2" y="32" width="416" height="200" id="flexMessages" editable="false"/>
While you’re at it, add the following attributes to your opening <s:Application> element:
width="440" height="255"
That’s our Flex application user interface done. Pretty simple, huh? Next, let’s change the HTML template that Flash Builder produces to add some basic HTML elements for the JavaScript side of our application to use. In “Package Explorer” (usually at the top left hand side of Flash Builder), your project folder should contain a few subfolders: src, Flex 4.0, bin-debug, html-template and libs. Expand the html-template folder and you should see a file named index.template.html. Right-click this file, and from the context menu select “Open With -> Text Editor”. The file should now open in a new editor tab in the main part of the IDE. In this file, locate the following section of HTML code:
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" :Â "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>
This is basically the element where the Flex application will appear on the HTML page. We’re going to wrap it in a <div> container and add a section before it with a HTML form:
<div id="container">
<h1>Flex and JavaScript</h1>
<div class="section">
<h2>JavaScript:</h2>
<input type="text" id="js_value" />
<input type="button" id="js_button" value="Send to Flex" />
<br />
<textarea id="js_messages" readonly></textarea>
</div>
<div class="section clearfix">
<h2>Flex:</h2>
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" :Â Â Â "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>
</div>
</div>
In the code above, we have added a few HTML form elements: a text field with the ID js_value, a button with the ID js_button and a read-only textarea with the ID js_messages. To make the whole thing look right, we’re going to add some CSS properties which will define the layout and size of the elements. In index.template.html, locate the CSS section of the code near the top of the file, which by default should contain:
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
#container { width: 900px; margin: 0px auto; text-align: left; }
#flashContent { display:none; }
</style>
Modify this so that it contains:
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
#container { width: 900px; margin: 0px auto; text-align: left; }
#flashContent { display:none; }
h1, h2 { font-family: Helvetica, Arial, sans-serif; }
h2 { margin-top: 0px; }
.section { width: 450px; float: left; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#js_value { width: 310px; }
#js_button { width: 100px; }
#js_messages { width: 416px; height: 195px; margin-top: 8px; }
</style>
The CSS properties should be fairly self-explanatory. Basically, we have a container div 900 pixels wide, with two 450px sections inside it that appear side by side (using the float property), with a clearfix put in place so everything looks right in older browsers (just a note – I haven’t checked if this looks OK in anything other than Firefox 3.6, so don’t flame me if it doesn’t). Finally, we add some widths and heights to the form fields so they match up nicely with the Flex components.
That’s the UI section of the application taken care of. Next, let’s actually make Flex and JavaScript talk to each other. First, let’s get Flex talking to JavaScript. In the TestJSFlex.mxml file, just above where you entered the <s:TextInput> and other components a while back, add the following code:
<fx:Script>
<![CDATA[
public function sendToJS():void {
ExternalInterface.call("receiveFromFlex", flexInput.text);
}
]]>
</fx:Script>
This script block simply defines a single function named sendToJS. This function uses the ExternalInterface.call function to call a JavaScript function. The first parameter here is the name of the JavaScript function you want to call, in our case receiveFromFlex, and this is followed by any parameters you want to pass to JavaScript. Here, we have simply passed the current value of the text property of our text box with the id flexInput. Next, find the following line of code near the bottom of TestJSFlex.mxml:
<s:Button x="320" y="3" width="100" label="Send to JS" />
Let’s add a click event handler to this button, which will call the sendToJS function any time a user presses the button:
<s:Button x="320" y="3" width="100" label="Send to JS" click="sendToJS()" />
That’s everything that we need to do on the Flex side to call a JavaScript function. Of course, this is pretty much useless unless we actually declare the JavaScript function it is trying to call, so let’s hop over to index.template.html and create that now. Just before the closing </head> tag in this file, add the following code:
<script type="text/javascript">
function receiveFromFlex(str) {
var msgs = document.getElementById("js_messages");
msgs.value += 'Flex says: '+str+'\n';
}
</script>
This function simply accepts a string value as a parameter, and appends it (followed by a new line) to the element with the ID js_messages (the textarea element). Save all your files and run the application by pressing the green Play/Run button in the Flash Builder toolbar. At this point, you should be able to enter a message in the input box on the right hand side (the Flex side) and hit “Send to JS”. This message should then appear on the left hand side. That was pretty easy, huh? Ok, now all that’s left for us to do is implement the reverse scenario – sending messages from JavaScript to Flex.
In the previous section, you created a <script> block in the index.template.html file. Inside this block, just below the receiveFromFlex function, add the following code:
function sendToFlex() {
var flexApp = document.getElementById("${application}");
flexApp.sendToFlex(document.getElementById("js_value").value);
}
window.onload = function() {
var btn = document.getElementById("js_button");
btn.onclick = sendToFlex;
}
The first function, sendToFlex, gets a handle to the Flex application object using document.getElementById. You’ll notice that the ${application} template variable is used. This is recommended so that if you change the name of your Flex application, you won’t need to change the value in your template file. The function then calls the sendToFlex function in the Flex application object. Finally, we attach this function as an event handler to the HTML button element with the ID js_button. That’s it on the JavaScript side of things. Save index.template.html and jump back to TestJSFlex.mxml. Now, let’s add the code necessary to handle this on the Flex side of things. Inside the <fx:Script> block, below the sendToJS function, add the following two functions:
public function initApp():void {
ExternalInterface.addCallback("sendToFlex", receiveFromJS);
}
public function receiveFromJS(str:String):void {
flexMessages.text += 'JS says: '+str+'\n';
}
The first function, initApp, uses the ExternalInterface.addCallback function to map a JavaScript function to a Flex function. Here, we tell the sendToFlex JavaScript function callback to execute the Flex function named receiveFromJS. This function accepts a String parameter and appends it to the <s:TextArea> element followed by a newline. The final piece of the puzzle is to wire up the initApp function to be called when the Flex application has finished loading. In your <s:Application> element, add the attribute
creationComplete="initApp()"
and you’re done! You can now run the application and enter messages in the HTML input field, which will appear in the Flex message box when you hit “Send to Flex”. Easy as pie! For reference purposes, here are the full listings for the two source files we’ve worked with in this post.
TestJSFlex.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="440" height="255"
creationComplete="initApp()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
public function sendToJS():void {
ExternalInterface.call("receiveFromFlex", flexInput.text);
}
public function initApp():void {
ExternalInterface.addCallback("sendToFlex", receiveFromJS);
}
public function receiveFromJS(str:String):void {
flexMessages.text += 'JS says: '+str+'\n';
}
]]>
</fx:Script>
<s:TextInput x="2" y="2" width="310" id="flexInput"/>
<s:Button x="320" y="3" width="100" label="Send to JS" click="sendToJS()" />
<s:TextArea x="2" y="32" width="416" height="200" id="flexMessages" editable="false"/>
</s:Application>
index.template.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!--
Smart developers always View Source.
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.
Learn more about Flex at http://flex.org
// -->
<head>
<title>${title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
the percentage of the height of its parent container, which has to be set explicitly. Initially,
don't display flashContent div so it won't show if JavaScript disabled.
-->
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; background-color: ${bgcolor}; }
#container { width: 900px; margin: 0px auto; text-align: left; }
#flashContent { display:none; }
h1, h2 { font-family: Helvetica, Arial, sans-serif; }
h2 { margin-top: 0px; }
.section { width: 450px; float: left; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#js_value { width: 310px; }
#js_button { width: 100px; }
#js_messages { width: 416px; height: 195px; margin-top: 8px; }
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
<!-- BEGIN Browser History required section ${useBrowserHistory}>
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!${useBrowserHistory} END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
<!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "${application}";
attributes.name = "${application}";
attributes.align = "middle";
swfobject.embedSWF(
"${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
<!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
<script type="text/javascript">
function receiveFromFlex(str) {
var msgs = document.getElementById("js_messages");
msgs.value += 'Flex says: '+str+'\n';
}
function sendToFlex() {
var flexApp = document.getElementById("${application}");
flexApp.sendToFlex(document.getElementById("js_value").value);
}
window.onload = function() {
var btn = document.getElementById("js_button");
btn.onclick = sendToFlex;
}
</script>
</head>
<body>
<!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
when JavaScript is disabled.
-->
<div id="container">
<h1>Flex and JavaScript</h1>
<div class="section">
<h2>JavaScript:</h2>
<input type="text" id="js_value" />
<input type="button" id="js_button" value="Send to Flex" />
<br />
<textarea id="js_messages" readonly></textarea>
</div>
<div class="section clearfix">
<h2>Flex:</h2>
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" :Â Â Â "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>
</div>
</div>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
<param name="movie" value="${swf}.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
${version_major}.${version_minor}.${version_revision} or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>
If you’d prefer to just take the sample Flex project, you can download a zip file of it below:
Build Ext JS extensions and plug-ins
Ext JS is a comprehensive JavaScript framework that includes a vast collection of features, including cross-browser-compatible JavaScript helper utilities for DOM traversal and manipulation and data object stores. It also handles Ajax and direct web remoting, has an impressive collection of UI controls and widgets, charts and graphs, a powerful data grid control, and much, much more.
When developing applications using Ext JS, or indeed any JavaScript library or framework, you can be sure that you are going to need functionality that isn’t included out-of-the-box, or is present but doesn’t work quite the way you want it to. Thankfully, Ext JS includes a powerful class and component ecosystem that makes it easy to extend existing features or build new components entirely. In this article, we will explore this extensibility, specifically looking at the concepts of extensions and plug-ins. You will learn what each of these concepts means and what is different between the two. You will then see how to build your own extensions and plug-ins and how to source existing plug-ins built by other developers for use in your own applications, saving you from reinventing the wheel.
Read this article on IBM developerWorks at http://www.ibm.com/developerworks/library/wa-extjs/
Oracle XE Gateway Debug Mode
When developing Web applications using Oracle XE and the embedded PL/SQL gateway, you may find that debugging is a pain due to the lack of log files (like you’d normally find in Apache folders in a full Oracle application server install). Well, the good news is, that you can configure errors to be reported directly in the browser, so that rather than getting very unhelpful 404 and other HTTP error messages, you get a full debug trace of the error that occurred. Full credit for this find goes to Dietmar Aust, who has a great blog on Oracle XE and Application Express. See his original post for even more insight into this.
To switch on error reporting and the printing of debug messages to the browser, simply issue the following commands. Of course, be sure to replace “embosa” on line 3 with your own DAD name. Also, be sure to turn this back off again in a production environment, this should only be used for development and testing purposes.
begin
dbms_epg.set_global_attribute('log-level', 3);
dbms_epg.set_dad_attribute('embosa', 'error-style', 'DebugStyle');
end;
/
To test, simply go to a URL that doesn’t exist, and you should see a useful error message instead of a unhelpful “Not Found” message. See the screenshot below for an example of what this error message looks like.
Useful PL/SQL error message
A guide to writing unobtrusive JavaScript and Ajax
(This article was published on IBM developerWorks in November 2010)
When writing JavaScript and Asynchronous JavaScript + XML (Ajax) applications, it is all too easy to focus on the interactive features they have to offer, while forgetting about the basic fundamentals of web application development. It is important to write JavaScript and Ajax applications in an unobtrusive manner for a number of reasons. First, doing so lets you keep the logic of the application separate from your content, making it easier to maintain your applications going forward. Additionally, it lets you ensure that your application behaves consistently across various platforms and web browsers in its most basic form, resulting in you only needing to worry about this issue when you add in the JavaScript and Ajax features. Most importantly, perhaps, is that developing web applications in this manner means that you are following the idea of progressive enhancement, meaning that your application will support users who are using browsers that do not support JavaScript or particular JavaScript features (including Ajax). If you have been writing JavaScript applications in an obtrusive manner up until now, this article will help you discover the best practices that allow you to create web applications that work for everybody, while providing all the bells and whistles to those users who can use them.
The term unobtrusive JavaScript has a relatively loose definition, but is generally accepted as being the process of creating web pages and applications using a collection of good programming practices. These include the following:
- Keeping separate the JavaScript, CSS, and HTML elements of your application
- Using JavaScript to progressively enhance your application—don’t use JavaScript for core functions
- Maintaining your code structure in such a way that reduces repetition, is better organized, and is easier to read and maintain.
- Adhering to web and accessibility standards
Not only is it good practice to develop this way, but it also ensures that your application will work for a wide range of audiences using different web browsers and devices, even those with limited capabilities. Applications built in this fashion are also generally better organized and structured, perform faster, and are less prone to bugs.
In this article, you’ll see how the presentation, style, and behavior layers of your application should be kept separate, with the goal of using no inline CSS or JavaScript event handling. You will also see some examples of obtrusive JavaScript code, and discover the attributes that they have that are considered to be poor programming practice. You will then learn how to correct these issues, writing the same code in an unobtrusive way, with guidelines on some best practices for this style of development. Ajax applications, in particular, are dangerous grounds for unobtrusive code. Just because your application has a rich Ajax interface does not mean that you cannot add this code in a progressively enhancing manner. You will learn how to approach Ajax functions in a way that will provide a fallback for users who cannot take advantage of the fluidity your Ajax features have to offer. Finally, you will see a detailed example of an application that provides dynamic Ajax loading that still works even with JavaScript switched off.
Read the article on IBM developerWorks in English only.
