Flex solution - using wordwrap in datagrid, show long text inside datagrid columns

While showing long text inside datagrid columns, the text for the width of the column will be shown and remaining will be hided.

Actually it will be shown like this.After inlcuding wordwrap in the coding, it will be shown like this

The source coding for the above result is

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="100%" height="100%" xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" backgroundColor="black" backgroundAlpha="0">

<mx:HBox width="900" height="700" horizontalAlign="center" paddingTop="30" paddingLeft="30">
<mx:VBox width="100%" height="50%" >
<mx:Label text="Here long text will not been shown inside the datagrid" color="white"/>
<mx:AdvancedDataGrid dataProvider="{data}" rowCount="3">
<mx:columns>
<mx:AdvancedDataGridColumn width="100" headerText="Product" dataField="product"/>
<mx:AdvancedDataGridColumn width="250" headerText="Description" dataField="description"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:VBox>
<mx:VBox width="100%" height="50%" >
<mx:Label text="Here you can view all message" color="white"/>
<mx:AdvancedDataGrid dataProvider="{data}" wordWrap="true" rowCount="3">
<mx:columns>
<mx:AdvancedDataGridColumn width="100" headerText="Product" dataField="product"/>
<mx:AdvancedDataGridColumn width="250" headerText="Description" dataField="description"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:VBox>
</mx:HBox>
<mx:ArrayCollection id="data">
<mx:Object product="Soap Model 1"
description="This is well prepared product for the human skin and there will be no side effects on using this soap. The company gives guarantee

for this."/>
<mx:Object product="Soap Model 2"
description="This is well prepared product for the human skin and there will be no side effects on using this soap. The company gives guarantee

for this, and a special thing is in this product, where there is a gift coupon within every soap."/>
</mx:ArrayCollection>
</mx:Application>

Flex - Customizing ContextMenu for the Application and for datagrid

In this example two contextMenu is used, one for the Application and one for the datagrid alone.

These can be done using ContextMenu

-- Use print in the contextMenu

-- Hide Builtin menus in contextMenu

-- Use only the needed builtin menus contextMenu

For the application we are using a contextMenu with print option and for the datgrid we are using a different contextMenu with a custom option called View Color.

If we click the View Color option in the contextMenu means the selected color will be assigned as a backgroundColor for the box below the datagrid.

As we applied a contextMenu with print option for the Application, this contextMenu will be shown whenever you are right clicking inside the application expect datagrid portion.


     Code:

private function init():void {
 setContextMenu();
 var cmi:ContextMenuItem = new ContextMenuItem("View color", true);
 cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, menuItemSelect);
 cm = new ContextMenu();
 cm.hideBuiltInItems();
 cm.customItems = [cmi];
 cm.addEventListener(ContextMenuEvent.MENU_SELECT, menuSelect);
}

private function menuSelect(evt:ContextMenuEvent):void {
 table.selectedIndex = lastRollOverIndex;
}

private function menuItemSelect(evt:ContextMenuEvent):void {
 var obj:Object = table.selectedItem;
 colorBox.setStyle("backgroundColor",obj.@color.toString());
}

private function setContextMenu():void{
 customContextMenu = new ContextMenu();
 customContextMenu.hideBuiltInItems();
 var defaultItems:ContextMenuBuiltInItems = Application.application.contextMenu.builtInItems;
 defaultItems.print=true;
}

Download the full code from this link download the source code
View this video for seeing how it is running



Download the full code from this link download the source code

Flex calendar with putting value in datagrid

Flex code for showing calendar and getting the day, week, year of the selected day from the calendar

Through this coding you can show a calendar and get the value from the calendar and put it in the table(datagrid).


By default the current date will be selected in the calendar, if you choose some date afterwards means the date's details will be shown in the datagrid.


In the table the selected day from the calendar's values are stored like day of week, day of month, year and the full date.


     Code:

import mx.collections.ArrayCollection;
import mx.events.CalendarLayoutChangeEvent;
[Bindable]private var dateFields:ArrayCollection=new ArrayCollection();
private function useDate(calendarEvent:CalendarLayoutChangeEvent):void {
// Check whether any day is selected or not
if (calendarEvent.currentTarget.selectedDate == null) {
return
}

//Get the value from the calendar and put it in the arraycollection
var obj:Object=new Object();
obj.cal_day=calendarEvent.currentTarget.selectedDate.getDay();
obj.cal_date=calendarEvent.currentTarget.selectedDate.getDate();
obj.cal_month=calendarEvent.currentTarget.selectedDate.getMonth() + 1;
obj.cal_year=calendarEvent.currentTarget.selectedDate.getFullYear();

obj.cal_fullDate= (calendarEvent.currentTarget.selectedDate.getMonth() + 1) +
"/" + (calendarEvent.currentTarget.selectedDate.getDate() +
"/" + calendarEvent.currentTarget.selectedDate.getFullYear());
dateFields.addItem(obj);

//Refresh the datagrid after adding the object to the arraycollection
dateList.dataProvider.refresh();

Download the full code from this link download the source code
View this video for seeing how it is running


Flex Calendar View - Funny videos are here

Download the full code from this link download the source code

Flex - Using panel ( mx:Panel ) with panel styles

Panel is like a container in the flex where we show image, text, vertical lines, horizontal lines, boxes etc.

This panel will contain the contents, where the coding will be


     MXML Code:

<mx:application mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:panel backgroundcolor="#ff00ff">
<mx:image source="image.png">
</mx:image>
</mx:panel>
</mx:application>

Flex - using style sheet

In flex we can use style sheets also for designing the flex application, we can design the flex application as like flash application.

The implementation of the style sheet with the flex application

We can use the styles inside the mxml or we can use the external style sheet where that will be saved in .css format

The css file's coding will be like this

     Code:

<mx:style>
.ApplyStyle {
font-weight: bold;
color: #ff00ff;
themeColor: #000000;
}
</mx:style>

and the mxml coding will be like this

     Code:

<mx:application stylename="ApplyStyle" mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:style source="../src/global.css">

</mx:style>

We can use this css coding in the same mxml file itself, but maintaining in separate file will be good coding standard

Download the source files style.css and style.mxml

Flex - Sample application

Flex is very easy to understand, we can use the flex builder to create and run the flex application.

The sample application will be like this


We can give different styles to that sentence, where is used to display the contents in flex.

We can design the label's text with style sheet or by writing the styles here within the label tag

For example,



Like this we can design the text, by this coding we can rotate the text and we can give color for the label.

here is the source
you can download it

Flex - About flex an explanation

About Flex in detail

Flex is a technology, where we can create rich internet applications(RIAs) like web applications or desktop applications.

Flex can be integrated with applications like J2EE Architecture, dot net Architecture, php,etc., Flex is free open source framework for building flex application you can download the flex builder freely from download Flex SDK (http://www.adobe.com/products/flex/flexdownloads/index.html) and it can be deployed consistently in all major browsers easily.

There are many web resources for clearing flex problems, so on the critical situations you can get the solutions easily while searching in the web.