Srinivas's Blog

Part 04. Learning Web Technologies With Sri – HTML, CSS, Javascript – Getting Started

Srinivas — Sat, 12 May 2012 00:31:52 +0000

Note: This post or article are governed by following disclaimer policy.

This is the fourth edition of the series “Learning Web Technologies with Sri”. In First edition or part, we did learn about Networks & in Second edition or part, we did learn about Servers with differences between Application & Web Server. In Third edition or part, we did learn about word INTERNET, what is it etc.. Now lets learn about topic which makes Internet world beautiful. Web is nothing but an information document which is well formatted and made it available to world through internet. These documents are beautified, delivered, created, edited, or deleted using many technologies or languages. One among these is HTML, CSS, JAVASCRIPT. They accompany each other generally and work together to make web document more understandable, usable and helpful. If you see one way HTML, CSS, JAVASCRIPT is all about separating content, presentation & model/controlling the web document. As each one of them is quiet a big topic to cover, I will start with basics and move till intermediate level in topics and try to cover as much as possible, from there on I guess internet/books etc.. are resources for you to learn more. With that said, without further more delay let’s learn about these things.

HTML

HTML is a language describing web pages. It is nothing more than fancy structured content. HTML is a markup language. HTML stands for Hyper Text Markup Language. Once we say it’s markup language, it means that it’s not a programming language. Then what is Markup Language? A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the “marking up” of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors’ manuscripts. HTML uses markup tags to describe it’s contents. HTML markup tags are usually called HTML Tags. HTML tags are nothing but keywords surrounded by angle brackets like . Generally they come in pair like and [Note : This is not true in all cases, example br tag does not have ending tag]. HTML document describes web page & are generally the document itself is known as web page.

After understanding what is HTML in brief, the next question that would arise is who would understand this specially annotated document? How will user understand this annotated document? etc… The answer to all these question is Web Browser. Web Browser is an application on the machine/system [like Firefox, Internet Explorer, Safari, Chrome etc..], which would understand this markup language and translate the document into well organized, fancily structured format and presents it to user. The web browser does not display the tags, instead it interpret the contents of the page/document. HTML elements are displayed in particular fashion which are defined by styles. Normally these styles are defined in a external file with extension “css”.

CSS

As said earlier, styles defines, how the HTML elements are displayed. Styles were added to HTML 4.0 to solve a problem. These styles are stored in an external file with extension “css”. CSS stands for “Cascade Style Sheets“. HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like heading, paragraph etc.. When tags like font and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers [In those days Developers who develop web pages/web document were commonly known as web developers, now a days term Web Developer has become too complex to define , will try in later articles]. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. Today all browsers support CSS. The advantage of External style sheets is that it enables developers/users/you to change the appearance and layout of all the pages in a website, just by editing one single file!.

For example, In standard HTML you would use tag to make words bold.

<b>make me bold</b>

This works fine, and there is nothing wrong with it, except that now if you wanted to say change all your text that you initially made bold to underlined, you would have to go to every section in the page and change the tag. Another disadvantage can be found when you want to make the above text bold, make font style to Verdana, and change it’s color to blue, you would need a lot of code wrapped around the text like below

<font color="#0000FF" face="Verdana">
   <strong>This is  text</strong>
</font>

This is verbose and contributes to making HTML document messy & unmanageable. With CSS, you can create a custom style elsewhere and set all it’s properties, give it a unique name and then use them in your HTML tags/elements to apply these stylistic properties. Now that we know HTML is document, CSS adds style to it then next question that would arise is how do we make it interactive? The answer to this question is by using Javascript.

Javascript

Javascript is the most popular scripting language on the internet and it works in all major browsers. It was designed to add interactivity to HTML pages. It’s a light weight programming language. It’s usually embedded directly into HTML pages. Javascript is an interpreted language meaning that scripts execute without preliminary compilation. Everyone can use Javascript without purchasing a license!. Ok, we understood Javascript is an scripting language & it adds interactivity to HTML! what sort of interactivity does it add?

Javascript gives HTML designers a programming tool - HTML authors are normally not programmers, but Javascript is a scripting language with very simple syntax!, Almost anyone can put small snippets of code into their HTML pages

Javascript can react to events - A Javascript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.

Javascript can read and write HTML elements - A Javascript can read and change the content of an HTML element.

Javascript can be used to validate data - A Javascript can be used to validate form data before it is submitted to a server. This saves the server from extra processing.

Javascript can be used to detect the visitor’s browser - A Javascript can be used to detect the visitor’s browser, and depending on the browser, load another page specifically designed for that browser.

Javascript can be used to create cookies - A Javascript can be used to store and retrieve information on the visitor’s computer.

Javascript adds enormous other abilities, above are few of them. Javascript is an implementation of the ECMAScript language standard. ECMA-262 is the official Javascript standard. It was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all browsers since 1996. The official standardization was adopted by the ECMA Organization in 1997. The ECMA standard called ECMAScript-262 was approved as an international ISO (ISO/IEC 16262) standard in 1998. The development is still in progress.

With that I will sign off this getting started article of HTML, CSS, and Javascript. In the next article we will actually dive in and get our hands dirty by writing some code and learning the syntaxes of HTML, CSS and Javascript till then

Thanks & Regards, Srinivas

References

W3CSchools

CSSTutorial.net

My First Mac OSX App for OSX Lion and Above

Srinivas — Thu, 10 May 2012 19:27:57 +0000

RIAPress is my first Mac OSX App. This is a utility app which works similarly to normal web browser. Normal web browser would have Ads, Flash Content, Popups distracting the actual content reading, but this App doesn’t support any of these hence giving you a Ads Free, Pop Up free content reading experience.

Thanks & Regards, Srinivas

Working with AIR Native Extensions on the Mac

Srinivas — Tue, 27 Mar 2012 19:48:58 +0000

Note: This post or article are governed by following disclaimer policy.

Prior to Adobe AIR 3, only Adobe could add core features to the runtime. Developers requiring new features could only wait. Now developers can extend the runtime themselves. This new capability allows developers to:

Achieve deeper integration with target devices

Incorporate legacy native code in their application

Achieve maximum performance for critical code

With that said, lot of articles are available on web which explains how to build AIR Native extensions, the below are few among populars

Oliver Goldman has nice explanation of ANE in his article in Adobe Developer Network.

In Nick’s blog you will find good article on developing ANE on Windows using CDT & MinGW. He also has an article on developing ANE on Mac.

You can find popular ANE’s in adobe site.

Daniel Koestler has good article on developing ANE for Android.

Even though lot of these article should help you run through samples, understand how ANE works, issues would arrise when you try to build these samples from scratch by yourselves, especially in Mac platform. I guess the problem is with the steps we follow to build ANE’s. Each of those samples, articles we follow sometimes works for particular version of editor, SDK’s etc.. With that said this post should help you build ANE for Mac using Xcode with ease. I have followed the same steps which I am going to explain here & tested on Snow Leopard & Lion with Xcode 4.2.x as well as Xcode 4.3.x, and it works great.
Without further delay let’s start on developing an sample ANE. I hope you have already has installed Xcode, Flex Builder 4.6 [4.6 had a free upgrade from 4.5.1].

Generally I prefer to write Flex library project and then to support that I like to write an extension, then build ANE and then use it in projects. For this tutorial I will be doing exactly opposite meaning first writing extension, then library, then ANE and a sample project which would use this ANE. To begin with as I said, let’s start writing native extension, for doing so open Xcode and you should see the welcome screen as below

I don’t want to explain Xcode user interface and get distracted from the actual topic, I guess the screenshots are self explanatory. so here you would click on “Create a New Xcode Project” which would result in below

Now here make sure you have selected on left side “Mac OS X” > “Framework & Library” & on right side “Cocoa Framework” , just as shown in above screen shot. Click “Next”, would result next screen

Fill in the information as shown above screen shot.

Product Name : SampleANE

Company Identifier : com.riawanderer [You can change it whatever you want]

Check “Include Unit Tests” to create Unit Test project to test your framework [I am not going to cover this portion!].

Click Next, which would yield in below screen shot

For next few steps I would just attach screen shots which would be self explanatory as these are the settings which you would do in Xcode Build Settings. I honestly feel screen shots would help more than words. But anyways at the end of the screen shots I will definitely summarize the settings before jumping on to code.

Summarizing what all the screen shot shows are :

Select “SampleANE” under “Project”, setting build settings in here would automatically apply to “SampleANE” in the “Targets” as it inherits.

Select “Build Settings” on right side

Ensure “All” | “Combined” are selected

Ensure the below are set in each sections with the values

Under “Architectures”

Architectures to “Standard (32/64-bit intel) – $(ARCHS_STANDARD_32_64_BIT)

