Sunday, September 25, 2011

Flash/Flex: Changing the colors of the hyperlinks of a body text

I had figured out a simple solution for changing the colors of your hyperlinks in a body text a few weeks ago. Hence I decided to share it in the post. On top of that, the demos that I had shown in this post also demonstrate the use of the TextEvent.LINK Event which can be very useful also. :D

Here's a simple AS3 Actionscript Class file that contains a simple Stylesheet for setting the properties of the default and the hover state of the hyperlinks. I have created this file so that I can reuse it in Flex and Flash.

package
{
 import flash.text.StyleSheet;

 public class SimpleStylingClass
 {
  private var _ss:StyleSheet = new StyleSheet();
  
  public function get ss():StyleSheet
  {
   return _ss;
  }
  
  public function set ss(value:StyleSheet):void
  {
   _ss = value;
  }
  
  public function SimpleStylingClass()
  {
   var aHover:Object = new Object();
   aHover.color = '#FF0000';
   aHover.fontWeight = 'bold';
   aHover.textDecoration = 'none';
   
   var aNorm:Object = new Object();
   aNorm.color = '#0000FF';
   aNorm.textDecoration = 'underline';
   
   ss.setStyle("a", aNorm);
   ss.setStyle("a:hover", aHover);
  }

 }
}

The following would be the source file for the flex file.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="100%" height="100%" >
 <mx:Style>
  HBox{
   paddingLeft: 10;
   paddingRight:10;
   paddingTop:10;
   paddingBottom:10;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   import mx.controls.Alert;
   
   //Bindable String to be used by the text area below.
   [Bindable]
   private var _bodyText:String = "I have some body text here. It " +
    "contains a few clickable URLs. For example: <a href='" +
    "event:http://www.google.com' target='_blank'>Google.com" +
    "</a>, <a href='event:http://www.msn.com' " +
    "target='_blank'>msn.com</a> and <a target='_blank' " +
    "href='http://nekyouto-tech.blogspot.com'>My Tech Blog</a>.";
   
   /*
    When the user clicks on such a link (href='event:...', 
    I will show a Alert box indicating the URL that the 
    user have click and a simple message.
   */
   protected function txtAreaBody_linkHandler(event:TextEvent):void
   {
    // TODO Auto-generated method stub
    Alert.show(event.text + " have been block by this site"
     , "Alert",Alert.OK);
   }
   
  ]]>
 </mx:Script>
 <mx:HBox width="100%" height="100%">
  <!-- 
   I have pointed the htmlText value to the Bindable String in the 
   above.I have also added the Stylesheet for the text area and 
   also theListener for hyperlinks in the body text. It will keep 
   a lookout for href='event:..... pattern in a hyperlink text. 
  -->
  <mx:TextArea id="txtAreaBody" width="100%" height="100%" 
      htmlText="{_bodyText}" link="txtAreaBody_linkHandler(event)"
      styleSheet="{new SimpleStylingClass().ss}" fontSize="24" />
 </mx:HBox>
</mx:Application>


And the following would be the main class for the Flash file
package
{
 import flash.display.Sprite;
 import flash.events.TextEvent;
 import flash.text.TextField;
 import flash.external.ExternalInterface;
 
 public class StylingHyperlinksMainClass extends Sprite
 {
  //Text to be displayed in the textfield
  private var _bodyText:String = "I have some body text here. It " +
   "contains a few clickable URLs. For example: Google.com" +
   ", " +
   "msn.com and My Tech Blog.";
  private var _txtBodyText:TextField;
  
  public function StylingHyperlinksMainClass()
  {
   super();
   _txtBodyText = this.getChildByName("txtBodyText") as TextField;
   _txtBodyText.htmlText = _bodyText;
   //Setting the stylesheet of the Textfield
   _txtBodyText.styleSheet = new SimpleStylingClass().ss;
   //Adding the listener for href that starts with event:...
   _txtBodyText.addEventListener(TextEvent.LINK, textLinkEvent);
  }
  
  /*
  Shows a Javascript Alert box when the user clicks on the
  URL that starts with event:...
  */
  private function textLinkEvent(event:TextEvent):void
  {
   ExternalInterface.call("alert", event.text + " have been block" +
    " by this site.");
  }
 }
}

* Click here to view the Flex demo.
# Click here to view the Flash demo.
^ Click here to download the source file of the above demos.

Sunday, September 18, 2011

A work around for the Blogger Images Overlay and your Lightbox Overlay

As I have just started creating my Blogs a few months ago and I was putting a lot of effort creating and updating it... Something crazy had happened suddenly...


Image shows a mixture of Blogger Image Overlay and Spicebox Overlay...

In order to stop the above from happening any further, I have done the following steps:
  1. In your Blogger dashboard click Design > Edit Html
  2. Find the keyword Spicebox and replace it with something else in the code of your blogs and you are done.

But I do hope that Blogger will provide an option so that I can turn the current black overlay for images and have my Overlay effect back again.

* Click here for the Spicebox overlay effect for Blogger.

Flex: Playing with text that contains HTML Entity

I was working and debugging projects with a bunch of test that contains HTML entities the other day and I realise that if you were given a bunch of copy that contains common HTML entities characters like '>', '<', '€', ... etc you might encounter problems like bold text not rendered correctly. And if you are going to filter or detect a special character in the body text, you might ended up checking for characters that contains &#...; if which quite troublesome and not so user friendly. Hence after looking around the web for some time, here is one of the derived solutions for some of the common special characters.


Here's the source file for the demo that I'm going to show in this post.


 
  
 
 
  
   
   
  
  
  
  
  
   
   
    
   
  
  
   
   
    
   
  
  
  
  
   
   
    
   
  
  
   
   
    
   
  
 


* Click here for the demo I have created.
^ Click here to download the source files for the demo.
# Click here for more information on HTML Entities.
! Click here for a better solution if you need a better and more complete class for replacing these HTML entities.

Thursday, September 8, 2011

Quick solutions to sending emails with PHP

I'm writing this post because there are things that I wouldn't want to forget. Even though PHP is a free and easy to use technology but I'm pretty sure that from time to time, there would be a need to generate and send out emails from your website. Therefore, this is one of the most useful solution that I had encountered before.


Introducing...

PHPMailer supports the following:
  • PHP 4,5,6
  • plain text and html encoded email messages... etc
  • Click here to find out more about the features that PHPMailer supports

Note: initially, I wanted to post a demo here but because most of the domains that I own were mainly free hosting domains... it makes it very troublesome to show a demo... Trust me, it will be much easier if you 'play' with PHPMailer on your personal php server. :)

* Click here for the website of PHPMailer.