In my app, there is going to be a page that occupies the whole window (i.e. you can't scroll in any direction, the page resizes itself to the window size). I'm sure I can do some CSS trickery to achieve that, but this page is also going to contain some resizable areas. Basically there will be a sidebar that the user can make wider (within a min-max range).
Essentially what I'm trying to do is recreate this page if you select "Border" under Basic Layouts. I'm at a bit of a loss about how to do this. Should I try introducing some jQuery UI, or is there a purely AngularJS was to do it?
I know I haven't provided any code, so I'm not expecting anyone to give me the full working code. But a nudge in the right direction would be great!
No, there isn't a "pure" AngularJS way to do it without writing some new code or adding a framework to the mix such as you mentioned. I'd suggest looking at the more popular UI frameworks and see how they fit (maybe jQueryUI, or even Sencha).
Additionally, you sh/could write a directive to wrap your usage of the component to black-box it a bit more and be in the spirit of AngularJS (& so that you could more easily replace it in the future).
Given that type of functionality can be a bit tricky to create cross-browser (depending on browsers supported), it's probably best left to others who've done it.
A bit late but guess it is what you wanted AngularJS UI Layout
A borderlayout or splitterlayout plugin with AngularJS.
Related
I found this library for responsive CSS on github and then I started to ask myself... is Elm responsive? Theoretically, Elm does anything that HTML, CSS and JavaScript can do... I do not see any ways to read inputs such as operating system or screen size. And there may be other factors I am neglecting.
Perhaps one can write a port?
I have seen at least one case, F# where outside effects or requirements are handled by comonads but that is rather sophisticated solution. Here is a blog on co-effects which talks about Context-aware programming. It sounds sophisticated, but it's exactly what we want in responsive web pages.
Image from Wikipedia.
Most of responsive design is going to come from CSS via #media queries, so the main job of Elm is just to output HTML that isn't hard to style (e.g. avoiding tables for layout or inappropriate inline styles).
If you're wanting to dynamically do something based on the screen size, you can use the Window package, which can either issue a Task to retrieve the current size or subscribe to resizes events.
In general, I would expect that the output of an Elm program won't conflict with implementing a responsive design.
Here you find a step by step instruction how to create a responsive page with Elm: Responsive Design with Elm Style Elements. It avoids juggling with CSS but adjusts the HTML output.
I'm doing a visual website with lots of stuff depending on the scroll position. I understood this isn't the ideal type of project for Angular. Since things are very interdependent, it makes it hard to isolate things. Nevertheless, I wanted to try and do this kind of project with Angular, hoping to learn a better way to create modular code.
I run into a structural problem that is similar with both scroll events and CSS:
I try to create my directives with less dependencies as possible towards each other. The result is that each directive that deals with the scroll has it's own listener to the scroll event. Maybe this is isn't so awful concerning performance (or is it?), but it makes it hard to know what happens first. In jQuery land I end up using one single $(window).bind('scroll, ..) function, putting all scroll logic in one place, then the order is clear.
Similarly, this modularity makes having one single CSS file awkward, ideally I'd like to set the CSS from inside the directive to encapsulate the behaviour.
I have a feeling there might be some best practices with these types of issues that I haven't found out about.
j
Seems like the answer to how to position components in Sencha Touch / Ext JS, especially with percentage or proportionally is pretty much to use some type of container with a layout type.
This seems like a step backwards to me - similar to what HTML Tables were for web page layouts. Create a containing structure that controls the layout and in each "cell" you have some content.
Specifically, if you have a component that you don't want SIZED based on these rules, only positioned - that is essentially what all the Sencha Touch / Ext JS approaches seem to be.
Layout type hbox, vbox, columns, flex layout, anchor. They all create containers around your components, instead of just directly positioning your components.
Am I missing something integral, or is this really the way it is?
Besides from the obvious problem of over-nesting, it seems like a more complicated approach, and creates a dependency between each component and the other components on the page.
I would like to have a way to say "this component is 30% from the top and 20% from the side", potentially also sizing the components using percentage - but not always.
The percentage / proportion approach is a must if you're developing for multiple devices.
If you are just getting started with Sencha Touch, it is easy to get caught up in the huge amounts of markup it creates. The key to developing in Sencha Touch is to let it do its thing and allow yourself to do things the 'Sencha Touch Way'.
Also, feel free to add classes to the components you are creating. You can manipulate these with CSS almost like a normal website.
Go through the docs. The frameworks have been around for a while, so, your issues with it have probably already been addressed.
I used Highslide JS about 5 years ago on this site: http://wela.ctc.edu/academy12-13.aspx (example page). Now I'm redesigning the site use Twitter.Bootstrap and am trying to figure out how I can tweak the Highslide popups to work in a small device width. Is this possible or should I use find another solution to implement? I've played around with the setting parameters in my highslide-with-html.js file, but the results have been unsatisfactory. If it is possible to use Highslide in a responsive design, would be grateful for any URLs to look at.
The short answer is that Highslide adapts very well to small devices if you're opening images. The expander is purpose-built to do just that - display the image as large as it can without exceeding the boundaries of the viewport.
But when opening anything else - an expander with HTML content, an iframe, etc. - the expander must initially be a fixed size. You can put a resize handle on it, but that's not really good enough for handling everything from a smartphone to a large monitor.
Without rewriting Highslide JS, overcoming this limitation would require that your page do its own detection of the viewport size, then either modify the call to htmlExpand() on the fly, probably with some jQuery manipulation, or change the .highslide-html CSS class width. The latter approach (targeting the CSS) seems like it would be easier.
I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.