48 Hour Challenge with filmSPARK

A few weeks ago, during our monthly meeting, a member of The RTP “Let’s Make a Movie” Meetup group mentioned the SPARKcon Festival coming up in Raleigh.  SPARKcon has been going on for 6 years and last year they added a 48 Hour Film Challenge to their filmSPARK.  At first I was a little hesitant about doing the challenge for a few reasons.  One, the 48 Hour Film Project, cost over $100 to enter, so I didn’t know how much this would cost.  Second, it was very short notice, so I didn’t now how many people I could get to do the film.  And finally, I had to okay it with the wife, since she enjoys spending time with her husband on the weekends.  Well, I found out that the challenge was free, the wife was okay with me filming for the weekend and so I set out to get recruits from the group.  I was surprised to get more than a handful of people signed up, even if I had some communication issues.  Also, my main camera guy said he was available for the shooting day, which would make life easier for me.

On Friday Sept. 9th, I drove down to Mission Valley Cinemas to pick up my team packet.  The pickup time was between 8:00 and 9:00 pm.  This is a late starting time, but then it gives you more time on Sunday for editing.  I was the first person there and had a nice little conversation with the challenge hosts before picking packet number 7 for my team.  I headed on home to beat the crowd that was supposed to meet at my house for brainstorming and writing.

The were some more communication issues, but eventually everyone showed up and we started kicking around ideas.  The packet contained or film elements, which were an oven mitt as a prop and the line “God, I love being a turtle!”   Apparently this was from a Teenage Mutant Ninja Turtles movie, because each team had a different movie line, but the same prop.  This was different from the 48 Hour Film Project, where each team had the same prop, line of dialog and character, but drew different genres.  The challenge only had a few genres and we selected Action/Suspense/Thriller for ours.  The time limit for the challenge was also shorter, only 5 minutes.  When the brainstorming started, we had several ideas, but it seemed a little impossible to tell the entire story in the short amount of time.  Most of our ideas when down the path of The Tortoise and The Hare, due to the nature of the line.  We even pondered doing a car chase.  In the end, we decided to go with a simple story of a person suffering from agoraphobia attempting to make her way outside.  After coming up with the basics of the story, the writer and I hashed out what seemed to be a barely over 2 minute long movie.  I wasn’t very pleased with the length.

On Saturday morning, I woke up at my normal time and started prepping my house for the shoot.  I had to clean out my kitchen of stuff and set the stage.  The benefit of this was, after the movie was done, my kitchen was picked up and clean!  After everyone showed up, we gave the actors their lines to go over and I walked out the first shot with the camera guy.  After a few walk through shots, we put the actress in her spot and started filming.  The great thing is, we only did a couple of test shots and then we were off to the races with the rest of the shots.  A couple of our actors had to wait around until 2 pm to say their lines, but that gave them more time to rehearse. In fact, the other female actor was rehearsing while looking through the sliding glass door at the back of my house.  At first we thought she was trying to say something to us, but then realized she was just going over her lines.  After a while, it seemed a little creepy.

Since the camera guy has a bunch of equipment, we setup a spot light and put a mic on the main character, just in case the volume from the camera wasn’t good enough.  In the end, we used only the sound from the camera.  We completed filming before 4 pm and tried to wait for the sun to get in a better position for a particular through the window shot.  Unfortunately, it didn’t work out and the shot wasn’t used.  After downloading the files, the editor started to work on the shots.  I download the film as well, but not the audio. Thinking that I would wait and get it from the editor, I didn’t do any editing, instead I cleaned up the house and called the wife to let her know we were done for the evening.

On Sunday, the editor and writer came over and we started cutting everything together.  After getting the rough cut down to a almost final cut, I got a hold of my F/X guy and we headed over to his place to add special effects.  Well, he had computer issues the week before and the editor’s computer kept putting out glitchy versions.  After attempts to do this and attempts to do that, we loaded the entire footage on to the F/X guys computer and he put in the special effects.  We didn’t have time to adjust the color, but I thought it looked fine.  With about 20 minutes to spare, I headed back to Mission Valley to drop off the final product.

