JavaScript function to travel to a WEB Page : redirect()

January 31, 2008

In flex we use navigateToUrl () method to traverse to a WEB page, usually with a link Button or Button.

So how to do this with Javascript code behind the flex App, the solution is simple with a line a code.

The line is :

window.location.href=””;

specify the link in the double quotes.

Example:

In flex iam having Button which calls the function redirect() at JS,which contains the line of code, then definition would be as below..,

Code at Flex app:

<mx:Button id=”btn” click=”b()”/>

<script>

private function b():void

{

ExternalInterface.call(“redirect”);

}

</script>

Code at JS/html wrapper:

<script language=”javascript”>

function redirect()

{

 window.location.href=”http://www.google.com/&#8221;

}

</script>

Now on click Button the page will travel to the Google Page.


Description of Basic elements of a Flex application.

January 29, 2008

Flex framework

The Adobe® Flex 2 framework contains all the components you need to
build rich Internet applications, which include:
-Containers that you use to layout the application
-Controls you use to gather data from users and to manage the user interface (Text and Button, for example)
-Extensive data binding, formatting, and validation features
-An event-driven development model that provides rich user interface transformation features such as effects and transitions
-The Flex framework is contained within a shared component library (SWC) file.

MXML

Every Flex application contains at least one MXML file,
known as the main application file. MXML is a markup language,
an implementation of XML that was designed specifically for creating Flex
applications, and you use it to declaratively define the structure of your
application using tags.

ActionScript 3.0

You add dynamic behavior to your applications using ActionScript 3.0,
which is an implementation of ECMAScript and is similar to JavaScript.
You can add ActionScript to Flex applications directly in the MXML file as
script blocks or you can create separate files of ActionScript functions and
import them into your MXML files.

CSS

Style attributes in visual components (buttons, list boxes, and so on) are
controlled by component properties. For example, a button component has a
fontFamily property that you use to set the font. Style properties are controlled
by a theme, by styles defined in a CSS file, by styles defined in style blocks in an
MXML file, or by setting individual style properties in the component instance itself.

Graphic assets

Like most applications, Flex applications contain a variety of graphic assets such as
icons and other images.

Data

Some components are used to display data (a combo box or data grid for example)
and you can populate these components with data by using arrays, collection objects,
data models, external XML data sources, and so on.


Basic Elements of a Flex Application.

January 28, 2008

A typical Flex application consists of the following elements.

  • Flex framework
  • MXML
  • ActionScript 3.0
  • CSS
  • Graphic assets
  • Data

i will Come back with description .keep in touch.bye


Smoothing the resizing of layout’s in flex with effects.

January 25, 2008

For example suppose that there is an App where you wanted a Panel control to resize on click of button, then u would probably use setting the width and height of the panel.Which will resize the Layout, but the resize is not smooth [i.e immediate movement in resize] ,so we have to slow down the resize so that it looks fine [smooth].

So here we have to use a tag called <mx:Resize /> to achieve this.

Example :

<mx:Resize duration=”2000″ id=”r1″/>

Now this resize Effect can be included with any layouts.

Here iam using a Canvas, below one shows it.,

<mx:Canvas id=”cnv” width=”50%” height=”100%” resizeEffect=”r1″>
<mx:Panel layout=”absolute” id=”p” height=”100%” width=”100%”>
<mx:ControlBar horizontalAlign=”center”>
<mx:Button label=”FullScreen” click=”fullscreen()” id=”f”/>
<mx:Button label=”Compact” click=”compact()” id=”c”/>
</mx:ControlBar>
</mx:Panel>
</mx:Canvas>

Here resizeEffect is the property iam using [in canvas] to specify the resize effect to the canvas.

And the functions are here which will move the canvas. to full screen.,

<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.controls.Alert;
private function fullscreen():void
{
cnv.width=this.screen.width-100;
}
private function compact():void
{
cnv.width=(this.width)/2.2;
}

]]>
</mx:Script>

So atlast the the resize of canvas is smoothen by using resize effect..using <mx:Resize /> Tag and resizeEffect Property. simple and small but very use full.


Good PHP tutorials at my blog.

January 25, 2008

Even though the help file at php has many good examples and explanations ,some of the users still search the web for php tutorials ,so for them i give the tutorials which were prepared by me and my team members ,and these are really good ones, its brief and quick.

Basics/Musics of PHP..

“fun”ctions and “class”es in PHP

strings Part1 PHP

strings Part2 PHP

URL functions PHP

click the above links to navigate and download..


Writing secure Flex applications.

