Site of the Day 8/19/2010

Here is a good site for learning about HTML 5.

http://www.html5rocks.com/

Site of the Day 8/18/2010

Here is a good link to test CSS 3 selectors.

http://tools.css3.info/selectors-test/test.html

Site of the Day 8/17/2010

Another crazy language from the W3C

http://news.cnet.com/8301-30685_3-20014967-264.html?tag=topStories2

Site of the Day 8/16/2010

AMF for the Apple iPhone

http://egnaro.com/post.cfm/amf-for-iphone

Site of the Day 8/15/2010

Here is an article to emuluate various IE browsers for CSS.

http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

Site of the Day 8/14/2010

CSS Compatibility for Internet Explorer for IE 5 thru 8.

http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx

Site of the Day 8/13/2010

Here are some links concerning doing some web stuff for the iPhone and iPad.

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3888106

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889011

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3891451

Site of the Day 8/12/2010

Creating a Web App for Google’s Chrome Web Store

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3900056

http://code.google.com/chrome/apps/docs/developers_guide.html

Site of the day 8/11/2010

Learn about HTML 5 and CSS 3 from Sitepoint for only $9.95.

http://courses.sitepoint.com/html5-live

http://courses.sitepoint.com/css3-live

Site of the Day 8/10/2010

Here is a good Mobile Phone development site.

http://mobilephonedevelopment.com/archives/1037

Site of the Day 8/9/2010

Here is a link to create CSS3 generator.

http://www.css3maker.com/

Site of the Day 8/8/2010

Building Android Apps with HTML, CSS and JavaScript

http://building-android-apps.labs.oreilly.com/

Site of the Day 8/7/2010

A pretty good website about Mobile Development.

http://www.mobilephonedevelopment.com/

Site of the Day 8/6/2010

Here is the online version for the Dive into HTML 5 book.

http://diveintohtml5.org/

Site of the Day 8/5/2010

Here is a link concerning of scoring a browser with the features of HTML 5.

http://www.html5test.com/

Site of the Day 8/4/2010

Here is a link concerning compatibility of HTML 5 across the browsers.

http://www.caniuse.com/

Site of the Day 8/3/2010

HTML 5 Cool Sites:

Compatibility:

http://www.quirksmode.org/dom/html5.html

Ajaxian Information:

http://ajaxian.com/index.php?s=html5&searchbutton=Go

Overall Examples:

http://html5demos.com/

http://webdesignledger.com/inspiration/10-html5-demos-to-make-you-forget-about-flash

http://addyosmani.com/blog/

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

Text Rendering Overview

http://www.permadi.com/blog/2010/03/html5-text-rendering-overview/

Part I: http://www.permadi.com/blog/2009/04/using-html-5-canvas-to-draw-over-a-web-page/

Part II: http://www.permadi.com/blog/2009/04/usng-html-5-canvas-to-draw-over-my-web-page-part-2/

Part III: http://www.permadi.com/blog/2009/04/using-html-5-canvas-to-draw-over-a-web-page-part-3/

Part IV: http://www.permadi.com/blog/2009/05/using-html-5-canvas-to-draw-over-a-web-page-part-4/

Flip an Image:

http://www.permadi.com/blog/2009/04/html5-using-canvas-to-flip-images/

Additional Information:

http://www.phpguru.org/html5-examples

Site of the Day 8/2/2010

Getting Started with Android Development using Eclipse.

http://www.permadi.com/blog/2010/02/getting-started-with-android-development-with-eclipse/

Site of the Day 8/1/2010

Here is a good article about JavaScript functions and how they work.

Part I: http://www.permadi.com/tutorial/jsFunc/index.html

Part II: http://www.permadi.com/tutorial/jsFunc/index2.html

Site of the Day 7/31/2010

Here is good link concerning learning Flex features.

http://flexonblog.wordpress.com/

Site of the Day 7/30/2010

Here is a good link to create an AIR application on Google Andriod.

http://www.terrenceryan.com/blog/post.cfm/holy-crap-i-m-a-mobile-developer

Site of the Day 7/29/2010

I’m going to explain how to send data from main Flex mxml file to a custom component. 

[UPDATE]

I’ll add some code to change components in the parent application from the custom component.

[CC]

ex.)

parentApplication.idhdivbox1.getDividerAt(0).visible = true;

or

parentApplication.[ID].[property or methods] = [value];

Lessons Learned : Try to keep the code inside the custom component small and send data (property) to the CC from the main mxml. Only if one can’t perform outside the custom component should you add ActionScript inside it. 

1.) Main mxml 

A.) Refer to custom component.

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”

xmlns:flexiframe=”com.google.code.flexiframe.*” 

xmlns:cpanel=”usa_components.*” 

horizontalAlign=”center” verticalAlign=”middle” 

left=”0″ top=”0″ 

applicationComplete=”onApplicationComplete(’1′); “ 

viewSourceURL=”srcview/index.html” > 

B.) Setup bindable xml to custom component property. 

[Bindable] 

public var b_treexml:XMLListCollection = new XMLListCollection; 

C.) Put results from server into data provider of Tree component which is in the custom component. The first statement loads the results into the data provider. The second statement loads the results into a bindable var inside the custom components, so I can ‘EXPAND’ the tree at a 

public function set_tree1(e:ResultEvent):void {  

idCpanel.idtree.dataProvider = e.result; 

idCpanel.treeData2 = e.result as XML; 

} // end of set tree…. 

2.) Using custom component on main mxml 

<cpanel:cPanel prop1=”1″ prop2=”{b_treexml}” /> 

3.) Custom component 