The most frustrating part of this was the fact that we finished filming early on Saturday and Sunday was spent waiting for files to load.   Lesson to be learned, downsize the footage before editing.  The play back of the video submitted seemed to skip and jitter.  However, when the F/X guy played it again later and uploaded it to YouTube, everything seemed fine.  So, I just put the thought aside that there was something wrong with the film and waited until the screening.

On Sunday Sept. 17 at Kings in downtown Raleigh, they showed the 14 entries of which 12 qualified for.  Some of the films seemed much longer than 5 minutes, some had stories that didn’t seem to go anywhere and then there were some good films.  At most, I didn’t think we would win, but possibly be in the top of the group.  And that’s what happened.  A mockumentary about reality tv’s won the overall award, deserving so.   Our film, plus two others won honorable mentions.  I’m very proud of this film and I think it is my best film to date.  After a year, I think I’m getting a better at this movie stuff.

For your viewing pleasure : A Step Outside

Flex Test Drive in about an hour

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.

Zend AMF and Flash Builder

While I was pondering creating the Flex/Flash test application for the Demo site, I ran across Flex Test Drive.  I remember reading it before and couldn’t remember why I didn’t go through with the example….then I tried connecting to the php web service.  The Flex Test Drive gives you three options for a server:  Java, PHP and ColdFusion.  I don’t have a ColdFusion or Java option on my hosted website, so PHP was the way to go.  I also didn’t want to bother installing a web server locally, because I want to post my examples on my site.  Because of this, installation is probably not as straight forward as I hoped it would be.

The first part of Flex Test Drive creates the starting application, which you choose the server backend.  Since I wanted to use my website as the server, I put in http://demo.deanlogic.com for the Root URL.  The example points to a local web server, so this is where I started to diverge from the game plan.  The next part was to create a database using MySQL server and then add some basic components to the application.  All of that went fine, after a few short hick-ups in the sql statement to populate the tables.  The next step is connecting to the database using the PHP remote connection and that’s where I got into trouble.

The PHP remote connection uses Zend AMF, which is part of the Zend Framework. Apparently in Flash Builder 4.5, the integration is even closer.  However, part of the setup of the PHP Zend AMF connection adds the Zend Framework to the application directory.  Once that is added, you have to updated the amf_config.ini file to point to the framework and library directories.  This is were it got a little confusing for me.  Since the initial directories are locally on my PC, I didn’t know which directories to use; UNIX or Windows.


[zend]
;set the absolute location path of webroot directory, example:
;Windows: C:\apache\www
;MAC/UNIX: /user/apache/www
webroot = /home/users/web/deanlogiccom

;set the absolute location path of zend installation directory, example:
;Windows: C:\apache\PHPFrameworks\ZendFramework\library
;MAC/UNIX: /user/apache/PHPFrameworks/ZendFramework/library
zend_path = ZendAMF/Zend/ZendFramework/library

[zendamf]
amf.production = false
amf.directories[]=services

My first attempt was to use the UNIX directories, but it would end up with not being able to find the include files.  I even downloaded the ZendFramework from the Zend site and loaded it up to my site.  Nothing seem to work.  I even tried altering the gateway.php file to point directly to the directories without using the check code included.  Going directly to the gateway.php on my website would show the same error I was getting when connecting.  So, I figured I could modify the init file until that error went away.  After several attempts at different directory options, I finally saw “Zend Amf Endpoint” on the gateway page.  Woo hoo!!

Unfortunately the PHP remote connection still wasn’t working, which is when I noticed that it said something about the release folder and the gateway file.  When I initially deployed the Flex application, it was under the bin-debug folder, while the ZendFramework was a few levels higher.

By moving all of the deploy files to the same level as the ZendFramework folder, I finally got the PHP Zend remote connection to work.  When the connection works, it uses the EmployeeService to get information from the database to be used in the rest of the Test Drive demonstration.

Hopefully later I get the directory setup so it is a little cleaner.  It seems that everything I add just drops into the main folder.  The Dreamweaver Widgets did this as did the CSS from the style sheet.  I prefer things to be much more organized.  But, for now, I’m glad the data connection is working so I can move on with the Test Drive.

 

