How to use SectionStack.setSectionHeaderClass()?

[fhd]

Hi,

I'm trying to change the section header style for a particular SectionStack.

I declare it as follows in a JavaScript file that is loaded first thing in the EntryPoint:

isc.defineClass("MySectionHeader", "ImgSectionHeader").addProperties({
	icon: "image/myimage.png"
});

And I use it as follows in a class instantiated later in the EntryPoint:

final SectionStack stack = new SectionStack();
stack.setSectionHeaderClass("MySectionHeader");

However, my application does not load and I get the following error:

com.google.gwt.core.client.JavaScriptException: (TypeError): Cannot call method 'createRaw' of null
 stack: TypeError: Cannot call method 'createRaw' of null
    at Object.addSections (http://10.249.30.111:8888/myapp/sc/modules/ISC_Foundation.js:857:390)
    at Object.initWidget (http://10.249.30.111:8888/myapp/sc/modules/ISC_Foundation.js:833:112)
    at Object.init (http://10.249.30.111:8888/myapp/sc/modules/ISC_Core.js:1791:6)
    at Object.completeCreation (http://10.249.30.111:8888/myapp/sc/modules/ISC_Core.js:310:6)
    at Object.<anonymous> (http://10.249.30.111:8888/myapp/sc/modules/ISC_Core.js:200:636)
    at [object Object].<anonymous> (unknown source)
    at __gwt_jsInvoke (http://10.249.30.111:8888/myapp/hosted.html?myapp:70:35)
    at http://10.249.30.111:8888/myapp/hosted.html?myapp:263:16
    at z (http://10.249.30.111:8888/myapp/myapp.nocache.js:2:145)
    at http://10.249.30.111:8888/myapp/myapp.nocache.js:8:698
 type: non_object_property_call
 arguments: createRaw,
 __gwt_ObjectId: 446
	at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:195)
	at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:264)
	at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
	at com.smartgwt.client.widgets.layout.SectionStack.create(SectionStack.java)
	at com.smartgwt.client.widgets.BaseWidget.getOrCreateJsObj(BaseWidget.java:343)
	at com.smartgwt.client.widgets.layout.Layout.addMember(Layout.java:968)
	at myapp.client.widget.StackSample.getContent(StackSample.java:51)
	at myapp.client.ShowcaseEntryPoint.createCategoryTab(ShowcaseEntryPoint.java:191)
	at myapp.client.ShowcaseEntryPoint.onModuleLoad(ShowcaseEntryPoint.java:57)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:585)
	at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:369)
	at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:185)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:380)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
	at java.lang.Thread.run(Thread.java:595)

It does work if I use the following code in the JavaScript file mentioned earlier and omit the setSectionHeaderClass() call:

isc.defineClass("MySectionHeader", "ImgSectionHeader").addProperties({
	icon: "image/myimage.png"
});
isc.SectionStack.addProperties({
    sectionHeaderClass: "MySectionHeader",
});

But this would then change the default for all SectionStacks - I only want to change it for a particular one.

Am I using setSectionHeaderClass() correctly?

GWT Version: 2.0.3
SmartGWT Version: 2.1
Browser: Google Chrome 5.0.375.55

[fhd]

I investigated the problem further today; setting the attribute "sectionHeaderClass" manually via JSNI leads to the very same error message.

[vijaykumar067]

Hello,


Did you find the solution for your query.

Please share the solution, if you got it.

I am facing same situation.

[fhd]

Hello,


Did you find the solution for your query.

Please share the solution, if you got it.

I am facing same situation.

No, nothing new on that front sadly. Did you check if it works in SmartGWT 2.4? If not, it's probably time for a bug report.

[kfang]

I have exactly yhe same problem using the

setSectionHeaderClass

[stuchy]

Hi,

I have same problem. Any guide how to use setSectionHeaderClass() correctly?

I'm using GWT 2.3, smartgwt 2.4,
Browser Firefox 5

My code:
in class that extends SectionStack I call

this.setSectionHeaderClass("TableSectionHeader");

Where this class also contains class

    protected static class TableSectionHeader extends SectionHeader {
    	public TableSectionHeader() {
    		super();
    		setBaseStyle("tableSectionHeader"); //this is base style defined in my css file
		}
    }

.... what am I doing wrong...?

[vinuriyer]

hi,

am also facing the same issue,but i hav some solution for applying all the sectionstacks in the application..but in need in particular thats the pblm for me..
pls check http://forums.smartclient.com/showthread.php?t=17473

if you need the solution for changing section stack for all of them

Then for in particluar ,i have created a custom class similar to sectionstack.

[stuchy]

Hi vinuriyer,

thanks for quick response. Problem is that I need two or more different styles of the stack sections in my app...

Did you managed to solve this out?

Sorry that I probably don't completely understand what you want to say in your last sentence. Do you mean that you completely implemented that class similar to the sectionStack from scratch?

[vinuriyer]

hi,

I want to apply different styles for header for section in my app.
That i couldnt accomplish due to above error.

So similar to the class sectionstack i created a custom class using the components available in smartgwt.

The steps to do for a custom class
1. a vlayout extended class and adds headerpanel layout(object reference of hLayout) and sectionpanel(object reference of vLayout for my case)
2. headerpanel adds headerlabel and header icon
3. the custom background is set for the headerpanel as we wish
4. add the components to the sectionpanel layout
5. on click event made for headerpanel ,which expand/collapse the sectionpanel

in this way i accomplish the sectionstack functionality.,.

check out the expand/collapse view of my custom section stack..

[stuchy]

I see now...

well it seems that there is no other way than just use your method as I still didn't get any other solution by myself... but that's really annoying as one knows that this method should work somehow (or at least is supposed to work)...

Thanks ;)