Base SDK to “Mac OS X 10.6″

Under “Build Options”

Compiler for C/C++/Objective-C to “LLVM GCC 4.2″

Under “Deployment”

Mac OS X Deployment Target to “Mac OS X 10.6″

Under “Linking”

Compatibility Version to “1″

Current Library Version to “1″

Other Linker Flags to “-flat_namespace -weakFramework” [Note: This is a list first add -weakFramework & then -flat_namespace, yielding in -flat_namespace -weakFramework]

Under “Packaging”

Wrapper extension to “framework”

Under “Search Paths”

Framework Search Paths to “/Applications/Adobe\ Flash\ Builder\ 4.6/sdks/4.6.0/runtimes/air/mac”

Under “LLVM GCC 4.2 – Code Generation”

Optimization level to “None [-0o]“

That completes the settings of the Xcode project. Now let’s go ahead and write the code. If you have noticed on right hand side Tree two files have already been created for us

SampleANE.h

SampleANE.m

The extension code would be present in these two files. I am pretty sure the contents of those files would look like below.

Now we need to add Adobe AIR framework/library.

Right Click on “SampleANE” folder or Project

Click on ‘Add Files to “SampleANE”…’

Browse through path Application > Adobe Flash Builder 4.6 > sdks > 4.6.0 > runtimes > air > mac > Adobe AIR.framework

Click “Add”. [Below screen shots kind of walk through whatever I said in words ]

Adding Adobe Air framework after doing build settings would create a small problem. I hope you guys remember, we set Framework Search Path with ”/Applications/Adobe\ Flash\ Builder\ 4.6/sdks/4.6.0/runtimes/air/mac”, now if you select SampleANE under Target & check Framework Search Path, it would have now repeated twice. Leaving out this as is shouldn’t matter, but i have noticed sometimes this creates issues while compiling the project. The fix for this is that you have to ensure you have only one “/Applications/Adobe\ Flash\ Builder\ 4.6/sdks/4.6.0/runtimes/air/mac” in Framework Search Path. The below screen shots would help you to ensure the same.

Next thing to do is that we need to test our configuration by building the framework. I know you would be thinking without any code why are we building, and the answer is just to ensure, it compiles well with all the settings we have made. Remember in the Architecture settings we said that it is Standard 32/64 bit intel architecture, hence let’s build for 32 Bit and find if it has any issues. Also note that Adobe AIR framework/library which we just added supports only 32 bit, hence we need to change our build to be 32 bit for doing so follow the below screen shot

If all goes well, you should see above screen with one warning, this warning would appear as if you are using LION & Xcode’s latest SDK is 10.7, since we are using 10.6 it would complain and ask us to upgrade, you can ignore this warning. Now that we are here, next step would be writing the actual extension code. Rather than wasting time in typing the code, I will attach the entire project at the end of this post. So with that said, next step would be creating Flex Library project which accommodates or acts like a wrapper for our extension. I guess everybody in Flex world would know how to write Flex Library Project, hence I would just put them in couple of screen shots as below which would be self explanatory.

If you have carefully followed the above screen shots there are two gotcha points

In Flex Library Compiler Settings > Additional Compiler Arguments, we have added one more argument “-swf-version 13″

Other one is in Flex class where we created context in the constructor with “com.riawanderer.extensions.SampleANE”. Please note this, as this is what acts like key between extension, library while communicating. You can learn about these contexts in Adobe’s documentation or in one of the articles mentioned in the beginning of the article.

Now that we have our extension & library which connects or acts like a wrapper, let’s build ANE which would be used in our demo project later. For doing so I prefer to have my ANEBuild folder inside the library project, hence if you see above screen shot, you would find a folder ANEBuild under the project. If you haven’t observed the screen shot and added that folder already, please do so & then follow bellow screen shots for building the ANE.

Now that you have created the folder, Browse through your finder and reach ANEBuild. Here you need to copy the SampleANELib.swc [Output of Flex Library project], SampleANE.framework [Output of the Xcode project] & descriptor.xml which holds the definition for the ANE [You will get this along side the source code at the end of the post]. Note: If you have problems locating the SampleANE.framework, use the menu’s in Xcode [XCode > Preferences > Locations > Locations], look for Derived Data path & you would navigate their to find you SampleANE.framework.

Now that our ANEBuild folder is set, building the ANE takes couple of seconds. For this we need to switch gears to command line. In order to work with command line tools, you need to ensure that Flex SDK path is present in system path variable, you will do so by using EXPORT command.

Open Terminal

Type “export PATH=$PATH:/Applications/Adobe\ Flash\ Builder\ 4.6/sdks/4.6.0/bin” & then press enter, this should add Flex SDK path temporarily for this session of Terminal

Check by using “echo $PATH”

Now that we have set SDK path, first step in building ANE is that we need unzip the contents of SampleANELib.swc, this you could do by using JAR command as show below screen shot

[command : JAR -xf SampleANELib.swc catalog.xml library.swf].

Next building the actual ANE. use adt command as follows [Command : adt -package -target ane Sample.ane descriptor.xml -swc SampleANELib.swc -platform MacOS-x86 library.swf SampleANE.framework]

This would generate Sample.ane file which we will be using in our demo project. So without any further more delays let’s create a sample demo project to test our ANE. Follow below screen shots and they should be self explanatory in creating demo app.

Now that we have created the project, let’s create a folder “extensions” under the project where the ANE file will be copied, this we do cause in Mac, Flex Builder 4.6 has bug which would basically doesn’t link the ANE properly and when you run your app it would complain that the methods in ANE are not defined, so we need to run the app from command line, to do so you would need ANE file to be extracted, as I like my extensions to be present in same directory as my project, we are creating this folder & extract there. You can have your own preference, but ensure while running the app & extracting the ANE, you replace my folder path with your’s.

Copy the Sample.ane from ANEBuild folder. [If you have followed the steps, then your Package Explorer should look like mine ]

To add the ANE you just copied, go to Flex Project properties, Under Flex Build Path you find a Native Extensions Tab, Click on “Add ANE..” and add your Sample.ane as shown below.

Now that we have added Sample.ane, let’s start our demo project coding, follow the below screen shots for code or you could find it in the end of this post for source code.

Now that simple demo code is ready, let’s run and see what does it do. When you run the app you should see below error indicating that Flex Builder Bug exists .

So now, let’s switch gears to command line to run the app.

Open Terminal

Ensure PATH variable has Flex SDK path [If it is not, then use "export PATH=$PATH:/Applications/Adobe\ Flash\ Builder\ 4.6/sdks/4.6.0/bin" command to do so]

Navigate to extensions folder & create folder “SampleANE.ane”

get into “SampleANE.ane” folder & use unzip command to extract the contents of Sample.ane [Command : unzip ../Sample.ane, this from current working directory "SampleANE.ane"]

After running the command, you should see something similar to below screen shots

Now that we have extracted the ANE, use the below command to run the app [assumption is that you have navigated two step back and in SampleANEDemo project folder]

[Command: adl -runtime /Library/Frameworks -profile extendedDesktop -extdir extensions/ bin-debug/SampleANEDemo-app.xml]

Once you run the above command you should see below screens

Click on “Is Supported” Button to see below screen shot.

Click on “Say Something” button to see below result.

Congratulations, you have built your ANE successfully & you know now how to write your own ANE’s for AIR-Flex in Mac .

As promised before here is the zip file that should contain individual projects and also folders mentioned in the screen shots. Please feel free to comment, contact me for any issues or discrepancy you find in the post .

Thanks & Regards, Srinivas

Part 03. Learning Web Technologies With Sri – INTERNET

Srinivas — Tue, 10 Jan 2012 01:08:42 +0000

Note: This post or article are governed by following disclaimer policy.

This is the third edition of the series “Learning Web Technologies with Sri”. In First edition or part, we did learn about Networks & in Second edition or part, we did learn about Servers with differences between Application & Web Server. After understanding Networks & Servers, the next question that would arise is WHAT IS INTERNET then? what does it contain etc.. etc.. I will try to answer those question in this part & will try to keep it as sweet & short as possible.

Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite [TCP/IP] to server billions of users world wide. In short it’s networks of networks, meaning this is a network of all millions of private, public, business, academic, government networks in the world. I guess you have question now, how is your computer connected to so called networks of networks [Internet], the answer to that is, you are connected through your ISP [Internet Service Provider]. Your computer is in network of ISP, ISP server’s in network to their ISP and so on so forth. Next question would be how is this networks connected?. These are normally linked by a broad array of electronic, wireless & optical networking technologies. I know at this point you should get lot of questions related signals, transmission of data between networks & other stuff. I guess I don’t have so much patience to explain in detail about all these things. I will leave it to you guys to read about it. There are so many books available on Computer networks.

