You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by Gerrick Bivins <gb...@objectreservoir.com> on 2010/10/19 16:17:39 UTC

Noobie question about data binding...

Hello all,
I'm coming from a dev background of swing then a flex project and now we are
back on a java project.
After my experiences with flex/actionscript I've been looking for a more
modern alternative to swing so
that lead me to pivot.
Right now I'm struggling with understanding data binding in pivot (I'm using
trunk of 2.0).
In flex/actionscript, just about any thing (components, data) were
"bindable". What that allowed was the ability to
populate a bindable structure (arraylist for instance)  and then refer to
that arraylist as the "dataprovider" for any of
the components. Changes to the arraylist are automatically reflected in any
components that were bound to it.
That's the general idea but it's a pretty vague description/example. Here is
an example from the docs that shows an arraylist as a dataprovider to a
table (datagrid):
Data binding in a flex
datagrid<http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf66ce9-7ff2.html#WS2db454920e96a9e51e63e3d11c0bf66ce9-7fee>

This paradigm was one of the great things about flex/actionscript and I was
hoping pivot had some similar mechanisms in place but
I can't find a concrete example of it. Is there an analogous "databinding"
concept in pivot?

Thanks for any guidance here.
Gerrick

Re: Noobie question about data binding...

Posted by Greg Brown <gk...@mac.com>.
Glad to hear that you got it working.  :-)

On Oct 21, 2010, at 3:40 PM, Gerrick Bivins wrote:

> Hi Greg,
> I got this to work. The main issue was I wasn't setting things up in the bxml properly. Here is what I ended up doing:
> 1) define the list in bxml (as you suggested):
>       <bxml:define xmlns:collections="org.apache.pivot.collections">
>          <collections:ArrayList bxml:id="tableDataInList"/>
>      </bxml:define>
> 2) Then in my java code, I have:
>    class SomeWindowWithTable extends Window implements Bindable
>    {
>       ...
>       @BXML private List tableDataInList;
>       ...
>    }
> 
> 3) Any time I want to modify the view in the table:
>     in java:
>        this.tableDataInList.clear(); //clears the table
>     in script:
>        
> <PushButton buttonData="PushButton">
>             <buttonPressListeners>
>             function buttonPressed(button) {
>                 tableDataInList.clear();
>             }
>             </buttonPressListeners>
> 
>         </PushButton>
> I was confused about what was needed to be defined and where.
> 
> Works like a champ now!
> Thanks for the patience!
> Gerrick
> On Thu, Oct 21, 2010 at 11:59 AM, Greg Brown <gk...@mac.com> wrote:
> Can you try running the attached example and let me know what happens when you click the button? Easiest way to launch it is via the Eclipse plugin, which you can get here:
> 
> http://cwiki.apache.org/confluence/download/attachments/108483/org.apache.pivot.eclipse_2.0.0.jar
> 
> If you don't use Eclipse you can launch it via ScriptApplication directly. Let me know if you need any help with that.
> 
> G
> 
> 
> 
> On Oct 21, 2010, at 11:01 AM, Gerrick Bivins wrote:
> 
>> Hi Greg,lello,
>> 
>> I'm not seeing this behavior. What I'm seeing is that the list needs to be populated before calling the namespace.put() in the serializer and then
>> it doesn't update/reflect any changes to the list after that.
>> Gerrick
>> 
>> On Thu, Oct 21, 2010 at 6:23 AM, Greg Brown <gk...@mac.com> wrote:
>> > In your example what happens when you change the ArrayList tableDataInList?
>> > is the change automatically fired in the table? or do I need a listener?
>> 
>> Yes, ArrayList fires change events when its content is modified, so the table will automatically update in response.
>> 
>> 
> 
> 
> 


Re: Noobie question about data binding...