January 24, 2008

The below ppt shows the things to do.. follow them for secure flex app.

flex-security.ppt [click this to view]

  • ¬MXML tags with security restrictions
  • ¬Disabling viewSourceURL
  • ¬Remove sensitive information from SWF files
  • ¬Input validation
  • ¬ActionScript
  • ¬Using passwords.

These were the topics covered in this ppt [tutorials]very use full.


Another solution for cache problem in IE.

January 24, 2008
This solution was given by the member of the Google group ,so i think i should keep this in my blog for future reference for me and for every flex lover.So the lines are here..In IE

1) Go to internet options.

2) Temporary Internet Files >  Settings > Check for new versions ofstored pages >  Select Radio : “Every Visit to the server”then check your application.

It should work, and gets the new data. Itis the problem with Cache.This problem generally arises in AJAX also. Then we can’t expect everyuser to workaround these settings.

So add this header to the server side page.

———————-”Cache-Control: no-cache, must-revalidate”———————-

For example, in php

<?phpheader(”Cache-Control: no-cache, must-revalidate”);?>

This is the Permanent solution to cache.. comparing to the previous post


Setting status message on Panel Control in flex.

January 23, 2008

Here we got to use the property names status, and assign some chars to it then it will display the related chars at the Panel Control Status Bar.

Example:

status=””

status=”Kumar Gandhi”

This as in the panel control looks like this..

<mx:Panel title=”Kumar Gandhi’s Panel” x=”438″ y=”59″ status=””>

</mx:Panel>

pp1.jpg
This snapshot shows the Status Bar with a message on it.


Adding Button(‘s) to Panel Control Bar.

January 23, 2008

This is a requirement were you wanted to add a Button or Button’s to Panel‘s Control Bar and you are wondering how to achieve this, iam telling you this is simple and the code example is given below.

Here we have to use a subtag in Panel tag control and the tag is <mx:ControlBar />

Example:

<mx:ControlBar horizontalAlign=”center” width=”385″>
<mx:Button  label=”Clear” click=”output.text =”” />
<mx:Button  label=”Clear” click=”output.text =”” />
<mx:Button  label=”Clear” click=”output.text =”” />
</mx:ControlBar>

This within the Panel mx:Tag.As below,

<mx:Panel title=”Kumar Gandhi’s Panel” x=”438″ y=”59″>
<mx:TextArea id=”output” width=”385″ height=”220″ />
<mx:TextInput id=”input” width=”385″ />
<mx:ControlBar horizontalAlign=”center” width=”385″>
<mx:Button  label=”Clear” click=”output.text =”” />
<mx:Button  label=”Clear” click=”output.text =”” />
<mx:Button  label=”Clear” click=”output.text =”” />
</mx:ControlBar>
</mx:Panel>

This gives the panel Control bar with buttons..

Panel with Buttons on ControlBar

This snap Shot shows the buttons on Panel Control Bar..


setting dynamically rowCount property in DataGrid control of flex.

January 22, 2008

Usually we use rowCount property in the DataGrid Tag itself and it specifies the number of rows in the DataGrid.Example is show below..

<mx:DataGrid showHeaders=”false” id=”mydg” x=”80″ y=”52″ useHandCursor=”true” rowCount=”5″>
<mx:columns>
<mx:DataGridColumn headerText=”Name”
dataField=”name”/>
<mx:DataGridColumn headerText=”Age” dataField=”age”/>

</mx:columns>
</mx:DataGrid>

This specifies that the DataGrid rows are 5.

But what if i want to specify this value of the property dynamically ,i.e which depends on the number of rows received from the DB or ArrayCollection, then you can use the following two lines of code..

mydg.rowCount = mydp.length;

where mydp->ArrayCollection.

and iam setting the rowCount to the lenght of ArrayCollection.

So setting the rowCount of the DG dynamically ,simple and small but very usefull..

rowCount=2

This snapshot shows that the rowCount=2 which is the length of my ArrayCollection..


Pass Multiple Parameters to functions in flex.

January 22, 2008

Any number of parameters can be passed to the functions and here iam passing using by defining a function with three parameters init.Like below..

<mx:Button id=”btnone” label=”one” click=”passpara(‘one’,’two’,’three’)” x=”386″ y=”209″/>

so here on click of this button the function is called and three parameters are passed toit.and iam receiving the values with three srtings defined..

<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function passpara(one:String,two:String,three:String):void
{
Alert.show(""+one+two+three," ");
}
]]>
</mx:Script>

The above alert displays the values of three strings..


