Mar 7, 2012 - Web    No Comments

JSP to support utf 8

Having alot issue finding a way to support charset, altiverative u can convert them but this is a easier way

<%@ page language=”java” contentType=”text/html;charset=UTF-8″ %> include this on header of your page.

Feb 9, 2012 - Javascript    No Comments

jQuery Mobile G.A

I upgraded Crossword Tracker to use jQuery Mobile at the end of November and while it has proven popular, I had a sneaking suspicion my Google Analytics reports were off. The Pages/Visit statistic was quite low (very close to 1 in fact). It turns out that jQuery Mobile requires a little extra effort to execute Javascript on every page load. I broke up the Analytics code into two pieces and now every page view is being tracked. In the head (which is executed only on the first page load) I load the required Javascript file from Google, using the async loader which means it won’t block page loading:

1
2
3
4
5
<script type="text/javascript">// <![CDATA[

      var _gaq = _gaq || [];     (function() {       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);     })();
// ]]></script>

Originally I had the whole snippet from Google there and it counted just one view, no matter how many pages the user actually viewed. That’s because it’s not actually loading the whole other page, but requesting it with AJAX and then replacing parts of the page with new content. The trick to getting all page views counted is splitting up the part that tracks the page view. Here’s what I tucked in before the closing body tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'YOUR_GA_ID']);

hash = location.hash;

if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {

}
});

The pageshow event is triggered by jQuery Mobile on every page load (including the first), so we’re now calling the _trackPageview() method on every load. Handy. After just a day and a half’s worth of use, you can tell what a difference it made:

Google Analytics with jQuery Mobile showing average pages per visit

This all may change before jQuery Mobile hits 1.0, but for now I’m safely on the bleeding edge and have the analytics to back it up. Update: jQuery Mobile falls back to using hashes to designate pages and that doesn’t get picked up by GA so / and /#/contact would both appear to be a hit on the homepage. You can easily get around this by checking for the hash and then sending the portion after the # symbol. I have updated the code above to account for this as well as moving to the asynchronous loader which makes a decent difference over 3G.

Feb 9, 2012 - CSS    No Comments

Jquery Mobile

Some useful snippet codes.

1. Disable truncation for list items and buttons

If your list item or button has a long text, it will be truncated automatically by jQuery Mobile. To disable this truncation, add “

white-space: normal;

” to the CSS selector in question.

For example, to disable truncation for buttons:

.ui-btn-text {
white-space: normal;
}

To disable truncation for list descriptions:

.ui-li-desc {
white-space: normal;
}

To enable truncation, set it to “

white-space: nowrap;

“.

2. Display a random background image on page load

jQuery Mobile has a number of page initialization events that you can use to trigger certain methods on page load. The following CSS + Javascript can be used to display a random background image every time a page is loaded.

CSS

.my-page  { background: transparent url(../images/bg.jpg) 0 0 no-repeat; }

.my-page.bg1 { background: transparent url(../images/bg-1.jpg) 0 0 no-repeat; }

.my-page.bg2 { background: transparent url(../images/bg-2.jpg) 0 0 no-repeat; }

.my-page.bg3 { background: transparent url(../images/bg-3.jpg) 0 0 no-repeat; }

Javascript

$('.my-page').live("pagecreate", function() {
	var randombg = Math.floor(Math.random()*4); // 0 to 3
	$('.my-page').removeClass().addClass('bg' + randombg);
});

3. Disable a button action

To disable a button action (for eg: from opening a page), add the following Javascript.

$('#home-button').button("disable");

And to re-enable it:

$('#home-button').button("enable");

4. Disable loading pop-up message

I find the loading pop-up message a bit annoying because it gets triggered everytime you load a different page. To disable this: add the following line of code into your JS file.

$.mobile.pageLoading(true);

By default, it is enabled like so:

$.mobile.pageLoading();

5. Create a custom theme

jQuery Mobile framework comes with 5 themes – Theme A, Theme B, Theme C, Theme D and Theme E. But you can easily create a new theme for your web app.

The steps to create a new theme:
1. Copy CSS for any theme from jQuery Mobile CSS file and paste it into your own CSS file.
2. Give your theme a name and rename the CSS selectors appropriately. Your theme name can be any alphabet character (a to z). So for example, if you copied Theme C, and you want to call your theme Theme Z, rename

.ui-btn-up-c

 to 

.ui-btn-up-z

.ui-body-c

 to 

.ui-body-z

 and so on.
3. Change colors and styles of your custom theme
4. To apply your custom theme z to any element, just set the data-theme attribute to z. For example:

<div data-role="page" data-theme="z">

6. Use a custom font

There are a few font-replacement methods available such as cufon, sIFR, FLIR, @font-face and Google Fonts API. When building a web app using jQuery Mobile, I found that @font-face method is the easiest method to work with and the performance is quite satisfactory. If you are interested in @font-face, here is a helpful tutorial with a demo on how to work with @font-face method.

7. Create an image-only button with no text

Sometimes, you may not want to have any text for your button but still use the rest of the features that comes with a button element. This is usually the case with a home button or an info button. To hide any text associated with the button, set data-iconpos attribute to “notext”. For example:

<a href="../index.html" data-icon="grid"
class="ui-btn-right" data-iconpos="notext">Home</a>

8. Open a link without using AJAX with page transitions

To open a link without using AJAX with page transitions (ie: reloading the full page the old-school way), set rel attribute to “external”.

<a href="../index.html" data-icon="grid"
class="ui-btn-right" rel="external">Home</a>

9. Remove an arrow from a list item

By default, jQuery Mobile framework adds an arrow next to every list item. To disable this, set data-icon attribute to “false” on the list item that you’d like the arrow to be removed.

<li data-icon="false"><a href="contact.html">Contact Us</a></li>

10. Set background color of a page

This may sound simple but it took me a few minutes to figure out how to apply a background color to a page without having it overwritten by jQuery Mobile CSS. Normally, you’d set a background color to body element but if you are using jQuery Mobile framework, you need to set it to ui-page class.

.ui-page {
background: #eee;
}
Jan 27, 2012 - Web    No Comments

Mojo Forest Game Studios

Three of my good friend has started a company named Mojo Forest for about a Year. Mojo Forest is an independent game studios, develop cute and fun games.
As a game developer student, it is often hard to do Gaming Business in Singapore. Here are some titles they can came out. Let’s hope 2012 would be a great year for them!
Good luck guys~!

Do support them in Iphone APP store today~!

http://itunes.apple.com/us/app/them-pigeons!/id441057300?mt=8

Check out their facebook here

Pages:1234567...14»