Bart Leemans http://www.dotred.be/bart Webdevelopment and Google Android Sat, 12 May 2012 13:12:00 +0000 en hourly 1 Twitter searchtool http://www.dotred.be/bart/2012/04/07/twitter-searchtool/ http://www.dotred.be/bart/2012/04/07/twitter-searchtool/#comments Sat, 07 Apr 2012 20:24:42 +0000 bart http://www.dotred.be/bart/?p=258 I’ve been playing with the Twitter API to create a little tool to list tweets based on a given searchstring.
The result is a webapp which makes it able to search tweets based on a given searchstring, a given hashtag or a given username.


I plan to add more functionality later on, but you can try out the current version in this download.

]]> http://www.dotred.be/bart/2012/04/07/twitter-searchtool/feed/ 0 Jquery tips & tricks http://www.dotred.be/bart/2012/03/09/jquery-tips-tricks/ http://www.dotred.be/bart/2012/03/09/jquery-tips-tricks/#comments Fri, 09 Mar 2012 14:51:48 +0000 bart http://www.dotred.be/bart/?p=250 If you are a webdeveloper, the chance is big you have used JQuery to fancy up youw website or webapplication.
JQuery is – in my humble opinion – awesome and very powerful to use.
Below, I summarized some handy tips and tricks to make it more easy to use!

1. First of all, when using JQuery, you often see the use of

1
2
3
4
5

$(document).ready(function() {
//some code here
});

OR

1
2
3
4
5

$(function() {
//some code here
});

to start writing JQuery, but which one should you use? Is there any difference? Well, there isn’t any, both methods are equal.

2. Link JQuery in your webpage with fallback
When using JQuery, you have to link in the js-library to your webpage.
To do this, you can make a reference to an external link, but if you do so, it’s a good idea to create a fallback in case the link is broken, you do this with the following two lines:

1
2
3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>

3. Access even or odd rows in a collection of elements
For a better layout, it maybe would come in handy to style even or odd rows in perhaps a table.
You can achieve this with the following code:

1

$("tr:even").css("background-color", "#C0C0C0");

4. Access all child elements of a parent element

1

$("#divContainer > div").css("background-color", "#D0D0D0");

5. Don’t write too much code!
JQuery stands for write less, do more, so you can achieve things with a minimum of code.
An example of this is to add a mouseover effect:

1
2
3
4
5

$("#linkDiv a").hover(function () {
$(this).toggleClass("markLink");
});

In the above code you see that there is no need to implement the mouseover and mouseout to add and temove the class, you can simply use toggleClass to achieve the same with less code.

6. Use “find” for better performance

1

$('#searchDiv').find('p.innerP').hide();

7. Perform an action on all elements in a parent element with just one line of code.

1

$('.theClass', '#theContainer').hide();

This piece of code hides all elements with class .theClass in theContainer

Do you have any tips or suggestions, improvements or remarks? Please let me know and I will add the info on this page.

]]> http://www.dotred.be/bart/2012/03/09/jquery-tips-tricks/feed/ 0 Android Menu: some changes http://www.dotred.be/bart/2012/01/31/android-menu-some-changes/ http://www.dotred.be/bart/2012/01/31/android-menu-some-changes/#comments Tue, 31 Jan 2012 18:27:25 +0000 bart http://www.dotred.be/bart/?p=244 Some of you may have noticed that newer Android smartphones lack a menu-button.
Even my new Galaxy Nexus doesn’t have one.
Now, Google announced that they want to stimulate the use of the Action Bar and get rid of the menu-button.
With the action bar, actions are directly displayed on top of the screen so you can call direct actions in your app.
If you still use the menu, an icon with three docs centered vertically will be displayed and show the menu items when you touch this button.

I strongly advise you to start using this method, but don’t panic, lot’s of apps (including some of my apps) still use the menu button and it’ still supported
in the new Android OS.

android action bar

