Comments on Pleasing Software: Advanced JavaFX Control Styling

HTML5 and CSS3 Design are best subjects among for...

2012-06-27T23:08:41.887-07:00

HTML5 and CSS3 Design are best subjects among for web developers. These layouts are another stepping-stone to make the web encounter more pleasant and grafting.

Dean I have a question, about new SkinBase-way of ...

2010-08-06T06:57:56.525-07:00

Dean I have a question, about new SkinBase-way of implementation of new JavaFx controls.

Right now I'm busy with implementation custom Dialogs for my application and it looks like this:

var alert:JFxDialog = JFxDialog {
titleText: "Warining about error!",
icon:ImageView{image:Image{width:25, height:25, url:"{__DIR__}assets/Ico_Alert_32bit.png"}},
content:Label {text:"hello window"},
options:[DialogOption.OK_OPTION, DialogOption.CANCEL_OPTION]
}

as you can see I use options for creating buttons in the bottom of the dialog.

So, the question is how(where) I can create those buttons in my dialog skin? Cause when I try to read a sequence of my options and it has a size of 0.

And one more question :)
In javafx 1.2 we had a skin reference in control and we could invoke smth in skin. Right now we use SkinBase and SkinAdapter in order to use CSS support, but in this case we don't have a reference to our Skinbase extended class. How I can get this reference?

Thank you in advance.

The caspian style sheet is loaded by default. So ...

2010-07-27T08:17:32.031-07:00

The caspian style sheet is loaded by default. So you can just make your own style sheet and just start overriding the caspian styles. No need to copy the entire style sheet.

Although the caspian style sheet is a good reference when creating your own styles.

Thanks Dean for this interesting post. One questio...

2010-07-27T03:32:31.805-07:00

Thanks Dean for this interesting post.
One question about the use of caspian style.
Do you make a copy of the caspian css file and then customize it or do you load both caspian.css file and your own css ?

Thanks for the comment, but I still need to find t...

2010-05-12T00:34:23.681-07:00

Thanks for the comment, but I still need to find the way to style HBox and VBox.

Dean and ishan, Just to expand on Dean's comm...

2010-05-09T19:46:15.434-07:00

Dean and ishan,

Just to expand on Dean's comment about states: they can be easily achieved based on a status variable. Suppose you have the states red, green and blue. Then the corresponding CSS may be:

.button#red {-fx-base: red;}
.button#green {-fx-base: green;}
.button#blue {-fx-base: blue;}

As JavaFX doesn't give us more functional defs, (yet?), I like to define constants as Java enums, e.g., for the above states I'd define Status.java:

public enum Status {red, green, blue}

Then a button styled based on the status is simple:

Button {text: "Chameleon"
var status = Status.red;
id: bind "{status}";
}

For instance, if we introduce a next() method to go from one state to another in the Status.java:

public enum Status {
red {
public Status next () {return green;}
},
green {
public Status next () {return blue;}
},
blue {
public Status next () {return red;}
};
abstract public Status next ();
}

Then the button that changes style when clicked becomes simply:

Button {text: "Chameleon"
var status = Status.red;
id: bind "{status}";
action: function () {status = status.next()}
}

Of course we could also bind the id to an outside status variable...

Actually, I'd find it much more appropriate to use styleClass rather than id attribute, i.e.:
styleClass: bind "{status}";
After all, a widget should not be identified by its style; it's even a good idea to have unique ids, e.g. for look-ups. But I didn't get styleClass to work with -fx-base, only with -fx-text-fill, and only partially. (Do you have any idea why - a bug?)

Hi Dean. Is there any way to style HBox and VBox? ...

2010-05-01T08:46:39.859-07:00

Hi Dean.
Is there any way to style HBox and VBox? I'd like to make a round border and background color for my application.
Thanks.

Hi, dean. I know and see the aim of css. Normally,...

2010-04-30T13:31:11.467-07:00

