Documenting your Flash IDE project with ASDoc

So, you want to generate some documentation for your project?

I’ve found two great options: NaturalDocs and ASDoc.

NaturalDocs is very nice and it supports a wide variety of languages. However I didn’t like how it documented inherited properties and methods.

I then turned to ASDoc. ASDoc is part of the Flex SDK, and it’s what the big guys at Adobe use.

Documenting Flex projects is “easy”. However there’s not too much documentation around for using ASDoc with the Flash IDE. I had a hard time making it work the first time I tried it, so here’s a list of tips I’d like to share to make your ASDoc experience less painful.

First of all, there’s running the ASDoc command. While you can run the asdoc command through the console, write a shell script or a rake task, I recommend ASDocr. ASDocr gives you a nice GUI to run the command. You just need to point the location of the asdoc command and the sourche path of your project and your are ready to go.

Is very unlikely you’ll succeed the first time. Why? ASDoc fails if it find errors in your code, that includes all of those classes that are not being compiled (and thus the Flash IDE doesn’t wanr you). So take all those files out and try it again.

Second is dependencies. The Flash IDE creates a lot of stuff on the background so you don’t have to care for it. Remember the “A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export” message? Well, ASDoc will look for those classes but they won’t be on your classpath, so it fails. The solution, create a class for every one of the symbols you export for Actionscript.

You also have to deal with symbols with instance names. Normally you can access these symbols in your class by using the instance name. The Flash IDE creates a property inside your object so the symbol can be fetched from that property. That’s why you can’t have a method and a symbol with the same name/instance.  ASDoc doesn’t know about these magic properties and fails. To solve this issue use getChildByName instead.

this.my_symbol_instance_name //change this
this.getChildByName("my_symbol_instance_name") //to this

I usually name symbols on the stage with an appended underscore (_my_symbol_instance_name) and save into a private variable (private var my_symbol_instance_name:DisplayObject).

It’s important to know that getChildByName will throw an error if it doesn’t find a symbol, so you’ll want to wrap it inside a try…catch..finally block then.

And finally comes the libraries. ASDoc only recognizes .swc files or directories containing .swc files as the library-path. Use the .swc packaged version of your libraries (if available) or create your own. Creating .swc files with the Flash IDE is a little bit tricky too, take a look here for more information.

I haven’t found any more things preventing my code from bein documented with ASDoc, if you find anything else feel free to comment. I also haven’t been able to run ASDoc with the FLVPlayer component, I use the wildcard so it doesn’t look for the class definition.

Posted in AS3 | Leave a comment

Making AS3 more dynamic with Objects

I love AS3. However after some time working with Javascript, I’ve come  to miss the versatility of AS2 dynamic typing. Don’t get me wrong, AS3  strong typing is great, and the compile time errors save tons of  debugging hours. But sometimes strong typing can lead to multiple  functions that do the same thing, just because one argument type is  different.

Some languages, like Java, support multiple method signatures. AS3 doesn’t, but the guys at Adobe do something similar with methods like String.replace, where the last argument can be either a String or a Function. They do it giving the second argument an Object type. Yes, the core Object class. Everybody knows how this class works, but with all the cool features of AS3 we tend to forget it. For example, to emulate the String.replace behavior we can do something like this.

function replace(pattern:*, repl:Object):String{
  if(repl is String)
    // do something when repl is a String
  else if(repl is Function)
    // do something when repl is a Function
  else
    throw(new Error("The second argument of String has to be either a String or a Function"));
}

I don’t remember where I read that using is to test type casting is faster than doing something like…

String(my_string) != null

… is slower than is, I don’t know if it’s true but I do it. Altough is sometimes behaves oddly.

For parameters or options we can also use hasOwnProperty to test if a parameter has been set like this:

function modify_image(img:*, params:Object = null):void{
  if(!params) params = {width: 99}; //set default values if no parameters given
  else { // verify if the params object has all the necessary parameters for the method to work
    if(!params.hasOwnProperty("width")) params.width = 99;
   }
   // do something
}

Also lets not forget AS’ Javascript inheritance. We can use method closures and the …(rest) parameter (similar to Javascript’s argument variable).

