Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) An AJAX example (Read 11364 times)
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3380
Joined: Oct 19th, 2005
An AJAX example
Nov 21st, 2006 at 11:24am
Print Post  
Hi there,

Now let's create a small AJAX example using the cool Microsoft ASP.NET AJAX (Formerly "Atlas"), and the not-less-cooler MindFusion NetDiagram.

Start by downloading and installing ASP.NET AJAX from http://ajax.asp.net/. It is a beta 2 version, and works pretty well.

Next, create a new Web Site project, and choose "ASP.NET AJAX-Enabled Web Site" from the list of templates. Set the project name to "OrgBrowser". This sample will let users browse the hierarchy of a very big organization. So, we don't want to load all of the organization data, but only load a part of it upon request, e.g. when the user clicks the + button to expand a node.

Add the NetDiagram stuff as we did in the previous example. Drag a FlowChart on the web form and call it "fc". When the page loads, create only the root node:

Code
Select All
protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    Box root = fc.CreateBox(5, 5, 25, 16);
    root.FillColor = Color.White;
    root.Text = "Boss";
    root.EnabledHandles = Handles.Move;
    root.HandlesStyle = HandlesStyle.DashFrame;
    root.Expandable = true;
    root.Expanded = false;
  }
}
 



Now, if you run the page, you will see a single box on the flowchart canvas.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3380
Joined: Oct 19th, 2005
Re: An AJAX example
Reply #1 - Nov 21st, 2006 at 11:29am
Print Post  
Next, add a new Web Service item to the site project. Add to the service a method that by given name will return the names of the subordinates. E.g.

Code
Select All
<%@ WebService Language="C#" Class="Samples.OrgService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using Microsoft.Web.Script.Services;

namespace Samples
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class OrgService : System.Web.Services.WebService
{
  [WebMethod]
  public string[] GetChildren(string parent)
  {
    // imagine this is a database query
    Random rnd = new Random();
    String[] names = new String[2 + rnd.Next(3)];

    // create a few random names
    for (int i = 0; i < names.Length; ++i)
     names[i] = firstNames[rnd.Next(firstNames.Length)] + " " +
     lastNames[rnd.Next(lastNames.Length)];

    return names;
  }

  string[] firstNames = new string[] {
    "Mikey", "Bob", "John", "William" , "George", "Ben", "Sam", "Meppy" };
  string[] lastNames = new string[] {
    "Jones", "Perez", "Stevens", "Bush", "Jolley", "Gilbert", "Jordan", "Gates" };
}
}
 



Next, add a reference to the service to the Atlas ScriptManager tag that was automatically added to the form:

Code
Select All
<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Services>
    <asp:ServiceReference Path="OrgService.asmx" />
  </Services>
</asp:ScriptManager>
 

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3380
Joined: Oct 19th, 2005
Re: An AJAX example
Reply #2 - Nov 21st, 2006 at 11:39am
Print Post  
Next, set the flowchart's TreeExpandedScript="onTreeExpanded", and add the following JavaScript code to the page:

Code
Select All
var clickedParent;

function onTreeExpanded(parentNode)
{
  if (parentNode.getOutgoingArrows().size() == 0)
  {
    clickedParent = parentNode;
    Samples.OrgService.GetChildren(parentNode.getText(), onGotNames);
  }
  else
  {
    var fcApplet = <%= fc.AppletName %>;
    layoutTree(fcApplet);
  }
}

function onGotNames(names)
{
  var fcApplet = <%= fc.AppletName %>;
  var fc = fcApplet.getFlowChart();

  var i;
  for (i = 0; i < names.length; ++i)
  {
    var box = fc.createBox(0, 0, 25, 16);
    box.setText(names[i]);
    box.setExpandable(true);
    box.setExpanded(false);

    var link = fc.createArrow(clickedParent, box);
    link.setDynamic(true);
  }

  layoutTree(fcApplet);
}

function layoutTree(fcApplet)
{
  var fc = fcApplet.getFlowChart();
  var tl = fcApplet.getScriptHelper().createTreeLayout();
  tl.setNodeDistance(12);
  tl.setLevelDistance(8);
  tl.arrange(fc);
  fc.resizeToFitItems(5);
}
 



Now open the page in a browser (IE, Opera or Firefox 1.5 are supported at this time), and you will see the root node. Click its + button - that will call the onTreeExpanded function, which on its turn will call the service. If the service call succeeds, the onGotNames function will create a child box for each name.

