DeanLogic

According to the Flex Test Drive site, you can “Build an application in an hour”.  While that is definitely true for a simple application, I would say it takes a little bit longer in real life.  I started working through the Test Drive demo using the videos, which probably run less than an hour.  Since I am familiar with Flex/Flash Builder, it was easy enough for me to have the video running in the background while I built the application.  There were several times that I had to switch back to the video to get a better understanding of what needed to be done, but for the most part, I just listened and completed tasks.  I managed to complete the first module between last night’s post and about 9:45, which is around 2 hours.  However, I did have to upload the swf file to my website to see if it was working and my wife needed some attention on occasion.  Which means, I probably could have completed it in one hour, but I wasn’t timing myself.

The version of Test Drive I used required Flash Builder 4.5, which I was unable to upgrade to unless I buy an upgrade to the Master Collection suite. You save money by purchasing the suites, but in the long run, if you only need to update certain programs, it is a pain in the wallet.  Because I am on 4 and the demo was on 4.5, there were some small differences in the instructions.  When a search option is added, the search test field has a “prompt” option.  This is apparently a new feature with 4.5, because it is not available in 4.  Not a huge issue, but it will be interesting to see what else is new in 4.5 that will affect the Test Drive.

Overall, building this simple application was straight forward.  Creating stages was very simple in Display view.  Just create the stage, add components, create a new state and add different components.  Presto!  You now have to different stages.  Then it was as simple as adding a click option to a button to call each of the stages and then adding a very simple call.

currentStage = "stageIwantToPointTo";

The drag and dropping of data connectors was also very useful.  After you have your data connections working, you simply just drag and drop one onto a datagrid or form and do a few setup options and it is done.  Making a item detail view was also just as simple as a few drag and drops and some minor code.  The Test Drive so far could probably make anyone believe they could create awesome applications in no time at all.  However, you are just creating basic applications very quickly.  As noted in the last video of the first module, the instructor explains that doing a search to filter the employee table by calling the web service is not a smart thing to do.  Each time a search or refreshing to show all records was done, it did a call to the web service to get the data.  The instructor points out that it would be better to only call the data once and then use filters in the application to show what was needed.  It doesn’t look like Test Drive actually goes over this, so the newbie Flex/Flash Builder user will have to figure this out on their own or possibly through another set of tutorials.  For now, here is the result from last night’s work.

On a side note, apparently either Flex or Zend or something triggered a bunch of Twitter Spambots or something, because the Twitter widget on the Demo site is now filled with pointers to Zend post I created last night.  I guess it helps with search engine links or something, I don’t know.  I find it kind of funny.

Dreamweaver has a Widget Browser for checking out the free and paid Dreamweaver widgets in the Adobe Exchange.  The benefit of the Widget Browser is that you can easily see which ones you have installed and what is available without having to go to the website.

When you decide on using one, then you can use the Widget Browser to configure the widget, so some success.  It all depends on the developer as to how useful the widget configuration is and customizing your selected widget.  I downloaded and installed the Aqua Button, the Weather Updater and the Twitter widgets.

The Weather widget has the configuration screen so that you can see what was setup, but you can’t edit the cities displayed in the widget and set it as a personal preset.  But, since I could see the code behind, I did a quick search (weather ‘INXX0012′) and figured out it was using city codes from Weather.com.  Once on the site, I looked up some cities and took the code from the URL.  Then I put the city codes into the function call that places the widget on the page.  The style sheet for the widget didn’t display the full widget, so I had to adjust the height slightly in order to see the “Read full forecast” text at the bottom of the widget.

The Aqua Button widget configuration has a lot more options, which allow you to change size, color, font and even add the text.  However, after saving the settings and attempting to insert it into page, the settings didn’t really change anything on the buttons.  As stated before, it possible that the developer of the widget didn’t do something right and that is the reason that the changes I made to my preset didn’t appear on the web page.  Which brings me to the Twitter Client.  UPDATE : The preset options do show up in Chrome.

The Twitter Client confirmation screen has plenty of options for changing the color, font styles and even pointing to a Twitter account.  However, it only shows either tweets from, to , mentioning or tagged, but not all (at least from what I see).  I made a personal configuration, saved it and then inserted into the Demo site page.  The changes I made in the configuration showed on the page, just as it looked in the preview for the configuration.  The only small issue deals with the how the preview looks and how it actually works in the site.  If I decided before hand on the width of the all the widgets, then I could have easily entered in that value.  But, since I am just throwing things on the Demo page and seeing what would stick, I decided to change my preset and then re-insert it into the web page.  It would be nice if there was a link between updating the preset and having it change in the Dreamweaver site.  Because it isn’t very hard to delete the widget code, you can select the main tag and collapse the code, it isn’t a huge issue.  Also, I could have still just updated the inserted code to include the changes I made to the widget.

After I inserted the Twitter Client, the Weather Update client stopped working.  Not a very good sign.  Hopefully it means the Weather.com site is down.  If it doesn’t come back, I guess I’ll have modify the widget to get it to work again.

I have created a Demo site using Dreamweaver.  I used a HTML5 template, because I figure I probably should learn some HTML5 while I am doing this.

The first thing I had to do was setup a ftp user on my website and give the user access to the “demo” folder.  To make things simple, I also created a subdomain for the demo folder (http://demo.deanlogic.com).  Unfortunately, the Dreamweaver template is a little finicky and the path url to the image wasn’t correct on my first couple of attempts to drag and drop the image into the page.  Also, the css added to the page when using a pre-defined template causes hickups when you delete code.

For now, I have just removed the default text on how to use the template and added my site’s logo. Baby steps.  Because I created the index page as a php type, I can add a little php code to the page as part of the example.  A quick demo would be to add the copyright notice in the footer.

As most coding sites do, php offers examples at the bottom of the functions page.  This is very helpful if you don’t fully understand the function.

To create a copyright notice that continues to update without intervention, you only need to get the current year and display it after the copyright text and symbol.

Copyright &copy; <?php echo date('Y'); ?>

So that it is a little more “authentic”, the copyright year should probably be in the format of a range (i.e. 2007-2010).  This way, you can have a static start year and a continuing end range.  Since the start for the Demo site is this year, then I will be a little more tricky and only do the range once the year flips over to 2012.

Copyright © 2011
<?php
if(date('Y') != 2011) {
print(' - ' . date('Y'));
}
?>

Actually, not very hard or tricky to do.  Just check to see if the current year isn’t equal to the set year (i.e. 2011) and if it isn’t, then print out the dash and the current year.  The start year is static.

I’ll probably add some more simple php script to the main demo page later.  I know I will probably have to use some other php script for other examples in the future.