I am trying to get my application looking somewhat decent and flex uses CSS so does that mean I can use bootstrap? I just don't know how I would implement it in the code once I have the CSS as mxml is different to html. If not, are there any other frameworks I can use to get my application looking better?
No; Bootstrap requires javascript (not available inside the Flex app). Also, Flex uses its own customized subset of CSS with some important differences from the spec.
Related
I'm about to start my first Angular project, and I'm thinking about using Angular Material.
It has a lot of components which is what i'm looking for but it seems to me that it does not have a grid system nor any utility classes.
Should I use for example Bootstrap or any other css framework along with Angular Material or simply add my own css? What's the common practice?
Having to add classes for padding, margin and so on is a waste of time so I'd be inclined to also use Bootstrap which already has all these kind of classes.
My only fear is that having both Angular Material and Bootstrap would increase the bundle significantly.
I am using the following for my project
For grid, checkout this https://www.ag-grid.com/angular-grid/.
For
angular wrapper of bootstrap you can check
https://valor-software.com/ngx-bootstrap/#/documentation#getting-started
You may also want to check
https://primefaces.org/primeng/showcase/#/setup this has UI
components as well as their own spacing and grid setup
https://primefaces.org/primeng/showcase/#/primeflex/spacing
I was talking to someone about Flexbox, and he said Flexbox is a library/light-framework which sounds a bit weird to me and now I'm confused.
Is it a framework or not?
Flexbox is just pure CSS, not a framework
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents
Flexbox is a commonly used term that refers to the CSS Flexible Box Layout, which is a CSS technology. It is just plain CSS.
Of course, in the same way jQuery is derived from JavaScript, there are various frameworks that have been derived from flexbox (e.g., Angular, React Native, Bulma, Flexbox Grid, Basis, etc.)
I don't think so. According to wikipedia, a framework is software used to alleviate a lot of the work associated with web development (source). I would not consider flex a framework simply because it is default/native/included browser behavior. No external software is needed to use flex in your website.
I don't think there is one definition for what a framework is, but I have never considered default html/css behavior to be a framework. To me, a framework is code that I have to install or download to be able to use in my website.
CSS3 (unlike its predecessors) is a collection of specifications.
CSS Flexible Box Layout (or Flexbox) is one of these CSS specifications.
Others include:
CSS Color Level 3
CSS Selectors Level 3
CSS Media Queries
CSS Multi-column Layout
CSS Shapes Level 1
CSS Grid Layout Level 1
CSS Writing Modes Level 3
and so on.
For the entire range of CSS Specs currently completed or in development, see:
Descriptions of all CSS specifications
CSS Current Work (summary)
I just started working with Polymer and their starter kit. I want to have a standard hero image with a text overlay - naturally, I want the image to be responsive. I've gone through all the Iron and Paper elements and can't seem to find anything that works.
I've tried using the Iron image, Flex layout, and Media queries in various compbinations to get what I need, but to no avail. I've found several 3rd party components like x-imager that will do the trick, but I would've thought such basic functionality would be available right out of the box like it is with pretty much every "responsive" framework - and yes, while I know Polymer isn't supposed to be a framework, I guess I expected it to be part of their component library. And yes, I also know I can create a simple CSS class that does that like Bootstrap does too, but I'm looking for native functionality, out of the box here.
Is there something I'm missing here or should I just create a custom component and move on?
I've been told several times or I've read in various places (can't remember where exactly right now) not to use Tween classes from the Flex SDK but to use instead other animation libraries like Tweener, TweenMax, GTween, ...
What's wrong with using Flex tweens? Is it a performance issue?
If I want to do states transitions, should I make custom transitions with third-party libs?
For reference, here are some helpful things:
Actionscript Tween Performance Comparison - Browser crashes when you use default Flex 3 Tween classes.
Mr. Doob's List of Actionscript Tween Libraries.
If your goal is just to do state transitions in skins, then it is easiest to use the Flex Effect classes. Flex 4 is about to be released and it has completely rewritten its Effect library, much faster than Flex 2/3. I ran a quick test with tweening 100 mx.controls.Button instances 500ms each, one after the next, using TweenMax and Flex Effects, and TweenMax was about twice as fast (meaning I could see 15 objects moving at once instead of 7 or 8). So if you can, I would do all animations with TweenMax. Definitely the most versatile/popular/modular/optimized. But for skins, and because Flex Effects are ready to use in skins in MXML, use them.
Also check out Tink's Efflex Flex Effect Library for some nice Container/Viewstack effects (some in 3D).
Depending on what blogs you've been reading they might have an emphises on flash/actionscript. In which case it might recommend something like tweenlight or similar.
If you are using flex and its libraries then there is no reason not to use the flex effects (which are based on flex's version of Tween). Note that the flex Tween is different than the flash Tween. But you don't really have to worry about that, if you wish to move something, just use the Move effect, if you wish to fade something then just use the Fade effect.
Some people may recommend another tween package because it makes the overall SWF size smaller, but it depends on how you are building the end SWF. Are you deploying the SWF with the flex framework as an RSL (recommended although Google can't search your SWF yet if you do this, check this link) then it would be best to use the Flex effects. If you're not using the framework as an RSL then it would be a case of test you app to see what version came out as the bigger SWF file.
I've never had any issues with performance using the flex effects.
Some of the 3rd party tweening packages do effects that are not part of the flex library, but other than that I can't think of any good reason not to use the flex effects/tweens.
Is there a preferred way to handle animation when using Flex -- For instance, if I want to render a ball and bounce it around the screen?
If you're building a Flex application, you should use Flex's native Effect classes. They're probably already compiled into your app, since the core components use them, and you won't increase your SWF size with duplicate functionality like you would if you used another library. For simple animations, either mx.effects.AnimateProperty or mx.effects.Tween should work well.
If you're working on a regular ActionScript project (without the Flex framework), then I concur with the answer given by Marc Hughes. However, if that's the case, then please don't say you're using Flex because that implies that you're using the Flex framework and it can be very confusing. If you mean Flex Builder, then please use the full name to avoid potential misunderstandings.
You can't always use Flex's effect class with plain sprites. Certain effects expect your target object (the object to be tweened) to implement IUIComponent interface, while others don't. So you can either use mx.effects.Tween, or if you must use the one of the effects classses, you will need to coerce your sprite into a UIComponent.
Another option is to use one of the tween packages suggested above or roll your own with goasap!
goasap
I prefer to use a tweening library for things like this. Check these out:
Tweener
TweenLite / TweenMax
KitchenSync
I've had good luck actually using the first two, and have read great things about the last one.
You can use mx.effects.AnimateProperty even though your target is not a UIComponent.
If the tween you want to acheive is a simple one (Move, Resize, Fade etc) this saves you writing the boiler plate code that mx.effects.Tween requires.