Archive

Posts Tagged ‘Flex’

Adobe’s Development of Thermo – Web App Development for Designers?

Thermo Logo

So I have been at Adobe MAX 2007 in Chicago all week. The whole experience has been really great. What was even better than that was a sneak peek at a new application that Adobe says that it will be releasing sometime in 2008 – code name “Thermo”.

I can not tell you how excited I was about this app. What is Thermo you ask? Well let me tell you from my perspective what Thermo is….

Just a week before MAX I was finally wanting to write my first project completely in Flex Builder. This was a really really frustrating thing from a design standpoint. I would be what the industry is referring to as a “Devigner” Half Designer / Half Developer. I can write some code when it comes down to it and I really enjoy figuring out the functionality of an app but I have always done all my sites or apps in the Flash IDE and laid them out in Photoshop before I move everything over to Flash for animation and coding.

When it comes to doing a project by setting up your design in Photoshop and then getting that design into Flex Builder….. well …. let’s just say it. IT IS A PAIN IN THE ASS! As far as I am concerned.

Now what is this new Thermo app mean to me you might ask? Well imagine combining Flex Builder with a visual design tool. Kind of like Flash with out the drawing tools and such.

In the Demo Adobe showed how they had a really nicely designed Photoshop layered comp. Once they launched Thermo they were able to choose the template they wanted to design there app around. In this case it was a comp from photoshop. Once you choose your PSD file you are able to view the layers in a dialog box just like the import dialog that you get in the Flash IDE. Choose your settings for each layer if you like and Boom all your assets are put on a stage that looks kind of like the design view in Flex Builder. Also over to the right you get a view of all your layers. Kind of like the layers view in Photoshop. We took a photo of the app in it’s present stage of production. Sorry for the image quality. The adobe example was showing the design and development of a music browsing app.

Thermo At MAX

Click for Full Size

When you switch to code view you will see code that is MXML code. Adobe explained that the code view is just like using the Flex Builder interface. You will get all the code hinting and power of editing code that you get by using Flex Builder.

Another really cool example that Adobe gave during it’s demo of Thermo was the ability to click on graphical layers or text layers and change them into functional Flex components on the fly. A great example of this was a graphical scroll bar that they had designed in photoshop. Basically consisted of two layers. You had your background square that looked like the track of the bar and the scrub bar that was also a darker square in photoshop. They where able to select these two layers in Thermo > Right Click and tell Thermo to change these layers into a horizontal scroll bar. As soon as they did this if you switch to code view you where able to see that Thermo had rewritten all of the code to tell the app that these layers are now the functional scroll bar. To spare you more reading there where some other graphic and text areas they where able to click on and convert to other components in the app.

Just a week before I was trying all kids of ways to do this same thing. I was laying out my design in Photoshop, taking it to flash to create my MovieClips, then exporting all my assets as a SWC file to use in Flex Builder. This is a really cool thing being that Flex Builder will treat your assets in the library as Components so that gives you great code hinting. The down side of this for me is you can’t just drag a new “component” out of your SWC file and place it on the stage in Flex Builder. Thermo on the other hand will give you a viual representation of where the button or graphic is located and you can drag it around and move layers how ever you like. As a “Devigner” This totally rocks. I think even hardcore code head developers will find this to save them a lot of time.

Look for Thermo next year sometime at http://adobe.com or you can check back here on my blog. I am so excited about this product that I am sure I will be talking more about it as Adobe relases more information about it.

Advertisements

360Flex – A conference for RIA developers

I’m going to be attending the 360Flex conference March 5-7 this year in San Jose, and since registration just opened, I wanted to let people know about it. I tend to be a big fan of conferences that are more developer focused because I think you learn a lot more and you get to talk to the people that are “in the trenches” and building the applications that we all use. This is exactly that kind of conference and while its focus is on Flex, I would suggest anyone looking at Rich Internet Applications register for it.

The conference is both being held at and sponsored by eBay, which is an indication of how deeply Flex has gotten into the business side of Rich Internet Applications. I’m hoping to find out more about what eBay is doing with Flex, but the little bits I’ve been able to glean indicate that it’s a significant investment. And this seems to be the story across a wide range of industries. Midnight Coders is also a sponsor and they provide Flex Data Services functionality across a wide range of platforms including .NET and PHP. Combine that with the murderer’s row of speakers (the list includes some of the best Flex minds in the business) and it means you’re going to see examples of Flex being used to build great experiences for Fortune 500 companies, web startups and everything in between.