Create custom ToolTips components in flex.

January 21, 2008

The default tooltip component in flex is  Text ,so to change this we have to define a component which implements 

1.Here iam using panel as my tooltip component and the code contains simple the set and get methods as below..

ToolTipComponents/PanelToolTip.mxml

<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
implements=”mx.core.IToolTip”
width=”200″
alpha=”.8″
borderThickness=”2″
backgroundColor=”white”
dropShadowEnabled=”true”
borderColor=”black”
borderStyle=”solid”
shadowDistance=”10″ shadowDirection=”right”>
<mx:Script><![CDATA[
[Bindable]
public var bodyText:String = “”;

//  Implement required methods of the IToolTip interface; these
//  methods are not used in this example, though.
public var _text:String;

public function get text():String {
return _text;
}
public function set text(value:String):void {
}
]]></mx:Script>

<mx:Text text=”{bodyText}” percentWidth=”100″/>

</mx:Panel>

and the app code looks like this..

2.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– customtooltip.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute”>
<mx:Script><![CDATA[
import ToolTipComponents.PanelToolTip;
import mx.events.ToolTipEvent;

private function createCustomTip(title:String, body:String,
event:ToolTipEvent):void {
var ptt:PanelToolTip = new PanelToolTip();
ptt.title = title;
ptt.bodyText = body;
event.toolTip = ptt;
}
]]></mx:Script>

<mx:Button id=”b2″
label=”Generate”
toolTip=” “
toolTipCreate=”createCustomTip(‘GENERATE’,’Click this button to generate the report.’, event)”
x=”269″ y=”170″/>
<mx:Button id=”b1″
label=”Delete”
toolTip=” “
toolTipCreate=”createCustomTip(‘DELETE’,’Click this button to delete the report.’, event)”
x=”405″ y=”170″/>

<mx:Button id=”b3″
label=”Stop”
toolTip=”Click this button to stop the creation of the report.
This button uses a standard ToolTip style.”
x=”528″ y=”170″/>

</mx:Application>
Custom ToolTip

This snapshot give the panel as tooltip…


Usable properties of RichTextEditor Control in flex.

January 19, 2008

RichTextEditor Control has many properties as it has many editable options init.

If u wanted to hide the different buttons at the controlbar use the property showControlBar and set it as false.It will hide the controlbar which will also hide the buttons on it.

And what if i want to hide a particular button or control in RTE.Then there are many properties for that for each one.

linkTextInput -> for link bar on control bar.

alignButtons ->for alignment buttons.

boldButton ->for bold button

colorPicker ->for color picker

italicButton ->for italic button

underlineButton ->for underline button

fontFamilyCombo ->for font family box.

fontSizeCombo ->for font size box.
bulletButton ->for bullet button.

_VRule1 ->for v rule 1 button.

_VRule2 ->for v rule 2 button.

Code Example:

private function init():void
{
rte.linkTextInput.visible=false;
rte.alignButtons.visible=false;
rte.boldButton.visible=false;
rte.colorPicker.visible=false;
rte.italicButton.visible=false;
rte.underlineButton.visible=false;
rte.fontFamilyCombo.visible=false;
rte.fontSizeCombo.visible=false;
rte.bulletButton.visible=false;
rte._VRule1.visible=false;
rte._VRule2.visible=false;
rte.showControlBar=false;
}

<mx:RichTextEditor x=”315.5″ y=”40″ id=”rte”> </mx:RichTextEditor>

This shows the difference .. !

RichTextEditor with editable controls hidden..

leave any comment for queries..


Asign icons to Tree control in flex.

January 19, 2008

There are icons asigned to Tree control for folderOpen, folderClose and for leaf nodes.The folder icon for folder open and close and one leaf icon.What if i want to change this default icons of Tree control.. its simple !.

The properties we got to use here is that:

folderOpenIcon -> for folder Open.

folderClosedIcon ->for folder close.

defaultLeafIcon ->for leaf icon.

Example:

<mx:Tree x=”10″ y=”10″ folderOpenIcon=”@Embed(‘images/fopen’)” ></mx:Tree>

Similarly for other properties..!


Tip to search a topic in flex.

January 11, 2008

Initially when u start coding in flex you will come across some situvation where u wanted to take help from others for coding,i tell that is not required because everything you required is in your pocket and you are searching in others pocket.

The main Intention here is that u start with the HELP in flex builder.It contains many ,many…….flex code examples and basic things to view.

So finally this is what i suggest.

And you can easily find the difference.


Follow

Get every new post delivered to your Inbox.