Quantcast

MobileGrid Skins

classic Classic list List threaded Threaded
30 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

MobileGrid Skins

Jonathan Christian
Hey All,

Just wondering if there is an example of a skinned <ns:MobileGrid>. has someone developed one? Im trying to theme each column with a white background with black text and the same appearance for the  column headers. Any help would be great. thanks.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Maurice Amsellem
Look at spark.skins.MobileGridSkin implementation
and defaults.css for MobileGrid in experimental_mobile:

https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/experimental_mobile/defaults.css
https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/experimental_mobile/src/spark/skins/MobileGridSkin.as

Try first to change the css styles, and see how it goes...

Maurice



-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : lundi 24 mars 2014 20:44
À : [hidden email]
Objet : MobileGrid Skins

Hey All,

Just wondering if there is an example of a skinned <ns:MobileGrid>. has someone developed one? Im trying to theme each column with a white background with black text and the same appearance for the  column headers.
Any help would be great. thanks.



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Jonathan Christian
Thanks Maurice,

I have attempted to override the CSS and apply the style .Mobileg to the MobileGrid, and  .MobileGridHeader to the MobileGridColumn. This approach seems to partially work - any CSS in the header doesn't seem to take any effect. Am I doing this correctly?

 <fx:Style>
 
       @namespace "http://flex.apache.org/experimental/ns";
       @namespace s "library://ns.adobe.com/flex/spark";
       @namespace supportClasses "spark.components.supportClasses.*";

       
       .Mobileg
       {
           skinClass: ClassReference('spark.skins.MobileGridSkin');
           contentBackgroundColor: #ffffff;
           alternatingItemColors: #ffffff, #ffffff;
           color: #585558;
           selection-color: #ffffff; /* blue  */
           
       }

   .MobileGridHeader
       {
           skinClass: ClassReference('spark.skins.MobileGridHeaderButtonBarSkin');
           /*   color: #f0f0f0;  */
       }
       

</fx:style>
     
        <ns:MobileGrid skinClass="Mobileg"/>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Maurice Amsellem
Sorry,  I don't understand you code snippet below.
It's mixing upper case and lower case,  styleName and skinClass,  so it's difficult to tell which are css selectors and which are class names.

Can you make a zip of your project (at least the MobileGrid custom skin classes and css) and share it via DropBox or the like, so that I can review it.

Regards,

Maurice

-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : lundi 31 mars 2014 17:46
À : [hidden email]
Objet : RE: MobileGrid Skins

Thanks Maurice,

I have attempted to override the CSS and apply the style /.Mobileg/ to the MobileGrid, and  /.MobileGridHeader/ to the MobileGridColumn. This approach seems to partially work - any CSS in the header doesn't seem to take any effect. Am I doing this correctly?

 <fx:Style>
 
       @namespace "http://flex.apache.org/experimental/ns";
       @namespace s "library://ns.adobe.com/flex/spark";
       @namespace supportClasses "spark.components.supportClasses.*";

       
       .Mobileg
       {
           skinClass: ClassReference('spark.skins.MobileGridSkin');
           contentBackgroundColor: #ffffff;
           alternatingItemColors: #ffffff, #ffffff;
           color: #585558;
           selection-color: #ffffff; /* blue  */
           
       }

   .MobileGridHeader
       {
           skinClass:
ClassReference('spark.skins.MobileGridHeaderButtonBarSkin');
           /*   color: #f0f0f0;  */
       }
       

</fx:style>
     
        <ns:MobileGrid skinClass="Mobileg"/>



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5862.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Jonathan Christian
This post was updated on .
Here - https://drive.google.com/file/d/0B4quPL0V-7sBUjREOEdoMjUxbXc/edit?usp=sharing

I am only using the CSS as a stylename at the moment, as I am not sure how to use the Mobile Grid skin class

Thanks
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Maurice Amsellem
Hi Jonathan,  I have downloaded the example you shared but it does not contain any custom skin or css.

Morever, this example does not compile, as the MobileGrid namespace is not correct.
It's obviously downloaded from example project attached to the JIRA ticket https://issues.apache.org/jira/browse/FLEX-33777 .
This project file is an obsolete code prior to the donation of MobileGrid to ApacheFlex, and should not be used (I have removed the attachements).