ArrayCollection in an ArrayCollection

At work I am trying to display a bunch of information retrieved from a web services.  The data has a header table (top item) and then supporting item tables (sub items).  My current data only brings back one top item, but I have set it up to display multiple top items using a HorizontalList.  I created a custom component based on a Form, which allows me to easily display header and values.  In the future, I can probably use the form for inputs, but for now it is just displaying.  I am also using an Accordion container to display each of the header items that are wrapped in an overall item.  In each Accordion item, I dynamically create a box, to hold the form, which is dynamically created by passing it in as a new ClassFactory.  The Form acts as an item render in the HorizontalList.  Well, the problem I ran into is, that you can only pass in one DataProvider into the HorizontalList.  This was causing an issue with an item that would have an over all header information and then a DataGrid full up sub items.   After starting to fuss around with other options, it occurred to me to pass in the sub items as an ArrayCollection type.

For example, if I had a class called MyObject


package {

public class MyObject {

[Bindable]
 public var ID:Number:

[Bindable]
 public var Name:String:

[Bindable]
 public var itemList:ArrayCollection
}
}

And earlier I populated an ArrayCollection called itemListArrayCollection with data, then I wanted to add this to an ArrayCollection called myMainArrayCollection, it would look something like this.


var newObject:MyObject = new MyObject();

newObject.ID = 1;

newObject.Name = 'Test';

newObject.itemList = itemListArrayCollection;

myMainArrayCollection.addItem(newObject);

Then, in the Form I created to display the items, I would set the FormItems to show ID and Name


<mx:FormItem>

<mx:Label text="{data.ID}" />

</mx:FormItem>

<mx:FormItem>

<mx:Label text="{data.Name}" />

</mx:FormItem>

And the DataGrid within the form would get it’s DataProvider through the initial data value.  I can also point to the columns (DataFields) in the itemListArrayCollection in order to set up the DataGridColumns.


<mx:DataGrid dataprovider="{data.itemList}">

<mx:columns>

<mx:DataGridColumn DataField="listField1" />

<mx:DataGridColumn DataField="listField2" />

<mx:DataGridColumn DataField="listField2" />

</mx:columns>

</mx:DataGrid>

I’m sure I’m not the first person to pass an ArrayCollection inside of an ArrayCollection, but it was an “ah ha!” moment for me today.  I’m not sure if it is considered best practice to do this, but it works for what I need much simpler than trying to create a component to receive multiple multiples of DataProviders.  Once I get things straightened out with the current web services, I know I will have to go back and probably have an overall ArrayCollection with 3 – 5 ArrayCollections passed into it.

Adobe BrowserLab

I decided to take a glance at the widgets I put in earlier today and stumbled onto a nice little tool over at Adobe.  In Dreamweaver you have a few options for viewing your work to determine how it will look in the real world.  The first method is to use a split view, which gives you one frame of code and another frame of design.  The obvious benefit is that you can quickly find your code problems before sending it up to the site.  However, as you notice from the image below, it might not actually be what  you really see.

Adobe apparently has their previewer using some of the same code as Chrome, because the color changes I added to the Aqua Button widget show in the preview but not in my FireFox browser.  Dreamweaver helps you determine what the page will look like in the real world, without loading every version of every browser, with a Preview Menu.  On the menu are the browsers loaded on your PC and then a couple of other options.

There is a Preview in BrowserLab option that launches Adobe BrowserLab.  This, complimentary until April 12, 2012, tool allows you to view a web page in multiple browser simulators.  The browser choices even differentiate between OS version, because there are FireFox for OS X and Windows options.  The menu launches BrowserLab with your file version of your page or  you can load your site using the URL.   You can select multiple browsers for viewing the site, but BrowserLab will do a initial loading of all the select browsers before you can view.  Once everything is loaded, you can switch between the browsers selected and view 2 browser options at the same time, either in split view or onion layers. From the screen shot below, you can see that Chrome displays orange buttons, while FireFox does not.  This makes BrowserLab a very useful tool for quickly viewing your website across many browser version.  I hope that Adobe keeps it free for those who have Dreamweaver.  I also have used Adobe Story for some movie projects, which also has a “complimentary until April 12, 2012″.  I am guessing Super Duber Master Creative Collection Suite 6 will be launched then.  Maybe by then, I’ll have made some money off of one of my hobbies to pay for the expensive upgrade.