Alright next the question that definitely arise why go through all hassle to link all these millions of millions computers together, answer to that is, information interchange. Internet carries extensive range of information resources and services, such as inter-linked hypertext documents of the World wide web & it also has infrastructure to support email, media including music, film etc.. The growth of internet is such that even most traditional communications media including television, music, film & television are reshaped or redefined. Internet gave birth to new services like Voice Over Internet Protocol [VOIP] for telephone services, IPTV for television services, News paper, book & other print publishing are adapting to web site technology or reshaped into blogging & web feeds. It has also enabled new forms of human interactions through instant messaging, forums, & social networking like Facebook, Twitter, Google+ etc.. Online shopping has boomed both for major retail outlets & small artisans, traders etc.. Not only this, business-to-business & financial services on internet affect the supply chains across entire industries. In short I can say it’s heart of all modern day activities which a normal person would do! [I guess we can find still few people in some places that they are not exposed to these maybe cause of not getting all required amenities or lack of knowledge or interest, hope GOD gives them time to know about all these! or are they happily living by not knowing all these!!?!! ]. I will not bore you guys more & let you read more. I wish I could explain everything in deep,but it would divert our actual topic of learning the web technologies!!. So for further information on internet like history, protocols, structure, data transfer etc.. please read up wikipedia’s topic on Internet or read any popular books on Internet.

Thanks & Regards, Srinivas

References

Wikipedia – Internet

NFL – Super Bowl’s [Updated till 46]

Srinivas — Sun, 30 Jan 2011 05:08:09 +0000

Note: This post or article are governed by following disclaimer policy.

You could already guess from my name that I am basically from INDIA, where CRICKET is everything and Indian Premiere League[IPL] has boomed the way world looks at Cricket and India. To prove my point how important Cricket is for India, the advertisement media rights for Indian Cricket was sold at record 386 Million dollars for 5 years I believe [not sure about the number of years, previously it was $80+M]. Each player who is auctioned in IPL worth more than an half a million dollar for 8 weeks [i.e.,14 games], before IPL, average player earning was not even 40,000$ for year [not for all players, some of the young guys, who now are auctioned at as high as 1.9M$ for 2 year (i.e..,16 weeks, 28 games in total)] .

Entire 1B people goes GAA GAA & wild when batting master Sachin Tendulkar comes on ground!, he is God for Indians. He has more centuries, runs in both Test & ODI than any other player in History of the sport!. It would take me almost 8-10 years to keep appreciating the game and players for their contribution, so let’s stop about Cricket and concentrate on my New Interest Football [American].

My anxiety in game made me to join 5 leagues in Yahoo fantasy leagues for 2010-2011 season & become champion in all!. This achievement and my love towards the game made me dig into record books and figure out and know more about Super Bowl’s and teams. I would like to share the same in this article and hope to keep updating the table of facts every year until I could. Before that, let me share my experience in watching games, playing fantasy football, this season of 45th Year of Super Bowl.

My Experience – Fantasy Football [2010-2011]