Posted by Gerrick Bivins <gb...@objectreservoir.com>.
Hi Greg,
I got this to work. The main issue was I wasn't setting things up in the
bxml properly. Here is what I ended up doing:
1) define the list in bxml (as you suggested):
      <bxml:define xmlns:collections="org.apache.pivot.collections">
         <collections:ArrayList bxml:id="tableDataInList"/>
     </bxml:define>
2) Then in my java code, I have:
   class SomeWindowWithTable extends Window implements Bindable
   {
      ...
      @BXML private List tableDataInList;
      ...
   }

3) Any time I want to modify the view in the table:
    in java:
       this.tableDataInList.clear(); //clears the table
    in script:

<PushButton buttonData="PushButton">
            <buttonPressListeners>
            function buttonPressed(button) {
                tableDataInList.clear();
            }
            </buttonPressListeners>

        </PushButton>
I was confused about what was needed to be defined and where.

Works like a champ now!
Thanks for the patience!
Gerrick
On Thu, Oct 21, 2010 at 11:59 AM, Greg Brown <gk...@mac.com> wrote:

> Can you try running the attached example and let me know what happens when
> you click the button? Easiest way to launch it is via the Eclipse plugin,
> which you can get here:
>
>
> http://cwiki.apache.org/confluence/download/attachments/108483/org.apache.pivot.eclipse_2.0.0.jar
>
> If you don't use Eclipse you can launch it via ScriptApplication directly.
> Let me know if you need any help with that.
>
> G
>
>
>
> On Oct 21, 2010, at 11:01 AM, Gerrick Bivins wrote:
>
> Hi Greg,lello,
>
> I'm not seeing this behavior. What I'm seeing is that the list needs to be
> populated before calling the namespace.put() in the serializer and then
> it doesn't update/reflect any changes to the list after that.
> Gerrick
>
> On Thu, Oct 21, 2010 at 6:23 AM, Greg Brown <gk...@mac.com> wrote:
>
>> > In your example what happens when you change the ArrayList
>> tableDataInList?
>> > is the change automatically fired in the table? or do I need a listener?
>>
>> Yes, ArrayList fires change events when its content is modified, so the
>> table will automatically update in response.
>>
>>
>
>
>

Re: Noobie question about data binding...

Posted by Greg Brown <gk...@mac.com>.
Can you try running the attached example and let me know what happens when you click the button? Easiest way to launch it is via the Eclipse plugin, which you can get here:

http://cwiki.apache.org/confluence/download/attachments/108483/org.apache.pivot.eclipse_2.0.0.jar

If you don't use Eclipse you can launch it via ScriptApplication directly. Let me know if you need any help with that.

G



On Oct 21, 2010, at 11:01 AM, Gerrick Bivins wrote:

> Hi Greg,lello,
> 
> I'm not seeing this behavior. What I'm seeing is that the list needs to be populated before calling the namespace.put() in the serializer and then
> it doesn't update/reflect any changes to the list after that.
> Gerrick
> 
> On Thu, Oct 21, 2010 at 6:23 AM, Greg Brown <gk...@mac.com> wrote:
> > In your example what happens when you change the ArrayList tableDataInList?
> > is the change automatically fired in the table? or do I need a listener?
> 
> Yes, ArrayList fires change events when its content is modified, so the table will automatically update in response.
> 
> 


Re: Noobie question about data binding...

Posted by Gerrick Bivins <gb...@objectreservoir.com>.
Hi Greg,lello,

I'm not seeing this behavior. What I'm seeing is that the list needs to be
populated before calling the namespace.put() in the serializer and then
it doesn't update/reflect any changes to the list after that.
Gerrick

On Thu, Oct 21, 2010 at 6:23 AM, Greg Brown <gk...@mac.com> wrote:

> > In your example what happens when you change the ArrayList
> tableDataInList?
> > is the change automatically fired in the table? or do I need a listener?
>
> Yes, ArrayList fires change events when its content is modified, so the
> table will automatically update in response.
>
>

Re: Noobie question about data binding...

Posted by Greg Brown <gk...@mac.com>.
> In your example what happens when you change the ArrayList tableDataInList?
> is the change automatically fired in the table? or do I need a listener?