You can expand the randomly created hierarchy for some time - it can get very large, but since only a few names are returned through AJAX, the result will be visible almost instantly. Pretty neat stuff, eh?

Now while creating the sample, I've seen some glitches here and there - such as the flowchart getting repainted after each JavaScript line is executed - we'll work on fixing them in the following few days and will post an updated version soon.

Stay tuned Roll Eyes
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3380
Joined: Oct 19th, 2005
Re: An AJAX example
Reply #3 - Nov 21st, 2006 at 11:44am
Print Post  
I've almost forgot - some of you might like to get the sample project files - they are here now:

https://mindfusion.org/_samples/OrgBrowser.zip

g.
  
Back to top
 
IP Logged
 
GDIDev
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 3
Joined: Nov 27th, 2006
Re: An AJAX example
Reply #4 - Nov 27th, 2006 at 11:59pm
Print Post  
I've download the sample project files, but how to run it, cause i find no solution file, only aspx file. please help... thx...
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3380
Joined: Oct 19th, 2005
Re: An AJAX example
Reply #5 - Nov 28th, 2006 at 9:16am
Print Post  
That's a VS2005 Web Site project. You can open it using the File -> Open -> Web Site command, which lets you select a folder that contains the web site files.

g.
  
Back to top
 
IP Logged
 
BradSymons
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Oct 24th, 2007
Re: An AJAX example
Reply #6 - Oct 24th, 2007 at 6:36am
Print Post  
hi... i've downloaded the sample project etc.. and got it running.. it all works fine except for when i tried to alter the getchildren part to read from a database based on the part...

the javascript doesn't seem to get the node correctly...

i get a string "[object]" as the returned value...
not sure what the problem is..

if i even do an alert(toString(parentNode.getPlainText()));

before calling the service it gives me  "[object]"

any ideas!???!?!?!?!?!?!?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: An AJAX example
Reply #7 - Oct 24th, 2007 at 7:06am
Print Post  
Hi,

The sample project and dlls from the link above might be outdated. The latest version of that sample is included with the trial version of the control:

https://mindfusion.org/NetDiagramTrial.zip

Could you also post here your modified aspx code?

Stoyan
  
Back to top
 
IP Logged
 
BradSymons
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Oct 24th, 2007
Re: An AJAX example
Reply #8 - Oct 24th, 2007 at 7:13am
Print Post  
Hi.. i am downloading the trial again, but it was just last week that i downloaded and installed it....

here is my aspx code..

<body>
    <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server" >
           <Services>
               <asp:ServiceReference Path="OrgService.asmx" />
           </Services>
       </asp:ScriptManager>
    <div>
       <ndiag:FlowChart ID="fc" runat="server" Height="550px" Width="750px" TreeExpandedScript="onTreeExpanded"  AutoSizeDoc="RightAndDown" BoxStyle="Rectangle" BoxHandlesStyle="DashFrame" AutoActivateApplet="True" BoxSelectedScript="onTreeExpanded"/>
       </div>
    </form>
   
       <script language="javascript" type="text/javascript">
       var clickedParent;
      
       function onTreeExpanded(parentNode)
       {
           if (parentNode.getOutgoingArrows().size() == 0)
           {   alert(toString(parentNode.getText()));
               clickedParent = parentNode;
               setTimeout("callService()", 1);
           }
           else
           {
               var fcApplet = <%= fc.AppletElement %>;
               layoutTree(fcApplet);
           }
       }
      
       function callService()
       {
           OrgBrowser.OrgService.GetChildren(
               toString(clickedParent.getText()),
               onGotNames, onFailed);
       }
      
       function onGotNames(names)
       {
           var fcApplet = <%= fc.AppletElement %>;
           var fc = fcApplet.getFlowChart();
           fc.suspendRepaint();

           var i;
           for (i = 0; i < names.length; ++i)
           {
               var box = fc.createBox(0, 0, 25, 16);
               box.setText(names[i]);
               box.setExpandable(true);
               box.setExpanded(false);

               var link = fc.createArrow(clickedParent, box);
               link.setArrowHead(MindFusion.Diagramming.ArrowHead.Triangle);
               link.setArrowHeadSize(3);
               link.setDynamic(true);
           }
           
           layoutTree(fcApplet);
           fc.resizeToFitItems(5);
           fc.resumeRepaint();
       }
      
       function onFailed(error)
       {
           var stackTrace = error.get_stackTrace();
           var message = error.get_message();
           var statusCode = error.get_statusCode();
           var exceptionType = error.get_exceptionType();
           var timedout = error.get_timedOut();
         
           alert(
               "Stack Trace: " +  stackTrace + "\n" +
               "Service Error: " + message + "\n" +
               "Status Code: " + statusCode + "\n" +
               "Exception Type: " + exceptionType + "\n" +
               "Timedout: " + timedout);
       }

       function layoutTree(fcApplet)
       {
           var fc = fcApplet.getFlowChart();
           var tl = fcApplet.getScriptHelper().createTreeLayout();
           tl.setNodeDistance(12);
           tl.setLevelDistance(8);
           tl.arrange(fc);
       }
    </script>
   