A.) Setup bindable variables. 

// bindable variables

[Bindable] 

public var prop1:String; 

[Bindable] 

public var prop2:XMLListCollection; 

[Bindable] 

public var treeData2:XML; 

B.) I have a ‘EXPAND ALL’ button to expand the tree.

// open all nodes – tree2private function openAllNodes2():void {

 idtree.openItems = treeData2..*;

} // end of open all nodes….

<mx:Button label=”Expand ALL” click=”openAllNodes2();”

useHandCursor=”true” buttonMode=”true” mouseChildren=”false” />

C.) Here is the code for the Tree component inside the CC. Notice the ID.

<mx:Tree width=”100%” height=”100%”

dataProvider=”{prop2}”

labelField=”@label”

showRoot=”false”

change=”iFrame.source = (Tree(event.target).selectedItem.attribute(‘path’).toString());”

itemClick=”tree_itemClick(event);” />

Site of the Day 7/28/2010

Here is the page of the guru of the jQuery project.

http://ejohn.org/

Cheat sheet for jQuery

http://www.box.net/shared/as4xkezd6a

Site of the Day 6/28/2010

Here is the main page for the jQuery project.

http://jquery.org/

Site of the Day 6/25/2010

A very good podcast about jQuery.

http://yayquery.com/

Site of the Day 6/24/2010

Here is a good video on how to understand the internals of jQuery.

http://paulirish.com/

Site of the Day 6/23/2010

15 Great jQuery Plugins For Better Table Manipulation
 http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

Site of the Day 6/22/2010

I’m going to start to add some resources for the JavaScript framework called jQuery.

http://15daysofjquery.com/

Site of the Day 6/21/2010

Here is a great site from Adobe about learning about their products.

http://tv.adobe.com/

Site of the Day 6/20/2010

Here is the ultimate ColdFusion resource.

http://www.carehart.org/cf411/

Site of the Day 6/19/2010

Here is an article on how to use jQuery from Google (CDN) and your local web server.

http://www.coldfusioning.com/index.cfm/2010/7/9/Load-jQuery-From-Google-Without-Risk-of-Breaking-Your-Site

Site of the Day 6/18/2010

Here is some information concerning ColdFusion 9.0.1.

http://www.aaronwest.net/blog/index.cfm/2010/7/13/ColdFusion-901-Released

Documentation of changes to the Language.

http://www.adobe.com/support/documentation/en/coldfusion/901/cf901features.pdf

Site of the Day 6/17/2010

I think I do these posts in batches because I’m so busy in my day job Here is a good link concerning developing Object-oriented ColdFusion.

http://www.dfwcfug.org/blog/2010/02/09/Recording-list-for-Head-First-Design-Patterns-for-CFML-presentations

Site of the Day 6/16/2010

Here is a link to  jQuery for those interested in a lighweight JavaScript/CSS framework. Its has evolved into the best of the breed over the years.

http://jquery.com/

Flex Remote Object examples

I’m going to put my notes on how to have RemoteObject work for Adobe Flex Builder 3 for the desktop and server.  I personally like the idea of coding on the server since there are less surprises.

1.) Creating an Application from your desktop 

Following these steps when creating your flex project. project name : test_rs1 project location : d:\\cf9\wwwroot\apps\flex\test_rs1 

Application Type : Web Application 

Application server type: ColdFusion 

Use remote object access service [ checked ] 

ColdFusion Flash Remoting [ checked ] 

ColdFusion Installation type: standalone 

Web Root: d://cf9/wwwroot 

Root URL: http://localhost:8500/ 

ColdFusion WAR: d:/cf9/wwwroot/cfusion-ear/cfusion-war/ 

Main source folder: src 

Output folder URL: bin-debug 

* Flex App: I copied this code and compiled the code via the ‘run’ button. 

<?xml version=”1.0″ encoding=”utf-8″?> 

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” 

layout=”absolute” viewSourceURL=”srcview/index.html”> 

<mx:Script> 

<![CDATA[ 

import mx.controls.Alert; 

import mx.rpc.events.FaultEvent; 

import mx.rpc.Fault; 

import mx.rpc.events.ResultEvent; 

// send 

public function WelcomeMsg():void { 

Alert.show(test_name.text); 

ws.WelcomeMsg(test_name.text ); 

} 

// result 

private function onResult( e : ResultEvent ) :void { 

msg.text = e.result.toString(); 

} 

// error msg 

private function onFault( e : FaultEvent ) :void { 

msg.text = e.fault.faultString; 

} 

]]> 

</mx:Script> 

<mx:RemoteObject id=”ws” 

destination=”ColdFusion” 

source=”apps.flex.test_rs1.src.NEWCFComponent” > 

<mx:method name=”WelcomeMsg” 

result=”onResult(event)” 

fault=”Alert.show(event.fault.message, ‘Erro’)” /> 

</mx:RemoteObject> 

<!– 

<mx:method name=”WelcomeMsg” 

result=”onResult(event)” 

fault=”Alert.show(event.fault.message, ‘Erro’)” /> 

–> 

<mx:Button x=”284″ y=”10″ label=”Get Welcome Message.” 

click=”WelcomeMsg()” /> 

<mx:TextInput id=”msg” x=”481″ y=”10″ width=”300″ /> 

<mx:TextInput id=”test_name” x=”116″ y=”10″ width=”150″ /> 

<mx:Label x=”10″ y=”12″ text=”Enter your name:” /> 

</mx:Application>

* ColdFusion CFC: Save this cfc as [NEWCFComponent.cfc] in the same folder as src. You will notice that I append to a log file so I can verify that the cfc is being executed.