It has been a great year for Rich Internet Applications. Flex was released a few months ago and has seen a surprisingly large number of applications built for the platform. WPF and WPF/E have both been made available on the Microsoft side which shows how important experience has become. Apollo is coming down the pipeline which will enable a robust desktop RIA solution (much like WPF). Next year should be even better, and this conference is going to be a great way to see what people are doing and how RIAs are changing landscapes all over the spectrum.

Here are the details:

360Flex Conference is scheduled for March 5-7, 2007 at eBay in San Jose, CA. Come join us for this exclusive event and learn Flex from every angle. We are bringing together the best developers for Flex for this event both from within the development community but also within Adobe.

The conference costs $100, special thanks to our corporate sponsors.

360Flex will have 4 tracks as follows:

  • Flex 101 – Learn Flex A-Z
  • Application – Real-world Flex applications ( Browser & Apollo )
  • Integration – Connect Flex to any server (CF,PHP,.NET,JAVA,FDS)
  • Components – Create custom Flex components

Nice menu panel in Flex

Hi all!

Recently I had to make an application in Flex that obviously required a menu displaying all the options so I started to think in which menu will be fine or not. Finally I decide that I wanted the menu options in the title of a panel, but when I analyze the API of the panel I didn’t saw anything that allow me to do that.

So after a large series of tests I found a solution to do that, and here is it ) here is the menu running:

So to make this first I create a new component called MenuButton for the menu options and basically it is only a LinkButton with a new attribute called “canvasIndex” (as you can see in the source code), this attribute will be used to show the selection in the panel as we will see later

After I have that new component I create a new one called “MenuPanel” that inherits of a Panel and here is the moho of all this menu :). For this component I added a new attribute called “viewStack” where we will set a view stack later and also I override the createChildren function of the panel and now looks like:

picture-27.png

As you can see here we add two instances of MenuButton in the title bar of the panel, also if you are a good observer ;) you will noticed that there is a function called “changeCanvas”, this function basically change the selected option and the styles associated (you can see the code of the function in the source code).

Finally we have to integrate all this in our application ) this is very straight forward as you will see:

picture-28.png

As you can see I only added the MenuPanel component and inside the menu a ViewStack with two canvas.. really easy right? )

Actually as you will see in the source code we also has to associate the ViewStack with the MenuPanel, but that is not so relevent.. I think )

Obviously there are a lot of improvements to add:

  • get the information to the buttons dynamically from the XML
  • add some listeners
  • hmm I will think in more… )

Here is the code

Categories: Adobe, Flex, RIA Tags: , ,

RIA Wars: Silverlight vs. Flex

I just love it when new technologies make my working hours as a systems architect and developer more productive. Granted, sometimes it takes a while before I catch on. I’m not really an early adopter (got my first iPod last christmas), but when I see something that can help me deliver a better product to my clients, you have my complete attention.

So about once a year, I venture away from my world of C#, business logic and backend systems and into the wonderful world of frontend and user interface systems, thinking that by now, after all these years, someone will have invented something that actually works. It was time for that again this weekend, and I must say it’s been a more interesting journey than usual.

I normally start looking at XHTML, CSS and Javascript, and every time I feel immediately disappointed: These technologies pretty much still look and feel the same, no matter how much IDE candy, code-completion and drag-and-drop you throw at it, and still behaves wildly different from browser to browser.

Next on my list is to download the lastest version of Flash whilst hoping that this time the good folks at Adobe have stopped smoking whatever it is they were smoking when they invented Lingo and have produced a real development toolset. Something that looks and feels like it could actually be used for serious development work. But this time, I didn’t get that far. One of my colleagues had for weeks been talking about something called Silverlight from Microsoft, which everybody was describing as “a Flash killer in C#”.

Silverlight

Silverlight turns out to be a very interesting and promising technology. It certainly looks like it was meant to be a “Flash killer”: You download a plugin for your browser and then you are all set to view so-called Rich Internet Applications (RIAs) that contain movie clips, vector graphics and all sorts of cool effects.

The thing is, Silverlight uses a declarative XML-based language called XAML and you code the entire thing in .NET. Yes, that means C# code which gets compiled and runs in a special, stripped down CLR inside the browser. Very cool.

