You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by GregBrannon <gr...@gmail.com> on 2012/08/19 20:25:26 UTC

Determining Pivot component attributes and styles

Sorry to be the slow guy in the group, but I find the bxml document approach
to UI definition difficult.  I'm much more confident with it today than I
was a few days ago when I first picked up Pivot, but I'm still unsure how to
know what attributes and styles are available for specific components.  The
FAQ says:

". . . So, you can simply refer to the Javadoc for the component to identify
the supported attributes. . . "

I then go to the API page for PushButton, and I see the buttonData default
property but no mention of 'x', 'y', 'width', 'height', and the other
who-knows-what attributes that can be used to define this component.

What am I doing wrong?  I want to like this GUI framework, and I do so far,
but I'm still struggling a bit with the actual implementation.

Thanks for your help and your great work!



--
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Determining-Pivot-component-attributes-and-styles-tp4022058.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.

RE: Determining Pivot component attributes and styles

Posted by "Roger L. Whitcomb" <Ro...@actian.com>.
Hi Greg,

                Sandro has done some reorganization of the FAQ page to
point the Component Explorer, so maybe this will help a little .  But,
let me explain a bit more about some of your questions.

                Here are a couple of examples of both attributes and
styles so you can see the potential uses, and I guarantee that you will
use both at some point.

 

<TextArea bxml:id="consoleLogDisplay" enabled="true" editable="false"
styles="{wrapText:false, font:'Monospaced 12'}" />

 

So, the attributes here are:  enabled and editable

The styles are (obviously): wrapText and font

 

Both can be set via BXML.

 

So, when the BXMLSerializer reads this piece of markup if it is an
attribute (say XXX), then it will look for the corresponding "setXXX"
method in the component with a single parameter corresponding to the
type of the data.  So, in this case both values are Boolean values, so
it will be looking for the "setEnabled(boolean)" and
"setEditable(boolean)" methods in TextArea.  The former happens to be
defined on Component and inherited by TextArea, while the second is
defined for TextArea itself.  This markup is equivalent to this piece of
Java code, which you could write and execute yourself instead of using
BXML:

TextArea textArea = new TextArea();

textArea.setEnabled(true);

textArea.setEditable(false);

 

Now, styles are similar but more complicated.  "styles" is another
attribute of a Component, so the styles are set via a call to
"setStyles(String)" on the component.  What the component will do is get
the current skin attached to the component and decompose the style
string according to JSON rules, and call corresponding "setXXX" methods
on the installed skin with the parsed values.  So, here is what this
markup is equivalent to:

textArea.setStyles("{wrapText:false, font:'Monospaced 12'}");

which in turn calls:

textArea.getSkin().setWrapText(false);

textArea.getSkin().setFont("Monospaced 12");

 

Now, skins are a whole thing in themselves.  Pivot currently has only
one skin defined and implemented:  the "Terra" skin.  This skin handles
all the painting and keyboard/mouse interactions on behalf of its
attached component.  So, the skin pieces can be fairly complicated.
That's one reason there is only one skin implemented so far.  And the
Terra skin has a lot of customization available, so there is not that
much need for another at the moment.

 

There is no reason you could not subclass the existing skin classes and
add styles (and the associated processing) for your own use.

 

So, since there is just one existing skin, it is easy to find the
"setXXX" methods that correspond to the styles, just look in the
TerraXXXSkin class that corresponds to the XXX component (in this case
TerraTextAreaSkin for TextArea).  But note that many methods are set in
superclasses (also in this case, "setWrapText" is implemented in
TextAreaSkin, and "setFont" is also implemented there, although there is
a "decodeFont" method in ComponentSkin which would also be called during
this process).

 

HTH with your understanding.

 

~Roger Whitcomb

 

From: Greg Brannon [mailto:greg.d.brannon@gmail.com] 
Sent: Sunday, August 19, 2012 2:54 PM
To: user@pivot.apache.org
Subject: Re: Determining Pivot component attributes and styles

 

Roger (representing many),

As I said, it's only been a few days, but in that short, often
frustrating time, the good fortune to find the Component Explorer was
not mine.  After your response, a simple Google search led me here:

http://pivot.apache.org/demos/component-explorer.html

I see its potential, though somewhat indirect, to answer many of my
questions about attributes and styles, and I thank you for taking the
time to respond to my plea for help and for the encouragement.  I'm
often blind to the obvious, but the value and location of the Component
Explorer should be more prominently displayed for explorers wandering
off the beaten path like me.

