SmartLogic Solutions Blog » JavaScript http://blog.smartlogicsolutions.com News and updates from the people at SmartLogic Solutions Tue, 30 Nov 2010 21:39:14 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Testing AJAX with Test::Unit http://blog.smartlogicsolutions.com/2010/10/08/testing-ajax-with-testunit/ http://blog.smartlogicsolutions.com/2010/10/08/testing-ajax-with-testunit/#comments Fri, 08 Oct 2010 19:58:17 +0000 Nick Gauthier http://blog.smartlogicsolutions.com/?p=979 If you want real end-to-end testing of a page with functioning AJAX, use Selenium. But I was interested in doing just a bit of JS speccing to make sure that the AJAX routes I called worked and that the data that came back fit the JS that I had written.

So, I figured with a little capybara and a little therubyracer, I could test my javascript with real route calls. Let’s check it out.

The Javascript I want to test:

var dataObject = {};
var getRemoteData = function() {
  $.getJSON('/remote_path.json', function(data) {
    dataObject = $.parseJSON(data);
  });
}

We will pretend that hitting /remote_path.json returns the following response in JSON:

{ "my_information": "my response data" }

I want to test:

  1. That /remote_path.json is accessible and returns information
  2. That dataObject is populated with a Javascript Object containing the params I pass down

Here is my commented testing code:

  test 'get some information via ajax' do
    # Create a new JS Context. :with => self means that
    # the global namespace is the current context
    js = V8::Context.new(:with => self)
 
    # Load up our JS file
    js.load(File.join(Rails.root, 'public', 'javascripts', 'application.js'))
 
    # Define a mock method for getting JSON data
    def getJSON(url, callback)
      # When the JS wants some data, get it for real w/ capybara
      visit url
      # And call the JS function passed in (ruby => js)
      callback.call(page.body)
    end
 
    js.eval %{
      /* Mock out jQuery */
      var $ = {};
 
      /* Setup the mock in the right place (JS => ruby) */
      $.getJSON = getJSON; 
 
      /* Mock out jquery parseJSON to call ruby JSON.parse
         Since the args are the same, it is plug and play!
         (JS => ruby) */
      $.parseJSON = JSON.parse;
 
      /* Trigger our JS */
      getRemoteData();
 
      /* Assert what we expect (JS => ruby) */
      assert_equal(" ", dataObject.access_key);
    }
  end

This is not an example of an incredibly useful test, but I found the ability to bind back and forth easily between ruby and javascript to be mind-blowingly incredible. I mean, look at that last line, where I call assert and pass a javascript object to it!

Huge thanks to Charles Lowell (cowboyd) for his hard work on therubyracer.

Enjoy the weekend!

]]> http://blog.smartlogicsolutions.com/2010/10/08/testing-ajax-with-testunit/feed/ 0 Google Analytics Event Tracking Overview http://blog.smartlogicsolutions.com/2009/09/24/google-analytics-event-tracking-overview/ http://blog.smartlogicsolutions.com/2009/09/24/google-analytics-event-tracking-overview/#comments Thu, 24 Sep 2009 18:17:44 +0000 Yair Flicker http://blog.smartlogicsolutions.com/?p=714 At our last monthly technical luncheon I gave a presentation on Google Analytics Event Tracking.

Event Tracking in Google Analytics lets the web developer track AJAX requests and by extension Flash events too. AJAX requests don’t cause page views but as more and more web applications use AJAX it’s important to track the AJAX requests in addition to the standard page requests. Here are some examples of things you can track with GA Event Tracking that you typically wouldn’t be able to track with the standard Google Analytics Javascript embed:

  • Play/pause a video
  • Dragging an element from one part of the screen into another part of the screen, e.g. dragging a product into a shopping cart
  • Selecting a location/pin on a map
  • Resizing/panning a map
  • Reordering elements in a list
  • Hovering over elements on a webpage

The presentation is embedded below and is also available online at http://bit.ly/gaevents.

]]> http://blog.smartlogicsolutions.com/2009/09/24/google-analytics-event-tracking-overview/feed/ 0 Using SWFObject to Seamlessly Upgrade to Flash Player 10 http://blog.smartlogicsolutions.com/2008/10/15/using-swfobject-to-seamlessly-upgrade-to-flash-player-10/ http://blog.smartlogicsolutions.com/2008/10/15/using-swfobject-to-seamlessly-upgrade-to-flash-player-10/#comments Wed, 15 Oct 2008 14:58:11 +0000 Greg Jastrab http://blog.smartlogicsolutions.com/?p=324 If you haven’t heard that Flash Player 10 was officially released, then get out of the hole you’ve been living in and go get Flash Player 10!