Yes, ArrayList fires change events when its content is modified, so the table will automatically update in response.


Re: Noobie question about data binding...

Posted by Gerrick Bivins <gb...@objectreservoir.com>.
I haven't had a chance to try this out yet. I'll hopefully get to it later
tonite.
Gerrick

On Wed, Oct 20, 2010 at 3:18 PM, lello <rb...@gmail.com> wrote:

>
> May I join the discussion? I was trying to do something similar, but
> without
> success.
>
> In your example what happens when you change the ArrayList tableDataInList?
> is the change automatically fired in the table? or do I need a listener?
>
> --
> View this message in context:
> http://apache-pivot-users.399431.n3.nabble.com/Noobie-question-about-data-binding-tp1732508p1741488.html
> Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
>

Re: Noobie question about data binding...

Posted by lello <rb...@gmail.com>.
May I join the discussion? I was trying to do something similar, but without
success.

In your example what happens when you change the ArrayList tableDataInList?
is the change automatically fired in the table? or do I need a listener?

-- 
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Noobie-question-about-data-binding-tp1732508p1741488.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.

Re: Noobie question about data binding...

Posted by Gerrick Bivins <gb...@objectreservoir.com>.
Ahhhh! I see!
Thanks for the pointer Greg!
Gerrick

On Wed, Oct 20, 2010 at 12:41 PM, Greg Brown <gk...@mac.com> wrote:

> Yes, you can do this in several ways. You can define the list in BXML
> directly, either in a define block or in script:
>
> <bxml:define xmlns:collections="org.apache.pivot.collections">
>     <collections:ArrayList bxml:id="tableDataInList"/>
> </bxml:define>
>
> <bxml:script>
>     importPackage(org.apache.pivot.collections);
>     var tableDataInList = ArrayList();
> </bxml:script>
>
> or you can do it in Java:
>
> ArrayList tableDataInList = new ArrayList();
> bxmlSerializer.getNamespace().put("tableDataInList", tableDataInList);
> bxmlSerializer.readObject(...)
>
> Greg
>
> On Oct 20, 2010, at 9:31 AM, Gerrick Bivins wrote:
>
> Hi Greg,
> Where my confusion comes in is in the syntax, I think,
> What I was expecting to be able to specify the dataprovider something like
> this:
> in BXML:
> <Border>
>             <content>
>                 <ScrollPane horizontalScrollBarPolicy="fill_to_capacity">
>                     <view>
>                         <TableView bxml:id="tableView" tableData="*$**
> tableDataInList*">
>                             <bxml:define>
>
>                             </bxml:define>
>                             <columns>
>                                 <TableView.Column name="label" width="3*"
> headerData="Name"/>
>                                 <TableView.Column name="value" width="1*"
> headerData="Value"/>
>                                 <TableView.Column name="units" width="1*"
> headerData="Units"/>
>                             </columns>
>                         </TableView>
>                     </view>
>                     <columnHeader>
>                         <TableViewHeader tableView="$tableView"/>
>                     </columnHeader>
>                 </ScrollPane>
>             </content>
>         </Border>
>
> And with a definition of *tableDatainList *defined and populated
> somewhere, bxml,java,javascript etc, as a bindable variable.
>
>  Is it possible to define a List somewhere and then bind it as a variable
> that is accessible in bxml?
> Again thanks for the patience here.
> Gerrick
>
>
> On Tue, Oct 19, 2010 at 12:16 PM, Greg Brown <gk...@mac.com> wrote:
>
>> Unfortunately, the term "binding" is very heavily overloaded.  :-)  What
>> you are describing sounds like "data-bound" or "data-driven" controls. Pivot
>> does support this - in fact, the design of this feature was somewhat
>> inspired by Flex. The ListView, TableView, and TreeView components (among
>> others) are all backed by instances of org.apache.pivot.collections.List.
>> Implementations of this interface (such as ArrayList) fire events, which
>> allow them to be used as a data model. You can see some examples in the
>> tutorial:
>>
>> http://pivot.apache.org/tutorials/
>>
>> It currently only covers Pivot 1.5 but most of the concepts are the same
>> in 2.0.
>>
>> Pivot also supports several other forms of binding:
>>
>> - BXML binding, which maps objects declared in markup to Java member
>> variables
>> - Data binding, which uses a load()/store() mechanism to populate user
>> interface elements
>> - Namespace binding, which allows you to declaratively create a
>> relationship between a source property and a target property (also inspired
>> to some extent by Flex)
>>
>> Hope this helps.
>>
>> Greg
>>
>>
>> On Oct 19, 2010, at 10:17 AM, Gerrick Bivins wrote:
>>
>> Hello all,
>> I'm coming from a dev background of swing then a flex project and now we
>> are back on a java project.
>> After my experiences with flex/actionscript I've been looking for a more
>> modern alternative to swing so
>> that lead me to pivot.
>> Right now I'm struggling with understanding data binding in pivot (I'm
>> using trunk of 2.0).
>> In flex/actionscript, just about any thing (components, data) were
>> "bindable". What that allowed was the ability to
>> populate a bindable structure (arraylist for instance)  and then refer to
>> that arraylist as the "dataprovider" for any of
>> the components. Changes to the arraylist are automatically reflected in
>> any components that were bound to it.
>> That's the general idea but it's a pretty vague description/example. Here
>> is an example from the docs that shows an arraylist as a dataprovider to a
>> table (datagrid):
>> Data binding in a flex datagrid<http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf66ce9-7ff2.html#WS2db454920e96a9e51e63e3d11c0bf66ce9-7fee>
>>
>> This paradigm was one of the great things about flex/actionscript and I
>> was hoping pivot had some similar mechanisms in place but
>> I can't find a concrete example of it. Is there an analogous "databinding"
>> concept in pivot?
>>
>> Thanks for any guidance here.
>> Gerrick
>>
>>
>>
>
>

