Coloring similar UI components

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

Coloring similar UI components

ajaybhat
Hi,

Suppose I have a set of different panes (like Table Pane, Label etc) in different tabs. Would it be possible to color all the panes of same type across the different tabs using the method as shown in Pivot tutorial [1]

function onColorChange() {
    var color = colorChooser.selectedColor;
    sampleBorder.styles.put("backgroundColor", color);
}

[1] http://pivot.apache.org/tutorials/color-choosers.html

--
Thanks and regards,
Ajay Bhat
Reply | Threaded
Open this post in threaded view
|

RE: Coloring similar UI components

Roger Whitcomb-2

No problem.  But, you would have to write a little loop (possibly a recursive method) to navigate through all the children of the TabPane and set the style.  Here is some sample code I wrote for doing a similar thing (only with a new font):

                /**

                * Recursively set the font on all necessary subcomponents

                * of the given component (which initially should be the

                * {@link #resultsPane}.  Traverse the hierarchy appropriately.

                */

                private void setOutputFont(Component component) {

                    if (component instanceof TabPane) {

                                TabPane tabPane = (TabPane)component;

                                for (Component tab : tabPane.getTabs()) {

                                    setOutputFont(tab);

                                }

                    }

                    else if (component instanceof ScrollPane) {

                                ScrollPane scrollPane = (ScrollPane)component;

                                setOutputFont(scrollPane.getView());

                                if (scrollPane.getColumnHeader() != null)

                                    setOutputFont(scrollPane.getColumnHeader());

                    }

                    else if (component instanceof Border) {

                                setOutputFont(((Border)component).getContent());

                    }

                    else if (component instanceof Container) {

                                for (Component child : (Container)component) {

                                    setOutputFont(child);

                                }

                    }

                    else if (component instanceof TableView ||

                                     component instanceof TableViewHeader ||

                                     component instanceof ListView) {

                                component.getStyles().put("font", outputFont);

                    }

                }

 

~Roger

 

From: Ajay Bhat [mailto:[hidden email]]
Sent: Tuesday, August 27, 2013 10:21 AM
To: [hidden email]
Subject: Coloring similar UI components

 

Hi,

 

Suppose I have a set of different panes (like Table Pane, Label etc) in different tabs. Would it be possible to color all the panes of same type across the different tabs using the method as shown in Pivot tutorial [1]

 

function onColorChange() {

    var color = colorChooser.selectedColor;

    sampleBorder.styles.put("backgroundColor", color);

}

 

[1] http://pivot.apache.org/tutorials/color-choosers.html

 

--

Thanks and regards,

Ajay Bhat

Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
Can this be done for dialog boxes and buttons as well?


On Tue, Aug 27, 2013 at 11:11 PM, Roger L. Whitcomb <[hidden email]> wrote:

No problem.  But, you would have to write a little loop (possibly a recursive method) to navigate through all the children of the TabPane and set the style.  Here is some sample code I wrote for doing a similar thing (only with a new font):

                /**

                * Recursively set the font on all necessary subcomponents

                * of the given component (which initially should be the

                * {@link #resultsPane}.  Traverse the hierarchy appropriately.

                */

                private void setOutputFont(Component component) {

                    if (component instanceof TabPane) {

                                TabPane tabPane = (TabPane)component;

                                for (Component tab : tabPane.getTabs()) {

                                    setOutputFont(tab);

                                }

                    }

                    else if (component instanceof ScrollPane) {

                                ScrollPane scrollPane = (ScrollPane)component;

                                setOutputFont(scrollPane.getView());

                                if (scrollPane.getColumnHeader() != null)

                                    setOutputFont(scrollPane.getColumnHeader());

                    }

                    else if (component instanceof Border) {

                                setOutputFont(((Border)component).getContent());

                    }

                    else if (component instanceof Container) {

                                for (Component child : (Container)component) {

                                    setOutputFont(child);

                                }

                    }

                    else if (component instanceof TableView ||

                                     component instanceof TableViewHeader ||

                                     component instanceof ListView) {

                                component.getStyles().put("font", outputFont);

                    }

                }

 

~Roger

 

From: Ajay Bhat [mailto:[hidden email]]
Sent: Tuesday, August 27, 2013 10:21 AM
To: [hidden email]
Subject: Coloring similar UI components

 

Hi,

 

Suppose I have a set of different panes (like Table Pane, Label etc) in different tabs. Would it be possible to color all the panes of same type across the different tabs using the method as shown in Pivot tutorial [1]

 

