Example of mobile Skin

Hi,
From what I read, Flex hero mobile theme has been built using FXG skins written in AS.
Actually, I'm looking at a quick sample of how to build custom lightweight mobile skins.
I've looked at the mobile theme given with hero SDK but it's only a SWC file so I can't see the source code.
This is how I would build a mobile skin :
1) Create an AS class that extends SparkSkin/Skin (depends if I plan to use styles)
2) Define SkinState with AS3 metadata
3) Create and add the required skinparts to the display list (createChildren method?)
4) Add FXG elements in AS (something like that : http://saturnboy.com/2010/11/programmatic-skinning-in-flex-4-an-fxg-clock/). Where should I do that, updateDisplayList method?
Please tell me if I'm wrong or anything
Thanks

Any tips?

Similar Messages

Using a BitmapImage in a mobile skin

Hello,
Is there a way to use a BitmapImage as a skin part in a mobile skin? Since it does not inherit from DisplayObject, I cannot add it using the addChild method in the skin.
I tried the following:
override protected function createChildren():void
     this.imageDisplay = new BitmapImage();
     this.addChild(this.imageDisplay.displayObject);
But I get:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
     at mx.core::UIComponent/addChild()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UI Component.as:7137]
...as it appeards displayObject is null at this point.
Any ideas?
Thanks!

Stupid me! I didn't think to just look at the ImageSkin source in the mobiletheme.
override protected function createChildren():void
    // create container for holding the currently displayed image
    imageHolder = new Group();
    addChild(imageHolder);
    // required skin part; the Image component will set this directly
    imageDisplay = new BitmapImage();
    imageDisplay.left = 0;
    imageDisplay.right = 0;
    imageDisplay.top = 0;
    imageDisplay.bottom = 0;
    imageHolder.addElement(imageDisplay);
Looks like they just wrap it in a Group first.

"Mobile" Skin and 508

Captivate 7 has a "Mobile" skin which provides substantially larger buttons for mLearning content. Unfortunately, there is no closed caption button. Can we turn on captions by default and can someone tell me how in V7 because when enabling it as an action I am having issues.

After doing a Captivate 7 Update, the CC button is included now. 7.0.1.237 is the version where it now publishes correctly!

Simple example of mobile agent

Hi,
I'm studing mobile agent in java rmi,but I can't understand them because I haven't any example.Please,can you give a simple example of mobile agent in java rmi?
Thanks very much,Filippo

Hi,
I'm studing mobile agent in java rmi,but I can't understand them because I haven't any example.Please,can you give a simple example of mobile agent in java rmi?
Thanks very much,Filippo

Softkeyboard issue with mobile skin Textinput

Hi Adobe,
When can we get the fixing of the issue related to the mobile skinning based TextInput. As with the mobile skin based textinpu neither the softkeyboard Type nor AutoCapitalization etc. works.
Can Any one confirm on this??
with Regards,
Shardul

Hi Nimisha,
You are right enough but I also require the vertical Scrolling on the component which is holding the TextInput box.
If you have any idea please let me know.
It should be done fix for the "spark.skins.mobile.TextInputSkin".
I have reported this bug long ago,hope it will be resolved sooner or later.
https://bugbase.adobe.com/index.cfm?event=bug&id=3292370
with Regards,
Shardul

Examples of Mobile with good architecture

Hi;
I'm really discouraged looking at the existing examples of Mobile applications--they all seem to be tightly coupled, with the View handling the data and the service calls. Where can I find an example of a Mobile project with what I would consider good architecture--all the View does is display or allow the user to the data, and the service calls and actual changes to the model are handled outside of the View? I'm most comfortable with Robotlegs, but I don't have any doubt I could desconstruct a Swiz, Parsley, or whatever mobile project.
Thanks;
Amy

have you seen this?
http://www.adobe.com/devnet/flex/samples.html

Examples of Mobile Websites using Business Catalyst

I am looking to build a mobile version of my business catalyst website and I was wondering if anyone has some examples of BC sites that they created for mobile so that I will have some ideas when I actually make one for my website. Thanks.

Hi Alex,
Here is a list of TribeVita's templates that all have mobile versions
http://www.tribevita.com/adobe-business-catalyst-templates/mobile
Brad

Need JSON example for mobile app

Hello, everyone. I'm looking for a simple example of a mobile application built in Hero that can hit a JSON service and parse the output. Thank you very much in advance!!

After some research, I'm kind of on my way but I'm still a bit lost. I've added the following code:
<fx:Declarations>