Hi, dean.
I know and see the aim of css. Normally, in web culture, there was and is a trend to create ui in css. In 1.2, I created my software api in a way that user can change the theme by both css (I love css approach for its simplicity) and skin. It was working well except the bug for dynamically created nodes. For 1.3, I have to redesign the skinning architecture of my software. Again I want to benefit from both static (css) and dynamic (skin) way of styling. For a consistent api, I need to learn every aspects of styling and estimate possible changes that can be made by fx-team. In this sense, your postings are very fulfilling, and I'm forwarding my thanks. If you looked at Sergey's codes, in fact the css button is very simple and short. If there were a way of overriding css styling in some parts, it would be very useful. Maybe there is. But I couldnt find a way yet.

ihsan, Yes and I think Sergey's misunderstand...

2010-04-30T08:01:15.350-07:00

ihsan,

Yes and I think Sergey's misunderstanding when you would use CSS. CSS is not meant to be a replacement for writing the logic of your control. You still need to do that in JavaFX.

CSS is only meant to allow people to easily change the look of *existing* controls. If a control doesn't *behave* the way you want, no amount of CSS will change that. See my response to him in the other post.

If you do want to programmatically change the color of a button with CSS you would simply create two different styles:

.button {
-fx-base: blue;
}

#red-button {
-fx-base: red;
}

These styles turn all buttons blue. But any button (any control, actually) with the ID of "red-button" will be red. From here you just change the ID of the button:

btn = Button {
text: "I'm a Button"
action: function() {
if (btn.id == "") btn.id = "red-button" else btn.id = ""
}
}

Now every time you click the button it changes between blue and red.

Tip: If you find yourself trying to write logic using CSS hacks, you're probably not using CSS as God, or Jasper, intended. :-)

Dean

Dean, have you ever looked Sergey's codes abou...

2010-04-29T13:27:27.905-07:00

Dean, have you ever looked Sergey's codes about styling? He's right about lack of bind support in css. Also in his example, it cannot be given colors programmatically to css styled controls.
I tried the following workaround. But

override var style = bind "-fx-base:{toColorString(coColor)};";

function toColorString(coColor:Color) {
"rgba({coColor.red*255 as Integer},{coColor.green*255 as Integer},{coColor.blue*255 as Integer}, {coColor.opacity})"
}

But style from css overrides style from node. it should be vice versa, shouldnt it?

@Jan: I just realized that I missed your question....

2010-04-29T09:35:57.130-07:00

@Jan: I just realized that I missed your question. Sorry about that. You are correct, you cannot style arbitrary public variables any more (at least I can confirm that I can't get it to work, either).

I suspect that this functionality was sacrificed for performance in the new CSS engine. But I'm hoping they will soon find a way to restore it.

Dean

@D It looks like States are gone, at least for now...

2010-04-29T09:27:42.191-07:00

@D It looks like States are gone, at least for now. Which is really, really disappointing. And I appreciate the thought, but I'd rather write code than tutorials. And I'd rather write about what interests me; not an option you usually get once it turns into a job. :-)

@David: Sub-regions are next on my list. Hopefully I'll get time this weekend to dig into that and write up what I find (unless someone beats me to it *cough* Oracle *cough*). :-)

Dean

Hmm - played with examples and lots of thoughts to...

2010-04-28T14:20:13.933-07:00

Hmm - played with examples and lots of thoughts to play with, but ... this is great for the simple example but how do we actually create a skin with multiple regions?

e.g. a very simple case of a slider on a bar (as already provided by javafx but just for illustration here) then I assume the bar would be one region and the slider another identified by id? How are the two parts defined?

Trying to work it out, as would like to apply to xpicker, but any hints would be very useful ( and yes, I acknowledge caveats with implementation) :-)

COOOOL but the one thin I miss from Caspian is St...

2010-04-28T11:40:04.753-07:00

COOOOL

but the one thin I miss from Caspian is States. For example when you are making a component to set different styles for different states of the component.

P.S.
Dean, I think Oracle should hire you to right a JavaFx tutorials.

@Dean, I haven't explore much of CSS in my ap...

2010-04-28T04:38:46.641-07:00

@Dean,

I haven't explore much of CSS in my application. Had the plan to use in JavaFX 1.3.
Got little confused.

Thanks Dean

@jsmith

I must have explored a little and tried some CSS code before posting this :) Thanks Jsmith.

Dean, thx a lot for this post. The writing style ...

