JS OOP and kestrel nest box research

Today's goal is to implement JavaScript objects.  I am familiar with OOP in Flex(ActionScript), PHP and other languages from years ago. However, JavaScript's lack of classes will require some re-routing of my neural circuitry.

I am starting my research with these two articles by Douglas Crockford:

• The world's most misunderstood programming language
• Private members in JavaScript

The first object I have to create is to represent a kestrel nest box. (Want to build one? - A real box, not a JS object to represent one- Instructions here)  The box has parameters including height, width, depth, height off ground, entrance diameter, direction the entrance faces, what the box is mounted on, and more.

My current project will allow researchers across North America (and maybe South America too) to track data from their kestrel boxes. Using OOP and MVC methods will be essential to keep the software flexible enough to satisfy the preferences of such a diverse audience and allow future expansion of the project.

Update 10:35

More valuable references:
https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects
https://developer.mozilla.org/en/JavaScript/Guide/Details_of_the_Object_Model
https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_Revisited

Update 17:40

I successfully met my goal. In some ways it was easier than expected, but at the same time, a bit confusing. My object is created simply by retrieving the parameters from the database, via jQuery's Ajax functionality, as JSON.

var request = $.ajax({
    url: "getBoxParams.php",
    type: "POST",
    data: {id : nestBoxClicked, user: userToken},
    dataType: "JSON"
    });

request.done(function(boxData) {
     var kbox=new nestBox(boxData);                    

     populateBoxForm(kbox);
     });

Then, I manipulate the object properties in the populateBoxForm() function.

I still prefer working with strongly typed languages and classes, but it appears JavaScript can do what I need for a fully-functional web app, without losing speed or user-friendliness.

Douglas Crockford's article about JavaScript code conventions is another good resource I found today. 

Miscellaneous notes and thoughts

While working on integrating an instance of SlickGrid into a project file today, I discovered that all the rows had white backgrounds. In all the examples, the rows alternate colors for easier reading.  It took a while, but I traced the problem down to a conflict in the CSS for .ui-widget-content .  After adding the following to a .css file that loads at the end of the queue, my SlickGrid now has alternating gray and white rows as needed:

.ui-widget-content.slick-row.odd
    {
    background-color:white;   
    }
.ui-widget-content.slick-row.even
    {
    background-color:rgb(250,250,250);   
    }

The current problem I am working on is the inconsistent alignment and width of SlickGrid headers and their associated data cells. It is similar to the problem shown here: http://stackoverflow.com/questions/8559487/slick-grid-header-row-cell-alignment

Update 12:20

What appears to be happening is that the column width is set, for example, to 50. However, the elements added for the sortable and resizable properties add width to the header (about 10 pixels), but not to the cell.

Strangely, it very always becomes properly aligned if I hold down the shift key and refresh the page, even though no changes are made to code or CSS between page loads.

If I set the resizable and sortable properties to false, then everything consistently aligns properly on every page load/refresh.

Update 16:05 

I have spent much of today researching this error, with little advancement.  I tried to rebuild and reproduce the problem in jsfiddle.net, but it aligned properly there.  I tend to think that the cause is related to browser rendering and CSS caching or interpretation. It has been tested on Mac and Windows in Firefox, Chrome and IE. The misalignment is not consistent or predictable.  In Firefox, if I first use Chris Pederick's Web Developer toolbar to clear the cache, the SlickGrid always loads with proper alignment.

So far I am impressed by the capabilities of SlickGrid. My current project has so many jQuery plugins, other modules and CSS files there are bound to be conflicts.

Update 18:50

I haven't been able to consistently reproduce the problem discussed above, so I have moved on. I am now working on retrieving data from the database via jQuery ajax. In the past I have always written my own ajax functions, but have decided to go with jQuery for this project since its requirements may eventually grow beyond the simple tools I have previously built.

So far, the method has been very simple. I need the ajax to be called when a user clicks on a row in the SlickGrid.  In the grid's setup JS, I added:

grid.onClick.subscribe(function(e, args) {
        var cell = grid.getCellFromEvent(e);
        var rowClicked=cell.row;
        var clickedItem = gridData[rowClicked].id;

        var request = $.ajax({
              url: "myScript.php",
              type: "POST",
              data: {id : clickedItem},
              dataType: "html"
            });

            request.done(function(msg) {
              alert(msg);
              });

            request.fail(function(jqXHR, textStatus) {
              alert( "Request failed: " + textStatus );
            });
        });