<s:HTTPService id="DirectionGetter" resultFormat="
text" url="http://geocoding.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/geocoding/find_structured/ house:80;+street:Linienstraße;+city:Berlin.js"result="ParseJSONDirections(event)"
showBusyCursor="true">
</s:HTTPService>
</fx:Declarations>
Then, in the <fx:Script> area I've added:
private function ParseJSONDirections(event:ResultEvent):void
var rawData:String = String(event.result);
lblTest.text = rawData;
But nothing happens. Any advice, folks?

Skinning Flex Mobile TextInput

Hi,
I need to skin the Flex Mobile Text Input with a gradient in the background. I have created a skin for that. It works fine on Android devices but in case of iOS devices, the keyboard doesn't even comes up. If I remove the skin, it works fine. I guess the issue is with skinning, but how can I fix this? Below is the skin I created, if it helps:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
    alpha.disabledStates="0.5" blendMode="normal">
    <fx:Metadata>
    <![CDATA[
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
         * @private
        private static const focusExclusions:Array = ["textDisplay"];
         * @private
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>
    
    
    <s:Rect left="0" right="0" top="0" bottom="0" id="border"
                              radiusX="5" radiusY="5">
        <s:stroke>
            
            <s:SolidColorStroke id="borderStroke" color="0xFFFFFF" weight="1" alpha="0.05" />
        </s:stroke>
    </s:Rect>
    
    
    <s:Rect id="background" left="1" right="1" top="1" bottom="1"
                              radiusX="5" radiusY="5">
        <s:fill>
            
            
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x131516"
                                                                                 alpha="1"/>
<s:GradientEntry color="0x282b31"
                                                                                 alpha="1"/>
</s:LinearGradient>
</s:fill>
    </s:Rect>
    
    
    <s:Rect left="1" top="1" right="1" height="1" id="shadow" alpha="0"
                              radiusX="5" radiusY="5">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" alpha="0.25" />
        </s:fill>
    </s:Rect>
    
    
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    
    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt"
                includeInLayout="false" />
</s:SparkSkin>

You are using a non-mobile skin:
<s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    
Pls Read here about mid page- wont call keyboard and have scrolling issues, etc:
Adobe Flex 4.6 * Use text in a mobile application
Here are the mobile skins: spark.skins.mobile - Adobe ActionScript® 3 (AS3) API Reference ... apply to base components you need to use.
Good luck.

[Flex 4.5.1] What is the best way of adopting a flex built website for mobile "as is"?

What is the best way of adopting a flex 4.5.1 built website for mobile "as is"?
I have a website built with flex 4.5.1 which I want to be working on mobile as it should - meaning that touch style of interactions should be working not mouse.
The question is: Do I HAVE TO recode all of my website from Application into Mobile Application in order to be a more lightweight version of the original one, which includes: remove some functionality, pages, animation, build a separate backend and cms to control it etc.?
OR
Can I just define mobile skins, for my existing components to use when in mobile mode, in which I could have done some tweaking by removing some unnecessary parts and changing component interactionMode to Touch ?
Are both options which I see possible and if yes - which one would you recommend?
Thanks in advance!

Thanks for the answer. Yeah I bet you figured out what I want the answer to be, but is it ? That's why I am asking here. I can see my website on my HTC Desire HD and it's working pretty well. If I reskin the parts that need a bigger hit area or the scrollers to work with touch so I don't have to scroll the actual scrollbars with my finger, remove some complex animations - everything will work just fine... The problem is that I am not sure if that is the right way to do it or if it is possible at all.
I do get your point about not designed for mobile stuff, but while with html 5 you get the job done for web and mobile with little differences at the same time, in flash you need double time cause you'll have to build 2 projects. And since the framework is one for both web and mobile.. why not...
I want to see the pros and cons of the both approaches I suggested. In a complex modular architecture I could easily swap one web module with a mobile module for example or change skins or components if I need more lightweight ones, but do I have to copy all that logic in to a MobileApplication, can't I do it with Application and use the MobileComponents (which are simplier and less functional) if the project actually needs them...
I do hope you get why I am asking these questions, and I can't believe I haven't found a guide or something like that "why this and not that" when it comes to mixing web with mobile development and flex... If you have, please share the link, I would be happy to read. Or someone with the experience in what I am talking about shares some knowledge, that would be great!
Thanks.

Where to get overview of css selectors for skinning?

Hi,
I've just started to try some skinning for ADF Mobile as described in the developer's guide section 5.12. The basics work fine and I grabbed an example from the skinning sample project.
Now that this is working I'm looking for all the available CSS selectors for skinning. Is there a list somewhere in the documentation or a way to find out the classes at runtime. Since I can't get access to the DOM tree with my favorite inspectors I can't think of a way to find the available selectors.
Has anyone found a way to list all available classes/selectors?

The easiest way is to get the Javascript debugging working. I've replied to the post on that thread to get that moving forward (you need to use Safari, not Chrome).
We are currently still producing the documentation for the css selectors and this wasn't ready for the preview.

Skinning with ActionScript

Hi everyone,
im looking for good Skinning examples in Actionscript for mobile projects. Adobe recommends to do skinning for this purpose only in actionscript but most of the examples on this website and most of the code in the provided example flex mobile apps are in MXML.
Are their anywhere more examples and/or tutorials besides (http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html) about skinning, or do you know good blogs about this topic?
Beside that i have the problem that i cant import "spark.skins.mobile.*;" in my project, because its a libary project. It only works in a mobile project, how can i fix this?
Regards,
Christoph

I caught your sarcasm, but not your point...
My apologies. Points are better understood when in your own head.
My point was that MXML skins are used for the same reason we are not all still programming in assembler (except of course in those instances where it makes to use assembly, such as embeded systems). Yes, it is slightly less efficient to use a declarative language like MXML for skinning than it would be to write a highly optimized version in Actionscript (or assembler, if you want to follow that same logic).
However, in most cases the preformance impact is negligable compared to the advantage gained through rapid development and easy work flows between designers and engineers. As long as the preformance loss is not noticble to the end user, who cares if it is slightly less efficient? Since the preformance loss IS somewhat noticable on mobile devices, then perhaps a different strategy that takes longer to implement could be justified. Although, it is possible to use MXML in a way that is pretty damned efficient... after all, it's nothing more than a factory pattern applied at compile time...

SAP BI reports on mobile devices

Hi experts
We need have some business intelligence (SAP BI) reports and metrics on our mobile devices (BlackBerry, Iphone, Ipad). For example: The mobile'users should enter a product ID and the report show the metrics relate with it availables in SAP BI.
We have BusinessObject products and we know about BOBJ tools to design our solution to mobile devices.
Can we use BO Mobile and BO Explorer simultaneously to show the reports on Blackberry and Mac Devices?
With BOBJ tools can we do a interactive report (to enter product key) ?
Thanks for your help.
Osmy

Hi Osmy,
With the latest BI4.0, you will be able to use BI Reports on Blackberry (and nokia) devices (this was also available in XI3.x releases) . There is no iphone support yet - which maybe coming shortly in later releases.
As for Explorer, i* apps are already available - but not for blackberry as far as i know
You may already be able to run interactive (prompted) reports on blackberry. Below is a link on design best practices for reports on mobile
http://help.sap.com/businessobject/product_guides/boexir4/en/xi4_mobile_bi_rep_design_en.pdf
hope this helps,
Shiva

Request better support skin tone evaluation/measurement

Hello. I am writing this with the intention that it will be read by the folks at Adobe that are involved in the development of Lightroom. I'm pretty new to this forum, however, and I'm a little confused about whether this feature requests thread actually goes to the Adobe Lightroom team, considering that it is in a user-to-user forum. If there is a better avenue to get my feature request to Adobe, I would appreciate if someone could point me in the right direction.
Before I get into my request, I also want to mention that I did my due diligence and searched this thread to make sure this has not been requested before.
I am submitting this request because I do not see any useful way to measure or evaluate skin tone in Lightroom while adjusting white balance (or after adjusting white balance, for that matter). I can do a mouse-over to read RGB values, but I am not aware of any useful way to use RGB values for evaluating skin tones.
I just watched the latest George Jardine video, in which he recommends to use a calibrated monitor and move the Develop controls back and forth until your eye tells you it's correctly adjusted. I enjoyed this video, and I have found that this generally works well for me for tone balance, but I believe an additional tool for measuring or evaluating skin tones would benefit the Lightroom workflow as I will explain below.
I believe that many serious photographers, pro and amateur alike, routinely use the eyedropper in Photoshop for reading CMYK values to confirm the skin tones in their work. Even if they feel like they can usually eyeball pretty well, they find they get greater consistency when they use the eyedropper.
Now I'm not saying that Lightroom necessarily needs CMYK support. Photoshop Elements, for example has a skin tone adjustment even though it doesn't have CMYK support. And I'm also not suggesting that Lightroom necessarily needs skin tone sliders like Photoshop Elements. I'm just suggesting that the Lightroom workflow would benefit from some kind of tool for evaluating skin tone while or after adjustments are being made in the Develop Module. I would like to leave it up to Lightroom to decide exactly how to implement this.
The only way I currently see to do adjust while measuring skin tones is to open the file in Photoshop, make adjustments, and save. Even if there is a way to do this with ACR and have the adjustments saved in the sidecar or in the DNG, it still seems like a time-comsuming and unnecessary step for my workflow.
Now this request is predicated on the assumption that evaluting skin tone is fundamental enough for a basic workflow that it should be included in Lightroom. In my opinion it is, and that is why I am making this feature request. I'm sure that some might not need it for their workflow, but it seems to me that this would be a valuable feature to a great many Lightroom users.
Thanks for lending your ear, Adobe. I look forward to ALL your future versions of Lightroom, and I hope that skin tone evaluation/measurement is included in one of them.
Regards,
Mike

Your post seems to assume that Lightroom is a tool for travel/landscape photography, and other types of photography (e.g., portrait/fashion) should be supported by a "specialized add-on module". I have to disagree with you on that point. Considering many of the examples on the Lightroom marketing are fashion shoots, I would think that they considers portrait/fashion photographers to be an important part of their target audience. They are not a fringe group of specialists.
I'm sure that portrait/fashion photographers would feel the same way about a Lightroom capability that primarily benefits the workflow of a travel/landscape photographer, i.e., when I do do some landscape work, I just edit in Photoshop. But you wouldn't agree to that, would you?
Skin tone measurement can be an incredibly easy tool to implement. It can be something as simple as showing the CMY values alongside the RGB values during a mouseover. Keep in mind, I'm talking about CMY not CMYK, so there should be no need to worry about what ICC profile to use. RGB to CMY is a straightforward transformation. It's embarassingly simple.
There are other ways Adobe can implement skin tone management that would be more powerful but a little more complicated. Those would be great too.
Anyway, thanks for the link to the Adobe feature request page! I will use it.
Regards,
Mike

Flex Mobile: Problems with MultiDPI SplashScreen

Hi guys,
The property applicationDPI in my application is 160, and I created three bitmaps to 160, 240 and 320 DPI to be used in the SplashScreen.
I created this class . see : http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html#articlecontentAdobe_n umberedheader_5
package preloaders
    import mx.core.DPIClassification;
    import mx.core.mx_internal;
    use namespace mx_internal;
    public class MultiDPISplashScreen extends CustomSplash
        [Embed(source="assets/mobile160/splash_160.png")]
        private var SplashImage160:Class;
        [Embed(source="assets/mobile240/splash_240.png")]
        private var SplashImage240:Class;
        [Embed(source="assets/mobile320/splash_320.png")]
        private var SplashImage320:Class;
        public function MultiDPISplashScreen()
            super();
        override mx_internal function getImageClass(dpi:Number, aspectRatio:String):Class
            if (dpi == DPIClassification.DPI_160)
                return SplashImage160;
            else if (dpi == DPIClassification.DPI_240)
                return SplashImage240;
            else if (dpi == DPIClassification.DPI_320)
                return SplashImage320;
            return null;
Ih the main app:
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            applicationDPI="160"
                            preloader="preloaders.MultiDPISplashScreen"
                            splashScreenMinimumDisplayTime="2000">
The problem is that Flex does not take the correct bitmap if i run my app at 240DPI or at 320DPI (as does the class MultiDPIBitmapSource)and my splash screen is scaled and grainy! :-(
Can anyone help me?
Thnks a lot!
Francesco

Hi Francesco,
Setting the application dpi shouldn't affect the splash screen (you can verify by testing when you don't set the app dpi or by debugging the function). The dpi that gets passed in to the imageClass should always be the runtime dpi.
I see that in your MultiDPISplashScreen class extends CustomSplash instead of the SplashScreen. Maybe that could be the issues, where does CustomSplash come from?
Edit:
The issue seems to be that in the SplashScreen class we don't undo the automatic dpi scale factor when the scaleMode="none" (the default). When this is combined with different images per dpi, this will cause the observed behavior. Setting scaleMode to any other value should fix the issue.
If you need to have the image centered and not scaled, then you may follow the work-around posted by Uggers at the end of the thread (bottom of the page) at http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html#articlecontentAdobe_n umberedheader_5
Thanks,
-Evtim

Example of mobile Skin

Similar Messages

Maybe you are looking for