Flex – Playing with Twitter API and solving the cross-domain problem

March 27th, 2009 | Author: Sunny

Today I wrote a small and simple Flex program with Twitter API. Here is my code:


<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundImage="@Embed(source='image/twitter_bg.png')" height="50" width="850" layout="absolute" creationComplete="twitterService.send()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;

[Bindable]
private var Feed:Object;

public function twitterHandler(event:ResultEvent):void {
Feed = event.result.user;
}

]]>
</mx:Script>
<mx:HTTPService id="twitterService" url="proxy.php" result="twitterHandler(event)" />
  <mx:HBox width="800" height="41" verticalCenter="1" x="0" verticalAlign="middle">
  <mx:Spacer x="0" y="0" width="15"/>
  <mx:Image source="@Embed(source='image/twitter_logo_header.png')" width="126" height="25"/>
  <mx:Image source="{Feed.profile_image_url}" width="30" height="30"/>
  <mx:Label text="{Feed.screen_name}" fontSize="16" color="#2896AD" width="83"/>
  <mx:Label text="{Feed.status.text}" width="498" fontSize="12" color="#084755"/>
  </mx:HBox>
  </mx:Application>

and you can see the result here: http://sunnycyk.hk/twitter/

It may look easy, but actually it takes me sometime to figure out how to make it works. The code was working fine in debug mode with Flex, but it did not work on release mode. I was wondering why and searching on internet, and finally figure out it is because of security reason.

There are couple methods you can try, but I just used a easy way to do it by adding a proxy.php file. What proxy.php does just requests data from the remote domain site (for my case, it is “http://twitter.com/users/show/skyc999.xml”), and regenerates the output so that your flash player will think that you are working with a local XML file.

When my flash file runs, it will call proxy.php. Then proxy.php will grab XML file from Twitter, and generate the XML output to my flash file. Because my flash file only calls the local file, it does not voliate the flash player security policy setting, and everything works again!

The proxy.php only contains two line of code:


<?php
$dataURL = "http://twitter.com/users/show/skyc999.xml";
readfile($dataURL);
?>

If you are a twitter user, you can try my program(download it?) and replace the skyc999 in $dataURL with your screen name.

This example just gives a basic idea how to work with cross-domain files and Twitter API. Hope it can help you (and me) :)

Category: Flex | Tags: , | Leave a Comment

WordPress Theme – My header.php

March 24th, 2009 | Author: Sunny

This is code for my header.php:


<?php
  /**
  * @package WordPress
  * @subpackage mySmallProgramTheme
  */
  ?>
  <!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
  <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
  <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
  <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
  <link rel="shortcut icon" href="<?php get_bloginfo('url') ?>/wp-content/themes/mysmallprogramtheme/image/favicon.png" type="image/png" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <?php if (is_singular() ) wp_enqueue_script('comment-reply');
  ?>
  </head>
  <body>
  <div id="page">
  <div id="header">

  <div id="headerimage">
  <a href="<?php echo get_option('home'); ?>" ><h1><?php bloginfo('name'); ?></h1></a>
  <div class="description"><?php bloginfo('description'); ?></div>
  </div>

First, I have setup some header information with bloginfo() in the Header tag. You may just take a look how I did that because you mostly will put the same header as mine.

After the Header Tag, I defined a Wrapper layer “page”


<div id="page">

This is the wrapper for all contents in my blog. In this wrapper, usually you will define four different parts(or layers).

1. Header
2. Content
3. Footer
4. Sidebar

And for this example, this file is called header.php, so I will define our “Header” layer here. Next 5 lines, I have defined my “Header”:


 <div id="header">

  <div id="headerimage">
  <a href="<?php echo get_option('home'); ?>" ><h1><?php bloginfo('name'); ?></h1></a>
  <div class="description"><?php bloginfo('description'); ?></div>
  </div>

In the header layer, I have defined another wrapper called “headerimage”. This is because I want to wrap my Blog title and description in my header layer.

Later on, I will show you how I created index.php for my content layer. footer.php for my footer layer, and sidebar.php for my sidebar layer.

One more thing I forgot to mention, in header section, there is a php code:


 <?php if (is_singular() ) wp_enqueue_script('comment-reply');
  ?>

