Spain Wins UEFA Euro Cup Final!!!

The UEFA Euro Cup came and went, just like that.  With back to back games there was hardly any time for the players to rest up in between matches.  I would have loved to see a Russia - Germany or Spain - Turkey final but Turkey and Russia lost in the semi final stages.  Hats off to Spain for playing immaculately, and keeping their composure against Germany (A gargantuan team).  Well done Torres (man of the match and only goal scorer), you have indeed proved yourself a top class player once again.

torres11.jpg
fans.jpg
ballack.jpg
celebration.jpg

Designing Liquid Stages in AS 2


BREAK

Designing for different resolutions can be tricky if you are a novice flash user.  There are those who feel once they understand how to design a liquid stage in flash they have become masters, while others consider it just a milestone.  It’s a bit of both for me, but you should be able to design a Fluid width site which accommodates all screen resolutions.
BREAK
Take a look at the above example, download the file and embed it into your html page.  Change your screen resolution or maximise your window to see how the movie-clips adapt to different resolutions whilst positioning themselves through the onstage.Resize functions.  The code is well commented, however if you are a complete noob then you’ll have some tinkering to do!!

NOTES

-  No need to install tween libraries as the file uses native classes that ship with flash.
-  Aligns all elements to stage.
-  ActionScript 2 and saved in Flash CS 3 format.

Happy Flashing!! :-)

ROZEE.PK Flash/Flex. Anyone interested in joining a FLEX user group??

Hey everyone!! I managed to do a little marketing today and signed up on Rozee.pk site. My intentions are pretty straightforward and am looking to work locally in market (apart from my other projects). If anyone would be interested in contracting my services or just dropped by to say “HI” you can always reach me through my blog or website. I do understand that Rozee is a marketplace for employment and though i might not be looking for a permanent job i wanted to introduce myself and build relationships with professional and caring companies.

flex_user.jpg


BREAK
//GO BABY GO!!!!!
BREAK
One question i wanted to ask anyone out there was would you all be interested in participating in a User Group for Adobe Flash/Flex in Karachi? I would like to see people from all walks coming (Java Developers and C++ developers are welcome!!!) and participate by giving lectures and sharing their code with the community - Yes sharing is caring!!! We all seem to be ranting on about the Indians and how far they have gotten, but fail to help each other out or don’t make a conscious enough effort. Take it from me if you want to learn you will learn.
BREAK

I can tell you one thing. Flex is the buzz nowadays everywhere in the world. The problem is that there is more demand than supply for flex developers so those who have the skills can take advantage of the good salaries they pay. Even if you dont come from a programming background (I don’t) i am sure that with a little determination you would eventually understand and learn the key concepts in RIA DEVELOPMENT. In the near future i will be screen/podcasting (havent decided yet) some of my work in Flex Builder 2-3 so you can always come here and get up to speed with things.

Navigation in Flex - Understanding the basics

Navigation plays a leading role in all applications. The more you study navigation techniques the more you will understand that navigation is at the core/heart of a any application - the better the navigational system the more unique the user experience.

Navigation in the flex environment is not too difficult and starts with Navigation containers. A subclass of Flex containers is represented by the Navigational container. The benefits of this type of container is that it allows you to navigate and move around the application. Different elements of the user interface are revealed according to the path that the user chooses.

These are some of the Navigator containers in Flex:

  • ViewStack
  • Accordian
  • LinkBar
  • MenuBar
  • ButtonBar
  • TabBar
  • TabBarNavigator
  • ToggleButtonNavigator

What important to understand is that the above listed containers allow you to control the interactions that the user makes in the application. Secondly and just as important is that you can program the components of the application in response to user interactions.

Continued with an example in flex…
Read the full article

The Flex Event Model

Everything in Flex occurs based on an event. This means that simply clicking a button or key to moving the mouse or receiving a response from a web service provides developers with the ability to trigger a custom event in their Flex applications. That’s a lot of control, and since Flex is not based on the request/response model of a standard web app, the app contains the functionality to perform those custom events without ever leaving the web page. This is because events are client-based—in other words, separated from the request/response model of a web page and do not require the page to refresh with every user interaction.