It's better to use the examples provided with the asdoc:
http://flex.apache.org/asdoc/spark/components/MobileGrid.html#includeExamplesSummary 

So please send me the right code, so that I can help you.

Regards,

Maurice
-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : lundi 31 mars 2014 21:26
À : [hidden email]
Objet : RE: MobileGrid Skins

Here -
https://drive.google.com/file/d/0B4quPL0V-7sBUjREOEdoMjUxbXc/edit?usp=sharing

I am only using the CSS as a stylename at the moment, as I am not sure how to use the Mobile Grid skin class



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5865.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Jonathan Christian
Yeah you're right, I zipped the wrong project sorry! here is the new link - https://drive.google.com/file/d/0B4quPL0V-7sBS3ZIbl83eEJTU2c/edit?usp=sharing

I tried editing the headerGroup in the skin and was only able to remove the shadow, and using CSS I was able to set up a white column color with a gray font. I'd really like to figure out how to change the header color to white as well and is making the columns not selectable possible?

Thanks Again
Jonathan
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Maurice Amsellem
Ok I will have a look at it.

>and is making the columns not selectable possible?
You mean, disable sorting on header click ?

Maurice

-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : mardi 1 avril 2014 15:18
À : [hidden email]
Objet : RE: MobileGrid Skins

Yeah you're right, I zipped the wrong project sorry! here is the new link - https://drive.google.com/file/d/0B4quPL0V-7sBS3ZIbl83eEJTU2c/edit?usp=sharing

I tried editing the headerGroup in the skin and was only able to remove the shadow, and using CSS I was able to set up a white column color with a gray font. I'd really like to figure out how to change the header color to white as well and is making the columns not selectable possible?

Thanks Again
Jonathan



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5873.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

Jonathan Christian
Does the MobileGrid provide the same functionality as a spark list where the hovered and selected states can be modified so the cell background color isn't displayed even when a user selected an item in the list?


On Tue, Apr 1, 2014 at 8:43 AM, Maurice Amsellem [via Apache Flex Users] <[hidden email]> wrote:
Ok I will have a look at it.

>and is making the columns not selectable possible?
You mean, disable sorting on header click ?

Maurice

-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : mardi 1 avril 2014 15:18
À : [hidden email]
Objet : RE: MobileGrid Skins

Yeah you're right, I zipped the wrong project sorry! here is the new link - https://drive.google.com/file/d/0B4quPL0V-7sBS3ZIbl83eEJTU2c/edit?usp=sharing

I tried editing the headerGroup in the skin and was only able to remove the shadow, and using CSS I was able to set up a white column color with a gray font. I'd really like to figure out how to change the header color to white as well and is making the columns not selectable possible?

Thanks Again
Jonathan



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5873.html

Sent from the Apache Flex Users mailing list archive at Nabble.com.



If you reply to this email, your message will be added to the discussion below:
http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5875.html
To unsubscribe from MobileGrid Skins, click here.
NAML

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Maurice Amsellem
MobileGrid is entirely based on Spark List (with only a custom renderer).

Maurice

-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : mardi 1 avril 2014 16:12
À : [hidden email]
Objet : Re: MobileGrid Skins

Does the MobileGrid provide the same functionality as a spark list where the hovered and selected states can be modified so the cell background color isn't displayed even when a user selected an item in the list?


On Tue, Apr 1, 2014 at 8:43 AM, Maurice Amsellem [via Apache Flex Users] <
[hidden email]> wrote:

