Blog for Nayan

In my earlier post i wrote about a way how you can create a bottom navigation bar in your Flex mobile applications. But recently i came across TabbedMobileApplication which has a Tabbar component built in but the tabbar is on top.

It was fairly easy for me to modify the skin for this application’s TabbedViewNavigator component so that it would have the tabbar in bottom and the viewnavigator on top.

This is how the application looks,



I just copied the skin file from TabbedViewNavigatorSkin and modified it little to achieve the result.

This is how my custom skin class looks as below, you can download the project file here.

When Flex 4.5 “Hero” was announced at MAX i jumped on the chance to play with it. For those who want to get a good basic understanding of how it is different from traditional Flex Application development i would highly recommend this MAX session titled “Deep Dive into Mobile Development using Flex SDK“.

So first thing when i started playing around was that i realized there was no easy way to have a bottom navigation menu like most of the apps. for eg. If you look at the apple app store in the bottom you see  the top navigation menu, middle content area and then the bottom bar. The image below explains what i mean by it.



To get this functionality where you have a constant bottom bar and then the views change when you select the buttons, you have to do little bit of coding and here is how you do it.

The project file can be downloaded here.

This is the main file and we don’t have to make any changes to it, this is what you will get when you create a mobile application.

so now lets look at the first view file called bottombarHome, this is where all the action happens.

ok i have to admit, putting code like this doesn’t make any sense but you will have to trust me that when you run this application you will have a bottom navigation bar which stays in place all the time during lifetime of your application.

There might be other ways to do it and i would like to know but so far i have found this way to be effective.

It would be cool if inside the MobileApplication.as there would be this functionality to add a bottombar and then every view for that button has a “master” viewstack instead of one single viewstack as it is the case right now.

There is one more way of achieving this you can read about it here.

Since i started playing with Catalyst, i was disappointed that you couldn’t edit the code and then view how it had affected your component. There had to be a better way or some utility which would allow you to modify the code for skin file and then preview the component.

So when AIR 2.0 was announced with nativeprocess API, i figured it would be the perfect tool to develop something like that and here it is.

During the development, I was past the single component preview pretty easily but then multiple component files i wasn’t sure how to incorporate them. But after little bit of thinking and playing around i managed to get it going too.

I thought about integrating Shibuya for this application but then i decided not to.

I have created an entire new page for this Skinviewer application and it can be found out here.

Your feedback is highly appreciated, i know its a crappy design for the page.

With Flex 4 the StyleManager is no longer a Singleton class. Its implementation has changed so that every loaded module has its own instance of StyleManager.

This post by Gaurav Jain explains how you can use it so that the loaded modules have their own separate style manager.

But it doesn’t say how you can access the toplevel or default StyleManager.

The old, Flex 3, way of accessing it would be,

var tempStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“.tempStyle”);

the above method is deprecated and will give you a warning.

The correct way now of using the StyleManager would be the following,

var tempStyle:CSSStyleDeclaration = StyleManager.getStyleManager(null).getStyleDeclaration(“.tempStyle”);

StyleManager.getStyleManager(null);, returns the top level instance of StyleManager.

Its been about two weeks since i installed Flash Builder 4 (Flex 4) and when i fired up the help i was throughly disappointed. Adobe has come up with an air app which launches and fetches the help over the net. It is a really annoying system and i hate it, absolutely hate it.

I have always relied on the class reference which uses the eclipse help system and it opens up in my browser on OS X which i really like. I can be offline and still have a neat way of accessing help. I figured it won’t take much for me to hack up the current help so that i could access it within Flash Builder 4 and i was successful at it.

If you select Flash Builder > Help > Eclipse Help you won’t see the Adobe Flex 4 Language reference, i hacked it so that i could have the reference in a neat way without having to go through the hassle of looking for classes etc.

Before the hack: this is how the eclipse help section looked.



and then after my hack and generating the right xml by using the air app.



Before you proceed, here are few disclaimers/requests:

• I have developed/tested it out on OS X so if you are using windows i am not sure how it affects you.
• I do not intend to test it out on windows, if it doesn’t work for you on that platform i am sorry i can’t help it. Right now there is no incentive for me to play with it on windows.
• I am sharing the code for this one, if you want to modify it then feel free to but i would appreciate that you give me some credit.
• I have tried to make it as efficient as i could think of, though i haven’t played a lot more in trying to make it run faster. If you end up running it faster then i would like to know about it, thank you.
• If you run the app by itself there are not many messages and stuff so even if it crashes or stops processing, you won’t be able to tell. So therefore i am just including the source for the app and not the app itself.

The requirements for this app to run properly,

• Adobe Flex 4 language reference, it can be downloaded here. Download the Full Documentation.
• Local server which would point to the AS3_Reference as docroot, so http://localhost would give you the Flex 4 documentation.
• myindex.html file which i have created just copy the source when you open it, is it pretty basic and uses jquery.

Before you start wondering why i had to go all this trouble of using custom index,local server etc, please read the source code. I have commented the reason for me taking this approach. I wanted to do a fast, efficient way of doing this without much of hassle and this i felt was the best way.

Here is the link to the uploaded Flex project file. I would recommend that you run this in debug mode so that you see some of the traces or can add your own.

NOTE: Please remove the files arguments.html, int.html and uint.html from your AS3_Reference directory so that they don’t mess up parsing, i didn’t bother to look deeper into the files to see what was causing problems. Since it was only these 3 files as compared to 2483 other html reference files i don’t think its a big deal.

