HomeAbout Mark van HedelContact Mark van Hedel



Using FLEX for input forms in BlogCFC :: Part 2

To continue the little project I started the next part was getting all info about the post and user in my application. Starting with the user information and setting up the page that has to run the flex application. To make the changes I just ran my application in FlexBuilder, this would generate the html page for me and give me the swf file.

Now to make changes in that html and make it a cfm I just renamed the resulting file in .cfm and went editing in there.

First I started with just copying a piece of code from the addComments.cfm file to check if an ID is provided and if that is not the case just close the window.

<cfset closeMe = false>
<cfif not isDefined("url.id")>
   <cfset closeMe = true>
<cfelse>
   <cftry>
      <cfset entry = application.blog.getEntry(url.id,true)>
      <cfcatch>
         <cfset closeMe = true>
      </cfcatch>
   </cftry>
</cfif>
<cfif closeMe>
   <cfoutput>
   <script>
   window.close();
   </script>
   </cfoutput>
   <cfabort>
</cfif>

After that I wanted to make sure that if visitors wanted to keep their information that would still work, so I added another piece for retrieving visitor cookies and getting them available. Since at any point if I want to close this window I have to do that in Javascript I also added a close method to the javascript part to be able to close the window at any time.

<script language="JavaScript" type="text/javascript">
// <!--
var rememberMe = false;
var posterName = '';
var email = '';
var website = 'http://';

<cfif isDefined("cookie.blog_name")>
   <cfoutput>
      posterName = '#cookie.blog_name#';
   </cfoutput>
</cfif>
<cfif isDefined("cookie.blog_email")>
   <cfoutput>
      email= '#cookie.blog_email#';
   </cfoutput>
</cfif>
<!--- RBB 11/02/2005: Added new website check --->
<cfif isDefined("cookie.blog_website")>
   <cfoutput>
      website = '#cookie.blog_website#';
   </cfoutput>
</cfif>   

function getName(){
   return posterName;
}
function getEmail(){
   return email;
}
function getWebsite(){
   return website;
}

function closeWindow() {
   window.opener.location.reload();
   window.close();
}

function getID() {
   return <cfoutput>'#url.id#'</cfoutput>;
}

// -->
</script>

Last part I did in this file is set the title, this is also just like it was done in the original file, so just copy this over to make it work.

<cfoutput><title>#application.blog.getProperty("blogTitle")# : #rb("addcomments")#</title></cfoutput>
   <link rel="stylesheet" href="includes/style.css" type="text/css"/>

Now that we created these methods in Javascript we can call them from FLEX to use the information. So I created a method in my CommentsAs.as file to retrieve the information from JavaScript.

/**
* Fill with default values if a user has decided to remember it's settings.
*/
private function fillComments():void {
   commenterName.text = ExternalInterface.call("getName");
   email.text = ExternalInterface.call("getEmail")
   website.text = ExternalInterface.call("getWebsite");
   if (commenterName.text.length >= 2 || email.text.length >= 5 || website.text.length >= 10){
      remember.selected = true;
   }
}
This method is going to be called in our creationComplete function. This should fill in the values might someone have told to remember it's information. With the Static ExternalInterface Class we can call Javascript functions, we just add the name of the function we want to call as a string and it will be called, in case we want to add variables to the call we just add them to the method as extra properties. I've now also mapped how all are files are going to be placed inside the project. Some files we already used, some are new and going to be used later. My entire project structure now looks like this :
/Comments
|bin-debug
|-css
|--flexform.css
|-Comments.cfm
|-Comments.html
|-Comments.swf
|src
|-actionscript
|--CommentsAs.as
|-css
|--flexform.css
|-org
|--flexpair
|---blog
|----responders
|-----EntryResponder.as
|-----ResourceBundleResponder.as
|-----SubmitResponder.as
|----vo
|-----CommentVo.as
|-----EntryVo.as
|-----ResourceBundleVo.as
|-Comments.mxml
All files in the org.flexpair.blog package are Actionscript Classes, the CommentsAs.as file is an include of the Comments.mxml file. This include file is where I put all the actionscript needed in the main file.

This should do for today, more is going to be posted again later this week.

Comments
BlogCFC was created by Raymond Camden. This blog is running version 5.9.002. Contact Blog Owner