My first interview for work, on the national broadcast show, GIS Spotlight. Thanks to Drupal.

The site http://gis.ky was built over a period of 2-3 months, using Drupal. You can see a screengrab of it here. There are many services I have planned that will be coming online soon. It's very exciting the possibilities that Drupal has allowed me to bring in into reality.

I know the video doesn't go into the working of the site, in terms of Drupal and the modules used, but I might do a video or screencast on it. As soon as I get a break from doing the current web project.

The GIS website has;

• Twitter integration ( @caymangovt ) so all posted items are pushed out to twitter
• Facebook integration ( http://www.facebook.com/caymangovinfo ) articles are posted here with a mixture of automation and information officers
• We are using the feedapi to pull in our youtube videos ( CIGovtInfoServices )
• We also have a LIVE streaming video of the government's Press briefings ( Live Press Briefing )

So yes it's been alot of work, tweaking and making sure everything , just worked.

While I was trying to post the article, Adobe Air App: Drupal Jobs I discovered that setting up the Adobe Air installer badge was not that obvious to do in Drupal and that although it might seem to be quite simple, it proved to be quite hard to find any direct and detail guides to solve the problem. So here and now I present to you a guide of how to create a Adobe Air installation badge on your Drupal site.

One of the first things to do is to read these two articles, Getting started with the custom install badge and Using Badger for Adobe AIR applications.

1. First create a folder on your remote web server in the root directory of your website, example: APPS
2. Now create a folder inside APPS for your application, example: EXAMPLE-AIR-APP
3. Now open Badger (created by Grant Skinner) and create the Adobe Air install badge.
4. In Badger press SELECT .AIR FILE, this will automatically fill-in a majority of the fields for you.
5. In Badger make sure to change the APPLICATION URL to reflect where the .air app will be located on your remote web sever, example: http://www.mydomain.com/apps/example-air-app/example-air-app.air.
6. Also do the same for the IMAGE of the installer badge, example: http://www.mydomain.com/apps/example-air-app/example-air-app-badge-image..., the image should be the same size as the settings under BADGE SETTINGS in Badger.
7. Once these key fields are set, you can then press EXPORT BADGE, this will then export the necessary files into a folder of your choice, on your local machine.
8. Go to the folder where you have exported the Air installer badge, transfer all the files excluding the INDEX.HTML file to your remote folder on your server, http://www.mydomain.com/apps/example-air-app/
9. Open INDEX.HTML and copy,

<script type="text/javascript" src="http://www.mydomain.com/apps/example-air-app/swfobject.js"></script>

and copy

<div id="flashcontent" style="width:215px; height:180px;">
		<strong>Please upgrade your Flash Player</strong>
		This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed.
	</div>

	<script type="text/javascript">
		// <![CDATA[
		// version 9.0.115 or greater is required for launching AIR apps.
		
			var so = new SWFObject("http://www.mydomain.com/apps/example-air-app/AIRInstallBadge.swf", "", "215", "180", "9.0.115", "#000000");

		so.addVariable("airversion", "1.5.2");

		so.addVariable("appname", "APP-NAME");

		so.addVariable("appurl", "http://www.mydomain.com/apps/example-air-app/DrupalJobs.air");

		so.addVariable("image", "http://www.mydomain.com/apps/example-air-app/drupal-jobs-badge.jpg");

		so.addVariable("appid", "APP-NAME");

		so.addVariable("appversion", "v1");

		so.addVariable("hidehelp", "true");

		so.addVariable("str_error", "Error1");

		so.write("flashcontent");
		
		// ]]>
	</script>

and paste into a new document pasting them in the order in which they were copied, one after the other.

10. Before the next step make sure, in Drupal that your input filters are setup correctly, we will be using the HTML input filter.
11. Now open a node (or create a new node), and in the Body of the node, paste in the previously created new document of the copied snippets from the INDEX.HTML file.
12. Once this is done, you can save the node, and you should see the Adobe Air installer badge.

Drupal Jobs is a simple Air app that I did that retrieves the latest drupal job listings from drupal.org. It then displays them in a list, where you can click the title and go directly to the relative web link of that particular job. Drupal Jobs uses a simple RSS feed url as the data source, so it only retrieves the default RSS listing.

I would like to add a custom itemRenderer to have a button for the link and also have that button display the job listing instead the Air app instead of opening up in the browser.

I’ve also included the mxml file from Flash Builder so you can use to your hearts content, even though it would be great if you would give me some credit if you do use it. I know it’s nothing spectacular, but it's FREE and I believe a great example of a simple RSS powered app.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/halo" applicationComplete="init()"
					   width="300" height="464" showStatusBar="false">
	
	<fx:Style source="styles.css"/>
	
	<fx:Script>
		<![CDATA[
			import flash.events.Event;
			
			import mx.collections.ArrayCollection;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import flash.net.navigateToURL;
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			
			[Bindable]
			public var jobs:ArrayCollection = new ArrayCollection();
			
			protected function init():void {
				stage.nativeWindow.x = (Capabilities.screenResolutionX - stage.nativeWindow.width) / 2;
				stage.nativeWindow.y = (Capabilities.screenResolutionY - stage.nativeWindow.height) / 2;
				service.send();
				trace("started service");
				refresh.visible = false;
			}

			public function serviceResult(event:ResultEvent):void {
				trace("trying to get results");
				jobs = event.result.rss.channel.item as ArrayCollection;
				trace(jobs);
				refresh.visible = true;
			}
			
			public function serviceFault(event:FaultEvent):void {
				Alert.show('Sorry, there was a problem connecting to the drupal jobs site.', 'Connection Error', 4, this);
				refresh.visible = true;
			}

			public function serviceActive(event:Event):void {
				trace("active service, getting Jobs");
			}
			
			public function getNewJobs():void {
				service.send();
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<s:HTTPService url="http://groups.drupal.org/jobs/feed/feedSubscribeHandler.writeContent();"
					   id="service"
					   activate="serviceActive(event)"
					   result="serviceResult(event)"
					   fault="serviceFault(event)"
					   showBusyCursor="true" />
	</fx:Declarations>
	
	<mx:List styleName="list" id="myList" dataProvider="{jobs}" verticalScrollPolicy="auto" horizontalScrollPolicy="off"
			 borderVisible="false" right="0" left="0" top="43" bottom="29" paddingBottom="0" paddingTop="0" paddingLeft="0">
		<mx:itemRenderer>
			<fx:Component>
				<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingBottom="0" paddingTop="0">
					<fx:Script>
						<![CDATA[
							import flash.net.navigateToURL;

							public function getLink():void
							{
								trace(data.link);
								var urlRequest:URLRequest = new URLRequest(data.link);
								navigateToURL(urlRequest);
							}

						]]>
					</fx:Script>
					<s:Label styleName="titleHeader" text="{data.title}" click="getLink()" buttonMode="true" paddingLeft="15" paddingTop="10" fontSize="15" fontWeight="bold"/>
					<s:Label text="{data.pubDate}" paddingLeft="15"/>
					<mx:HRule width="100%" height="1" strokeColor="#BBBBBB" />
				</mx:VBox>
			</fx:Component>
		</mx:itemRenderer>
	</mx:List>
	<s:Border backgroundColor="#000000" height="31" left="0" bottom="0" right="0">
	<s:Button label="Refresh" id="refresh" click="getNewJobs();" width="70" height="21" left="8" bottom="6"/>
	</s:Border>
	<s:Label x="10" y="10" text="Drupal Jobs" fontSize="24"/>
</s:WindowedApplication>

And here is the Style.css file

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

s|Label {
	roll-over-color: red;
	mouseOver: red;
	selection-color: #C1FFC5;
}

Please let me know what you think, by following me on twitter, @gizmoko