I personally use these kind of techniques with helper or configuration classes. These kind of classes focus on one task and so they are easier to test; unlike interactive components, where more robust code is preferable.

Posted in AS3 | Leave a comment

jquery.slidingTabs
animated tabs that load content via Ajax

With jquery.slidingTabs you can create unobtrusive carousel-style tabs that load dynamic content via Ajax.

  • Tested with jQuery 1.3.2 and 1.4.2 in Internet Explorer 6-8, Firefox 2-3.6, Safari 4, Chrome.
  • Download Source (5.1Kb), Minified  (2.8kb).
  • Follow the project on GitHub or report a issue!
  • View examples in a new page

Examples

Usage

First you need to download the jquery and jquery.slidingTabs source. Include them inside the tag <head> of your document:

<script src="javascripts/jquery.1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.slidingTabs.js" type="text/javascript" charset="utf-8"></script>

Then write some HTML like this:

<div class="multi_tabs">
    <div class="menu">
      <ul>
        <li class="active"><a href="ajaxcontent.html">TAB 1</a></li>
        <li><a href="ajaxcontent.html">TAB 2</a></li>
        <li><a href="ajaxcontent.html">TAB 3</a></li>
        <li><a href="ajaxcontent.html">TAB 4</a></li>
        <li><a href="ajaxcontent.html">TAB 5</a></li>
        <li><a href="ajaxcontent.html">TAB 6</a></li>
        <li><a href="ajaxcontent.html">TAB 7</a></li>
        <li><a href="ajaxcontent.html">TAB 8</a></li>
        <li><a href="ajaxcontent.html">TAB 9</a></li>
        <li><a href="ajaxcontent.html">TAB 10</a></li>
        <li><a href="ajaxcontent.html">TAB 11</a></li>
        <li><a href="ajaxcontent.html">TAB 12</a></li>
        <li><a href="ajaxcontent.html">TAB 13</a></li>
        <li><a href="ajaxcontent.html">TAB 14</a></li>
      </ul>
    </div><!-- .menu -->
    <div class="cont_tabs">
      <div>
        First content
      </div>
    </div><!-- cont_tabs -->
  </div><!-- multitabs -->

…some styles. Note that a few basic styles are required for plugin works.

/*GENERAL STYLES*/
  * {
    margin:0;
    padding:0;
  }

  /*COMMON STYLES FOR TABS*/

  .multi_tabs {
    width:600px;
  }

  .multi_tabs .menu {
    overflow:hidden;
    position:relative;
    z-index:10;
    width:100%;
  }

  .multi_tabs ul {
    overflow:hidden;
    position:relative;
    width:9000px;
  }

  .multi_tabs ul li{
    float:left;
    display:inline;
    padding:6px 8px 4px 8px;
  }

  .multi_tabs ul li.active{
    background:#CCC;
  }

  .multi_tabs ul li a{
    display:inline;
  }

  .multi_tabs ul li.active a{
    color:#000;
  }

  .multi_tabs .cont_tabs{
    clear:both;
  }

  .multi_tabs .next,
  .multi_tabs .prev{
    position:absolute;
    display:block;
    top:0;
    width:24px;
    height:29px;
    background: #E4E4E4;
    z-index:100;
  }

  .multi_tabs .prev{
    left:0;
  }

  .multi_tabs .next{
    right:0;
  }

  .multi_tabs .accessible {
    display:none;
  }

And invoke the plugin:

<script type="text/javascript" charset="utf-8">
    $(function(){
      $('.multi_tabs').slidingTabs({
          tabs: '.menu',
          content : '.cont_tabs'
       });
    })
  </script>

Configuration