When you’re ready to deploy your first Flash Player 10 SWF, you’ll want to ensure your users have the latest Flash Player so they can actually view your content! Why not make it as easy as possible for them to upgrade and use SWFObject to embed your SWF and seamlessly upgrade older version of the Flash Player up to 10?

Let’s say you’re embedding a SWF called MyFlashPlayer10.swf. Using the dynamic publishing method there are just 3 simple steps to follow to get your SWF embedded with SWFObject…

1. Include the SWFObject JavaScript Library on Your Page

Assuming you’ve downloaded SWFObject onto your server and placed swfobject.js in the same directory as the HTML page you’re editing:

<head>
  <script type="text/javascript" src="swfobject.js"></script>
</head>

2. Add a DIV to Hold the SWF

Place a

tag on the page where you want the SWF to be embedded, giving it an ID:

<body>
...
<div id="swf">
You need <a href="http://www.adobe.com/go/getflash">Flash Player</a> to see this content!
</div>

The content inside of the DIV will be replaced with your SWF if Flash is present on the user’s machine.

3. Tell SWFObject to Embed the SWF

Add the JavaScript code to embed the SWF after the tag you’ve added in step 1:

<script type="text/javascript">
<!--
swfobject.addDomLoadEvent(function() {
  swfobject.embedSWF("MyFlashPlayer10.swf", "swf",
                     "300", "300",
                     "10.0.12", "expressInstall.swf");
});
//-->
</script>

Refer to the SWFObject documentation for the details of these parameters, but a quick explanation:

The addDomLoadEvent function ensures that the DOM is available before running a function.

The parameters for embedSWF are:

  1. URL to SWF
  2. ID of DIV to place SWF in
  3. width of SWF
  4. height of SWF
  5. minimum required Flash Player version
  6. URL to express install SWF

There are some other optional parameters, but I won’t go into those here. The important parameters to focus on for seamlessly upgrading are the 5th and 6th parameters.

10.0.12 means that we want at least Flash Player 10.0.12 to be installed. You can also just specify 10.0.0 for a minimum of Flash Player 10.

The expressInstall SWF is included in the SWFObject download, and will provide the functionality of prompting the user to seamlessly upgrade their Flash Player. If the user confirms the prompt it presents the Flash Player installer will launch, and the user will be prompted to close the browser so the installation may proceed. Once it completes, Flash Player 10 (or whatever version has been required) will be installed on the machine!

If you have more questions on SWFObject check out the SWFObject Google Group.

]]> http://blog.smartlogicsolutions.com/2008/10/15/using-swfobject-to-seamlessly-upgrade-to-flash-player-10/feed/ 0 Facebox With Prototype http://blog.smartlogicsolutions.com/2008/10/14/facebox-with-prototype/ http://blog.smartlogicsolutions.com/2008/10/14/facebox-with-prototype/#comments Tue, 14 Oct 2008 18:58:55 +0000 Scott Davis http://blog.smartlogicsolutions.com/?p=316 After many failed attempts of trying to find a modal window that worked like facebox and used prototype, I gave up and started to write one from scratch. In the process I found the first port made by Phil Burrows. It wasn’t perfect but it was enough for me to build off of so with a few tweaks I was able to allow window resizing and let the box center itself. You can view the changes on my github.

Screenshot:

My Version of Facebox in our timetracker application

My Version of Facebox in our timetracker application

]]> http://blog.smartlogicsolutions.com/2008/10/14/facebox-with-prototype/feed/ 3 using active x and javascript to scan from your web app http://blog.smartlogicsolutions.com/2008/08/08/using-active-x-and-javascript-to-scan-from-your-web-app/ http://blog.smartlogicsolutions.com/2008/08/08/using-active-x-and-javascript-to-scan-from-your-web-app/#comments Fri, 08 Aug 2008 16:57:18 +0000 Joseph Jakuta http://blog.smartlogicsolutions.com/?p=125 In the app I had been working on users had to perform a great amount of scanning. In the first few iterations this was done manually, which, of course, lead to lots of user error (namely scanning documents at high resolutions, which clogged the system). It was decided that it was best if our app to control the scan settings for most users. So we found three possible Active X controllers available to allow for this functionality. CianSoft, VintaSoft, and ChestySoft. After a little research we found that VintaSoft didn’t quite meet our needs and that CianSoft’s TwainX controller and ChestySoft’s were eerily similar (it turns out that each company is run by a brother and both products were just different flavors of the same one). In the end ChestySoft was the one we went with because it allows you to perform posts of the scanned data to the server (and the guy that runs the company is super responsive when you have questions).

