Page Index Toggle Pages: 1 Send TopicPrint
Hot Topic (More than 10 Replies) How to add the control to web page? (Read 9484 times)
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
How to add the control to web page?
Mar 30th, 2006 at 8:34pm
Print Post  
I'm sorry if I've missed it in the documentation, but I now need to use this control in one of our web pages and I have no idea how to put it there.  For some reason, the Visual Studio 2005 designer doesn't show the control in the toolbox, so I can't drag and drop it into the page.  What's the manual way to do it? 

I have the latest version of FlowChartX Pro.

Thanks!
Alvaro
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to add the control to web page?
Reply #1 - Mar 31st, 2006 at 6:51am
Print Post  
First download the LPK_tool.exe from http://download.microsoft.com and use it to create a runtime LPK license file. The first OBJECT tag on the page should instntiate the IE license manager and point it to the LPK file:

<OBJECT classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331" VIEWASTEXT>
  <PARAM NAME="LPKPath" VALUE="FlowChartX.lpk">
</OBJECT>

Then use the OBJECT tag to create a FlowChartX instance, e.g.

<OBJECT id="fcx" style="WIDTH: 600px; HEIGHT: 456px" classid="clsid:F025BF4E-4081-4c02-86E6-6602AEE846F6">
    .....
</OBJECT>

Because of a patent infringement lawsuit, in a few weeks MS will update IE so OCX controls are not automatically activated. You will need to use JavaScript to activate the control as explained here:

http://msdn.microsoft.com/library/?url=/workshop/author/dhtml/overview/activatin...

Stoyan
  
Back to top
 
IP Logged
 
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
Re: How to add the control to web page?
Reply #2 - Mar 31st, 2006 at 3:53pm
Print Post  
Thanks Stoyan.  It works... almost.

Now my problem is accessing the control on the server so that I can populate it.  I've added the ID and RUNAT attributes but they're not working.  I keep getting this validation error when I try to debug:

Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Here's the line with the error:

<object classid="clsid:f025bf4e-4081-4c02-86e6-6602aee846f6" id="diagram" runat="server" style="width: 600px; height: 456px">

I'm not sure if this is a VS 2005 problem.  What do I need to do to access the control on the server?

Thanks,
Alvaro
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to add the control to web page?
Reply #3 - Mar 31st, 2006 at 5:01pm
Print Post  
Hi Alvaro,

I don't think you can use it as a server side control. You can still use FlowChartX in ASP.NET like this:

- create a .NET wrapper assembly
- create an instance of the interop FlowChart class
- use its API to create or load a diagram
- use SaveToString to represent the diagram as an ASCII string
- put that string into a hidden html field
- on the client side Load event use LoadFromString to load the diagram

Stoyan
  
Back to top
 
IP Logged
 
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
Re: How to add the control to web page?
Reply #4 - Mar 31st, 2006 at 9:28pm
Print Post  
Hi Stoyan,

I've been struggling to get this to work, and I'm almost there, I think. 

I started by creating the AxHost derived control on the server so I could use it to generate the diagram and then place the text inside a hidden field as you mentioned.  The code seemed to execute, but at the end I would get an AccessViolationException:

Attempted to read or write protected memory. This is often an indication that other memory is corrupt.

   at System.Windows.Forms.UnsafeNativeMethods.IConnectionPoint.Unadvise(Int32 cookie)
   at System.Windows.Forms.AxHost.ConnectionPointCookie.Disconnect()
   at System.Windows.Forms.AxHost.OleInterfaces.StopEvents()
   at System.Windows.Forms.AxHost.OleInterfaces.Finalize()

So I decided to use the FlowChartClass instead of the control.  This time I got a different result.  It displayed the diagram the first time, but when I went back to the server to redisplay it, I would get an InvalidComObjectException at the point I would call ArrangeDiagram:

COM object that has been separated from its underlying RCW cannot be used.

   at FLOWCHARTLib.FlowChartClass.ArrangeDiagram(Object layout)
   at (my own code) ....

So I'm stuck.  I did some googling on that error and didn't come up with a solution.  Someone mentioned calling System.Runtime.InteropServices.Marshal.ReleaseComObject but that doesn't work.  I'm hoping you're familiar with this problem.

