HTML 5 (Thanks to Adam)

• Sencha Touch
  
  
  • HTML5 Mobile Application Framework - Already working with Android and Applie iOS devices
    
  • http://www.sencha.com/
• Yahoo
  
  
  
  • Yahoo UI
    
    
    • HTML5 Player (plugin)
    • http://yuilibrary.com/gallery/show/player
      
      
      • Provided By Josh Brickner
      • http://github.com/macinjosh/YUI-HTML5-Player
  • YQL Console
    
    
    • I believe that if you are using a HTML5 compatible browser then YUI storage utility will utilize it
      
    • http://developer.yahoo.com/yui/storage/
• Adobe
  
  
  • Flash will now be importable into HTML5 canvas code
    
    
    • 
      

      any Flash creation can be viewable by just about anyone without downloading the Flash plugin. It also means, clearly, that devices that cannot accept the plugin can nonetheless run the animations built on it.

  • http://www.readwriteweb.com/archives/flash_now_importable_to_hmtl_canvas.php
• Gordon
  
  
  • An open source Flash™ runtime written in pure JavaScript + HTML5
    
    
    
    • Tobias Schneider has built a Flash runtime that works right in the browser. It's implemented in pure Javascript and HTML5, and the whole thing is open source, MIT-licensed, and hosted on GitHub.
      
    • http://ajaxian.com/archives/gordon-flash-runtime-implemented-in-javascript
  • http://github.com/tobeytailor/gordon

Good Resource (Thanks to Adam)

• http://www.readwriteweb.com/
  • Enterprise
    • http://www.readwriteweb.com/enterprise/
  • Cloud
    • http://www.readwriteweb.com/cloud/
• http://www.infoq.com/
• http://smoothspan.wordpress.com/
• http://techcrunch.com/
• http://mashable.com/
•  

IE Debugging

The following are errors when everything works in Firefox.

1. Could not get the type property. This command is not supported.

var hidden_field1 = row3.appendChild(document.createElement("input"));
hidden_field1.id = 'request_type';
hidden_field1.type = 'hidden'; // problem

In IE you can't change the type of an input element after it has been added to the document, so set before being appended.

2. Object doesn't support this action

var calendar_icon = document.createElement("button");
calendar_icon.type = "button"; // problem

change createElement('input'); but eventually use ajax callback template;

3. Object required
check if object exist

var dt_select_msg = document.getElementById('dt_select_msg');
if(dt_select_msg) { dt_select_msg.style.display = 'hidden'; }


4. Div Overflow

container {
   height:100%;
   overflow:auto;
   position:relative;
}

Symfony Tips (part2)

1. Error 500
http://symfony-check.org/

throw new sfException('Testing the 500 error'); 

http://www.symfony-project.org/gentle-introduction/1_4/en/19-Mastering-Symfony-s-Configuration-Files#chapter_19_sub_default_modules_and_actions

symfony 1.2-
web/errors/error500.php

symfony 1.2+
config/error/error.html.php
config/error/unavilable.php


In application settings.yml
set check_lock to true

2. Session name

# ProjectName/apps/appName/config/factories.yml
  storage:
    class: MysqlSession
    param:
        session_name: xxxsession
        db_table: session
        database: uxsession


http://www.symfony-project.org/reference/1_4/en/07-Databases
symfony use databases.yml to determine the connection settings (host, database name, user, and password)

# ProjectName/config/database.yml
all:
  xxxsession:
    class:          sfPropelDatabase
    param:
      dsn:          mysql://xxxxxxx


Problem:
Fatal error: Class 'sfPropelDatabase' not found in /root/workspace/ProjectName/cache/appName/dev/config/config_databases.yml.php on line 6

From doctrine to Prople
http://stackoverflow.com/questions/1835676/switch-symfony-1-4-from-doctrene-to-propel

#ProjectName/config/ProjectConfiguration.class.php
public function setup()
{
//    $this->enablePlugins('sfDoctrinePlugin');
      $this->enablePlugins('sfPropelPlugin');
}


Problem:
Fatal error: Declaration of MysqlSession::sessionWrite() must be compatible with that of sfDatabaseSessionStorage::sessionWrite() in /root/workspace/ProjectName/lib/symfony/MysqlSession.class.php on line 2


#ProjectName/lib/symfony/MysqlSession.class.php
public function sessionWrite($id, &$data) //reference parameter


Problem:
Unable to open PDO connection [wrapped: SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)]



3. Incomplete Object

Fatal error: xxx_xxxActions::executeGroup() : The script tried to execute a method or access a property of an incomplete object. Please ensure that the class definition XXXXXXX of the object you are trying to operate on was loaded _before_ unserialize() gets called or provide a __autoload() function to load the class definition in /root/workspace/xxxx/actions/actions.class.php on line 40

