How to change header of content panel gxt - gwt

I am struggling to make an header of content panel look like blinking by changing the color of it. But the code I am trying does not work, here the code:
public class Reminder extends ContentPanel{
Timer time = new Timer{
public void run(){
rpc.getReminders(new AsyncCallBack<ArrayList<ModelData>>(){
public voidonFailure(Throwable caught)
{ }
public void onSuccess(ArrayList<ModelData> result){
//the next line does not affect any result
getHeader().setStyleAttribute("backgroundColor","red");
//even tried throught css, but both of them gave no result
getHeader().addStyleName("myredpanel");
//But this method is working, but its also overwriting the parents css styles, but i only need to change backgroun color
getHeader().setStyleName("myredpanel");
})
Searched the forums, but those examples doesnot working on mine? What else suggestions?

Don't use the camel case names when you call setStyleAttribute.
getHeader().setStyleAttribute("backgroundColor","red"); // WRONG
getHeader().setStyleAttribute("background-color","red"); // CORRECT

if you are using gxt 3.0.X you should change ContentPanelAppereance, direct style setting may not be helpfull. if you want, i can send an example.

Related

WizardNewFileCreationPage order

I'm creating an Export wizard, including the possibility for the user to choose the format of the export and then to choose the location of the export with WizardNewFileCreationPage.
To do so, I've created 3 pages, one extending wizardPage with a radio to set the next page to call, and 2 others pages pending the format and extending WizardNewFileCreationPage.
It's working almost perfectly, my only problem concerns the "Finish" button, which requires to be clickable that all export format are fulfilled even if I overrided the function isPageComplete to limit the page validation only to the function validatePage.
It looks like the function validatePage doesn't valid only it's own control but also all the control implemented by the class WizardNewFileCreationPage in the Wizard.
Am I going wrong somewhere and does anybody know a solution ?
Regards,
Waldo
The WizardDialog showing the dialog drives button enablement. At various points it calls its updateButtons method. This in turn calls the Wizard canFinish method to set the Finish button state.
The default for canFinish is to call the WizardPage isPageComplete method for every page even for pages which are not currently active.
For WizardNewFileCreationPage the isPageComplete method consults the result of the validatePage method.
So you can override the Wizard canFinish method to only test the pages you care about. Or you can override the individual page isPageComplete methods to return the result you want.
So, I think my problem came from the fact I wasn't implementing canFinish method that's requires in it's default implementation that all page contained in the Wizard are fulfilled. To avoid my problematic, I did it this way :
#Override
public boolean canFinish() {
if (this.getContainer().getCurrentPage() == mainPage)
return false;
return this.getContainer().getCurrentPage().isPageComplete();
}
Note : My "mainPage" attribute is theone defining the format of the export and then the nextPage to use.
Also, I kept verifying if my page was complete this way by calling the WizardNewFileCreationPage this way :
#Override
public boolean isPageComplete() {
return this.validatePage();
}

How to keep track of history in Wicket?

When using setResponsePage(Somepage.class) or setResponsePage(new Somepage()) I want to know the page where the setResponsePage(...) is called from in the Page I'm going to.
setResponsePage in Component is final so I can't override it.
I don't want to set the current page in the next one manually like so:
Page page = new Somepage();
page.setReturnPage(new Returnable() {
#Override
public BasePage onReturn() {
// use some local final variable to create a new instance of this previous page
}
});
setResponsePage(page);
I just want it to be available. I do want to be able to manually change the "returnpage" if I want.
I tried to keep track of this using the Session but that didn't work.
I'm currently trying to figure out if this is possible using an IRequestCycleListener but I can't determine the Page I'm coming from in the RequestCycle.
Any help is appreciated!
You can design your page to take a PageReference argument in its constructor. Every Page descendant has getPageReference() method to return this for you.
public SomePage(PageReference pageRef) {
this.pageRef = pageRef;
}
Then when you need to return to the previous page you can simply call
setResponsePage(this.pageRef.getPage());

How to get user's input from WicketStuff's TinyMCE

Pretty straight-forward question, but I can't find this anywhere. I'm using WicketStuff's TinyMCE to make a Rich Text Editor in my application, and can't find anywhere how to get the input from the text area. For brevity's sake, the following is a simplified version of the code I'm using.
private String input;
...
TinyMCESettings settings = new TinyMCESettings(TinyMCESettings.Theme.simple);
TextArea<String> textArea = new TextArea<String>("editor", new PropertyModel<String>(this, "input"));
textArea.add(new TinyMceBehavior(settings));
form.add(textArea);
Using this, I would expect the usual manner to simply use my String 'input' since it's set as the model. This always results in null as the model isn't being updated.
I tried using the auto-save plugin in case it was expecting the save button to be clicked (which doesn't update the model either), and neither worked. The only thing I've been able to do to get the user's input is to add a HiddenField, with a new model, and make a JavaScript call like
document.getElementById('hiddenField').value = tinyMCE.get('editor').getContent();
but this has led to other problems with trying to call the JS in the desired place and to get it to work properly. I feel this shouldn't be necessary anyways, as surely someone must have implemented a method to get the contents of the text area being used.
Any help would be greatly appreciated.
Thanks to a blog post at Nevermind Solutions, the way to get the model updated is to add the following JavaScript to the form's submitting button:
onclick="tinyMCE.triggerSave(true,true);"
My text area is inside a panel with the button outside of the panel, so it doesn't directly work for me. The trick was to add the JavaScript call to the button's onSubmit, move the logic into the onAfterSubmit, and to make the button MultiPart so that it could call the save trigger before doing the other logic associated to the model.
Hope this might help some others in the future.
You have to add a modifier to the submit button so that the model can update.
AjaxButton btnSubmit = new AjaxButton("btnSubmit", new Model()) {
#Override
public void onSubmit(AjaxRequestTarget target, Form<?> form) {
doSomething();
}
};
btnSubmit.add(new TinyMceAjaxSubmitModifier());
Have a look here for more info

How to add documentation to an exposed property?

I'd like to add documentation to my custom Components. This documentation should be visible in the editor.
It seems already available for standard library components :
However, it doesn't work for my code:
using UnityEngine;
using System.Collections;
public class MainPlayer : MonoBehaviour {
// I would like to see this comment in the editor too!
public string myName;
// Use this for initialization
void Start () {
Debug.Log("I am alive and my name is " + myName);
}
// Update is called once per frame
void Update () {
}
}
How can I do that?
All you need to do is decorate the field with Tooltip attribute.
Example:
[Tooltip("These are not droids you are looking for...")]
public string myName;
Also, if I were you, I'd go [Header()] attribute way as it will always show a bolded header above field in Inspector instead of only showing information on hover.
Docs for Header and other attributes:
http://docs.unity3d.com/ScriptReference/HeaderAttribute.html
I'm afraid there is no direct link to the whole section, so you need to navigate in nav on the left to section called Attributes which should be active from start.

CollapsiblePanelExtender: Can I initiate collapse/expand from client-side javascript? (AJAX Control Toolkit)

The CollapsiblePanelExtender seems primarily designed to collapse/expand things in response to user mouse events. Is there also a good way to get the extender to collapse/expand things in response to client-side javascript?
In my particular case, I have a number of CollapsiblePanelExtenders (and their corresponding Panels) on a page, and I'm wondering if I could implement an "expand all panels" button by doing something like this strictly on the client side:
for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)
I can implement this logic server-side instead if I did a full postback, but my page takes a long time to load, and so this doesn't seem like it would provide a very slick user experience. Thus I am interested in doing expand/collapse client-side.
It seems like this isn't a use case the AJAX Control Toolkit people had in mind, but I thought I'd check.
Write the following code in the OnClick event of Image/button
<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>
function ExpandCollapse() {
$find("collapsibleBehavior1").set_Collapsed(true);
$find("collapsibleBehavior2").set_Collapsed(true);
}
Hope this helps!
I have a partly working solution now.
I followed Ian's suggestion and looked through the toolkit source. In CollapsiblePanelBehavior.debug.js, you can that expandPanel() is apparently intended as part of the public interface for the behavior. There's also a get_Collapsed(). The key to accessing these behaviors in javascript seems to be setting the BehaviorID property on your CollapsiblePanelExtender tags in ASP.NET.
I modified the repeater on my page so that the BehaviorIDs are predictible, along these lines:
<ajaxToolkit:CollapsiblePanelExtender
BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
ID="CollapsiblePanelExtender" runat="server" />
This results with behaviors named collapsebehavior1, collapsebehavior2, collapsebehavior3, etc..
With this done, I'm able to expand all the collapsible panels on the client as follows:
function expandAll() {
var i = 0;
while (true) {
i++;
var name = 'collapsebehavior' + i;
var theBehavior = $find(name);
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
if (isCollapsed) {
theBehavior.expandPanel();
}
} else {
// No more more panels to examine
break;
}
}
}
I'm sure using $find in a loop like that is really inefficient, but that's what I have so far.
Also, it doesn't work on Firefox for some reason. (On FF only the first element expands, and then there's a Javascript error inside the Control Toolkit code.)
This will all seem extremely ugly to all you javascript pros. Maybe I'll clean things up later, or you can help me out.
You can also just toggle the panels to switch between collapsed/expanded states:
function toggle() {
var MenuCollapser = $find("name");
MenuCollapser.togglePanel();
}