Sudha Hariharan

I have been working on a migration project offlate and I encountered this very pressing issue. Any component that extended from TitleWindow had its layout screwed up. If you add any components to the content area of the extended TitleWindow, it would the child would find its place underneath the header of the TitleWindow !!! That was a very awkward behaviour and here’s a rather simple solution. Just add the following function to your component..and Swosh!! the layouting behaves just the way you want.
private var panelViewMetrics:EdgeMetrics;
override public function get viewMetrics():EdgeMetrics
{
var vm:EdgeMetrics = super.viewMetrics;

// The getViewMetrics function needs to return its own object.
// Rather than allocating a new one each time, we’ll allocate
// one once and then hold a pointer to it.

if ((FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) ||
(getQualifiedClassName(border) != “mx.skins.halo::PanelSkin”) ||
(getStyle(”borderStyle”) != “default”) )

{
if (!panelViewMetrics)
panelViewMetrics = new EdgeMetrics(0, 0, 0, 0);
vm = panelViewMetrics;

var o:EdgeMetrics = super.viewMetrics;
var bt:Number = getStyle(”borderThickness”);
var btl:Number = getStyle(”borderThicknessLeft”);
var btt:Number = getStyle(”borderThicknessTop”);
var btr:Number = getStyle(”borderThicknessRight”);
var btb:Number = getStyle(”borderThicknessBottom”);

// Add extra space to edges (was margins).
vm.left = o.left + (isNaN(btl) ? bt : btl);
vm.top = o.top + (isNaN(btt) ? bt : btt);
vm.right = o.right + (isNaN(btr) ? bt : btr);
// Bottom is a special case. If borderThicknessBottom is NaN,
// use btl if we don’t have a control bar or btt if we do.
vm.bottom = o.bottom + (isNaN(btb) ?
(controlBar && !isNaN(btt) ? btt : isNaN(btl) ? bt : btl) :
btb);

// Since the header covers the solid portion of the border,
// we need to use the larger of borderThickness or headerHeight
var hHeight:Number = getHeaderHeight();
if (!isNaN(hHeight))
vm.top += hHeight;

if (controlBar && controlBar.includeInLayout)
vm.bottom += controlBar.getExplicitOrMeasuredHeight();
}
return vm;
}

So why does it work now and not earlier…the reason is that in Flex 3, Panel now uses the PanelSkin unlike earlier wherein it used HaloBorder or Border. Also, it doesn’t support any borderStyle but default. So the change here is an additional condition in the if loop

if ((FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0) ||
(getQualifiedClassName(border) != “mx.skins.halo::PanelSkin”) ||
(getStyle(”borderStyle”) != “default”) )

So now you have the perfect layouting in flex 3 as well when using older classes

1. Use item renderers judiciously. An item renderer derived from a Container class comes with lot of unnecessary overhead. Instead use a simpler class, may be an Actionscript class derived from a UIComponent. This would reduce a lot of overhead.
2. Always remove unused event listeners. Each time an event listener is added to an object, it increases the object’s reference count. So the reference remains, until the event listener is removed. If for some reason, you cannot remove the event listener use the useWeakReference parameter in the addEventListener. This does not increase the reference count.
3. Be careful with that huge Image! Use images that are smaller in size and when they are large in number prefer not to embed them in the application. As far as the image formats are concerned, I find that png images are much faster than other image types. Use BitmapData as much as possible.
4. Use Binding only when necessary. Data binding expressions usually take up memory. Prefer assignments to Binding whenever possible.
5. Accessing local variables is much faster. If you have variables that need to be accessed more use local variables as they are stored on the stack and accessing them is much faster.
6. You could help the garbage collector by assigning unused variables to null.
7. For components use deferred instantiation. This would immensly reduce the startup time.
8. Minimize the use of containers. Try not to next HBoxes within VBoxes and so on. Nested containers make up to huge overheads.
9. Use types for the variables. Avoid implicit type conversions and when unsure of the type use the as operator.

I had a terrible experience at Big Bazaar on the day before yesterday. If there is any place in Bangalore that has the most loathsome customer service that has to be Big Bazaar. I went in for quite a lot of purchases and they have billed for an extra 1000 bugs! I spent more than 5k at this stupid place and only yesterday I realized that the billing was totally absurd. They claimed to give me some sugar for free and made me pay for it. At the end they tell me sugar is out of stock. That means I paid for the so called “free” sugar and I didn’t get the sugar as well. For a simple shopping cart, I had to walk up to the 5^th floor and even then I didn’t find any and none of the salesperson would help me find it. Thoroughly hopeless service.