<cfcomponent displayname=”CF_Service” output=”false”> 

<cffunction access=”remote” returntype=”string”>
<cfargument required=”yes” default=”default message… “> 

<cfset v_now = Now() & ” <br />” >
<cffile action=”append” addnewline=”yes”
file=”#GetDirectoryFromPath(GetBaseTemplatePath())#cfc_log_file.html”
output=”#v_now# date=YO, #test_name#!” fixnewline=”no” > 

<cfreturn “YO, #test_name#!”>
</cffunction> 

</cfcomponent> 

* Test CFC: One should make sure one doesn’t get an error from this specific method in the CFC. One should use default values for all of the CFC arguments. 

http://localhost:8500/apps/flex/test_rs1/src/NEWCFComponent.cfc?method=WelcomeMsg 

* Run a Flex Application via the ‘RUN’ button. After you compile the application, it will launch a browser of the flex page. One will put your ‘name’ in the first box and click on the button. You will notice the ‘YO’ and your name in the second box coming from the cfc.

https://localhost:8500/flex/test_rs2/bin-debug/test_rs2.html

 

2.) Create a Flex Application on your web server 

* Following these steps when creating your flex project.project name : test_rs1 project location : \\[server-name]\reg\apps\flex\test_rs1 

Application Type : Web Application 

Application server type: ColdFusion 

Use remote object access service [ checked ] 

ColdFusion Flash Remoting [ checked ] 

ColdFusion Installation type: J2EE

Web Root: \\[server_name]\regroot\

Root URL: https://domain_name.com/

ColdFusion WAR: \\[server_name]\regroot\cfusion-ear\cfusion-war\

Main source folder: src 

Output folder URL: bin-debug 

* Flex App: I copied this code and compiled the code via the ‘run’ button.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”absolute” viewSourceURL=”srcview/index.html”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.rpc.events.FaultEvent;

import mx.rpc.Fault;

import mx.rpc.events.ResultEvent;

// send

public function WelcomeMsg():void {

Alert.show(test_name.text);

ws.WelcomeMsg(test_name.text );

}

// result

private function onResult( e : ResultEvent ) :void {

msg.text = e.result.toString();

}

// error msg

private function onFault( e : FaultEvent ) :void {

msg.text = e.fault.faultString;

}

]]>

</mx:Script>

<mx:RemoteObject id=”ws”

destination=”ColdFusion”

source=”flex.test_rs2.src.NEWCFComponent” >

<mx:method name=”WelcomeMsg”

result=”onResult(event)”

fault=”Alert.show(event.fault.message, ‘Erro’)” />

</mx:RemoteObject>

<mx:Button x=”284″ y=”10″ label=”Get Welcome Message.”

click=”WelcomeMsg()” />

<mx:TextInput id=”msg” x=”481″ y=”10″ width=”300″ />

<mx:TextInput id=”test_name” x=”116″ y=”10″ width=”150″ />

<mx:Label x=”10″ y=”12″ text=”Enter your name:” />

</mx:Application>

ColdFusion CFC: Save this cfc as [NEWCFComponent.cfc] in the same folder as src. You will notice that I append to a log file so I can verify that the cfc is being executed.

<cfcomponent displayname=”CF_Service” output=”false”>

<cffunction name=”WelcomeMsg” access=”remote” returntype=”string”>

<cfargument name=”test_name” type=”string” required=”yes” default=”default message… “>

<cfset v_now = Now() & ” <br />” >

<cffile action=”append” addnewline=”yes”

file=”#GetDirectoryFromPath(GetBaseTemplatePath())#cfc_log_file.html”

output=”#v_now# date=YO, #test_name#!” fixnewline=”no” >

<cfreturn “YO, #test_name#!”>

</cffunction>

</cfcomponent>

* Test CFC: One should make sure one doesn’t get an error from this specific method in the CFC. One should use default values for all of the CFC arguments. 

http://[domain-name.com]/flex/test_rs1/src/NEWCFComponent.cfc?method=WelcomeMsg 

* Run a Flex Application via the ‘RUN’ button. After you compile the application, it will launch a browser of the flex page. One put you ‘name’ in the first box and click on the button. You will notice the ‘YO’ and your name in the second box.

https://[domain-name.com]/flex/test_rs2/bin-debug/test_rs2.html

Site of the Day 6/15/2010

Here is a good site using ColdFusion and Flex.

http://flexcf.com/home

Site of the Day 6/14/2010

Here is funny article from Mozilla about Apple Safari’s HTML 5 demo and how intellectually dishonest it is coming from Apple’ marketing department. Good figure…I’m so surprised

http://www.0xdeadbeef.com/weblog/2010/06/intellectual-honesty-and-html5/

Site of the Day 6/13/2010

Here is the fourth part of an article to increase performance of Flex applications.

http://www.insideria.com/2008/07/flex-ria-performance-considera-3.html

Site of the Day 6/12/2010

Here is the third part of an article to increase performance of Flex applications.

http://www.insideria.com/2008/06/flex-ria-performance-considera-2.html

Site of the Day 6/11/2010

Here is the second part of an article to increase performance of Flex applications.

http://www.insideria.com/2008/04/flex-ria-performance-considera.html

Site of the Day 6/10/2010

Here is the first part of an article to increase performance of Flex applications.

http://www.insideria.com/2008/03/flex-ria-performance-considera-1.html

Site of the Day 6/9/2010

Flash showcase site.

http://swfhead.com/flash/

Site of the Day 6/8/2010

This is the link to Adobe Developers site.

http://www.adobe.com/devnet/