</body>


and the modified service code...

Public Function GetChildren(ByVal parent As String) As String()

       ' imagine this is a database query


       ' create a few random names
       INITSQL()
       ADCom = Connection.InitCommand(adoconn, "GetBusinessUnits 1, '" & parent.ToString & "'")
       ADReader = ADCom.ExecuteReader
       Dim i As Integer = 0

       Dim names(ADReader.RecordsAffected) As String
       While ADReader.Read
           names(i) = ADReader.Item(4).ToString
           i += 1
       End While
       Disposeconnection()

       Return names
    End Function


if i do an alert on parentNode.getOutgoingArrows().size()
i also just get "object"

i'm thinking its something to do with the passing of the parameter form the applet to the js?
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: An AJAX example
Reply #9 - Oct 24th, 2007 at 7:28am
Print Post  
Hi,

Actually the parameters passed to the JavaScript event handlers are Java objects, e.g. String, Integer, etc. To get the primitive value types, use the objects' toString() or intValue() methods, e.g.

alert(parentNode.getText().toString());

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
BradSymons
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Oct 24th, 2007
Re: An AJAX example
Reply #10 - Oct 24th, 2007 at 7:36am
Print Post  
hey..thanks for all your hep

but unfortunately i tried that, doesn't help Sad
still just returns the string [object]

if you run the sample code and put a breakpoint on the GetChildren(ByVal parent As String)  procedure in the web service..

what value do you get for parent????
because when i ran if for the first time without touching anything its game '[object]' as the value.

could it be something to do with my JAVA version??
Java Plug-in 1.6.0_03
Using JRE version 1.6.0_03 Java HotSpot(TM) Client VM

or maybe IE7 problem? (running Vista with IE7)



  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: An AJAX example
Reply #11 - Oct 24th, 2007 at 7:41am
Print Post  
Have you changed this in the callService() function too? It should look like

function callService()
{
    Samples.OrgService.GetChildren(
       clickedParent.getText().toString(),
       onGotNames, onFailed);
}

Apparently this was a bug in the sample, but we haven't seen it till now because the sample service does not use the passed value at all. So thanks for pointing it out  8)

Stoyan
  
Back to top
 
IP Logged
 
BradSymons
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 4
Joined: Oct 24th, 2007
Re: An AJAX example
Reply #12 - Oct 24th, 2007 at 7:46am
Print Post  
oh great its working now..

didn't remove the toString() wrapper part last time..
now its working

thanks for your help!!!
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: An AJAX example
Reply #13 - Nov 13th, 2007 at 9:09am
Print Post  
Actually that's not working that well in Firefox when calling a service. The best way we have found to get the text before making a service call is this:

function callService()
{
     // explicitly convert the box text to a JavaScript string object
     var parentText = new String(clickedParent.getText()).valueOf();
     Samples.OrgService.GetChildren(
           parentText, onGotNames, onFailed);
}

It seems the MS Ajax library adds some custom fields to parameters that it should serialize before the service call. Unfortunately adding custom fields does not work for Java objects, and Firefox displays some script error at that point.

It seems the toString() option worked fine in IE, since it immediately converts the Java String to a JavaScript string. Firefox apparently works very differently - it keeps a reference to the Java object all the time and convert the value to a Javascript string on demand. However that breaks the Ajax serialization code when it tries to add the custom field.

So to make this work both in IE and Firefox, you must convert the text to a JavaScript string before calling the service, either by using the more explicit valueof() function as above, or for example by using this shorter syntax:

var parentText = "" + clickedParent.getText();

Stoyan
« Last Edit: Nov 13th, 2007 at 1:01pm by Stoyo »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint