Forum  Commercial Foru...  Commercial Foru...  Custom Control Help?
Previous Previous
 
Next Next
New Post 6/15/2011 5:25 AM
  jharmon@blinfo.com
853 posts
1st Level Poster




Custom Control Help? 
Modified By jharmon@blinfo.com  on 6/15/2011 8:26:44 AM)

I am in the processing of creating my own custom control using the ASPPageBox customization article (Companion Kit) as an example.  I am having issues with resizing though.  How do I have my control automatically get resized if the panel that it is in gets resized?

Sample code:

objWriter.WriteStartElement("body");
objWriter.WriteAttributeString("style", "margin: 0");
objWriter.WriteStartElement("textarea");
objWriter.WriteAttributeString("class", "myclass");
objWriter.WriteAttributeString("style", "width: 100%; height: 100%;");
objWriter.WriteFullEndElement(); // textarea

 


Thanks, Joe
 
New Post 6/15/2011 7:05 PM
  palli
14415 posts
1st Level Poster




Re: Custom Control Help? 

Hi Joe,

I just solved a similar case in a control that inherited from HtmlBox. What I did was to add an onresize event on the body element, and within that eventhandler, I locate the VWG parentcontrol (the AspPageBox in your case), and then you can use Layout_GetWidth and Layout_GetHeight core JS functions to get the size of the VWG control. Finally you can use Layout_SetWidth and Layout_SetHeight, provided your node already has a style element.

Hope this helps,

Palli

 


Páll Björnsson - Visual WebGui support team - Email: support@visualwebgui.com
 
New Post 6/16/2011 7:40 AM
  jharmon@blinfo.com
853 posts
1st Level Poster




Re: Custom Control Help? 

Palli,

When doing a custom control this way (using the WriteXML routines) how does one call a JavaScript function on the client?  I code the javascript function within my (writeXML routines) but whenever I try calling the function it says it can't find it.


Thanks, Joe
 
New Post 6/16/2011 4:37 PM
  palli
14415 posts
1st Level Poster




Re: Custom Control Help? 
Modified By palli  on 6/16/2011 7:44:46 PM)

Hi Joe,

Calling JavaScript functions is very much dependent on scope. If you are reacting to events within the AspPageBox's loaded resources, calling event handlers within that page's code, the scope is the currently loaded resource, in this case your loaded aspx page.

Calling the global Visual WebGui methods, you still need scoping to be able to call them. If you are calling from server-side via some of the InvokeMethod methods, like on a form, you call this.InvokeMethodWithId("somemethod"), that JavaScript call is issued within the scope of the Form etc. etc.

For convenience in Visual WebGUi, the JavaScript loaded on each form declared a JavaScript variable, mobjApp, that is a reference to the global resources scope, and through it you can call any of the global resource JavaScript functions, like mobjApp.Web_GetWebId().

When you load an aspx resource within an AspPageBox, that resource is responsible for it's own environment, and there you don't have access to the global resource's mobjApp variable. To get to it, you can write a simple JavaScript function that looks something like this:

 

function AspPageBox {  "You've got me"); }
        // Get reference to parent's mobjApp for current window
        function GetVGWmobjApp()
        {
            var objCurrentWindow = window;
            var mobjApp = null;
            while (!mobjApp && objCurrentWindow)
            {
                if (objCurrentWindow.mobjApp)
                {
                    mobjApp = objCurrentWindow.mobjApp;
                }
                else
                {
                    objCurrentWindow = objCurrentWindow.parent;
                }
            }
            return mobjApp;
        }

This will return you an mobjApp variable, through which you can reach the global resources.

Calling a JavaScript method that is located within your AspPageBox's loaded resource, you need to locate the node that holds the loaded resource's document object, and there you have access to it's DOM.

Let's say you have a simple aspx page, on which you declare just a single javascript function in the header, say:

function AspPageBox { a lert("You've got me"); }