Re: Noobie question about data binding...

Posted by Greg Brown <gk...@mac.com>.
Yes, you can do this in several ways. You can define the list in BXML directly, either in a define block or in script:

<bxml:define xmlns:collections="org.apache.pivot.collections">
    <collections:ArrayList bxml:id="tableDataInList"/>
</bxml:define>

<bxml:script>
    importPackage(org.apache.pivot.collections);
    var tableDataInList = ArrayList();
</bxml:script>

or you can do it in Java:

ArrayList tableDataInList = new ArrayList();
bxmlSerializer.getNamespace().put("tableDataInList", tableDataInList);
bxmlSerializer.readObject(...)

Greg

On Oct 20, 2010, at 9:31 AM, Gerrick Bivins wrote:

> Hi Greg,
> Where my confusion comes in is in the syntax, I think,
> What I was expecting to be able to specify the dataprovider something like this:
> in BXML:
> <Border>
>             <content>
>                 <ScrollPane horizontalScrollBarPolicy="fill_to_capacity">
>                     <view>
>                         <TableView bxml:id="tableView" tableData="$tableDataInList">
>                             <bxml:define>
> 
>                             </bxml:define>
>                             <columns>
>                                 <TableView.Column name="label" width="3*" headerData="Name"/>
>                                 <TableView.Column name="value" width="1*" headerData="Value"/>
>                                 <TableView.Column name="units" width="1*" headerData="Units"/>
>                             </columns>
>                         </TableView>
>                     </view>
>                     <columnHeader>
>                         <TableViewHeader tableView="$tableView"/>
>                     </columnHeader>
>                 </ScrollPane>
>             </content>
>         </Border>
> 
> And with a definition of tableDatainList defined and populated somewhere, bxml,java,javascript etc, as a bindable variable.
> 
>  Is it possible to define a List somewhere and then bind it as a variable that is accessible in bxml?
> Again thanks for the patience here.
> Gerrick
> 
> 
> On Tue, Oct 19, 2010 at 12:16 PM, Greg Brown <gk...@mac.com> wrote:
> Unfortunately, the term "binding" is very heavily overloaded.  :-)  What you are describing sounds like "data-bound" or "data-driven" controls. Pivot does support this - in fact, the design of this feature was somewhat inspired by Flex. The ListView, TableView, and TreeView components (among others) are all backed by instances of org.apache.pivot.collections.List. Implementations of this interface (such as ArrayList) fire events, which allow them to be used as a data model. You can see some examples in the tutorial:
> 
> http://pivot.apache.org/tutorials/
> 
> It currently only covers Pivot 1.5 but most of the concepts are the same in 2.0.
> 
> Pivot also supports several other forms of binding:
> 
> - BXML binding, which maps objects declared in markup to Java member variables
> - Data binding, which uses a load()/store() mechanism to populate user interface elements
> - Namespace binding, which allows you to declaratively create a relationship between a source property and a target property (also inspired to some extent by Flex)
> 
> Hope this helps.
> 
> Greg
> 
> 
> On Oct 19, 2010, at 10:17 AM, Gerrick Bivins wrote:
> 
>> Hello all,
>> I'm coming from a dev background of swing then a flex project and now we are back on a java project. 
>> After my experiences with flex/actionscript I've been looking for a more modern alternative to swing so
>> that lead me to pivot.
>> Right now I'm struggling with understanding data binding in pivot (I'm using trunk of 2.0).
>> In flex/actionscript, just about any thing (components, data) were "bindable". What that allowed was the ability to
>> populate a bindable structure (arraylist for instance)  and then refer to that arraylist as the "dataprovider" for any of 
>> the components. Changes to the arraylist are automatically reflected in any components that were bound to it.
>> That's the general idea but it's a pretty vague description/example. Here is an example from the docs that shows an arraylist as a dataprovider to a table (datagrid):
>> Data binding in a flex datagrid
>> 
>> This paradigm was one of the great things about flex/actionscript and I was hoping pivot had some similar mechanisms in place but
>> I can't find a concrete example of it. Is there an analogous "databinding" concept in pivot?
>> 
>> Thanks for any guidance here.
>> Gerrick
>> 
> 
> 