> Ok I will have a look at it.
>
> >and is making the columns not selectable possible?
> You mean, disable sorting on header click ?
>
> Maurice
>
> -----Message d'origine-----
> De : Jonathan Christian [mailto:[hidden
> email]<http://user/SendEmail.jtp?type=node&node=5875&i=0>]
>
> Envoyé : mardi 1 avril 2014 15:18
> À : [hidden email] <http://user/SendEmail.jtp?type=node&node=5875&i=1>
> Objet : RE: MobileGrid Skins
>
> Yeah you're right, I zipped the wrong project sorry! here is the new
> link
> -
> https://drive.google.com/file/d/0B4quPL0V-7sBS3ZIbl83eEJTU2c/edit?usp=
> sharing
>
> I tried editing the headerGroup in the skin and was only able to
> remove the shadow, and using CSS I was able to set up a white column
> color with a gray font. I'd really like to figure out how to change
> the header color to white as well and is making the columns not selectable possible?
>
> Thanks Again
> Jonathan
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693
> p5873.html
>
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
>
> ------------------------------
>  If you reply to this email, your message will be added to the
> discussion
> below:
>
> http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693
> p5875.html  To unsubscribe from MobileGrid Skins, click
> here<http://apache-flex-users.2333346.n4.nabble.com/template/NamlServl
> et.jtp?macro=unsubscribe_by_code&node=5693&code=amNpc2ludGhlaG91c2UyMU
> BnbWFpbC5jb218NTY5M3w3NzgwMTEwOTM=>
> .
> NAML<http://apache-flex-users.2333346.n4.nabble.com/template/NamlServl
> et.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=n
> abble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNa
> mespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subs
> cribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-sen
> d_instant_email%21nabble%3Aemail.naml>
>




--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5876.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Maurice Amsellem
Christian, to change the header color to white (or something else), do the following:

1)  customize the skin of MobileHeaderGroup, such as follows
supportClasses|MobileGridHeader
{
    skinClass: ClassReference('skins.MyMobileGridHeaderSkin');
}

Preferably use a standalone css file rather than inline fx:Style, and include it in your top-level app file, eg:
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" ....  >
    <fx:Style source="ModifiedGrid.css"/>
</s:ViewNavigatorApplication>

2)  in the customized skin, set firstButton, middleButton and lastButton to use your custom header button skin :
public class MyMobileGridHeaderSkin extends spark.skins.MobileGridHeaderButtonBarSkin
{
...

    override protected function createChildren(): void
    {
        super.createChildren();
      firstButton.skinClass = middleButton.skinClass = lastButton.skinClass = MyHeaderButtonSkin;
    }

3) design a custom header button skin that display eg. a label in a white outline rectangle.
You can inherit from the various *Button*Skin in the mobile theme or make your own.
Keep in mind that mobile skins often use FXG skins, that are not customizable (eg. no cornerRadius or the like).

Let me know how it worked.

Maurice

-----Message d'origine-----
De : Maurice Amsellem [mailto:[hidden email]]
Envoyé : mardi 1 avril 2014 16:25
À : [hidden email]
Objet : RE: MobileGrid Skins

MobileGrid is entirely based on Spark List (with only a custom renderer).

Maurice

-----Message d'origine-----
De : Jonathan Christian [mailto:[hidden email]]
Envoyé : mardi 1 avril 2014 16:12
À : [hidden email]
Objet : Re: MobileGrid Skins

Does the MobileGrid provide the same functionality as a spark list where the hovered and selected states can be modified so the cell background color isn't displayed even when a user selected an item in the list?


On Tue, Apr 1, 2014 at 8:43 AM, Maurice Amsellem [via Apache Flex Users] <
[hidden email]> wrote:

> Ok I will have a look at it.
>
> >and is making the columns not selectable possible?
> You mean, disable sorting on header click ?
>
> Maurice
>
> -----Message d'origine-----
> De : Jonathan Christian [mailto:[hidden
> email]<http://user/SendEmail.jtp?type=node&node=5875&i=0>]
>
> Envoyé : mardi 1 avril 2014 15:18
> À : [hidden email] <http://user/SendEmail.jtp?type=node&node=5875&i=1>
> Objet : RE: MobileGrid Skins
>
> Yeah you're right, I zipped the wrong project sorry! here is the new
> link
> -
> https://drive.google.com/file/d/0B4quPL0V-7sBS3ZIbl83eEJTU2c/edit?usp=
> sharing
>
> I tried editing the headerGroup in the skin and was only able to
> remove the shadow, and using CSS I was able to set up a white column
> color with a gray font. I'd really like to figure out how to change
> the header color to white as well and is making the columns not selectable possible?
>
> Thanks Again
> Jonathan
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693
> p5873.html
>
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
>
> ------------------------------
>  If you reply to this email, your message will be added to the
> discussion
> below:
>
> http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693
> p5875.html  To unsubscribe from MobileGrid Skins, click
> here<http://apache-flex-users.2333346.n4.nabble.com/template/NamlServl
> et.jtp?macro=unsubscribe_by_code&node=5693&code=amNpc2ludGhlaG91c2UyMU
> BnbWFpbC5jb218NTY5M3w3NzgwMTEwOTM=>
> .
> NAML<http://apache-flex-users.2333346.n4.nabble.com/template/NamlServl
> et.jtp?macro=macro_viewer&id=instant_html%21nabble%3Aemail.naml&base=n
> abble.naml.namespaces.BasicNamespace-nabble.view.web.template.NabbleNa
> mespace-nabble.view.web.template.NodeNamespace&breadcrumbs=notify_subs
> cribers%21nabble%3Aemail.naml-instant_emails%21nabble%3Aemail.naml-sen
> d_instant_email%21nabble%3Aemail.naml>
>




--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p5876.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

Jonathan Christian
Thanks Maurice  I was able to set up a sharp looking Mobile Grid header, one thing I noticed is when you select the second row down and try to sort the data - any rows above it flicker to the change, and there is no flickering when the last row is selected. Just a little peculiar so I thought I'd let you know
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

RE: MobileGrid Skins

leokan23
Is there a way to change the height of each row? i am trying to figure it out but nothing seems to work.

Thank you,

Leo
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

OmPrakash Muppirala
Try setting this in your CSS file:

supportClasses|MobileGridRowRenderer
{
    height: 50;
}

On Tue, Aug 4, 2015 at 6:04 AM, leokan23 <[hidden email]> wrote:

> Is there a way to change the height of each row? i am trying to figure it
> out
> but nothing seems to work.
>
> Thank you,
>
> Leo
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Skins-tp5693p10894.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

leswoolsey
Hi. I'm trying to get a very simple mobilegrid and I've managed fairly well to get rid of the header and change the row colors to plain white.  But I still get the headershadow.  How can I get rid of that?
Thanks
Les
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

quick6black
I posted a new skin for the mobile grid on github

https://github.com/quick6black/flex-Android-Material-Skins

it replicates the android material design
OK
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

OK
quick6black wrote
I posted a new skin for the mobile grid on github

https://github.com/quick6black/flex-Android-Material-Skins

it replicates the android material design
Hi,
thanks for sharing this!
I've just checked it out and it seems to me that the LabelItemRenderer class is missing? [1]

Thanks,
Olaf

[1]
https://github.com/quick6black/flex-Android-Material-Skins/blob/d0dc29fd63ba78171ac880ccf29df9fbfd9566e2/src/spark/skins/android5/MobileGridSkin.as#L114
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

Paul Moreau
Nice work!

I had the same issue as Olaf but I just used
spark.compoenents.LabelItemRenderer to get it to build.

I also had an issue with the fonts. I got the following error:

*-unable to build font 'RobotoBold'*
*-exception during transcoding:*
*-Unable to transcode /Users/paulmoreau/Documents/Adobe Flash Builder
4.7/AndroidSkins/src/spark/skins/android5/assets/fonts/Roboto-Bold.ttf.*

But looks great, thanks.



On Wed, Mar 8, 2017 at 8:38 AM, OK <[hidden email]> wrote:

> quick6black wrote
> > I posted a new skin for the mobile grid on github
> >
> > https://github.com/quick6black/flex-Android-Material-Skins
> >
> > it replicates the android material design
>
> Hi,
> thanks for sharing this!
> I've just checked it out and it seems to me that the LabelItemRenderer
> class
> is missing? [1]
>
> Thanks,
> Olaf
>
> [1]
> https://github.com/quick6black/flex-Android-Material-Skins/blob/
> d0dc29fd63ba78171ac880ccf29df9fbfd9566e2/src/spark/skins/
> android5/MobileGridSkin.as#L114
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/MobileGrid-Skins-tp5693p14790.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>



--






*DISCLAIMER: This electronic message together with any attachments is
confidential. If you are not the intended recipient, do not copy, disclose
or use the contents in any way. Please also advise us by return e-mail that
you have received the message and then please destroy. Zutec  Ltd is not
responsible for any changes made to this message and / or any attachments
after sending by Zutec. We use virus scanning software but exclude all
liability for viruses or anything similar in this email or any attachment.*
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

quick6black
sorry about that just added in labelitemrenderer, I had it in the animations branch forgot to upload it to the master branch.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: MobileGrid Skins

LesGWoolsey
Any thoughts on how to get rid of the header shadow on MobileGrid or at least change the color to white so it isn't visible. I got rid of the header by setting it's height to 0 but the shadow remains.
12
Loading...