How can I add a layout (a HorizontalLayout to be specific) to a Flex UIComponent?
I'm working on a large mobile application, hence I'd like to avoid using additional containers like HGroups and work with more lightweight components.
As usual, any help would be greatly appreciated!
You can't and you don't really need to.
You can't, because only Spark components were designed with an encapsulated layout mechanism. mx components were not and you can't assign a layout to UIComponent.
You don't really need to, because Groups were already designed to be very lightweight containers without any graphical elements in them. Their only purpose is to layout other components.
Now if you really want to trim them down, you can always create your own copy of Group that contains only the properties you really need, but in my opinion that would be a huge time-waster for a barely (if at all) noticeable gain.
Related
Hi Im currently creating a Website (who isn't?). My Website Design Looks like this:
Desktop Version:
Mobile Version:
(Sorry for the Big Images)
As you can see, ist not much changing.
Sidebar and the Global Nav are disabled in the Mobile Version (Menü via o/Off Canvas)
The main Content Layout Changes.
The Layout in the Content divs Changes too. (Use nested Colums fot that in the Grid System?)
My Question is: Should I use a Grid System? If Yes: Should I just use it for the Orange Content Area or for the hole Website?
Added: The Site should is Full with!
As mmgross said, you're asking a pretty broad question that comes down to taste and experience in design.
There are a number of tools and frameworks that give you access to an already defined grid system; Bootstrap is probably the best known but Foundation CSS is becoming very popular and is lighter weight. If you're not planning to do much intricate styling and just want a preexisting grid, my personal choice is Skeleton - it's very lightweight but adds the grid/responsiveness you're [probably] looking for.
This brings up the other main point: how experienced are you using HTML/CSS? One of the big benefits of using a grid is the responsiveness that comes from them without writing a number of media queries. Still, you'll have to at least write one media query to detect if mobile, so if you're comfortable with position in CSS then it might be best just to pass over grids and write it all yourself (looking at your layout, that's what I'd probably do).
It's always a trade off between time it takes to do the task and time it takes to learn something new, so keep in mind that the learning curve for some of the frameworks might be steeper than you think. Then again, if you're experienced with using them, it will probably be easier to stick with what you know than play around with the raw CSS.
Hope that helped!
How to achieve a true BorderLayout effect in GWT?
If possible without a library?
If I need to use a library, please not a payed one, neither a deprecated one?
From Kinjal's post, the 2.0 *LayoutPanel classes are almost certainly what you want. The DockLayoutPanel and its subclass the SplitLayoutPanel will provide this functionality in two different ways.
There are two important things about using Layout Panel classes. First, use a strict doctype (such as the html5 doctype). Second, all panels must be given a size and must be informed of resizes - this is why they all implement the RequiresResize interface.
The easiest way to do that is to start not with a RootPanel, but with a RootLayoutPanel - this will ensure that you get resize events from the browser window. Then, add in the layout panel of your choice, and it too will be resized.
If you build your own widget subclasses and want to be notified when resizing happens, you too should implement RequiresResize. Similarly, if you are building a widget subclass that will be sizing its children, you should implement the ProvidesResize interface.
Use HLayout or VLayout and set custom css style to achieve it.
You can also take a look at this Layout documentation
I have coded a very complex php game with around 40 pages. I am now in the process of designing it. Would responsive design be the right choice in this case? What other options are available? Maybe I should just make three layouts (3 different stylesheets - normal, tablets and mobiles)?
It just seems like a ridiculous amount of work moving all these elements since there are so many pages.
Creating a responsive site is not that difficult from the html/css point of view, although I'm not sure how your php will affect that. You actually always have the same classes/ids, and just apply styles to them using the media queries (inside the same sheet). It would mean a lot more effort to write 3 separate sheets, but then again: depends on your code. In general, the trick is just to have good semantic, clean code (use positions wisely, for example). It takes some time to get everything organised at first, but once you have the basics structured with responsiveness in mind it gets really easy. Those 40 pages should all have the same structure, right?
Another option would be a liquid design. Instead of changing the styles, you use percentages or dynamic measures. But I strongly recommend grids, and you only have to do it once and it won't be long until everyone does responsive sites.
But if the game is complex and need some serious tweaking, you should consider doing a completely separate thing for mobile (tablets should be easy enough to adapt, your choice). It really depends on the product design, things can look very different in 320px wide. Good luck with the game!
If the content will be the same on all the devices and you can't think of a good reason to fork the code to provide different content for different devices, responsive design is the way to go.
I'm building a business application which mostly involves tables and other typical form elements. Due to the nature of my application however, I need to place groups of these elements together in a dynamic tree structure which will take up all of the available screen real estate. If real estate is low, there will be some form of smart scrolling allowing users to focus on certain areas of the tree. It could be called an advanced data visualization web form.
Historically, I would have accomplished this by simply using divs and javascript. The canvas element however seems like a more logical way to build my structure. Most uses of the canvas element that I can find are however geared towards graphics and animations (mostly games). Is canvas overkill for this? Will I benefit from using it? Are there alternatives?
Yes, canvas is overkill. It is very much a drawing board and not much more. It is certainly not something that I would expect to create user controls in. Games etc. are more suited as they aren't really standard user controls and wouldn't be expected to behave as such.
A tree structure could easily be implemented with a series of nested uls. Using some JavaScript to expand collapse them by adding and removing classes.
Here is a nice jQuery plugin for you to use or get some ideas of how you could use it.
Edit:
I would stay away from canvas just because of the overhead of the drawing. If you can extend a standard JavaScript treeview to add more functionality this would seem like the best option ot me. Creating controls from scratch in canvas is no small feat.
Edit2 (Post mockup):
This just looks like a multi-part form to me, with hidden forms/areas which are displayed as apropriately. This is far too common to require creating this with canvas.
Canvas is not fully supported in all browsers yet. I recommend using either Jquery or another framework.
I was having a chat with a designer about how to make my life easier to build site templates. They showed me a page layout overlaid with 24 columns and I can see that everything fits very nicely within the the 24 columns but I fail to see how this can help me build templates more efficiently and accurately.
My preference is for the designer to provide a page design overlaid with dimensions, much like architectural blueprints. This is how I've always done this, but I am open to faster and better methods.
Any opinions/ideas on this?
Steve
It lets you rough out designs in PS and write the initial layout code much faster, though it does have limitations/annoyances.
If you want a bordered box with padding (etc) within those columns you'll have to nest a tag inside a "grid_x" div, otherwise it'll send stuff off the grid.
give a try to fluid24.org maybe can give you some ideas