DeanLogic

Since I don’t keep as up-to-date with tools at work as I would like to, it came as a little bit of a surprise that Adobe had given Flex over to the Apache foundation as Apache Flex.

Obviously, I was a little slow on the uptake. However, things really didn’t get rolling until last year.

And in February, Apache Flex released its first true new version of Flex with Flex 4.9. The last true version of Adobe Flex was 4.7. The Apache 4.8 version was just a migration of the project and basically the same as 4.7. Since I’ve been busy learning the new spark components in 4.6, I wanted to make sure things worked the same in Apache Flex 4.9. The install of Apache Flex was fairly simple. They have installer applications to make things simple and it connected fine to my version of Flash Builder 4.0. All I had to do was click on the application Properties and change the Flex Compiler to Apache Flex 4.9. Everything compiled and ran as expected.

I hope that Apache does well with Flex and it continues to grow and expand. I’m trying to learn how to create a BB10 application using Adobe AIR, which is supported by the Apache Flex, just like Adobe Flex did.

I have been meaning to get started on some BlackBerry 10 development, so I loaded the SDK for AIR and Flash Builder 4.6. With Flash Builder 4.6, you are supposedly able to create an iOS, Android or BlackBerry (tablet and BB10) application all at the same time. However, when you build for the least common denominator, you lose functionality for a specific platform. Because of this (and that I really don’t need to develop for iOS or Android at the moment) I started an application only for the BlackBerry.

While attempting to install VMWare for the virtual machine that allows for running the device simulators, I ran in to an install error. Apparently the key to this was to stop the installation right after you start, before it asks you to begin the final step and the actual install. At this point, the temporary files are extracted, which you should move to a new temporary folder location. When the files are there, stop the first install and then install using the msi file in the new location. I would give a screen shot of the point to stop the install, but I don’t want to uninstall it to get back to that point.

The good news with the BB10 simulators, is that I don’t have to configure a virtual machine, unlike how I had to do with the PlayBook simulator. Instead, I just go to the BlackBerry 10 Simulator program and run it to display the virtual machine simulator. Once it is running, then the Flash Builder can detect it so it can be set as one of options for debugging or playing. My only gripe is, the virtual machine image is much larger than real life and my normal display. I had to turn one of my monitors in a portrait position to run the simulators without the need for scrolling.

If I wanted to create a basic application, then I could have continued on my way with a View Navigator and such. However, I wanted to make sure I was utilizing all the features I could, which means using the native extensions and libraries. In the documentation for Configuring AIR, they show how to add the native extensions and that is pretty straight forward.

I did this and moved on. But, I wasn’t getting anywhere on how to create my screens. So, I imported the Hello World application located in samples directory of the installed SDK. When I did the import, it was full of errors that it couldn’t find qnx libraries. After making sure I did everything in the instructions, I did a search trying to find out why the library was missing. I found something on the support forum about looking for the correct path of the swc files. Not knowing if they libraries were setup correctly, I removed the ones that were there and then added the ones I could find under the frameworks.

That’s all it took…..besides correcting the old library paths with new library paths changed since version 1 of the SDK.  I probably won’t need all the libraries, but it doesn’t hurt to have them available at the start.

And so begins the road of banging my head on my desk trying to figure out what is NOT documented for creating an application.

When I started hearing about QNX and BB10, I have always had the impression that the goal of the BB10 phones is that everything is an accessory to the phone.  Since… forever, there has been talk of wearable computers.  There have been many attempts at doing this, but most are clunky and not very practical.  As cell phones morphed from brinks to smart phones, the capabilities have increased to the point where today’s phones are more powerful than the computers I used in the 90s.  This advancement in technology pushes us closer to the wearable computer.  The main downfall to most wearable computer designs, is that the computer was supposed to control everything that is being worn.  My belief is the central computer is the brains and that any accessory added would expand the capability by telling the central computer what it does, but letting the central computer handle the input data to output as needed and so forth.  So, for example, if you put on a smart watch, it would tell the phone (central computer) what it can do, then the central computer would send the appropriate data to the watch, which would handle that data as it sees fit.