Now I need to write PHP code to retrieve the specified record from the database, convert the data into JSON and send it back in order to populate the form for editing.

Thought for the day: Craftsmanship

It has always been important to me to try to get my projects' source code to be as organized and perfectly laid out as the visible user interface. Why? Partly because it makes future maintenance and upgrades easier, but there's also something to be said for pride of craftsmanship. Even though virtually no one is going to view the source of the websites and apps I design, there is value to me in knowing every part of the project is done as clean and artful as possible.

This concept was highlighted by a quote I read by Steve Jobs' biographer Walter Isaacson:

"One of the most important things he taught Steve was [that] it's important to be a great craftsman, even for the parts unseen. When they were building a fence, he said, 'You have to make the back of the fence that people won't see look just as beautiful as the front, just like a great carpenter would make the back of a chest of drawers ... Even though others won't see it, you will know it's there, and that will make you more proud of your design.'"

( source )

Now that I am using the Eclipse IDE for my work, I expect that making beautiful source code will be easier than ever.

The day's work awaits... Today I will return to working on a GIS UI in JavaScript and PHP, with jQuery and the Google Maps API.

Migrating to Eclipse

My current work project, true to the nature of projects, has become more intensive than expected.  I have made it through several ASP and PHP projects with minimalist development environments, but my current mix of PHP with Javascript, including jQuery and multiple plugins for it, is too much to handle efficiently in a plain text editor.

I realized yesterday afternoon that every time I have built a major application, I have had some sort of IDE to work in. Early on, it was Visual Basic 6. I did a lot of PHP work in Dreamweaver, which is adequate for that.  Later I dove into Flex, and Adobe's IDE was good to work with.

I had explored Eclipse at some point but never had reason to follow through on it until now. I started downloading and configuring it yesterday and have spent many hours since then trying to get the pieces working.  Here are a few items I have found, in hopes it can assist others on the same voyage:

Major components I am using:

1. SQL Explorer
2. PHP Development Tools
3. Target Management (RSE)
4. Javascript IDE
5. EGit

My first goal is to install Git, since apparently Eclipse requires a version control system. That is another thing that is new, and something I have been trying to get established for a few years. So far, it is going well, and I am looking forward to the enhanced efficiency it will bring, even though I don't currently work in an Agile team. Here are some Git references that have helped me to make progress:

• http://www.alistapart.com/articles/get-started-with-git/
• http://gitx.frim.nl/
• http://code.google.com/p/git-osx-installer
• http://progit.org/

This morning I had an urgent request from a colleague to update some content in a database. I tried to use Eclipse SQL Explorer to accomplish that and ran into a series of problems. The setup has been frustrating at best. There are a lot of partial instructions in the documentation, like 'download and install ____" but no clarification on where or how to do that.

My first hurdle was to locate the MySQL driver it required. Finally I located a blog post somewhere that pointed me to http://dev.mysql.com/downloads/connector/j/  and I successfully downloaded the .jar file. I was expecting Eclipse to incorporate it somewhere, but evidently it just points to it, so download it to a location where it can reside permanently.

The next confusion was how to connect to the database.  I have used several front end clients for databases over the years, and all had specific fields for server IP/domain, port, and other parameters. It took a couple of hours to figure out what Eclipse requires. I filled in the fields as well as I could guess, but kept getting the error to "check your url."  I copied what I thought was the URL directly from my other database client, so I knew it was correct.  What I didn't know was that Eclipse, rather than providing fields for all the parameters,  uses a single string with embedded parameters and calls it the URL.  I finally located http://www.sqlexplorer.org/connections.php and ccopied the example there, creating a string like jdbc:mysql://mydomain.com:3306/myDBname.  It let me in. I still have not figured out what the "Example URL" is for in the MySQL driver setup window. The page at http://www.sqlexplorer.org/drivers.php shows it filled in with pseudocode, but doesn't explain it in the text.  I guess users are supposed to understand that the "example URL" is supposed to show us how to create the real URL in the connection parameters?  Unfortunately, when I loaded the driver, that field remained blank so I had no clue what to do.

Now that I'm in, it's time to get to work on the Javascript and see what Eclipse can do...


Update 15:00

One more quirk regarding MySQL in SQL Explorer: I wasn't able to view table contents in a grid like I am familiar with. I located a post in a forum that indicated the documentation showed an obsolete  method. I found that the three icons in the upper left of the SQL editor produce different results. I had been using the blue one, which returned the data in long strings. The first one in the row returns data into a grid. Now, to see if there is a way to edit that data.