Site of the Day 6/7/2010

This is a good practical site about examples on Flex.

http://blog.flexexamples.com/

Site of the Day 6/6/2010

Here is a simple article about Flex and ColdFusion RemoteObject/WebServices.

http://macmartine.com/blog/2008/04/flex_and_coldfusion_remoteobje.html

Site of the Day 6/5/2010

Another way to build an AIR application for Google Android.

http://ted.onflash.org/2010/05/get-started-building-air-for-android.html

Site of the Day 6/4/2010

Here is one of many Flex blogs from Abobe.

http://blogs.adobe.com/gosmith/

Site of the Day 6/3/2010

Here is a pretty good Flex blog. This blog has a lot of videos on Flex 3 and 4.

http://graphics-geek.blogspot.com/

Site of the Day 6/2/2010

Here is an article how to use ColdFusion 9 services with Flex.

http://balajisridhar.wordpress.com/2009/11/27/how-to-consume-cfaas-using-flex-client/

Site of the day 6/1/2010

Here is a link concerning Adobe Flex 4 information.

http://blogs.adobe.com/aharui/

Site of the Day 5/31/2010

Here is a link for the Official Adobe Flex team.

http://blogs.adobe.com/flex/

Site of the Day 5/30/2010

Here is a blog for the Adobe Flex Documentation team.

http://blogs.adobe.com/flexdoc/

Site of the Day 5/29/2010

Here is a good JavaScript site concerning the importance of performance.

http://javascriptrocks.com/performance/

Site of the Day 5/28/2010

Here is a link about how to decompile a Flash swf file.

http://phlashers.com/blog/?p=374

Site of the Day 5/27/2010

I’m glad I found this link when I was sitting down.

http://www.jsmag.com/

Site of the Day 5/26/2010

Here is a site concerning PaperVision3D.

http://blog.papervision3d.org/

Site of the Day 5/25/2010

James Ward has a page which will see if your page is Flex instead of Flash.

http://www.jamesward.com/is_it_flex/

How to do a type ahead for a select tag

I thought I would put some code here on how to do a type ahead for a select tag (select-one) using JavaScript.
*** WordPress made my “8″ as a smiley face, so just replace it.

1.) Add these 2 event handlers to a given select tag.

onblur=”_dw_select_typeAhead_clear(); “
onkeydown=”_dw_select_typeAhead(); “

2.) Add this global variable to keep the status of the type ahead.

// global storage object for type-ahead info, including reset() method
var taInfo = {
last:0,
charsTyped:”,
chars_keyCode:”,
delay:1000,
timeout:null,
reset:function() { this.last=0; this.charsTyped=”;  }
};

3.) Add this function to initialize some global variables at the onchange event handler.

// ===============================
// clear variables for type ahead
//  ===============================

function _dw_select_typeAhead_clear() {

taInfo.charsTyped = ”; taInfo.last = 0;
} // end of type ahead clear…

4.) Add this function to show the location were the user is as they type the characters.

// =====================================
// type ahead for select drop down
// =====================================
function _dw_select_typeAhead() {

  var v_len = 0; var v_len1 = 0; var v_event = window.event;
  var txt; var charCode; var val;
  charCode = v_event.keyCode;

// escape key will clear the type ahead buffer and allow the user to start over
  if (charCode == 27) {
   _dw_select_typeAhead_clear(); // clear
 _dw_select_typeAhead_startover(); // options[0]
   v_event.returnValue = false; return true;
  }
  if (v_event && !v_event.ctrlKey && (v_event.keyCode > 19 || v_event.keyCode == 8 ) ) {
     var now = new Date();
     if (taInfo.charsTyped == ” || taInfo.charsTyped != ”) {
        var ddl = v_event.srcElement;
        taInfo.last = now;
     // correct for NumPad digits
     if ( charCode >= 96 && charCode <=105 ) { charCode = charCode – 48;   }
     if ( charCode > 127 ) { charCode = charCode – 144; }
     if ( charCode == 8 ) {
        v_len1 = taInfo.charsTyped.length – 1;
        taInfo.charsTyped = taInfo.charsTyped.substr(0,v_len1);
     } else {
           taInfo.charsTyped += String.fromCharCode(charCode).toUpperCase();
     }

window.status = taInfo.charsTyped;
  ddl.title = taInfo.charsTyped;
     v_len = ddl.options.length-1;
        for (var i=0; i < v_len; i++) {
         txt = ddl.options[i].text.toUpperCase();
      val = ddl.options[i].value.toUpperCase();
            if ( txt.indexOf(taInfo.charsTyped) == 0 && val != “” ) {
            ddl.selectedIndex = i;
         break;
         } // if dd1
      } // for_i
      } // if taInfo
      v_event.returnValue = false;
      return true;
  } // if v_event

  return true;
} // end of select type ahead….

5.) I’ve added the capability to clear all of your typed characters by use of the Escape Key.

// =====================================
// escape key : clear type ahead character
// =====================================
function _dw_select_typeAhead_startover() {
 
var v_event = window.event;
var ddl = v_event.srcElement;
ddl.options[0].selected = true;
window.status = ”;  ddl.title = ”;  
} // end of type ahead start over….

Site of the Day 5/24/2010

Flex on Google Android in Flash Player and AIR

http://www.jamesward.com/2010/05/21/flex-on-android-in-flash-player-and-air/

Site of the Day 5/23/2010

Here is a good site from the University of Stanford Security Lab.

http://seclab.stanford.edu/

Site of the Day 5/22/2010

Here is an article in creating an ActionScript debugger.

http://labs.flexperiments.nl/asdebugger/

Site of the Day 5/21/2010

Here is a good article how to do a type ahead for a combobox in Flex.

http://labs.flexperiments.nl/alternative-combobox-for-flex/

Site of the Day 5/20/2010

Here is a good site for a Adobe Flex Tree (open-sourced).

http://labs.flexperiments.nl/flptree-2-0-better-faster-open-source/

Site of the Day 5/19/2010

This is a great site using CSS for Adobe Flex. The guy is correct that CSS is implemented terribly in Flex. Didn’t they think about how CSS works in a web page and just copy that idea???

http://fcss.flashartofwar.com/

Site of the Day 5/18/2010

The articles from Yakov Fain about Adobe Flex are excellent.

http://flexblog.faratasystems.com/author/yakov

Site of the Day 5/17/2010

Here is a good article about Google TV. I want one now

http://www.wired.com/gadgetlab/2010/05/google-introduces-google-tv/

Site of the Day 5/16/2010

Here is a good product to create wireframes for Adobe Flex.

http://www.balsamiq.com/blog

Site of the Day 5/15/2010

Here is a good article about the detail of the Flex Tree Control.

http://vipuljhawar.wordpress.com/2008/03/28/creating-a-dynamic-tree-in-flex/

Site of the Day 5/14/2010

Everything you wanted to know about Ajax and were afraid to ask.

http://ajaxian.com/

Site of the Day 5/13/2010

Here is a great site for CSS novices and gurus.

http://cssbeauty.com/

Site of the Day 5/12/2010

Here is a great demo using an Open Source Java facial recognition software (jar) with ColdFusion.

http://cfsilence.com/blog/client/index.cfm/2010/1/21/Facial-Recognition-in-14-Lines-Of-ColdFusion

Site of the Day 5/11/2010

I like this demo from Raymond Camden’s site about how to create images from a URL. This means I could create snapshots of my application for training purposes.

http://www.coldfusionjedi.com/index.cfm/2007/6/13/ColdFusion-8-URL-Thumbnails

Site of the Day 5/10/2010

I fell upon this site from a link about creating music notes from JavaScript. It very cool

http://0xfe.blogspot.com/

Site of the Day 5/9/2010

I’m listening to a video for MIX09 concerning UX Design Patterns.

http://videos.visitmix.com/MIX09/T30F

Site of the Day 5/8/2010

Since, I have some more MIX sites, I’ll added them for the next couple day.

http://live.visitmix.com/

Site of the Day 5/7/2010

Someone sent me a link to a specific JavaScript topic for Microsoft MIX09, so here is the link for MIX09.

http://videos.visitmix.com/MIX09/

Site of the Day 5/6/2010

Here is a blog for IE. It is showing their progress with IE 9.

http://blogs.msdn.com/ie/default.aspx

Site of the Day 5/5/2010

Here is nice little tip concerning ColdFusion and PING.

http://cfsearching.blogspot.com/2010/05/ping-with-coldfusion-and-net.html

Site of the Day 5/4/2010

Here is a very good site from the Performance Evangelist for Google. I will start to add a site of the day to get myself to share some more

http://stevesouders.com/

Social Media

Why

How I use Social Media: Part 1–Twitter
How I use Social Media: Part 2–Facebook
How I use Social Media: Part 3–Blogging
How I use Social Media: Part 4–LinkedIn

LinkedIn

Twitter

Facebook

Oracle P/L Web Toolkit

References
Documentation
Oracle P/L Web Toolkit
Tips

General Mobile Applications

Here are some links concerning mobile applications and software.

General
Mobile-app makers prepare for a gold rush

iPhone (Apple)
Native iPhone applications built with Flash
Flash

Android (Google)

FireFox
First Mobile Firefox enters home stretch

HTML

Here are some links concerning HTML concepts.

Cheat Sheets
Cheat Sheets
HTML 5
WebMonkey
 

Color
DevGuru HTML Colors
HTML Color codes
Colors on the Web

Color Theory
Color Theory
Wiki Color Theory
Color Symbolism and Psychology
Color Mixing

Future browser enhancements (JavaScript,CSS,HTML)

Here are some links concerning future browser enhancements for Firefox, IE, Google or other browsers which will help a developer.

Hack site for Firefox

HTML

JavaScript
new device API for Firefox 3.6: orientation

CSS
Firefox 3.7
a multi-touch drawing demo for Firefox 3.7

Microsoft IE

Firefox
Good general information

Google Chrome
The Chromium Blog

Common Flex libraries

I’m going to add some Adobe Flex ActionScript libraries.

Open Source AS3 APIs

(UX) User Experience Post

I’m going to add links which pertain to (UX) User Experience and RIA. I will be adding more links since there is some good stuff.

A Flex Developer’s Guide to User Experience Work Flows and Best Practices
50 Most Usable RIAs
the Flex User Interface Discussion

Design elements and principles

Theresa Neil blog
Designing Web Interface blog
Bill Scott’s blog (Netflix)
Wireframes
Functioning Form
Info Design Patterns
Stop Design

Prototyping
Rapid Prototyping Tools

Messages and Images
CSS Message Boxes for different message types
Design

Opinion
Google not a nice place to work

Flex Tree Control using http service

I’ve been trying to get my two tree controls to work with 2 httpservices without any success since most of the examples are hard-coding the data (XML) inside mxml. Since I’m dense or whatever, I found this link which answered my problem. If I find another way to transform dynamic data I will post it as a different example. A co-worker of mine gave me the 2nd example.

EXAMPLE #1

answer link : example1