Re: Noobie question about data binding...

Posted by Gerrick Bivins <gb...@objectreservoir.com>.
Hi Greg,
Where my confusion comes in is in the syntax, I think,
What I was expecting to be able to specify the dataprovider something like
this:
in BXML:
<Border>
            <content>
                <ScrollPane horizontalScrollBarPolicy="fill_to_capacity">
                    <view>
                        <TableView bxml:id="tableView" tableData="*$**
tableDataInList*">
                            <bxml:define>

                            </bxml:define>
                            <columns>
                                <TableView.Column name="label" width="3*"
headerData="Name"/>
                                <TableView.Column name="value" width="1*"
headerData="Value"/>
                                <TableView.Column name="units" width="1*"
headerData="Units"/>
                            </columns>
                        </TableView>
                    </view>
                    <columnHeader>
                        <TableViewHeader tableView="$tableView"/>
                    </columnHeader>
                </ScrollPane>
            </content>
        </Border>

And with a definition of *tableDatainList *defined and populated somewhere,
bxml,java,javascript etc, as a bindable variable.

 Is it possible to define a List somewhere and then bind it as a variable
that is accessible in bxml?
Again thanks for the patience here.
Gerrick


On Tue, Oct 19, 2010 at 12:16 PM, Greg Brown <gk...@mac.com> wrote:

> Unfortunately, the term "binding" is very heavily overloaded.  :-)  What
> you are describing sounds like "data-bound" or "data-driven" controls. Pivot
> does support this - in fact, the design of this feature was somewhat
> inspired by Flex. The ListView, TableView, and TreeView components (among
> others) are all backed by instances of org.apache.pivot.collections.List.
> Implementations of this interface (such as ArrayList) fire events, which
> allow them to be used as a data model. You can see some examples in the
> tutorial:
>
> http://pivot.apache.org/tutorials/
>
> It currently only covers Pivot 1.5 but most of the concepts are the same in
> 2.0.
>
> Pivot also supports several other forms of binding:
>
> - BXML binding, which maps objects declared in markup to Java member
> variables
> - Data binding, which uses a load()/store() mechanism to populate user
> interface elements
> - Namespace binding, which allows you to declaratively create a
> relationship between a source property and a target property (also inspired
> to some extent by Flex)
>
> Hope this helps.
>
> Greg
>
>
> On Oct 19, 2010, at 10:17 AM, Gerrick Bivins wrote:
>
> Hello all,
> I'm coming from a dev background of swing then a flex project and now we
> are back on a java project.
> After my experiences with flex/actionscript I've been looking for a more
> modern alternative to swing so
> that lead me to pivot.
> Right now I'm struggling with understanding data binding in pivot (I'm
> using trunk of 2.0).
> In flex/actionscript, just about any thing (components, data) were
> "bindable". What that allowed was the ability to
> populate a bindable structure (arraylist for instance)  and then refer to
> that arraylist as the "dataprovider" for any of
> the components. Changes to the arraylist are automatically reflected in any
> components that were bound to it.
> That's the general idea but it's a pretty vague description/example. Here
> is an example from the docs that shows an arraylist as a dataprovider to a
> table (datagrid):
> Data binding in a flex datagrid<http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf66ce9-7ff2.html#WS2db454920e96a9e51e63e3d11c0bf66ce9-7fee>
>
> This paradigm was one of the great things about flex/actionscript and I was
> hoping pivot had some similar mechanisms in place but
> I can't find a concrete example of it. Is there an analogous "databinding"
> concept in pivot?
>
> Thanks for any guidance here.
> Gerrick
>
>
>

Re: Noobie question about data binding...

Posted by Greg Brown <gk...@mac.com>.
Unfortunately, the term "binding" is very heavily overloaded.  :-)  What you are describing sounds like "data-bound" or "data-driven" controls. Pivot does support this - in fact, the design of this feature was somewhat inspired by Flex. The ListView, TableView, and TreeView components (among others) are all backed by instances of org.apache.pivot.collections.List. Implementations of this interface (such as ArrayList) fire events, which allow them to be used as a data model. You can see some examples in the tutorial:

http://pivot.apache.org/tutorials/

It currently only covers Pivot 1.5 but most of the concepts are the same in 2.0.

Pivot also supports several other forms of binding:

- BXML binding, which maps objects declared in markup to Java member variables
- Data binding, which uses a load()/store() mechanism to populate user interface elements
- Namespace binding, which allows you to declaratively create a relationship between a source property and a target property (also inspired to some extent by Flex)

Hope this helps.

Greg

On Oct 19, 2010, at 10:17 AM, Gerrick Bivins wrote:

> Hello all,
> I'm coming from a dev background of swing then a flex project and now we are back on a java project. 
> After my experiences with flex/actionscript I've been looking for a more modern alternative to swing so
> that lead me to pivot.
> Right now I'm struggling with understanding data binding in pivot (I'm using trunk of 2.0).
> In flex/actionscript, just about any thing (components, data) were "bindable". What that allowed was the ability to
> populate a bindable structure (arraylist for instance)  and then refer to that arraylist as the "dataprovider" for any of 
> the components. Changes to the arraylist are automatically reflected in any components that were bound to it.
> That's the general idea but it's a pretty vague description/example. Here is an example from the docs that shows an arraylist as a dataprovider to a table (datagrid):
> Data binding in a flex datagrid
> 
> This paradigm was one of the great things about flex/actionscript and I was hoping pivot had some similar mechanisms in place but
> I can't find a concrete example of it. Is there an analogous "databinding" concept in pivot?
> 
> Thanks for any guidance here.
> Gerrick
>