I understand the connection to the bean methods, but I don't yet know
how to exploit that and wonder why I'd want to, hoping I'll never have
to.  I'm completely mystified by skins and how I'll use them to my
advantage, but I think I understand their importance to tailoring the
Pivot experience, and I hope I figure them out someday.

Back to the tutorials with a new and improved perspective . . .

Greg

On 08/19/2012 05:25 PM, Roger Whitcomb wrote:

	Hi Greg, 
	   First of all, thanks for using Pivot!  And I sympathize with
you -- I am always on the Component Explorer looking at things. 
	   Anyway, the short answer to your question is:  the component
properties correspond to the "bean" methods in the components
themselves. These would be the "getXXX" and "setXXX" methods of (for
instance) PushButton, while the style attributes are the "bean" methods
for the skin, which (in my example) would be TerraPushButtonSkin (and
all their superclasses).  Some of the multi-value things are a bit
tricky, but most have several ways to set them. Playing around with the
ComponentExplorer demo is one of the best ways to start, as are all the
various demo and tutorial applications on the website (and of course the
Javadoc). 
	   And you can always ask here if you get stumped -- we're
fairly responsive because we've been where you are ;) 
	
	HTH, 
	~Roger Whitcomb 
	
	Sent from my iPhone 
	
	On Aug 19, 2012, at 11:25 AM, GregBrannon
<gr...@gmail.com> <ma...@gmail.com>  wrote: 
	
	
	

	Sorry to be the slow guy in the group, but I find the bxml
document approach 
	to UI definition difficult.  I'm much more confident with it
today than I 
	was a few days ago when I first picked up Pivot, but I'm still
unsure how to 
	know what attributes and styles are available for specific
components.  The 
	FAQ says: 
	
	". . . So, you can simply refer to the Javadoc for the component
to identify 
	the supported attributes. . . " 
	
	I then go to the API page for PushButton, and I see the
buttonData default 
	property but no mention of 'x', 'y', 'width', 'height', and the
other 
	who-knows-what attributes that can be used to define this
component. 
	
	What am I doing wrong?  I want to like this GUI framework, and I
do so far, 
	but I'm still struggling a bit with the actual implementation. 
	
	Thanks for your help and your great work! 
	
	
	
	-- 
	View this message in context:
http://apache-pivot-users.399431.n3.nabble.com/Determining-Pivot-compone
nt-attributes-and-styles-tp4022058.html
	Sent from the Apache Pivot - Users mailing list archive at
Nabble.com. 

 


unsubscribe

Posted by Jeff Pogodzinski <JP...@iilogistics.com>.
unsubscribe

-----Original Message-----
From: Sandro Martini [mailto:sandro.martini@gmail.com] 
Sent: Monday, August 20, 2012 7:58 AM
To: user@pivot.apache.org
Subject: Re: Determining Pivot component attributes and styles

Hi, just updated (and pushed live) the FAQ, a little updated on this, I hope it's enough ...

Bye
Sandro

Re: Determining Pivot component attributes and styles

Posted by Sandro Martini <sa...@gmail.com>.
Hi, just updated (and pushed live) the FAQ, a little updated on this,
I hope it's enough ...

Bye
Sandro

Re: Determining Pivot component attributes and styles

Posted by Sandro Martini <sa...@gmail.com>.
Hi all,
I understand well this, and maybe I could update the FAQ page to point
to the Component Explorer for a live view, and to Component and
related skin, depending on the kind of attribute ... just to have e
better general idea.

Bye,
Sandro

Re: Determining Pivot component attributes and styles

Posted by Greg Brannon <gr...@gmail.com>.
Roger (representing many),

As I said, it's only been a few days, but in that short, often 
frustrating time, the good fortune to find the Component Explorer was 
not mine.  After your response, a simple Google search led me here:

http://pivot.apache.org/demos/component-explorer.html

I see its potential, though somewhat indirect, to answer many of my 
questions about attributes and styles, and I thank you for taking the 
time to respond to my plea for help and for the encouragement.  I'm 
often blind to the obvious, but the value and location of the Component 
Explorer should be more prominently displayed for explorers wandering 
off the beaten path like me.