cfm page containing the following xml data :
====================================
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<rows><node1 text=’Test last name,first middle initial’ data=’E020094 ;ZZ;ZZ;ZZ’ >
<node2 text=’tab1′ data=’E020094 ; 1;ZZ;ZZ’ >
<leaf text=’panel 1′ data=’E020094; 1;1;1′ />
</node2>
</node1>
</rows>

ActionScript code inside flex
====================================
// show errors from server
public function handleFault(event:FaultEvent,a_descr:String):void {

Alert.show(event.fault.faultString + ” ” + a_descr, “Error”);
} // end of handle fault…

flex mxml
====================================
<mx:HTTPService
id=”idloadtree2″ resultFormat=”e4x”
url=”https://server_name/flex/get_tree.cfm”
useProxy=”false” showBusyCursor=”true”
fault=”handleFault(event,’Get Tree 2′);” />

<mx:Tree id=”idtree2″ name=”Tree” height=”100%” width=”100%”
selectionColor=”#ffff33″ textSelectedColor=”#ff3333″
dataProvider=”{idloadtree2.lastResult}” labelField=”@text”
showRoot=”false” >

EXAMPLE #2

cfm page
================================================================
<cfsetting showdebugoutput=”no”>

<cfxml variable=”myxml”>
<root label=”root node”>
<branch label=”top level branch A”>
<leaf label=”leaf a” />
<leaf label=”leaf b” />
<branch label=”second level branch A-A”>
<leaf label=”leaf c” />
<leaf label=”leaf d” />
</branch>
</branch>
<branch label=”top level branch B”>
<leaf label=”leaf e” />
</branch>
</root>
</cfxml>
<cfoutput>#tostring(myxml)#</cfoutput>

 

Flex code
=================================================================
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”init()”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;

// second tree's data
[Bindable] private var _myTreeCFM:XML;
// init function to get data from cfm page
private function init():void
{
getXML.send();
}
// when data comes back, it is XML, assign it to the variable
private function resultHandlerXML(e:ResultEvent):void
{
_myTreeCFM = e.result as XML;

}
// right like there will be any errors
private function faultHandler(e:FaultEvent):void
{
Alert.show(e.message.toString());
}

]]>
</mx:Script>

<mx:Label text=”CFM data” fontSize=”20″ fontWeight=”bold” color=”#FFFFFF”/>

<!– tree with cfm data –>
<mx:Tree id=”example_cfm”
labelField=”@label”
showRoot=”false”
dataProvider=”{_myTreeCFM}”
width=”400″ height=”300″ />

<!– get data from server –>
<mx:HTTPService id=”getXML”
url=”getXML.cfm”
resultFormat=”e4x”
result=”resultHandlerXML(event)”
fault=”faultHandler(event)”
showBusyCursor=”true” />
</mx:Application>

Flex and CFMX 7 using an Array of queries

I am starting to experiment on how to send an ‘array of queries’ from CFMX 7 with 1 httpservice call from Flex. This service will send 1 xml packet of data for 4 data grids. So, instead of sending 4 httpserice calls from flex to cfmx and sending back 4 xml packets, I thought maybe less data and less requests would speed up the response time. I will add more content as I finish this code (8/26/2009).

1.) You will notice that I modified querytoxml in cflib for my purposes.

