|
Jan 23rd 2010
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.
<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. |
|
Jan 22nd 2010
Please upgrade your Flash Player
This is the content that would be shown if the user does not have Flash Player 6.0.65 or higher installed. 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 |
About My Awesomeness
Needless to say my Awesomeness is well... Awesome. I'm a Graphic Designer turn Web Designer and Web Developer. My areas of focus are in Drupal and the Flash Platform.
Tweets
| @shauninman You can stop your email issues by stop making great #software :) — 3 days 10 hours ago |
| Drupal performance and scalability case study for Lifetime Digital, one of the largest Drupal sites: http://bit.ly/apWlcy (via @drupal) — 3 days 10 hours ago |
| Someone did a side-by-side video synch of Lost's opening scenes, seasons 1 and 6. Of course someone did. http://bit.ly/9Tv0YP (via @wired) — 3 days 10 hours ago |
| Ahh stress! It could be so simple... but it's not — 3 days 10 hours ago |
| when you become quiet and calm, you will find solutions http://twitpic.com/11ffmt (via @10h30) — 4 days 39 min ago |
- 1 of 31
- ››
Categories
- Wubble (1)
- Web development (1)
- Web Design (2)
- Programming (1)
- Lloyd Conolly (1)
- How to (1)
- Graphic Design (1)
- Game (1)
- Fundraiser (1)
- Freebie (1)
- Flash Builder (1)
- Flash (2)
- Drupal (4)
- Download (1)
- Adobe Air (2)
Archives
- November 2009 (4)
- December 2009 (1)
- January 2010 (3)
