gadget / widget manager - html

Does anybody know of any pre-canned gadget/widget management framework (along the lines of iGoogle etc) that I would be able to use on an ASP.NET MVC site (presumably loading divs via jQuery etc)?
In particular, I'd rather not write all the selection / location code if there is something decent already available. (I would expect to write the actual widgets / content etc myself...)

I was waiting to see if you got an answer on this one as it's something I'm interested in too. As you haven't, I'll tell you what I know (it's probably not so useful but it might get you started...)
I've used something based on the ExtJS portal demo in a previous project - there are some license costs involved depending on the deployment scenario though, and besides, it turned out to be quite slow and cumbersome, and rather tricky to customise - the default for the ext toolset is for the ui to be built entirely from javascript, not from markup, and while it was possible to coerce it into working on top of existing markup, it seemed more difficult than it needed to be. That aside, it worked well in the end, and with the paid version the support is very good.
I've also implemented a widget / portal screen based on jquery-ui sortable which worked really well - the basic implementation was very quick and easy but writing the code to save and load portal settings took more time than I would have liked.
If I were doing a similar project now, I think I'd evaluate this instead - it looks ok from a cursory glance and it's open source - it's built with jquery-ui sortable, so the core should be solid enough, and the slightly uneven animations on the demo version should be easy to sort out assuming it uses the standard jquery-ui sortable options. It has functionality to load/save portal settings too by the looks of it, so it should mean less hand coding that side of things.

I have used Telerik RadDock in the past and found it to be pretty good. It renders in divs and is relatively easy to style.
It doesn't cost too much if you are using it commercially.
http://demos.telerik.com/aspnet-ajax/dock/examples/overview/defaultcs.aspx

http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
This guy put together a great tutorial on implementing a iGoogle like drag/drop widget interface. Even links to a working example.

Related

Web Design & Angular Js Tools

I am Java developer before but now i am starting to work only on UI. I have little experience with UI. So I need a tool for Html 5.0, css 3.0, & angular Js.
Taking the comment above into account it is right for me to say the following answer is based on assumption but here we go:
I'm not quite sure what you mean by tools but if you mean a program to create your code in I would personally recommend Sublime text or Atom.
If you mean tools that are easily available to you to test and play around with your code then there are a number that are available to you, JSFiddle, Codepen and Liveweave are just a few.
I personally use Codepen as it has a nice and easy to use interface and I like the community around it, the homepage features a "picked" section which showcases user created content, it does however seem to have a heavy focus on "pretty" projects rather than functional ones. The editor it offers allows users to use a number of HTML, CSS and Javascript processors as well as use libraries such as Angular and JQuery. I created multiple angular projects using Codepen so I know it is capable of that and it is also really easy to implement it into a pen/project.
I hope this has answered the question but please remember that this is all my opinion each one of these things has their own strengths and weaknesses and overall the choice should be yours.

MvvmCross detecting RequestClose or back button pressed

I found this topic which says that MvvmCross has no way of detecting RequestClose or use pressing a back button: WP7 MVVMCross Detect RequestClose or BackKeyPressed inside ViewModels
backkeypressed-inside-viewmodels
Did anything change since May, 2012? Any reasons why this functionality isn't build into MvvmCross? I don't want to re-engineer the wheel it seems like this can be built very simply into Android, WP7, and iOS. If I don't find solution, I will end up building it.
The advice from before is still correct.
it seems like this can be built very simply into Android, WP7, and iOS
I may be wrong or missing something, but when in the past I've tried to build this, the simplicity seems to have become complicated quite quickly :(
While it may seem simple in one particular case, for a general framework there are numerous other cases to consider - e.g. when using pivots, tabs, popups, modals, split-views, etc - and in these multiple cases a standard approach may not be entirely universal.
iOS, in particular, sometimes makes this kind of detection much harder (especially in a general case where your UIViewController may or may not be inside a NavigationController).
What can be simpler is detecting and signalling the events for whether or not a view is visible - but even that doesn't seem to be entirely simple - there are cases in iOS where ViewDidDisappear will not get called - and besides, these events may simply not be what your app needs to respond to...
While it may feel like all you need is a wheel, the obvious fact is that there is no one universal wheel - wheels come in many different styles and sizes. I've now seen quite a lot of MvvmCross apps... and I've yet to work out what a standard app looks like. What's 'obviously' the right design and architecture in one app, can look totally different to the approach taken in others.
In general, I suspect that where individual apps need this kind of functionality then this will be in very well defined scenarios - e.g. with known view types inside a known presentation framework. In those cases, then I suspect implementing something just for that app scenario will be quite straight-forward for the app developer at the time. I also suspect that some of those scenarios can be shared between some apps - but I'm not sure that one code pattern will fit all - or even many.
I'm very, very happy to see users blog, github-post, or forum-talk about their experiences in this area when they write them. Blog posts like http://www.gregshackles.com/2012/11/returning-results-from-view-models-in-mvvmcross/ show how patterns can be applied and reused on top of Mvvm.
It may even be that out of such blog posts we find a way of getting more functionality inside the core mvvmcross (and other) libraries - but it's also important to me that we keep the core library as light, flexible and extensible as possible.
As people, like yourself, talk about their cross-platform mvvm experiences, I do my best to keep the links page up to date - http://slodge.blogspot.co.uk/p/mvvmcross-quicklist.html - that hopefully will help people share ideas, concepts and code.

How-To support Internationalization of JQuery Mobile Offline Web App (i18n)?

I am looking for a general mechanism to internationalize web application that have to work in offline mode.
Initially I was considering adding data-i18n tags to elements but this seems like a very ugly solution.
I came across http://panacodalabs.github.com/The-M-Docs/#components_&_utilities/m_i18n however I do not wish (or can due to time constrains) port my application to that framework.
I need a HTML5 jQuery Mobile friendly solution to this issue, that works in offline mode.
It seems to me that this crucial component is missing on the HTML5 framework.
I wouldn't necessarily say this is a feature JQM should provide, because this is probably done best with some server side logic.
there would be two ways I can think of doing this:
1. have all your language translations in some standalone js files, which you would have to include in manifest file. check the datebox plugin to see how this could be done ( top right - options).
2. create a local database and store translations in the required languages there.
i think the first one should be easier to handle, but probably harder to setup/maintain. also, depending on the amount of translations, js files do become large...
Have you looked at the jQuery i18n plugin?
http://recursive-design.com/projects/jquery-i18n/
I'm currently using it with jQuery 1.7.1 and jQuery Mobile 1.1.0, and it works perfectly.

Is developing a webbased app more efficient with Ext JS/Dojo & et al than with HTML/JQuery

The server side is pretty much set up, it's basically
struts 2 / spring security / jpa.
Now I have to decide what to do with the client side (the browser). The client side codebase should be maintainable and should lend itself to automatic regression testing.
So as an example lets say I need a table component having properties such as
sortable/pageable columns
reordering of rows and columns (via drag & drop)
inline editing of table cells
remembers state when customer re-visits page
integrates easily with struts 2
As far as I understand things there're 4 alternatives
DIY using oldschool HTML + JQuery + Ajax
Finding a JQuery plugin that does all this or
plumb together different plug-ins (like Flexigrid + additional plug-in for drag & drop)
Using a JS toolkit
Should I stick with JQuery? Or should I go for fullblown JS toolkits? I have little experience with JQuery and JS toolkits (I'm not a web developer).
Thank you for helping a serverside programmer cross the messy world of web-ui-programmming ;)
My experience is that Dojo's support for programming-in-the-large is great if you have a large-scale app that will benefit from the build system, class system, widgeting system and integrated widgeting library. It also of course brings all the standard stuff with it, like cross-browser support and event system.
If you just need some widgets and animations then any library will work. I'd stick with the one you/your team knows best. jQuery definitely has the greatest number of people with that skillset.
Our team wasted 6 months trying to give the client what they wanted with JQuery/UI, and we switched to ExtJS 4, and the client is happy after 2 months. This is an app with 50+ models.
JQuery/UI is NOT designed for web applications. It is designed for web SITES. Sure, it has some good plugins, but you'll spend countless hours learning their apis and switching your thought process between them all. JQuery/UI lacks the following:
a graphical designer (see Sencha Designer 2), ie graphical layout GUI program
complicated layouts (in ext you can switch a layout of a container to accordion, tabs, wizard, anchors with one setting)
a grid (ext grid supports paging, sorting, filtering, grouping, summaries, editing out of the box)
real comboboxes
a model view controller system
templating
good html editor control
a whole ton of other stuff
do yourself a favour and spend the money on ext, and save yourself countless hours.
regarding the grid you mentioned, ext's is far superior to anyone else's. you can do what you listed in about 20 nicely-formatted lines. i am not kidding.
regarding client-side unit testing, use jasmine with ext.
The short answer is yes. Frameworks like Ext.js take care of a whole lot code that you would end up writing yourself if you were to write everything from scratch. These frameworks take care of models, events, views, communication with servers/APIs, etc.
This isn't really an answerable question. It all depends.
ExtJS is great for very specific things. If you want those very specific things, it's likely the most efficient option for you.
If jQuery UI meets your needs, then that's your answer.
If you have jQuery dev's, maybe stick with jQuery.
If you have ExtJS folks, consider ExtJS
etc, etc.

Creating a web application, then adding Ajax to it?

I imagine there are many of you out there who have developed an application online which automates a lot of processes and saves people at your company time and money.
The question is, what are your experiences with developing that application, having it all set in place, then "spicing" it up with some Ajax, so it makes for a better user experience?
Also, what libraries would you suggest using when adding Ajax to an already-developed web application?
Lastly, what are some common processes you see in web applications that Ajax does well with? For example, auto-populating the search box as you type.
My preferred way of building Ajax-enabled applications is to build it the old-fashioned way where every button, link, etc. posts to the server, and then hijack all those button, link, etc. clicks to the Ajax functionality.
This ensures that my app is down-browser compatible, which is good.
It doesn't really matter which you use, unless you're trying to do something very specialized.
Here's a good list: http://code.google.com/apis/ajaxlibs/.
Yes, auto-completers are a pretty handy implementation of Ajax. It's also quite useful for data-intensive activities like populating drill-down data.
A lot of what you can do with these libraries isn't Ajax-specific, there is a lot of UI interaction that can benefit the user as well. You can do things like slideshows and lightboxes quite easily with many of these libraries.
Pick the one that you're comfortable with. The syntax they all use is a little different. Give a few a spin and try to build simple examples. Stick with the one you like.
Using ASP.NET Ajax to wrap a few chunks of code is an easy way to get going. But personally I prefer to use jQuery. You can easily add some simple Ajax calls with it to make the UI more responsive without the ASP.NET Ajax overhead.
If you are using ASP.NET to write your applications, adding AJAX using ASP.NET AJAX is very straightforward and in many places will not require you to change any code at all except add two controls to the pages you want to modify.
This works using partial page loads. The controls you have to add (off the top off my head) are called something like
<asp:ScriptManager
and
<asp:UpdatePanel
The biggest thing I use for AJAX is lists and search forms. Why? Because the overhead of loading an entire page when you are going though a list of, let's say, 200 records, it will get frustrating for a user to go though everything. However, it is important that if you click on a link in the page and then hit the back button or use a link at the top to return to the same page you were on.
For search forms, as you fill out the form I use AJAX queries to return the first few results and a number indicating how many records that were returned.
For AJAX frameworks, I use mootools. http://www.mootools.net.
Please ignore if not using ASP.NET. Your platform wasn't clear from your question.
Depending on when you created your web application, your web config file may need some tweaks to use ASP.NET Ajax. The easiest way to see is to create a new web site with the ASP.NET Ajax template and compare the web config, copying over configuration items as needed to bring the old one up to date.
If "spicing it up" is all you're after then develop the fully functional app without AJAX first. From here you can unobtrusively add AJAX functionality and ensure that the app degrades well for non JavaScript-enabled browsers.
I've started using jQuery for JavaScript on my site. It takes away all the worry of cross-browser JavaScript differences - things like class and classname, and getElementById. It also includes some very handy and simple functionality for AJAX postbacks. It's very easy to learn and extremely lightweight when used well.
I've seen some good use of AJAX right here on Stack Overflow, things like the tag selector and the question lookup when you type a question title. I think these simple things work best; we're just adding to the user experience with small additions to functionality that are intuitive, we're not flooding the screen with drag/drop handles etc.
I would differ from the first poster. Adding Ajax isn't always as easy as 1,2,3. It really depends on what you are after.
Adding things such as a colour animation can be made fairly easy, but if you are after things such as auto populating a text box, this requires extra code. It's not as easy as adding just something client side. You would also need to add in server-side support to fetch the partial query results.
Going beyond that, it can become even more complex keeping your client-side script in sync with server-side support.
But with the spirit of simplicity in mind there are libraries you can use to 'spice' up a website with animations and other eyecandy that can be implemented fairly easily which have been mentioned already.
I've often had to Ajax-enable an old-fashioned ASP.NET 2.0 sites. The easiest way I've found to do that is to create a new Ajax-enabled site and copy and paste certain sections of the web.config into your old project's web.config.
Just compare the two and see what's missing in your old one. You'll obviously also need to add references to AjaxExtensions and AjaxControlToolkit.