How to?
To find the guidelines and official documentation on this issue, you can go to the official pages: http://developer.android.com/guide/topics/ui/actionbar.html
In this little tutorial, I will explain how you can change to the new menu in just a few steps so you can get started.

Step 1: modify your manifest.xml
First of all, you need to tell your app that it targets for an sdk with this new featere, as from Android 3.0, the action bar is included in all activities using the Theme.Hole theme.
Because this is API level 11, you can add something like this to your manifest:

1
2
3

<uses-sdk android:minSdkVersion="4"
android:targetSdkVersion="11" />

You can add this directly under the manifest-tag.

Step 2: create the menu
When creating your menu, you likely use the onCreateOptionsMenu method to set up a menu, this remains te same:

1
2
3
4
5
6
7
8
9
10
11

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.mymenu, menu);
return true;
}

Because R.menu.mymenu refers to an xml resource, you have to make a little change to this document.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/menu_add"
android:icon="@drawable/ic_menu_add"
android:title="@string/menu_add"
android:showAsAction="ifRoom|withText" />
</menu>

The first three lines will look familiar, what has ben added is the showAsAction, this makes sure that the item will be displayed in the optionsmenu when there is room available (ifRoom).
If there’s not enough room, an overflow menu will appear (icon with three dots vertically aligned) and the items will be listed there.
Always make sure you add the title for a menu item, screen readers make use of them and the overflow menu only displays the titles, also a longpress on an icon shows the tooltip based on the title of the item.

]]> http://www.dotred.be/bart/2012/01/31/android-menu-some-changes/feed/ 0 JQuery tagcloud http://www.dotred.be/bart/2012/01/22/jquery-tagcloud/ http://www.dotred.be/bart/2012/01/22/jquery-tagcloud/#comments Sun, 22 Jan 2012 17:13:06 +0000 bart http://www.dotred.be/bart/?p=238 I have been making a little tagcloud to display in a webpage using JQuery.
The script generates given links in a container.

tagcloud
You can download the script here.

]]> http://www.dotred.be/bart/2012/01/22/jquery-tagcloud/feed/ 0 Jquery : dialog form with validation http://www.dotred.be/bart/2011/10/27/jquery-dialog-form-with-validation/ http://www.dotred.be/bart/2011/10/27/jquery-dialog-form-with-validation/#comments Thu, 27 Oct 2011 18:49:23 +0000 bart http://www.dotred.be/bart/?p=213 Jquery can be very useful for live validation in a form so the user get’s direct input when errors are made.

Today, I experimented with JQuery Dialog to show a beautiful contactform in a smooth popup.
Eventually, I combined the two together, the result is the code below which shows a nice popupform with jquery live validation.

You can add the markup you wanted in the css class I created.

You can find the validation plugin at http://bassistance.de/jquery-plugins/jquery-plugin-validation/

The Dialog plugin can be found at http://docs.jquery.com/UI/Dialog

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

<!--
/**
 * dotred jquery dialog with validation (http://www.dotred.be)
 *
 * This script shows a JQuery dialog with validation and Ajax submit.
 *
 * Version 1.0
 *
 * 27 October 2011
 *
 * Copyright (c) 2011 Dotred, Bart Leemans
 * Licensed under the GPL licenses.
 * http://www.gnu.org/licenses/gpl.txt
 **/
 -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<style type="text/css">
	.contactDialog{
		/*put your markup here*/
	}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#opener').click(function() {
		$("#divContact").dialog({
			autoOpen: true,
			title: 'Contact',
			dialogClass: 'contactDialog',
			height:250,
			width:350,
			buttons: {
			  'Send': function() {
									if ($("#frmContact").validate().form() == true) {
										sendContactForm($(this).find('form'));
									}
								},
			  'Cancel': function() {$(this).dialog('close');}
			}
		});
	});
});
function sendContactForm(form) {
    form = $(form);
    $.ajax({
        beforeSend: function(data) {
            form.validate();
        },
        url: form.attr('action'),
        data: form.serialize(),
        type: (form.attr('method')),
        dataType: 'text',
        error: function(data) {
            $('#divOutput').html(data);
        },
        success: function(data) {
            $('#divOutput').html(data);
        }
    });
  return false;
}
</script>
</head>
<body>
<button id="opener">Click!</button>
<br />
<div id="divContact" style="display:none;">
	<form method="post" action="contact.php" id="frmContact">
		<input type="text" name="naam" class="required" />
	</form>