Final Step:

Once you have your tocAPI.xml file generated on your desktop, you will have to copy that into the toc xml file. This toc xml file should look some thing like this,

<toc label=”Adobe Flex 4 Help”>
<topic label=”About Web Help and Community Help” href=”html/index.html”/>
</toc>

the path for this file on my computer is, /Applications/Adobe Flash Builder 4/plugins/com.adobe.flexbuilder.help_4.0.0.272416

I modified this file to look as follows,

<toc label=”Adobe Flex 4 Help”>
<topic label=”About Web Help and Community Help” href=”html/index.html”/>
<topic label=”Adobe Flex 4 Language Reference” href=”AS3_Reference/index.html”>

<!– the contents of tocAPI.xml should be pasted in here –>

</topic>

</toc>

I tried using the &lt; link toc=”tocAPI.xml” /> but it doesn’t work so had to copy the contents of tocAPI.xml into this file.

Also make sure you copy the AS3_Reference folder into this directory so that the next time you fire up Flash Builder 4 you will have an indexed class reference.

If i feel like it, i might make more modifications so that the package list is also displayed etc but i barely use it so for now i am happy with this.

I hope there are other developers who felt the same way as i did after checking out the FB help and will use this. Finally if you don’t want to worry about this AIR App and just want to copy the tocAPI.xml file then i have uploaded one for you to download. Enjoy.

Update 05/04/11: I have uploaded a new File for Flex 4.5 it can be downloaded here and the documentation for this is in this zip available here. Name this folder as Flex in your help plugin directory.

In Flex 4 they have changed the scrollbar, it doesn’t have the scrollPosition property which can be used to set its position.

We have to access the verticalScrollposition through the viewport property of the scrollbar. Since this interface IViewport is implemented by groupbase, we can use any group to scroll which is pretty neat.

Here is the example and the code can be accessed by the viewsource url. Clicking on the start button will set the scroll in action.



I have used the scroller component but the same code will work with the VScrollbar, you just have to set the VGroup as its viewport and specify the dimensions of the viewport. I will post the code in a new blog post.

I was at Adobe Max this year and Using PHP Data services with Flex was one of the sessions i attended. It was a very informative one and showed how one needs to do very little work to use remoting with PHP.

Flex 4 has some powerful wizards to use data services and it makes it lot easier to get data into Flash. The value objects are created for you and all the heavy lifting is done by Flex.

It uses Zend Framework for remoting but the best part is you don’t have to write any php code, only some MySQL queries to get the required data.


This is not a tutorial but a working example of how i was able to connect a Zen Cart database with my Flex Application and it took me less than a day to get this working, the main part was spent of learning the zen cart db structure and then writing the MySQL query to get the products list. I am sure any shopping cart can be easily connected.


To have little more fun with it, i also threw in the layout managers which come with Flex 4 and demonstrated how easy it is to change the look and feel of your application. I am not a designer but using Flash Catalyst one can easily make this application very visually appealing too.

http://nayansavla.com/zen/flex-output/zen.html This is the Flex application which pulls in the products from the zen cart.

http://nayansavla.com/zen/ This is the HTML default version which comes with the Zen Cart.

http://nayansavla.com/zen/admin admin/admin if you want to change the products and then see them update in the Flex application.

This was very easy to accomplish, i am not going to share the code sorry. The Flex 4 data services makes it so easy todevelop a CRUD system.

Edit: I have rebuilt my server so the html version of zen cart doesn’t work need to update it. But the flex works.

When i first started playing in Flex 4, i wasn’t sure what groups was all about but then after a closer look i realized that its a very neat concept and the layouts go with it.

Using any provided layout or writing your own custom layout classes the elements in the group can be easily arranged on stage in any pattern that you wish. Take a look at the following example to see what i mean.

Select the choose layout button to swap between the horizontal and vertical layouts. You will need Flash player 10 to view this.



You can view the source by right clicking into the application.

PopupManager is another utility class in Flex which i really love to use as often as i can. With big projects when you need to lay views on top of other views and things like that it really comes in handy.

 

Within the Flex framework this class is also used by some of components like Alert, Combobox. If you take a look at the Audiolife widget i have developed, this class has really saved my life there. The merchant descriptions, album descriptions are mxml components displayed using PopupManager. 

Any class which implements the Interface IFlexDisplayObject can be added and removed using PopUpManager, this is how i achieve it. 

I have a singleton model which stores the reference to this class  so this popup can be removed from anywhere within the application by using PopUpManager.removePopUp(model.currPopUp);

It works great and is very convenient way of handling views, instead of doing visibility of certain components etc. This will also improve the performance of your application since you are adding and removing classes at runtime instead of keeping them in memory and not just messing with visibility.

I had come across a situation where i had to highlight different elements of the screen manually. So i had to use the drawFocus method of UIComponent class to highlight that particular element. 

The default Halo Skin wasn’t doing the job, I had to change the color to be more prominent for example to be 0xFF0000. Unfortunately setting the CSS for UIComponent wasn’t just enough. I realized that Flex is very smart on how it handles the focus skin, its initialized only when that instance of the component requiring the skin needs to be focussed.

Click here for the source.

 

If you look at the above example and select Button first the focus is default, however if you select the Red Label and then select the Button it changes. In the code the custom Focus class is initialized only for the Red Label.

Flex initializes the custom FocusSkin class only when its required and once its initialized it is used for the rest of the components. Interesting stuff…….