function onColorChange() {

    var color = colorChooser.selectedColor;

    sampleBorder.styles.put("backgroundColor", color);

}

 

[1] http://pivot.apache.org/tutorials/color-choosers.html

 

--

Thanks and regards,

Ajay Bhat




--
Thanks and regards,
Ajay Bhat
Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

Roger and Beth Whitcomb
Yes.  The point is to recursively traverse whatever hierarchy of components you have, starting from the top-most one and going down through all the containers (using the appropriate children) and then setting the style (be it color, font, etc.) on the "leaf" or individual components.

A dialog box wouldn't be a child of anything else, so you would have to start with that separately.  But, it is just a subclass of Window/Frame so you can start with it and navigate down through its children. 

This code was just an example -- your mileage may vary....

HTH,
~Roger

On 8/27/13 6:23 PM, Ajay Bhat wrote:
Can this be done for dialog boxes and buttons as well?


On Tue, Aug 27, 2013 at 11:11 PM, Roger L. Whitcomb <[hidden email]> wrote:

No problem.  But, you would have to write a little loop (possibly a recursive method) to navigate through all the children of the TabPane and set the style.  Here is some sample code I wrote for doing a similar thing (only with a new font):

                /**

                * Recursively set the font on all necessary subcomponents

                * of the given component (which initially should be the

                * {@link #resultsPane}.  Traverse the hierarchy appropriately.

                */

                private void setOutputFont(Component component) {

                    if (component instanceof TabPane) {

                                TabPane tabPane = (TabPane)component;

                                for (Component tab : tabPane.getTabs()) {

                                    setOutputFont(tab);

                                }

                    }

                    else if (component instanceof ScrollPane) {

                                ScrollPane scrollPane = (ScrollPane)component;

                                setOutputFont(scrollPane.getView());

                                if (scrollPane.getColumnHeader() != null)

                                    setOutputFont(scrollPane.getColumnHeader());

                    }

                    else if (component instanceof Border) {

                                setOutputFont(((Border)component).getContent());

                    }

                    else if (component instanceof Container) {

                                for (Component child : (Container)component) {

                                    setOutputFont(child);

                                }

                    }

                    else if (component instanceof TableView ||

                                     component instanceof TableViewHeader ||

                                     component instanceof ListView) {

                                component.getStyles().put("font", outputFont);

                    }

                }

 

~Roger

 

From: Ajay Bhat [mailto:[hidden email]]
Sent: Tuesday, August 27, 2013 10:21 AM
To: [hidden email]
Subject: Coloring similar UI components

 

Hi,

 

Suppose I have a set of different panes (like Table Pane, Label etc) in different tabs. Would it be possible to color all the panes of same type across the different tabs using the method as shown in Pivot tutorial [1]

 

function onColorChange() {

    var color = colorChooser.selectedColor;

    sampleBorder.styles.put("backgroundColor", color);

}

 

[1] http://pivot.apache.org/tutorials/color-choosers.html

 

--

Thanks and regards,

Ajay Bhat




--
Thanks and regards,
Ajay Bhat

Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
Great, thanks for the help.

There's a few more doubts I have. Can I color all the text across different Buttons, TextAreas, Dialogs, Labels, disabled components etc and <only> the text to different color, while keeping other (prev mentioned) changes to color intact using this method?

What about text cursor in the text areas?
Reply | Threaded
Open this post in threaded view
|

RE: Coloring similar UI components

Roger Whitcomb-2

