FONTAMARA

Create a Crystal Report document with ASP.NET

Fontamara — Tue, 16 Jun 2009 15:29:08 +0000

ASP.NET 2.0 is able to interact with Crystal Report to create the reports, so you can display diagrams et graphs in your web page.

To realize this implementation, you have to follow these steps.

The first step, you have to add in your project a new DataSetGraph file and you have to define the champs of your dataset.

You can utilize the ASP.NET wizard to do this.

Second you have to add a Crystal Report file (CrystalReport.rpt), here you have to define the document format, to choose the champs, to associate the DataSetGraph file.

Now you can create your ASP.NET page to call the Crystal Report document.

This is the CrystalReport.aspx file:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”CrystalReport.aspx.cs” Inherits=”test” %>

<%@ Register Assembly=”CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304″ Namespace=”CrystalDecisions.Web” TagPrefix=”CR” %>

Crystal Report

In the APSX file, there is a element named CristalReportView, I used it to create a report file.

In C# file I written the code to select the elements of SQL table, to fill the data set and to associate the Cristal Report file with this data set.

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.OracleClient;

using CrystalDecisions.CrystalReports.Engine;

using CrystalDecisions.Enterprise;

using CrystalDecisions.Shared;

public partial class test : System.Web.UI.Page

{

private void Page_Load(object sender, System.EventArgs e)

{

string strReportPath = Request.PhysicalApplicationPath + “CrystalReport.rpt”;

string sql = “my SQL select”;

DataSet ds = new DataSet();

SqlDataSource sqlDs = new SqlDataSource();

sqlDs.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["myConnexion"].ConnectionString;

sqlDs.ProviderName=

System.Configuration.ConfigurationManager.ConnectionStrings["myConnexion"].ProviderName;

OracleConnection conn = new OracleConnection();

conn.ConnectionString = sqlDs.ConnectionString;

System.Data.OracleClient.OracleDataAdapter oda = new OracleDataAdapter(sql,conn.ConnectionString);

oda.Fill(ds, “myDataSet”);

ReportDocument rep = new ReportDocument();

rep.Load(strReportPath);

rep.SetDataSource(ds.Tables["myDataSet"]);

rep.SetDataSource(ds);

CrystalRprtViewer.ReportSource = rep;

}

When you open the page in the localhost, you can see the report of your SQL select.

Javascript using Scriptaculous and jQuery library

Fontamara — Wed, 10 Jun 2009 22:45:56 +0000

In this post I want to demonstrate the benefit of two Javascript library Scriptaculous and jQuery. I realised a drag and drop of a html element using the Scriptaculous library and a client control in a textarea element using jQuery library.

You can use this script that I’m describing as an electronic post-it, you can create a post-it and write something in your post-it.

I want to begin by describing Scriptaculous and jQuery.

Scriptaculous uses the Prototype Framework, this is a framework that aims to ease development of dynamic web applications, Scriptaculous and the Prototype Framework are the free and open source softwares.

The biggest part of the Prototype framework are its DOM extensions. Prototype adds many convenience methods to elements returned by the $() function.

In the early versions of Prototype, the framework came with basic support for class creation: the Class.create() method.

Scriptaculous is a set of JavaScript libraries to enhance the user interface of web sites. It provides an visual effects engine, a drag and drop library (including sortable lists), a couple of controls (Ajax-based autocompletion, in-place editing, sliders) and more.

Using Scriptaculous is easy. First
of all you have to go to the Scriptaculous downloads page (http://script.aculo.us/downloads)to grab yourself the latest version in a convenient package.

Then, load script.aculo.us in your web page. This is done by linking to the scripts in the head of your document:

To call upon the functions, use HTML script tags. The best way is to define them like this:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

To use jQuery you have to download the script (http://jquery.com) and add in your web page:

However, you can override that default by calling Jquery.noConflict() at any point after jQuery and the other library have both loaded.

jQuery is currently available for use in all personal or commercial projects under both MIT and GPL licenses.

In my sample I use a HTML page, the Scriptaculous and jQuery Javascript library, a Javascript file when I implemented the Javascript functions and a CSS style sheet.

In the HTML page I place a button and two div elements to realize the drag and drop effect.

To avoid the conflict between Scriptaculous and jQuery, I add in the Javascript code:

jQuery.noConflict();

To realize the drag and drop I include in the page this Javascript

Droppables.add(‘myDrop’, {

accept: ‘draggable’,

hoverclass: ‘hover’,

onDrop: function() { $(‘myDrop’).highlight(); }

});

The complete HTLM page is:

Post-It

In this page I include Scriptaculous and jQuery file and a Javascript file based in jQuery to determine the max length of a textarea (http://yensdesign.com/2009/01/how-to-set-maxlength-textareas-by-creating-jquery-plugin/)

I create the Jscrip.js to write the Javascript functions, you can use this script with different web browsers:

function addPostIt() {

var myBrowser = detectingBrowser();

var myDivContainer = document.getElementById(‘myPostIt’);

var newDiv = document.createElement(‘div’);

var newTextArea = document.createElement(‘textarea’);

newDiv.setAttribute(‘id’,'myNewDrag’);

myDivContainer.appendChild(newDiv);

newTextArea.setAttribute(‘id’,'myTextarea’);

jQuery.noConflict();

jQuery().ready(function(){

switch (myBrowser){

case ‘ie’:

jQuery(newTextArea).maxLength(136);

break;

case ‘firefox’:

jQuery(newTextArea).maxLength(140);

newTextArea.setAttribute(‘onkeydown’,'javascript:newLine(this);’);

break;

case ‘chrome’:

jQuery(newTextArea).maxLength(136);

break;

case ‘safari’:

jQuery(newTextArea).maxLength(130);

}

});

newDiv.appendChild(newTextArea);

new Draggable(newDiv);

}

function detectingBrowser(){

var myBrowser;

//using IE browser

if (document.all) {

myBrowser=’ie’;}

//using Mozilla Firefox browser

if (!document.all && document.getElementById && !(navigator.userAgent.indexOf(“Opera”)!=-1 && document.getElementById)) {

myBrowser=’firefox’;}

//Using Google Chrome browser

if (navigator.userAgent.toLowerCase().indexOf(‘chrome’) != -1){

myBrowser=’chrome’;}

else {

//Using Safari browser

if (navigator.userAgent.toLowerCase().indexOf(‘safari’) != -1){

myBrowser=’safari’;}

}

return myBrowser;

}

function newLine(txtArea){

if (txtArea.value.length %16 == 0 && txtArea.value.length != 0)

txtArea.value = txtArea.value + “\n”;

}

You have to add this CSS style sheet:

div#myDrop {

width: 360px;

height: 320px;

background: #fff;

border: 5px solid #ccc;

text-align: center;

position: relative;

top: 20px;

left: 200px;

line-height: 100px; }

div#myDrop.hover {

border: 5px dashed #aaa;

background:#efefef; }

div#myNewDrag {

width:150px;

height:150px;

cursor:move;

background:#FFFF33;

margin:10 10 10 10;

text-align:center;<

position:absolute;

top:50px;

border:1px solid #000000 ; }

textarea#myTextarea {

font-family:Arial;

font-size:12px;

width:140px;

height:140px;

background:#FFFF33;

border:none;

overflow:hidden;

text-align:justify; }

input#btnAddPostIt {

font-family:Arial;

font-size:15px; }

Now, you have to open the HTML file, and use this application as a electronic post-it:

Flex and session variables in BlazeDS server

Fontamara — Wed, 03 Jun 2009 12:45:15 +0000

In the web technology you can store your session variable and there are some methods to do it, if you work with Flex and BlazeDs server, you have add in your project a Flex library.

In this tutorial I use Eclipse to write Java code and FlashDevelop to write Actionscript and MXML code.

First step I have to add the Flex library in my Eclipse project, you can find the library in BlazeDs server folder (\tomcat\webapps\myRemoteObject\WEB-INF\lib), the name is FLEX-MESSAGIN-CORE.JAR.

So I have to create a Java class and in this class I embed two methods, one to set the session variable, the other to get the value. The Java class is:

package myRemoteObject;

import flex.messaging.FlexContext;

import flex.messaging.FlexSession;

public class MySessionHandler {

private FlexSession mySession;

public String getMyString()

{

String myStr = null;

mySession= FlexContext.getFlexSession();

myStr = (String)mySession.getAttribute(“mySession”);

return myStr;

}

public void setMyString(String myStr){

mySession= FlexContext.getFlexSession();

if(mySession.getAttribute(“mySession”) == null)

{

mySession.setAttribute(“mySession”, myStr);

}

In the UI, I want to place a text box and a button. The MXML file is:

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”vertical” creationComplete=”init()”>

import mx.collections.ArrayCollection;

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.rpc.remoting.mxml.RemoteObject;

import mx.messaging.ChannelSet;

import mx.messaging.channels.AMFChannel;

[Bindable]

public var myData:ArrayCollection;

private function init():void {

var channel:AMFChannel = new AMFChannel(“my-amf”, “http://localhost:8400/myRemoteObject/messagebroker/amf”);

var channelSet:ChannelSet = new ChannelSet();

channelSet.addChannel(channel);

myService.channelSet = channelSet;

}

public function resultHandlerGet(event:ResultEvent):void {

lblResult.text = “The value in the sesion is:” + event.result.toString();

}

private function faultHandlerGet(event:FaultEvent):void {

lblResult.text = “Error!”;

}

public function resultHandlerSet(event:ResultEvent):void {

myService.getMyString();

}

private function faultHandlerSet(event:FaultEvent):void {

lblResult.text = “Error!”;

}

]]>

result=”resultHandlerGet(event)”

fault=”faultHandlerGet(event)”/>

result=”resultHandlerSet(event)”

fault=”faultHandlerSet(event)”/>

Don’t
forget that in order to define the RemoteObject in your REMOTING-CONFIG.XML file, you have to add this:

myRemoteObject.MySessionHandler

Now you have to compile your Java class and the SWF file, you have to copy the bytecode file in the folder of your application.

To test your application you have to start your BlazeDS server.

When you click the button a session variable is created, and his value is the text that you have written in the text box.

Flex and BlazeDS

Fontamara — Wed, 27 May 2009 14:20:59 +0000

In this example, I want explain how you can use BlazeDS server to communicate the Java class service with the Flex client application.

The Flex technology enable the RemoteObject, it is not sodifferent from a WebService, it doesn’t use the SOAP protocol but the AMF protocol, this is a protocol created by Adobe, you can use the Java class in server side.

If you want use the RemoteObject, you have to use the BlazeDS server, this is a server web based on the Tomcat server.

In this example I used FlashDevelop to write the Flex code et Eclipse to write the Java code.

First step, you have to download the server, you can find the last version at this address:
http://opensource.adobe.com/wiki/display/blazeds/download+blazeds+3.
You have to download the turnkey version.

Second step, unzip the file, all applications are in \tomcat\webapps.

Now add a new folder, I call this folder “myRemoteObject”, and copy here META-INF and WEB-INF, you find these folders in \tomcat\webapps.

In \tomcat\webapps\myRemoteObject\WEB-INF\flex modify the REMOTING-CONFIG.XML file, you have to add the Java class:

class=”flex.messaging.services.RemotingService”>

myRemoteObject.readSports

And in SERVICES-CONFIG.XML, copy:

false

[BlazeDS]

false

Endpoint.*

Service.*

Configuration

false

You can delete MESSAGING-CONFIG.XML et PROXY-CONFIG.XML, beaucause in this example you don’t need to use them .

You can delete so the SRC-FLEX and SRC folders in \tomcat\webapps\myRemoteObject\WEB-INF and in \tomcat\webapps\myRemoteObject\WEB-INF\classes the FLEX folder.

Now you are ready to start.

I create my Java class:

package myRemoteObject;

import java.util.ArrayList;

import java.util.List;

public class readSports {

public List getSports() {

List sports = new ArrayList();

sports.add(“Football”);

sports.add(“Rugby”);

sports.add(“Tennis”);

sports.add(“Sky”);

return sports;

}

I build the class to have the bytecode and copy the myRemoteObject that contain the .class file in \tomcat\webapps\myRemoteObject\WEB-INF\classes.

You have to write the code in the client side, copy this code in your Flex application:

xmlns:mx=”http://www.adobe.com/2006/mxml”

layout=”vertical” creationComplete=”init()”>

import mx.collections.ArrayCollection;

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.rpc.remoting.mxml.RemoteObject;

import mx.messaging.ChannelSet;

import mx.messaging.channels.AMFChannel;

[Bindable]

public var myData:ArrayCollection;

private function init():void {

var channel:AMFChannel = new AMFChannel(“my-amf”, “http://localhost:8400/myRemoteObject/messagebroker/amf”);

var channelSet:ChannelSet = new ChannelSet();

channelSet.addChannel(channel);

myService.channelSet = channelSet;

}

public function resultHandler(event:ResultEvent):void {

myData = new ArrayCollection();

myData = event.result as ArrayCollection;

}

private function faultHandler(event:FaultEvent):void {

lblResult.text = “Error!”;

}

]]>

result=”resultHandler(event)”

fault=”faultHandler(event)”/>

Build the Flex application in release mode and copy the files that you can find in BIN folder in the \tomcat\webapps\myRemoteObject\.

Now you have to start the web server, you have to go in \tomcat\bin and click startup.bat

To test your application, open your browser and write the url address: http://localhost:8400/myRemoteObject/

If you want stop the server click shutdown.bat.

If you modify the Flex code, you only need to copy the SWF file. On other hand, if you modify the Java class, you have to copy the .class file and reboot the web server.

Flex and WebService ASP.NET

Fontamara — Sun, 03 May 2009 15:38:11 +0000

Adobe Flex data access components use remote procedure calls to interact with server environments, such as PHP, Adobe ColdFusion, and Microsoft ASP.NET, to provide data to Adobe Flex applications and send data to back-end data sources.

You can use:

HTTPService components
WebService components
RemoteObject components

In this post I want explain how you can use Web Service ASP.NET with Adobe Flex.

I used Microsoft Visual Web Developer 2005 Express Edition, it’s a free version of ASP.NET.

You can create web applications or web services using ASP.NET, first start the program:

To create a new Web Service choose:

Visual Studio creates some files for generate a web service, the file you have to modify is App_Code/service.cs.

In this file you can see a web method public, I used this method to communicate with Flex:

using System;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class Service : System.Web.Services.WebService

{

public Service () {

//Uncomment the following line if using designed components

//InitializeComponent();

}

[WebMethod]

public string Ciao()

{

return “Ciao!”;

}

Now you have to create the Flex file to read the web service.

This example is very simple, there are a button and a label. When you click the button the Flex’s element call the web service ASP.NET and you can see in the label the string “Hello World”. This is the source code:

wsdl=”http://localhost:1287/WebSite5/Service.asmx?wsdl” load=”myLoad(event)”>

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

private function myLoad(e:Event):void {

myWebService.Ciao();

}

private function onClick(e:Event):void {

lblOutputWebService.text = myWebService.Ciao.lastResult;

}

]]>

You have to activate the web service ASP.NET and to generate the SWF file, so if the web server works, you can open the web page and click the button, in the your page you can see “Hello Word”.

FLEX and HTTPService

Fontamara — Fri, 24 Apr 2009 09:39:59 +0000

In this session, I want to explain how you can use the HTTPService in Flex 3.

You can use an HTTPService component with any kind of server-side technology, including PHP pages, JavaServer Pages (JSPs), Java servlets, and Microsoft ASP pages.

In this application I use the Flex technology for client side and HTTPService to communicate with a remote sever.

I used a WAMP server with MYSQL data base and PHP pages, and a XML data document.

The application is very easy, there are a drop down list to select the date source (SQL via PHP page or XML), a button “Send”, and the data grid that you have to fill.

The data source in the XML document (books.xml):

I promessi sposi

Alessandro Manzoni

Il piacere

Gabriele D’Annunzio

Luigi Pirandello

Il fu Mattia Pascal

I create a PHP file to read the data in the data base (there are 2 champs in the data base table named music; author and song):

$dbuser=”myUser”;

$dbpass=”myPW”;

$dbname=”myDb”;

$chandle = mysql_connect(“localhost”, $dbuser, $dbpass) or die(“Connection Failure to Database”);

mysql_select_db($dbname, $chandle) or die ($dbname . ” Database not found.” . $dbuser);

$result = mysql_query(“SELECT * FROM music”);

$res=””;

while($row = mysql_fetch_array($result))

{

$res = $res. “” . $row['author'] .”” . $row['song'] . “” ;

}

$res =$res .””;

echo $res;

mysql_close($chandle);

This is the MXML file:

import flash.net.URLLoader;

import flash.net.URLVariables;

import mx.collections.ArrayCollection;

import flash.events.MouseEvent;

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.controls.Alert;

[Bindable]

private var myData:ArrayCollection = new ArrayCollection();

[Bindable]

public var myInput:ArrayCollection = new ArrayCollection(

[{label:"Select", data:0},

{label:"XML", data:1},

{label:"PHP", data:2}]);

private function onClick(evt:MouseEvent):void {

var caseCombobox:int = myCombobox.selectedIndex;

switch(caseCombobox)

{

case 0:

myDataGrid.visible = false;

Alert.show(“You have to select something!”);

break;

case 1:

myDataGrid.visible = true;

myHttpService.url = “books.xml”;

myHttpService.send();

break;

case 2:

myDataGrid.visible = true;

myHttpService.url = “myPHP.php”;

myHttpService.send();

break;

default:

trace(“Out of range”);

break;

}

public function erreur(e:Event):void{

}

private function httpService_fault(evt:FaultEvent):void {

myDataGrid.visible = false;

}

private function httpService_result(evt:ResultEvent):void {

var caseCombobox:int = myCombobox.selectedIndex;

switch(caseCombobox)

{

case 1:

myData = evt.result.data.books.book;

break;

case 2:

myData = evt.result.data.music.musics;

break;

default:

myCombobox.selectedIndex = evt.result.data.myCookie;

myDataGrid.visible = false;

break;

}

]]>

result=”httpService_result(event)” fault=”httpService_fault(event)”>

In this file I use Httpservice to connect to data source, to fill a array and I use this array to do the data bind in the data grid.

When you click le button “Send” the method “send” work and the HTTPService could have 2 results: “result” if it’s ok and “fault” if there is a problem in the service.

You have to compile and copy your .SWF and index.htm file in the root of WAMP server.

You haven’t to forget the XML file and the PHP file that you created.

SQL insert, delete and update in ASP.NET applications

Fontamara — Tue, 09 Dec 2008 21:44:05 +0000

The code, I propose here, is good every time you have to execute SQL queries (insert, update or delete) to modifier yours data in a ASP.NET application. You have to write your SQL command as a string and define the SQL function (insert, delete or update) that you are using. You don’t forget to define yours parameters of connexion to database.

public static int dataSql(string sqlString, string sqlCommand)

{

int result = 0;

SqlDataSource sql = new SqlDataSource();

sql.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["Connexion"].ConnectionString;

sql.ProviderName = System.Configuration.ConfigurationManager.ConnectionStrings["Connexion"].ProviderName;

try

{

switch (sqlCommand)

{

case “insert”:

sql.InsertCommand = sqlString;

result = sql.Insert();

break;

case “delete”:

sql.DeleteCommand = sqlString;

result = sql.Delete();

break;

case “update”:

sql.UpdateCommand = sqlString;

result = sql.Update();

break;

}

sql.Dispose();

}

catch (Exception exc)

{

string strErr = exc.Message.ToString();

}

return result;

}

Now, you have simply to write you SQL query:

string strSQL = “my SQL”;

int res = 0;

And call my function:

res = Fonctions.dataSql(strSQL, “insert”);

So the result is the number of rows inserted, deleted or modified.

A good idea to make your SQL query very fast and easy in ASP.NET

Fontamara — Tue, 09 Dec 2008 12:04:39 +0000

When you develop a web application, you have to do some queries on the database, so wherever you have to connect to the data base, you simply have to write your query and execute it.

Here I propose a code in C# language to do the SQL select query in an APS.NET web application.

The principle is to disassociate the data extraction from the SQL string and to use a code that is portable.

public static string[,] dataViewSelect(string sqlString, int var)

{

string[,] output = null;

int countData;

SqlDataSource sql = new SqlDataSource();

sql.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["Connexion"].ConnectionString;

sql.ProviderName = System.Configuration.ConfigurationManager.ConnectionStrings["Connexion"].ProviderName;

try

{

sql.SelectCommand = sqlString;

DataView dv = new DataView();

dv = (DataView)sql.Select(new DataSourceSelectArguments());

countData = dv.Count;

output = new string[countData, var];

for (int i = 0; i < countData; i++)

{

for (int j = 0; j < var; j++)

{

output[i, j] = dv[i][j].ToString();

}

sql.Dispose();

dv.Dispose();

}

catch (Exception exc)

{

string strErr = exc.Message.ToString();

}

return output;

}

You have to define:

string[,]res = null;

And you have to call:

res = Fonctions.dataViewSelect(sql, 5);

It’s a very simple and very fast way to do your SQL queries in your ASP.NET web site.

You just have to try it.