Beyond what you could wear, an accessory could even be your car.  QNX has been doing dashboards for cars as well as OnStar and uConnect.  The video below is a simple example of connecting the phone to the car and interacting between the two items.  The center console screen is actually a PlayBook which was the first BlackBerry device to run QNX.

So, this brings us to the Z10 and game pads.  The Z10 comes with game pad support.  Which means, if you develop a video game and want a real game controller, like the Wii Remote, to be used for playing, then Z10 will let you pair the BlueTooth enabled controller to do just that.  And, because the Z10, like the PlayBook, comes with an HMDI output connection, you can just plugin your phone to the television and sit back and play your games on the couch.

The real take away, is that the phone is now your computer/game console/central controller.  It can display the image onto a larger screen for you or receive information items attached to the phone.  Or, if you need more power, just connect multiple tablets or phones together to collaborate on an item.

It would seem that every step to upgrade to OS 6 and use SQLite for my BlackBerry java application comes with its own little headaches. I’m sure there is some sort of documentation somewhere that would make it a little easier to do this coding. But, until then, I’ll just muddle along.

The key reason for using SQLite is so that I can populate the device-side information easily.  Unfortunately, the data sent to the device is not in the best format at the moment.  So, I have to take sudo HTML tables and parse them out into data to be stored in the SQLite table.  But, before I can do that, I needed to figure out which table is being sent.  When the application initializes the database, it adds values to a configuration table of the table name and the table id.  When the data is loaded, I grab the table name and then look in the configuration table to determine the id.  Then with the id, I can use a switch statement to process the data using the parser associated for that table.  Simple enough.  But, when the code was retrieving the table name, it would error and crash trying to determine the id.  It took a bunch of break points and stepping to finally figure out the issue.

Here is the code to get an Value while passing in an Attribute

       Statement statement = myDataBase.createStatement("SELECT value FROM myTable WHERE attribute = ?");
            statement.prepare();
            statement.bind(1, attribute);
            Cursor cursor = statement.getCursor();
            Row row;
            //Use first cursor spot
            cursor.first();
            // Get the row from the cursor
            row = cursor.getRow();
            thisValue = row.getString(0);

            statement.close();
            cursor.close();

The issue I had was on the getString(0) part. Instead of the first position being at 1, the first position is at 0. Sort of obvious, but I guess I was looking at the bind statement, which has the first position at 1.

Another simple thing I determined today, not being the expert Java developer, is that I can call the static instance of the database connection without having to pass it through to a different class function.  In other words, I created the appDB connection when the application opens up and I initialize the database connection.  I do this on a class called SQLManager.  Therefor, when I want to use the database connection, I can just use SQLManager.appDB anywhere in application.  I wasn’t sure this would work, but after a little test, I found that it did work and will help cut down on code when calling functions to update tables.

At work I have been attempting to get our 800+ BlackBerry devices updated. This all began when we provided our service application to a site to use with their own technicians. The devices that we gave them were the BlackBerry Bold 9930. Luckily for me, I also got one of these devices and handed in an old 8800 BlackBerry. The Bold’s came with OS 7.0, but I updated mine to 7.1 in order to take advantage of the Hot Spot feature. Also, in OS 6 and 7, there is a feature for using Near Field Communication NFC tags. While most of the focus on NFC is payment, I see that my company can use the data storage and macros features for use with the service application.

But, the main reason for the upgrade to OS 6 or better, is the availability of SQLite on the phone. Previously, storing data on the BlackBerry devices was a little limited. It was similar to creating a very long text file and finding a particular item at a certain spot in order to get the data. In a word, it was clunky. Even though SQLite isn’t a full featured database, it is enough of a database to make inserting, updating and deleting data on the device much easier. So, I decided to delve in an update the old client application to version 6, which first required changing to Eclipse, more specifically, BlackBerry plugin for Eclipse. And changing to a new IDE and when you do that, you have re-setup your BlackBerry connections on the simulator to get things to work correctly.