Events enable an application to respond to an occurrence such as a certain variable value being achieved or the user clicking a certain button. They form an essential part of application development. Consider this straightforward example as the building blocks of Flex System and User Events combined in one small application.


BREAK
When an event is triggered, there are three phases that flex uses to determine whether there are event listeners.

  • Capture phase: Flash Player checks every node from the root of the tree to the direct parent of the target node to see whether it has a listener registered to handle the event.
  • Target phase: The event is dispatched to the target node.
  • Bubbling phase: Flash Player carries out a check in a reverse manner with respect to that of the capturing phase (starting from the direct parent of the target node to the root of the tree).

Two types of events exist in Flex: System events are dispatched when the code is executed, and User events are dispatched when the user who is using the application interacts with the features of the application itself (for example, buttons, form elements, navigation controls).

A simple Flex Conversion Application

BREAK
This is an example of a simple flex app that converts miles to kilometers and vice versa. Notable features are:

  • Uses <mx:Script> instead of inline actionscript elements.
  • Validation for invalid characters.

There are many ways to approach this sort of simple flex app, but but building the project from ground with packages in AS 3 would be the most efficient in this case.

DEVIGNERS PART 1: Understanding Web Applications

/*
A new breed of i.t. professionals are brewing nowadays. They are called “devigners”…These individuals have learned to fuse both design and development to create Rich Internet Applications. With the market headed towards RIA’s wouldn’t you want to create a stateful client where significant changes to the view would not require to reload another page?
*/

Web Applications present data within web pages that appear within a browser. These web pages provide an easy way for users to interact with data.

Web Apps typically consist of a number of different layers

  • The user interface layer: Provides the means for a user to interact with the data in the web application. It usually consists of web pages that include standard elements such as buttons, text inputs, drop-down lists, images, and hyperlinks.
  • The data used to populate the user interface
  • A third layer that allows the user interface to interact with the data layer.

These layers are often called n-tier or multi-tier architecture. In n-tier architecture, the user interface is referred to as the presentation tier or layr. In web applications, the presentation layer occurs withing hte web browser using XHTML or SWF objexts, and client - side scripting such as JavaScript or Actionscript.

The user interface displays data from databases, XML, and text documents, the file system, and data streams from web services and RSS feeds. Increasingly, web applications rely on XML structures to provide content. The XML content might just result from a request to a database or by receiving a response from a web service.

This layer is called the data tier in n-tier architecture. The layer is abstracted from the presentation tier and is located separately. A database server provides a good example of the data tier. It exists separately from the web browser and server.

To include data from the data tier within the presentation tier, there is a need for a middle layer between the two. In n-tier architecture, this layer is called the business logic, or application tier. This tier exist as an itermediary between the data source and the application interface. It also enforces business rules and other logic required within the web application.

The business logic tier exist within an application server and relies on server side languages, such as ColdFusion, ASP.NET, and PHP. This layer is responsible for requesting data from the data tier and providing it to the presentation tier in an appropriate format, often using an XML structure.

One implication of using n-tier architecture is that this approach separates the presentation layer form the data source. It’s not possible for the client software to communicate directly with a database. Instead, the communication between the two is handled with a server side language and an application or web server withing the business logic tier.

PART II (Coming) - How flex fits into an n-tier architectural style….

Flash Player 10 (BETA) Release

On the 15th of May Adobe released the beta version of the Flash Player 10 code named “Astro”. I’m excited about this release as it offers many new and improved features. You can download it here.

flashplayer10.jpg

Screenshots of some of the new features added and improvements of older features. The features i liked where the support for (a) support for ligatures (b) vertical text and (c) easy integration of 3D capabilities.

fl10_ligatures.jpg

fl10_verticaltext.jpg

fl10_3d.jpg

Other features to note is advanced support for text since the Flash Adobe Player team and Product manager Justin Everett-Church have built up the text engine from ground up. You can take a device font and style it while adding filters to it as well. The features i liked the best was multi column support for text fields and especially the fact that you can create custom components extending the already built in ones.

Another awesome feature is support for RTMFP and P2P.

