You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by dhwanishah85 <dh...@gmail.com> on 2016/08/12 22:16:53 UTC
[FlexJS] need help in creating reusable tabBar control
Hi,
I am trying to create TabBar component by extending ToggleTextButton in
FlexJS 0.7.0.
Is there any similar kind of component implementation available which i can
refer for this?
Thanks
Dhwani
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Peter Ent <pe...@adobe.com>.
I took a look at the code, assuming you mean that you wanted the tabs on
the top of the screen.
If you look at org/apache/flex/mobile/beads/TabbedViewManagerView - which
is the view bead the TabbedViewManager uses - you'll see
layoutChromeElements function. This is where the tab bar is being placed
at the bottom.
You can make your own extension of this class and override the
layoutChromeElements function and place the tab bar at the top. Then
substitute your view bead either using CSS or MXML:
TabbedViewManager {
IBeadView: ClassReference('path.to.your.view.bead');
}
or
<js:TabbedViewManager properties-here>
<js:beads>
<yours:YourViewBead />
</js:beads>
</js:TabbedViewManager>
Something like that.
‹peter
On 8/16/16, 8:36 PM, "Alex Harui" <ah...@adobe.com> wrote:
>Hi Dhwani,
>
>What do you mean by "move tabs"? The underlying code probably has some
>layout logic. You may need to swap in a different layout.
>
>-Alex
>
>On 8/16/16, 4:22 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>
>>Hi Peter,
>>
>>I am using TabbedViewManager for my example to show tab layout. I am
>>trying
>>to move tabs on top.Nothing is working out. Is it possible to move tabs
>>on
>>top?
>>
>>Thanks
>>Dhwani
>>My Apache Flex community contribution is working on the open source
>>Moonshine-IDE.com for FlexJS.
>>
>>
>>
>>--
>>View this message in context:
>>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-
>>c
>>reating-reusable-tabBar-control-tp54492p54509.html
>>Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
As you have suggested to extend ButtonBar for creating TabLayout, I am doing
the same.
I found an example in DataGrid where ButtonBar has been used. I wonder if
there is any usage of <js:ButtonBar>? I am facing difficulties in showing a
simple ButtonBar in the UI. I must be missing some steps. Is there any other
reference?
here is a simple code which works for me if i want to add a text button in
the UI:
public class TextBtnComponentLayout extends TextButton
{
public function TextBtnComponentLayout()
{
super();
}
}
MXML code:
<layout:TextBtnComponentLayout text="myButton"/>
Is there any such thing for ButtonBar?
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54601.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
Thanks for compliments. I will take permission and do submit in JIRA.
Thanks
Dhwani
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54782.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Thanks Josh and Justin,
It is really confusing. I have created a task where i have uploaded the
example.https://issues.apache.org/jira/browse/FLEX-35132
Please feel free to give your suggestions and feedback.
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p55123.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Justin Mclean <ju...@classsoftware.com>.
HI,
> While I click on create, I am getting only this option - "create service
> desk request”.
Click on Create, but to the left of and not on the drop down arrow in Create. i.e. on the word Create. Clicking on the drop down gives you "create service desk request”.
Thanks,
Justin
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Josh Tynjala <jo...@gmail.com>.
That "Create" button in JIRA has terrible usability! It confuses me every
time too. Click the left side of the button where it says "Create" instead
of the right side that opens the drop-down menu.
- Josh
On Mon, Sep 12, 2016 at 3:35 PM, dhwanishah85 <dh...@gmail.com>
wrote:
> Hi Justin,
>
> While I click on create, I am getting only this option - "create service
> desk request". Inside this page, I didn't find anything relevant where I
> can
> create a new JIRA ticket and submit my code. I can look at existing issues
> and i am allowed to comment on that too.
>
> I have created an account in JIRA and I can browse the URL which you have
> given.
>
> Thanks
> Dhwani
> My Apache Flex community contribution is working on the open source
> Moonshine-IDE.com for FlexJS.
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-need-help-in-
> creating-reusable-tabBar-control-tp54492p55081.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Justin,
While I click on create, I am getting only this option - "create service
desk request". Inside this page, I didn't find anything relevant where I can
create a new JIRA ticket and submit my code. I can look at existing issues
and i am allowed to comment on that too.
I have created an account in JIRA and I can browse the URL which you have
given.
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p55081.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
> Should I create a new Service Desk request?
Try creating an issue here. You'll will need to log in first.
https://issues.apache.org/jira/browse/FLEX
Justin
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
I have been trying to submit my code to Apache JIRA , But not sure on where
i can submit it.
Should I create a new Service Desk request? Can you create a new JIRA issue
for this and I will submit my code under it. Let me know if this works?
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p55079.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
On 9/2/16, 2:58 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex,
>
>While working on this component, we found that we are not able to get
>numElements from the container.
>It always return us "1". I would like you to look at this.
I think that has been fixed in another branch by commit:
9e127bbf5ab90ced088cc487d5948e61f8e3bec0
I guess we should apply that to the release branch. What do others think?
-Alex
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
While working on this component, we found that we are not able to get
numElements from the container.
It always return us "1". I would like you to look at this.
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54776.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
On 9/2/16, 2:54 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex,
>
>Thanks Alex for all your help and suggestions:
>
>With the help of my co-workers, I was able to finish Tab Component. I have
>created it outside FlexJS SDK.
>I would like to share the design of our current Tab component:
Congratulations! If you want to have this component included in future
FlexJS releases, please attach your code to a JIRA issue.
Thanks,
-Alex
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
Thanks Alex for all your help and suggestions:
With the help of my co-workers, I was able to finish Tab Component. I have
created it outside FlexJS SDK.
I would like to share the design of our current Tab component:
Note: Make sure to pass TabBarView's id as viewContainer in TabBar and map
each view's id with TabBar's dataProvider (in this case labelFields)
public var _labelFields:Array = new Array("home", "products" ,"Support",
"ContactUS" );
[Bindable("__NoChangeEvent__")]
public function get labelFields():Array
{
return _labelFields;
}
<js:Container id="maincontainer" width="50%" height="50%">
<layout:TabBar dataProvider="{labelFields}" width="300" height="30"
id="tabbar" viewContainer="{tabbarview}" />
<layout:TabBarView id="tabbarview" width="50%" height="50%" x= "40"
y="40">
<views:HomeView id="home" />
<views:ProductsView id="products" />
<views:SupportView id="Support" />
<views:ContactUSView id="ContactUS" />
</layout:TabBarView>
</js:Container>
In above design TabBar is extending ButtonBar while TabBarView extends
Container.
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54775.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
On 8/30/16, 3:11 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex,
>
>Thanks for your response. So far I am able to extend ButtonBar and Now
>working on showing views based upon button clicks. I have seen
>"Itemclicked"
>event But it is not working. I found "click" event working but is there
>any
>chance that "Itemclicked" event is also working?
itemClicked is dispatched from the renderer. The ButtonBar should
dispatch a "change" event that might be more useful.
-Alex
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
Thanks for your response. So far I am able to extend ButtonBar and Now
working on showing views based upon button clicks. I have seen "Itemclicked"
event But it is not working. I found "click" event working but is there any
chance that "Itemclicked" event is also working?
Thanks
Dhwani
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54709.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
Hi Dhwani,
ViewBase was renamed to be View in 0.7.0. All of the examples should have
been updated to reflect that.
HTH,
-Alex
On 8/25/16, 4:35 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex,
>
>I have got latest Nightly build of FlexJS and gone through the
>DataGridButtonBar and its usage in default.css.
>I have followed this as reference and created TabBar.as in the SDK also
>added its entry in default.css as well HTMLClasses.as.
>For Now I have kept ButtonBarButtonItemRenderer as IItemRenderer.
>
>Latest Nightly build is not recognises <js:ViewBase> and throws an error :
>This tag could not be resolved to an ActionScript class. It will be
>ignored.
>So I have moved my classes to old 0.7.0 SDK where i am not getting any
>such
>errors. I hope this should be a bug in latest build.
>
>Thanks
>Dhwani
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>reating-reusable-tabBar-control-tp54492p54609.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
I have got latest Nightly build of FlexJS and gone through the
DataGridButtonBar and its usage in default.css.
I have followed this as reference and created TabBar.as in the SDK also
added its entry in default.css as well HTMLClasses.as.
For Now I have kept ButtonBarButtonItemRenderer as IItemRenderer.
Latest Nightly build is not recognises <js:ViewBase> and throws an error :
This tag could not be resolved to an ActionScript class. It will be ignored.
So I have moved my classes to old 0.7.0 SDK where i am not getting any such
errors. I hope this should be a bug in latest build.
Thanks
Dhwani
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54609.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
It is in the
frameworks/projects/HTML/src/main/flex/org/apache/flex/html/DataGridButtonB
ar.as.
It should be in the latest nightly builds or in the develop branch of the
flex-asjs repo. I don't think it was in the FlexJS0.6.0 release.
-Alex
On 8/24/16, 10:47 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex,
>
>This sounds good. But I am not able to see DataGridButtonBar anywhere in
>SDK.
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>reating-reusable-tabBar-control-tp54492p54604.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
This sounds good. But I am not able to see DataGridButtonBar anywhere in
SDK.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54604.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
Hi Dhwani,
In MXML, you should be able to declare an array of strings as follows:
data="['home','product','view','support','contact us']"
Regarding a TabBar component, I would expect it to subclass ButtonBar
instead of dynamically creating one as a child. There is a
DataGridButtonBar component that subclasses ButtonBar for DataGrid
columns. I would think you could copy that pattern and how it uses a
particular item renderer in src/main/resources/defaults.css and leverage
that for your TabBar. In theory, if you create a ButtonBarItemRenderer
that looks like a Tab it should pretty much work.
Thanks,
-Alex
On 8/24/16, 6:42 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex,
>
>I am able to create a component which dynamically creates ButtonBar with
>the
>passed ButtonNames.I have took reference for creating ButtonBar from
>DataGrid.
>
>My current Interface looks like this:
><js:beads>
><layout:TabLayoutComponent data="home,product,view,support,contact us"/>
></js:beads>
>
>I am not able to pass Array in this component. What extra measures
>required
>to pass an Array/ArrayList to the component? For now I am splitting the
>values and creating the array inside my component.
>
>Thanks
>Dhwani
>My Apache Flex community contribution is working on the open source
>Moonshine-IDE.com for FlexJS.
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>reating-reusable-tabBar-control-tp54492p54602.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
I am able to create a component which dynamically creates ButtonBar with the
passed ButtonNames.I have took reference for creating ButtonBar from
DataGrid.
My current Interface looks like this:
<js:beads>
<layout:TabLayoutComponent data="home,product,view,support,contact us"/>
</js:beads>
I am not able to pass Array in this component. What extra measures required
to pass an Array/ArrayList to the component? For now I am splitting the
values and creating the array inside my component.
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54602.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex,
Sure I aim to do it.I am on this task from few days and may achieve this in
some time. Thanks for your response.
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54536.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
Hi Dhwani,
If you have time, it would be great if you could package this code into a
reusable component for FlexJS. Peter could probably do it otherwise, but
it might even be a good test to see if you can create a reusable component
like this with Moonshine-IDE.
Thanks,
-Alex
On 8/17/16, 5:09 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Alex , Peter,
>
>Alex I tried few layouts but nothing is helping. As Peter has suggested
>that
>I need to extend the TabbedViewManagerView to override its
>layoutChromeElements.
>
>The TabbedViewManager is in mobile project. I am sorry if i didn't clear
>my
>intension before but i want this to work in FlexJS project other than
>mobile
>one. Is it possible to get this package for other projects? Or Should I go
>to the first option which Alex has suggested.
>
>Dhwani
>My Apache Flex community contribution is working on the open source
>Moonshine-IDE.com for FlexJS.
>
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>reating-reusable-tabBar-control-tp54492p54533.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Alex , Peter,
Alex I tried few layouts but nothing is helping. As Peter has suggested that
I need to extend the TabbedViewManagerView to override its
layoutChromeElements.
The TabbedViewManager is in mobile project. I am sorry if i didn't clear my
intension before but i want this to work in FlexJS project other than mobile
one. Is it possible to get this package for other projects? Or Should I go
to the first option which Alex has suggested.
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54533.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
Hi Dhwani,
What do you mean by "move tabs"? The underlying code probably has some
layout logic. You may need to swap in a different layout.
-Alex
On 8/16/16, 4:22 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi Peter,
>
>I am using TabbedViewManager for my example to show tab layout. I am
>trying
>to move tabs on top.Nothing is working out. Is it possible to move tabs on
>top?
>
>Thanks
>Dhwani
>My Apache Flex community contribution is working on the open source
>Moonshine-IDE.com for FlexJS.
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>reating-reusable-tabBar-control-tp54492p54509.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Hi Peter,
I am using TabbedViewManager for my example to show tab layout. I am trying
to move tabs on top.Nothing is working out. Is it possible to move tabs on
top?
Thanks
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54509.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by dhwanishah85 <dh...@gmail.com>.
Thanks Alex For your suggestion. For Now I am looking for MobileTrader source
code and its solution for Tabbed View is most similar to what I was looking
for.
Thanks Peter for the help.
Dhwani
My Apache Flex community contribution is working on the open source
Moonshine-IDE.com for FlexJS.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-creating-reusable-tabBar-control-tp54492p54507.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Peter Ent <pe...@adobe.com>.
Take a look at the MobileTrader example in the FkexJS project. There's a tab bar component it uses.
Peter
> On Aug 13, 2016, at 12:49 AM, Alex Harui <ah...@adobe.com> wrote:
>
> Hi Dhwani,
>
> Did you try extending ButtonBar?
>
> Thanks,
> -Alex
>
>> On 8/12/16, 3:16 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>>
>> Hi,
>>
>> I am trying to create TabBar component by extending ToggleTextButton in
>> FlexJS 0.7.0.
>> Is there any similar kind of component implementation available which i
>> can
>> refer for this?
>>
>> Thanks
>> Dhwani
>>
>>
>>
>> --
>> View this message in context:
>> http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>> reating-reusable-tabBar-control-tp54492.html
>> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: [FlexJS] need help in creating reusable tabBar control
Posted by Alex Harui <ah...@adobe.com>.
Hi Dhwani,
Did you try extending ButtonBar?
Thanks,
-Alex
On 8/12/16, 3:16 PM, "dhwanishah85" <dh...@gmail.com> wrote:
>Hi,
>
>I am trying to create TabBar component by extending ToggleTextButton in
>FlexJS 0.7.0.
>Is there any similar kind of component implementation available which i
>can
>refer for this?
>
>Thanks
>Dhwani
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.n4.nabble.com/FlexJS-need-help-in-c
>reating-reusable-tabBar-control-tp54492.html
>Sent from the Apache Flex Development mailing list archive at Nabble.com.