With BlackBerry, you have a MDS that routes the pushes from a server to the appropriate device. On a simulator, you modify a rimpublic.properties file to make sure the data is okay to go to the device. An issue I had was that the push was failing. Because the push server had been already setup and I was just trying to get the simulator to receive the pushes, I didn’t have a direct look at the push command. One of the things you have to provide is the port of the application. When you setup up the device side listener to the wrong port, then your pushes never get to the application. D’oh! After I fixed that simple error, the data being pushed wasn’t displaying the entire data stream. The demo had the output example happen before the stream was repackaged back into a database, so only a portion was being shown. Oops. After I figured out to step to the parsing function after the push stream was finished. This was also an issue with opening and closing the database. The demo showed that every time you do a transaction to the database, you should open it and then close it. Well, that worked great in the simulator, but not so on the device. In the end, I found out that the best thing to do was open the database when the application was open and then not close it until I wanted to close the application for good.

The upgrade has been a slow start, but now it is moving along. Hopefully I can get the application converted and work on the new features that I want the application to do without too much more trouble.

As I stated in a previous post, I am working on a little project for work that dealt with including arrays inside of arrays.  Part of this also had me putting lists inside of lists.  The layout of one of the display has an Accordion navigation control with a HorizontalList, that also contained an accordion with it’s own HorizontalList.  I am using the horizontal list to scroll through main items with sub-items below.  On top of this, I am creating the HorizontalList, the HSlider and the Accordion controls all dynamically.

The first part of setting up the slider and list, is to make sure the HorizontalList has only 1 columnCount (number of columns displayed), else you see all of your items.  The second part is to set the start and end of the slider.  At first I used 0 as the start, but since I am showing the initial record, 1 should be the minimum value.  I set the maximum value to the length of the data set for the list.   I had found some code that used a counter to determine the position of the slider and the list.

private function prevClick(evt:Event):void{
var tmpHozList:HorizontalList = new HorizontalList();
tmpHozList = evt.target.data[0][0];
var tmpSlider:HSlider = new HSlider;
tmpSlider = evt.target.data[0][1];
//move Horizontal List
var pos:int = tmpHozList.horizontalScrollPosition - 1;
var min:int = 0;
var curvalue:int = Math.max(min, pos);
tmpHozList.horizontalScrollPosition = curvalue;

//move Slider
tmpSlider.value = curvalue;
}

private function nextClick(evt:Event):void{
var tmpHozList:HorizontalList = new HorizontalList();
tmpHozList = evt.target.data[0][0];
var tmpSlider:HSlider = new HSlider;
tmpSlider = evt.target.data[0][1];

//move Horizontal List
var pos:int = tmpHozList.horizontalScrollPosition + 1;
var min:int = 0;
var curvalue:int = Math.max(min, pos);
tmpHozList.horizontalScrollPosition = curvalue;

//move Slider
tmpSlider.value = curvalue;
}

The counter would get the current position and then add or subtract (depending on the button pushed) from the count and then determine max (Math.max) value between the count and the minimum and return that value to step the slider.  Well, this wasn’t working correctly.  I was trying to figure out if Math.min and some other method of determining the min and max values of the slider, when it hit me to just increment and decrement the value.  I use increment all the time in loops, so why wouldn’t it work to move the slider and the list position.

private function prevClick(evt:Event):void{
var tmpHozList:HorizontalList = new HorizontalList();
tmpHozList = evt.target.data[0][0];
var tmpSlider:HSlider = new HSlider;
tmpSlider = evt.target.data[0][1];
if(tmpHozList.horizontalScrollPosition > 0){
//move Horizontal List
tmpHozList.horizontalScrollPosition--;
//move Slider
tmpSlider.value--;
}
}

private function nextClick(evt:Event):void{
var tmpHozList:HorizontalList = new HorizontalList();
tmpHozList = evt.target.data[0][0];
var tmpSlider:HSlider = new HSlider;
tmpSlider = evt.target.data[0][1];

//move Horizontal List
tmpHozList.horizontalScrollPosition++;
//move Slider
tmpSlider.value++;
}

Well, it did work, except for one small issue.  For some reason, increase the count didn’t cause any issues.  Possibly the max amount it can increment on the HorizontalList works great, but the minimum value does not.  Regardless, decrementing the values would lead to the  list position going below 0 and causing an error. Which means, that for the previous button, I had to put a check in to make sure the current value wasn’t less than the minimum value, which was 1.  Anything over 0 was fine.  Simple and less code.  Now I just have to go through and update the other slider list combos.

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.

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.

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.

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.