There has been a lot of great excitement around RTMFP (Real Time Media Flow Protocol), especially because of the peer to peer (P2P) communication that is enabled in Flash Player 10 beta. This is a natural time to speculate about what cool applications you will build with new technology, so I’d like to give you some more information for you to work with.

Since I have been frequently been asked about details on this, a frequently asked questions format somehow seemed appropriate ;). For those that want to start working with RTMFP, make sure to read to the end, there is a goody for you!

You may read more about it here on Justin’s blog, or watch some of the video demos listed below:

Installing APACHE 2.0.6 / PHP5.2.6 for Windows

BRIEF HISTORY OF APACHE (As written on Wikipedia)

The Apache HTTP Server, commonly referred to simply as Apache [??pæt?i], is a web server notable for playing a key role in the initial growth of the World Wide Web. Apache was the first viable alternative to the Netscape Communications Corporation web server (currently known as Sun Java System Web Server), and has since evolved to rival other Unix-based web servers in terms of functionality and performance.

It is often said that the project’s name was chosen for two reasons: (1) out of respect for the Native American Indian tribe of Apache (Indé), well-known for their endurance and their skills in warfare, (2) and due to the project’s roots as a set of patches to the codebase of NCSA HTTPd 1.3 - making it “a patchy” server.

Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation. The application is available for a wide variety of operating systems, including Unix, FreeBSD, Linux, Solaris, Novell NetWare, Mac OS X, Microsoft Windows, OS/2, and eComStation. Released under the Apache License, Apache is characterized as free software and open source software.

Since April 1996 Apache has been the most popular HTTP server on the World Wide Web. However, since November 2005 it has experienced a steady decline of its market share, lost mostly to Microsoft Internet Information Services. As of April 2008 Apache served 50.42% of all websites.

BRIEF HISTORY OF PHP

The origins of PHP date back to 1995, when an independent software development contractor names Rasmus Lerdorf developed a Perl/CGI script that enabled him to know how many visitors were reading his online resume’. His script performed to tasks: logging visitor information, and displaying the count of visitors to the Web page.

Because the Web as we know it today was still young at that time, tools such as these were nonexistent, and they prompted emails inquiring about Lerdorf’s scripts. Lerdorf thus begun giving away his toolset, dubbed Personal Home Page. The clamor for the PHP toolset prompted Lerdorf to cuntinue developing the language, perhaps the most notable change early change coming when he added a feature for converting data. Ongoing additions to the PHP toolset cuminated in November 1997 with the release of PHP 2.0, or Personal Home Page - Form Interpreter (PHP-FI). As a result PHP’s rising popularity, the 2.0 release was accompanied by a number of enhancements and improvements from programmers worlwide.

The new PHP release was extremely popular, and a core team of developers soon joined Lerdorf. They kept the original concept of incorporating code directly alongside HTML and rewrote the parsing engine, giving birth to PHP 3.0, By the June 1998 release of version 3.0, more than 50,000 users were using PHP to enhance their Web Pages.

Development continued at a hectic pace over the next two years, with hundreds of functions being added and the user count growing in leaps and bounds. At the beginning of 1999, Netcrafts reported a conservative estimate of a user base surpassing 1,000,000, making PHP one of the most popular scripting languages of the world.



INSTALLING APACHE 2.0.6 FOR WINDOWS

Installing the Apache server coupled with PHP 5 can sometimes be a daunting task simply because open source technologies are always changing with newer releases, patches, etc, etc. I would like to take this time to make simplify the process of installing a working server on your local machine.There are numerous ways to install the Apache server on your local machine:

  1. Using a bundle software such as XAMPP (Apache Friends).
  2. Installing APACHE 2.2 / PHP5 manually.
  3. Installing APACHE/PHP 5 through the MSI installer.