Add the XXXXXXX object into the config.php

require_once('xxxxxx/service/xxxx/XXXXXXX.php');

4. Symfony cc
Different environment, index_dev.php works, index.php not.
Try to symfony10 cc, command not found;
Use ./symfony cc

Symfony: Mailer

In action

$message = $this->getMailer()->compose(
    array('your@email.com'=>'Your Name'),
    'otheremail@email.com',
    'Subject',
    'Body'
);
$this->getMailer()->send($message);


factories.yml

dev:
  mailer:
     class: sfMailer
     param:
       logging:           %SF_LOGGING_ENABLED%
       charset:           %SF_CHARSET%
       delivery_strategy: realtime
       transport:
         class: Swift_SmtpTransport
         param:
           host:       localhost
           port:       25
           encryption: ~
           username:   ~
           password:   ~


YUI: Customize YUI

Building Your Own Widget Library with YUI
http://yuiblog.com/blog/2008/06/24/buildingwidgets/

Customizing Existing YUI Component

YAHOO.namespace static function to create an object space for our own library

YAHOO.namespace('SATYAM');  // create a property SATYAM under YAHOO

Define Constructor

YAHOO.SATYAM.LoadingPanel = function(id) {

  YAHOO.SATYAM.LoadingPanel.superclass.constructor.call(this,
    id || YAHOO.util.Dom.generateId() ,
    {
       width: "100px",
       fixedcenter: true,
       constraintoviewport: true,
       underlay: "shadow",
       close: false,
       visible: false,
       draggable: true
    }
  );

  this.setHeader("Loading ...");
  this.setBody('');
  YAHOO.util.Dom.setStyle(this.body, 'textAlign', 'center');
  this.render(document.body);
};


Use YAHOO.lang.extend
superclass is part of the inheritance mechanism provided by YUI’s extend method. After you declare the constructor for your new object, you call extend:

YAHOO.lang.extend(YAHOO.SATYAM.LoadingPanel, YAHOO.widget.Panel);

The constructor itself does not get executed immediately. The extend function does get executed immediately.

We use method call of JavaScript native Function object, which takes the first argument as the execution scope of the function called and passes it the rest of the arguments.

To Use the object we just created

if (!loadingPanel2) {
   loadingPanel2 = new YAHOO.SATYAM.LoadingPanel();
}
loadingPanel2.show();

Puts all the code within an anonymous function, which gets immediately executed (notice the empty parenthesis at the end)

YAHOO.namespace('SATYAM');
(function(){
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        Panel = YAHOO.widget.Panel;

 // here goes the library contents itself
 // constructor
 // extend component
})();
YAHOO.register('SATYAM.LoadingPanel', YAHOO.SATYAM.LoadingPanel, {version: "0.99", build: '11'});

After we declare the instance of the YUI Loader that we will use, we call method addModule providing the information about our library file

var loader = new YAHOO.util.YUILoader();

loader.addModule({
   name: 'SATYAM.LoadingPanel',
   type: 'js',
   requires: ['container'],
   fullpath: 'LoadingPanel.js'
});

loader.require('reset', 'grids', 'base', 'SATYAM.LoadingPanel');








YUI: Drag & Drop

YUI 2: Drag & Drop
http://developer.yahoo.com/yui/dragdrop/

var dd1 = new YAHOO.util.DD("element1");
var dd2 = new YAHOO.util.DDProxy("element2"); //proxy element during movement
var dd3 = new YAHOO.util.DDTarget("element3"); //target for drag & drop interaction


Drag & Drop Manager
YAHOO.util.DragDropMgr (or alias YAHOO.util.DDM)

//sets the time delay between a mousedown and a
//drag event to 1200 milliseconds:
YAHOO.util.DragDropMgr.clickTimeThresh = 1200;


Interaction Groups
Each Drag and Drop object belongs to one or more interaction groups. Drag and Drop events fire only when the dragged element interacts with other objects that with which it shares a group membership. If no group is specified in the constructor, an object belongs to the "default" group

// No group specified so dd0 is assigned to the "default" group
var dd0 = new YAHOO.util.DD("elementid0");
// dd1 is a member of group1
var dd1 = new YAHOO.util.DD("elementid1", "group1");
// dd2 is a member of group2
var dd2 = new YAHOO.util.DD("elementid2", "group2");
// dd3 is a member of both group1 and group2
var dd3 = new YAHOO.util.DD("elementid3", "group1");
dd3.addToGroup("group2");
//groups can be removed via script as well:
dd1.removeFromGroup("group1");


Interesting Moments & Custom Events

var dd = new YAHOO.util.DD('demo');
dd.on('dragEvent', function(ev) {
YAHOO.log('Element is being dragged.');
}, dd, true);