You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by castroalves <ca...@gmail.com> on 2014/01/08 15:35:02 UTC
Mobile Facebook-like slide menu
Hi people!
Do you know to implement an slider menu like this using Views:
http://www.aldomatic.com/jqm/fb-menu-style/
Best wishes!
Cadu de Castro Alves
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-slide-menu-tp4393.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Facebook-like slide menu
Posted by macniroc <jc...@gmail.com>.
I actually created this control for a project, I used tween lite like Romain
KELIFA stated and Robot Legs. here is my github -
https://github.com/jchri853/FlexSlideMenu Enjoy!
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-slide-menu-tp4393p4420.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Mobile Facebook-like slide menu
Posted by Romain KELIFA <ro...@gmail.com>.
Hi,
I already did that formerly at work, so here is how you could also
implement it,
provided you want to fine tune your component (for performance purpose) :
The basic idea is to put your menu behind your view navigator, using
TweenLite to handle navigator transition from left to right and vice-versa,
and keep tracks of application / navigator / view status to avoid bugs.
You can do this by extending and using your own versions of application,
application skin, navigator and navigator view transition :
- custom application to be able to handle facebook-like effect and keep
tracks of menu transitioning status (view transitioning status already
managed by the navigator). you can also wait for the appropriate time to
allow user to click to close the menu, for incoming view to call a
webservice, etc
- custom navigator view transition (cover/uncover for example) + handle
dynamically navigator defaultPushTransition and defaultPopTransition (you
might want to temporarily cancel view transition setting these properties
to null, depending on if menu is currently opened or not). overriding
navigator means you can also handle a loader screen upon view loading, if
required
If you want to go further you should use your own version of view too, to
be able to keep tracks of its current status.
secret is, for the most, to sequence each step of the app for smooth
integration.
Romain
2014/1/8 Massimo Perani <ma...@gmail.com>
> Hi,
> I don't think if this is the best solution,
> but you can use spark.effects.Move to move horizontally a UIComponent from
> left to right when click the Menu button,
> so the list below (or other UIComponent) becomes visible...
>
> By
> Massimo.
>
>
> 2014/1/8 Cadu de Castro Alves <ca...@bluefactory.com.br>
>
> > You´re right, Maurice. I'd like the same effect that happens in the link
> > I've attached before.
> >
> > Att,
> >
> > Cadu de Castro Alves
> > Geekpreneur & Web Developer
> >
> > Mobile: +55 21 9 9574-0115
> > Twitter: @castroalves
> > Facebook: cadudecastroalves
> >
> >
> > On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem <
> > maurice.amsellem@systar.com> wrote:
> >
> > > I think castroalves is talking about the slider menu show/hide with
> > effect
> > > .
> > >
> > > Maurice
> > >
> > >
> > > -----Message d'origine-----
> > > De : Lee Burrows [mailto:subscriptions@leeburrows.com]
> > > Envoyé : mercredi 8 janvier 2014 17:06
> > > À : users@flex.apache.org
> > > Objet : Re: Mobile Facebook-like slide menu
> > >
> > > Example looks very similar to
> > > http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.html
> > >
> > > On 08/01/2014 14:35, castroalves wrote:
> > > > Hi people!
> > > >
> > > > Do you know to implement an slider menu like this using Views:
> > > > http://www.aldomatic.com/jqm/fb-menu-style/
> > > >
> > > > Best wishes!
> > > >
> > > > Cadu de Castro Alves
> > > >
> > > >
> > > >
> > > > --
> > > > View this message in context:
> > > >
> http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-sl
> > > > ide-menu-tp4393.html Sent from the Apache Flex Users mailing list
> > > > archive at Nabble.com.
> > > >
> > >
> > >
> > > --
> > > Lee Burrows
> > > ActionScripter
> > >
> > >
> >
>
>
>
> --
> Massimo Perani
>
--
Romain Kelifa
____________________________________
Gsm : +33 (0) 660 698 208
Contact : romain.kelifa@gmail.com
____________________________________
Re: Mobile Facebook-like slide menu
Posted by Cadu de Castro Alves <ca...@bluefactory.com.br>.
Maurice, thank you very much! You saved my life! =)
Att,
Cadu de Castro Alves
Geekpreneur & Web Developer
Mobile: +55 21 9 9574-0115
Twitter: @castroalves
Facebook: cadudecastroalves
On Wed, Jan 8, 2014 at 4:01 PM, Maurice Amsellem <
maurice.amsellem@systar.com> wrote:
> Move is the right solution for this effect
>
> Since memory is a concern on mobile devices, it's better to create /
> destroy the menu "on demand" when it's shown/hidden.
> This is simply done with states and the effects can be wrapped in state
> transitions.
>
> The code below is a simple example, entirely in mxml
>
> (view.ContentView is a simple s:View with some content)
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> currentState="normal"
> >
> <s:states>
> <s:State name="normal" />
> <s:State name="withMenu"/>
> </s:states>
>
> <s:List id="menu" width="150" height="100%" includeIn="withMenu">
> <s:ArrayList>
> <fx:String>Home</fx:String>
> <fx:String>About</fx:String>
> </s:ArrayList>
> </s:List>
>
> <s:ViewNavigator id="mainNavigator" firstView="views.ContentView"
> height="100%" right="0" left.normal="0" left.withMenu="150">
> <s:navigationContent>
> <s:Button id="menuButton" label="Menu"
> click="menuButton_clickHandler(event)"/>
> </s:navigationContent>
> </s:ViewNavigator>
>
> <s:transitions>
> <s:Transition fromState="normal" toState="withMenu"
> autoReverse="true" >
> <s:Parallel>
> <s:Move xFrom="0" xTo="150" target="{mainNavigator}"
> duration="400"/>
> <s:Fade target="{menu}" duration="400"/>
> </s:Parallel>
> </s:Transition>
> </s:transitions>
>
> <fx:Script><![CDATA[
> private function menuButton_clickHandler(event: MouseEvent): void {
> // toggle between states
> currentState = currentState == "normal" ? "withMenu" :
> "normal";
> }
> ]]></fx:Script>
>
> </s:Application>
>
>
> -----Message d'origine-----
> De : Massimo Perani [mailto:massimo.perani@gmail.com]
> Envoyé : mercredi 8 janvier 2014 17:47
> À : users@flex.apache.org
> Objet : Re: Mobile Facebook-like slide menu
>
> Hi,
> I don't think if this is the best solution, but you can use
> spark.effects.Move to move horizontally a UIComponent from left to right
> when click the Menu button, so the list below (or other UIComponent)
> becomes visible...
>
> By
> Massimo.
>
>
> 2014/1/8 Cadu de Castro Alves <ca...@bluefactory.com.br>
>
> > You´re right, Maurice. I'd like the same effect that happens in the
> > link I've attached before.
> >
> > Att,
> >
> > Cadu de Castro Alves
> > Geekpreneur & Web Developer
> >
> > Mobile: +55 21 9 9574-0115
> > Twitter: @castroalves
> > Facebook: cadudecastroalves
> >
> >
> > On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem <
> > maurice.amsellem@systar.com> wrote:
> >
> > > I think castroalves is talking about the slider menu show/hide with
> > effect
> > > .
> > >
> > > Maurice
> > >
> > >
> > > -----Message d'origine-----
> > > De : Lee Burrows [mailto:subscriptions@leeburrows.com]
> > > Envoyé : mercredi 8 janvier 2014 17:06 À : users@flex.apache.org
> > > Objet : Re: Mobile Facebook-like slide menu
> > >
> > > Example looks very similar to
> > > http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.ht
> > > ml
> > >
> > > On 08/01/2014 14:35, castroalves wrote:
> > > > Hi people!
> > > >
> > > > Do you know to implement an slider menu like this using Views:
> > > > http://www.aldomatic.com/jqm/fb-menu-style/
> > > >
> > > > Best wishes!
> > > >
> > > > Cadu de Castro Alves
> > > >
> > > >
> > > >
> > > > --
> > > > View this message in context:
> > > > http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-lik
> > > > e-sl ide-menu-tp4393.html Sent from the Apache Flex Users mailing
> > > > list archive at Nabble.com.
> > > >
> > >
> > >
> > > --
> > > Lee Burrows
> > > ActionScripter
> > >
> > >
> >
>
>
>
> --
> Massimo Perani
>
RE: Mobile Facebook-like slide menu
Posted by Maurice Amsellem <ma...@systar.com>.
Move is the right solution for this effect
Since memory is a concern on mobile devices, it's better to create / destroy the menu "on demand" when it's shown/hidden.
This is simply done with states and the effects can be wrapped in state transitions.
The code below is a simple example, entirely in mxml
(view.ContentView is a simple s:View with some content)
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
currentState="normal"
>
<s:states>
<s:State name="normal" />
<s:State name="withMenu"/>
</s:states>
<s:List id="menu" width="150" height="100%" includeIn="withMenu">
<s:ArrayList>
<fx:String>Home</fx:String>
<fx:String>About</fx:String>
</s:ArrayList>
</s:List>
<s:ViewNavigator id="mainNavigator" firstView="views.ContentView" height="100%" right="0" left.normal="0" left.withMenu="150">
<s:navigationContent>
<s:Button id="menuButton" label="Menu" click="menuButton_clickHandler(event)"/>
</s:navigationContent>
</s:ViewNavigator>
<s:transitions>
<s:Transition fromState="normal" toState="withMenu" autoReverse="true" >
<s:Parallel>
<s:Move xFrom="0" xTo="150" target="{mainNavigator}" duration="400"/>
<s:Fade target="{menu}" duration="400"/>
</s:Parallel>
</s:Transition>
</s:transitions>
<fx:Script><![CDATA[
private function menuButton_clickHandler(event: MouseEvent): void {
// toggle between states
currentState = currentState == "normal" ? "withMenu" : "normal";
}
]]></fx:Script>
</s:Application>
-----Message d'origine-----
De : Massimo Perani [mailto:massimo.perani@gmail.com]
Envoyé : mercredi 8 janvier 2014 17:47
À : users@flex.apache.org
Objet : Re: Mobile Facebook-like slide menu
Hi,
I don't think if this is the best solution, but you can use spark.effects.Move to move horizontally a UIComponent from left to right when click the Menu button, so the list below (or other UIComponent) becomes visible...
By
Massimo.
2014/1/8 Cadu de Castro Alves <ca...@bluefactory.com.br>
> You´re right, Maurice. I'd like the same effect that happens in the
> link I've attached before.
>
> Att,
>
> Cadu de Castro Alves
> Geekpreneur & Web Developer
>
> Mobile: +55 21 9 9574-0115
> Twitter: @castroalves
> Facebook: cadudecastroalves
>
>
> On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem <
> maurice.amsellem@systar.com> wrote:
>
> > I think castroalves is talking about the slider menu show/hide with
> effect
> > .
> >
> > Maurice
> >
> >
> > -----Message d'origine-----
> > De : Lee Burrows [mailto:subscriptions@leeburrows.com]
> > Envoyé : mercredi 8 janvier 2014 17:06 À : users@flex.apache.org
> > Objet : Re: Mobile Facebook-like slide menu
> >
> > Example looks very similar to
> > http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.ht
> > ml
> >
> > On 08/01/2014 14:35, castroalves wrote:
> > > Hi people!
> > >
> > > Do you know to implement an slider menu like this using Views:
> > > http://www.aldomatic.com/jqm/fb-menu-style/
> > >
> > > Best wishes!
> > >
> > > Cadu de Castro Alves
> > >
> > >
> > >
> > > --
> > > View this message in context:
> > > http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-lik
> > > e-sl ide-menu-tp4393.html Sent from the Apache Flex Users mailing
> > > list archive at Nabble.com.
> > >
> >
> >
> > --
> > Lee Burrows
> > ActionScripter
> >
> >
>
--
Massimo Perani
Re: Mobile Facebook-like slide menu
Posted by Massimo Perani <ma...@gmail.com>.
Hi,
I don't think if this is the best solution,
but you can use spark.effects.Move to move horizontally a UIComponent from
left to right when click the Menu button,
so the list below (or other UIComponent) becomes visible...
By
Massimo.
2014/1/8 Cadu de Castro Alves <ca...@bluefactory.com.br>
> You´re right, Maurice. I'd like the same effect that happens in the link
> I've attached before.
>
> Att,
>
> Cadu de Castro Alves
> Geekpreneur & Web Developer
>
> Mobile: +55 21 9 9574-0115
> Twitter: @castroalves
> Facebook: cadudecastroalves
>
>
> On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem <
> maurice.amsellem@systar.com> wrote:
>
> > I think castroalves is talking about the slider menu show/hide with
> effect
> > .
> >
> > Maurice
> >
> >
> > -----Message d'origine-----
> > De : Lee Burrows [mailto:subscriptions@leeburrows.com]
> > Envoyé : mercredi 8 janvier 2014 17:06
> > À : users@flex.apache.org
> > Objet : Re: Mobile Facebook-like slide menu
> >
> > Example looks very similar to
> > http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.html
> >
> > On 08/01/2014 14:35, castroalves wrote:
> > > Hi people!
> > >
> > > Do you know to implement an slider menu like this using Views:
> > > http://www.aldomatic.com/jqm/fb-menu-style/
> > >
> > > Best wishes!
> > >
> > > Cadu de Castro Alves
> > >
> > >
> > >
> > > --
> > > View this message in context:
> > > http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-sl
> > > ide-menu-tp4393.html Sent from the Apache Flex Users mailing list
> > > archive at Nabble.com.
> > >
> >
> >
> > --
> > Lee Burrows
> > ActionScripter
> >
> >
>
--
Massimo Perani
RE: Mobile Facebook-like slide menu
Posted by Mark Fuqua <ma...@availdata.com>.
I think you are looking for something like this...
https://issues.apache.org/jira/browse/FLEX-33839
On that page there is a tourdeflexmobile.fxp file...
The main navigation in this application (you have to touch the flex logo to
get there) implements what you are looking for, I believe.
Mark
-----Original Message-----
From: Cadu de Castro Alves [mailto:cadu@bluefactory.com.br]
Sent: Wednesday, January 08, 2014 11:22 AM
To: users@flex.apache.org
Subject: Re: Mobile Facebook-like slide menu
You´re right, Maurice. I'd like the same effect that happens in the link
I've attached before.
Att,
Cadu de Castro Alves
Geekpreneur & Web Developer
Mobile: +55 21 9 9574-0115
Twitter: @castroalves
Facebook: cadudecastroalves
On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem <
maurice.amsellem@systar.com> wrote:
> I think castroalves is talking about the slider menu show/hide with
> effect .
>
> Maurice
>
>
> -----Message d'origine-----
> De : Lee Burrows [mailto:subscriptions@leeburrows.com]
> Envoyé : mercredi 8 janvier 2014 17:06 À : users@flex.apache.org Objet
> : Re: Mobile Facebook-like slide menu
>
> Example looks very similar to
> http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.html
>
> On 08/01/2014 14:35, castroalves wrote:
> > Hi people!
> >
> > Do you know to implement an slider menu like this using Views:
> > http://www.aldomatic.com/jqm/fb-menu-style/
> >
> > Best wishes!
> >
> > Cadu de Castro Alves
> >
> >
> >
> > --
> > View this message in context:
> > http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-
> > sl ide-menu-tp4393.html Sent from the Apache Flex Users mailing list
> > archive at Nabble.com.
> >
>
>
> --
> Lee Burrows
> ActionScripter
>
>
---
This email is free from viruses and malware because avast! Antivirus protection is active.
http://www.avast.com
Re: Mobile Facebook-like slide menu
Posted by Cadu de Castro Alves <ca...@bluefactory.com.br>.
You´re right, Maurice. I'd like the same effect that happens in the link
I've attached before.
Att,
Cadu de Castro Alves
Geekpreneur & Web Developer
Mobile: +55 21 9 9574-0115
Twitter: @castroalves
Facebook: cadudecastroalves
On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem <
maurice.amsellem@systar.com> wrote:
> I think castroalves is talking about the slider menu show/hide with effect
> .
>
> Maurice
>
>
> -----Message d'origine-----
> De : Lee Burrows [mailto:subscriptions@leeburrows.com]
> Envoyé : mercredi 8 janvier 2014 17:06
> À : users@flex.apache.org
> Objet : Re: Mobile Facebook-like slide menu
>
> Example looks very similar to
> http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.html
>
> On 08/01/2014 14:35, castroalves wrote:
> > Hi people!
> >
> > Do you know to implement an slider menu like this using Views:
> > http://www.aldomatic.com/jqm/fb-menu-style/
> >
> > Best wishes!
> >
> > Cadu de Castro Alves
> >
> >
> >
> > --
> > View this message in context:
> > http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-sl
> > ide-menu-tp4393.html Sent from the Apache Flex Users mailing list
> > archive at Nabble.com.
> >
>
>
> --
> Lee Burrows
> ActionScripter
>
>
RE: Mobile Facebook-like slide menu
Posted by Maurice Amsellem <ma...@systar.com>.
I think castroalves is talking about the slider menu show/hide with effect .
Maurice
-----Message d'origine-----
De : Lee Burrows [mailto:subscriptions@leeburrows.com]
Envoyé : mercredi 8 janvier 2014 17:06
À : users@flex.apache.org
Objet : Re: Mobile Facebook-like slide menu
Example looks very similar to
http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.html
On 08/01/2014 14:35, castroalves wrote:
> Hi people!
>
> Do you know to implement an slider menu like this using Views:
> http://www.aldomatic.com/jqm/fb-menu-style/
>
> Best wishes!
>
> Cadu de Castro Alves
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-sl
> ide-menu-tp4393.html Sent from the Apache Flex Users mailing list
> archive at Nabble.com.
>
--
Lee Burrows
ActionScripter
Re: Mobile Facebook-like slide menu
Posted by Lee Burrows <su...@leeburrows.com>.
Example looks very similar to
http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.html
On 08/01/2014 14:35, castroalves wrote:
> Hi people!
>
> Do you know to implement an slider menu like this using Views:
> http://www.aldomatic.com/jqm/fb-menu-style/
>
> Best wishes!
>
> Cadu de Castro Alves
>
>
>
> --
> View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-slide-menu-tp4393.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
--
Lee Burrows
ActionScripter
Re: Mobile Facebook-like slide menu
Posted by quick6black <an...@gmail.com>.
I was able to implement that concept into a project. I forked the Tour de
Flex example and integrated some code into it to accomplish that workflow. I
used a mouse events, I posted the source code here
<https://github.com/quick6black/flex-examples>
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-like-slide-menu-tp4393p5269.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.