30/05/2011

Chuyển project từ MyEclipse về Eclipse


MyEclipse giúp những người mới bắt đầu với J2EE (như tôi chẳng hạn) có thể nhanh chóng hiểu và áp dụng các framework như Struts, Hibernate, JSF, etc... Nó cung cấp một số các ví dụ nhỏ rất tiện lợi cho việc bắt đầu. Việc add các thư viện của Struts và Hibernate thì dễ ko gì bằng. Tôi đã phải hì hụi mất 1 ngày để tìm 1 cái Hello world viết trên Eclipse dựa trên struts và Hiberbate nhưng ko có kết quả. Bực mình down luôn MyEclipse, xem cái video, mò mẫm 1 lúc trong cái sample sẵn có of nó, và thế là oki. Đã có Hello world dựa theo mô hình MVC of Struts và connect ngon lành với database MySQL.

Nhưng niềm vui cũng chỉ kéo dài đc 1 tháng (trial mà :D). Bây h thì lại quay trở lại dùng Eclipse thôi. Nhưng khi đã khá hiểu về Struts và Hibernate thì việc chuyển lại cũng ko khó khăn là mấy.
Copy đống source code (MyEclipse generate cho ta rất nhiều các file code về struts và Hibernate) các thư mục và các file jsp qua. Các file config thì chỉ copy những cái cần thiết mà mình dùng thôi như: hibernate.cfg.xml, web.xml, struts-config.xml, và 2 file struts-bean.tld, struts-html.tld (đối với những ai dùng tag bean và html của struts).

Và phần cuối cùng là thư viện, như tôi đã nói, myEclipse tự động import các thư viện cần thiết nên sẽ tiết kiệm rất nhiều time và đỡ phải bực bội khi đi tìm file jar. Vậy làm sao copy các thư viện đó qua project eclipse. Rất đơn giản, bạn export project of mình ra định dạng file .war (cái định dạng mà ta sẽ vất lên Tomcat để chạy khi public website), mở file này bằng Winrar, giải nến nó ra, và trong thư mục WebContent/WEB-INF/lib các thư viện cần thiết ở đây :D (nhưng có thể chưa phải là tất cả). Add các thư viện này vào project Eclipse.

Ok, mọi công đoạn đã hoàn tất, run project trên Eclipse (nhớ import cái server Tomcat chẳng chẳng trước khi chạy nhé). Có thể sẽ có lỗi nào đó liên quan đến thư viện, ví dụ of mình thì cần thêm jboss-j2ee-4.0.2.jar nữa (do cái lỗi này này java.lang.NoClassDefFoundError: javax/transaction/Synchronization), ta có thể tìm file jar khi biết lớp of nó qua website: http://www.jarfinder.com/index.php/, chi tiết các file thư viện mình dùng có ở trên.

27/05/2011

Hello div CSS


Hello div use CSS






File helloCss.css:

.alignCenter {display:block;padding: 0 10px 20px; margin-bottom: 20px; border:3px solid #6CCBE7; background-color: #fafafa; width: 100%; height: 400px}
.divideColumeLeft {background-color: #abdcdf; width: 33%; height: 100px; float: left}
/*.divideColumeRight {background-color: #abdcdf; width: 50%; height: 150px; float: right; text-align: left;}*/

body{background-color:#efefef;font:500 12px/18px Arial;text-align:center;color:#333}
a img{border:0}
a,.extramenu ul li a:hover,.menu li a:hover,.userbar a:hover{text-decoration:none}

.homepage-box{width:347px;border:0 none;text-align:left;background:url(/skin/masterbg.gif) repeat scroll -1048px 0 transparent}
.homepage-box .feature a img{width:144px;border:solid 1px #cecece;float:right;background-color:#fff;margin:0 -1px 0 10px;padding:3px}
.homepage-box .content{width:341px;background:url(/skin/masterbg.gif);background-position:-1048px 0;float:left;clear:both;padding:0 6px 10px 10px}
.homepage-box .content .title,.homepage-box .content .sapo,.homepage-box .subtitle,.homepage-box .contentalt .title,.homepage-box .contentalt .sapo{padding:0 5px 0 10px}
.homepage-box .feature .title a{color:#bb3914;font-size:15px;font-weight:700;line-height:16px}

Download Source: http://www.mediafire.com/?1qc9p6d5gd35ien

Tag 3D JavaScript jQuery

Vous devez sans doute connaître le plugin WordPress WP-cumulus qui est très à la mode en ce moment et qui permet d’afficher un nuage de mots clés dynamique et en 3d qui tourne en fonction de la position de la souris.

Le petit ou gros problème de ce plugin est que le nuage est généré en flash, ce qui peut poser quelques petits problèmes de référencement..

Pour remédier à cela je vous propose un plugin Jquery qui fait exactement le même nuage mais en HTML /Javascript.

tags-nuage-cloud-sphere


Télécharger le plugin.

Lien.

Pour connecter à la base de donnée (utiliser PHP et MySQL):

http://www.siteduzero.com/forum-83-580312-p1-nuage-de-tag-3d-jquery-et-recuperation-sql.html

References: http://bidouilleur.com/nuage-de-tags-mots-cles-3d-dynamique-en-jquery/


Une autre tag cloud très intéressante:

http://noupe.com/examples/tagcloud/tag-cloud.html#



26/05/2011

The best IDE for JavaScript (jQuery, css, html5)

Here is a list of the best for you:

If you choose Aptana, take a look at Introduction of Javascript IDE - Aptana. Also I suggest you to look at this this similar question: Good Javascript IDE With Jquery Support.

Bold = Best in Intellisense

I choice Aptana ofcouse

Happy Coding!

Link blog, website interest: Ajax, jQuery, jFormer, JavaScript,...

Update daily:

http://www.ajaxrain.com/

http://speckyboy.com/2008/04/02/65-excellent-jquery-resources-tutorialscheat-sheetsebooksdemosplugins/

Relax

:D

Creat form with jFormer


Create easy form htmp with jFormer - Extence of jQuery
Check error by use javascript, and use CSS

http://www.jformer.com/documentation/getting-started/

Vote fonction on the web with jRating


jRating - một plugin rất mềm dẻo của jQuery giúp bạn nhanh chóng tạo được hệ thống đánh giá dạng ajax.

Bạn có thể tùy chỉnh từng chi tiết nhỏ nhất, từ số lượng các ngôi sao tới việc từng ngôi sao đại diện cho số thập phân thế nào. Ngoài ra còn có các lựa chọn hiển thị ngôi sao nhỏ hay lớn hoặc bạn có thể thay thế file ảnh với file khác.

Bạn có thể sử dụng plugin với tất cả các ngôn ngữ php, .NET, java... (tất nhiên vì đây chỉ là phần frontend thôi), plugin được đi kèm file php để xử lý các đánh giá của người dùng.

Cách sử dụng

Để sử dụng, trước tiên bạn cần thêm file CSS, file jQuery 1.4 và jRating vào phần header:

Thêm vào phần body của website:

Với jRating, thuộc tính data rất quan trọng, bạn phải thêm vào theo mẫu: 'mức trung bình'_'ID'

Cuối cùng là gọi plugin lên làm việc:Bạn có thể xem thêm các lựa chọn khác ở trang chủ và trang demo của plugin

Live demo Download

Refresh auto website with Live.js


Nếu bạn đang phát triển website thì bạn nên thử bắt đầu dùng Live.js. Khi bạn thêm live.js vào trang web của mình, nó sẽ tự động refresh trang nếu bạn thay đổi bất kỳ file nào ở trong mã nguồn.

Nói đơn giản hơn, khi làm việc với HTML, CSS hoặc mã JavaScript, trình duyệt của bạn sẽ tự động hiển thị phiên bản mới nhất của trang web. Tất nhiên là bạn không cần phải ấn F5 để refresh trang (Nếu bạn đang sử dụng 2 màn hình thì thật tuyệt, bạn sẽ quên đi cả phím alt + tab nữa)

Để sử dụng live.js, tất cả những gì bạn cần làm là thêm file javascript này vào trang web của mình.

Live.js làm việc với tất cả các trình duyệt như Firefox, Chrome, Safari, Opera và IE6+. Live.js hoạt động độc lập với các framework/ngôn ngữ mà bạn sử dụng (bạn có thể sử dụng Ruby, Python, Django, NET, Java, Php, Drupal, Joomla hoặc bất cứ cái gì đó của riêng bạn).

Trên trang live.js cũng nói tới một mã nguồn rất hay là backfire: cho phép bạn lưu lại thay đổi ở file CSS trong firebug.

Demo: http://livejs.com/demo

Download: http://livejs.com/live.js

References: http://www.sotayweb.com/lap-trinh-thiet-ke-website/pro/lap-trinh-javascript/item/209-tu-dong-refresh-trang-voi-live-js.html


25/05/2011

Ebook: .NET, C#, Java, PHP, SQLite, hacking, JQuery, CSS, HTML5,...

Sẽ liên tục cập nhật các kho ebook cho anh em:
Kinh nghiệm of tôi là gõ: "mediafire.com" + "Tên Sách" trên google :D

SQLite, CSS, HTML5, OpenGL
http://www.heronote.com/files/jQuery.mobile.htm

Ajax:
http://www.fshare.vn/file/2Q52GX00/
References: http://www.sotayweb.com/lap-trinh-thiet-ke-website/pro/lap-trinh-javascript/item/152-giao-trinh-tai-lieu-sach-ebook-huong-dan-hoc-ajax-co-ban-tieng-viet.html

http://www.elakiri.com/forum/showthread.php?p=8160091
http://www.mediafire.com/?sharekey=77bcd55cf9dfe16719747bd91027d4ddedc3d66572667f86

JavaScript hướng đối tượng giả lập một cửa sổ trình duyệt

This is a very short tutorial about Object Oriented Programming in JavaScript, in which we are going to create an object called JSWinbox that simulates a window in our browser.

There are two ways of doing OOP in JavaScript: Classical Inheritance and Prototypal Inheritance. The recommended one is Prototypal because objects will share exactly the same methods and by the classical inheritance the objects will have their own copy of each method which would be a waste of memory.

Other great features you should know about JavaScript are closures, Prototype object, and basic knowledge of the DOM. That information should be enough for you to catch the idea of this post.

How is JavaScript an OOP Language if It Does Not Use Classes?

Some folks argue that JavaScript is not a real OOP language because it is not use classes. But you know what? JavaScript does not need classes because objects inheritance from objects. JavaScript is a class free language which uses prototype to inheritance from object to object.

How Do I Create an Object in JavaScript?

There are two ways to create an object: by object literals and by constructors.

Object literals are the most recommended because it can organize our code in modules, in addition it is an object ready to go that does not need a constructor. (Very useful for singletons.)

var myDog = {
name: 24,

race: '',

getValue: function () {

return this.value;
},
}

The other way is creating object by constructors. First of all, functions are objects and functions are what we use to create constructor objects for example:

function Dog(race, name){
this.race = race;

this.name = name;

this.getRace = function(){

return this.race;
};

this.getName = function(){

return this.name;
}
}

To create an instance of the Dog object we use the following code:

var mydog = new Dog('greyhound', 'Rusty');

Now, we just need to use the object we just created. So, lets execute one of the methods. The method to execute is getRace.

mydog.getRace(); // Returns grayhound

If you need a better explanation, go to one of the links at the beginning of the article for further explanation.

SourceCode example: http://www.mediafire.com/?w91389bf211nzho

Reference: http://www.admixweb.com/2010/07/14/oop-javascript-creating-an-window-box/

The Best JavaScript Frameworks and Libraries for Web and Mobile


JavaScript has been frustrating developers for years, but with javaScript libries and frameworks like jQuery JavaScript is regaining its street cred. jQuery is not of course the only javaScript framework around, but the main reason that JavaScript is becoming more interesting and exciting is the ever increasing development of JavaScript libraries and frameworks.

To meet industry demand Silicon Beach Training has updated our JavaScript training course and intruduced jQuery training and Ajax training courses to whet your appetite. Of course if you need HTML5 training or CSS training we can offer these too only 5 mins walk from Brighton railway station.

The real problem with JavaScript (released in 1995) lay with what we now call the DOM (document object model). Browsers implemented what we now know as the DOM in different ways meaning that browser cross compatibility was a nightmare. The standardisation of the DOM made thing a little easier but Internet Explorer (the bane of many a developers life) did not support basics like addEventListener until 2010 in IE9.

JavaScript frameworks provided developers with solutions to more easily overcome many browser bugs, allowing developers more time to develop.

The five market Leaders in JavaScript frameworks – or libraries are:

jQuery-coursejQuery is the strongest at DOM manipulation, and that’s why we like it.

It provides simple ways to create any custom effect and a range of simple to powerful Ajax methods.

prototype javascript libraryPrototype is a JavaScript language library that extends the feature set of JavaScript but still includes a way to manipulate the DOM. Prototype provides class-style Object Oriented and AJAX, freely distributable under the terms of an MIT-style license.

YUI seems to offer everything! It includes the basics of DOM manipulation and event YUI Javascript Libraryhandlers, but also has a huge host of utilities available to it, ranging from internationalisation to history management and animation. What makes YUI special is its ability to load the utilities during runtime, so visitors do not suffer from slow page downloads. Built by frontend engineers at Yahoo! and contributors from around the world, it’s an industrial-strength JavaScript library.

Dojo is akin to enterprise-level JavaScript applications, and its homepage shows off how IBM, dojo toolkit javascript frameworkCisco and Sun are among those who’ve chosen to make good use of it.

Indeed, Dojo’s documentation demonstrates how accessible the toolkit is via the ARIA support it provides. Dojo saves you time, delivers powerful performance, and scales with your development process

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the mootools javascript frameworkintermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

These JavaScript libraries provide these important features in common:

  • Cross-browser support, particularly for older browsers even IE6 – RESULT!
  • Experienced developers who share their knowledge and experience with the community
  • Open licences enabling developers to use the projects privately and commercially
  • Strong communities of developers that support them
  • Extendable functionality

Great stuff to have in common but they all cover the fundamentals of web development in their own way. Most people getting started with JavaScript these days are faced with the challenging task of picking a library to use, or at least which one to learn first. If you’re starting a project from scratch and know that including a JavaScript library or framework is going to save you time and therefore money, then you have the advantage of being able to shop around for the perfect candidate.

UI frameworks

jQuery TOOLS – UI library for the Web is a very light weight (2.5kb) collection of the most popular user-interface components offering functionality over load time. It provides libraries for the following jQuery elements: Tabs, Tooltip, Scrollable, Overlay, Forms and Flashembed. jQuery can be downloaded as selected modules, so you don’t have to worry about pulling in the entire UI library if you just want draggable windows, for instance. It has the same benefits as jQuery and is under the same licence, so if you require a standard set of components, such as a date picker, progress bars or drag and drop, jQuery UI is a good choice for you. In addition, all the jQuery UI components can have different skins applied, either by your own designers or with a predetermined template. Both would use the ThemeRoller application, a web GUI for styling jQuery UI components.

jQuery UI is a widget and interaction library built on top of the jQuery core that allows you to animate different elements giving you impressive front-end interactions, all with relative ease.
The UI package is basically a collection of user interface-related functions that and can be broken into 3 main modules:

  • the widgets, which contain prebuilt and customizable user interfaces
  • the effects, which are very simple and straightforward animations you can do to a page element
  • expanded mouse interaction with page elements (dragging and dropping)

Script.aculo.us is a popular UI kit that extends the Prototype Framework by adding visual effects, user interface controls, and utilities via the DOM.

Scripty2, essentially the second incarnation of Scriptaculous, goes beyond the animation framework that it was originally known for. Although Scripty2 is still in alpha, it’s likely to be the UI framework of choice for Prototype developers because it builds on the library. In addition to some super-smooth effects, it will come with accordions, dialogs, progress bars, tabs, sliders and an autocompleter.

MochaUI – A Web Application User Interface Library requires MooTools and also requires an XHTML 1.0 strict doctype. So it’s no good for HTML5 entusiasts. It provides a slick UI for windows, drag and drop, file views and panel views. It is a popular extension to the MooTools Javascript Framework and ExplorerCanvas, to develop quick Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows, Modal Dialogs and much more.

JavaScript libraries and frameworks for Mobile

JavaScript libraries and frameworks are making their way into the mobile development community. Mobile is unchartered territory and getting exiting. It’s really where the future of web development is. There are, however many considerations to be met: performance of the mobile device, whether you want to replicate the native UI and whether the mobile device even supports the newest JavaScript methods

jQuery Mobile is a Touch-Optimized Web Framework for Smartphones & Tablets. jQuery Mobile provides a unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. jQuery will support mobile browsers from B-grade and upwards, another reason why we think that jQuery is the one to watch.

jQTouch isn’t so much a framework as a jQuery plug-in that provides a native UI feel to iPhone-based web apps. This includes transition effects, a few template styles for all the UI widgets (such as lists, buttons and toolbars), swipe detection so that it interacts like an iPhone app and, finally, the ability to extend the functionality of the plug-in. There are number of jQTouch-based iPhone apps have already and are available in the iTunes store, compiled via PhoneGap.

XUI is a super micro tiny (3k-compressed) DOM library for authoring HTML5 mobile web applications. It includes Ajax and Effects via Emile.js. Like jQuery, it supports the simple xui.fn.myplug plug-in model, so it’s extendable. The project aims to be compatible with mobile browsers based on WebKit, Mozilla’s mobile browser Fennec, Opera, IE and BlackBerry. It’s still in-project but is fairly stable.


References: http://www.siliconbeachtraining.co.uk/blog/?p=1534