First there isn’t too much to get this ActiveX controller up in running in the first place. There are great examples here that take you 95% of the way towards getting these up and running. A few little tricks we learned when setting up the javascript portion of the code are as follows:

  • To set the page size use the following method (the example sets it to letter): 
          csxi.SetTwainLayout(0,8.5,0,11)
  • Some scanners do not reset to their defaults after a custom scan. You need to make sure you manually set all default settings before scanning. A few you may want to set: 
          csxi.UseTwainInterface=false; //this makes sure that you are not prompted to change settings
      csxi.TwainAutoBright = true;
      csxi.TwainAutoDeskew = true;
  • When beginning a multipage scan you must run the following three methods:
          csxi.TwainMultiImage = true;
      csxi.UseADF = true;
      csxi.ClearPDF();

One other fun thing we can do with ChestySoft’s TwainX controller is upload the captured data directly to the server. To do this in the javascript you need to do the following:

      Success = csxi.PostImage(url, file_name, param_name, graphics_format);
      if (Success) {
        //what to do when success
      } else {
        //what to do if error - here are recommendations:
        csxi.SaveToFile(path_on_desktop) //write data to desktop if you saved as a graphic; 
        csxi.WritePDF(path_on_desktop) //write data to desktop if you saved as a pdf; 
      }

Some notes about the preceding code. url a fully qualified url (including the ‘http://’). file_name is what will be included as original_filename when you are reading data on the server side. graphics_format is a enumeration that can be found here.

And the best thing is after you click on the button that runs your scan the information uploaded is the same as a standard file upload so you don’t have to do anything strange at all in ruby.

]]> http://blog.smartlogicsolutions.com/2008/08/08/using-active-x-and-javascript-to-scan-from-your-web-app/feed/ 1 Google AJAX Libraries on Rails http://blog.smartlogicsolutions.com/2008/06/20/google-ajax-libraries-on-rails/ http://blog.smartlogicsolutions.com/2008/06/20/google-ajax-libraries-on-rails/#comments Fri, 20 Jun 2008 20:42:47 +0000 Nick Gauthier http://blog.smartlogicsolutions.com/2008/06/20/google-ajax-libraries-on-rails/ If you’re reading this blog you’ve probably already heard about Google’s AJAX Library API on many other news sites like Slashdot.

I’m going to describe my simple process for setting up a RoR app to use Google to pull the APIs in a rails friendly way, throughout layouts, views, and helpers.


First, open up “app/helpers/application_helper.rb”. Here, we are going to add a few tag methods to keep our views clean and also to keep our versions consistent.

def google_loader_tag

  "<script type=\"text/javascript\" src=\"http://www.google.com/jsapi\"></script>"

end


def google_prototype_tag

  google_tag('prototype', '1.6.0.2')

end



def google_scriptaculous_tag

  google_tag('scriptaculous', '1.8.1')

end

# etc for any of the other libraries

private

def google_tag(name, version)

  "<script type=\"text/javascript\">google.load(\"#{name}\", \"#{version}\");</script>"

end


Now we need to include these tags in our layouts and views.


In my layout, I put this for a head:


<head>


  <title><%= yield :title %> - My Site</title>


  <%= stylesheet_link_tag 'mystyle' %>


  <%= google_loader_tag %>


  <%= yield :css_include %>


  <%= yield :javascript_include %>


</head>


This lets me specify the page title, CSS, and Javascript, in the view, so we don’t load in anything unnecessary.


Now here is what my view looks like:


<% content_for :title do -%>Welcome<% end -%>


<% content_for :javascript_include do -%><%= google_prototype_tag %><% end -%>


Now my title bubbles up, and my request for prototype bubbles up to the head for me, after the google loader.


The best part about this setup is that my versions will stay the same, and they only need to be changed in one place. And, if I ever decide to host the files locally, I just change the tags in one place, and make the google loader tag return “”, until I fix all of the instances.

]]>
			http://blog.smartlogicsolutions.com/2008/06/20/google-ajax-libraries-on-rails/feed/
		0
		
		
		More press for SpotCrime
		http://blog.smartlogicsolutions.com/2008/05/22/more-press-for-spotcrime/
		http://blog.smartlogicsolutions.com/2008/05/22/more-press-for-spotcrime/#comments
		Thu, 22 May 2008 23:55:43 +0000
		Yair Flicker
				
		
		
		
		
		
		

		http://blog.smartlogicsolutions.com/2008/05/22/more-press-for-spotcrime/
		
			More links to blog posts about SpotCrime:



See our original blog post on SpotCrime getting TechCrunched.

]]>
			http://blog.smartlogicsolutions.com/2008/05/22/more-press-for-spotcrime/feed/
		0
		
		
		Adobe onAIR Bus Tour: Baltimore
		http://blog.smartlogicsolutions.com/2007/08/21/adobe-onair-bus-tour-baltimore/
		http://blog.smartlogicsolutions.com/2007/08/21/adobe-onair-bus-tour-baltimore/#comments
		Wed, 22 Aug 2007 04:40:48 +0000
		Greg Jastrab
				
		
		
		
		
		
		
		

		http://blog.smartlogicsolutions.com/2007/08/21/adobe-onair-bus-tour-baltimore/
		
			Yair and I went to the Baltimore stop of Adobe’s onAIR Bus Tour tonight.


