 |
Web Development »
Ajax and Atlas »
Libraries
Intermediate
License: The Mozilla Public License 1.1 (MPL 1.1)
nxAjax - An Ajax LibraryBy Fernando EscolarnxAjax is a .Net easy use Ajax Framework |
C# (C# 1.0, C# 2.0), VB (VB 7.x, VB 8.0), Javascript, CSS, HTML, .NET (.NET 1.0, .NET 1.1, .NET 2.0), ASP.NET, Ajax, Architect, Dev, Design
|
||||||||
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
nxAjax is an Ajax Framework implementation for Visual Studio. Net 2003 or newer (currently 2005).
To start using this library you need to create a Web project in ASP.Net with Visual Studio and add a reference to "nxAjax.dll" assembly.
For a more convenient use of controls within the Toolbox, you can click with the second mouse button and select "Choose Items…." In the new form browse "nxAjax.dll" assembly and mark all its components.
So we will have our Toolbar as follows:
Now we must convert our Webform on a web page can load nxAjax controls. This is done by changing the inheritance of System.Web.UI.Page to nxAjax.UI.nxMainPage:
We already have the entire system ready to start building our site with the usual methodology.
In the opened project, we click on the Default.aspx "Design" tab. And from the Toolbox, in nxAjax WebControls, dragging two type ComboBox Controls and one type Submit to our form.
Then add the layer that appears when Ajax is charging. One DIV with ID="loading":
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="nxAjax" Namespace="nxAjax.UI.Controls" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajax:combobox id="ComboBox1" runat="server"></ajax:combobox>
<ajax:combobox id="ComboBox2" runat="server"></ajax:combobox>
<ajax:submit id="Submit1" runat="server" value="Submit1"></ajax:submit>
</div>
-> <div id="loading">
-> Loading...
-> </div>
</form>
</body>
</html>
In CodeBehind we will write the following code:
Partial Class _Default
Inherits nxAjax.UI.nxMainPage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack() Then
LoadCombo()
End If
End Sub
Protected Sub LoadCombo()
ComboBox1.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Select One...", "-1"))
ComboBox1.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Honda", "0"))
ComboBox1.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Yamaha", "1"))
ComboBox1.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Suzuki", "2"))
ComboBox1.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Ducati", "3"))
ComboBox1.AjaxUpdate()
End Sub
Protected Sub ComboBox1_OnChange_Server(ByVal sender As nxAjax.UI.nxControl, ByVal value As String) _
Handles ComboBox1.OnChange_Server
ComboBox2.Items.Clear()
ComboBox1.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Select One...", "-1"))
Select Case value
Case "0"
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("CBR 600", "0"))
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("CB 600 F", "1"))
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("CBF 600", "2"))
Case "1"
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("R6", "0"))
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Fazer", "1"))
Case "2"
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("GSX 600", "0"))
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("GSR 600", "1"))
Case "3"
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Monster", "0"))
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Superbike", "1"))
Case Else
ComboBox2.Items.Clear()
ComboBox2.Items.Add(New nxAjax.UI.Controls.ComboBoxItem("Select a Valid One", ""))
ComboBox2.SelectedIndex = 0
End Select
ComboBox2.AjaxUpdate()
End Sub
Private Sub Submit1_OnClick_Server(ByVal sender As nxAjax.UI.nxControl, ByVal value As String) _
Handles Submit1.OnClick_Server
'Me.DocumentExecuteJavascript("alert('Your selection is: " & ComboBox1.Items(ComboBox1.SelectedIndex).Text & " " & _
'ComboBox2.Items(ComboBox2.SelectedIndex).Text & "');")
Me.DocumentAlert("Your selection is: " & ComboBox1.Items(ComboBox1.SelectedIndex).Text & " " & _
ComboBox2.Items(ComboBox2.SelectedIndex).Text)
End Sub
End Class
And we try to execute our website…
Within the nxControls, introducing a new concept: the events on client and on server.
The client events stores a javascript that will be evaluated when they will be raised. Always on the client side. And the server events, are handled by the ASP.Net, running on the Web server and returned the amendments.
Today, in the namespace nxAjax.UI.Controls, we can find the following WebControls:
Get the nxControl description:
Download nxControls DescriptionControl Container is a special control on management and operation. Its function is to be a container of nxContainedPages. These are nxAjax Web pages (as nxMainPage) displayed as a piece of code and type of entity in a single form.
In this way we can navigate between different Web pages without having to return to reload all Ajax libraries, or re-create the Web format main container. It can resemble a UserControl, but that is loaded dynamically without being Instance within the main container.
To see it in action you can create a new Web project, and in the main Webform add this code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="nxAjax" Namespace="nxAjax.UI.Controls" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Ajax Simple Examples</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<link type="text/css" rel="stylesheet" href="css/grid.css" />
<link type="text/css" rel="stylesheet" href="css/datepicker.css" />
<link type="text/css" rel="stylesheet" href="css/treeview.css" />
<link type="text/css" rel="stylesheet" href="css/richtextbox.css" />
</head>
<body>
<table class="Page">
<tr>
<td style="width: 100%; height: 100%;" align="center" valign="middle">
<ajax:Menu ID="myMenu" runat="server" CssClass="myMenu" SelectedItemCssClass="selectedtab"></ajax:Menu>
<ajax:Label ID="Place" CssClass="Place" runat="server"></ajax:Label>
<ajax:Container ID="myContainer" runat="server"></ajax:Container>
</td>
</tr>
</table>
<div id="loading">
<table style="width: 100%; height: 100%">
<tr><td style="width: 100%; height: 100%" align="center" valign="center">
<span class="textoGrande">Loading, please wait...</span></td></tr>
</table>
</div>
<form id="form1" runat="server"></form>
</body>
</html>
There are two details, one the introduction of controls outside the Ajax form. And the other the form tag have been moved at the end of the document.
The container control will store a html form, in the form of nxContainedPage. Hence, to all our controls function properly, the form must go underneath the container and tag </form> behind all our nxControls.
Now create a new Webform called "Example1". And we will change his legazy to nxContainedPage:
By their nature of been a part of a web page, your HTML code will not need any principal tag, simply that ones you want to load in the form:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Example1.aspx.vb" Inherits="Example1" %>
<%@ Register Assembly="nxAjax" Namespace="nxAjax.UI.Controls" TagPrefix="ajax" %>
<form id="frmExample1" runat="server">
<ajax:ComboBox ID="ComboBox1" runat="server"></ajax:ComboBox>
<ajax:ComboBox ID="ComboBox2" runat="server"></ajax:ComboBox>
<ajax:Submit ID="Submit1" Value="Send" runat="server"></ajax:Submit>
</form>
We have allready added our controls, and then it would be enougth to add the code in "Example1.aspx.vb".
And finally in the nxMainPage (default.aspx) we load our contained page in the container:
Here are able to observe the code of the full example, which also shows how to handle different nxControls.
Within nxMainPage and nxContainedPage classes, there are implemented certain functions that can help create Web templates (or skins) and a multilanguage system.
The templates for nxMainPage and nxContainedPage are different. Since the second option implements certain advantages.
The nxMainPage ones are the simplest by form. The clearest case would be translate the page in the previous example. So the template would be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Ajax Simple Examples</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<link type="text/css" rel="stylesheet" href="css/grid.css" />
<link type="text/css" rel="stylesheet" href="css/datepicker.css" />
<link type="text/css" rel="stylesheet" href="css/treeview.css" />
<link type="text/css" rel="stylesheet" href="css/richtextbox.css" />
<$PRESCRIPT$>
</head>
<body onload="<$ONLOAD$>">
<table class="Page">
<tr>
<td style="width: 100%; height: 100%;" align="center" valign="middle">
<$MYMENU$>
<$PLACE$>
<$MYCONTAINER$>
</td>
</tr>
</table>
<div id="loading">
<table style="width: 100%; height: 100%">
<tr><td style="width: 100%; height: 100%" align="center" valign="center">
<span class="textoGrande">Loading, please wait...</span></td></tr>
</table>
</div>
<$POSTSCRIPT$>
</body>
</html>
We can see three different tag types:
<$PRESCRIPT$>, <$ONLOAD$>, <$POSTSCRIPT$> are mandatory labels that must appear in the document. There will be loading some forms and instructions necessary for the proper runing of ajax. Prescript will be in the head of the nxMainPage, onload where it should be onload function of body tag. And postscript in the end, after all controls ajax.
<$XXXXX$> where XXXXX is the name of control (uppercase), will be replaced by nxControl with the same ID.
<&xxxxx&> where xxxxx is a literal (lowercase), which will be replaced by his language value.
We have just given all relevant information from our Web format, so in Default.aspx, we only need to declare the webcontrols:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="nxAjax" Namespace="nxAjax.UI.Controls" TagPrefix="ajax" %>
<form id="form1" runat="server"></form>
<ajax:ComboBox ID="cmbLanguage" runat="server"></ajax:ComboBox>
<ajax:Menu ID="myMenu" runat="server" CssClass="myMenu" SelectedItemCssClass="selectedtab"></ajax:Menu>
<ajax:Label ID="Place" CssClass="Place" runat="server"></ajax:Label>
<ajax:Container ID="myContainer" runat="server"></ajax:Container>
With the peculiarity that you must include a form tag that runs at server. In other way, Visual Studio wont see any WebControl.
Finally, you must specified in the code Behind (Default.aspx.vb):
Partial Class _Default
Inherits nxAjax.UI.nxMainPage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.TemplateFile = "templates/default.template"
...
In nxContainedPage, the scheme templates varies considerably. It gives the option of uploading blocks of code that we will call "areas". Thus, we can compose different pages from a single template.
About the appointment of special labels, it is the same. But you only need to create <$POSTSCRIPT$> at the end of the file.
A fast example of template nxContainedPage:
<table width="100%">
<tr>
<td rowspan="5">
<$TREE$>
</td>
<td rowspan="5" style="width: 10px;"></td>
</tr>
<tr>
<td><&date&></td>
<td><$DATEPICKER$></td>
</tr>
<tr>
<td><&name&></td>
<td><$TEXTBOX$></td>
</tr>
<tr>
<td><$RADIO1$><&yes&></td>
<td><$RADIO2$><&no&></td>
</tr>
<tr>
<td><&sure&></td>
<td><$CHK$></td>
</tr>
</table>
<$POSTSCRIPT$>
Here we can see several labels of language use kind (<&name&>, <&date&>, …), a some controls and the postscript tag.
Using this template is a bit more complex, but we can set controls id as we want. The file Example3.aspx will load this skin thanks to this code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Example3.aspx.vb" Inherits="Example3" %>
<%@ Register Assembly="nxAjax" Namespace="nxAjax.UI.Controls" TagPrefix="ajax" %>
<form id="form1" runat="server"></form>
<tree><ajax:TreeView ID="TreeView1" runat="server"></ajax:TreeView></tree>
<datepicker><ajax:DatePicker ID="DatePicker1" runat="server"></ajax:DatePicker></datepicker>
<textbox><ajax:TextBox ID="TextBox1" runat="server"></ajax:TextBox></textbox>
<radio1><ajax:Radio ID="Radio1" Group="Group1" runat="server"></ajax:Radio></radio1>
<radio2><ajax:Radio ID="Radio2" Group="Group1" runat="server"></ajax:Radio></radio2>
<chk><ajax:CheckBox ID="CheckBox1" runat="server"></ajax:CheckBox></chk>
What we have done is to write some tags with the names of the fields above. Those who are among symbols of the dollar ($). Inner this tags we insert allthings we want to appear in that place.
The Example3.aspx.vb:
Partial Class Example3
Inherits nxAjax.UI.nxContainedPage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.TemplateFile = "templates/example3.template"
If Not IsPostBack() Then
InitializeControls()
End If
End Sub
For management skin areas:
<!$BEGIN myarea>
<$OBJECT$>
<!$END myarea>
<$PAGE$>
<$POSTSCRIPT$>
We can see an area labeled with the name "PAGE" and postscript. In order to load this code, we will have to substantially modify our aspx file:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Example1.aspx.vb" Inherits="Example1" %>
<%@ Register Assembly="nxAjax" Namespace="nxAjax.UI.Controls" TagPrefix="ajax" %>
<form id="formu" runat="server"></form>
<area id="myarea" method="add" place="page">
<object><ajax:ComboBox ID="ComboBox1" runat="server"></ajax:ComboBox></object>
</area>
<area id="myarea" method="add" place="page">
<object><ajax:ComboBox ID="ComboBox2" runat="server"></ajax:ComboBox></object>
</area>
<area id="myarea" method="add" place="page">
<object><ajax:Submit ID="Submit1" Value="Send" runat="server"></ajax:Submit></object>
</area>
p>we declare a form and then we write a tag called "area". Here you specify the "id" of the area we want to load ("myarea"). The method we use to put the code "method". This may be Add or Allocate. And the tag wehre we charge it, "place". In this case we decided that this area be loaded on the label <$PAGE$> (page). In the area define the values of their fields internally. As it only exists "<$OBJECT$>", we define controls in this field.Here we have create 3 areas, writting it in the tag <$PAGE$> place.
The templates, as we already know, are linked with MultiLanguage. The language file format is like:
#
# English Language File
#
[INFO]
name=English
id=ENG
[DICTIONARY]
LoadingMsg=Loading, please wait...
Start=Start
Example1=Example 1
Example2=Example 2
Example3=Example 3
Example4=Example 4
Start.Description=you can see 3 controls. One menu, a label and a container in a nxMainPage
Example1.Description=ComboBox and Submit Button in a nxContainedPage
Example2.Description=GridView Control Test in a nxContainedPage
Example3.Description=Some nice controls in a nxContainedPage
Example4.Description=The RitchTextBox use in a nxContainedPage... Awesome!!!
The lines started with #, are comments. In INFO block we define the properties of the file: name and id. And in DICTIONARY every names and theirs literals.
The same file for Spanish should be:
#
# Spanish Language File
#
[INFO]
name=Spanish
id=SPA
[DICTIONARY]
LoadingMsg=Cargando, espere por favor...
Start=Inicio
Example1=Ejemplo 1
Example2=Ejemplo 2
Example3=Ejemplo 3
Example4=Ejemplo 4
Start.Description=puedes ver 3 controles. Un menu, una label y un container dentro de una nxMainPage
Example1.Description=ComboBox y un botón Submit dentro de una nxMainPage
Example2.Description=GridView Control Test dentro de una nxMainPage
Example3.Description=Algunos bonitos controles dentro de una nxMainPage
Example4.Description=El uso de RitchTextBox dentro de una nxMainPage... ¡¡¡Increible!!!
With these two files already have the MultiLanguage in Spanish and English for our web application.
We have seen how these templates are loaded into literal values dynamically. But in order it works, we need declare a Session value named Language witch contains our language file.
It is recommended, you create a Global.asax file, and you load the language in the session start event:
Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs)
' Code that runs when a new session is started
If Me.Session("Language") Is Nothing Then
Me.Session("Language") = New nxAjax.Language(Server.MapPath("languages/english.language"))
End If
End Sub
Then we can always load another language.
In the code behind, if you need write some language string, you can use lang keyword. In nxMainPage and nxContainedPage, the language file is dinamically loaded in lang. So if you wanna write one string you only must write a code like this:
Place.Text = lang("Start") & ": " & lang("Start.Description")
The example of previous section, but this time using MultiLanguage and templates.
nxAjax being developed by one person and during their free time. It is constantly evolving and seeking to solve the Bugs that arise quickly. Probably the most part that might change in future.
Sorry for my bad English :(
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 6 Aug 2008 Editor: |
Copyright 2008 by Fernando Escolar Everything else Copyright © CodeProject, 1999-2009 Web20 | Advertise on the Code Project |