Anything that can be set via a style (using “getStyles().put(“xxx”, blah)”) can be done this way.  Labels have “color”, “backgroundColor” and “disabledColor”, Buttons have “color”, “borderColor”, “backgroundColor”, “disabledColor”, “disabledBorderColor”, and “disabledBackgroundColor”.  TextArea has “color”, “inactiveColor”, etc.  You can see all these in the Component Explorer demo (http://pivot.apache.org/demos/component-explorer.html), by clicking on the Styles tab at the upper right for each component.

 

Dialogs themselves are windows that are containers for other components or containers.  But, they do have a background color style that can be set this same way.  None of these color settings affect any other (that I know of), so yes, you can set the foreground individually and not change the background (for instance).  You can play around with this using the Component Explorer demo program.

 

HTH,

~Roger

 

From: Ajay Bhat [mailto:[hidden email]]
Sent: Wednesday, August 28, 2013 11:17 AM
To: [hidden email]
Subject: Re: Coloring similar UI components

 

Great, thanks for the help.

 

There's a few more doubts I have. Can I color all the text across different Buttons, TextAreas, Dialogs, Labels, disabled components etc and <only> the text to different color, while keeping other (prev mentioned) changes to color intact using this method?

 

What about text cursor in the text areas?

Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
Just a quick question. Is there any way I could do to make the following code defining various actions somewhat cleaner and more compact?

   Action.getNamedActions().put("something", new Action() {
         public void perform(Component source) {
System.out.println("Default");
                 //more stuff
}
});
       //defined many more actions in similar format for options in the menu



Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

Sandro Martini
Hi,
probably in future we should be able to simplify this with Java 8 and
Lambda Expressions (
http://docs.oracle.com/javase/tutorial/java/javaOO/lambdaexpressions.html
), or maybe today using something like Scala Functions ...

For Pivot 2.1 I'm thinking to add some utility classes to simulate
Scala-like Functions (for simple cases) in Java, I hope to be able
soon to add something ... or maybe someone of us using Pivot from
Scala could already use this feature (but I didn't tried up to now).
This is the related issue:
https://issues.apache.org/jira/browse/PIVOT-799


For comments, suggestions, etc tell to us.

Bye,
Sandro


2013/8/29 Ajay Bhat <[hidden email]>:

> Just a quick question. Is there any way I could do to make the following
> code defining various actions somewhat cleaner and more compact?
>
>    Action.getNamedActions().put("something", new Action() {
>          public void perform(Component source) {
> System.out.println("Default");
>                  //more stuff
> }
> });
>        //defined many more actions in similar format for options in the menu
>
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
In reply to this post by ajaybhat
On Tue, Aug 27, 2013 at 10:51 PM, Ajay Bhat <[hidden email]> wrote:
Hi,

function onColorChange() {
    var color = colorChooser.selectedColor;
    sampleBorder.styles.put("backgroundColor", color);
}

The above code is for Javascript. Is there a way I can do it in Java code? I tried using setAttributes(T key, Object value) by using

Component initComp = Window.getActiveWindow();
System.out.println(initComp.getName());
Integer keyValue;
if (initComp instanceof Window) {
initComp.setAttribute("backgroundColor", toHex());
System.out.println("Window painted");
}

But its not working.

--
Thanks and regards,
Ajay Bhat
Reply | Threaded
Open this post in threaded view
|

RE: Coloring similar UI components

Roger Whitcomb-2

This is a “style” (not an “attribute”).  So, the corresponding Java code would be:

 

Color color = colorChooser.getSelectedColor();

initComp.getStyles().put(“backgroundColor”, color);

 

~Roger

 

From: Ajay Bhat [mailto:[hidden email]]
Sent: Thursday, August 29, 2013 10:10 AM
To: [hidden email]
Subject: Re: Coloring similar UI components

 

On Tue, Aug 27, 2013 at 10:51 PM, Ajay Bhat <[hidden email]> wrote:

Hi,

 

function onColorChange() {

    var color = colorChooser.selectedColor;

    sampleBorder.styles.put("backgroundColor", color);

}

 

The above code is for Javascript. Is there a way I can do it in Java code? I tried using setAttributes(T key, Object value) by using

 

Component initComp = Window.getActiveWindow();

System.out.println(initComp.getName());

Integer keyValue;

if (initComp instanceof Window) {

    initComp.setAttribute("backgroundColor", toHex());

     System.out.println("Window painted");

}

 

But its not working.

 

--

Thanks and regards,

Ajay Bhat

Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
Okay, is it possible to pass arguments through the BXML script itself? Like

<Menu.Item buttonData="Default" ButtonPressListener.buttonPressed="myClass.colorChange(colors)">
<buttonData />
</Menu.Item>
//defined colorChange(int[]) to accept array of hex values.
Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

Sandro Martini
Hi,
in the JavascriptConsoleTest (under tests subproject) we put different
ways to interact between Java code and JavaScript code (interpreted by
the JVM inside bxml files) ... you should find something useful for
your case:

package org.apache.pivot.tests
JavascriptConsoleTest.java , the main class of the test
and similar files are javascript_console_test.*, in the same folder.

Bye,
Sandro


2013/8/29 Ajay Bhat <[hidden email]>:
> Okay, is it possible to pass arguments through the BXML script itself? Like
>
> <Menu.Item buttonData="Default"
> ButtonPressListener.buttonPressed="myClass.colorChange(colors)">
> <buttonData />
> </Menu.Item>
> //defined colorChange(int[]) to accept array of hex values.
Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
Thanks for the help.



--
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Coloring-similar-UI-components-tp4022706p4022728.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|

Re: Coloring similar UI components

ajaybhat
In reply to this post by Sandro Martini
Thanks for the help.