The other option on the Preview menu is Preview in Device Central .  Device Central is part of a few different Adobe applications.  It makes sense that Dreamweaver would give a device preview.  Everybody wants to know how their site will look like on mobile devices or a tablet or even a television. Yes, a television.   There is a device library that allows for downloading of different device profiles.  Even though Apple doesn’t like Adobe much, apparently Adobe is nice enough to provide iPad and iPhone profiles.  There are also BlackBerry phone and tablet profiles and bunch others.  And if Adobe didn’t create a profile you are looking for, apparently you can create one and share it in the library.  Once you have download the profile, you can add it to your test devices.

Finally, you can use the Multiscreen Preview to see how your site will look in different screen resolutions.  The default sizes are Phone (320 x 300), Tablet (768 x 300) and Desktop (1126 x 276).  Since these dimensions won’t fit all issue, you can modify the sizes, however, they might not fit neatly in the three pain window like the defaults.  You can also use this tool to setup multiple css files to be shown based on the size of the screen (small, medium, large).

With all of these tools, it will be easy for anyone to prepare their site for almost any possible viewer.

Dreamweaver Widgets

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.

Adobe Edge and HTML5

Last night I downloaded Adobe Edge, which is Adobe’s tool for creating HTML5 basic animations.

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. This is an early look at Edge with more capabilities to come.

The current capabilities are very limited.  You can added Text and boxes to a canvas, plus you can import images.  There is a timeline, similar to what is seen in Adobe Premiere and I guess now Adobe Flash.  I haven’t looked into Adobe Flash very much, but I have been using Premiere for my movie projects. In the timeline, you add key points and then you can alter the color, scale, skew, position, opacity and rotation. It is fairly simple to use.  When you click on the object you have added and make a change using the properties panel, it automatically enters a layer for the effect.  I added the effect I created to the Demo site, but it only ran once.  The “Preview in Browser” works fine, but copying the JavaScript links and files, plus adding the div tag seems to not work entirely.  I probably broke it when I added my site logo to the animation. Anyway, I’m not that overly impressed.  I see articles that HTML5 will be the end of Flash.  Apparently these authors know nothing of Flex and that’s probably Adobe’s fault for melding the names together.  Yes, Flash is a timeline based animation tool, but it does a little more than that.  Flex is an application tool that outputs to Flash.  I’m not sure if Flex can be displayed using HTML5.  Just like Java, CGI and Perl haven’t gone away, I don’t see Flash going away, even if a certain fruit company has a problem with it.

Regardless of my first attempts with Edge Beta 2, I will be trying to add HTML5 elements tot he Demo site, because it is the latest buzz word and well, I’ll let Larry Ellison explain it.

SAP web services and Flex

The company I work for uses SAP for their CRM (Customer Relations Management) solution.  We were on Oracle, but after being bought out by ze Germans, we had to switch to SAP.  The idea was to integrate the German offices with the American offices. That never happened and we ended up splitting off from the Germans this year.  However, SAP is still with us.  My boss requested that I create some sort of application to check if the web services called by our mobile CRM application, Service Data Automation (SDA), (created by me) were working as part of an overall systems check method.  The logical answer is, if the requests aren’t going through, then there is something wrong with the web services.  But, regardless of the obvious, it would be a good opportunity to show what Flex can do.  And if I can get the connections setup in Flex, then it would be a step closer to building a BlackBerry PlayBook or QNX enabled handheld device option using Flex.

