I'm currently putting together a PoC for the web. I've done about 9 years of iOS development so I think in those contexts/concepts. What I need to build is something similar to a UIScrollView/CATiledLayer for the web.
I need to build out a tool that allows users to build their own flowcharts, something I've already built on iOS. I'm prototyping on the web and I'm not sure where to get started. I've played around with a few canvas libraries thus far.
I want to build something that can have a fixed viewport with other components rendered off-screen. The viewport has fixed bounds that you can expand and allows me to put subcomponents in the view and move them around if I'd like to.
My web/javascript experience is pretty much Ember, React and plain old ES5/ES6. My HTML skills aren't that strong and I think I may have missed something fundamental.
My goal is to have something that can work with an existing react stack my company uses. I'm happy to roll my own solution but would love to get advice about the right direction to pursue. I feel like I have almost nil domain knowledge in this area.
This JS library, Dracula should be of great help to you since you're working with drag and drop flowcharts. You can see a working example here. NOTE: This lib is based on SVG and doesn't use canvas.
Here's another beautiful live demo: Source code for JS Flowchart here
Also take a look at this Dragon drop fiddle
And regarding ScrollView in HTML, you can simply use divs with css styles overflow-y: scroll and/or overflow-x: scroll. Using flex layouts, apart from giving you mobile-like development feel, will help you have so much control over your layouts based on the screen size.
Hope this should get you started.
Related
I really like the idea of StickyHeaders (https://www.codenameone.com/blog/sticky-headers.html), they're great for usability, but the CN1 implementation was never fully developed or included in CN1. Solutions exist for iOS and Android (https://github.com/emilsjolander/StickyListHeaders and http://applidium.github.io/HeaderListView/).
The two main features I'm missing in the old implementation are: that each header visually 'pushes' the previous out of the top of the screen (and vice-versa when scrolling down), and that the stickyheader which is 'stuck' at the top of the screen is the actual stickyheader itself, so that eg. buttons inside it will work.
Are there any plans to add this to CN1 sometime soon? Or anyone who has implemented a similar solution (I tried Chibuike Mba's alternative implementation mentioned on the original blog post but it doesn't cover the features I'd like)?
Alternatively, any pointers to how I might implement this myself?
I've already tried a couple of times, but given up since I don't master the details of CN1 graphics etc well enough. The approach mentioned here How to make sticky section headers (like iOS) in Android? sounds like a good approach (add a container on top for the stickyheader, scroll that container when the next stickyheader arrives), but then how to force the size and scrolling of such a container?)
This should be much simpler to implement today as we have two helpful features:
Scroll listener
Layered pane
You can use the scroll listener to detect the location of a header and appropriately place another component in the NORTH of a Container within the layered pane. Then as scrolling happens and you detect a new header is coming in you can just place it in an X/Y position below the existing component and use animateLayout to push it out.
I have been working on Foundation 4 framework.I just want to know whether off canvas layout system is required for this version or not. As per my knowledge its not required because they have added mobile support with 'Mobile First' theme.
Please correct if i am wrong.
Thanks,
Srinivas
Off Canvas Layouts is not required for Foundation 4 because it was written for version 3. But while it was written for V3 it can work with F4. I know, and not only by opinion, but as a matter of fact, as I have played with it already and have a proto using F4 with off canvas layout specifically with the sliding panel similar to this.
For better UI in small devices Off Canvas Layout is awesome. Like if You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). You should really use it. And Of course, if you have downloaded the latest release from github repo or via website it is already come with Zurb Foundation 4.
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.
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.
I'm using DNN 5 for a hobby site. I know asp.net development, but have never written a DNN module.
The site is basically a project log. I want content areas that combine text and image thumbnails in a page, like a set of instructions. When a user clicks a thumbnail, display a popup div containing a larger image modal like on a lot of sites these days. Basically I'm looking to wrap each image in functionality like provided by highslide JS, but I can't figure out the right way to implement highslide JS in DNN.
I'm not averse to buying a module that does this for me, but everything I've found is more gallery based. The main difference is I want to control individual images that are among/next to the text, not a set of of images for users to scroll through.
I figure this can't be too crazy an idea, someone must have done it before. Any tips on good approaches would be appreciated. I'm tempted just to go edit source, but that makes upgrading a pain...
Thanks!
If anyone else is looking for this functionality, there's a project on Codeplex which looks pretty good at least as a gallery for DNN. It implements the highslide type popups well.
http://wnslightbox.codeplex.com/documentation