I would have never got into this Football game nor fantasy game, if not the project that I am working on. [Sh!!! can't share the project name or anything as I am under NDA]. This project gave me opportunity to understand the rules of the game better & propelled me to see how the game goes & how interesting it would be.

Seeing my interest & excitement in the game, some of colleagues and friends invited me to Yahoo Fantasy football, with zero knowledge of teams, players, got onto fantasy football and went on winning the Championships!. Every week by week my interest towards games became so much that I started watching every game, if not game at-least live scores from NFL.com. Watched every Sunday & Monday night games.

I also went to “Qualcomm Stadium” to see Chargers vs Titans game. I also bought tickets for Chiefs vs Chargers, but due to fever couldn’t go!. 16 weeks long it was very very exciting & winning championships in fantasy was like miracle. Loads of Stat’s, lot of anxiety made it happen. More than all that the fun in the game!, players, on field challenges, off field verbal fight, on Field Fights [Pretty sad to see that], but was fun. By the way you might be amazed to hear that I won all 4 out of 5 leagues with QB being Chief’s Matt Cassel, Cowboy’s QB John Kitna & Raider’s QB Jason Campbell!, no Tom Brady nor Micheal Vick nor Aaron Rodgers or any highly rated QB’s!. I spoke about QB’s rather than any other position is because through out season I had one good WR, one good RB, and solid Defense team except in one of the leagues, and rest everyone was average guys!. It was fun watching how highly ranked and scoring team loose against my team in few decimal points or point or two!, Yes there were games in which I scored very well and win on opposition convincingly too.

Amazing season of football! we saw lot of ups & downs. Unbelievable Favorites Patriots going down against Jets in playoff’s who won on them previously 45-3. Pittsburg Steelers who amazingly hold Jets offense to win Championship in the second half! and move to Super Bowl. We also saw Vick playing his best game ever [at-least I have seen ] and win against Giants in 4th quarter and we also saw same Vick being sacked after sack against Vikings and loosing to them. Eagles loosing to Packers, the saga goes on. It was much treat of games to watch.

Probably I can say it’s treat to watch as I am quiet new and I don’t have any favorites or teams which I cheer for. But for Eagles fan’s I know it would be tough for them to see their team loose. Chief’s ran on success of Cassel – Bowe pair, Jamel Charles success in running game and went onto become Division champs after so many years [I believe]. Entire kansas city was going gaa gaa saying Cassel – Bowe straight to super bowl and was shattered by Ravens who played so well on that day!. I know it’s hard on Kansas to loose the last two games at HOME in-front of HOME crowd, which season long before Raiders never lost in home, but that’s how the game goes on. Similarly Chargers loosing against Broncos I guess, made chargers hopes to playoff’s shatter. If I turn back and see the games which happened in this season everything was fun and very very entertaining. Amazing season. After seeing this amazing season of football and teams who fought so hard, curiosity made me to dig-in to find out more about Super Bowl’s for past 44 years!, and below is the Facts which I found out from NFL.com, and many more resources I referred. Thanks to all of them. Hope this thirst of game continues for me for coming year & also hoping to see one more much entertaining game on Feb 6th, I sign-off with facts of superbowl’s & hope to keep it up to date every year.

Superbowl Facts [Till Number 46]

The below is the table of NFL Super Bowl Winners. Feel free to sort yourself to see the results in specific order!!

TEAM NAME SUPER BOWL NO. YEAR AGAINST SCORE LOCATION COMMENTS

Green Bay Packers I 1967 Chiefs 35-10 Los Angeles, CA

Green Bay Packers II 1968 Raiders 33-14 Miami, FL

New York Jets III 1969 Colts 16-7 Miami, FL

Kansas City Chiefs IV 1970 Vikings 23-7 New Orleans, LA

Indianapolis Colts V 1971 Cowboys 16-13 Miami, FL At that time they were known as Baltimore Colts, relocated to Indianapolis in 1984

Dallas Cowboys VI 1972 Dolphins 24-3 New Orleans, LA

Miami Dolphins VII 1973 Redskins 14-7 Los Angeles, CA

Miami Dolphins VIII 1974 Vikings 24-7 Houston, TX

Pittsburg Steelers IX 1975 Vikings 16-6 New Orleans, LA

Pittsburg Steelers X 1976 Cowboys 21-17 Miami, FL

Oakland Raiders XI 1977 Vikings 32-14 Pasadena, CA

Dallas Cowboys XII 1978 Broncos 27-10 New Orleans, LA

Pittsburg Steelers XIII 1979 Cowboys 35-31 Miami, FL

Pittsburg Steelers XIV 1980 Rams 31-19 Pasadena, CA

Oakland Raiders XV 1981 Eagles 27-10 New Orleans, LA

San Francisco 49ers XVI 1982 Bengals 26-21 Pontiac, MI

Washington Redskins XVII 1983 Dolphins 27-17 Pasadena, CA

Oakland Raiders XVIII 1984 Redskins 38-9 Tampa, FL 1982 season raiders relocated to Los Angeles hence they were called LA Raiders & June 23, 1995 they moved back to Oakland.

San Francisco 49ers XIX 1985 Dolphins 38-16 Stanford, CA

Chicago Bears XX 1986 Patriots 46-10 New Orleans, LA

New York Giants XXI 1987 Broncos 39-20 Pasadena, CA

Washington Redskins XXII 1988 Broncos 42-10 San Diego, CA

San Francisco 49ers XXII 1989 Bengals 20-16 Miami, FL

San Francisco 49ers XXIV 1990 Broncos 55-10 New Orleans, LA

New York Giants XXV 1991 Bills 20-19 Tampa, FL

Washington Redskins XXVI 1992 Bills 37-24 Minneapolis, MN

Dallas Cowboys XXVII 1993 Bills 52-17 Pasadena, CA

Dallas Cowboys XXVIII 1994 Bills 30-13 Atlanta, GA

San Francisco 49ers XXIX 1995 Chargers 49-26 Miami, FL

Dallas Cowboys XXX 1996 Steelers 27-17 Tempe, AZ

Green Bay Packers XXXI 1997 Patriots 35-21 New Orleans, LA

Denver Broncos XXXII 1998 Packers 31-24 San Diego, CA

Denver Broncos XXXIII 1999 Falcons 34-19 Miami, FL

St. Louis Rams XXXIV 2000 Titans 23-16 Atlanta, GA

Baltimore Ravens XXXV 2001 Giants 34-7 Tampa, FL

New England Patriots XXXVI 2002 Rams 20-17 New Orleans, LA

Tampa Bay Buccaneers XXVII 2003 Raiders 48-21 San Diego, CA

New England Patriots XXXVIII 2004 Panthers 32-29 Houston, TX

New England Patriots XXXIX 2005 Eagles 24-21 Jacksonville, FL

Pittsburg Steelers XL 2006 Seahawks 21-10 Detroit, MI

Indianapolis Colts XLI 2007 Bears 29-17 Miami, FL

New York Giants XLII 2008 Patriots 17-14 Glendale, AZ

Pittsburg Steelers XLIII 2009 Cardinals 27-23 Tampa, FL

New Orleans Saints XLIV 2010 Colts 31-17 Miami, FL

Green Bay Packers XLV 2011 Steelers 31-25 Dallas, Tx

New York Giants XLVI 2012 Patriots 21-17 Indianapolis, IN

Some more facts about Super Bowl:

Teams that have never played in Super Bowl

Cleveland Browns

Houston Texans

Jacksonville Jaguars

Detriot Lions

Teams that have never won a Super Bowl [Apart from above 4]

Buffalo Bills

Cincinnati Bengals

Tennessee Titans

San Diego Chargers

Philadelphia Eagles

Minnesota Vikings

Atlanta Falcons

Carolina Panthers

Arizona Cardinals

Seattle Seahawks

Miami has hosted Super Bowl the most times [10 times].

The longest winning streak has only been two in row.

Vikings, Bills, Broncos have lost the most Super Bowls [4 times each]. Bills lost 4 times in a row.

The longest run in Super Bowl was 100 yards after an interception by Pittsburgh Steeler James Harrison during Super Bowl XLII.

Mike Ditka, Tom Flores and Tony Dungy have all won a Super Bowl both as a player and as coach.

In 1981, Oakland Raiders linebacker Rod Martin set a record with three interceptions.

In 2000, St. Louis QB Kurt Warner set a record with 414 yards passing.

In 1989, San Francisco WR Jerry Rice gained 215 yards on 11 catches

Cowboys has been to Super Bowl 8 times, Steelers 7 times, Patriots 6 & Broncos 6 times too.

Most convincing victories were in Super Bowl XXVII, where Cowboys bt. Bills 52-17 & other one was 49ers bt. Broncos 55-10 in Super Bowl XXIV.

In 2007 Season, Patriots had won their first 18 games and lost to Giants [Super Bowl XLII].

Under quarterback Tom Brady and head coach Bill Belichick, the Patriots have also compiled the longest winning streak consisting of regular season and playoff games in NFL history, a 21-game streak from October 2003–October 2004.

With these notes, I will sign-off! and hope to keep it updating as and when I get something to share about more!.

Thanks & Regards, Srinivas

References:

NFL

Wikipedia

Part 02. Learning Web Technologies With Sri – Servers [Applications Servers & Web Servers]

Srinivas — Sat, 03 Apr 2010 01:58:50 +0000

Note: This post or article are governed by following disclaimer policy.

In this second part of “Learning Web Technologies with Sri”, we will understand & learn about web servers, application servers.

Rather than talking about Web Server & Application[App] Server differences, it’s better to know the definitions or the basics of each & then the knowledge of each would bring out the differences between them automatically!!.

Lot of resources are available on web on similar topics. I have gone through few of them & tried to put the things in little different manner so that people can understand it better, especially [School or college Students who have just started to understand or know the web]. In the final segment of this article I have references for the source which I have used or refered. Full Credit & gratitude goes to original author’s of those sources. Without wasting anymore time, let’s dive in & learn about web servers & applications servers. To start with lets talk about Web server.

Web Server

A web server is a computer program that delivers (serves) content, such as web pages, using the Hypertext Transfer Protocol. The term web server can also refer to the computer or virtual machine running the program. In large commercial deployments, a server computer running a web server can be rack-mounted in a server rack or cabinet with other servers to operate a web farm.

When the Web server receives an HTTP request, it responds with an HTTP response, such as sending back an HTML page. To process a request, a Web server may respond with a static HTML page or image, send a redirect, or delegate the dynamic response generation to some other program such as CGI scripts, JSPs (JavaServer Pages), servlets, ASPs (Active Server Pages), server-side JavaScripts, or some other server-side technology. Whatever their purpose, such server-side programs generate a response, most often in HTML, for viewing in a client [example: Web browser]. Next let’s see the history behind the web server.

History behind Web server

In 1989 Tim Berners-Lee proposed to his employer CERN (European Organization for Nuclear Research) a new project, which had the goal of easing the exchange of information between scientists by using a hypertext system. As a result of the implementation of this project, in 1990 Berners-Lee wrote two programs:

a browser called WorldWideWeb;

the world’s first web server, later known as CERN httpd, which ran on NeXTSTEP.

Between 1991 and 1994 the simplicity and effectiveness of early technologies used to surf and exchange data through the World Wide Web helped to port them to many different operating systems and spread their use among lots of different social groups of people, first in scientific organizations, then in universities and finally in industry.

In 1994 Tim Berners-Lee decided to constitute the World Wide Web Consortium to regulate the further development of the many technologies involved (HTTP, HTML, etc.) through a standardization process.

Features

Virtual hosting : to serve many web sites using one IP address.

Large file support : to be able to serve files whose size is greater than 2 GB on 32 bit OS.

Bandwidth throttling : to limit the speed of responses in order to not saturate the network and to be able to serve more clients.

Server-side scripting : to generate dynamic web pages, but still keeping web server and web site implementations separate from each other.

Path Translation : Web servers are able to map the path component of a Uniform Resource Locator (URL) into:

a local file system resource (for static requests)

an internal or external program name (for dynamic requests).

I know it might not be quiet appropriate at this point to talk about Virtual hosting and other stuff, so I will skip explanation of those things & move on path translation.

Whenever user types in url in the Web Client [web browser], such as http://www.riawanderer.com/path/file.html [Note: this is only true for static content requests such as html files, images etc..], the client’s user agent will translate it into a connection to www.riawanderer.com with the following HTTP 1.1 request:

GET /path/file.html HTTP/1.1 Host: www.riawanderer.com

The web server on www.riawanderer.com will append the given path to the path of its root directory. What is this root directory on www.riawanderer.com? to know what is it , let’s assume that the webserver is running on Unix machine, then webserver root is commonly /var/www directory. The result is the local file system resource: /var/www/path/file.html. The web server will then read the file, if it exists, and send a response to the client’s web browser. The response will describe the content of the file and contain the file itself.

The above was just explained in layman terms. Actually the entire flow of request and response are done inside something called HTTP messages. When client [browser] makes a request for a url, as you already know the user agent translates the url into a HTTP request, which is nothing but a request message. A message format is of below

Request

Request = Request-Line ; *(( general-header ;| request-header ;| entity-header ) CRLF) ;CRLF[ message-body ]

The information on what each item/term means in above request can be found in www.w3.org request protocol section.

After receiving and interpreting a request message, a server responds with an HTTP response message. The below is message format for the response

Response

Response = Status-Line;*(( general-header;| response-header;|entity-header)CRLF);CRLF[ message-body ];

The information on what each item/term means in above response can be found in www.w3.org response protocol section.

Ok now we know how a request is sent & how the server responds back. Now next question that would arise is, Are there any limits on how much requests it can handle or respond to?

A Web server (program) has defined load limits, because it can handle only a limited number of concurrent client connections (usually between 2 and 80,000, by default between 500 and 1,000) per IP address (and TCP port) and it can serve only a certain maximum number of requests per second depending on:

its own settings

the HTTP request type

content origin (static or dynamic)

the fact that the served content is or is not cached

the hardware and software limits of the OS where it is working.

When a Web server is near to or over its limits, it becomes unresponsive.

There are many other things/terms/factors to be considered, but I believe the point till what I have covered is sufficient enough to understand what is a web server ! . So next let’s switch gears to understand what Application server is.

Application Server

An application server is a software framework dedicated to the efficient execution of procedures (programs, routines, scripts) for supporting the construction of applications. The term was originally used when discussing early “client-server” server systems and servers that ran SQL services and middleware servers to differentiate them from file servers.

Later, the term took on the meaning of web applications, but has since evolved into more comprehensive service layer. An application server acts as a set of components accessible to the software developer through an API defined by the platform itself. For web applications, these components are usually performed in the same machine where the web server is running, and their main job is to support the construction of dynamic pages. However, present-day application servers target much more than just web pages generation, they implement services like clustering, fail-over and load-balancing so developers can be focused just on implementing the business logic.

Advantages of Application Servers

Data and codeintegrity

By centralizing business logic on an individual server or on a small number of server machines, updates and upgrades to the application for all users can be guaranteed. There is no risk of old versions of the application accessing or manipulating data in an older, incompatible manner.

Centralized configuration

Changes to the application configuration, such as a move of database server, or system settings, can take place centrally.

Security

A central point through which service-providers can manage access to data and portions of the application itself counts as a security benefit, devolving responsibility for authentication away from the potentially insecure client layer without exposing the database layer.

Performance

By limiting the network traffic to performance-tier traffic the client-server model improves the performance of large applications in heavy usage environments.

Total Cost of Ownership (TCO)

In combination, the benefits above may result in cost savings to an organization developing enterprise applications. In practice, however, the technical challenges of writing software that conforms to that paradigm, combined with the need for software distribution to distribute client code, somewhat negate these benefits.

Transaction Support

A transaction represents a unit of activity in which many updates to resources (on the same or distributed data sources) can be made atomic (as an indivisible unit of work). End-users can benefit from a system-wide standard behaviour, from reduced time to develop, and from reduced costs. As the server does a lot of the tedious code-generation, developers can focus on business logic.

So that’s about application server. I hope by now you would have understood both the things & probably understood the difference between them. If not complete, if it has helped to understand both of the terminologies little bit, that satisfies me.

Thanks & Regards, Srinivas

References

Wikipedia – App Server

Wikipedia – Web Server

w3.org – Protocols

Part 01. Learning Web Technologies With Sri – Internet Basics

Srinivas — Mon, 01 Mar 2010 06:07:53 +0000

Note: This post or article are governed by following disclaimer policy.

The first part of “Learning Web Technologies With Sri” will be on “Internet Basics”. I choose this topic to give brief idea about internet & history about it, so that you know what is Internet, how & why it makes so powerful tool for making this communication between each computer or devices unique. So let’s get started. When you hear the word INTERNET, the first question that would arise in mind is What is Internet?

Internet is the largest computer network in the world, connecting millions of computers. A network is a group of two or more computer systems linked together.

So before going further with more details of internet, like different types of network etc.. let me give you brief history of internet. In 1969, the US Department of Defense started a project to allow researchers and military personnel to communicate with each other in an emergency. The project was called ARPANET (Advanced Research Projects Agency Network ) and it is the foundation of the INTERNET.

While mostly military personnel and scientists used it in early days, the advent of the WORLD WIDE WEB in the early 1990′s changed all that. Today, the internet is not owned or operated by any one entity. This worldwide computer network allows us all to communicate and exchange information in new ways. Just for information, according to www.commerce.net, in April 1999, there were 92.2 million internet users over the age of 16 in the United States and Canada. By 2005, it was predicted 75% of the total US population will be online & later it was found that, it well went past the percentage predicted!!.

ok then let’s talk about different computer networks. Common types of computer networks may be identified by their scale.

Personal Area Network (PAN)

A personal area network is a computer network used for communication among computer and different information technological devices close to one person. Some examples of devices that are used in a PAN are personal computers, printers, fax machines, telephones, PDAs, scanners, and even video game consoles. A PAN may include wired and wireless connections between devices. The reach of a PAN typically extends to 10 meters. Wired PAN Network is usually constructed with USB and firewire while wireless with Bluetooth and Infrared.

Local Area Network (LAN)

A local area network is a network that connects computers and devices in a limited geographical area such as home, school, computer laboratory, office building, or closely positioned group of buildings. Each computer or device on the network is a node. Current wired LANs are most likely to be based on Ethernet technology, although new standards like ITU-T G.hn also provide a way to create a wired LAN using existing home wires (coaxial cables, phone lines and power lines).

All interconnected devices must understand the network layer (layer 3), because they are handling multiple subnets (the different colors). Those inside the library, which have only 10/100 Mbit/s Ethernet connections to the user device and a Gigabit Ethernet connection to the central router, could be called “layer 3 switches” because they only have Ethernet interfaces and must understand IP. It would be more correct to call them access routers, where the router at the top is a distribution router that connects to the Internet and academic network’s connecting to customer access routers.

The defining characteristics of LANs, in contrast to WANs (Wide Area Networks), include their higher data transfer rates, smaller geographic range, and no need for leased telecommunication lines. Current Ethernet or other IEEE 802.3 LAN technologies operate at speeds up to 10 Gbit/s. This is the data transfer rate. IEEE has projects investigating the standardization of 40 and 100 Gbit/s.

Home Area Network (HAN)

A home area network is a residential LAN which is used for communication between digital devices typically deployed in the home, usually a small number of personal computers and accessories such as printers and mobile computing devices. An important function is the sharing of Internet access, often a broadband service through a CATV or Digital Subscriber Line (DSL) provider is shared among all the personal computers present in home.

Campus Area Network (CAN)

A campus area network is a computer network made up of an interconnection of local area networks (LANs) within a limited geographical area. It can be considered one form of a metropolitan area network, specific to an academic setting.

In the case of a university campus-based campus area network, the network is likely to link a variety of campus buildings including; academic departments, the university library and student residence halls. A campus area network is larger than a local area network but smaller than a wide area network (WAN) (in some cases).

The main aim of a campus area network is to facilitate students accessing internet and university resources. This is a network that connects two or more LANs but that is limited to a specific and contiguous geographical area such as a college campus, industrial complex, office building, or a military base. A CAN may be considered a type of MAN (metropolitan area network), but is generally limited to a smaller area than a typical MAN. This term is most often used to discuss the implementation of networks for a contiguous area. This should not be confused with a Controller Area Network. A LAN connects network devices over a relatively short distance. A networked office building, school, or home usually contains a single LAN, though sometimes one building will contain a few small LANs (perhaps one per room), and occasionally a LAN will span a group of nearby buildings.

Metropolitan Area Network (MAN)

A metropolitan area network is a network that connects two or more local area networks or campus area networks together but does not extend beyond the boundaries of the immediate town/city. Routers, switches and hubs are connected to create a metropolitan area network.

Wide Area Network (WAN)

A wide area network is a computer network that covers a large geographic area such as a city, country, or spans even intercontinental distances, using a communications channel that combines many types of media such as telephone lines, cables, and air waves. A WAN often uses transmission facilities provided by common carriers, such as telephone companies. WAN technologies generally function at the lower three layers of the OSI reference model: the physical layer, the data link layer, and the network layer.

Global Area Network (GAN)

A global area network is a model for supporting mobile communications across an arbitrary number of wireless LANs, satellite coverage areas, etc. The key challenge in mobile communications is handing off the user communications from one local coverage area to the next. In IEEE Project 802, this involves a succession of terrestrial WIRELESS local area networks (WLAN).

Virtual Private Network (VPN)

A virtual private network is a computer network in which some of the links between nodes are carried by open connections or virtual circuits in some larger network (e.g., the Internet) instead of by physical wires. The data link layer protocols of the virtual network are said to be tunneled through the larger network when this is the case. One common application is secure communications through the public Internet, but a VPN need not have explicit security features, such as authentication or content encryption. VPNs, for example, can be used to separate the traffic of different user communities over an underlying network with strong security features.

A VPN may have best-effort performance, or may have a defined service level agreement (SLA) between the VPN customer and the VPN service provider. Generally, a VPN has a topology more complex than point-to-point.

A VPN allows computer users to appear to be editing from an IP address location other than the one which connects the actual computer to the Internet.

Internetwork

An Internetwork is the connection of two or more distinct computer networks via a common routing technology. The result is called an internetwork (often shortened to internet). Two or more networks connect using devices that operate at the Network Layer (Layer 3) of the OSI Basic Reference Model, such as a router. Any interconnection among or between public, private, commercial, industrial, or governmental networks may also be defined as an internetwork.

Internet

The Internet is a global system of interconnected governmental, academic, public, and private computer networks. It is based on the networking technologies of the Internet Protocol Suite. It is the successor of the Advanced Research Projects Agency Network (ARPANET) developed by DARPA of the U.S. Department of Defense. The Internet is also the communications backbone underlying the World Wide Web (WWW). The ‘Internet’ is most commonly spelled with a capital ‘I’ as a proper noun, for historical reasons and to distinguish it from other generic internetworks.

Participants in the Internet use a diverse array of methods of several hundred documented, and often standardized, protocols compatible with the Internet Protocol Suite and an addressing system (IP Addresses) administered by the Internet Assigned Numbers Authority and address registries. Service providers and large enterprises exchange information about the reachability of their address spaces through the Border Gateway Protocol (BGP), forming a redundant worldwide mesh of transmission paths.

Intranets and Extranets

Intranets and extranets are parts or extensions of a computer network, usually a local area network.

An intranet is a set of networks, using the Internet Protocol and IP-based tools such as web browsers and file transfer applications, that is under the control of a single administrative entity. That administrative entity closes the intranet to all but specific, authorized users. Most commonly, an intranet is the internal network of an organization. A large intranet will typically have at least one web server to provide users with organizational information.

An extranet is a network that is limited in scope to a single organization or entity and also has limited connections to the networks of one or more other usually, but not necessarily, trusted organizations or entities (e.g., a company’s customers may be given access to some part of its intranet creating in this way an extranet, while at the same time the customers may not be considered ‘trusted’ from a security standpoint). Technically, an extranet may also be categorized as a CAN, MAN, WAN, or other type of network, although, by definition, an extranet cannot consist of a single LAN; it must have at least one connection with an external network.

So the next question that would arise is What is a Server & Client?

All computers on the Internet (a wide area network, or WAN) can be lumped into two groups: servers and clients. In a network, clients and servers communicate with one another.

A server is the common source that provides shared services (for example, network security measures) with other machines and manages resources (for example, one printer many people use) in a network.

The term server is often used to describe the hardware (computer), but the term also refers to the software (application) running on the computer. Many servers are dedicated, meaning they only perform specific tasks.

For example,

An email server is a computer that has software running on it allowing it to “serve” email-related services.

A web server has software running on it that allows it to “serve” web-related services.

Independent computers connected to a server are called clients. Most likely, your home or office computer does not provide services to other computers. Therefore, it is a client. Clients run multiple client software applications that perform specific functions. For example,

An email application such as Microsoft Outlook is client software.

Your web browser (such as Internet Explorer or Firefox or Chrome) is client software.

Next question that would arise at this point is how do Servers & Clients Communicate

Your computer (client hardware) is running a web browser such as Internet Explorer (client software).

When you want to surf the web, your browser connects to a remote server and requests a web page.

The remote server (server hardware) runs web server software (server software).

The web server sends the web page to your computer’s web browser.

Your web browser displays the page.

Recap

So in this session of Part 1 of series “Learning Web Technologies With Sri – Internet Basics”, we have covered

Definition of Internet

What is a Network

Different Types of Networks

What is a Server

What is a Client

How do Server & Client Communicate to each other.

In the next session, I will talk more about servers[not hardware] especially Web Server & Application Server. So stay tuned.

References

Wikipedia

GCFLearnFree.org

Thanks & Regards, Srinivas

Learning Web Technologies With Sri – Introduction

Srinivas — Mon, 01 Mar 2010 05:37:30 +0000

Hi Folks,

I have been quiet thinking to blog/podcast on something new from past few months. As I browse the web I see tons of information on every single topic you pick. The best site being always Wikipedia, where you could find topics of almost all the things you want to know. Then I thought, why not bring out existing things with fresh look so that the students [in Schools & Colleges], who are just starting to open their minds & trying to understand the world of technology, can benefit out of it. Hoping that students & other folks[starters] will be benefiting out this series for best, I will be starting this series of “Learning Web Technologies With Sri”. I will be dividing this series into multipart so that I can even have Video podcast’s hosted in iTunes, Blog and other places, so that you need not always go through this feed or blog sitting in-front of computer or your web enabled devices, you can subscribe, download these podcast’s watch or listen to them on go.

I believe 20th century kids are lucky to have so many tools & technology in access to know, understand & feed their thirst for knowledge. Thanks to those scientists, firms who did give so much to this world to make it so knowledgeable.

In this series I will try to cover almost all technologies available in web world with brief introduction to them, features, basic of the technology or language & if possible even pick some advanced topics too. So stay tuned!!. Hope you will enjoy it.

Note: The series of “Learning Web Technologies with Sri” article or post is governed by following disclaimer policy. All references used will be duly mentioned at the end of the post or article, if I forget, credits would be given in Credits page of the blog.

Thanks & Regards, Srinivas

Adobe Flex – BlazeDS – Deployment on Tomcat Integrated Server in MyEclipse Integration – Step by Step

Srinivas — Wed, 04 Feb 2009 01:16:47 +0000

Hi Folks,

This Article/Post is in follow with my previous article on MyEclipse Flex Builder Integration - Installation Steps for Flex Builder Plugin in MyEclipse. Some of the folks, who went through the article, applauded & I was little esteemed by seeing my first article being published in MyEclipse news letter of Jan 2009. Thank you MyEclipse team for recognition given by you folks. Keep up the Good Work. Saying this let me tell you the motto behind writing this article. After seeing the article, many of my Indian Developer folks, went through steps & were able to setup the MyEclipse with Flex Builder Plugin. After that, some of the folks did try to use BlazeDS on top of Tomcat which comes with MyEclipse. Some of them have failed to integrate, either because of the steps followed or because of the confusion involved in the steps of integrating the Flex Builder & MyEclipse together. So to resolve all doubts, issues faced, I was forced to write this article, which basically explains step by step procedure of deploying BlazeDS on Tomcat server in MyEclipse & also configuring Flex Project to work along with it. I will try to make it as simple as possible. As in my previous article, here too I will try to upload a small video & also explain step by step in words along with the help of snapshots.

Note : The article or post is governed by following disclaimer policy.

I have uploaded a small video, which address the steps involved in integrating the BlazeDS on Tomcat of MyEclipse. You can also watch the same below. Kindly bare with quality, it’s not of best as I am using free tool.

Without further delay lets get started in understanding steps involved.

Prerequisites :

Should have integrated MyEclipse With Flex Builder

Download latest release of binary version of BlazeDS from Adobe Open source site – Point to be noted BINARY DISTRIBUTION TO BE DOWNLOADED NOT ‘TURNKEY’ VERSION - Turnkey version has Tomcat & Samples in built, so this is not the version we are looking for.

After download, unzip the zip file & further unzip the “blazeDS.war” file to a temp folder. The below snapshot shows the same.

As you can see it contains two folder “META-INF” & “WEB-INF”. Keep this in one place, now let’s return to MyEclipse.

Open MyEclipse.

Create new Web Project as shown below

You will end up in “New Web Project Window”. Fill in all credentials as shown in below image

[Note : Below are the credentials I have used to fill in]

Project Name : “FlexBlazeDSSample”

Location : “use default location”, you can have your choice of directory here

Source Folder : “src”

Web root folder : “WebRoot”

Context root url : “/FlexBlazeDSSample”

Remaining I have left as it is for defaults.

If you have JDK or Java EE 5.0 Version of Java installed, it might alert for the same, click Ok or yes button. It basically means to use JDK 1.4 or whatever default version selected to be used for this project [Make sure it should be JDK 1.4 or higher - as it is required for BlazeDS]

Click on Finish to See Web Project being created

Now minimize MyEclipse, and go to “FlexBlazeDSSample” Project root folder which you created just few steps before. In general scenario it would be present in “[WorkSpace Folder] > FlexBlazeDSSample” Folder or path.

Also open the blazeDS.war extracted folder

Copy both “META-INF” & “WEB-INF” directories from blazeDS extracted folder to “FlexBlazeDSSample” project’s “WebRoot” Directory.

Probably it will ask you for existences of few files & and ask you for confirming the operation.

Click on “YES” button to overwrite the files. Don’t panic this operation is not harmfull

Now open or maximize the MyEclipse Editor

Refresh “FlexBlazeDSSample” project

You should be seeing the latest files along with “BlazeDS” config files under “WEB-INF” > “flex” folder.

And checking the properties of project & moving to java build path > library should also show blazeDS libraries

Below snapshots should be the outcome

Close all properties window’s or any windows opened.

Go to Windows, Open Server Window View, you would basically see “Tomcat” Server with stopped status

Click on Start Button to Start the Server

Now you need to deploy the web project which you created just now

Right Click on Tomcat Server on Server Panel as shown below

Click on Add Deployment

You will end up in “New Deployment” as shown below

Click on Finish to deploy the web project. This finishes your first step. Congratulation!!!, you have successfully created BlazeDS based Web Project in MyEclipse & deployed on to integrated Tomcat.

Now, let’s create Flex Project which will integrate with the web project which was created earlier.

Either From File Menu or through right click options being Flex Development Perspective, Create new project

Fill in the credentials as shown in above image

Project Name – “FlexblazeDSUI”

Project location – “use default location” – You can choose folder of your choice

Application Type – “Web Application”

Server Technology

Application Server Type – “J2EE”

check on “use remote object access service”

“LiveCycle Data Service” Radio button being selected

Click on Next, you will end up in below screen

fill in the form as shown in below picture or snapshot

For those who cannot see the above image, follow below steps

Server Location – Uncheck “Use default location”

Root Folder – Browse through folder structure of your system to Web-Project’s “WebRoot” directory [Above created web project]

Root Url – type in the full fledge url to access the web project on server for me it was “http://localhost:8080/FlexBlazeDSSample”

Context Root – “/FlexBlazeDSSample” – if you have different context root, specify that here

Leave compilation options as is.

Compiled Flex application location – output folder – would have full path of WebRoot followed by “FlexblazeDSUI-debug”

remove “FlexblazeDSUI-debug” and live it as shown in next snapshot

Now Click on Validate Configuration

This operation will result in below snapshot

Click on Finish to complete Project creation and now if you expand the Folder Structure in Navigator or File Explorer should look like below

Click on Run Button selecting Flex Project to see that it opens up url “http://localhost:8080/FlexBlazeDSSample//FlexblazeDSUI.html”

The Screen should be empty as it has no source at all.

Now let’s Create a Java class called “HelloWorld” in “com.test” package in “FlexBlazeDSSample” Web Project

Copy the below code into the java file

package com.test; import java.util.Date; public class HelloWorld { private String userSaid; public String repeat(String said) { this.userSaid = "Reply from server: " + said; return this.userSaid; } public String sayHello() { Date now = new Date(); return "Hello World " + now; } }

Open Flex Mxml file and copy below code

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:RemoteObject id="myservice" fault="faultHandler(event)" showBusyCursor="true" destination="Hello"> <mx:method name="sayHello" result="resultHandler(event)"/> <mx:method name="repeat" result="resultHandler(event)"/> </mx:RemoteObject> <mx:Script> <![CDATA[ import mx.managers.CursorManager; import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; private function faultHandler(fault:FaultEvent):void{ CursorManager.removeBusyCursor(); result_text.text = "code:\n" + fault.fault.faultCode + "\n\nMessage:\n" + fault.fault.faultString + "\n\nDetail:\n" + fault.fault.faultDetail; } private function resultHandler(evt:ResultEvent):void{ result_text.text = evt.message.body.toString(); // same as: evt.result.toString(); } ]]> </mx:Script> <mx:Button x="250" y="157" label="sayHello" width="79" click="myservice.getOperation('sayHello').send();"/> <mx:Button x="250" y="187" label="Repeat" click="myservice.getOperation('repeat').send(myText.text);"/> <mx:TextArea x="10" y="36" width="319" height="113" id="result_text"/> <mx:Label x="10" y="10" text="Result:"/> <mx:TextInput x="82" y="187" id="myText" text="Sent to Server"/> </mx:Application>

Save, Select web project back, refresh once, it should deploy the latest files on web project

Edited/added April 17th 2009 – Open “WEB-INF\flex\remoting-config.xml” file in a notepad/wordpad or any editor of your wish, replace the entire content by the following. [Note: If needed you can just compare with existing content and place only "destination" node]

<?xml version="1.0" encoding="UTF-8"?> <service id="remoting-service" class="flex.messaging.services.RemotingService"> <adapters> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/> </adapters> <default-channels> <channel ref="my-amf"/> </default-channels> <destination id="Hello"> <properties> <source>com.test.HelloWorld</source> </properties> </destination> </service>

Save, Select web project back, refresh, it should deploy the latest files on web project

Now by selecting Flex Project, Click on Run button to see the flex application. You should see the screen as shown in snapshot below

Click on say hello button to see it’s functionality

Type in some message in text box & click on Repeat button to see the same on text area, which is returned from server

There you go, you have successfully integrated BlazeDS + Flex & installed on MyEclipse integrated Tomcat Server too

I hope I don’t need to explain the example as the code is itself self explanatory

Hope this was helpful. Please feel free to comment. Open for reviews & comments.

Installation Steps for Flex Builder Plugin in MyEclipse

Srinivas — Sat, 24 Jan 2009 00:55:26 +0000

It’s been very long time now the Flex being introduced by Adobe into the market. As all of us know from version 2, Flex Builder was built on Eclipse. Adobe has done well in coming up with idea of two installers, one being a standalone installer & the other being the one which allows you to pick the eclipse folder and install the builder using existing Eclipse on the System.

Even though adobe has done good job, there are few popular Eclipse versions or distributions which they customize in suchway that it might not be suitable for updating Eclipse with Flex Builder. RAD, RSA from IBM and MyEclipse are few examples to mention here. There are few technotes in Adobe site which explains about how to resolve few issues which might occur while updating existing Eclipse distribution with Flex Builder. I believe going through them will help you guys to understand and use them wisely too. This post will explain the step by step process of updating the existing MyEclipse distribution with Flex Builder.

Before doing this I advice you guys to backup all the important things along with the workspace and projects which you have in your system. I want you to do this, just in case you endup doing something wrong or screw your distribution, I don’t want you guys to CURSE ME!!!. So please do backup and then follow the steps.

Note : The article or post is governed by following disclaimer policy. You will be doing this update with your own risk. Neither me or any of the corporates.. [Adobe, MyEclipse or anybody] is responsible for the end result.

Saying this, lets start with the installation. I assume you guys would have already installed MyEclipse on your system. If not please do it first. I am running MyEclipse on Mac, so windows folks kindly bare with me and follow the same steps, it should be fine. I will try to mention the paths or changes all the way accordingly with respect to windows & Mac. I believe the same process can be used for all Eclipse distribution. I confess, I have not tested on all of those, but for sure I will do the research and confirm in my next post.

Apart from explaining the steps below, I have also made a video which runs through these steps [Note: Video does not have JS Eclipse & Cold Fusion Plugin Update part]. Kindly bare with the video resolution as I was using a freeware version screen capturing tool, ended up in something like this. By next video blog, I will update or upload with something better than this. If you know few cool tools for the same please let me know. you can watch it below or at following location “Flex Builder Integration with MyEclipse 7.0“.

Below are the steps to be followed. I will be adding snapshots which I took while I did this. Kindly bare with the colours. It might occur different than usual.

Download the Flex builder Plugin version from Adobe Site

Mount the “*.dmg” file [- Not applicable to Windows Folks], after you do this you would see as below.

Double click on the installer. Installer starts up with the following screen

You know what to do next. Yes go ahead click on Ok [After choosing language you want], so you get below screen

So next screen is Introduction, you know what to do, just click on Next

Next Screen is License Agreement. Click On I accept Radio Button, Click on Next

Next Comes Choosing Installing Folder

Here Folks, I have left the default folder as it is in my case as I am using Mac it would be “/Applications/Adobe Flex Builder 3 Plug-in” and for Windows Folks it would be “C:\Program Files\Adobe\Flex Builder 3 Plug-in”.

Next comes very important one “Choosing Eclipse Folder to Extend From”. For this as I don’t have Eclipse or something on which I need to extend, What I have done is created a temporary folder “Eclipse” in “/Application” folder itself. This temporary Eclipse folder acts as a container for “links” folder which Flex Builder Installer places it. It does lot more than that, but as there is no configuration folder, It would skip them. For windows folks, just create an “Eclipse” Folder in “C:” and select it.

Once you select & Click on “Ok” or “Choose” button, A window pops up notifying that the folder does not have any eclipse version in it. Here click on “Proceed with Caution” button.

Next would be selecting Additional Installations, select whatever you need & click on “next”.

Once you click “Next”, the installer takes you to Installation Summary Section, showing all the details. Please make sure you have the things you had chosen before.

Click on “Install” & relax till the installer goes ahead and install the Flex builder plugin, Flash Player for the browsers etc.. and ends up with final screen as below.

You can see the above image shows a message notifying error during installation, ignore, just click on “Done”.

Now, open MyEclipse and in Menu navigate to Help > Software Updates > Add Software

You are now in “Add or Remove Software Screen”

Click on “Add Software”, you will end up in “Add from Update Site” page, where you will find “Manage Sites” button, click on it

Once you do that, you will end up in “Add Update Site” Window.

Here Click on “Local” Button & browse through the path where you installed the Flex Builder Plugin. Under this installation, there would be a folder “com.adobe.flexbuilder.update.site”, select it, click “ok” or “Choose”.

Once done you will be back in “Add Update Site” Window, with url field being filled in, now Fill in “Name” field with “Flex Builder” and click “ok”.

Now you will end-up in “Manage Update Site”, with a list of what you added just now. ie., Flex 3 Builder : [with path information], when you click on arrow you would see list of features available. You cannot multiple select and click “Next”, so you need to go back and forth to get final listing to be installed. In the list “Core Feature” & “Localized Core Feature” is what you are looking at. You can either select only these two or select all of them it’s your wish.

Once all selected, now click on “next” to see “License agreement” window. Select “I ….” checkbox and click “Next

Next Screen Click on “Update”

So MyEclipse Updates & Finally asks you for restart. Click on “YES” & myEclipse should restart for you

Now go through few menu’s like Help, you would observe Flex related menu’s appearing there and you can click on “About Flex Builder” in Help to see the version details or Click on “About Myeclipse” to see Flex Builder Plugin shown.

So you have done installing Flex Builder. Is this the end…… Naaaaa, lets create a small Test Flex project and check.

Switch to “Flex Development Perspective”.

Create a new project “Test”, Click “Finish”

Once done, you would see that in Problems window “Error” message popups.

If you move to “design mode”, you would see error there too

So let’s fix these errors now. Before that I want you guys to delete the project.

This error or problem occurred due to MyEclipse or the builder is unable to locate the SDK’s folder. To fix this, lets go to “Preferences” of “myEclipse.

Click on “Flex” > “Installed Flex SDKs”. Ahh!! there you go, error appear here too and shows the reason too.

Now Select First one of the list, click “Edit”, would end in “Edit Flex SDK” window. Here browse through and point it to “[Flex Builder Plugin Installation]\sdks\[Version First.. it's 2.0.1], click “OK”.

Update Flex SDK Name field with “Flex 2.0.1″ & click “Ok”, now you see the first one stops showing error.

Do the same thing for next one in the list, this time you will select “3.x.x” version under “sdks” folder & name it properly according to version & click “Ok”. There you go even the second error vanishes.

Folks, you can download as many SDKs version as you wish, install it under “SDKS” version of Flex Builder plugin or which ever location you want, all you need to do is come here in preferences and point the SDK by adding new version as we did now.

Now click “Apply” & then “Ok”.

Now let’s create a new project and test functionality of builder. there you go all functionalities works well!!!.. Hurray…. you are done.

I would like to mention one point here that, these preferences what you set now sometimes is for your workspace, so make sure you follow same when you switch to new workspace or something.

Similarly, I understand Flex builder comes up with two more plugins, one for Cold-fusion & other JS Eclipse. For these two plugins, repeat the following steps individually

open MyEclipse and in Menu navigate to Help > Software Updates > Add Software

You are now in “Add or Remove Software Screen”

Click on “Add Software”, you will end up in “Add from Update Site” page, where you will find “Manage Sites” button, click on it

Once you do that, you will end up in “Add Update Site” Window.

Now Click on “Archive”/ “Local” and browse through the following paths for Cold Fusion & JS Eclipse plugins respectively

JS Eclipse [Click on "Local"]- /Applications/Adobe Flex Builder 3 Plug-in/Installers/JSEclipse/

Cold Fusion [Click on "Archive"] - /Applications/Adobe Flex Builder 3 Plug-in/Installers/ColdFusion Extensions for Flex Builder/ColdFusion_Extensions_for_Eclipse.zip

Windows Guys : Same thing holds good except the path, in my case path starts “/Applications” for you guys it would be “C:\Program Files\ Adobe\”, and rest remains same.

Update Field Name accordingly for both of them & click Next. This would take you back to “Manage Update Site”, where in along with Flex Builder 3 List, you would now see “JSEclipse” & “Cold Fusion” too.

Click on Arrow icons, Select the features, Click next to add them. Same way as before, you can’t add them together by selecting together, so go back and forth and add them individually.

“Coldfusion Extension for Eclipse” is the feature for Cold Fusion & “JSEclipse” is for JS Eclipse

Once done you will end up seeing the above two features along with Flex Builder features under Locally Installed Software Section in “Add/Remove Software” Window.

Now click on “next” to see “License agreement” window. Select “I ….” checkbox and click “Next

Next Screen Click on “Update”

So MyEclipse Updates & Finally asks you for restart. Click on “YES” & myEclipse should restart for you

That’s it the two plugins are installed for you & you can start using them without any problems.

Hope this was useful. as promised in the beginning, I will do the research on RAD,RSA & other Eclipse distribution too & post back on the same in my blog. So wait for updates…

Please leave in your comments & feedbacks. If you have any questions you can always contact me just by dropping a comment or feed back, I will definitely reply. You can also reach me at s.m.srinivas@gmail.com

TEAM NAME	SUPER BOWL NO.	YEAR	AGAINST	SCORE	LOCATION	COMMENTS
Green Bay Packers	I	1967	Chiefs	35-10	Los Angeles, CA
Green Bay Packers	II	1968	Raiders	33-14	Miami, FL
New York Jets	III	1969	Colts	16-7	Miami, FL
Kansas City Chiefs	IV	1970	Vikings	23-7	New Orleans, LA
Indianapolis Colts	V	1971	Cowboys	16-13	Miami, FL	At that time they were known as Baltimore Colts, relocated to Indianapolis in 1984
Dallas Cowboys	VI	1972	Dolphins	24-3	New Orleans, LA
Miami Dolphins	VII	1973	Redskins	14-7	Los Angeles, CA
Miami Dolphins	VIII	1974	Vikings	24-7	Houston, TX
Pittsburg Steelers	IX	1975	Vikings	16-6	New Orleans, LA
Pittsburg Steelers	X	1976	Cowboys	21-17	Miami, FL
Oakland Raiders	XI	1977	Vikings	32-14	Pasadena, CA
Dallas Cowboys	XII	1978	Broncos	27-10	New Orleans, LA
Pittsburg Steelers	XIII	1979	Cowboys	35-31	Miami, FL
Pittsburg Steelers	XIV	1980	Rams	31-19	Pasadena, CA
Oakland Raiders	XV	1981	Eagles	27-10	New Orleans, LA
San Francisco 49ers	XVI	1982	Bengals	26-21	Pontiac, MI
Washington Redskins	XVII	1983	Dolphins	27-17	Pasadena, CA
Oakland Raiders	XVIII	1984	Redskins	38-9	Tampa, FL	1982 season raiders relocated to Los Angeles hence they were called LA Raiders & June 23, 1995 they moved back to Oakland.
San Francisco 49ers	XIX	1985	Dolphins	38-16	Stanford, CA
Chicago Bears	XX	1986	Patriots	46-10	New Orleans, LA
New York Giants	XXI	1987	Broncos	39-20	Pasadena, CA
Washington Redskins	XXII	1988	Broncos	42-10	San Diego, CA
San Francisco 49ers	XXII	1989	Bengals	20-16	Miami, FL
San Francisco 49ers	XXIV	1990	Broncos	55-10	New Orleans, LA
New York Giants	XXV	1991	Bills	20-19	Tampa, FL
Washington Redskins	XXVI	1992	Bills	37-24	Minneapolis, MN
Dallas Cowboys	XXVII	1993	Bills	52-17	Pasadena, CA
Dallas Cowboys	XXVIII	1994	Bills	30-13	Atlanta, GA
San Francisco 49ers	XXIX	1995	Chargers	49-26	Miami, FL
Dallas Cowboys	XXX	1996	Steelers	27-17	Tempe, AZ
Green Bay Packers	XXXI	1997	Patriots	35-21	New Orleans, LA
Denver Broncos	XXXII	1998	Packers	31-24	San Diego, CA
Denver Broncos	XXXIII	1999	Falcons	34-19	Miami, FL
St. Louis Rams	XXXIV	2000	Titans	23-16	Atlanta, GA
Baltimore Ravens	XXXV	2001	Giants	34-7	Tampa, FL
New England Patriots	XXXVI	2002	Rams	20-17	New Orleans, LA
Tampa Bay Buccaneers	XXVII	2003	Raiders	48-21	San Diego, CA
New England Patriots	XXXVIII	2004	Panthers	32-29	Houston, TX
New England Patriots	XXXIX	2005	Eagles	24-21	Jacksonville, FL
Pittsburg Steelers	XL	2006	Seahawks	21-10	Detroit, MI
Indianapolis Colts	XLI	2007	Bears	29-17	Miami, FL
New York Giants	XLII	2008	Patriots	17-14	Glendale, AZ
Pittsburg Steelers	XLIII	2009	Cardinals	27-23	Tampa, FL
New Orleans Saints	XLIV	2010	Colts	31-17	Miami, FL
Green Bay Packers	XLV	2011	Steelers	31-25	Dallas, Tx
New York Giants	XLVI	2012	Patriots	21-17	Indianapolis, IN