Add new website IIS 7 (Vista)

Hello all,

For all of us programmers or web developers working with websites, you know the need to open more then one website (by default) on your development machine.

Sometime you need all a website to stand on its own and not be a sub directory or a virtual directory (like: http://localhost/your_webiste).

Why, well let’s say your using URL rewriting, then you need to use parent path’s like so:

   1: <img src="/Assets/Images/Avi.png" alt="" />

If you try to do this while using a VD you will get errors and your images won’t be displayed, you have to use a standalone website for this.

So, let me tell you how to do it with IIS 7 (I’m working with vista, it’s the same for IIS 7 on any other machine).

For all of you guys with XP out there, you cannot do this, so please other upgrade to vista or windows 7 (:-))

I have my own method of how to do this, that make me remember the web address easily.

It goes like this: if I’m working on my website (http://www.kensodev.com) the local version of it will be (http://local.kensodev.com –> link not working).

ok ok I’m getting there :-)

How to add a new website IIS 7 on Vista?

First, open IIS manager on vista (Start—>Administrative Tools—>IIS Manager)

2009-04-30_1927

On the left you will see the “sites” folder, right click on it and select “add website”, you will get this dialog.

2009-04-30_1933

Fill the text boxes just as I did, give it your own names of course and select the local folder where the files are located.

This is just about it for IIS, don’t try to navigate to the website yet, you will get an error.

Next step: Please open up notepad (with admin privileges), hit file—>Open (select *.*) and navigate to the folder  C:\Windows\System32\drivers\etc

You will see these files:

2009-04-30_1936

Click the “hosts” file and open it, If you didn’t define any website you will only see “localhost”

Now, we will add a record at the end of this file.

Type 127.0.0.1 and hit the TAB button on your keyboard, then type the name that you gave your website. In this case “local.kensodev.com” no need to type http:// or www.

2009-04-30_1938

That’s it.

Now, lets open up a browser an navigate to the website.

2009-04-30_1942

Just to check that the browser isn’t routed to a remote website lets ping to it using the command line.

2009-04-30_1943

And that’s the end, you have another website on your IIS, and you can browse to it.

Solo standalone mp3 player to embed in a page

Client’s request:

I want an mp3 player on my website (html), a kind of player which the user can’t pause or stop the song, also I want it to work in all browsers with no problem.

After explaining to him this is not very common and urged him to think it over, he insisted and I had to do what he asked me to.

Because of the cross-browser need, I had to use Flash/Flex for this job, but I also wanted to make this as reusable as possible for other project or for distribution as a component which I think a lot will want to use.

So, the plan was a very small player 100×20 (px), white background to blend in with the website.

2009-04-30_0036

I didn’t want to hard code the mp3 into the file, because this client is using a CMS application and he wanted to replace the file occasionally.

Opened up flex and started writing some code.

[as3]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="100"
height="20"
creationComplete="init()"
color="#FFFFFF"
backgroundColor="#FFFFFF" backgroundAlpha="0.0">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.messaging.Channel;

private function init():void{
var flashVars:Object = Application.application.parameters;
var mp3FileName:String = flashVars.mp3FileName;
if(mp3FileName!="")
{
playMp3File(mp3FileName);
}
}
private function playMp3File(mp3:String):void{
var snd:Sound = new Sound(new URLRequest(mp3));
var channel:SoundChannel = snd.play();
}
]]>
</mx:Script>
</mx:Application>
[/as3]

As you can see, the entire application is about 29 lines of code.

Code explaination

1. I declared an object that excepts the parameters passed into the FlashObject in the flashVars tag.

2. Checked if the param passed in is not empty and filled a Sound class with this mp3 and whallah –> Start playing.

This is what the HTML embedding of this SWF inside the HTML looks like:

[js]
WriteFlashObj(‘/SoloPlayer.swf’, ‘100px’, ’20px’, true, ‘mp3FileName={pageFileName}’, ‘SoloPlayer’);
[/js]

That’s it.

It works like a charm.

If you want the source code or the final SWF file, please contact me through the contact page of this website, I will email it to you with no problem.

 

Control caching of your RIA applications

For all of us working with RIA applications (Flex/Flash) we know the hell of having to worry about a user cache.

There’s actually a chance that a user won’t see the latest version of your application, the chances are actually quite high for that to happen.

Well, I have my own two methods that I use to control this.

Method #1

The first way to control this is by the use of a parameter attached to the file name.
Lets say your file name is kenso.swf (original name I must say :-) ). If you try embedding it into the HTML you will found out it is being cached. If you update the file on the server, you won’t see the changes.

The solution for this is simply add a parameter to the file like so: kenso.swf?buildDate=29Jan2009, this will cache as a file, if you change the buildDate param you will see that the file is being pulled again from the server

Method #2

This method is what I call overkill, but I did found myself using it a couple of times in the past.
I won’t get into code (unless you ask me to…), but the idea is this. There’s a service managing the builds of the application.
Each build of the application has an ID embedded inside the code like so:

   1: var versionLabel:String = "29Jan2009_01";

OK, so now we have the version label in the application. All we have to do is create a service, set the final version expected there say

   1: string finalVersion = "30Jan2009_09";

If the version passed into the service is not the latest, simply tell that to your user.

This process can be with or without a database, can be with ExternalInterface and the use of JavaScript, it can really be whatever you want.