We will be focusing on installing APACHE/PHP5 on your local machine (Windows XP) with the MSI installer. Though it is most preferable to manually configure Apache / PHP5 this is a beginner tutorial to get you up and running. Hey i used to be a complete noob too so take it from me, it’s better to start off small and then build your way up. I will post another tutorial on installing manually in the next couple of weeks. Lets begin shall we?

  1. STEP 1: Start by getting all the resources for the installation. By resources i mean all the downloads from the APACHE and PHP Websites. Goto the Apache Website (http://httpd.apache.org - ScreenShot 1) - and download the Win32 Binary without crypto (no mod_ssl) (MSI Installer) (http://httpd.apache.org/download.cgi - ScreenShot 2).
    BREAK
    apache_org1.jpg
    BREAK
    apache_msi1.jpg
  2. STEP 2: Double Click on the MSI Installer Icon and you will be taken to the welcome screen . Take a moment to read it and click next.
    BREAK
    apache_welcome.jpg
  3. STEP 3: Accept the terms of the license agreement and click next.
    BREAK
  4. STEP 4: You will be prompted for various items pertinent to the server’s operation, including the Network Domain, Server Name, and Administrators Email address. If you know the information fill it in, otherwise just use localhost for the first two items, and put in your email address for the last. Keep for all users on Port 80, as a service Checked. This allows Apache to initialize on startup of your computer.
    BREAKapache_local.jpg
    BREAK
  5. STEP 5: You will be prompted to select a setup type. For right now choose Typical.
    BREAK
  6. STEP 6: Lastly you will be prompted for the destination folder. By default this is C:\Program Files\Apache Software Foundation, but you may choose install anywhere you like, just make sure you avoid spaces. Click install to complete the installation

Thats it for Apache. Easy wasn’t it? You should see an Apache icon in your system tray (Bottom Right).
BREAK
apache_systray.jpg

Make sure that you stop and restart Apache to make sure it is running properly. If you fail to do so then later when you install PHP5 it won’t work.


INSTALLING PHP5.2.6 FOR WINDOWS:

  1. STEP 1: Just as you did for the Apache Installation obtain all the resources from the PHP website (http://www.php.net). Make sure that you download the latest version of PHP 5 which is PHP 5.2.6.
    break
    php1.jpg
    break
    php_installer1.jpg
  2. STEP 2: Once downloaded Double Click the PHP-5.2.6 Win-32 Installer and you will see a welcome Screen.
    break
    php_welcome.jpg
  3. STEP 3: Click Next and Agree to the Terms of the License.
    break
  4. STEP 4: You will be prompted to select the Web Server you wish to setup. Choose Apache 2.2x Module since you have already installed the Apache 2.2+ Server. Click Next.
    Break
    php_module1.jpg
  5. STEP 5: In the Apache Confiuration Directory choose C:\Program Files\Apache Software Foundation\Apache2.2\, or the install directory where you installed Apache. Click Next and in the choose items to install prompt click next and install PHP on your machine.

Thats it for installing PHP 5.2.6 on your local computer using the MSI installer. Now its time to test and see if the installations actually worked.

Locate the directory where you installed Apache 2.2. By default that directory is C:\Program Files\Apache Software Foundation, but choose the location where you installed it if it was different than the default. Open that folder and look for a folder named htdocs.

Once you have navigated to that folder successfully open up a text editor such as Notepad or Notepad ++ and type in the these lines:

<?php
phpinfo();
?>

Save the page as phpinfo.php in the htdocs folder where you installed Apache. The phpinfo() function offers a plethora of useful information pertinent to your php installation. Lastly open your browser and type: http://localhost/phpinfo.php and if all went well you should see this webpage appear in the browser.

phpinfo.jpg

If you are seeing error messages or nothing at all for the output it is duew to one or more of the following reasons:

  • Apache was not started or restarted after the build process was complete.
  • A typing error was introduced into the code in the phpinfo.php file. If a parse error message is resulting in the browers input, then this is almost certainly the case.
  • Something went wrong during the build process. Consider rebuilding, carefully monitoring for errors.

If you navigate to your start menu, under the Apache HTTP Server 2 menu item you will see that you can test your configuration and monitor the service.

Notes: I have not touched on the php.ini file or the Apache httpd.conf files in this tutorial. In the next tutorial i will help you to understand these two files and how to use them to your advantage.

Firebug - A dream for web developers.

If you haven’t found it already firebug is a great extension for Mozilla Firefox. Its probably the best addon out there for FF andi cant believe that i hadn’t come across this little baby. So what is firebug?

firebug1.jpg

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.  Indeed this is a very handy extension for anyone who is curious to know the inner workings of a web page.