Search This Blog

2009-07-27

Flex Tutorials 3-Data binding in Adobe Flex

Data binding is the process of tying the data in one object to another object. It provides a convenient way to pass data around in an application.
Adobe Flex 3 provides several ways to specify data binding:
1.Using the curly braces ({}) syntax
2.Using ActionScript expressions in curly braces
3.Using the <mx:binding>tag in MXML
4.Using bindings in ActionScript

1.Using the curly braces ({}) syntax
The following example shows a Text control that gets its data from an HSlider control's value property. The property name inside the curly braces is the source property of the binding expression. When the value of the source property changes, Flex copies the current value of the source property, mySlider.value, to the destination property, the Text control's text property.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="250" height="150"
>
<mx:Panel
title="Simple data binding"

paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"

>
<mx:HSlider id="mySlider"/>
<mx:Text text="{mySlider.value}"/>
</mx:Panel>
</mx:Application>

Output :

2.Using ActionScript expressions in curly braces
The following example shows a user interface that uses following type of binding expression:
A single bindable property inside curly braces
String concatenation that includes a bindable property inside curly braces
Calculations on a bindable property inside curly braces
Conditional operations that evaluate a bindable property value

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="420" height="350"
>
<mx:Model id="myModel">

<myModel123>
<!-- Perform simple property binding. -->
<a>{nameInput.text}</a>
<!-- Perform string concatenation. -->
<b>This is {nameInput.text}</b>

<!-- Perform a calculation. -->
<c>{(Number(numberInput.text) as Number) * 6 / 7}</c>

<!-- Perform a conditional operation using a ternary operator;
the person object contains a Boolean variable called isMale. -->
<d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
</myModel123>

</mx:Model>

<mx:Panel
paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

width="100%" height="100%"
title="Binding expressions"
>
<mx:Form>
<mx:FormItem label="Last Name:">

<mx:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Select sex:">
<mx:RadioButton
id="isMale"
label="Male"
groupName="gender"

selected="true"
/>
<mx:RadioButton
id="isFemale"
label="Female"
groupName="gender"

/>
</mx:FormItem>
<mx:FormItem label="Enter a number:">
<mx:TextInput id="numberInput" text="0"/>

</mx:FormItem>
</mx:Form>

<mx:Text text="{'Simple binding: '+myModel.a}"/>
<mx:Text text="{'String concatenation: '+myModel.b}"/>

<mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>
<mx:Text text="{'Conditional: '+myModel.d}"/>

</mx:Panel>
</mx:Application>

Output:


3.Using the <mx:binding>tag in MXML
You can use the <mx:Binding> tag as an alternative to the curly braces syntax. When you use the <mx:Binding> tag, you provide a source property in the <mx:Binding> tag's source property and a destination property in its destination property. This is equivalent to using the curly braces syntax.

In contrast with the curly braces syntax, you can use the <mx:Binding> tag to completely separate the View (user interface) from the Model in a Model-View-Controller (MVC) architecture. In this artchitecture, the binding tags act as the Controller. The <mx:Binding> tag also lets you bind different source properties to the same destination property because you can specify multiple <mx:Binding> tags with the same destination.

In the following example, the properties of user interface controls are bound to the wormModel data model using <mx:Binding> tags:

Case 1:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="200"
>
<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
<mx:Binding
source="mySlider.value.toString()"
destination="statusText.text"
/>
</mx:Application>

Case 2.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="200"
>

<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>

<!--
View: User Interface controls.
-->
<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>

<!--
Controller: Properties of user interface controls are bound
to the data model using <mx:Binding> tags.
-->

<mx:Binding
source="mySlider.value"
destination="wormModel.length"
/>
<mx:Binding
source="wormModel.length"
destination="statusText.text"
/>
</mx:Application>

Case 1 and Case 2 both are same,but the case 2 is a an example of MVC architecture.

4.Using bindings in ActionScript
You typically define a data binding in MXML by using the curly braces ({ }) or the <mx:Binding> tag. You can also define a binding in ActionScript by using the mx.binding.utils.BindingUtils class. This class defines static methods that let you create a binding to a property implemented as a variable, by using the bindProperty() method, or to a property implemented as a setter method, by using the bindSetter() method.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="200"
initialize="initializeHandler();"
>

<!--
Controller: Properties of user interface controls are bound
to the data model using ActionScript.
-->

<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
private function initializeHandler():void
{
// Updates the model
BindingUtils.bindProperty(wormModel, "length", mySlider, "value");
// Reads from the model to update the status text
BindingUtils.bindProperty(statusText, "text", wormModel, "length");
}
]]>
</mx:Script>

<!-- Model: Worm data -->
<mx:Model id="wormModel">
<Worm>
<length/>
</Worm>
</mx:Model>