The web services called by the SDA application actually use a middle-tier .Net platform (which I didn’t create) .  Since those that did create it and maintain it are no longer with the company, I have to figure out what each of the web services are doing.  I had created a Flex application earlier that connected to the SAP web services, but it is different than the web services used by SDA.  Luckily, I wasn’t the only one to go down this road.  At Computers Should Be Less Friendly, the author gives a quick an dirty example on how to connect to a SAP web service.  The only thing is doesn’t cover is the certification of the user.  For SDA, we created a generic user whose password never expires in order to process web services calls.  The web services still check to see if the person making the call is a valid user, so we have to pass in that identification as well.  But, by having this user, we only need one log-in and it won’t expire every 30 days (ugggh!!).

The normal connection string contains the username and password.  Usually I would store the user and password in order to switch the values when pointing to different instances.  It would look something like this.


http://crmurl.de:8033/sap/bc/srt/rfc/sap/ZCRM_DATA_WS?sap-client=sapClient&wsdl=1.0&style=rpc_enc&amp;sap-user=" + sapUser + "&amp;sap-password=" + sapPassword;

To add the user, password and client information, you need to add header information to the web service.


var sapWS:WebService = new WebService();

sapWS.headers["Authorization"] = "Basic " + encoder.toString();
sapWS.headers[ "sap-user" ] = sapUser;
sapWS.headers[ "sap-password" ] = sapPassword;
sapWS.headers[ "sap-client" ] = sapClient;

For my web services check, I made the web service dynamic by using a switch to determine the end point and uri of the web service.  On the display, I setup a ViewStack that contained a form for entering in parameters and a button to kick off the web service.  The button pointed to the function that built the web service and provides the case value.


switch (wsCheckName) {
case "PartLookup":
sapWS.wsdl = serverStartURL + partsLookup_WSDL + serverEndURL;
sapWS.addEventListener(LoadEvent.LOAD, partsLookup_load);
sapWS.addEventListener(ResultEvent.RESULT, partsLookup_results);
break;
case "InventoryLookup":
sapWS.wsdl = serverStartURL + inventoryLookup_WSDL + serverEndURL;
sapWS.addEventListener(LoadEvent.LOAD, inventoryLookup_load);
sapWS.addEventListener(ResultEvent.RESULT, inventoryLookup_results);
break;

}

The one thing to keep an eye out for is to verify if the web service is the same as the end point.  I believe that normally, this would be the case.  However, the person who created our custom web services in SAP apparently didn’t keep the naming convention the same.  So, I couldn’t pass the WSDL parameter (i.e. inventoryLookup_WSDL = Z_CRM_SDA_MAT_INV) in as the Operation call, because it was different.


<wsdl:portType name="Z_CRM_SDA_MAT_INV"><wsdl:operation name="Z_CRM_SDA_MAT_INV_DISPLAY"><wsdl:input message="tns:Z_CRM_SDA_MAT_INV_DISPLAY"/><wsdl:output message="tns:Z_CRM_SDA_MAT_INV_DISPLAYResponse"/></wsdl:operation></wsdl:portType>

Luckily, it is just a matter of pulling up the WSDL and finding the operation name and using that in the LoadEvent function.


var op:AbstractOperation = sapWS.getOperation(inventoryLookup_op);

var bapiInput:Object = new Object();
bapiInput.INVENTORY_DATA = new Array();;

bapiInput.R3RFCNAME = new Array();
bapiInput.R3RFCNAME.push(R3Destination);
bapiInput.LOCATION_DATA = new Array();
var locationRow:Object = new Object();
locationRow.WERKS = inventoryForm.ilWharehouse.text;
locationRow.LGORT = inventoryForm.ilBin.text;
locationRow.ALWAYS_SEND = "1"
bapiInput.LOCATION_DATA.push(locationRow);

bapiInput.MESG_T = new Array();
bapiInput.MESG_T.push();
bapiInput.MATNR = new Array();
bapiInput.MATNR.push(inventoryForm.ilPartNumber.text);
bapiInput.QUANTITY = new Array();
bapiInput.QUANTITY.push("1");

The biggest problem right now is building the tables and passing in the correct values to the proper columns.  WERKS?  What the heck is that?  I think it’s the Wharehouse and LGORT is the Location.

UPDATE