I came back after getting drenched completely in the rain. It’s been raining cats and dogs in Bangalore and now I am down with fever. I feel just so terrible today, I haven’t worked one bit since morning. Today is probably one of those rare days I am trying hard not to speak (!!!! Me and not talk…goodness this is a nightmare!) because of my aching throat. All this because of the pathetic place called Big Bazaar. This would be the last time I ever visit this place and definitely suggest every one I know not to visit the place as well.

This is really cool…I never knew that Vishnupuram grammam had an orkut community dedicated to it!!…

By the way, Vishnupuram is my native place, situated right at the tip of India in Kanyakumari district.You can find more on what i had to say about this lovely village here.

Vishnupuram on Wikimapia here

Vishnupuram Boosaastha temple on Orkut.

When my team lead first told me about this, I had no idea what I had to do about it. Ofcourse, the first step was to depend on good old Google, but this time Google ditched me. I hardly found any good results nor did I get good replies from the various forums we have dedicated to Flex. All I could find was this bug in the bug database.

After a lot of help from various people, this is the information that I could gather about the files manifest.xml and design.xml.

To customize the Design view of Flex Builder for specific components we essentially need the above two files. As an example, if you want to have components to be listed under specific categories instead of the default behavior of Flex Builder that puts them under the custom tag, you could do the following.

Have an XML file called design.xml that has a structure similar to

<?xml version=”1.0″ ?>

<design>

<namespaces>

<namespace prefix=”myExample” uri=”http://demo.sap.com” />

</namespaces>

<categories>

<category id=”TestComponents” label=”TestComponents” defaultExpand=”true” />

</categories>

<components>

<component name=”TestButton” namespace=”demo” category=”TestComponents” displayName=”Test Button”>

<mxmlProperties>

</mxmlProperties>

</component>

</components>

</design>

As seen in the above example, you can define various categories inside the <categories> tag and later define components within <components> tag and map these components to their appropriate categories. You would do that simply by adding an attribute called category inside the <component> tag. The <namespace> defined here would be the same as the namespace that is created when you add the component to the application (drag and drop the component in design mode and you could find the namespace created for you in source mode).

The manifest file basically defines what components would be present in the swc you are creating. For example, if I have only one component called TestButton in my library I would write a manifest.xml file

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<componentPackage>

<component class=”com.test.components.TestButton” id=”TestButton” />

</componentPackage>

The component tag defines the package name where in the class is defined.

By doing the above, I was able to have a customized component view.

One thing worth a mention is the tag called <mxmlProperties> within the design.xml file. This is useful if you want to show certain properties in the Flex Builder Standard Properties view. For example,

<mxmlProperties>

<textfield id=”title” name=”Title:” />

<combo id=”showTitleBar” name=”Title Bar:”/>

</mxmlProperties>

The above lines would create a textfield and a combo box displayed as Title: and Title Bar: respectively in the Standard Properties view. You can also add default values to this property simply by including

<defaultAttribute name=”showTitleBar” value=”false”/>

This line would give the default value as false for the combo box displaying as TitleBar.

Certainly, this is only very little of what one could do with these two files and Customizing Flex Builder without having to build any additional plugins. I wish there were many more blogs and some documentation that could throw some light onto this area.

It has been a long time since I blogged and for once I had a strong reason why. I was genuinely busy(!!! I really don’t know why, but each time I use the word busy I feel guilty of a blatant lie!). Work at SAP has been great. Though for the first few weeks I was a little skeptical and not so happy, I just love it now. I am in Germany at the moment for a 3 week long trip and I feel great to be here. For those who know me well, I had been complaining and wishing and praying that the trip be canceled. But it wasn’t, and now I am glad it wasn’t. It cleared so many misconceptions I had about the “foreign” land.

I attended a “traveler’s workshop” meant to give an insight into the German culture. What I found here, was very different from what I was taught in the workshop. Germans, I had an impression, were a bunch of straight faced men with whom we could talk only about business and when it came to business they would drill deep down to the most intricate details. Hell No! That’s so untrue. They are not straight faced (a couple of them are really handsome!) but yes, they are serious about their business. They don’t exactly drill deep down; they do the same a little politely. One thing I should definitely mention is that they are very courteous and most men are truly gallant. A friend and I were crossing a road and the cars stopped to let the pedestrians walk by. Now, that’s a rare occurrence in India. Also, my managers and other team members here in Germany are among the nicest people I have met. My team lead especially is truly a gentleman ( He has the most beautiful hands I have every seen!!)

