How to implement a UI Kit into a website? - javascript

I have a psd version of a UI Kit that I would like to implement into the forms, etc, on my website. It's similar to the one below - which is "Chutzpah" by Morgan Allan Knutson (#rnorgan)...I'd show mine, but I don't have a screenshot. This will demonstrate the same concept, though.
image from http://designmoo.com/2435/chutzpah-user-interface-kit/, where you can download his kit.
What tools do I need to utilize to do this? Can I do it simply with CSS, or do I need to use some client side scripting? Or, is this something that is really just for mobile applications?

Essentially, the design part will be done in CSS; some of the elements you show can't be fully styled in their native browser represenations however (like <select>), so you will need the assistance of JavaScript-powered widgets that allow for more design freedom.
Maybe jQuery UI (which is a set of jQuery-powered widgets and surely one of the best UI tools around) is interesting for you. It is completely themable and even has a tool for building your own themes, ThemeRoller. It will not be enough for every aspect of your implementation, but may provide a good starting point.
Note that using jQuery UI comes with dependencies (jQuery) and limitations (no other JS library should be used on the site).
Whichever road you take, be prepared for a lot of fiddly work.

Related

Which powerfull tools are used to create website and could GWT and GXT work ?

So I started working this year after finished studying last year. I have been exposed to so many things in the working environment. Suck as Maven, GWT and Hibernate.
Now I got this side project in which I just need to create a simple website which would bassically just display some information and contacting details.
So I was wondering if HTML5 CSS and JavaScript is still the way to go and if there are not powerfull frameworks in which could you help me do animations and graphics much easier.
Also if you know GWT and GXT would it be a bad idea to create a visually apealing website using these frameworks.
Thank you so much for reading
Have a nice day
Objective: Create a simple website which would basically just display some information and contacting details.
GXT:
GXT is built on GWT.
Go for GXT when you are in need of rich set of widgets (it is a very large set of collection) out of the box. Have a look on the following link where GXT has showcased the different widgets
http://examples.sencha.com/gxt/4.0.0/
GWT:
GWT will be having minimal set of widgets when compared to GXT. Have a look on the different widgets which are provided out of the box. http://samples.gwtproject.org/samples/Showcase/Showcase.html
Javascript Animation framework:
There are bunch of javascript libraries/frameworks for animation, choose one which is most appropriate to your work. Have a look on the following link.
https://www.javascripting.com/animation/
Conclusion:
Consider the following before finalizing on a framework
Framework which is having more out of the box components which matches the requirement.
Framework which is more stable
Framework which is having more support on the internet, such as forums, blogs.
Happy Coding!!

ColdFusion built-in AJAX vs JQuery or ExtJS

I was wondering what the difference is between ColdFusion's built-in AJAX functionality and using a JS framework like JQuery?
It seems that ColdFusion ships with tags that can do fancy Javascript layouts and controls e.g.<cflayout> and <cfwindow>. If it can already do this then why would one want to look at JQuery?
I'm asking this question because I have been given the task of making an internal CRM application which should have a 'rich' UI. I started investigating JQuery and ExtJS which do the fancy client-side UI work. However I also noticed that CF has similar abilities. Because I am starting from ground zero I was wondering whether to spend (a lot of) time learning JQuery or ExtJS, or cut down on my development time and just use CF's built in AJAX tools.
With some good design skills, would it not be possible to create a 'rich' application with CF's built-in AJAX controls and some fancy CSS styles?
Any advice would be greatly appreciated.
Some things to consider:
Yes, you could use CF's built-in Ajax/UI stuff to build a nice application. The downside is that doing anything outside the box of what CF has baked in is a big headache., Plus, the version of Ext JS which CF has is quite old...so getting all the goodness from the latest version (v.4.2+) is not an option, since CF doesn't have a mechanism for upgrading that library seamlessly (or freely).
As others have mentioned, you should definitely use a non-CF alternative--they are all dead-simple to integrate with CF-backend anyway, so the amount of effort required to do that vs. wrestling with tweaking the internal CF stuff is actually lesser.
Which library to use? Well, you need to seriously consider your options before jumping into one or the other. jQuery (and jQuery UI) and Bootstrap are nice for design...unlike Ext JS, however, they don't come baked in with uber-rich "data-aware" components (grids, trees, etc). They are more libraries than they are frameworks (like Ext JS). On the other hand, Ext JS, for your purposes, will not be free. Unless you plan on open-sourcing your "internal" CRM codebase, you'll likely have to commercially license the software, which is on a per-developer seat basis. I think it's well worth the cost, considering what you get, but that will have to be part of your organization's calculation if you decide to go that route.
Personally, I don't recommend using CF's Ajax functionality. I've build internal tools using ColdFusion's built in javascript and they run very slow to say the least. Your best bet is to go with JQuery and Bootstrap. This could be a bit more difficult at first, but it would open a lot of doors down the road.
Good luck! Al

Best JS framework for web and hybrid appsif I already do web design?

We are starting new development on mobile devices. We want to do webapps (with strong offline behavior) and hybrid apps, and keep business logic the much as we can in JS.
After a long time googling around about Jquery Mobile and Sencha Touch, I am actually thinking that it is not what we need: we actually count with an incredible web designer, so we want to use his talent to create the screens. This go against JQuery Mobile and Sencha Touch philosofy, because is just what they do: UI interface.
So, if we want to use our own screens, is there any benefit in using JQuery Mobile or Sencha Touch for the business logic and/or back-end ? Wouldn't it be overkill and in the end worse in terms of performance ? Would it be too much work to do our own business/back-end framework (ajax, jsonp, localStorage, filesystem access, etc...).
The much I see, the most I think that the only think that I would need from Sencha Touch are transitions (Jquery Mobile ones are terrible)...
They are both good framework choices for building your web/mobile apps.
While the most obvious thing about JQuery Mobile and Sencha Touch is their UI (its the first bit you seen when you navigate to their examples), there is also a lot of useful framework stuff running in the background, for example:
Sencha Touch is a Javascript Object-Oriented framework that lets you re-use a lot of your code, it supports the Ext.util.Observable class for using custom event listeners, Ext.util.MixedCollection for list iteration, and the Ext.data.Store for very powerful data handling.
JQuery Mobile supports a whole rage of touch handling events that will allow you to easily provide functionality beyond basic DOM event functionality (click, hover etc), it also runs on jQuery which has support for custom event listeners using the jQuery.bind() method, iteration using jQuery.each() and powerful AJAX calls using the jQuery.ajax() method.
In short, you are getting a lot more out of one of these frameworks when you use it, not just the interface. There is a lot of useful functionality in each framework that you would otherwise have to create yourselves from scratch.
You can use a combination of smaller frameworks that will provide you both with DOM manipulation and AJAX and local storage for being able to work offline.
For DOM / Ajax / event handling:
Snack.js: http://snackjs.com/
xui: http://xuijs.com/
For local persistence:
store.js: https://github.com/marcuswestin/store.js
Lawnchair: http://westcoastlogic.com/lawnchair/
They will do their part and stay out of your way to give your app the appearance you want.
With jQuery Mobile you can just use the functionality you want as all the widgets are now decoupled:
http://jquerymobile.com/blog/
Download builder: In the works
Now that we’ve decoupled most of the UI widgets, we’ve set the stage
for there to be a download builder. This will let you build a custom
version of jQuery Mobile to only include the parts you need. For
example, you could just use the core files to add Ajax-based
navigation with pushState and leverage some of the touch events and
other utilities with a very lightweight build (roughly 10k). Or, you
could add in specific UI widgets like form elements, listviews, etc.
to create an optimized build. We’re aiming to have a download builder
tool launch as part of 1.0 final in some form. We’re working on a
dependency map now for all the plugins to support this tool.
https://github.com/jquery/jquery-mobile/tree/master/js
Just pull the functionality you want from the Repo
Some good answers were provided to this question so I won't step on their toes. I'll just say that I was in a very similar position as you. Designer created the screens, I hooked them up into jQuery Mobile. After much testing and many benchmarks I concluded jQM just wasn't there yet.
I chose Sencha Touch over a hodge podge and mashups of other frameworks and libraries simply because it does everything. You can even customize the UI to your liking, you'll just have to dive in to the CSS.
Now, I will point out a fundamental UI flaw... Your designer should be designing for the environment, meaning, they should have some sort of familiarity/understanding of the technology the design will be utilized in. That said, give your designer a break down of the chosen framework and how to design for it rather than against it. If the designer says no, then they are not the type of creative you need on your team. :)
I have personally liked Sencha Touch. With latest version 2.4.1 support BlackBerry too. Its a very good bet when want to build apps to support all 4 popular mobile platforms (iOS/Android/Windows Phone/Blackberry). With Cordova packing Sencha Touch Hybrid apps give a very native like experience.
Also, http://mobileangularui.com/ is a very good alternative.

Rich Javascript UI Frameworks, EXT, DOJO and YUI

Disclaimer & Long Winding Question Approaching
I know topics like this have been beaten to death here so suffice to say I'm not asking about which framework is better, I don't really care about opinions on the better framework. They all do pretty amazing things.
The Question
Given that I have an existing web application, made of mostly regular HTML+CSS (jQuery where needed), which is the optimal framework to integrate a few "rich" pages into typically a regular stream of HTML.
Reason
I am trying to bring our proven application into the realm of awesome desktop like UI but I want to do it one small piece, one screen at time. But for our users, support personel and especially me taking it slow is the only option.
Also, with our branding requirements having a framework that just takes over the viewport isn't an option, it has to play nice with other HTML on the screen.
Imagine the example being a rich user manager in an otherwise plain HTML+CSS environment.
Experience Thus Far
Dojo + Dijit
Pros: The new 1.5 widgets plus the claro theme is the cure for what ails us. Dojo seems to be able to use markup to create the UI which is very appealing and has a fair amount of widgets.
Cons: Holy bloated lib Batman! Dojo seems to be enormous and I have to learn a custom build system to get it to stop requesting 4,800 javascript files. This complex empire of Javascript makes me believe I won't be able to create much that isn't already there.
ExtJS
Pros: Amazing set of widgets, does everything we could possibly want. Seems quick, every version brings new improvements.
Cons: I'm not sure how to use this without the entire display being EXT. I'm still building a web site, so I would prefer something that could integrate into what we already have. Some pointers here would be great.
YUI
Pros: Well, it's Yahoo isn't it? AWS console is downright wicked. Plenty of support and a giant community.
Cons: Well, it's Yahoo isn't it? AWS console is the only wicked thing. Complex for someone who's used to jQuery.
Help Me
I am willing to accept experience, links to ways to solve problems I've outlined, new toolkits (even though I'm pretty sure I've seen most by now) or even just advice.
Regarding ExtJS, it's pretty easy to start it in an existing div with something like this:
Ext.onReady(function() {
App = new Ext.Panel({...})
App.render('div-id')
});
The App panel can then have it's own layout manager.
This might be useful if you're familiar with jQuery, but not yet familiar with YUI 3 syntax: http://www.jsrosettastone.com/
Each of the libs you listed is excellent. When embarking on a larger scale project, the quality of a lib's documentation, community, and commitment to support become more relevant.
With Dojo, keep in mind that outside of dojo base, it only ever loads what you tell it to. But yes, without a built layer, that means it could easily end up requesting 50 JS files at startup for a large application using a bunch of widgets.
There are several pages in the reference guide documenting the build script: http://www.dojotoolkit.org/reference-guide/build/index.html
Rebecca Murphey wrote a nice blog post outlining an example app and build profile that you might find illuminative: http://blog.rebeccamurphey.com/scaffolding-a-buildable-dojo-application
If you get stuck, there's likely to be people in the Dojo IRC channel that can help.
RE ExtJS: I'm not sure what your exact situation is, but keep in mind that if you're intending to use it in commercial non-open-source software, you need to pay for licenses: http://www.sencha.com/store/js/
I'm a little curious as to why you think the size / number of requests is specifically an issue with Dojo though. I haven't used the others, but I'd expect it to be somewhat of a potential concern with any of them.

ExtJs Vs Ext GWT Vs SmartGWT

I am going to start a new application which mainly consist NavigationPane, Grid, Toolbar. Layout should look like this demo page http://www.gwt-ext.com/demo/
I am quite confused which one to use in terms of writing less code, more performant, etc..
Could someone tell the pros and cons of all these technologies.
All the while I coded in javascript, so that way ExtJs seems to be the easy one for me to code. But I am curios to try GWT Ext, Is it true that it could do a lot just by writing few lines of java code.
For eg: To achieve the layout ( given in above gwt ext demo url), which one should I opt ExtJs or GWT Ext.
I read SmartGWT is relatively slower than GwtEXT. Does it have any advantage over GWT EXT. I am also looking for hibernate based data modules ( as my application is going to have many database calls). Anyone of SmartGWT or GWTExt has support for such modules. I came to know that smartgwt doesn't offer all of smartclient enterprise version functionalities, that we are allowed only a few of smartclient features. Will it be an issue?
Your response is highly appreciated.
The GWT-Ext main page now says
"GWT-Ext is no longer under active development and has been superseded by Smart GWT. Assistance will be provided to existing users of GWT-Ext looking to migrate to Smart GWT."
so why would anyone use it?
To write the least code, use SmartGWT Pro. It provides a wizard that allows you to just pick from a list of Hibernate entities you've created, and instantly you have the ability to perform all CRUD operations on that entity, no code required. Then you can add business logic.
The wizard:
http://www.smartclient.com/smartgwtee/showcase/#tools_hibernate_wizard
The link about is just screenshots, but there are several Hibernate samples in the showcase. See especially the Master-Detail Batch Load and Save sample.
As far as performance, real-world performance of most enterprise apps is dictated by how often the application has to contact the server. In this area SmartGWT has a large lead because of features like Adaptive Filtering (see the Featured area in the SmartGWT showcase).
Almost all reports we receive of SmartGWT being "slow" are due to having Firebug enabled. Disable Firebug and performance is fine, so normal end users will never perceive slowness.
About 6 months ago, we studied whether we would use ExtJS or GWT-Ext for an internal application. We wanted the back-end to be J2EE standard frameworks (struts, spring, hibernate for persistence, etc.). We ended up choosing ExtJS because it seemed to us that GWT was not stable enough (too many changes in the API that is still recent), and Ext-GWT was always lagging behind in development.
application which mainly consist NavigationPane, Grid, Toolbar.
Well, this tells us a lot about your app, doesn't it :)
I think it comes down to how good you are at either Java or JavaScript. They are quite a different languages you know :) But if you are well-versed at both but only used Ext JS, then picking up Ext GWT (or GWT Ext, if you meant that), shouldn't be such a great deal. And if that application you are planning is going to be as simple and small as your description of it, then it's probably a perfect opportunity to try out something new.
I use GWT-Ext and it is quite good especially if you don't mind tweaking things with JSNI to customize the already existing Ext widgets it is incredibly powerful. Unfortunately development is stagnant, so my future projects will probably be either in SmartGWT or Ext-GWT. SmartGWT is written by Sanjiv Jivan (same guy who wrote GWT-Ext) and it has most of the widgets we need. I must say most of the skins are quite dated except the Enterprise skin which looks good, but you can always roll your own skin.

Categories

Resources