But it gets better: It not only works in Internet Explorer, it also works in Firefox and even Safari on Mac. And the Mono guys are hard at work on a Linux version called Moonlight, apparently with some support from Microsoft.

I promptly downloaded the bits for the alpha version of Silverlight and the toolkit for VS2008 and set out to create something worthy of the RIA buzzword. And after playing around with it for some hours, here’s my current take on Silverlight:

  • – It’s really fun and easy to learn, and it really is C# on the client with vector graphics. Woohoo!
  • – It looks and feels like a real development toolset, because it’s based on VS2008, XAML and C# (or VB if you are slow).
  • – The IE7 browser plugin fails some of the time, both the released version 1.0 and the alpha version 1.1.
  • – The codebase and documentation for the 1.1 alpha is far from complete, but that’s to be expected.
  • – There are tons of features that I would love to see included, and from what I can read in the forums, I’m not alone.

So – Silverlight is something of a work in progress. They expect to have a new beta out in Q1 2008 (renamed to “Silverlight 2.0″), which should contain a lot of new features and with a Go-Live licence. My guess is that Silverlight would then become a “real” product during the summer of 2008. But the question remains: Is this a “Flash killer” ? Time to download that new version of Flash and have a look.

What the heck is Flex?

As it turns out, I must have been living in the land of Microsoft for too long, because I had never heard of Flex. Flex is Adobe’s development toolset for building RIAs, and guess what? It doesn’t look anything like Shockwave or Director, it doesn’t run on Lingo and most importantly, it doesn’t suck at all.

With Flex (version 3 beta 2), you can compile applications using an open source SDK if you have too much free time on your hands, or you can be smart and use Flex Builder, an IDE based on Eclipse which works like a charm! The end result is an SWF-file, which runs in any browser-based Flash player, or in a desktop application using Adobe Integrated Runtime (AIR). Completely cross-platform.

Flex is based on MXML, which looks suspiciously like XAML – or is it the other way around? You write code in ActionScript 3 (AS3), which is a script-language that is based on ECMAScript. Now where have I heard about ECMAScript before? Oh yeah, that’s right. It’s Javascript. Damn.

But as it turns out, it’s not that bad. Sure, things are not strongly typed, there are no generics, there’s no way to count the number of elements in an associative array except for the stupid way, etc., etc., but on the plus side AS3 and Flex as a whole is extremely easy to work with and well geared towards quickly and painlessly writing complex RIAs. And let me tell you: The feature set is no joke, and neither is the community around the product. Practically anything you can think of, someone else have already wrestled with and solved in Flex a long time ago. Need to integrated with something other than a simple web service? Or use sockets to communicate directly with someone? Or how about streaming and processing video or audio? Go right ahead, it’s all there.

I could go on.

And the Winner is..?

Perhaps Silverlight really will become a Flash killer – but I don’t think it’s going to happen over night. Flash players are (according to Adobe’s figures) present on 97% of desktop computers and well on the way to be a leading platform for mobile devices as well. Silverlight won’t get there for at least 12-24 months, if at all.

So for now, even though I do miss the consistant and strongly-typed world of C# and .NET, Flex is the easy choice for RIA development.

Let me hear from you. Am I missing something? Do you agree or disagree with my short analysis? Comments, please!

Categories: Adobe, Flex, Programming, RIA Tags: , ,

Success story of initRIA

initria1.jpg

Well, formally conference title was initRIA so, please might be expecting more talk on RIA and around technology. But most of the people talk on flash platform except Rakshith who talk on ajax. Session started with Raghu’s presentation and ended with “Birds of a feather” under dim light.

Mrinal had organized my session earlier but I reach venue very late [my mistake -( ] so, he had rescheduled all sessions and put me on second half. People enjoy first half with Raghu, Rakshith and Yash’s session very well.

In lunch break we had dominos pizza with coke :-). Once again people grab there seat and show started with InstaColl’s presentation. All the session was amazing and well organizes but I really delighted with InstaColl’s presentation. They demonstrated their upcoming online office suite. take a look this, this, and this. It was so good that every one clapping in during presentation.

It was really nice time. I personally appreciate Mrinal and all other head involve in this success of initRIA.

Thanks adbul for caught initRIA on camera.