Warning! My comments on food are ahead and they are not really good. I am a total vegetarian and I don’t like to eat eggs or even mushrooms. I have had to survive only on potatoes and some fruits. That has helped to put a little weight off my body much to the delight of my parents and some good friends. I do get some rice in office and cook some at my hotel so I am not exactly starving but this isn’t really the best food I have had. I have a lot of questions in this area though: Why do German noodles look so unlike noodles? Why does spaghetti look like noodles? What is spaghetti, what are noodles? Why is the food so cold? I understand, you are saving in some energy, but for god’s sake warm up the food a little. How can a person eat food straight out of the refrigerator and that too in a cold climate? OK, I do get a little emotional when it comes to food, so please do not get offended. Yeah, there are some good Italian joints here where the food is pretty good.

The landscape of Germany is beautiful. To be true it reminded me totally of Kerala, particularly of Vishnupuram and other towns in Kanyakumari district, bordering Kerala and Tamil Nadu. The way to my office is amidst fields that remind me a lot of my home town. What fascinates me most about Germany, isn’t the beautiful landscapes, the fast fancy cars, but the attitude of the German people. People here are honest, simple, and dedicated to whatever they do. The importance a German person gives to the minutest of detail is truly laudable. I think that is the reason behind making Germany what it is today from what it was in its terrible past.

Of course I couldn’t forget to mention the chivalrous nature of the men here. They are so nice to women. I think the Indian men could learn a lot form them. There is something that Indian women need to learn from their western counterparts. Women in India hardly take care of themselves, especially the one’s that are married. A look at western women would tell you that they are confident and independent. It is about time that we work in that direction and take care of ourselves.

Overall, My trip to Germany has been a great experience and one that I would like to have often!

I have had many apprehensions about Silverlight and I wrote earlier in my blog certain points I thought behaved as weaknesses to Silverlight. I was fortunate to get a wonderful opportunity to speak to Pandurang Nayak, a Technology Evangelist from Microsoft, which helped me clear many of my misgivings on the technology. Here I post the contents of the conversation.

1. Silverlight claims to have tremendously improvised in its performance execution due to its built-in CLR engine. Could you give us a more detailed insight into it?

The Common Language Runtime or the CLR is the core piece of .NET Framework. The CLR is a well-proven high-performance platform providing features like Garbage Collection, Just-In-Time compilation, Exception Management and a wide array of fully featured languages such as VB.NET and C# that are used by millions of developers worldwide to build rich desktop, web and mobile applications as well! The CLR also provides great features for security of the code that is running and a thread pool for efficient multi-threading. Having the CLR inside of Silverlight is a great boost to the performance, providing a high-performance execution environment inside of the browser



2. Silverlight essentially depends on the browser’s Javascript for its rendering. This also means that malicious intruders and decompilers can easily work their way into Silverlight code. How can I, as a developer be assured that my code would be safe from intrusion?

Silverlight does not depend on JavaScript for its rendering! In Silverlight 1, JavaScript is the language for event handling and runs with the full browser sandbox restrictions. In Silverlight 2, the .NET runtime is what runs the Silverlight code (you can also use JavaScript if you wanted to). In any technology, anything that runs on the client is downloaded and hence can be accessed by the end-user. This is similar to “View Source” in regular HTML or AJAX pages. The same strategies you use there can be used here for code protection – keep all confidential business logic on server and access by calling services, use authentication and validation schemes for server-side code irrespective of validations done on client-side and use obfuscation to make it really hard to reverse engineer code! There are a lot of obfuscation tools and technologies available for .NET for many years now!

3. How does the Silverlight player handle security concerns? Does it have a robust model in par with the flash player’s security model?

Silverlight has a much deeper security model. I recommend reading through these articles that describe Silverlight security model: http://blogs.msdn.com/shawnfa/archive/2007/05/14/silverlight-security-cheat-sheet.aspx. Silverlight also runs in the browser sandbox restriction – so you cannot write Silverlight code that touches the end-user’s hard drive or any such resource (except in special cases like Isolated Storage and when a user voluntarily provides the code with a local file stream handle via the Open File Dialog). I do not know enough about the Flash player security model and hence cannot comment on that!