<!--
View: User Interface controls.
-->

<mx:Panel
title="Using the binding tag"
paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
horizontalAlign="center"
>
<mx:Form>
<mx:FormItem label="Length of worm:">
<mx:HSlider id="mySlider"/>
</mx:FormItem>
</mx:Form>
<mx:Text id="statusText"/>
</mx:Panel>
</mx:Application>

Flex Tutorials 2-Define absolute layout,VBox & HBox

Layout property in the Application tag specifies the layout mechanism used for this application. Applications can use "vertical", "horizontal", or "absolute" positioning. Vertical positioning lays out each child component vertically from the top of the application to the bottom in the specified order. Horizontal positioning lays out each child component horizontally from the left of the application to the right in the specified order. Absolute positioning does no automatic layout and requires you to explicitly define the location of each child component.
The default value is "vertical".
The HBox container lays out its children in a single horizontal row.
The VBox container lays out its children in a single vertical column.

Test the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Label text="This is the first Label"
fontSize="10"/>
<mx:HBox>
<mx:Label text="This is the second Label in the application" fontSize="15" />
<mx:Label text="This is the third Label in the application" fontSize="15" />
</mx:HBox>
<mx:VBox>
<mx:Label text="This is the fourth Label in the application" fontSize="20" />
<mx:Label text="This is the fifth Label" fontSize="20" />
</mx:VBox>
</mx:Application>

Output:

Flex Tutorials 1-Create a new project and Debug the Flex application

Steps to create a New Flex Project(Application Type:Web Application, and Application Server:ASP.NET) in adobe Flex
Go to Start ->Program Files/All Programs->Adobe->
Click on Adobe Flex Builder 3
You will get the following window

Click on Filw->New->Flex Project

In the New Flex Projet ,write the Project Name "MyTraining" and keep the other setting as it is .You can change the location by modifing "Project Location".

Click on Next

Click Next


Click on Finish
Now you will get the following Window

My am using MyTraining.mxml for coding ,that file was created by default and same as Project Name.If you want to create another application ,Right click on the src->New->MXML Application

And put File Name in the "New MXML Application" Dialog box and put it in src Folder.

Write the following code in MyTraining.mxml/or your newly created File.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
private function initApp():void
{
var myVar:Number=10;
trace("This is a trace statement");
}
private function clickHandler():void
{
trace("button clicked");
var newVar:Number=12.34;
}
]]>
</mx:Script>
<mx:Label text="Something has displayed"/>
<mx:Button label="Try the debugger" click="clickHandler()"/>
</mx:Application>

Now run your application by clicking on the Run button in the toolbar or press Ctrl+F11


Click ok in the Save and Lunch Dialog

Now you will get the following output


Debug the Flex Application

Close the browser where your Flex application is running
Go to MyTraining.mxml in Source Mode.

Click on Debug Button

Click on Yes.

A light green background will come at the line where you set your breakpoint.
Click on Window->Expressions

Right Click on the Expressions->Click on Add Watch Expressions....

Type myVar and click on OK

Now click on F6 or Step Over Button

At this stage ,you can see that the variable value myVar is changed to 10

Press F8 or "Resume" button to resume the program


If you want to debug the "newVar" ,similarly put a debug point against that line and click on the "Try the debugger" button on the web page.Put the newVar in the Expressions Tab.Click F6 to see the change value and Press F8 to Resume.You can also see the variable value when you mouse over on the variable.
This way you can easily debug your flex application.

2009-07-20

How to place both VB and CS File in App_Code directory

The single App_Code directory can only contain files of the same language.

However, you can add subdirectories to the App_Code directory
in order to process multiple languages under the App_Code directory.

In order to do this, you need to register each subdirectory in the application's Web.config.

<configuration>
<system.web>
<compilation debug="false">
<codeSubDirectories>
<add directoryName="VBFiles"/>
<add directoryName="CSFiles"/>
</codeSubDirectories>
</compilation>
</system.web>
</configuration>

Then, simply creating the App_Code\VBFiles and App_Code\CSFiles directories,
and placing your VB and CS files in each, will allow you to use both languages in your app.

2009-07-09

F# As a Language and F# for Developers

F# As a Language:

F# includes support for the foundational features of functional programming including tuples, lists, options, function values, local function definitions, pattern matching and sequence expressions.

The powerful type inference mechanisms of F# allow code to be both succinct and yet fully type-checked.

F# also includes support for advanced functional programming constructs such as active patterns and computation expressions. Computation expressions can be used to express data queries and client/server modalities in AJAX-style web programming. They enable programmers to write succinct and robust reactive agents through the use of asynchronous workflows. Computation expressions are related to ``monads'' in Haskell.

F# embraces object-oriented programming and includes support for type-inferred, succinct descriptions of object types.