I understand the connection to the bean methods, but I don't yet know 
how to exploit that and wonder why I'd want to, hoping I'll never have 
to.  I'm completely mystified by skins and how I'll use them to my 
advantage, but I think I understand their importance to tailoring the 
Pivot experience, and I hope I figure them out someday.

Back to the tutorials with a new and improved perspective . . .

Greg

On 08/19/2012 05:25 PM, Roger Whitcomb wrote:
> Hi Greg,
>    First of all, thanks for using Pivot!  And I sympathize with you -- 
> I am always on the Component Explorer looking at things.
>    Anyway, the short answer to your question is:  the component 
> properties correspond to the "bean" methods in the components 
> themselves. These would be the "getXXX" and "setXXX" methods of (for 
> instance) PushButton, while the style attributes are the "bean" 
> methods for the skin, which (in my example) would be 
> TerraPushButtonSkin (and all their superclasses).  Some of the 
> multi-value things are a bit tricky, but most have several ways to set 
> them. Playing around with the ComponentExplorer demo is one of the 
> best ways to start, as are all the various demo and tutorial 
> applications on the website (and of course the Javadoc).
>    And you can always ask here if you get stumped -- we're fairly 
> responsive because we've been where you are ;)
>
> HTH,
> ~Roger Whitcomb
>
> Sent from my iPhone
>
> On Aug 19, 2012, at 11:25 AM, GregBrannon <gr...@gmail.com> 
> wrote:
>
>> Sorry to be the slow guy in the group, but I find the bxml document 
>> approach
>> to UI definition difficult.  I'm much more confident with it today 
>> than I
>> was a few days ago when I first picked up Pivot, but I'm still unsure 
>> how to
>> know what attributes and styles are available for specific 
>> components.  The
>> FAQ says:
>>
>> ". . . So, you can simply refer to the Javadoc for the component to 
>> identify
>> the supported attributes. . . "
>>
>> I then go to the API page for PushButton, and I see the buttonData 
>> default
>> property but no mention of 'x', 'y', 'width', 'height', and the other
>> who-knows-what attributes that can be used to define this component.
>>
>> What am I doing wrong?  I want to like this GUI framework, and I do 
>> so far,
>> but I'm still struggling a bit with the actual implementation.
>>
>> Thanks for your help and your great work!
>>
>>
>>
>> -- 
>> View this message in context: 
>> http://apache-pivot-users.399431.n3.nabble.com/Determining-Pivot-component-attributes-and-styles-tp4022058.html
>> Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
>>


Re: Determining Pivot component attributes and styles

Posted by Roger Whitcomb <Ro...@rbwhitcomb.com>.
Hi Greg,
    First of all, thanks for using Pivot!  And I sympathize with you  
-- I am always on the Component Explorer looking at things.
    Anyway, the short answer to your question is:  the component  
properties correspond to the "bean" methods in the components  
themselves. These would be the "getXXX" and "setXXX" methods of (for  
instance) PushButton, while the style attributes are the "bean"  
methods for the skin, which (in my example) would be  
TerraPushButtonSkin (and all their superclasses).  Some of the multi- 
value things are a bit tricky, but most have several ways to set them.  
Playing around with the ComponentExplorer demo is one of the best ways  
to start, as are all the various demo and tutorial applications on the  
website (and of course the Javadoc).
    And you can always ask here if you get stumped -- we're fairly  
responsive because we've been where you are ;)

HTH,
~Roger Whitcomb

Sent from my iPhone

On Aug 19, 2012, at 11:25 AM, GregBrannon <gr...@gmail.com>  
wrote:

> Sorry to be the slow guy in the group, but I find the bxml document  
> approach
> to UI definition difficult.  I'm much more confident with it today  
> than I
> was a few days ago when I first picked up Pivot, but I'm still  
> unsure how to
> know what attributes and styles are available for specific  
> components.  The
> FAQ says:
>
> ". . . So, you can simply refer to the Javadoc for the component to  
> identify
> the supported attributes. . . "
>
> I then go to the API page for PushButton, and I see the buttonData  
> default
> property but no mention of 'x', 'y', 'width', 'height', and the other
> who-knows-what attributes that can be used to define this component.
>
> What am I doing wrong?  I want to like this GUI framework, and I do  
> so far,
> but I'm still struggling a bit with the actual implementation.
>
> Thanks for your help and your great work!
>
>
>
> --
> View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Determining-Pivot-component-attributes-and-styles-tp4022058.html
> Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
>