is_singular() will check if this page is a single post (only one post on the page, and actually there is a template file called single.php that you may also define it yourself or by WordPress default template. single.php is liked index.php which I will call my header, sidebar, and footer files here except it only displays one post per page). In my case, I only want to include javascript for replying a comment when someone land on single.php, or else the code should not be included.

So, it looks pretty simple right? However, don’t forget the code above has no decoration, so you will have to define your own CSS style for each layer and wrapper, or otherwise you will only see plain text on your header.


body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Arial, Helvetica, sans-serif;
	background: #ffffff;
	color: #333;
	text-align: center;

}

#page {
	border: none;
	background:url(image/layoutbg.png) repeat-y bottom center;

}

#header {
	background: url(image/headerpic.jpg) no-repeat top center;
}

#headerimage {
	width: 830px;
	height: 195px;
}

#header h1 {
	font-size:36px;
	text-align: center;
	color: #903;
}

#header a, #header a:visited {
	text-decoration: none;
	color: #903;
}

#header a:hover {
	text-decoration:underline;
}

#headerimage .description {
	font-size:14px;
	text-align: center;
	color: #666;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}

body {
	margin: 0px 0 20px 0;
	padding: 0;
}

#page {
	margin: 0px auto;
	padding: 0;
	width: 830px;
}

#header {
	margin: 0 0 0 0px;
	padding:0;
	height:195px;
	width: 830px;
}

#headerimage {
	margin: 0;
}

#header h1 {
	margin: 0;
	padding:70px 0px 0px 0;
}

#headerimage .description {
	margin: 0;
	padding:1px 15px 0 0;
}


Please forgive my mess. :) I defined them twice because I kinda modified from the default WordPress Theme which it separates the style of structure and coloring in two parts. You may just group them in one depends on what you like.


WordPress Theme – Highlight Plugin

March 12th, 2009 | Author: Sunny

When I was trying to post some PHP coding, I found it is not easy to decorate it.. for example, you want the code to be aligned, so that it is user friendly (easy to read). Then you need to handle space for each line. Also, you may want to highlight some keywords. There will be a lot of work, and some programming languages look really similar, but if you want to decorate them, you may have to do it one by one, and it could suck out most of your time.

Fortunately, WordPress has a plugin that helps you to do all the works for you. It is called Highlight, and you can download it and use it as WordPress plugin or just code it within your HTML file. You only need to assign some CSS style such as color for keywords. This is very nice because usually I like to program everything myself, but this really saves me a lot of time. (On the other hand, many things on the web are really useful).

For example,


<?php
if (is_home()) {
	echo bloginfo('name');
} elseif (is_404()) {
	echo '404 Not Found';
} else {
	echo wp_title('');
}
?>

and my CSS Style (which applies the highlight for the code above and below for showcase):


code {
	color: #000099;
	font: normal "Courier New", Courier, monospace;
	white-space: nowrap;
	padding: 0 2px;
}
pre code {
	display: block;
	clear: both;
	background: #FDF;
	color: #333;
	border: solid 1px #ccc;
	overflow: auto;
	line-height: 140%;
	white-space: pre;
	width: 470px;
	text-align:left;
}
code .comment {
	color: #888;
}
code .class, code .rules {
	color: #ff00ff;
	font-size: 100%;
}
code .value,  code .title, code .string {
	color: #0000FF;
}
code .tag {
	color: #000099;
}
code .keyword {
	color: #000099;
}
.html .attribute {
	color: #006600;
}

All I have done is just put all my code within <pre><code></code></pre> and it will decorate my code with my CSS style. Isn’t it really easy? yea, you can compare my old posts which I just use <p> and style it, and which still doesn’t look good.

One more thing, if you do not want to use it as plugin, you can just put these two lines of code on your web page (The WordPress plugin will automatically add these two lines to your WordPress blog) :


<script type="text/javascript" src="highlight.pack.js"></script>
    <script type="text/javascript">
      hljs.initHighlightingOnLoad();
    </script>

It is pretty easy, right?

For more information about Highlight, you can visit this Link:
http://softwaremaniacs.org/soft/highlight/en/