Cannot see dialog title with Graphite skin

[senordhuff]

Hi there,

I'm trying to figure out how to make a dialog title visible with the Graphite skin and can't figure it out.

See this example:
http://www.smartclient.com/?skin=Graphite#databoundFetch

Use this code below and click "Fetch All" and a prompt will display with title set but the title is obscured by the dark background. How do I style the title so it is visible? I tried titleStyle and that didn't work so thought it quicker to ask.

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    dataSource: worldDS,
    // display a subset of fields from the datasource
    fields:[
        {name:"countryCode"},
        {name:"countryName"},
        {name:"capital"},
        {name:"continent"}
    ],
    sortFieldNum: 1, // sort by countryName
    dataPageSize: 50,
    drawAheadRatio: 4
})


isc.IButton.create({
    left:0, top:240, width:160,
    title:"Fetch Code: US",
    click:"countryList.fetchData({countryCode:'US'})"
})


isc.IButton.create({
    left:170, top:240, width:160,
    title:"Fetch Continent: Europe",
    click:"countryList.fetchData({continent:'Europe'})"
})


isc.IButton.create({
    left:340, top:240, width:160,
    title:"Fetch All",
    click:"isc.showPrompt(\"fetching\",{title:\"CANNOT SEE THIS TITLE\", titleStyle:\'color:white\'});countryList.fetchData();isc.Timer.setTimeout(\"isc.clearPrompt()\",4000)"
})

[senordhuff]

Basically trying to see how we can have the dialog that appears when using showPrompt() look more like a normal smartclient window and show a properly styled title as well as a Window icon (which we replace with our own custom icon). Is there a way to do this with showPrompt or do we just need to use a normal smartclient window instead?

[Isomorphic]

The showPrompt method creates a single Dialog instance which is reused each time the method is called.
So if you want to customize the appearance of all your prompts, your best approach is to modify the appearance before the app really loads as part of your skinning logic.
In this case, you'd probably want to modify the defaults for the Dialog class (effects all Dialogs), or for the Dialog.prompt object (effects just the Prompt).

To make the header a different css class you can set "headerStyle" to some other value (default is 'dialogHeader' for the Dialog class - set to a different css class name to modify the appearance).
To make the icon show up, you can set showHeaderIcon to true (this is defaulted to false in the Dialog class).

For more fine tuned UI control over the prompt window shown at different stages within your app, you could of course create your own Window or Dialog instance with your own properties applied to it.

Regards
Isomorphic Software

[senordhuff]

Thank you for the feedback. We have this working correctly for us in 9.1 now. If you execute the sample code I provided in 9.1 and click "Fetch All" twice, it will show the title on the second click. However, when I execute that sample with 10.0, it never shows the title. Is there something different we must do for 10.0 ?

[Isomorphic]

The code above doesn't follow the recommended approach, which is to customize isc.Dialog.Prompt via isc.addProperties(). Using showHeader:true, you can reveal the title area for the prompt dialog whenever it's invoked.

[senordhuff]

I tried adding the following code to the top of the sample and still not working in the 10.0 example. What am I doing wrong?

isc.Dialog.addProperties({
		showHeaderIcon: "true"	,
               showHeader:true
});

isc.Dialog.Prompt.addProperties({
	showHeader: true
});

[Isomorphic]

We'll, the first changes global defaults for Dialog, and the second would just crash.

Use isc.addProperties() as we previously indicated, and pass isc.Dialog.Prompt as the first argument.

[senordhuff]

Still not getting this to work. I'm trying all sort of different options here and nothing is working. Can you help?

I believe this is what you are telling me to do below. And, when you click "Fetch All" with that code in 10.0 it does not show a title in the prompt.

In fact, it doesn't work with 9.1 Feature Explorer either. But, if you remove the line where you addProperties to isc.Dialog.Prompt in 9.1 it does work. We have this working fine with 9.1 without any need to override the Dialog.Prompt. There is some difference between 9.1 and 10.0.

isc.Dialog.addProperties({
		showHeaderIcon: true	
});

isc.addProperties(isc.Dialog.Prompt,{showHeader:true});



isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    dataSource: worldDS,
    // display a subset of fields from the datasource
    fields:[
        {name:"countryCode"},
        {name:"countryName"},
        {name:"capital"},
        {name:"continent"}
    ],
    sortFieldNum: 1, // sort by countryName
    dataPageSize: 50,
    drawAheadRatio: 4
})


isc.IButton.create({
    left:0, top:240, width:160,
    title:"Fetch Code: US",
    click:"countryList.fetchData({countryCode:'US'})"
})


isc.IButton.create({
    left:170, top:240, width:160,
    title:"Fetch Continent: Europe",
    click:"countryList.fetchData({continent:'Europe'})"
})


isc.IButton.create({
    left:340, top:240, width:160,
    title:"Fetch All",
    click:"isc.showPrompt(\"fetching\",{title:\"CANNOT SEE THIS TITLE\", titleStyle:\'color:white\'});countryList.fetchData();isc.Timer.setTimeout(\"isc.clearPrompt()\",1500)"
})

[Isomorphic]

Note that setting titleStyle directly to CSS text (color:white) instead of to the name of a CSS style name is incorrect.

Once you've fixed that, if you're still having a problem, can you elaborate on "does not work":

Header missing entirely?

Text not the expected color therefore illegible?

Title text not changing to what you passed?

Something else?

[senordhuff]

The header text is missing entirely in the prompt in 10.0 Feature Explorer when clicking "Fetch All" in example code. Working in 9.1. I removed the titleStyle and still same result. See code below...

isc.Dialog.addProperties({
		showHeaderIcon: true	
});

isc.addProperties(isc.Dialog.Prompt,{showHeader:true});



isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    dataSource: worldDS,
    // display a subset of fields from the datasource
    fields:[
        {name:"countryCode"},
        {name:"countryName"},
        {name:"capital"},
        {name:"continent"}
    ],
    sortFieldNum: 1, // sort by countryName
    dataPageSize: 50,
    drawAheadRatio: 4
})


isc.IButton.create({
    left:0, top:240, width:160,
    title:"Fetch Code: US",
    click:"countryList.fetchData({countryCode:'US'})"
})


isc.IButton.create({
    left:170, top:240, width:160,
    title:"Fetch Continent: Europe",
    click:"countryList.fetchData({continent:'Europe'})"
})


isc.IButton.create({
    left:340, top:240, width:160,
    title:"Fetch All",
    click:"isc.showPrompt(\"fetching\",{title:\"CANNOT SEE THIS TITLE\"});countryList.fetchData();isc.Timer.setTimeout(\"isc.clearPrompt()\",1500)"
})

[Isomorphic]

You should also add showTitle:true:

isc.addProperties(isc.Dialog.Prompt,{showHeader:true, showTitle:true});

Note, that prompt dialog is created only once and then reused, so changing this line in Feature Explorer after this dialog was already shown does nothing. You should reload Feature Explorer page each time when you want to test new changes of this dialog properties.

[senordhuff]

Works great, thanks.