I'm wondering what the best tool is for developing a mobile UI is. My requirements are that I retain full control over the look and movement of every UI component. I think Flex might be the best way to do this but I can't tell if I'll have that level of control using their UI components.
Any links would be appreciated. Thanks!
Edit: For example, looking at the documentation I see there's a an 'enabled' field which dims the color of a container and it's children if false. Am I able to change that so, maybe a repeated bitmap pattern appears if false?
Or, if there's a sliding menu can I edit the speed and change in speed as it closes?
You can create any component you like and make it look like anything you want. You don't have to use standard components. You can reskin any components just by specifying a new skin. It's really pretty easy.
You can create custom skins for Flex, for both Spark and Halo components. You also can create custom components, either based on other existing components, or based on the base component. You could even create custom objects which are just based on Sprites or similar (if you like to have control over everything :P).
edit
In response to your updated question. Regarding the enabled/disabled property, yes, it is possible to skin that. Spark components have states, for example a Button has a up, over and down state – and an disabled state. That state is exactly what is active when the enabled property is set to false. So yes, you can skin that.
Regarding the sliding menu animation, I'm not totally sure if that would be easily possible as I believe that this is coded into the component itself and not part of the skin to decide. However even if that is the case, you could instead create your own component that basically features exactly the same functionality but has a changed animation there.
I'm not sure if the Spark skinning wouldn't be able to do this though, because what you definitely can do is creating transitions between states. So if the slide is made with different states, you'll probably be able to change the transition as well.
Related
I want to know what is skinning and what is custom components? I know this is so chilly question. But I would like know about it. And where we have to use skinning and where we have to use custom components? If it has any similarities , please tell me about it.
I just want the clear explanation about these two things.
Thank you.
Skinning -
For example, dropdownlist open dropdown, which has default hovered color, selected color, etc. which you have to change according to your application, then you can change it by skinning the dropdownlist component...
Custom component -
For example, button component has default events like, click event, mouse evnt, etc. and according to your application you have to remove some of events or modify some then create button with your event...
Please check below links...which will help you more...
Need the example to use custom component in FLEX application
http://coenraets.org/blog/2010/01/creating-a-custom-component-and-skins-in-flex-4/
Skinning is about the look and feel of the application. What colors to use, drops shadows etc.
Custom component is tweaking an existing widget, combining widgets or creating a new one from scratch to achieve functionality that does not exist in the standard Sdk. Good examples of custom components are charts from 3rd party vendors
I'd like to add visual emphasis to a selected UI component by de-emphasizing everything around it, e.g. make everything around it blurry, or more transparent, or something similar.
Two questions, really:
spec: what effect would you use do build something like this? Do you know of any software that does this well?
implementation: what is the most obvious approach to apply a blur, or change alpha, to everything around a specific component?
thank you all!
If you display the component using the PopUpManager, everything else will 'blur' out on it's own. You won't be able to interact with it, though.
I you don't want to use PopUpManager, then manually disable everything but the component you want to highlight. This could be dead simple, or could be horribly complex depending on your architecture and how components are laid out in relation to the component you want to highlight.
If you don't want to disable a component, but do want the disabled 'look', then most Spark components have 'disabled' SkinState. You could copy the design to the active state, or create a new state for your "not de-activated even though it looks like' state.
I wanted to consult with the sages here regarding Qt and skinning, get your opinion and chart a path for my development. My requirements are as follows:
My Qt/C++ application (cross platform with Mac, Windows and Linux versions) needs to have modular skins.
A skin is defined as a set of one or more elements: - Window background texture - Look/feel of UI controls such as edit boxes, drop down, radio buttons, buttons etc. - Look/feel of window "caption", resize grips etc.
Skins will be installed with the application installer, allowing the user to choose which one he/she wants to use. Users should be able to change skins on the fly.
Can I go the QML route? should this be custom and based on simple resources which are built into the application? Any design advice will be appreciated.
Thanks.
If I understood you correctly then stylesheet is the best way forward. You can create stylesheets similar to CSS and then pass them as command line option to your application or load on invocation to style your application at runtime. That way you can create multiple stylesheets each having a different look and feel and allow user to load them at will. Since its CSS it doesn't need any new learning and you can keep all your styling outside your source code.
Here are a list of resources that can get you up and running quickly:
http://blog.qt.io/blog/2007/11/27/theming-qt-for-fun-and-profit/
http://doc.qt.io/qt-5/stylesheet.html
I haven't played with QML yet, but you could also create a custom QStyle implementation that supports your resource format. Note that you'd lose style sheet support if you went this route.
Changing window captions is a little trickier if you want portability.
QML, if I understand correctly, doesn't really skin the widgets, it mainly deals with GUI layout etc etc.
QStyle is used to change the looks. It is a bit low-level though, and requires programming, so if you want to load different user-created skins (from an XML or so) it might be tricky to support extensive skinning. Chaining colors and a few items are easy enough though. (There might be someone else who've done something you could re-use.. not sure.)
For modifying widgets, use QStyle::polish(). You could use that to change the background picture (if it's a top-level window, or of a certain class). There are numerous repaint method to change almost every part of every widget.
Store/load the style using QSettings, by reading and setting the desired Style just after QApplication but before your main window is constructed.
Can anyone explain difference between the ViewStack and States?
Thanks,
Ravi
The ViewStack and States actually aren't really related. Can you rephrase to make your question more specific?
The ViewStack is a component that is used to display different views (normally of different data, but not necessarily), one at a time.
States are related views of a single set of data. For example, you may want to have a 'normal' view and an 'advanced' view of, say, a user's profile - where the advanced view displays more options, or a larger picture, etc.
States work with Transitions, which are coordinated animations that elegantly switch between states.
That's a real brief explanation. Hope it's useful.
Although, you can use both for the same purpose, but the way I see it, I think ViewStack is more of a container, think of it as like a book that you can flip to the different pages of.
In a State, you can apply a set changes to various different components, and when you change to that state, those changes will be applied. When you go back to original state, the changes are removed. That way you wouldn't have to recode all the components if you want to show them again, but only slightly differently. You'd have to do that if you use a ViewStack.
There are a lot of changes between Flex 3 and Flex 4 State changes.
http://blog.everythingflex.com/2009/05/12/flex-3-vs-flex-4-state-management/
What I'm trying to do is to create a fancy custom-shaped login panel. It's functions and containing components should be pretty standard, just like in regular login panel - FormItem, TextInput, Validators, etc. I did some research and found that it is possible to create skins using Fireworks, however this does not solve my problem because it does not allow me to manipulate with panel shape. What would be the best way to do it?
My recommendation would be to use Degrafa framework for something like this. You could programmatically affect the skin of your component at runtime to change its shape.
Another route would be to use a simple canvas with image backgrounds that conform to your needs, but this isn't very flexible.
I would do the following:
Export the asset from Fireworks as a PNG with appropriate transparency
Embed the asset into your app and supply the appropriate Scale9 coordinates
Reference the embedded asset as the "borderSkin" style for your Panel.
Here's an example of doing this to a TitleWindow which is a subclass of Panel, so the same approach should apply:
http://butterfliesandbugs.wordpress.com/2008/02/15/using-a-border-skin-for-a-titlewindow-in-flex-3/
I'd agree with Joel, Degrafa is the way to go for total custom skins etc. Failing that (as it is an extra hurdle to figure out) I'd fudge it be using a Canvas instead of a Panel. Extend the Canvas class and make it look like whatever shape you are trying to do. Set the Canvas's background alpha to 0, then add the shapes you need. Using this approach you may well have to duplicate things that the panel can do that the Cavnas can't but you'll be able to customise the look.