4. Deep zoom support is one area in Silverlight that is attracting the most attention. How much of deep zoom can a developer use in his application considering the memory and performance impacts?

Deep Zoom is a highly scalable means of managing megapixel or even gigapixel imagery on the Internet. Deep Zoom works by only showing low resolution images and getting details of high-resolution imagery as and when required based on the zoom level and the viewport of the image. It is based on the amazing Seadragon technology (http://labs.live.com/Seadragon.aspx) that is also used in other projects such as Photosynth (http://labs.live.com/Photosynth.aspx).

5. What additional features can we expect from the upcoming versions of Silverlight?

Silverlight 2 is still in BETA and the team is currently working on optimizations and completing the features for release. The next version planning has begun and at the moment there is no list of features announced for the next version.

6. Is it possible to create a Silverlight application which has html or other scripts embedded into it? If yes, how easy is it to do so?

No. Silverlight renders XAML, a markup language that describes all elements of Silverlight UIs. HTML markup is not rendered by Silverlight. In my view, since Silverlight is based in the browser, it is unnecessary to have a second HTML-generation engine when you have the browser which was designed for that purpose! JavaScript execution is also delegated to the browser’s script engine. You can write Silverlight application code in .NET or in any of the Dynamic Languages (such as IronPython, IronRuby or JavaScript) or any other language that targets the Silverlight CLR. These are the only pieces of code executed by Silverlight itself.

You can however have overlays of HTML and Silverlight content – Silverlight controls support a “windowless” model which makes it possible to have HTML DIVs overlaying Silverlight or vice-versa.

7. WPF and Silverlight enable developers to create applications for the desktop and the internet. How easy is the porting of applications from Silverlight to WPF and vice versa?

Silverlight is a subset of WPF. So taking a Silverlight application and porting it to WPF is relatively easier – there are a few changes that will be required (for example having a Window container for the code) assuming you have not used some libraries that are Silverlight specific (such as System.Windows.Browser APIs). WPF code can also be ported to Silverlight quite easily if it is not using libraries that are not available in Silverlight.

8. One of Silverlight’s major backdrops is its penetration. What strategies does Microsoft plan in this regard?

Microsoft Silverlight is just an year old and has got a tremendous amount of response. Microsoft is working with several top content providers and websites across the world and showcasing the power of Silverlight. We know that when many websites start adopting Silverlight for premium content, that will automatically drive end-user downloads of the plug-in. At MIX 08, we also announced that we are getting around 1.5 million downloads of the Silverlight plug-in per day.

9. Silverlight has found its adoption with many developers worldwide, especially the ones with a .NET experience. Your comments on how users from other programming communities could adopt the framework.

Though Silverlight is highly popular with Microsoft developers and those who are working on .NET already, it is an equally exciting technology for RIA developers and media organizations across the industry. Silverlight offers robust performance, great flexibility in handling video and a wide array of language support. Today, if you are not a .NET user, you can still use JavaScript to work with Silverlight. The designer-developer experience provided by Expression and Visual Studio is an industry-first and makes it possible for designers to be involved throughout the application lifecycle. C# is very natural to pickup for Java, C and C++ developers. VB.NET is very natural for those who know VBScript or Visual Basic. Also people with Python, Ruby or similar language experiences can easily code on Silverlight.

The language independence of the .NET platform in Silverlight actually makes it a far more approachable technology from developers in multiple technology streams.

10. Silverlight on one hand supports dynamic languages encouraging many people towards its adoption. At the same time, it provides minimal or no support for the Linux community. Your comments on this.

We have an active partnership with Novell who is developing Moonlight (based on Mono) for Linux. You can learn more about the Moonlight project here: http://www.mono-project.com/Moonlight

With Moonlight, end-users using Linux to browser Silverlight content will be able to see the same content on browsers running on Linux as well.

11. Are the features of the Macintosh and Windows releases of Silverlight fully compatible?

Yes.

12. Part of Silverlight is currently open sourced. However, many people have their own apprehensions about this statement. What plans does Microsoft have in this area?

The statement is not entirely correct. Silverlight is a technology platform. In Silverlight 2, we introduced controls and a rich control model for building your own controls. We also shipped a set of common base controls. We have released the source code for these common controls to enable developers to take these controls, see how they were built, understand best practices of building similar controls or even adding features to create a new control!

We have also released complete unit tests and a unit testing framework for Silverlight – this is important for our developer base who have rich support for unit testing in our enterprise development tools and technologies for many years now.

It is out there for download, so I don’t see what apprehensions there could be!

13. Training is one area in which other RIA’s are facing some difficulty. What strategies does Microsoft include training at the academic as well as the industry level?

Microsoft has already invested and is continuing to invest in creating training content, learning material and many other artifacts online for Silverlight, Expression and WPF. Microsoft also has an excellent track record of bringing such resources to students and academia. Though there are no specific plans announced now, you can see that Microsoft already has a huge academic program in several countries (including India) and new technologies can roll into this program easily.

14. If an organization wants you to interview a candidate for Silverlight development position, how would you go about it?

If you are hiring a designer, look for design skills. Experience with interaction design is useful. Having an open mind, willing to learn new things, etc. is important because it is probably unlikely that he/she would have extensive Expression experience, given the tools are new.

If you are hiring a developer, knowing .NET or any languages that Silverlight support is just enough – the programming model is the same as that for desktop or the web or any other Microsoft technology!

15. What are your suggestions to the people who want to come into silver light development?

I see a lot of people, especially with experience in competing technologies such as Flash or Flex, start doing a feature-to-feature comparison or a tool-to-tool comparison. One of the advices I give to people is that if you have such prior experience, sometimes you will need to understand a technology like Silverlight a little more fundamentally. Remember that the people who designed and created Silverlight at Microsoft must have also made a huge amount of design and development decisions – some similar to existing technologies, some new – based on the basic vision they had for Silverlight. That basic vision, of providing a consistent way of building rich user experiences across platforms and devices, with high performance and fidelity had driven several design choices. Understanding Silverlight from the fundamentals requires a lot of coding, trying out different things, creating little projects, reading blogs of other Silverlight designers/developers and even participating in community. That would begin to give you an idea of what the technology really is, what the fundamental philosophies are and what is the best way you can use it. This is true in general for any technology by any vendor – and this is what sets technology gurus apart from the rest.

The best starting point is www.silverlight.net – there are simple tutorials, how-to’s and step-by-step instructions for anybody to get started! Have fun coding!

Yet another event and I will definitely be there. BarCamp Bangalore 6 is coming to the city on the 19th and 29th April. Unlike the last time, BarCamp this time has a mixed bag of things to offer. A look at the list of sessions and you would be amazed at the multitude of topics that are planned to be covered. Hope to have fun there!..

So, meet you there!

Its been raining events in Bangalore. This time it was the Adobe RIA Architects summit held at Chancellory Pavilion yesterday. The name sounded pretty heavy and professional and I had my apprehensions on whether I would understand what was being talked about.
The event was great and I enjoyed every bit of it. It began with a keynote by David Wadhwani followed by talks by Ben Forta and James Ward. Every one of the speakers were very enthusaistic about the technology and the audience were awestruck with the wonderful examples being shown.
Ben Forta’s talk was one of the most intresting talks in the whole session. He introduced flex and Air with amazing ease. He displayed his uncanny ability to write code in about a few minutes and grabbed the audience’s attention. Lots of questions were raised most of them dealing with security and porting flex to different servers. I had a question too but wasnt able to ask him (Too many questions and too little time). My question was: Coldfusion has been for years now and Flex is around 2 years old. However flex has found a great adoption in India and Coldfusion comparitvely less (I do know the technologies have wide disparites, my focus is on Adobe’s products persepective). What plans does Adobe have to encourage Coldfusion in India?
The next session was by James ward, and as expected it focused on the technical aspects of Flex. He breifly took us through some of the best practices for Actionscript and I found the session very useful. Many questions that I had in mind were cleared. Some of the questions that the audience asked were very intresting. The questions thrown at James concentrated mainly on the performance and security of the Flash player. There were a series of questions on IFrames and rendering HTML content in Flex. (I still havent grasped much work arounds in that area).
Overall the session was very informative. It mainly focused on showcasing the capabilities of Flex and AIR to people looking forward to adopting the platform. The turn out at the event was pretty good. Probably, Adobe may think of holding many more such events in India (including MAX ) in the future.
I wonder why the event was called “Architects” summit with only one session on the architecture persepective in Flex. “RIA Summit” would have sounded good enough.

A very good article on Improving performance of a Flex application using Flash Player cache can be found here.