[vinuriyer]

hi,

U keep on trying other ways,,, :)

As i need to complete urgently,i proposed my own solution,.since no more time for trials..

If u got the solution,please post it..so that i can optimize my code..

There are many posts in this forum facing same pblm ,but no results yet ... isomorphic is not responding to this..may be he also worried abt this :)

I didnt get what isomorphic means in the following link ..u pls try it on ..and share the solution if u got

http://forums.smartclient.com/showth...=sectionheader

[stuchy]

Thanks for that link, I have probably solved it out...

The only thing that has to be done is to create your own component in load_skin.js (look at this link, at the bottom of the page http://www.smartclient.com/smartgwt/.../Skinning.html )

This is what I added into the load_skin.js

    isc.defineClass("TableSectionHeader", "SectionHeader").addProperties({
        baseStyle:"tableSectionHeader"
    })

in the skin_styles.css i then have sections like this:

.tableSectionHeaderTitleopened,
.tableSectionHeaderTitleclosed {
    font-family:Arial,Verdana,sans-serif; font-size:12px; color:white;
}
.tableSectionHeaderTitleDisabledopened,
.tableSectionHeaderTitleDisabledclosed {
    font-family:Arial,Verdana,sans-serif; font-size:12px; color:#808080;
}
.tableSectionHeaderopened,
.tableSectionHeaderclosed {
    font-family:Arial,Verdana,sans-serif; font-size:12px;
    padding:3px;
    padding-left:10px;
    border-bottom: 0px solid #C1BFB7;
    background-color: #00FF00;
    font-weight: bold;
    color: #726C65;
    border-left: 1px solid #F9F6EF;
    border-right: 1px solid #F9F6EF;
}

and lastly - in the java code I have this:

this.setSectionHeaderClass("TableSectionHeader");

Hope this will help you ;o)

[vinuriyer]

hi stuchy,

Good Work and explanation..

Unfortunately,a small issue in this,i dont know if any solution for that ,if u know,pls share that also..

The problem is
after compilation of the gwt project,it loads new load_skin.js and skin_styles.css,so the code we put will go after compilation..so we have to put this in each compilation.

But Also,in final deploy,we can put that and solve it finally :)

Thank u very much for sharing this..

In my next release,i'll optimize it as well..

[stuchy]

Hi,

sorry for long response this time.

Well, I didn't notice this behaviour. What I know is that in our project we have those files located in particular folder from where GWT takes them and doesn't overwrite them...

[vinuriyer]

hi stuchy,

Its ok for the response time.. :)

In my case,am using netbeans + smartgwt 2.4 + gwt 2.1

in that i created the gwt project,and added the smartgwt.jar to the library..
Then write the coding for my app and save as .java file..

then am compiling it,during compilation ,all the jar files and gwt libraries are also compiled with the app code.and []breload the settings of gwt module ,skin and js .[/b]
it takes more time during compilation,some how i managed to reduce the speed of compilation.still it reloads and compiles the jar and forming the new sc directory.

Thatsy

Unfortunately,a small issue in this,i dont know if any solution for that ,if u know,pls share that also..

The problem is
after compilation of the gwt project,it loads new load_skin.js and skin_styles.css,so the code we put will go after compilation..so we have to put this in each compilation.

But Also,in final deploy,we can put that and solve it finally :)

Also Please tell me what all settings you made the directory keep as same for each compilation.by your quote...

What I know is that in our project we have those files located in particular folder from where GWT takes them and doesn't overwrite them...