Here is a very simple example of how to use an inline conditional to show/hide a button if a check box is selected (checked).

The button has a visible property with the value set to a conditional statement that says if the check box is selected then show the button if it is not then hide the button by setting the value true or false.

visible="{(cbShowButton.selected == true) ? true : false}"

If this is your first time looking at an inline condition here is an image I have put together to explain in a little more detail and help you digest it a little easier

Flex / Flash Builder Inline Condition Example

The “?” is what ends the condition and the “:” acts as an else.

Yes, there are several ways of showing and hiding a button based on another components value. However I find this way to work out really well because you dont need to preset the button’s visible property to false before running the application. It detects that the check box is not selected at run time and hides the button. Of course you could just pass the check box selected value which is true or false anways but some or most cases you wont be checking againts a true or false value.

Inline conditions really shine when used with data grids. For example so you have a list of people attending an event and you want to show male or female by an icon you can easily accomplish this using an inline condition to check and see if the datagrid column value is male or female and set the image source to to the appropriate path.

<mx:Image source="{(data.colGender == 'male') ? 'assets/male.png' : 'assets/female.png'}"/>

We can also add to this condition by using a comma for example:

<mx:Image source="{(data.colGender == 'male', data.colAge > 21) ? 'assets/male.png' : 'assets/female.png'}"/>

Download Flex inline conditional example project here: Flex Inline Condition - Example Project (116)

I’m going to in a series of posts walk you through the initial steps of what I like to call Performance Refactoring. I refer to it as such because I am not going to concentrate on just the code, just the app, just the web server etc. We’re going to look at it all. This is necessary with today’s technologies for a lot of reasons, but for enterprise level applications to not do performance checking can be deadly.

So on that ominous note!
Here is a break down of the parts we’ll be going over in this series.

1. Gathering Metrics
2. Interpreting Metrics (This one comes with the bonus feature “WMI and You”)  Of course since everyone wants real world examples I will also show you how to use gathered data to figure out your drives load capacity, and theoretical saturation point.
3. Aggregating Metrics (Or The Cleanup)
4. Building a display module to graph gathered metrics.
5. Using metrics to identify bottle necks.
6. Hardware and code or love hate relationship.
7. Refactoring SQL
8. Analyzing Query execution plans.
9. Understanding cardinality, cost based execution and your app.
10. Code Optimization.

Whew! We got a lot to cover in the next few weeks so might as well get started.
So the first step is going to be gathering metrics. Now for a lot of people I am going to applogize now, these series are going to use a lot of windows technologies. I would recommend that if your using Linux or Solaris that you investigate Nagios, although the methodologies I lay forward should still apply.

One of the common tools used in Performance evaluation on Windows Servers (and in fact is available on XP and Vista) is called perfmon. If you’ve never used go to START > RUN or press WIN + R on the keyboard and type perfmon.

Perfmon is a graphical manager that ties into the Win32 Raw Performance classes. It pulls all the counter data it collects and “cooks” it for you displaying it in a nice easy to see graph. Feel free to Right click and look at all the nice counters available to you.

Now for this exercise I am going to focus on only 3: Processor::Total Time, LogicalDisk::TransferPerSec and PhysicalDisk::TransferPerSec. These are not the only important ones but they will do for now.

So seeing this information is extremely helpful to diagnose system problems. However, what if you want to test the system and record the results? Well you can save it to a log I suppose. However, lets go further. What if you want to persist those results and save them for comparrison to see if your changes are positive, negative, or somewhere in between? Heck what if you want to make it viewable and in a web application where you could log on and compare different builds or scripts? Now were talking!

All right so the secret to getting this whole thing to work is about picking the right ODBC provider.  You want a system DSN and a SQL Server client, not a native SQL server.  Also for future reference you can setup the ODBC connection to point to a different server so you can have multiple remote systems sending to one core server, granted of course that you have security rights.

All right, so here is the chain of events to follow to get this whole thing setup. now these instructions are for Windows 2003 Server, 2008 and vista are a little different in Perfmon but the core logic stays the same:

1. Create Empty Database in SQL
2. Start > Control Panel > Administrative Tools > Data Sources
3. System DSN
4. Add
5. SQL Server (Not Native Client)
6. Name / Desc what you want
7. Select your server > Next
8. Client Config No Dynamic. Set 1433
9. Ok > Next
10. Change Default DB to empty database you made
11. Next > Test data Source > Ok
12. Run OR WIN + R > Enter Perfmon
13. Counter Logs > Right Click “New Log Settings”
14. Type Name
15. Add Objects (Processor, Memory, Physical Disk)
16. Run As (Administrator and set password)
17. Log Files Tab > Log File Type = SQL Database > Configure
18. System DSN select the ODBC connection you configured.
19. Click Ok
20. If New Log doesn’t turn green left click and hit Run
21. Database Schema
    1. a. CounterDetails = Counter Names / Types (CounterID)
    2. b. counterData = Counter Values / Time (CounterID)

All right, thats it. You now have a database that is collecting server metrics for you.  This means you could go off and load test that server and have recorded hard numerical value to use when your boss says “Hey when I have 2000 users on my site is it slowing down??” or my personal favorite “Can we support Project X with  antiquated hardware Y?”

Now if you got this setup you can start to answer that question.  We’ll cover more of the basics in the next part!

I recently built a JavaScript file manager but I wanted more control and better usability instead of expanding on the JavaScript version I decided to build it using Flex. Because Flex doesn’t have file system commands (that I know of) I had to use a server side language. We use VBScript at our company so I used that for the backend. I will be expanding this to other languages the next one to be released will be .NET C# as that seems to be what people polled for.

Screen Shots

The Flex app makes an HTTPService GET request to an ASP VBScript file that sits on the server the script checks to see if any files exist in the directory specified if files do exist it outputs XML with nodes for each of the files along with some additional information such as file size, extension and so on. Once that data is returned to Flex it then parses and display it like any good file manager.

Download & Use it!

1. You can download version 1.0 here Flex Assets Manager (205) you will need make sure that you extract it to the root of your website.
2. Once you have extracted it, open up the “config.asp” file and change the strSystemPath to have the correct system path (based on your setup).
3. Download http://www.vistaico.com/download/VistaICO-File-Icons.zip these File icons from Vista Icons and extract them to “/asset-manager/assets/”. I would have included them but I don’t want to get into any copyright issues.
4. That’s it upload everything and run the “example.asp”

To Launch the Flex Asset Manager you can do the following:

<a href=”javascript:launchFlexAssetManager(’/asset-manager/uploads/‘,‘myForm.myFieldId‘)”>

• “/asset-manager/uploads/” would be the path to the directory that you want the Assets Manager to look in.
• “myForm.myFieldId” would be your form id and your form field id. This is used so after you select an item in the Assets Manager it will populate your form field with the file name.

If you look at the “example.asp” code you will see everything you need to use it within in a page.

Key & Mouse Commands

• [E] Enlarges Images
• [Delete] Deletes the File (a confirmation box will pop-up)
• [Double-Click] Selects the file (same as clicking the use but more common)

Well that’s it for now hope you like it.  Shoot me any comments you have if you need help you can also post them.

Here is the code for the example

<!--
=====================================================================================
	Get data using HTTPService from fitchett.me RSS Feed
=====================================================================================
-->
 
<!--
=====================================================================================
	Script
=====================================================================================
-->
 
		<![CDATA[
 
			private function init():void
			{
				//Once all of the components have loaded send the HTTPService request
				myData.send();
			}
 
			private function dataLoaded():void
			{
				//Once the data has loaded populate the DataGrid and TextArea with the Results.
				myDataGrid.dataProvider = myData.lastResult.channel.item;
			}
 
			private function search():void
			{
				try
				{
					var reg:RegExp = new RegExp(tbSearch.text.toLowerCase());
					myDataGrid.dataProvider = myData.lastResult.channel.item.(reg.test(title.toLowerCase()))
				}
				catch(err:Error)
				{
					//Do Nothing...
				}
				finally
				{
					//Do Nothing...
				}
			}
 
		]]>
 
<!--
=====================================================================================
	Display Components
=====================================================================================
-->

You can download the project source here Flex E4X Example (716)

For those of you wondering how this example was done without reading the code read on…

