... I'm trying to figure out whether the following is possible switching from desktop to mobile:
Mobile to desktop- different table design
Basically on the desktop I'm planning on the item description appearing in the info box on mouseover, but on mobile I'd like the info to simply display in a table. My question is: is this possible using only CSS or is there some server-side shenanigans I'd need to employ when rendering the page in terms of different HTML includes?
The only thing I can think off the top of my head is some sort of complicated showing / hiding of elements using #media queries plus some fiddly placement, but I feel like there must be a straightforward way to achieve this?
If anyone can point me in the right direction I'd be greatly...er..grateful!
Thanks!
Stu
Related
I am experiencing some delay in rendering part as my page contains lots of components like (inputs and labels etc). I have placed them in panelgridlayout.
I also used audit method in jdev there also found lots of time is taken by rendering.
So, I want to know which component will be the best or suitable for this. I also implemented panelGroupLayout (with horizontal and vertical) and panelfromlayout but has same slow rendering problem.
Please help me on this.
You need to check how many layout managers you have inside of others. Too many layout managers inside one another can affect render speed.
PanelGroup Layout is for taking a "small" island of content and making its contents horiz, vertical - like buttons or fields or even groups of other islands of content - or add scroll bars if needed, like for a table.
PanelGrid layout is designed to layout a "larger" area and give the layout a grid and allow you to place items almost exactly where you want it.
Some layout managers are designed to layout "the whole page" - like PanelStretch, PanelSlider and PanelGrid, while others are for specialized tasks or group of content, like PanelGroup, FormLayout, Tab, Accordion.
So, depending on the layout, using PanelGrid may mean you do not need the others, and can simply free position all the item which may speed up rendering.
That said, there are many variables that affect rendering speed, and the complexity of the items on the ADF Faces page is not the first thing we look at - The ADF Model layer, how that is implemented and how the data source is tuned (or not) can be a bigger source of impact on rendering.
You did not specify version, that would help as well.
Before PanelGrid we tended to use PanelStretch or PanelSlider as the main window layouts that laid out the main sections of the page - and put the other ones - panel group and formlayout inside it. With the advent of PanelGrid, some of this practice is no longer needed.
This, this and this may help as well.
A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/
ExtJS has a very useful layout mechanism called flex. It works by summing all the things on a row or in a column. Then the space is parceled out using the flex value divided by the sum of all the flex values. This results in a layout like below:
The Red box is an hbox layout, the blocks E and F have the given flex values that sum up to 3, so E gets 1/3 the width of the screen, and F gets 2/3rds.
The Blue box is another hbox layout, where all 4 pieces (A-D) have the same flex so each one gets 25% of the space.
What isn't shown is the surrounding vbox layout where the blue box has a flex of 22 and the red box has a flex of 78.
Is there anything like this kind of layout in Angular? If there isn't, how would you put this together in Angular?
Additional information based on some of the answers below:
I want to be able to replace extjs with Angular. To do that I need some functionality that I have in extjs that I don't know exists in Angular. I've found ways to watch for screen size, change to adjust the overall display size, but I haven't seen a good example yet of a directive that essentially introspects its constituent directives for this flex value and sets their size based on a size change event of the container. Flex doesn't work from inside the divs, it works inside the container of the divs, because it has to go across all the divs in the container to divide the space correctly. I haven't seen an angular directive that does this yet.
I have no actual development experience with Angular yet (I've watched many of the videos from http://egghead.io, I've read documentation and tutorials, listened to this podcast: JSJ-Angular) and so I don't know if this is something that is easy to solve, or hard to solve, or if someone has already solved it. This flex layout is wickedly cool and easy to use, in fact for full page apps, I'm not sure there is an easier way to lay them out so that they stay full screen and are malleable to screen size changes. Grid systems are great for some things, but they don't address what the flex system addresses.
I'm trying to see if there is a way to leap from extjs to Angular without really making my life difficult.
Additional discovered information:
Looks like flex is becoming a display type now in the form of the CSS display: flex or display: inline-flex (with prefixes at the moment)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to see the illustration calls it the Holy Grail Layout example. Of course IE won't implement it right, or in a timely fashion, but my customers don't mind using Chrome if it gets the job done.
Turns out someone has create one and it does MOST of what I was looking for.
http://ngmodules.org/modules/flexy-layout
You missing the point. Angular is only JS library that helps you with:
modularization your code
allow you load content asynchronously
change content using "magic" (two-way bindings)
etc.
It doesn't describe style of your site. You have to do it by yourself or use one of popular fluid/responsive CSS frameworks, i.e.:
Bootstrap by Twitter
Zurb Foundation
Inuit.css
Pure
Gumby
Metro UI
etc.
Just choose yourself and then apply to your site. Using that also make your design independent from JS (which is very bad) and JS framework (which is 9th circle of hell).
we want to make application like silverlight showcase Mapview
where we can search by different category on left hand side panel or people can select country or region on map. can anyone suggest some sample or guidelines to implement this?
Thanks
Given the complexity and obvious expense, I would be really impressed if anything like that was released as a sample (Microsoft are you listening?). It requires a lot of data to drive it.
I have been involved in creating a Xaml World map from scratch (below) and that alone took nearly a day for a stylised polygon version (no fine detail)....
Quoting myself: "You import a map as a background image and use the pen tool to dot-to-dot trace around the country. Combine all those path segments into a single path. Then create a separate poly-path for each state (close them to allow for a fill)."
Once you create them you can name the individual country polygons and connect up mouse logic to make them all glow on mouse over or change colour on press etc.
Basically all the other stuff on that screen are user controls and custom controls. Work out the behaviour you want and create controls to suit your own needs.
i want to display a table (like a footbal table) in silverlight in a windows phone 7 app. i was reading a bunch of articles on the www, but couldn't really understood what's the best way to approch this issue.
i am new to silverlight, so some code would be really awsome. I keep the data i have to display in some Lists (List), but i could change this...
any advices? thank you in advance!
naic
Due to the form factor [of almost all mobile devices] lists are much easier to read.
You will see this in the default templates for WP7.
There are various ways you can create a "table" in Silverlight. (I assume you are refering to a league table.) The easiest would probably be a grid or a templated list.
If you really must do this I would suggest having 2 different ways of displaying the data depending on screen orientation.
In the portrait orientation I would show a list with minimal statistics.
In the landscape orientation I would show a table layout which could include multiple statistics as there is more horizontal space.