2010-04-27T13:56:59.683-07:00

Dean, thx a lot for this post. The writing style and depth of information is excellent.

I was playing around with the JavaFX CSS on the weekend and found it fun but cryptic. With the info in your post, now it is just fun :-)

The multi-background stuff and the differences between spaces and commas was confusing me, but now it makes sense.

Those without a web design background who need a css refresher, check out => http://www.w3schools.com/css/default.asp

I wish that some of the standard css names (non -fx prefixed) like margin or padding worked out of the box in JavaFX. It would also be great if some of the non-standard extensions such as (https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions) worked too. That way, it would be easier to port existing stylesheets to Java and existing stylesheet editors, like netbeans, could do better syntax checking and highlighting.

It would also be nice to able to completely layout a scene using css in addition to easily styling a control. Perhaps this is already possible with the existing 1.3 implementation...

The JavaFX css system is confusing, a bit complicated, non-w3c standard and undocumented, but I do prefer the css system for doing a lot of things over coding a lot of styling and layout stuff in JavaFX script, especially if it allows you to cut the compile/run steps out of the change, compile, run, test cycle.

Kishore: I think you can do exactly what you want with JavaFX css - your demo code will just work.

Ah, long comment, perhaps I should just start my own blog . . . there is a lot more to cover on this topic ;-)

Great post, many thanks! But: you are showing on...

2010-04-27T13:23:45.083-07:00

Great post, many thanks!

But: you are showing only how to set the predefined -fx properties. In 1.2 I could set in CSS values of the public properties/variables in my custom skin. This doesn't work anymore, at least not in the same way. Hopefully it's only the syntax that changed:) If so, can you advise?

Nice stuff, We need more tutorial like this.

2010-04-27T09:54:35.140-07:00

Nice stuff, We need more tutorial like this.

Sergey: This article is intended as an exploration...

2010-04-27T08:04:06.965-07:00

Sergey: This article is intended as an exploration of the new CSS skinning support in v1.3 (the code in your article is still pre-1.0 by the way). More complex controls are certainly possible, but we have to start somewhere when figuring out what this new system is capable of.

Kishore: This article is admittedly more from the perspective of a control author than an app developer. But what you want to do is certainly possible. You can create your own style sheet with a .button selector and change the -fx-base (background color), the -fx-font, the -fx-opacity, etc. Then all buttons in your scene will pick up the new style.

Goddard: They are private for now. Authors of custom controls do need to start understanding them because this is the way styling will work from now on. When the JavaFX team is satisfied with the API it will go public. You can learn it then, if you prefer. :-)

And I would argue that learning the underlying bits also gives app developers a better understanding of what they can and cannot do in their stylesheets.

David: There are apparently still some issues with the more complex selector statements. For now, you'll have to find a different way to select the menu items in the choice box's popup menu.

Great helper as ever - thanks for your digging :-)...

2010-04-27T04:35:47.136-07:00

Great helper as ever - thanks for your digging :-)

Now - anyone actually tell me what this is from the stylesheet as seems to affect a number of the bits of interest to me and I dont have access:
/* TODO RT-7542 replace this with ".choice-box *.popup-menu *.menu-item" once bug is fixed */

Interesting, indeed. Too bad it's based on pri...

2010-04-27T04:28:10.347-07:00

Interesting, indeed. Too bad it's based on private APIs.

I felt it is little confusing. The relation betwee...

2010-04-27T02:37:55.431-07:00

I felt it is little confusing. The relation between components,
skin -> SkinAdapter -> DemoControlRegionSkin -> etc etc

It reminds me the days when I was developing SWING LookAndFeel, all those complex API for minor change's.

With JavaFX 1.3 I expected a easy and (understandable way) of specifying CSS styles to components something like in Adobe Flex.

something like

Button {style:"myCSS"}

OR

MyButton extends Button {
style:"myCSS"
}

and use it

scene: Scene {
content: [ MyButton {} ] }

May be I need to read it again to understand.

Why those components so simple? Look old article a...

2010-04-27T02:03:57.646-07:00

Why those components so simple? Look old article about user defined datepicker component:

http://java.dzone.com/tips/javafx-component-creation