</div>
<div id="divOutput"></div>
</body>
</html>
]]> http://www.dotred.be/bart/2011/10/27/jquery-dialog-form-with-validation/feed/ 0 SEO keywords generator http://www.dotred.be/bart/2011/10/05/seo-keywords-generator/ http://www.dotred.be/bart/2011/10/05/seo-keywords-generator/#comments Wed, 05 Oct 2011 19:40:58 +0000 bart http://www.dotred.be/bart/?p=210 I’ve been trying to make a little script that listst the occurences of words in a text so you can check if important terms are well represented to improve search engine results.
In wordsIgnorelist array, you can add words you want to ignore from te results.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<html>
<head>
<script type="text/javascript">
function validate(){
	//wordlist: outcomment the desired language, dutch and english are supported
	//dutch

	//var wordsIgnorelist = new Array("de","het","een","te","aan","voor","op");
	//english
	var wordsIgnorelist = new Array("a","the","for","to","on","at");
	//get the text
	var text = document.frmvalidate.thetext.value;
	if(text == ""){
		alert("nothing to validate!");
	}else{
		//split text in wordts by space
		var words = text.split(" ");
		//filter out invalid words
		for(var i=0; i < words.length; i++) {
			if(words[i].length < 2){
				words.splice(i,1);
			}

			for(var j = 0;j < wordsIgnorelist.length;j++){
				if(words[i] == wordsIgnorelist[j]){
					words.splice(i,1);
				}
			}
		}

		//loop words
		var uniqueWords = new Array();
		var found = false;
		for(var i=0; i  < words.length; i++) {
			for (var j = 0; j < uniqueWords.length; j++) {
				if(uniqueWords[j][0] == words[i]){
					found = true;
					break;
				}
			}
			if(found == false){
				var tmpA=new Array();
				tmpA[0]=words[i];
				tmpA[1]=1;
				uniqueWords[uniqueWords.length] = tmpA;
			}else{
				uniqueWords[j][1] = parseInt(uniqueWords[j][1] + 1);
			}
			found = false;
		}
		var resultString = "";
		for (var i = 0; i < uniqueWords.length;i++){
			resultString = resultString + uniqueWords[i][0] + " : " + uniqueWords[i][1] + "\n";
		}
		document.frmvalidate.result.value = resultString;
	}
}
</script>
</head>
<body>
	<form name="frmvalidate">
		<textarea name="thetext" rows="5" cols="50"></textarea>
		<textarea name="result" rows="5" cols="50"></textarea>
		<input type="button" onclick="validate();" value="calculate!">
	</form>
</body>
</html>
]]> http://www.dotred.be/bart/2011/10/05/seo-keywords-generator/feed/ 0 Android activities and subactivities http://www.dotred.be/bart/2011/10/02/android-activities-and-subactivities/ http://www.dotred.be/bart/2011/10/02/android-activities-and-subactivities/#comments Sun, 02 Oct 2011 12:48:54 +0000 bart http://www.dotred.be/bart/?p=200 If you are developing an Android application, the chance is big that you will call other activities that require a response to your main form.

For example: if you have a main activity that lists notes and you call a new activity called AddNote to input a new note.
The main form needs to know if the add of the new note succeeded because it’s also possible the user pushed cancel.
Also, you want the main activity to know if the list with notes has to be refreshed, you absolutely don’t want to call your main activity from your subactivity after a succesfull add because this will mess up your activity lifecycle and your main activity will be opened twice.