Flex (send data to cfmx)
=============================================================================
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
creationComplete=”_init_app()”
width=”1280″ height=”100%”
themeColor=”#D6DADC” backgroundGradientAlphas=”[1.0, 1.0]“
backgroundGradientColors=”[#7AB4F6, #C2DCF8]” >

<mx:Script>
<![CDATA[

// get XML to data grids
public function _init_app(): void {

idloadSHOWALL.send();

} // end of init....

// show errors from server
public function handleFault(event:FaultEvent,a_descr:String):void {

Alert.show(event.fault.faultString + " " + a_descr, "Error");
} // end of handle fault...

 
]]>
</mx:Script>

 

<mx:HTTPService
id=”idloadSHOWALL”
url=”/flex/get_datagrids.cfm”
useProxy=”false” showBusyCursor=”true”
result=”set_datagrids(event);”
fault=”handleFault(event,’Get Data Grid’);” />

CFMX 7 (build xml and send back to Flex)
===============================================================================

<cfparam name=”url.a_tabid” type=”any” default=”" >
<cfparam name=”url.a_deptid_emplid” type=”any” default=”" >
<cfparam name=”url.a_panelid” type=”any” default=”" >
<cfparam name=”url.a_sort” type=”any” default=”1″ >

<cfsetting enablecfoutputonly=”yes” showdebugoutput=”No”>

<cfsilent>

<cfscript>
/**
* Generates an XMLDoc object from a basic CF Query.
*
* @param query The query to transform. (Required)
* @param rootElement Name of the root node. (Default is “query.”) (Optional)
* @param row Name of each row. Default is “row.” (Optional)
* @param nodeMode Defines the structure of the resulting XML. Options are 1) “values” (default), which makes each value of each column mlText of individual nodes; 2) “columns”, which makes each value of each column an attribute of a node for that column; 3) “rows”, which makes each row a node, with the column names as attributes. (Optional)
* @param basicinfo Y/N (Y=default) Basic information. (Optional)
* @param v_no_record_col Compare this column name if there is no records. (Optional)
* @param v_no_record_descr Add this description to the column name if there is no records. (Optional)

* @return Returns a string.
* @author Patrick Whittingham
* @version 3, August 2009
*/
function queryToXML(query){

//the default name of the root element
var root = “query”;
//the default name of each row
var row = “row”;
//make an array of the columns for looping
var cols = listToArray(query.columnList);
var v_rows = query.recordCount;
//which mode will we use?
var nodeMode = “values”;
// default : basic info
var basicinfo = “Y”;
var v_no_record_col = “”; var v_no_record_descr = “No Data Found”;
//vars for iterating
var ii = 1; var rr = 1;
//vars for holding the values of the current column and value
var thisColumn = “”; var thisValue = “”;
//a new xmlDoc
var xml = xmlNew();
//if there are 2 arguments, the second one is name of the root element
if(structCount(arguments) GTE 2) root = arguments[2];
//if there are 3 arguments, the third one is the name each element
if(structCount(arguments) GTE 3) row = arguments[3];
//if there is a 4th argument, it’s the nodeMode
if(structCount(arguments) GTE 4) nodeMode = arguments[4];
//if there is a 5th argument, its the basic info.
if(structCount(arguments) GTE 5) basicinfo = arguments[5];
//if there is a 6th argument.
if(structCount(arguments) GTE 6) v_no_record_col = arguments[6];
//if there is a 7th argument.
if(structCount(arguments) GTE 7) v_no_record_descr = arguments[7];

//create the root node
xml.xmlRoot = xmlElemNew(xml,root);
//capture basic info in attributes of the root node
if (basicinfo eq “Y” ) {
xml[root].xmlAttributes["columns"] = arrayLen(cols);
xml[root].xmlAttributes["rows"] = query.recordCount;
}
//loop over the recordcount of the query and add a row for each one
for(rr = 1; rr LTE query.recordCount; rr = rr + 1){
arrayAppend(xml[root].xmlChildren,xmlElemNew(xml,row));
//loop over the columns, populating the values of this row
for(ii = 1; ii LTE arrayLen(cols); ii = ii + 1){
thisColumn = lcase(cols[ii]);
thisValue = query[cols[ii]][rr];
switch(nodeMode){
case “rows”:
xml[root][row][rr].xmlAttributes[thisColumn] = thisValue;
break;
case “columns”:
arrayAppend(xml[root][row][rr].xmlChildren,xmlElemNew(xml,thisColumn));
xml[root][row][rr][thisColumn].xmlAttributes["value"] = thisValue;
break;
default:
arrayAppend(xml[root][row][rr].xmlChildren,xmlElemNew(xml,thisColumn));
xml[root][row][rr][thisColumn].xmlText = thisValue;
}
}
} // end of rr loop….

// NO RECORDS FOUND
if (v_rows eq 0) {
arrayAppend(xml[root].xmlChildren,xmlElemNew(xml,row));
thisColumn = lcase(cols[ii]); thisValue = “”; rr = 1;
//loop over the columns, populating the values of this row
for(ii = 1; ii LTE arrayLen(cols); ii = ii + 1){
thisColumn = lcase(cols[ii]); thisValue = “”;
if (UCASE(thisColumn) eq UCASE(v_no_record_col) ) { thisValue = v_no_record_descr; }
switch(nodeMode){
case “rows”:
xml[root][row][rr].xmlAttributes[thisColumn] = thisValue;
break;
case “columns”:
arrayAppend(xml[root][row][rr].xmlChildren,xmlElemNew(xml,thisColumn));
xml[root][row][rr][thisColumn].xmlAttributes["value"] = thisValue;
break;
default:
arrayAppend(xml[root][row][rr].xmlChildren,xmlElemNew(xml,thisColumn));
xml[root][row][rr][thisColumn].xmlText = thisValue;
}
}
} // end of if…
//return the xmlDoc
return xml;
}
</cfscript>

<!— show all —>
<cfset v_tabs = “” >
<cfif url.a_sort eq “1″ > <cfset url.a_sort = “Ttabno, Tdept ” >
<cfelse> <cfset url.a_sort = “Tdept, Ttabno ” >
</cfif>
<cfinvoke component=”cat”
method=”get_show_all” argumentcollection=”#url#” returnvariable=”ret_showall” />

<cfdump var=”#ret_showall#”>

<cfscript>
v_count = 0; v_content = “”;
v_rows = ArrayLen(ret_showall);
//
v_tab_list = ret_showall[1].columnlist; v_tab_arr = ListToArray(v_tab_list); v_row1 = ret_showall[1].RecordCount;
v_panel_list = ret_showall[2].columnlist; v_panel_arr = ListToArray(v_panel_list); v_row2 = ret_showall[2].RecordCount;
v_link_list = ret_showall[3].columnlist; v_link_arr = ListToArray(v_link_list); v_row3 = ret_showall[3].RecordCount;
v_parms_list = ret_showall[4].columnlist; v_parms_arr = ListToArray(v_parms_list); v_row4 = ret_showall[4].RecordCount;
//
</cfscript>

<cfset xmlObj1 = queryToXML(ret_showall[1],”rows”,”row”,”rows”,”N”,”tname”,”No Data Found”) >
<cfset xmlObj1 = Replace(xmlObj1,’table_type=”"‘,’table_type=”1″‘,’All’) >
<cfset xmlObj2 = queryToXML(ret_showall[2],”rows”,”row”,”rows”,”N”,”pname”,”No Data Found”) >
<cfset xmlObj2 = Replace(xmlObj2,’table_type=”"‘,’table_type=”2″‘,’All’) >
<cfset xmlObj3 = queryToXML(ret_showall[3],”rows”,”row”,”rows”,”N”,”Lurl”,”No Data Found”) >
<cfset xmlObj3 = Replace(xmlObj3,’table_type=”"‘,’table_type=”3″‘,’All’) >
<cfset xmlObj4 = queryToXML(ret_showall[4],”rows”,”row”,”rows”,”N”,”pmname1″,”No Data Found”) >
<cfset xmlObj4 = Replace(xmlObj4,’table_type=”"‘,’table_type=”4″‘,’All’) >

<cfset xmlobj = xmlObj1 & xmlObj2 & xmlObj3 & xmlObj4 >
<cfset xmlobj = Replace(xmlobj,’<?xml version=”1.0″ encoding=”UTF-8″?>’,”,’All’) >
<cfset xmlobj = Replace(xmlobj,”<rows>”,”",”All”) >
<cfset xmlobj = Replace(xmlobj,”</rows>”,”",”All”) >
<cfset xmlobj = ‘<?xml version=”1.0″ encoding=”UTF-8″?><rows>’ & xmlobj & ‘</rows>’ >

</cfsilent>

<cfsetting enablecfoutputonly=”no” />
<cfcontent reset =”yes” type=”text/xml; charset=UTF-8″>
<cfoutput>#xmlObj#</cfoutput>
<cfsetting showdebugoutput=”No” >
<cfabort>

Flex : How to use the source path

I’ve wanted to use some of my ActionScript packages in a shared folder for multiple projects. The current default of the namespace is relative to the “SRC” folder. This isn’t a solution since I will have a “COM” folder under every “SRC” folder.

e.g. for src folder )
FOLDER ==> src –> com –> x –> y
NAMESPACE ==> xmls:example=”com.x.y.*”

 <example:wrap  x=”10″ y=”10″ id=”idtest” styleName=”style1″ themColor=”#77CCE1″ >
….
</example>

If you want to use a shared folder for some common code (AS packages), then you must first add a namespace and a source path to the package. I’ve tweaked my package location and import statement which Flex Builder nicely helps me greatly …:)
NAMESPACE ==> xmlns:exanple=”x.y.*”
SOURCE PATH ==> j:/shared_folder/flex_as/com (You will notice it is using a mapped drive to a shared folder for my flex actionscript code )

ACTUAL CODE ==>

<example:wrap x=”10″ y=”10″ id=”idtest1″ styleName=”style1″ themeColor=”#77CC1E” >
….
</example>

General Flex frameworks

Here is a bunch of links on the various Flex frameworks.

Mate
Swiz
Pure MVC
Cairngorm
Parsley

General Web Concepts

I will add general web concepts to this post.

Design Patterns
Design Considerations: Naming Conventions
Why software sucks
(And what to do about it)
Designing web sites

Flex 3 : Taking a snapshot of a component.

Even though, Flex doesn’t do printing that well, it can take a snapshot of a component.

Taking screenshots in Flex 3 using the ImageSnapshot.captureImage() method

<mx:Script>
<![CDATA[

// needed imports
import flash.net.FileReference;
import mx.graphics.codec.*;
import mx.graphics.ImageSnapshot;

// save PNG chart to user PC.
private function saveChart(source:IBitmapDrawable):void {

//var image:ImageSnapshot = ImageSnapshot.captureImage(idchartgrid, 300, new PNGEncoder());
var image:ImageSnapshot = ImageSnapshot.captureImage(source);
var file:FileReference = new FileReference();
file.save(image.data, "chart.png");
} // end of savechart....

]]>
</mx:Script>

<mx:Panel id=”idchartgrid” width=”940″ height=”550″ title=”A9 Summary Chart”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off” toolTip=”A9 Summary Chart” >

<mx:HBox id=”idIMAGE3″ >
<mx:Image source=”../../images/chart_bar.gif”
toolTip=”Create Chart” buttonMode=”true”
click=”saveChart(idchartgrid); ” />
<mx:Label text=”Create Chart” />

</mx:HBox>

<mx:ColumnChart id=”mychart” dataProvider=”{chart1}”
secondDataProvider=”{chart2}”
axisTitleStyleName=”axisTitleStyle”
showDataTips=”true” dataTipMode=”multiple” mouseSensitivity=”200″
height=”350″ width=”800″ >

General Windows Information

Here are some links concerning general Windows information.

17 Tips on How to make Windows Run Faster

Flex and CSS

Here are some links concerning using CSS in Adobe Flex.

Intro to Flex CSS Styling
Flex 3 CSS List Reference

Discover the power of Flex and CSS
Flex CSS Explorer
Flex Filter Explorer
Flex Primitive Explorer

General Adobe Flash Collaborative Services information

Here are some links concerning Adobe Flash Collaborative Services.

Introduction to Adobe Flash Collaborative Services

General Math and Science information

I guess I’ll put some math and science and maybe other non-computer links in this section.

Intuitive explanations
Better Explained

General Oracle and Flex tips and tricks

Here is list of general Oracle and Flex tips/tricks.

Using Oracle EPG to provide XML services for Flex applications

General AIR tips/tricks

Here is a list of Abobe AIR tips and tricks.

5 Adobe AIR apps I use every day
Building CPU efficient Adobe AIR apps
AIR Showcase Applications
Refreshing Apps

General Flash Builder 4 tips/tricks

Here is a list of Flash Builder 4 tips and tricks.

Lots Of Great New ColdFusion Flash Builder Content On ADC
More info on Flash Builder 4 and Flex 4

General CSS tips/tricks

Here is a list of general css tips and tricks.

BrotherCake
A healthy dose of useful CSS links
CSSVault
Object Oriented CSS
Guide to CSS support for Email Clients
W3C CSS class names
CSS Ninja

Mastering CSS
CSS Table Grid
CSS buttons

Menu
Create CSS Menus

CSS Frameworks
Blueprint CSS
YUI Grids 2
960 gs