F# allows types and values in an F# program to be accessed from other .NET languages in a predictable and friendly way.

F# includes support for a form of meta-programming, inspired by LINQ. This allows data queries to be expressed and type-checked in F# code and then dynamically compiled and translated to target languages such as SQL using the LinqToSql framework.

F# fully supports .NET generics and the language was designed partly with this in mind.

Through .NET, F# supports advanced language and runtime features such as Unicode strings, dynamic linking, preemptive multithreading, and SMP support.

F# for Developers:

The F# Interactive environment fsi.exe supports top-level development and exploration of the dynamics of your code and environment.

The command line compiler fsc.exe supports separate compilation, debug information and optimization.

F# comes with Visual Studio integration that supports features such as an integrated build/debug environment, graphical debugging, interactive syntax highlighting, parsing and typechecking, IntelliSense, CodeSense, MethodTips and a project system.

F# can be used with tools from the .NET Framework, Microsoft's Visual Studio and many other .NET development tools.

F# comes with an ML compatibility library that approximates the OCaml 3.06 libraries. This means you don't have to use .NET libraries if it is not appropriate. It is possible to write large and sophisticated applications that can be cross-compiled as OCaml code or F# code, and we take this mode of use seriously.

Resource obtain from http://research.microsoft.com/en-us/um/cambridge/projects/fsharp/about.aspx

What is F#

F# is a functional programming language for the .NET Framework. It combines the succinct, expressive, and compositional style of functional programming with the runtime, libraries, interoperability, and object model of .NET.

F# stems from the ML family of languages and has a core language compatible with that of OCaml, though also draws from C# and Haskell. F# was designed from the ground up to be a first-class citizen on .NET, giving smooth interoperability with other .NET languages. For example, C# and F# can call each other directly. This means that F# has immediate access to all the .NET Framework APIs, including, for example, Windows Presentation Foundation and DirectX. Similarly, libraries developed in F# may be used from other .NET languages.

Caml is a general-purpose programming language, designed with program safety and reliability in mind. It is very expressive, yet easy to learn and use. Caml supports functional, imperative, and object-oriented programming styles.

The oCaml or Objective Caml system is the main implementation of the Caml language. It features a powerful module system and a full-fledged object-oriented layer. It comes with a native-code compiler that supports numerous architectures, for high performance; a bytecode compiler, for increased portability; and an interactive loop, for experimentation and rapid development.

2009-07-02

Check file type of FileUpload control for asp.net

This can be achived by
-input type="file" instead of asp:FileUpload
-A server side Textbox Control

Following is a Code snippet of file upload control where I am only accepting the files which has an extension "sas7bdat".If the file extension is not sas7bdat ,I am showing a messge and clear the textbox if the textbox has some value otherwise the selected file name along with the path will come to the textbox.

Code Snippet:


<table>
<tr>
<td class="input-label-left">
Select Data File :
</td>
<td class="input-label-left">
<asp:TextBox ID="txtDataFile" runat="server" ToolTip="Select a .sas7bdat file to attach"></asp:TextBox>
</td>
<td class="input-label-left">
<input id="fupldDataFile" title="Select a .sas7bdat file to attach" type="file" runat="server" onchange="return load_DataFile();" style="width: 10px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid;" />
</td>
</tr>
</table>


<script language="javascript" type="text/javascript">
function load_DataFile()
{

var Filepath = document.getElementById('<%= fupldDataFile.ClientID %>').value;
if(Filepath != "")
{
var arr1 = new Array;
arr1 = Filepath.split("\\");
var len = arr1.length;
var File1 = arr1[len-1];
var filext = File1.substring(File1.lastIndexOf(".")+1);

if (filext != "sas7bdat")
{
alert("Invalid File Format..Selected");
h = '<input title="Select a .sas7bdat file to attach" enableviewstate="true" onChange="return load_DataFile();" type="file" style="BORDER-RIGHT: white 1px solid; BORDER-TOP: white 1px solid; BORDER-LEFT: white 1px solid; WIDTH: 10px; BORDER-BOTTOM: white 1px solid" id="ctl00_RMHolder1_TabContainer1_pnlInput_fupldDataFile" name="ctl00$RMHolder1$TabContainer1$pnlInput$fupldDataFile"></td><td width="192" valign="middle">'
document.getElementById('<%= fupldDataFile.ClientID %>').outerHTML =h;
document.getElementById('<%= txtDataFile.ClientID %>').value="";
return false;
}
else
{
document.getElementById('<%= txtDataFile.ClientID %>').value=document.getElementById("ctl00_RMHolder1_TabContainer1_pnlInput_fupldDataFile").value;

}
}
return;
}
</script>

tags:How do I Validate the File Type of a File Upload,Check file extension of FileUpload control