Property Type Default value Description
tabs string ‘.menu’ selector for tabs wrapper.
content string ‘.cont_tabs’ selector for content wrapper (where the content loaded via ajax goes in).
diff_widths boolean true if the tabs have equal widths set diff_widths to false, for performance issues.
offset_x number 3 offset in x for tabs.
displacement number 200 how many pixels the tabs will be animated.
requestType string ‘GET’ type of the Ajax request.
hiddenClass string ‘accessible’ class added to next and prev elements when there are more tabs to show.
next_txt string ‘Next’ next element text.
prev_txt string ‘Previous’ prev element text.
fadeIn_duration number os string ‘slow’ duration in milliseconds of the fadeIn when ajax loaded content is shown.
fadeOut_duration number or string ‘normal’ duration in milliseconds of the fadeOut when content is hidden.
animationSpeed number 500 speed for the animation of the tabs.
onSuccessCallback function function($wrap, $tabs_links, content){} function invoked when content is successfully loaded.
onFadeInCallback function function($wrap, $tabs_links, content){} function invoked when fadeIn effect ends.
onFadeOutCallback function function($wrap, $tabs_links, content){} function invoked when fadeOut effect ends.
Posted in CSS, XHTML, jQuery | Leave a comment

Painless Facebook development with rsync

Lately I’ve been involved in developing applications for the Facebook Platform. The Facebook API is great, but the documentation is very out of date. The new Graph API seems to simplify a lot of things, and is very well documented in comparison to the old REST API. However testing your apps locally is still very annoying.

After long sessions of FTP uploading a friend of mine recommended rsync to me and my life has been much better since then. Rsync is a software for UNIX to synchronizes files and directories. With rsync and the help of SSH you can sinchronize both your local and remote directories in no time, leveraging the time it takes for you to watch the changes.

Just add this line of code to your bash profile and you are ready to go.

alias sync_fb='rsync -zrptL --delete-after -e "ssh" --exclude=.DS_Store --exclude=.git --cvs-exclude local_directory_path username@domain:remote_directory_path'

Just type sync_fb on your Terminal and you’ll se how the changes reflect on your remote directory in no time. Of course you can change the name of the task and create as many tasks as you want. The –exclude=.DS_Store and –exclude=.git parameters are for mac and git users. If you are not a mac or git user, you can delete those. Also if you have public SSH keys set, you won’t even notice you are “pushing” to a remote directory.

For Textmate users there’s a bundle written by Joshua Priddle, which let’s you synch your directories with a simple keyboard shortcut.  You can read more about it here. I tested it and I think it’s great. Not only it has all the benefits of rsync, but it also nicely outputs errors and a list of synched files in a new file.

Posted in UNIX | Tagged , | Leave a comment

jquery.flexipage

Hacia tiempo que tenia ganas de hacer un plugin de jquery. Me surgió la necesidad de hacer uno para un proyecto , así que mate dos pájaros de un tiro.

Flexipage es un plugin de jquery que permite paginar elementos HTML.

He hecho una humilde paginilla con ejemplos y “documentación“  la podéis ver aquí.

descargar

ver ejemplos

Posted in CSS, XHTML, jQuery | Leave a comment

doctypes & MIME-types

Me entero leyendo JavasScript & CSS Development with jQuery, que si usamos el doctype XHTML 1 Transitional XHTML 1.1 deberiamos declarar bien el tipo de archivo que se va a servir , en este caso application/xhtml+xml según recomienda la W3C.

Si hacemos esto tenemos varios problemas:

  1. Debemos ser muy disciplinados creando el marcado y mas aún si el site es dinámico, a la hora de interpretarse el documento como xml, un simple elemento mal cerrado hará que nuestro site no se pueda ver o que se vea el tipico error de XML mal formado.
  2. No todos los dispositivos interpretan el mime-type application/xhtml+xml, con lo que el dispositivo no entenderá el tipo de archivo que se le esta mandando y no lo interpretará

Por curiosidad me meto en la W3C y la verdad me resulto algo confuso, en algunos casos te dicen que DEBES poner un mime type y en otros casos que PUEDES. Con lo que decido seguir buscando y me encuentro con esta tabla de compatibilidades doctype/mime-type.

Soluciones que veo:

  1. Servir todo como text/html  , que según la W3C no es lo mas recomendable pero funciona.
  2. Detectar cuando se va a servir la pagina si el el dispositivo desde el que se solicita soporta archivos del tipo application/xhtml+xml y sino es asi cambiar el doctype por XHTML 1.0 Strict y el mime-type por text/html. Cuidado con esto porque puede causar problemas.  Aqui puedes ver las diferencias entre XHTML 1.0 Strict y Transitional.

Gracias a @richmanblues por la correción.

Posted in XHTML | 1 Comment