I seriously recommend using the 1st way to do this unless you really want to make sure that the version your user is seeing is the latest.

Free flex uploader is coming along pretty great

Hello All,

I’m developing an Uploader component, for free use in your website or blog.
I’m using Adobe flex builder 3 for it, so the final result will be an swf you can simply embed in your real life website.

Well, this is not a release note, just an update.

I have completely changed the way you will configure the uploader. It used to be a couple fo JavaScript predefined function you should have used. I changed it to an XML config file, it has all of the parameters I could think of.

I’m pasting the xml straight from the development environment, its really important to me to hear what you have to say, I want it to be as user friendly as possible.

Please, if you think I should add another param or whatever, please drop me an email or send a contact through the contact page.

Here’s the xml

 

 1: <?xml version="1.0" encoding="utf-8" ?>
 2: <uploaderConfig>
 3:     <!--
 4:  Should be: http://www.your_domain.com/your_script.aspx/php/whatever :-) 
 5:  -->
 6:     <uploadScriptUrl></uploadScriptUrl>
 7:     <!--
 8:  Should be javascript funcion that gets a single param like so: progressEvent(progress)
 9:  You can display this to the user, or do other things you want.
 10:  -->
 11:     <progressEventListner></progressEventListner>
 12:     <!--
 13:  Same as before, javascript function that gets a single param > Error Message
 14:  errorListner(errorMessage)
 15:  -->
 16:     <errorListner></errorListner>
 17:     <!--
 18:  What do you want your users to upload?
 19:  jpg;mpg;wmv;flv
 20:  all other file types you want type here will be disregarded and an error will be raised.
 21:  -->
 22:     <fileTypeAllowed></fileTypeAllowed>
 23:     <!--
 24:  This is when i make your life easier.
 25:  You can pass me the file size in KB, the flex handles the translation to bytes :-)
 26:  How?... like so:
 27:  KB:250
 28:  Please do not use a double.decimal the, thoug you won't get en Error the flex simply will disregard this
 29:  -->
 30:     <fileSizeAllowed></fileSizeAllowed>
 31:     <!--
 32:  Javascript function for displaying the message to the user
 33:  -->
 34:     <completeListner></completeListner>
 35: </uploaderConfig>

You can also download the file from here: [download id=”1″]

This is what the uploader looks like, I tried keeping it A.S.A.P (as simple as possible :-) )

kenso_uploader

Waiting for your comments.

Strange flex bug – caching screens

Hello All,

Thanks again for visiting my blog, “From inspiration to realization”. The blog covers lots of  information about Web Development: Ruby on Rails, Java, Flex and etc.

The past week has been very frustrating for me. As you know (or not) I work quite a bit with flex development and AIR.

The environment for developing these applications is Adobe Flex Builder 3, I never had any problems with this piece of software, but this last week has been just horrible.

I will explain my problem.

As you know (again or not…) I’m not a designer and I don’t wanna be one, so… I got all of the designs from the designer of the project via PSD, cut all of the “assets” to use in my flex application and started off with building each screen.

As always, I wrote some CSS (yeah.. Flex has CSS, same as HTML), built an SWF file for holding all of the assets (SWC), and started dragging in controls.

All pretty basic so far, but…

Sometimes (well, all the time) the flex just refused to build with the recent changes.
After the first time I build an swf from the flex IDE, no change I made to the application actually “kicked in”.

Action-Script
Because even the labels on the buttons refused an update, I even tried to write it in Action-Script, that didn’t help me at all.
The application just would not update.

 1: private function initScreen():void
 2: {
 3:     screenMainText.htmlText="Please Choose which of the Questionnaires below you would like to compile for your Survey";
 4:     backButton.label = "Back to control panel";
 5: }

What did I do to see the updated?

I copied all of the code from the mxml file, deleted this file, created a new file, pasted in the copied code and WALLA, the updates “kicked in”

Strangely though even a project cleaning would not help

flex_issue

I emailed Adobe, but got no response so far, I will update here and tweet on the solution I hope they provide.

** I tried importing another project to the flex builder, but the error did not exist in another project, only in this specific project.

Flex "Verbal Month" date

Hi All,

If you are working with Adobe flex, you probably know that the framework does not have a function such as DateTime.Now().ToString().

Because of that, displaying a friendly date to the user is impossible unless you write a small extension to the getDate() function in flex.

This is the way to go

 1: var todayDate:String = "";
 2:
 3: private function INIT():void{
 4:     getCurrentDate();
 5: }
 6:
 7: private var monthLabels:Array = new Array("Jan",
 8:                                           "Feb",
 9:                                           "Mar",
 10:                                           "Apr",
 11:                                           "May",
 12:                                           "Jun",
 13:                                           "Jul",
 14:                                           "Aug",
 15:                                           "Sep",
 16:                                           "Oct",
 17:                                           "Nov",
 18:                                           "Dec");
 19:
 20: private function getCurrentDate():void{
 21:     var date:Date = new Date();
 22:     todayDate = date.getDate().toString() + " " + monthLabels[date.getMonth()].toString() + " " + date.getFullYear().toString();
 23:     datePickerButton.label=todayDate;
 24: }

That’s it, it’s that easy to get a date from flex.

You can of course extend it some more in order to get the day.