Disclaimer, I posted this here, but was told it wasn't the place since it was more of a question of approach than non-working code. In hindsight I agree, SO isn't really the place for discussing things.
Apologies for the long post, I've tried to only include the relevant bits and the code works, I'm just looking for a better/more accepted method.
I've used this as the base of what I'm doing: http://sonspring.com/journal/jquery-desktop
I've got a main page that lays out the desktop environment, each widget will be called by clicking on a link like this:
Any advice/pointers would be very much appreciated, thanks in advance.
it's a neat idea, but it seems a bit complicated to me.
i have some bones about the markup:
i prefer data-attribs to trying to re-jigger existing attribs.
inline styles are harder to maintain and adjust than CSS.
the init routines look a little too boilerplate-heavy to me.
But, don't think that i am typical at all.
If it works for you and you can build and expand it, go for it.
a widgets is typically a combo of html, css, and js, not just JS.
you CAN use pure JS to build the widgets ui, but it would be a lot more code and harder to maintain than adding behavior to pre-styled HTML chunks.
if you don't need firefox compat, you can store raw html and css in a function's comment block. this lets you keep all three formats in one place and without escaping. Still, most people need firefox, so it gets complicated, and there's no "right" way".
one the one hand, you want all code unescaped for long-term maintenance, greater readability, and text editor suggestions. These assets are usually store together by type, in folders such as /css/ and /js/... On the other hand, you don't want to have to create several files, especially in several different places, each time you add a widget.
Lastly, you don't want to repeat yourself and make each widget a lot heavier than it needs to be. For example, Tabs and Accordions are 90% the same thing, just some behavior adjustments and some different css. It would be nice to be able to add capabilities like "between visit selection persistence" to both widgets from one place. If you had ten widgets in 38 different files, that simple upgrade can be a real chore...
i don't have a perfect solution for you. i would try to build two or three master scripts that provide a framework for making the widgets i need. I think this is how YUI works.
you may want to look into newer copies of dojo: they have a lot of self-contained interaction widgets, and they are now famous for self-loading self-contained widget architecture. I must warn you that AMD modules are probably going to make your head spin at this point; they still give me headaches.
Thanks, that's really useful input.
I hadn't considered data-attribs, makes sense to convert those and stop abusing the rel tag ;)
I'm not sure entirely what you mean by boilerplate heavy, do you mean that it adds spurious code that isn't really needed/too formulaic?
I get your point on inline styles, but I'm not too concerned about them since they're only to initially lay out the "icons" on the desktop, then they're all draggable.
Thanks for the pointers on Dojo and YUI, I'll check them out. I'm intrigued with the approach of putting css and html in the comment block, what would this look like? I don't need FireFox compat since it'll be used in an intranet environment.
As for repeating code, I was getting round this by including common libraries in the desktop page at load, so they'll always be there, Jquery, Jquery UI and datatables to now.
Thanks again for your help
as long as your css or html does not contain "*/", you can store it safely in a comment. all you need to do is grab the function's string, split it at the comments, and bingo: multi-line unquoted or escaped text.
i've been doing this sort of thing for at least five years, and it's even better on mobile than it was for desktops, thanks to webkit being king. the code in that linked post is ancient, don't use it (E4X is dead in FF now/next ver). it was from a time when there were really only two browsers: blue and orange...
anyway, here is a copy/demo of the ripper i use for single-block markup functions:
Sorry for my delayed response, I can see how that's useful.
Yes, I can move the loop for the widget into a base file and I hear you on the meta - It's something I'm a big advocate of in other coding projects.
Thanks again for your help
IF anyone's interested in a similar project, I found that the most efficient/neatest way of doing this is through a module loading library. I've used requirejs, the basic method is:
A main loading module that handles all the desktop set up and handles the loading of additional modules. Standalone js modules are then called as required and added to the desktop, these are pure js/jquery modules containing no html. Each of them contain a url to the html for the "widget" which is called by the main desktop js.
This approach has allowed a lot of flexibility, where the widget html content needs to be rendered by the server the page is called via ajax, otherwise the js in the widget builds the html.
requireJS has also reduced initial loading times since there's no requirement to load js libraries that aren't linked to widgets just in-case the user wants to use them
|All times are GMT +1. The time now is 08:46 PM.|
Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.