Getting the Data

1. Flex gets the XML data from the RSS feed using the HTTPService
2. Once the data has successfully loaded the data is then passed into the DataGrid

Filtering the Data using E4X and RegExp

1. When a user types into the textbox a change action is triggered triggering the search() function
2. The search() function then runs code that creates a new RegExp variable named “reg”with the “tbsearch.text.toLowerCase()”being passed in as the string.
3. The DataGrid provider is then … umm iono man it’s just magic to me at this point.
4. And poof everything works!

Ok maybe I do know.

5. Since we are using E4X we parse the XML using the new RegExp we just created.

As always ping me if you have questions with a comment or feel free to e-mail me michael@fitchett.me

Put this in between your <HEAD> tags or in your scripts include file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script type="text/javascript">
//Lookup Cookie by Name and Return Value
function readCookie(name) {
	var nameEQ = name + &quot;=&quot;;
	var ca = document.cookie.split(';');
	for(var i=0;i &lt; ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
//Set iFrame Height based on &quot;kofax-iframe-height&quot; value
function setIFrameHeightToCookie(cookieValue)
{
	var formHeight = readCookie(cookieValue);
	var iFrame = document.getElementById('iFrame');
 
	//
	if (formHeight != null)
	{
		iFrame.height = parseInt(formHeight) + 30;
	} 
	else
	{
		iFrame.height = '600px';
	}
}
</script>

Add the following to the source page inside of the IFRAME

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
if (window.innerHeight &amp;&amp; window.scrollMaxY) {// Firefox
	yWithScroll = window.innerHeight + window.scrollMaxY;
	xWithScroll = window.innerWidth + window.scrollMaxX;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
	yWithScroll = document.body.scrollHeight;
	xWithScroll = document.body.scrollWidth;
} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
	yWithScroll = document.body.offsetHeight;
	xWithScroll = document.body.offsetWidth;
}
document.cookie = "page-height=" + yWithScroll  + "; expires=01/01/2999 10:00:00; path=/;domain=.yourdomain.com";
</script>

Create the IFRAME

1

<iframe id="iFrame" src="http://www.yourdomain.com" width="100%" frameborder="0" scrolling="no" allowtransparency="true" onload="setIFrameHeightToCookie('page-height');"></iframe>

I searched all over and as a last resort I decided to use a cookie to pass the height over. Since we are working across domains trying to use JavaScript to access another frame is out of the question. You will get a security error that there seems to be no way around. 

If you have a better solution please post it in the comments section below and I will update the post. 

Hope this helps! It did for me.

Now that have some music jamming in the background lets get started.

We need an ASP.NET web service if you don’t already have one create it; if you do then great. This example code is in C# it can easily be done in VB as well.

1. Let’s add an import to the top

using System.Web.Mail;

 
1a. Put “One Headlight” on repeat.

2. Now we need to create the web service function that sends the emails

[WebMethod]
public string sendEmail(string strMailTo, string strMailFrom, string strMailSubject, string strMailBody)
{
     //create the mail message
     MailMessage mail = new MailMessage();

     //set the addresses
     mail.From = new MailAddress(strMailFrom);
     mail.To.Add(strMailTo);

     //set the content
     mail.Subject = strMailSubject;
     mail.Body = strMailBody;
     mail.IsBodyHtml = true;

     //send the message
     SmtpClient smtp = new SmtpClient("127.0.0.1");
     smtp.Send(mail);

     //return message
     return "Message Sent!";
}

3. Test it by running the web service in debug mode.

Click on the sendMail link and you should see something like this

Screen Shot - Web Service - sendMail Function

fill it out and click Invoke. You need to make sure you have a SMTP server running on your machine. If you don’t you will get an error. I doubt you will be running it locally so you can upload it to your server and carry on to step 4.

4. Now that we have our web service function built we need to link it up in Adobe Flex. Make sure to replace “yourPassedValue” with some string value that you are passing from somewhere like a text field. If you want it to be static then remove the open and close Flex code tags “{}” and just type the string.

<mx:WebService id="yourWebServiceID" wsdl="http://www.domain.com/<b style="color:black;background-color:#ff66ff">Service</b>.asmx?WSDL" showBusyCursor="true">
       <mx:operation name="sendEmail">
           <mx:request>
                  <strMailTo>{yourPassedValue}</strMailTo>
                  <strMailFrom>{yourPassedValue}</strMailFrom>
                  <strMailSubject>{yourPassedValue}</strMailSubject>
                  <strMailBody>{yourPassedValue}</strMailBody>
           </mx:request>
      </mx:operation>
</mx:WebService>

5.  Now all that’s left is to add this to an action like a button click event

yourWebServiceID.sendEmail.send();

That’s it. I added an example below if it errors out its because the max relays have been reached. I will update it soon with a notification. I will also provide the source.

What the Adobe Flex Documentation wont tell you is how to format your date and time inside of a DataGrid or other components.  No worries I do!

Here is how you format a date pulled in as XML, E4X or whatever…

First you will need a DateFormatter

<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />

 

the formatString will determine how your date & time is formatted. I have created a pattern chart below that’s a little easier to read then the one on Adobe’s Flex Documentation.

OK now on to applying it to a date with funky database formatting 

formatDateTime.format(yourDateTimeObjectAsString);

For playing around purposes I created an example in Flex, change the pattern to alter the date and time

Almost forgot!, To use the format inside of a DataGrid you need to add

<mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />

to your DataGrid inside of a VBox or HBox along with your label so it looks something like this

<mx:DataGridColumn headerText="Date">
     <mx:itemRenderer>
          <mx:Component>
               <mx:VBox>
                    <mx:DateFormatter id="formatDateTime" formatString="MM/DD/YY" />
                    <mx:Label text="{formatDateTime.format(data.myDate) }/>

1st. Switch the resultFormat on your HTTPService or Web Service by adding the following property resultFormat=”e4x” to your tag:

<!-- HTTPService -->
<mx:HTTPService id='data' resultFormat="e4x"/>
<!-- Web Service -->
<mx:WebService id="wsData" wsdl="http://www.domain.com/Service.asmx?WSDL" showBusyCursor="true">
      <mx:operation name="getData" resultFormat="e4x">

2nd. Now that we are returning the XML data in E4x format we can now use E4x to filter the data. Here is a quick example of how you would filter the data in a DataGrid:

<!-- HTTPService -->
<mx:DataGrid dataProvider="{data.lastResult.root.item(somenode != null)}"/>
<!-- Return One Record/Row/Result-->
<mx:DataGrid dataProvider="{data.lastResult.root.item(somenode != null)[0]}"/>
<!-- Web Service -->
<mx:DataGrid dataProvider="{wsData. getData.lastResult.root.item(somenode != null)}"/>
<!-- Return One Record/Row/Result-->
<mx:DataGrid dataProvider="{wsData. getData.lastResult.root.item(somenode != null)[0]}"/>

This is just one way of doing it, you have tons of different options. It all really depends on your project; typically, I bind the data to an XMLListCollection then filter the data by changing the source with the filter code and running refresh on the XMLListCollection.

 

“Cool so how do I implement this into my website?” – Its simple follow the steps below:

1. Download the component here SmoothImage (523) and place it in a directory called “custom” in your src directory.

2. Add the following code to your <application> tag:

xmlns:custom="custom.*"

3. To use it simply type “<custom:SmoothImage” you should see it show up as soon as you start to type cus.

That’s it neat huh.

Well no need to panic, some cool programmer dude wrote this component “SmoothVideoDisplay” (I think that’s what its called I’m too lazy to google it.) which fixes that problem so your video will look like this:

No jagged edges!

It uses Flash’s video smoothing component which apparently for some reason or another was not made an option in Flex’s VideoDisplay component. Maybe it was another rush thing or something.

Here is what you have to do to set it up:

1. Download the component here SmoothVideoDisplay (378) and extract the SmoothVideoDisplay.as file your “src” directory under a new directory “custom”

2. Add the following to your <application> at the top of your Flex application:

xmlns:custom="custom.*"

3. Now to use it all you have to do is start typing “<custom:SmoothVideoDisplay>”

That’s it simple huh.

Thanks to who ever wrote this component I love it and use it on all of my video based Flex projects.