Ryan Stewart


Ryan Stewart kicked off the keynote giving an introduction and overview to Adobe AIR.  After briefly going over the background/web-history of the Flash player and the motivations behind the development of Adobe AIR, Ryan showcased some AIR applications:



He also highlighted that with the newly announced update to Flash Player  9 (codenamed “Moviestar”), Flash SWFs will be able to support H.264 video and HE-AAC audio.  This will allow Quicktime movies to be played through SWFs and the Adobe Media Player.


Ryan then mentioned that the second public beta drop of AIR will be released during the MAX 2007 conference.  Also, we were reminded of the AIR Developer Derby: a contest to see who can make the best AIR application.  The grand prize is essentially a $100,000 travel coupon.  There will also be five category winners that will win “The Ultimate Desktop Environment”, which is pretty much a bunch of beast hardware.


Mike Chambers


Next up was Mike Chambers demo’ing how to write a HelloWorld Flex-based AIR application.  Pretty standard, but he went on to highlight the install experience for end-users that will be using AIR applications we developers will be creating.  End-users will need the AIR runtime in order to install an AIR app, but developers will be able to place a Flash Badge on their website which will allow users without the AIR runtime to install both the runtime and their AIR application with only 4 clicks.


Mike finished off with pointing any developers that are starting to play around with AIR to the  onAIR Bus APIs which have a ton of live data that can be used in an AIR app.


Kevin Hoyt


Kevin Hoyt was next to demo how to build an HTML-based AIR Application.


Kevin emphasized that Flex Builder is not necessary to create AIR applications.  The Flex 3 SDK (which is freely downloadable) contains the AIR SDK as well, so you can compile and debug your AIR applications from the command line.  Dreamweaver CS3 also has an AIR extension so if you’re a web developer that’s afraid of the command line you can go ahead and develop your HTML page in Dreamweaver and debug the application or package it as an AIR file directly within the comfort of Dreamweaver.


Script Bridging


Kevin next demo’d the script bridging capabilities of AIR, which lets JavaScript reach into the ActionScript world and invoke any methods in the Flash API (anything in the flash.* namespace).  The reverse is also true (ActionScript reaching into the JavaScript world).  This means you can have a purely HTML-based AIR application that can call methods in the Flash API by simply doing things like:


<script>
  var airFile = window.runtime.flash.filesystem.File;
  var desktop = airFile.desktopDirectory;
  var myFileInJS = new airFile(desktop.resolve("file_on_the_desktop.txt");
</script>



Here, myFileInJS is a JavaScript variable that references an ActionScript 3 class from the AIR SDK.


So “window.runtime.flash.* can let you directly use any Flash class from JavaScript. IMO the coolest thing Kevin covered is the ability augment the Flash packages you can use by simply script including a library.swf from any SWC to access those AS classes:


<script src="library.swf"></script>
<script>
  var encoder = runtime.com.adobe.images.PNGEncoder;
  encoder.encode( bitmapData )
</script>



In this example, encoder is the PNGEncoder from the as3corelib project, but the encoding is being done in JavaScript using AS classes!  Very cool stuff.  (FYI: a SWC is stored in a ZIP format, so you can just unzip a SWC file to access the library.swf inside of it)


Chafic Kazoun: Windowing in AIR


Windowing concepts Chafic covered/demo’d:


    

  • utility window
    • 

  • standard window
    • 

  • custom chrome transparent window
    • 

  • custom chrome where background is embedded in a SWF
    • 

  • custom window dispatching events and being listened to by another window
    • 



Ben Forta: AIR + ColdFusion


Highlights from Ben’s talk:


    

  • 50% of existing ColdFusion customers have upgraded to ColdFusion 8.
    • 

  • ColdFusion/Flex Extensions for Eclipse available at Adobe’s ColdFusion page.
    • 



Can generate a ColdFusion-backed Flex web app w/ literally no front-end coding; the extension has Master/Detail/Master_Detail and DB wizards to configure everything which then generates the CFCs, MXML components, and CSS stylesheets using all best practices.


This was possible before in ColdFusion 7, but now ColdFusion 8 can generate a ColdFusion-backed AJAX/HTML/CSS web app in the same manner.


From AIR you can load an HTML page from a ColdFusion backend and it will properly renders this AJAX/HTML/CSS generated content.

]]>
			http://blog.smartlogicsolutions.com/2007/08/21/adobe-onair-bus-tour-baltimore/feed/
		0