It seems that the header credentials never really worked.  The only thing that seems to work is putting the sap-user, sap-password and sap_client onto the end of the WSDL URL.  And, after figuring out that worked for the first part of the web service call, I tweaked and tested and tweaked and test until I cam across the obvious (not so to me at the start) solution that those values are also required in the endPoint URI.  Before, I kept the WSDL and endPoint URL/URI separate thinking that the extra information wasn’t need in the endPoint.  Well, it is now obvious to me that it is needed.  So, forget the headers part, it doesn’t seem to work, but the URL values works like a charm.

For each case, I added a second line to set the endpointURI.  It is exactly the same as the wsdl.  I also added the encodeURI function as well.


sapWS.wsdl = encodeURI(serverStartURL + partsLookup_WSDL + serverEndURL);
sapWS.endpointURI = encodeURI(serverStartURL + partsLookup_WSDL + serverEndURL);

For the serverEndURL, I make sure I have the sap-user, sap-client and sap-password.  I created a couple of new parameters to hold the current password and client based on which instance I want the application to point to (Dev or Test).


serverEndURL = "?wsdl=1.1&style=rpc_enc"
+ "&sap-user=" + sapUser
+ "&sap-password=" + currentPassword
+ "&sap-client=" + currentClient;

The Demo Site

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 &copy; 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.

Time for some practice

While I was at work pondering what other better careers there might be out there, I decided that I probably should make sure my skills are up-to-date.  Since I am limited to what software I have installed on my home PC, I will be brushing up on those skills and learn some new ones in the process.  The best way for me to learn something is to actually have something to do, instead of just reading through a book and trying to absorb it.  I’ve absorbed plenty of useless facts by reading, but that doesn’t beat actually putting to work knowledge that has been gained.

I plan on going through the Flex/Flash Builder and attempt to use as many features as possible.  In order to do this, I’ll need to have something things setup to show what I create in action.  Beyond having a website available to do this, the first step is to setup a empty database and tables on the site, so I can input data and retrieve data.  I’ll use Google Docs – Drawing to map out the basic database and post it below.  It’s not exactly a database mapper, but it is free and pretty simple to use.  I’ve embedded the published page, so if I make updates, it should update what is seen below.

To keep things simple, I’ll just create a 3 table database for now.  A Customer, Address and Contacts table.  By not including the address or any contact information in the Customer table, I can create multiple contacts types and addresses for each customer.  For example, if the customer has an e-mail, main phone and cell phone as methods of contacting, then I would have 3 entries in the Contact table for the one customer.  Later, I should add a boolean value to determine which of the Contacts is the primary and make sure the method of input verifies only one Contact is selected.  Like wise for the Address.  The address could be the physical, delivery, billing or another type of address.  If it is the physical address, I will probably want to add Latitude and Longitude information, in order to connect any map tools.  And, I will need to added a primary flag as well.  I added a Nickname field in order to give the location a name relative to it’s purpose.  An example of this is a customer with multiple satellite locations.  You still have the one customer, but there are multiple physical addresses.  Most likely, in real world situations, the customer would have multiple customer accounts for each of the physical locations.  I’m sure a debate would be endless on the merits of both.

Another thing to consider is the Type values.  Some would probably argue that the proper way to handle the types is to create a table for the Types and use the ID in the Customer, Contact and Address tables.  Of course, this would also require setting up a table to determine which types would go into the corresponding list value.  This is why you map out your database before you start creating it.  Which I didn’t, but since I don’t have any data in my database, I can easily change the column types.  I could have made it even more lose on the tables and called the Customer table something like Human and allowed it to be any type of Human that will be using the application, but I think that is fine.  The only issue is, that the Address and Contact tables are actually just Customer Address and Customer Contact.

I am using MySQL 5 for my database, because that’s what comes with my website.  The site also uses Perl 5 and PHP 5, so I will be using PHP for any back end scripting that I need.  Since I have Dreamweaver installed, I plan on creating a demo site using that, instead of just adding pages inside of my WordPress blog.  This will also give my wife the opportunity to see how Dreamweaver works.  I would like to figure out some skinning for Flex, so I will use Fireworks and possibly Flash Professional for that.

Now that I have my basic database setup, it is time to figure out how I am going to go about down this learning/refreshing path.