If you then add a Form with a Button and an AspPageBox, that loads this aspx form, you could on Button.Click run the following (note that I use mobjApp, as the call is coming on your Form's scope, which already has it wired up):

this.InvokeMethod("mobjApp.InvokeAspMethod", this.aspPageBox1.ID.ToString());

Where this JavaScript InvokeAspMethod function would be declared as:

 

function InvokeAspMethod(strControlId) {
    var mobjApp = GetVGWmobjApp();
    // the VWG control - the AspPageBox
    var mobjVWGNode = mobjApp.Web_GetWebElement(mobjApp.Web_GetWebId(strControlId), mobjApp);
    // the document that contains the resource (your aspx elements)
    var mobjVWGDocument = mobjApp.Web_GetTargetElementByDataId(strControlId, mobjApp).contentWindow;
    // Invoke your own JavaScript function within the loaded resources of the AspPageBox.
    mobjVWGDocument.AspPageBox 
}        

 

What it does, is first to establish a reference to Visual WebGui's global resources. Then it uses those to find the AspPageBox itself (mobjVWGNode), which is not necessary in this case, but I threw it in for explanation purposes. Then it locates the TargetElement, which in it's contentWindow has your loaded AspPageBox's document, and you can call your alert function directly on that node.

In order to use those two JavaScript functions above, they need to be accessible within the scope you are calling, so they are probably best added to your custom control as JavaScript resource, with the proper naming convention of YourControl_FunctionName etc.

Hope this explains and helps some,

Palli

 


Páll Björnsson - Visual WebGui support team - Email: support@visualwebgui.com
 
New Post 8/29/2011 12:43 PM
  jharmon@blinfo.com
853 posts
1st Level Poster




Re: Custom Control Help? 

Palli,

Still struggling :(  What do I need to put in the resizeContainer function so that I can resize my control to the VWG panel dimensions?

I have the following code:

                objWriter.WriteRaw("function GetApplication(){");
                objWriter.WriteRaw("var objCurrentWindow = window;");
                objWriter.WriteRaw("var mobjApp = null;");
                objWriter.WriteRaw("while (!mobjApp && objCurrentWindow)");
                objWriter.WriteRaw("{");
                objWriter.WriteRaw("if (objCurrentWindow.mobjApp)");
                objWriter.WriteRaw("{");
                objWriter.WriteRaw("mobjApp = objCurrentWindow.mobjApp;");
                objWriter.WriteRaw("}");
                objWriter.WriteRaw("else");
                objWriter.WriteRaw("{");
                objWriter.WriteRaw("objCurrentWindow = objCurrentWindow.parent;");
                objWriter.WriteRaw("}");
                objWriter.WriteRaw("}");
                objWriter.WriteRaw("return mobjApp;");
                objWriter.WriteRaw("}");

                objWriter.WriteRaw("function resizeContainer(strControlId){");
                objWriter.WriteRaw("var mobjApp = GetApplication();");
                objWriter.WriteRaw("var mobjVWGNode = mobjApp.Web_GetWebElement(mobjApp.Web_GetWebId(strControlId), mobjApp);");                
                objWriter.WriteRaw("var mobjVWGDocument = mobjApp.Web_GetTargetElementByDataId(strControlId, mobjApp).contentWindow;");
                //objWriter.WriteRaw(" mobjApp.Layout_GetWidth();)");
                objWriter.WriteRaw("}");
                           
                objWriter.WriteFullEndElement();
                objWriter.WriteFullEndElement();

                objWriter.WriteStartElement("body onresize=resizeContainer(\"" + this.ID.ToString() + "\");");
                objWriter.WriteAttributeString("style", "width: 100%; height: 100%; margin:0; background-color:transparent;");

                objWriter.WriteStartElement("div");
                objWriter.WriteAttributeString("id", "datePicker" + this.ID.ToString());
                objWriter.WriteAttributeString("style", "width:100%; height: 100%; overflow:none;");

 


Thanks, Joe
 
Previous Previous
 
Next Next
  Forum  Commercial Foru...  Commercial Foru...  Custom Control Help?
.NET HTML5 Web, Cloud and Mobile application delivery | Sitemap | Terms of Use | Privacy Statement | Copyright © 2005-2012 Visual WebGui®       Visual WebGui weblog on ASP.NET Gizmox Blog Visual WebGui Group on LinkedIn Visual WebGui updates on Twitter Visual WebGui Page on Facebook Visual WebGui YouTube Channel Visual WebGui Platform News RSS