Normally you would call an Activity like this:

1

intent launchActivity = new Intent(this,yourclassname.class);
1

startActivity(launchActivity);

Optionally, if you want the current class to close, you can call

1

finish();

Instead of this, we launch an Activity and wait for its result, with this we send a unique identifier as an integer:

1

Intent  launchActivity = new Intent(this,yourclassname.class);
1

startActivityForResult(lauchActivity,REQUEST_ID);

In the subactivity, we can set the result response to the mainactivity.
Say, for example, the save of a note was successfull, you can write:

1

setResult(RESULT_OK,null);
1

finish();

This will let the mainactivity know the result of it’s purpose has succeeded and close the subactivity.

In your mainactivity you can check if a result has been sent from the subactivity by the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13

protected void onActivityResult(int requestCode,int resultCode,Intent data){
if(requestCode == REQUEST_ID){
if(resultCode == RESULT_OK){
//do something - for example: refresh your itemslist
}
}
}

More information on Activities can be found at http://developer.android.com/reference/android/app/Activity.html

]]> http://www.dotred.be/bart/2011/10/02/android-activities-and-subactivities/feed/ 0 Javascript slideshow with fade http://www.dotred.be/bart/2011/06/25/javascript-slideshow-with-fade/ http://www.dotred.be/bart/2011/06/25/javascript-slideshow-with-fade/#comments Sat, 25 Jun 2011 08:32:37 +0000 bart http://www.dotred.be/bart/?p=187 Nowadays, there are some nice frameworks available to get amazing effects for your images on your website.
However, maybe you don’t want to use a framework.
Therefore, I created a JavaScript slideshowscript that shows images with a description with a fading effect.

The script has been tested with Mozilla Firefox 5, Google Chrome 12.0.742.100 and Safari 5.0.3

You can download it here, it is free to use under the MIT Licence included in the script.

]]> http://www.dotred.be/bart/2011/06/25/javascript-slideshow-with-fade/feed/ 0 My first Android app http://www.dotred.be/bart/2011/06/18/my-first-android-app/ http://www.dotred.be/bart/2011/06/18/my-first-android-app/#comments Fri, 17 Jun 2011 22:48:48 +0000 bart http://www.dotred.be/bart/?p=184 This week I wrote my first Android app.
I have created it for the visitors of my website carspotting.be in Dutch so they can read the latest news and see the latest spots on their smartphone.

You can find it at the Android Market.

]]> http://www.dotred.be/bart/2011/06/18/my-first-android-app/feed/ 0 To www or not to www http://www.dotred.be/bart/2011/04/30/to-www-or-not-to-www/ http://www.dotred.be/bart/2011/04/30/to-www-or-not-to-www/#comments Sat, 30 Apr 2011 13:35:11 +0000 bart http://www.dotred.be/bart/?p=176 A website url isn’t always what it seems.

If you go to a website like for example http://www.mywebsite.com and you have to login to access the website, you will notice that when you remove the www from the address, your session will be gone.

This is because a lot of webbrowsers don’t recognize it as the same website.

Also, believe it or not, some search engines wil index these two url’s as two different websites.
So, to avoid duplicate content penalities and sessionproblems, maybe you want to consider to make your website resistent to this confusion.

There are a few ways to do this. The way I use is to modify your .htaccess file to make your webserver add a www when it is not typed by the user.

Offcourse you can also do this at your serverconfiguration, but because most of you people don’t have access to the server config your website runs on, htaccess is the best way.

To accomplish this, add the following code to your htaccess-file

1
2
3
4
5
6
7
8

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule (.*) http://www.%{HTTP_HOST}/$1 [R=301,L]
]]> http://www.dotred.be/bart/2011/04/30/to-www-or-not-to-www/feed/ 1