BTW, my boxes display images inside them.  Where should these images be located when running inside a web page?

Thanks!
Alvaro
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to add the control to web page?
Reply #5 - Apr 3rd, 2006 at 5:56am
Print Post  
Hi Alvaro,

I don't have any idea why these exceptions happen. Does calling other methods of the flowChart object work, or only the ArrangeDiagram one fails? In the latter case, probably there is a problem with the wrapper object created for the layout class instance.

Also make sure FlowChartX is called only from STA threads, I believe there is an option in ASP.NET that lets you process each request from its own STA.

Images can be transferred by SaveToString/LoadFromString too. If you want to minimize the traffic, you could load a diagram containing all images into a hidden frame. Then the main frame can load from the server a diagram without the images and assign to box.Picture of each box an image from the hidden frame.

Stoyan
  
Back to top
 
IP Logged
 
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
Re: How to add the control to web page?
Reply #6 - Apr 3rd, 2006 at 2:40pm
Print Post  
Hi Stoyan,

I've made a lot of progress! 

I figured out why ArrangeDiagram was blowing up.  I was storing the layout object as a static member.  It would work fine on the initial request, but on subsequent requests the COM object had already been released behind the scenes. Doh!

I also got the images working.  I figured out that using the box.VariantTag attribute was making only the first box show its image -- the rest were blank.  It would also cause LoadFromString to throw an exception.  So I worked around having to use the VariantTag and the problems went away.

I also changed from spawning a separate STA thread to simply setting AspCompat=true on the page directive.  It just makes it easier.

The big issue now is making the boxes clickable.  On my Windows app, when a user double clicks on a box, the whole diagram is redrawn to make that box the centerpiece of the diagram.  This is done via the BoxDblClicked event, which makes it easy.  How is it done on the web?

Thanks!
Alvaro
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to add the control to web page?
Reply #7 - Apr 3rd, 2006 at 3:49pm
Print Post  
Hi Alvaro,

Great work Wink

You can handle events in JavaScript like this:

<SCRIPT FOR="fcx" EVENT="BoxDblClicked(box, btn,x, y)">
// center on this box
</SCRIPT>

Stoyan
  
Back to top
 
IP Logged
 
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
Re: How to add the control to web page?
Reply #8 - Apr 3rd, 2006 at 6:42pm
Print Post  
Sweet, it's working like a charm.  Smiley

I sent a link of my page to one of my coworkers and it displays fine on his IE, except the control is not shown.  And he doesn't get prompted to install or download it, which is strange.  I checked his IE settings and everything looks alright.

I generated the lpk file and placed it in the same folder as the page.  Here's the HTML for it:

<object classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
<param name="LPKPath" value="FlowChartX.lpk" />
</object>
<object classid="clsid:f025bf4e-4081-4c02-86e6-6602aee846f6" id="diagram" name="diagram" width="100%" height="600">
</object>


Any clues?

Thanks,
Alvaro
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to add the control to web page?
Reply #9 - Apr 4th, 2006 at 5:44am
Print Post  
Hi Alvaro,

You must add a CODEBASE attribute that refers to a CAB file. Then IE will download the CAB and install FlowChartX if it cannot find control with the {f025bf4e-4081-4c02-86e6-6602aee846f6} ID in the registry.

You can create the CAB using the VB6 package and deployment wizard. Or I can send you our digitally signed CAB if you don't mind IE displaying messages with a link to our site when installing the CAB.

Stoyan
  
Back to top
 
IP Logged
 
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
Re: How to add the control to web page?
Reply #10 - Apr 4th, 2006 at 12:24pm
Print Post  
Hi Stoyan,

Please send me your CAB file, as I currently don't have time to create one for us.  Send it to the email address associated with my login.

Thanks!
Alvaro
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: How to add the control to web page?
Reply #11 - Apr 4th, 2006 at 2:49pm
Print Post  
have you received it ?
  
Back to top
 
IP Logged
 
Alvaro
YaBB Newbies
*
Offline



Posts: 8
Joined: Mar 30th, 2006
Re: How to add the control to web page?
Reply #12 - Apr 4th, 2006 at 4:13pm
Print Post  
Yes, thank you.  It was delivered into my "Junk E-mail" folder, for some reason. Angry

Alvaro
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint