Future of Software Engineering

XmltoUSSD

2016-01-29T15:39:00.002-08:00

Happy new year.

Let me go straight to the point.

Have a look at the following code snippet:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ussd SYSTEM "xml2ussd.dtd">
<ussd>

<screen id="main">
<form bindto="user" onsubmit="ussd:nav:finish">
<title>Welcome to my USSD application</title>
<input type="text" display="Enter your name"
id="name" required="true"/>
</form>
</screen>

<screen id="finish">
<text bindfrom="user">
Your name is {user.name}
</text>
</screen>

</ussd>

Wouldn't it be nice to feed this code into a compiler to compose a USSD app such as below?

This has been my pet project for sometime now.

Wait a minute. What's USSD you ask? (I hope you didn't ask what is Xml as well)

Wikipedia says "Unstructured Supplementary Service Data (USSD) is a protocol used by GSM cellular telephones to communicate with the service provider's computers. USSD can be used for WAP browsing, prepaid callback service, mobile-money services, location-based content services, menu-based information services, and as part of configuring the phone on the network"

As an engineer, i seek to make things simple or simple things simpler.... on to the superlative.

My aim here is to ride on the existing USSD-HTTP bridge created by the geniuses at ~~SMSGH~~ Hubtel by abstracting away the need to build HTTP apps for USSD.
Rather, a developer would simply construct an XML file and upload it into the magic box (what i call Areola Service) to spin off a USSD app on the fly, accessed by dialing a code such as *714*55#

That's it.

Project Areola is in two main parts: the open-source XmltoUSSD compiler and the SaaS (or rather Compiler-as-a-Service, CaaS) for actually hosting your xml file as a USSD app. The SaaS part is not open-sourced: sorry :(

The compiler is available here on github. Grab it and try out some samples using the dtd as a guide.

The CaaS version will be available shortly. Or you could contact me directly.

Happy coding.

The Concept of a BackPass Token

2015-07-27T09:35:00.000-07:00

It’s been quite a well.

But once again, I’ll go straight to the point.

Pre-ample:

Before we go any further, I want to cite that understanding this concept is dependent on principles and jargons of OAuth 2.0

What is a BackPass Token?

A BackPass token is a user-issued authentication and authorization token that grants limited access to a user’s resource. It’s more like a user-facing OAuth-like concept, not intended for developers alone.

That’s the basis for this concept. For some time now, OAuth generally focuses on developers and machine to machine interaction via APIs, with some strange jargons like Bearer, Scopes, Auth Code, Access Token, Implicit grants, just to mention a few.

I just thought it would be nicer (if not simpler) if a user “creates” an authenticated token to access his/her resources for another user. So, the user is just allowing a "backpass" access to an app he's signed on to.

Let’s consider a simple OAuth Code flow:

Figure 1 OAuth Code Flow

Now consider BackPass Token flow:

Figure 2 BackPass Token Flow

How is a BackPass Token generated?

As a first rule of thumb, a backpass token is not meant to be used by non-human systems. That is, not meant to be injected as a custom header in an API call.

According to my diagram, UserA should simply enable this feature in the web app that has capability of BackPass token. After which, he/she creates a backpass token by entering some parameters such as:

1. Name of the person to access the app on his/her behalf
2. How long the user is supposed to be logged in
3. Resources to access (email, photos, etc.)
4. Extra Data as you please

The backpass token itself should be a well-encrypted/salted/hashed value and must be aliased by the user. Aliasing means the user should now name the token with a sentence, such as “the quick brown fox 2015”. UserA provides this alias to UserB.

UserB presents this alias to the app. The app validates the alias and grants access to UserB as if it is user A’s account.

What’s the Point?

This concept is purely user-facing. The user does the simple work of granting access to other people through tokens.

For example, if say, Facebook enables BackPass token, I can generate a token for my wife to only post pictures for only 10 minutes and not to view my messages (@SusuanOkang, I ain't hiding anything, J) OR, on Gmail, I can generate a token for my colleague to email my report to my boss only, not to view or compose other emails. I don't need to share my username/password credentials with them.

A user should not be allowed to grant 100% access to his resources (including features such as modifying his/her account profile, passwords, etc.)

A user can generate/destroy as many BackPass tokens as possible.

How do I implement this?

I’ve not stated any means of implementing BackPass tokens.

If you understand the basics of OAuth, implementation should be quite easy.

However, I shall follow up with a working example soon.

Conclusion

BackPass token is just a concept. Hey, I’m open to both constructive and destructive criticisms. Share your thoughts below

Simple Architecture for Modern Applications

2014-11-18T09:09:00.001-08:00

Once again, i will go straight to the point.

This post is about presenting a simple architecture that acts as a foundation for building modern software. This has come from varied experience with software projects I've personally worked on and managed over the years. They are pure abstractions and fully agnostic of specific tools or language implementation. I call it Simple Architecture for Modern Applications (SAMA).

Here it is:

Simple Architecture for Modern Applications (SAMA)

What does this mean and how can you benefit from it?

Well, let me explain what each layer in the architecture does. Let's say we are to build a blogging app. Let's see how this architecture fits in.

Database Layer
This is the main persistence component. Every modern app needs to persist some data to a database. The database can be any kind; from large COTS RDBMs products like MSSQL, MySQL, Postgres or Oracle to NoSQL or even flat files, if you so desire. There's no real need of dictating how to structure the schemas of this component. I leave that to you.
With our blogger project, we shall have some tables to save user's information, their blog details, comments and followers.

Stored Procedure Layer
This is a layer that zips up all stored procedures (or functions or triggers) for the database component. Primarily, it is responsible for some very low level, event-triggered data manipulation before or after data is persisted into respective entities.
Using our example, we can have a procedure to auto-update the a field in a table with the total number of followers of a particular blog if an insert operation occurs in the followers table.

Repository Manager
This is a language-specific component that exposes DDM or DDL functions on entity abstraction instances. In other words, it preys on an ORMs capability and should implement a good design pattern, for example, the Repository Pattern, as a way of creating, reading, updating or deleting data from persistence.
Using our example, we may use Entity Framework and create some repository classes from our datacontext properties.

Core Services Integration Module (CSIM)
These are services that are indispensable to the application. They are internally protected and should not be exposed for modifcation to third-parties clients (developers or end-users). They may be some cron jobs or background service agents that perform some heavy CPU intensive processes. In our example, this may be a statistics service that counts how many comments are on a particular blog, source (geo-location) of the comments or perhaps some rewarding engine that increases a point per blog hit.

Notification Layer
This layer is primary for pushing out server notifications to various clients (web, mobile app or an IOT device). Ideally, these notifications should be real-time. This layer can be buttered in both before or after RM is called.
In our example, when the user's blog post is followed, notify user with an email.

Business Logic Layer
This is hard-core logic of the architecture. This is where many of the conditional and event-based statements are coalesced to form a working unit. For example, when a user saves a blog draft, generate a temporary URL to that draft for preview by other users.

API Layer
This follows REST-ful HTTP standards and its garnishes (HATEOAS). The URI formats should be self-explanatory and should be conventional. In our case, if we want to retrieve a blog post, we can do a GET request, pass in the Id, and read in details of the post. (e.g. http://sweetblog.com/api/v1/blogs/324)

Authorization Layer
At this layer, each request to the API layer is checked to see if it has the appropriate permissions to access the intended resource. In our example, if a user has not granted permission to a 3rd party app to update a blog post, this layer would fail that request and return a 403 status code.
It would be wise to employ Bearer Tokens or similar token-based request patterns to ensure successful integration of this layer. In our example, we may use OAuth 2.0 as a way of inspecting authorization claims from a third party.

Authentication Layer
At this layer, each request to the API layer is inspected to see if it contains valid credentials of a user of the blogging app. If not, we fail the request and return a 401 status code.

User-Interface Layer
This is where the end-user gets to see how the app looks and feels. The app may be presented in a web browser, as a desktop client, as a native mobile app, on a POS device or even handheld Internet Of Things (IOT) devices.

That's it.

The main benefits from such an architecture are:

Separation of Concerns: Each layer or module can be easily replaced/modified without necessarily affecting another component. For example, we can rewrite the web-browers UI layer without affecting the API layer or even CSIM.
Multi-Client: Your app can be accessed by any user over any internet-powered device.
Ensures Project Continuity: Any developer can work on a particular layer/module of the project without breaking the entire stack.
Implementation Agnostic: Yes, you realize that i do not necessarily depict data flow between each component, nor do i dictate where to start from. Neither is it coupled to a specific language or platform tools. Any good programming platform can be chosen to implement a specific part of the diagram. ASP.NET Web API may be used for the API Layer. A Node.js app may be wired in as the notification layer. The database may be built with Oracle. The authentication/authorization layers may be built with PHP. The Repository Manager may be built with NHibernate. The UI can be built with Angular JS. Mobile apps can be realized with Objective C.

In the end, there can be a beautiful symphony of well-integrated components from varied frameworks.

Do tell me what you think.

Simple Form Validator for CodenameOne

2014-04-04T04:47:00.001-07:00

It's been quite a while.

I've been meandering through the somewhat rough and smooth roads of software engineering, from implementing SSO, OpenID and OAuth 2.0 to getting down and dirty with C language for some of our business products at SMSGH.

But i'm back.

WHAT'S NEW?
Ok. I wanted to do a quick demo for a friend who delights in a single codebase for his mobile apps. In comes CodenameOne. In the course of building a login form(or rather a registration) page, i stumbled upon the "huge" task of input validation. This is where i started a little concept of an input validator for CodenameOne forms. I remember asking Shai Almog in the developer forum if reflection and method attributes (or data annotations) were supported, but he replied in the negative. That would have been of great help, but hey, i found a way around it.

HOW IT WORKS
So usually, forms (like my registration form) have input elements, like Textboxes, Checkboxes, Single/Multi select boxes, Date pickers, etc. Like you, i try to build a class that has those attributes. On on a more organized level, i create a base interface that will specify what the class should do.

Let's show some code. So in a "Register" button's click handler, we can do the following:

//RegistrationDetails should implement IValidatable
RegistrationDetails registrationDetails = new RegistrationDetails(txtEmail.getText(),txtPassword.getText());

//new-up an instance of FormInputValidator
FormInputValidator validator = new FormInputValidator();

//register a validator
//remember, RegistrationValidator should implement IValidator
validator.registerValidator(new RegistrationValidator());

if (validator.validate(registrationDetails)) {
//yipeeeee we're good to go
}
else{
//if validation fails, we can get a list of error messages
Vector errorList = validator.getErrorList();

}

It's that simple. I've hosted the code on github.

10 Lessons from CodenameOne

2013-07-25T05:46:00.003-07:00

I've been following and working with CodenameOne since my first post in March 2012. Believe me, it's an awesome framework. Here are some lessons I learnt:

1.Visit the discussion forum often:
Don't try to reinvent the wheel. Search the forum for topics similar to what you want to do. Carefully read through questions others have, try to solve it if u can. Post your questions there. You might want to check the developer documentations too.

2. Use your favourite IDE
Use an IDE that is more comfortable for you. I prefer NetBeans. And it looks like that might be a preferable IDE. There's a plugin for Eclipse as well.

3. Be patient with CN1
Uh-huh. You'll need this one a lot. It's a RAD tool in it's infancy, with a growing community support. Some native features (like Bluetooth API) may not be available to use on all platforms. Remember that the idea is one for all, not one for some. CN1 developers are seriously doing their best.

4. CN1 is not HTML5, CSS3, Javascript
It is using industry-standard programming language (Java) to write applications which are cross-compiled (on a cloud server) for all mobile platforms. These apps behave natively on each platform, not executed in a webkit browser.

5. Swing all the way:
If you have a foreknowledge of Java Swing tools, then you're in for a good treat. .NET developers who are familiar with hand-coding Windows Forms can also enjoy it well. :)

6. A note on Web Connections:
Synchronous and asynchronous connections are both supported depending on your preference. To update UI elements from background threads, you need to wrap them with Display.getInstance().callSerially(....) or Display.getInstance().callSeriallyAndWait(....)

7. Building your app:
Send a build request only when necessary, whether you're on a free or paid account. Be satisfied with debugging/using the simulator before sending a build request. Some features like multi-media recording are not supported on the simulator so you have to request a build and download it on your build server portal.

8. Building UI:
I prefer to hand-code my forms (and other GUI elements) than to use a GUI-builder. The GUI builder is a great way to start a pet project, until you really want to control/sub-class some methods from a base form.

9. Testing RIM apps:
When you want to test RIM builds on actual devices, you might wanna sign the .COD files using the BlackBerry IDE. You must have setup your signing keys (.db and .csk files) in your IDE.

10. Performance:
CN1 actually outperforms other apps built with other native tools. It openly shames HTML5-based apps on app-responsiveness and speed. However, you may not be able to develop intuitive games with CN1.

That's it. Happy coding. :)

Simple Migrations in Yii Framework

2013-06-28T09:02:00.000-07:00

Once again, i'd be straight to the point.

I'm going to talk about how to do simple migrations when you're working on Yii framework. I assume you've already setup your project, done some db configurations, etc.

Migration is a way to programmatically update (or append to) the structure (data type, name, etc) of your database entities/tables/fields.

In one of my pet projects (a simple shop manager), during the database design of a Stock table, I forgot to add a field to store the remaining quantity of an item. I noticed this after I had deployed the app to my localhost. I had to rely on Yii's migration power to skillfully modify the table.

If you're in the same soup, you're blessed to be here. Follow these simple steps.

1. Configure
Open config.php under protected\config. Modify the db connection array items to conform to your db settings in your main.php file.

2. Command-line
Open commandline program and navigate to {project_name}\protected, and execute the following command:

{phpfolder}\php.exe yiic migrate create {migration_name}

and hit Enter.
Yii would ask if you really want to do this. Confirm your action by typing 'yes' and hit Enter.
This creates a migration file with the name in this format: {yyMMdd_hhmmss}{migration_name}.php The file would be create in {project_name}\protected\migrations
Yii would populate the file with a class that has the same name as the filename (without the extension, of course) and it should contain up() and down() functions.

For those who are not familiar with migrations, up() function is executed to apply the intended migration, and the down() function is
executed with the intent to revoke a previous migration.

3. Writing the migration
In my case, I had to add a column to an existing table. So this is what I did in the up() function method block.

$this->addColumn('stock', 'QuantityRemaining', 'int(11)');

Essentially, this tells Yii to visit the 'stock' table, add a column with name 'QuantityRemaining' and data type of 'int' with length of '11'
You may include more lines of code to modify your database depending on what you really want to modify.

4. Executing the migration
Go back to the commandline program and execute the following:

{phpfolder}\php.exe yiic migrate

This would execute the latest migration file in the migrations folder.

Enjoy migrating. :)

Phonegap Plugin for IMEI

2013-05-21T08:58:00.002-07:00

Ok. It's been a giant leap from .NET to an open-source framework called phonegap.

I’m not gonna talk about the difference between the two. They're world's apart. I’m just gonna share with you some basic techniques of going native using phonegap.

In my spare moments, I tried to investigate this much talked-about platform that leverages HTML, CSS and Javascript skills. It was a wow experience. In my basic understanding of the technology behind phonegap, you can bring your webpage(s) to the user’s phone as “native” applications. I’ve quoted the word native because Phonegap basically irons your files onto a browser component of the underlying mobile device and packages it as an executable entity. Pretty neat huh?

Now to the main point of this blog:

In my experimental app, I wanted to retrieve the IMEI of the mobile device, and register through an external API. Phonegap provided just basic Javascript functions. This particular one seems mission. I then discovered the world of plugins. I found help online but that plugin couldn’t fit into the newest version of Phonegap (2.7.0, at the time of writing) API that I had downloaded. So, I had to do it on my own.

Note: This plugin works for only Android devices. That’s the pain of having to work with Phonegap. If you don’t find some great functionality in their API, you might need to go native. And that means, Eclipse for Android, XCode for iOs, Visual Studio for Windows Phone, etc. Also note that I assume you have setup your Android project already, if not visit this link.

So, I created a plugin class:

package com.myplugin.phonegap.imei;

import org.json.JSONArray;

import android.content.Context;

import android.telephony.TelephonyManager;

import org.apache.cordova.api.CallbackContext;

import org.apache.cordova.api.CordovaPlugin;

public class ImeiPlugin extends CordovaPlugin {

    @Override

    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {

        String result = "";

        boolean returnState = false;

        if (action.equals("get")) {

            TelephonyManager telephonyManager = (TelephonyManager)this.cordova.getActivity().getSystemService(Context.TELEPHONY_SERVICE);

          result = telephonyManager.getDeviceId();



            if (result==null) {

                        callbackContext.error("could not retrieve IMEI");

                  }

            else{

                  callbackContext.success(result);

            }



            returnState = true;

        }

        else {

            returnState = false;

        }

        return returnState;

    }

}

Then I created its corresponding Javascript file:

var IMEI = function(){};

IMEI.prototype.get = function(onSuccess, onFail){

return cordova.exec(onSuccess, onFail, 'ImeiPlugin', 'get', []);

};

if(!window.plugins) {

window.plugins = {};

}

if (!window.plugins.imei) {

window.plugins.imei = new IMEI();

}

Then I implemented it in the main HTML file:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<title>My Phonegap</title>

     <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>

     <script type="text/javascript" charset="utf-8" src="imei.js"></script>







    <script type="text/javascript">



    document.addEventListener("deviceready", onDeviceReady, false);



    function onDeviceReady() {



           getImei();



     }



     function getImei(){



           window.plugins.imei.get(function(imei) {

            alert(“your imei is: ” + imei);

        }, function(errorMessage) {

            deviceImei = errorMessage;

        });

     }

    </script>

</head>

<body>It works…</body>

</html>

Then i ran the app and woala: I got the device IMEI. Weeeeellll, on the emulator, I got a 000000000 as the device’s IMEI. However, when I tested it on a Samsung Galaxy Ace, I got the correct IMEI.

You can read more about creating custom plugins here.

Enjoy :)

Being Reactive: Using Reactive Extensions for .NET in your Applications

2013-04-03T09:03:00.001-07:00

This post is about using Reactive Extensions(Rx) in your .NET applications. I shall use Windows Forms and C# to demonstrate the power of this helpful library.

For starters, Rx is a library to compose asynchronous and event-based programs using observable collections and LINQ-style queries. Hmm...let's break that down: Rx helps us to subscribe to a list of objects and get feedback anytime elements in that list are processed. Initially, it might appear to be a not-so-different concept from the normal loop-eventcall concept. However, there are tons of extension methods that will really be of good help especially when we want to do asynchronous operations.

Users don't want to wait for your app to respond. They want to do other things whiles your app is loading some tweets or reading some large chunk of data from a database. The era of "Not Responding" is practically vapoured by Rx.

So here's an example.

Let's say our app writes 1 to 30 in a textbox when the user clicks "Begin". That's simple right? You might just do this:

private void WriteValues()
{
int maxValue = 30;
for (int i = 1; i <= maxValue; i++)
{
textBox1.AppendText(i + "\r\n");
//just to simulate some operation that might take a while to complete
//Thread.Sleep(500);
}
}

This works fine. It's good. No background threading or using Semaphores or WaitOne's or whatever. It's just simple. And it loads quite fast. Ok. Now let's make maxValue to be 10000, uncomment the "Thread.Sleep(..)" and execute. Your users now wait half a second for each integer in the loop to complete. That means they have to wait 1/2 * 10000 = 5000s = 83.33 minutes before they see their tweets. Oh my. Now we all know that's not helpful right? Wouldn't it be nicer to asynchronously load in the background and display the items in the textbox as it appears instead of blocking the whole app?

This is just one of the problems Rx can help out without having to deal with System.Threading namespace or any of the messy low-level syntax.

First thing is to get Rx library into your project. There's a special version of Rx for Windows Forms. It's available as a package on NuGet. Install with this command:
Install-Package Rx-WinForms
Next, let's create a new method that uses Rx to do the work for us.

private static string WaitAWhile(string number)
{
//just to simulate some operation that might take a while to complete
Thread.Sleep(500);
return number;
}

private void WriteValuesRx()
{
int maxValue = 30;
var query = from number in Enumerable.Range(1, maxValue) select WaitAWhile(number.ToString());

var observableQuery = query.ToObservable(Scheduler.Default);

observableQuery.ObserveOn(textBox1).Subscribe(n => textBox1.AppendText(n.ToString() + "\r\n"));

//multiple subscriptions..
//observableQuery.ObserveOn(progressBar1).Subscribe(n => progressBar1.Value += 1);
}

Yikes!! It looks like we've written more code than the first instance. Well, yes. Let's see why.

In the WriteValuesRx method, we built an enumerable list of strings to contain our numbers. We then convert it to an observable query, and subscribe to the observable query. This ensures that any time any of the elements in the list is being processed, we can observe it.

Since we want to avoid "Not Responding" drama in most traditional desktop apps, we tell Rx to do the convertion on a default thread pool of the app. Then, during the asynchronous operation on each element in the observable list, we inform Rx that we want to observe the output of the operation on the textbox control. However, it should be on a thread that would safely talk to the textbox control to output the results. This will eliminate the common "Cross-thread operation not valid: Control 'textBox1' accessed from a thread other than the thread it was created on."

That's it.

Quite amazingly, Rx allows multi-subscription. You can add as many subscriptions to the observable collection as possible. Rx will do the work of reporting events to the underlying subscribers for you, in a thread-safe manner.

Rx has come to stay. Happily, we can use it for traditional WinForms apps, WPF and even Windows Phone. There are more and more extension methods in the library which you can use to make your app more async and increase interactivity with your users.

Happy coding.

Securing Your ASP.NET MVC Apps

2013-02-11T02:05:00.001-08:00

Let me be straight to the point. I shall discuss two common security vulnerabilities in any MVC app and how to prevent it.

1. Cross Site Request Forgery:
As the name suggests, it's a forged request from an authenticated user on your site, triggered by some malicious tool. In other words, unknown to your authenticated user, a hacker might mimic form elements and repetitively post them to your controller. This can bloat your underlying persistent storage with dummy values and might even end up in a Denial-of-Service attack.

Here's an example:

Let's say we're building a banking application, and there's a page for an authenticated user to transfer funds from his/her account to another account. This is what a typical developer might do for a view.

<section id="data-form">
@{Html.BeginForm("TranferAmount","MyTransfers"); }
@Html.ValidationSummary(true)
<fieldset>
<h3><legend>Account Details</legend></h3>

<div class="control-group">
<label for="ReceiverAccount" class="control-label">Receiver's Account Number:</label>
<div class="controls">
@Html.DisplayFor(model => model.ReceiverAccount)
@Html.HiddenFor(model => model.ReceiverAccount)
@Html.ValidationMessageFor(model => model.ReceiverAccount)
</div>
</div>
<div class="control-group">
<label for="Amount" class="control-label">Amount:</label>
<div class="controls">
@Html.TextAreaFor(model => model.Amount)
@Html.ValidationMessageFor(model => model.Amount)
</div>
</div>

<div class="form-actions">
<input type="submit" class="btn btn-success large" value="Save" /> or
@Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-danger large"})
</div>
</fieldset>
@{Html.EndForm(); }
</section>

Then in the MyTransfers controller, we do this:

[HttpPost]
[Authorize]
public ActionResult TransferAmount(TransferDetails transfer)
{
if (ModelState.IsValid) {
_transferRepository.InsertOrUpdate(transfer);
_transferRepository.Save();
FlashSuccess("Successfully transferred.");
return RedirectToAction("Index");
} else {
FlashValidationError();
return View(transfer);
}
}

This seems normal. Indeed, it works logically. We have the "[Authorize]" attribute. It's ok, right? Nope. So what's missing? An attacker can inspect the page source of the view page and mimic it's behaviour and can iteratively post values to the form's action URL until the authenticated user's funds ran out. This is extremely dangerous.
To prevent this, there's a built-in library in ASP.NET MVC called AntiForgeryToekn. You need to add it's attribute to the controller's TransferAmount method and call it's HTML extension method to the view page, as shown below:

[HttpPost]
[Authorize]
[ValidateAntiForgeryToken]
public ActionResult TransferAmount(TransferDetails transfer)
{
.....

and do this in the view:

@{Html.BeginForm("TranferAmount","MyTransfers"); }
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

Now, look at the page source of the view page and you'll see a hidden element called "__RequestVerificationToken" with lots of alpha-numerics as values.
This is what happens: Anytime the authenticated user visits that page, a new VerificationToken is created on the client and on the server. After a post, these values would be matched for validity before the actual form action is called to play. And that's it!

2. Parameter Tampering:
Usually, when editing a model in MVC, the url might appear like this: http://some.remote.server/myaccount/Edit/4 and the page renders to allow the authenticated user to edit their profile. In the view page, we might do this:

<section id="data-form">
@{Html.BeginForm("TranferAmount","MyTransfers"); }
@Html.ValidationSummary(true)
<fieldset>
<h3><legend>Edit Account</legend></h3>
@Html.HiddenFor(model => model.UserId)
<div class="control-group">
<label for="Username" class="control-label">Username:</label>
<div class="controls">
@Html.DisplayFor(model => model.Username)
@Html.HiddenFor(model => model.Username)
@Html.ValidationMessageFor(model => model.Username)
</div>
</div>
<div class="control-group">
<label for="Password" class="control-label">Password</label>
<div class="controls">
@Html.TextAreaFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>
</div>

<div class="form-actions">
<input type="submit" class="btn btn-success large" value="Update" /> or
@Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-danger large"})
</div>
</fieldset>
@{Html.EndForm(); }
</section>

And in the controller, we might do this:

[HttpPost]
[Authorize]
public ActionResult Edit(UserDetails userDetails)
{
if (ModelState.IsValid) {
_userDetailsRepository.InsertOrUpdate(userDetails);
_userDetailsRepository.Save();
FlashSuccess("Successfully updated account.");
return RedirectToAction("Index");
} else {
FlashValidationError();
return View(userDetails);
}
}

This also works fine. However, since the number 4 might correspond to some field in, say, the UserAccounts table, an attacker might modify @Html.HiddenFor(model => model.UserId) value if he/she uses the developer tools in a modern browser. This would result in someone else's account being modified.

How do we prevent this? Thanks to a third-party library, AntiModelInjection, available at http://mvcsecurity.codeplex.com/ we can overcome this loophole. At the time of writing, this library has not been included in NuGet yet, so you have to manually download and include a reference to your MVC project.
It works almost the same as the AntiForgeryToken. So we just need to annotate our controller's method and add a line of code in the view.

In the view, do this:

@{Html.BeginForm("TranferAmount","MyTransfers"); }
@Html.AntiModelInjectionFor(o => o.UserId)
@Html.ValidationSummary(true)....

and in the controller's method, add this:

[HttpPost]
[Authorize]
[ValidateAntiModelInjection("UserId")]
public ActionResult Edit(UserDetails userDetails)
{.....

Now, when you view the source page, you should see a hidden element called "_UserIdToken", with lots of alpha-numeric values.

And the good thing is that AntiModelInjection and AntiForgeryToken can work together.

These are but a few ways to secure your ASP.NET MVC apps.

I hope you enjoyed this post. Do let me know what you think.

Twitter Bootstrap Typeahead

2012-11-17T06:05:00.000-08:00

I had quite a struggle with the Typeahead component in Twitter Bootstrap component. I was using version 2.0.0. with ASP.NET MVC 4 using Visual Studio 2012.

I wanted to display a list of locations as the user types in.

Believe me, it was a pain when i kept on getting this error: Uncaught TypeError: Cannot call method 'toLowerCase' of undefined in the console view of the Developer Tools in Chrome browser.

After some intensive, exhaustive research, i got a workaround the problem. The js code in "bootstrap-typeahead.js v2.0.0" section of bootstrap.js had a bug. I got much need help here. The solution is to replace the existing section containing code for typeahead with the codes from the plugin.

This is how i developed an ActionResult method in my Controller to return json for the typeahead to consume.

public ActionResult GetPossibleLocations(string query)
{
try
{
string userLocation = query.ToLower();
var possibles =
dataRepository.All.Where(l => l.Location.Contains(userLocation)).Select(l => l.Location).Distinct().
Select(x => new
{
locationName = x,
locationAlias = x
});

return new JsonResult
{
ContentType = "text/plain",
Data = new
{
query,
total = possibles.Count(),
suggestions = possibles.Select(p => p.locationAlias).ToArray(),
matches = possibles,
},
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};

}
catch (Exception ex)
{
return Json(null, JsonRequestBehavior.AllowGet);
}
}

This is what i did on the Views page to bring it to life:

$(function () {
$("#location").typeahead({
source: function (typeahead, query) {
$.ajax({
url: '@Url.Action("GetPossibleLocations")',
dataType: "json",
type: "POST",
data: { query: query },
success: function (data) {

typeahead.process(data.suggestions);
}
});
},
onselect: function (obj) {
// $('[name="user_id"]').val(obj.id);
}

});

});

<input name="location" id="location" data-provide="typeahead" value="@ViewBag.location" type="text" />

There we are. Nicely done, simple and beautiful.

Yii Framework Crash Course

2012-09-12T11:09:00.000-07:00

MVC has become a popular framework for building great web applications. I migrating gradually towards advanced level in ASP.NET MVC 3 (i'm discovering great features in 4.0 and above).

Despite my great respect for the .NET platform, i was brought on a project where we had to use open-source tools to deliver a great product. After days of 'arguements', we settled on quite an outstanding PHP framework called Yii.

Yii is a fast, secure and professional PHP web framework. Yii is practically easy to use. And i want to write something about it in 3 simple steps.

I assume that you have already downloaded Yii (latest version at the time of writing is v1.1.12) and extracted it to htdocs folder of your XAMPP web server. I shall present this making reference to the Windows OS platform and Eclipse IDE. Let's start.

Step 1
1. Create your database.
This is the foundation for Yii. A well-engineered database will augur well for your application, though you can easily make changes and update it in Yii. I repeat, make sure you design your database very well before you proceed to the next step.

Step 2
2. Create your webapp with Yii
How?
Open command-prompt and navigate to php folder. Then execute this command
php.exe ../htdocs/[yii folder]/framework/yiic webapp ../htdocs/[project name]

If successful, you should have this response:
Create a Web application under 'C:\xampp\htdocs\testproject'? [yes|no]

Type 'yes' to continue. You would see Yii in action, creating all the necessary webapp files for you.

3. Customize the code.
Now, you need a good PHP IDE to really help you out. I use Eclipse. It doesn't really matter. Open a new project in your IDE with the same name as the [project name]. If you're using Eclipse, it will automatically pull in all the files under that project name. You can inspect the folders to see what Yii did.

In the 'protected' folder are subfolders that should spark that MVC flame in you. You should see a models, views and controllers folder. These are what makes Yii fantastic. (You can view the output of your webapp anytime by navigating to http://localhost[:port]/[project name] in your browser.)

So now you need to link Yii to some database right? Great.

Yii uses a tool called Gii (lol) to auto-generate models, views and controllers after a successful connection to your database. Open the file 'main.php' in the 'config' folder under 'protected' folder. What you see are the main configuration details for Yii.

Yii mostly uses PHP codes throughout with lots of array returns. Give your webapp a name by changing the 'My Web Application' value in the 'name' key. Now, look for the 'modules' section and uncomment the 'gii' code. Replace the 'Enter Your Password Here' with an appropriate password.

By default, Yii uses SQLlite to do lightweight db connections. However, it can work against a number of databases. As you scroll down, you can see the MySQL 'db' configuration section commented out. Uncomment it, and comment the SQLlite db instead. Replace the values under the MySQL configuration section with your own database credentials (of course, they should be correct!). That should tell Yii that you're gonna point Gii to a MySQL database with those connection details.

In your browser, navigate to http://localhost[:port]/[project name]/index.php?r=gii. This brings you to the Gii page. Enter the password, and welcome to the magic world of Gii.
As some sort of rule of thumb, you should create Models first before controllers or views are added, so click on Model Generator.
On that page, you are presented with 2 textboxes, the first one asking you to enter your table name. The other textbox will be the model name after you enter the name of your table. Yii may automatically fill the second textbox for you, but you are free to edit it. Click on 'Preview' and then click 'Generate'. Do this for all your tables in your database.
After this, click on Crud Generator, enter a model name and click 'Preview'. As you shall see, Gii will generate a controller for that model as well as views for each CRUD operation. Repeat the procedure for each model that you created.

That's it!! You have a full fledged webapp. It should take at most 20mins to build a raw Yii webapp.
You can test your finished work by navigating to http://localhost[:port]/[project name]/index.php?r=[controller name without 'controller' word]/[controller's method name without 'action' word]

You may customize the URL routings to suit your pleasure.

Still confused? Try a video tutorial here.

Happy coding!

Exiting a WP7 Application

2012-06-22T04:33:00.001-07:00

Unfortunately, there's no class for safely exiting a windows phone 7 or 7.5 (may be 8 too) application. I struggled with this problem for quite some hours. I visited online forums and read many threads; visited many blogs too. All were trying to tell me to deliberately crash the app for exiting like below:

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true;
MessageBoxResult res = MessageBox.Show("Are you sure you want to exit?", "Exit?", MessageBoxButton.OKCancel);
if (res == MessageBoxResult.OK)
{

NavigationService.Navigate(new Uri("/kaboom.xaml", UriKind.Relative));

}
}

I felt it was reasonable but i knew that a good software engineer had to know and do better. After a couple of tries, 2 lines of code did the trick

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true;
MessageBoxResult res = MessageBox.Show("Are you sure you want to exit?", "Exit?", MessageBoxButton.OKCancel);
if (res == MessageBoxResult.OK)
{
e.Cancel = false;
base.OnBackKeyPress(e);

}
}

I believe this is a better, safer, engineering approach to exiting a WP7 app in a programmatic fashion.

Happy coding.

What was Steve Jobs thinking?

2012-04-25T05:32:00.000-07:00

I quite recently read an article that seems to argue that the flashy trends of smart devices (smartphones, tablets and whatnots) do not stand a chance of replacing the traditional laptops, but can be thought of as an enhancement or PC-Plus. I think I want to agree with that.

Most tech minds of our time are going frenzied with touch devices. Touch is almost everywhere; touch this, tap here, sometimes gesture movements. But do these near-future devices come to erase the indelible mouse-pointers and our favourite QWERTYs?

Let me take a look at these from a programmer’s point of view:

Can I write a simple program on any of these devices?
Can I do debugging and code engineering?
Can I maintain a database engine on these and perform real-time queries and retrieve stored procedures?

Obviously, the answer should be no.

These PC-plus devices are almost for access and read-only purposes. You do something on your PC (or Mac) and then sync it to your device (or access through cloud). You may not be able to even edit what you do after it gets on to your device.

And don’t tell me you can edit pictures and other documents. Ok, true to some point. But can you really type out your whole homework essay on your phone, without a physical stress-free typewriter. That is where touch becomes somewhat useless. I can’t imagine any student patiently typing his/her final year thesis on a touch device.

I’m yet to see a miracle when Oracle, Microsoft or Postgres comes with a mobile SQL Server; would that be query limited or a read-only version of such huge database systems. Or better yet, imaging Facebook’s database servers were run on these tiny devices.

Additionally, I can’t imagine how painful it would be to use visual studio on my Windows Phone 7.5 or even XCode on iPhone. Have you ever thought of that?

If these touch devices are replacing PCs, as some might ignorantly suggest, then how come you need to use XCode on a Mac to design and develop for and iPhone or iPad. Why can’t I just do so straightway on those devices.

PCs are needed. The mouse, especially, is one of the most precise pointing devices ever invented. It’s use is a can’t-do-without. They are here to stay. Touch devices are like small but smart brothers (or sisters) to these traditional computers.

So, what was Steve Jobs thinking? Arguably not a phased-out generation of traditional PC but shift towards getting things done faster and more comfortably.

FolderBrowser for J2ME, BB and Android

2012-04-18T02:47:00.003-07:00

This is a reply for my friend Whayu:

1. Copy and paste this into an empty java file and call it 'FolderBrowser.java'

import java.util.*;
import java.io.*;
import javax.microedition.io.*;
import javax.microedition.io.file.*;
import javax.microedition.lcdui.*;

import com.orion.lala.settings.DownloadSettings;

/**
* A UI for browsing and selecting a folder location on a phone
* @author Augustine
*
*/
public class FolderBrowser extends Form implements CommandListener
{
private String currDirName;

private Command view = new Command("Open", Command.ITEM, 1);
private Command back = new Command("Back", Command.BACK, 2);
//private Command btnWrite = new Command("Write", Command.OK, 2);
private Command btnFolder = new Command("Select", Command.OK, 3);
private Command exit = new Command("Cancel", Command.EXIT, 3);

private final static String UP_DIRECTORY = "..";
private final static String MEGA_ROOT = "/";
private final static String SEP_STR = "/";
private final static char SEP = '/';
Display display;
//Form callerMid;
boolean isAPIAvailable;

/**
* <b> Do not use this method</b>
* @param display
* @param caller
*/
public FolderBrowser(Display display, Form caller)
{
super("Select folder to save items");
// this.display = display;
//callerMid = caller;
doStartUpThings();
}

/**
* The constructor
* @param disp Must be valid and not null
*/
public FolderBrowser(Display disp)
{
super("Select folder to save items");
this.display = disp;

// callerMid = caller;
selectedFolderPath = "";
doStartUpThings();
}

private void doStartUpThings(){
currDirName = MEGA_ROOT;

isAPIAvailable = false;
if (System.getProperty(
"microedition.io.file.FileConnection.version") != null)
{
isAPIAvailable = true;
try
{
new Thread(new Runnable() {

public void run() {
// TODO Auto-generated method stub
showCurrDir();
}
}).start();

}
catch (SecurityException e)
{
System.out.println("microedition.io.file.FileConnection.version may be null: " + e.getMessage());
}
catch (Exception e) { System.out.println("microedition.io.file.FileConnection.version may be null: " + e.getMessage());}
}
else
{
/* StringBuffer splashText = new StringBuffer(
caller.getAppProperty("MIDlet-Name")).append("\n").append(
caller.getAppProperty("MIDlet-Vendor")).
append(isAPIAvailable?"":"\nFileConnection API not available");*/
Alert splashScreen = new Alert(null,"FileConnection API not available",
null,AlertType.INFO);
splashScreen.setTimeout(3000);
//display.setCurrent(splashScreen);
}
}

IFolderBrowserEventListener listener;

/**
* Sets the event handler.
* @param l Must be valid and not null
*/
public void setFolderBrowserEventListener(IFolderBrowserEventListener l) {
// TODO Auto-generated method stub
this.listener = l;
}

private String selectedFolderPath;

public void commandAction(Command c, Displayable d)
{
if (c == view)
{
List curr = (List)d;
final String currFile = curr.getString(curr.getSelectedIndex());
new Thread(new Runnable()
{
public void run()
{
if (currFile.endsWith(SEP_STR) ||
currFile.equals(UP_DIRECTORY))
{
traverseDirectory(currFile);
} else
{
showFile(currFile);
}
}
}).start();
}
else if (c == back)
{

}
else if (c == exit)
{
//display.setCurrent(callerMid);
if (selectedFolderPath==null) {
listener.noFolderSelected();
}
else if (selectedFolderPath.trim().length()==0) {
listener.noFolderSelected();
}
else {
listener.formExited();
}

}
else if (c==btnFolder){
//List curr = (List)d;
selectedFolderPath = "file://localhost/"+currDirName;
listener.selectedFolderPath("file://localhost/"+currDirName);
//display.setCurrent(callerMid);
}

/* else if (c==btnWrite) {

new Thread(new Runnable() {

public void run() {
// TODO Auto-generated method stub
writetoFolder();
}
}).start();

}*/
}

void showCurrDir()
{
Enumeration e;
FileConnection currDir = null;
List browser;
try
{
if (MEGA_ROOT.equals(currDirName))
{
e = FileSystemRegistry.listRoots();
browser = new List(currDirName, List.IMPLICIT);
}
else
{
currDir = (FileConnection)Connector.open(
"file://localhost/" + currDirName);
e = currDir.list();
browser = new List(currDirName, List.IMPLICIT);
browser.append(UP_DIRECTORY,null);
}
while (e.hasMoreElements())
{
String fileName = (String)e.nextElement();
if (fileName.charAt(fileName.length()-1) == SEP)
{
browser.append(fileName,null);
}
else
{
//browser.append(fileName,null);//it is adding files....we don't want to see this...so we comment is out
}
}
browser.addCommand(btnFolder);
//browser.addCommand(btnWrite);
browser.setSelectCommand(view);
//browser.addCommand(back);
browser.addCommand(exit);
browser.setCommandListener(this);
if (currDir != null)
{
currDir.close();
}
display.setCurrent(browser);
}
catch (IOException ioe)
{System.out.println("at showCurrDir " + ioe.getMessage());}
}

void traverseDirectory(String fileName)
{
if (currDirName.equals(MEGA_ROOT))
{
if (fileName.equals(UP_DIRECTORY))
{
// can not go up from MEGA_ROOT
return;
}
currDirName = fileName;
}
else if (fileName.equals(UP_DIRECTORY))
{
// Go up one directory
// TODO use setFileConnection when implemented
int i = currDirName.lastIndexOf(SEP, currDirName.length()-2);
if (i != -1)
{
currDirName = currDirName.substring(0, i+1);
}
else
{
currDirName = MEGA_ROOT;
}
}
else
{
currDirName = currDirName + fileName;
}
showCurrDir();
}

void showFile(String fileName)
{
try
{
FileConnection fc = (FileConnection)
Connector.open("file://localhost/" + currDirName + fileName);
if (!fc.exists())
{
throw new IOException("File does not exists");
}
InputStream fis = fc.openInputStream();

byte[] b = new byte[1024];
int length = fis.read(b, 0, 1024);

fis.close();
fc.close();

TextBox tb = new TextBox("View File: " + fileName, null, 1024,
TextField.ANY | TextField.UNEDITABLE);

tb.addCommand(back);
tb.addCommand(exit);
tb.setCommandListener(this);

if (length > 0)
{
tb.setString(new String(b, 0, length));
}
display.setCurrent(tb);
}
catch (Exception e) {}
}

/* void writetoFolder(){
try
{
FileConnection fc = (FileConnection)
Connector.open("file://localhost/" + currDirName + "somefile.txt");

System.out.println("Now here:" + "file://localhost/" + currDirName + "somefile.txt");
if (!fc.exists())
{
fc.create();
}
OutputStream os = fc.openOutputStream();
os.write("hello world".getBytes());
//os.close();
fc.close();

}
catch (Exception e) {
System.out.println("no way: " + e.getMessage());
}
}*/

}

2. Copy the following and paste into another empty java file and name it 'IFolderBrowserEventListener':

package com.orion.lala.folderdialog;

import com.orion.lala.ui.IFormExitedEvents;

/**
* Exposes methods called when browsing through folders
* @author Augustine
*
*/
public interface IFolderBrowserEventListener extends IFormExitedEvents {

/**
* Called when user has selected a folder.
* @param folderPath The full path to the selected folder
*/
public void selectedFolderPath(String folderPath);

/**
* Called when user has not selected a folder (and there's no history of a selected folder) and wants to exit.
*/
public void noFolderSelected();

}

3. Use it in your J2ME midlet project.

4.After you build your J2ME jar file, you can convert it to BB app using J2A and you can also convert it to Android's APK using netmite.

Hope it helps.

For now, let's wait on CodenameOne team to fix the issue.

FolderBrowser for CodenameOne

2012-03-26T01:28:00.002-07:00

I was patiently waiting for the CodenameOne team to fix a bug on the FileTree UI element but i guess they had other more important issues on their hands and minds.

Today, i decided to end the wait. I carefully inspected the CodenameOne library and started off to design my own file/directory browser. And believe me, it was quite simple. I played around with the com.codename1.io.FileSystemStorage package and voila, i developed my own UI element.
I guess some of the UI issues we file up can be solved by ourselves.

I'm giving back to the CodenameOne community what they gave me for free.

My FolderBrowser Form only shows folders but you can fully customize it to display files as well. It's very simple. I used just two methods to bring it to live. Just 203 lines of code made all the difference.

For code lovers, here's the code:

/*
* FolderBrowser component
* Developed by Augustine Gyawu Adjei
* Started: 23 March 2012
* First Public Release: 23 March 2012
*
* You may use this class in your apps for both personal and commercial use.
* Send feeback to austinejei@gmail.com or visit http://austinejei.blogspot.com
*/
package com.orionsystems.cnoui;

import com.codename1.io.FileSystemStorage;
import com.codename1.ui.*;
import com.codename1.ui.events.ActionEvent;
import com.codename1.ui.events.ActionListener;
import com.codename1.ui.layouts.BoxLayout;

/**
* Form for browsing through folders on a mobile device
* @author Augustine Gyawu Adjei
*/
public class FolderBrowser extends Form {


public FolderBrowser(){
super("Folder Browser");

initializeComponents();
}

private void initializeComponents(){
this.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
fs = FileSystemStorage.getInstance();

cmdSelect = new Command("Select");
cmdView = new Command("Open");
gp = new ComponentGroup();
gp.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
con = new Container(new BoxLayout(BoxLayout.Y_AXIS));

addCommand(cmdView);
addCommand(cmdSelect);
gp.addComponent(con);
addComponent(gp);
addCommandListener(new ActionEventListeners());

startListing();
}

FileSystemStorage fs;


private static String UP_DIRECTORY = "..";
//DEFAULT CHARACTERS
private static String ROOT_DIRECTORY = "\\";
private static String DIRECTORY_SEPARATOR = "\\";
private static char SEPARATOR_CHARACTER = '\\';
private String currentDirectory;

ComponentGroup gp;
Container con;
Command cmdView;
Command cmdSelect;

/**
* Starting point of the dialog. Displays the root directories on the
* device.
*/
private void startListing(){
SEPARATOR_CHARACTER = fs.getFileSystemSeparator();
DIRECTORY_SEPARATOR = String.valueOf(SEPARATOR_CHARACTER);
ROOT_DIRECTORY = DIRECTORY_SEPARATOR;
currentDirectory = ROOT_DIRECTORY;

displayFolders();
}

List folBrowser;

/**
* Displays all folders under the current directory
*/
private void displayFolders(){


String[] folderItems;
try {
if (ROOT_DIRECTORY.equals(currentDirectory))
{
folderItems = fs.getRoots();
setTitle("Drives");
folBrowser = new List();

}

else
{
folderItems = fs.listFiles(currentDirectory);
setTitle(currentDirectory);
folBrowser = new List();
folBrowser.getModel().addItem(UP_DIRECTORY);

}

for (int i = 0; i < folderItems.length; i++) {

String fileName = folderItems[i] ;
//you may customize this part to show files...
if (fs.isDirectory(currentDirectory + fileName)) {
folBrowser.getModel().addItem(fileName);
}

}

con.removeAll();

con.addComponent(folBrowser);
folBrowser.addActionListener(new ActionEventListeners());
con.repaint();


} catch (Exception ex) {
}
}

/**
* Browses a directory
* @param fileName Must be valid and not null
*/
private void browseDirectory(String fileName)
{
String thename = UP_DIRECTORY + DIRECTORY_SEPARATOR;
if (currentDirectory.equals(ROOT_DIRECTORY))
{
if (fileName.equals(UP_DIRECTORY))
{
//we don't need to go up from root
return;
}
currentDirectory = fileName;
}

else if(fileName.equals(thename))
{
//Move back one directory


int i = currentDirectory.lastIndexOf(SEPARATOR_CHARACTER, currentDirectory.length()-2);
if (i != -1)
{
currentDirectory = currentDirectory.substring(0, i+1);
}
else
{
currentDirectory = ROOT_DIRECTORY;
}
}
else
{
currentDirectory = currentDirectory + fileName;
}
displayFolders();
}

/**
* Class to handle action events
*/
private class ActionEventListeners implements ActionListener{

public void actionPerformed(ActionEvent evt) {
String currFile = folBrowser.getSelectedItem().toString();

if (!currFile.endsWith(DIRECTORY_SEPARATOR)) {
currFile = currFile + DIRECTORY_SEPARATOR;
}
if (evt.getSource().equals(cmdSelect)) {
Dialog.show("Great!!", "Selected Folder: " + currentDirectory + currFile, "Ok", null);
}
else if(evt.getSource().equals(cmdView)){
if (currFile.endsWith(DIRECTORY_SEPARATOR) || currFile.equals(UP_DIRECTORY))
{
browseDirectory(currFile);
} else
{
//you may want to show your files here....
}


}
else if(evt.getSource().equals(folBrowser)){
if (currFile.endsWith(DIRECTORY_SEPARATOR) || currFile.equals(UP_DIRECTORY))
{
browseDirectory(currFile);
} else
{

}
}
}

}

}

Here are some screen shots of FolderBrowser in action:

CodenameOne: One for All

2012-03-14T02:20:00.000-07:00

Introduction:

The mobile app development world has been truly revolutionized. Clear the red carpet and make way for CodenameOne.

CodenameOne is "A revolutionary open source mobile device development platform that leverages 15 years of Java portability to enable high quality rapid application development targeting all mobile platforms." In short, you can use CodenameOne to develop truly native mobile phone applications that is guaranteed to work on all platforms including JavaME, Android, RIM, iOS and ~~coming-soon~~ Windows Phone. And the good thing is that you don't have to bother yourself with the intrinsic know-hows of the device’s programming requirements. If you know Java, that’s it! You can now extend your skills to the world of mobile app development. And oh, it’s for free.

History:

CodenameOne branched off from LWUIT (Light-weight User Interface Toolkit). It is a huge improvement in terms of efficiency, speed (referring to the really fast simulator for all devices) and structurally similar to the industry-approved Java programming language.

Shai Almog let the cat out of the bag on 26 Dec. 2011 with some teaser statements that whetted my code apetite. He wrote: “Wouldn't it be great if you could write your code once and actually have it work on all the devices out there?
Wouldn't it be great if you could develop to iPhone/iPad without a Mac?
Wouldn't it be great if you could develop to Windows Phone 7 without a Windows 7 PC?
”

How to:

CodenameOne has great products on the website, www.codenameone.com . Joyous of all is that you can still install a plugin into your favourite Java IDEs like NetBeans (which I now use) or Eclipse (tried it too, it’s great). I don’t know of any support for IntelliJ or other Java IDEs.

Anyway the installation is quite simple. Visit here for Eclipse and here for NetBeans.

Available on the page is the perfect drag-and-drop designer tool, CodenameOne designer, with previews for all devices. This takes much of the pain of having to design device-specific UI. The designer can also be linked to your project, and you can do some coding that links the designer’s elements to some click events.

Example:

Let me do a quick walk through for those using NetBeans. In this example we’re going to post a form to some web service and get some feedback.

I assume you’ve already installed the plugin, restarted NetBeans, created a new project with a GUI builder. Open the themeAndGUI.res file.

Click on ‘Add A New GUI Element’. Select ‘UserDetailsForm’ from the ‘Templates’ combo box on the dialog that has popped up. Give it a name and click ok. There we are! For simplicity sake, I’ve deleted some of the UI elements.

(At the time of writing, GUI builder was in it's infancy. Many changes have been made since then.)

Select the submit button and go to the events tab. Click on ‘Action Event’. This automatically reverts to NetBeans and creates a method to handle that event.

So we’re going to do some coding:

protected void onFrmDetails_SubmitAction(Component c, ActionEvent event) {
        // If the resource file changes the names of components this call will break notifying you that you should fix the code
        try{
            String fname = this.findFirstname(c.getComponentForm()).getText());
            String sname = this.findSurname(c.getComponentForm()).getText());
            String occ = this.findOccupation(c.getComponentForm()).getSelectedItem().toString());
            String comm= this.findComments(c.getComponentForm()).getText());

        NetworkManager networkManager = NetworkManager.getInstance();
             networkManager.start();
             networkManager.addErrorListener(new ActionListener() {

             public void actionPerformed(ActionEvent evt) {
                 NetworkEvent n = (NetworkEvent) evt;
                 n.getError().printStackTrace();
             }
            });
//you probably want to do the above once throughout the lifetime of your app. I normally make networkManager static and just call the below.

             ConnectionRequest request = new ConnectionRequest() {

                   int chr;
                   StringBuffer sb = new StringBuffer();
                   String response = "";
                 protected void readResponse(InputStream input) throws IOException {
                      //do something with input stream
                   while ((chr = input.read()) != -1){
                           sb.append((char) chr);
                          // System.out.println("reading...");

                       }
                   response = sb.toString();

                          if (response.equals("OK")) {
                         Dialog.show("Response", "You made it! We'ev registered you", "Ok", null);
                     }
                          else{
                              Dialog.show("Response", "Aww, we could not register you because of blah blah blah", "Ok", null);
                          }

                 }

                 protected void handleException(Exception err) {
                      //do something with err
                     Dialog.show("Yikes!!", "Are you connected to the internet? Check your connection", "Ok", null);
                 }
             };


             request.setUrl("http://some.webservice.com/newuser.jsp?fname=" + fname + "&sname="+sname + "&occ=" + occ + "&comm=" + comm);
             request.setPost(false);
             networkManager.addToQueue(request);

        } catch (Exception e) {

        }

}

You can then build and run/debug the project.

Deployment:

You need to setup an account on the CodenameOne build server. Once you’ve simulated your project and you are ok, you can send a build request for any of the device platforms having provided the signing keys in the Project Properties page. For free users, you have 100 monthly build credits for free. Visit http://www.codenameone.com/pricing.html for more information.

Conclusion:

CodenameOne is here to stay. “Codename One is the most complete mobile development solution on the market today covering all stages of development, design, debugging, simulation, deployment & analysis.” You don’t want to miss out on this one for all approach to app development. Get it now.

PHP File Downloads

2012-02-15T04:19:00.000-08:00

I had to sweat a little before getting this right.

I browsed the net to get help on PHP File Downloading class. Well, i got some help though but i had to break open it, and learn the hard way.

As i rewrote the script from scratch, i suffered a lot. Testing and testing always led to the same incorrect result: the actual content of the targeted file was being 'echoed' instead of downloaded. I saw the long lines of jumbled-texts in my browser any time i run that script. Aaarrrrgh!!

Eventually, there was a light at the end of the tunnel as i added the following lines of code:

if(ini_get('zlib.output_compression'))
ini_set('zlib.output_compression', 'Off');

Explanation? You see, most php-included Servers set the output compression (in php.ini file) to On, by default. If this is so, your browser might display that jumbled-text instead of downloading the file. This usually occurs in Internet Explorer browsers; however, most well-known browsers might follow suite.

I hope this helps you.

And oh, here's the full source code:

$itemname = $_GET['download_file'];
$path = $_SERVER['DOCUMENT_ROOT']."/somefolder/";
$fullPath = $path. $itemname ;

// required for IE, otherwise Content-disposition is ignored
if(ini_get('zlib.output_compression'))
ini_set('zlib.output_compression', 'Off');

// addition by Jorg Weske
$file_extension = strtolower(substr(strrchr($fullPath,"."),1));

if( $fullPath == "" )
{
exit;
} elseif ( ! file_exists( $fullPath ) )
{
exit;
};
switch( $file_extension )
{
case "pdf": $ctype="application/pdf"; break;
case "exe": $ctype="application/octet-stream"; break;
case "zip": $ctype="application/zip"; break;
case "doc": $ctype="application/msword"; break;
case "xls": $ctype="application/vnd.ms-excel"; break;
case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
case "gif": $ctype="image/gif"; break;
case "png": $ctype="image/png"; break;
case "jpeg":
case "jpg": $ctype="image/jpg"; break;
default: $ctype="application/force-download";//you may want to get more...
}
header("Pragma: public"); // required
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false); // required for certain browsers
header("Content-Type: $ctype");
// change, added quotes to allow spaces in filenames, by Rajkumar Singh
header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
header("Content-Transfer-Encoding: binary");
header("Content-Length: ".filesize($fullPath));
readfile("$fullPath");
exit();

?>

Credits: http://elouai.com/force-download.php

Have you thought of ADempiere

2012-01-25T05:36:00.000-08:00

This is what i've gotten myself into now: ADempiere!! (I don't really care how you pronounce it)

Thinking of developing an ERP, CRM or anything of those business suites, then ADempiere might be your missing rib. Of course, it is very open source; and i mean very open. Expect to go through the fire of no-support affliction. You might need lots of bandwidth to watch online videos or webinars to get familiarised with this system.

But in the long run, it's worth it. My first encounter with ADempiere was sweet. All i had to do (or at least what i thought i had to do) was to properly organise my underlying database (with Postgres; also works well with Oracle) with a neat ERD, then let ADempiere create all the windows and connections to do the CRUD work. That is quick ADempiere 101. But unscrewing the bolts and nuts led me to a whole new world of ERP.

Once upon a time, i thought of developing a system that will be used to develop db related systems. Let me explain. Developers always come in contact with some kind of database connections. As such, you need to do at least 3 things:
1. Design database and tables
2. Develop entity classes that talk to the tables in the database
3. Design a good-looking UI that displays data from the database
I started off by developing db2lang to solve problem 2. Then i realised that the burden even lies more on 1 and 3.

ADempiere becomes a saviour in each of these cases. (There are other good ERP, CRM IDEs).

In this blog and subsequent ones, i shall address some common issues that you may encounter during setup of your development environment. I shall use the Windows OS to do the explanation.

Here are the tools you need to develop that great enterprise software you've always thought of:
1. Eclipse JEE Indigo
2. Postgres SQL (the current version) with the GUI tools.
3. ADempiere source package
4. Latest JRE
5. Common sense
Mind you, these are all free.

Installation Instructions:
1. Unzip the Eclipse IDE to your drive C
2. Do the same for the ADempiere source package. Copy the contents to drive C:\Adempiere
Luckily, your ADempiere should come packaged with a JBoss web server. If not, get one and download it. We shall also be working with Tomcat too. You may download it here.
3. Install Postgres SQL using default settings

Let's box on:
Ok, ok. So we're ready to go.
Create environment variables for Java JRE (if not already created), Postgres and your Adempiere directory.
Now, create a login role in Postgres with adempiere as both username and password. Then create a schema/database called adempiere.

Done? Now open Adempiere folder and run RUN_setup.bat directly or you may execute it using Command Prompt. It takes some time so get a drink whiles waiting.

Enter the required details as the screen demands. Follow the windows that appears and make sure all values entered are correct. Accept license terms when it appears. Adempiere creates a .properties file in your ADempiere home folder.

Good! Now run the file named 'RUN_Adempiere.bat'. This starts the Adempiere engine and open the login window.
Click on the textbox that has 'Server' as label. This opens the Connection window. Inspect the settings to verify its correctness and hit any of the 'Test' buttons for testing your settings. Ok the window to go back to the login window. Now you can login, select your role and wala, we're there.

Eclipse Shared Library Issue

2011-12-12T02:23:00.001-08:00

Just recently, after installing ADempiere platform and playing around with it, i decided to launch eclipse and do some commenting on some of my codes. After clicking the icon, i got the following:

Unfortunately, i had changed the Java-Home path in my environment settings. My Eclipse was a 64-bit version, and i had pointed it to a 32-bit version of Java.
To resolve this issue, I opened the eclipse.ini file in the eclipse folder and added the following line right after the 'openFile':
-vm
C:\Program Files\Java\jdk1.6.0_25\bin\javaw.exe

This points eclipse to where my 64-bit JDK resides. And it solved the problem.

.NET Framework Initialization Error!!

2011-12-07T01:05:00.001-08:00

Do you get this error sometimes:

Some versions of .NET may not be backward compatible unless you provide a .exe.config file next to your application.
I've gotten the anti-error solution. Just create a .exe.config file (you can use Notepad) with the same name as your application. Copy the contents of this file to your .exe.config file.

Put your .exe.config file in the same folder as your application. Now run your application. Is it done? Let me know!!

No CheckListBox in LWUIT?

2011-11-25T07:40:00.000-08:00

As I was developing the next version of the famous SoftCards (a Scripture Mastery JavaME app), I wanted to employ the exceptionally stunning components in LWUIT to enhance my UI. However, I noticed that LWUIT was not packaged with a CheckListBox, like the one in .NET controls.

I felt devastated but I did not lose hope. I searched the internet for help. I even realized there were others like me who wanted the same UI item. I got some help though, but, I decided to do my own thing and share it with the world. The result? CheckList!

How did I do it?

CheckList subclasses the List class and provides a few critical methods like getItems(), getCheckedItems(), getItem(int index). It’s so because they were missing in the super class.

Next, I created a CheckListItemData class that represents the data to be stored in the CheckList. To be simple, I created properties to get and set the check state, ID and Display Name of the item.

Also, I added a renderer class. As the name suggests, it’s responsible for presenting the check item itself; the UI. It subclasses the CheckBox and implements ListCellRenderer.

Put it all together: CheckList!

Finally, I tested it and kawaam!! It works.

For code lovers:

For the CheckList class itself, I’m adding this method from the code because it was difficult to do so:

public CheckListItemData getItem(int index){

try {

CheckListItemData c = new CheckListItemData(0, "", false);

if (index >=size() || index<0) {

return c;

}

setSelectedIndex(index, false);

c = (CheckListItemData) getSelectedItem();

return c;

} catch (Exception e) {

// TODO: handle exception

return new CheckListItemData(0, "error occured", false);

}

With this basis, it’s easy to do many other things.

Download the source files here

db2lang

2011-11-24T14:26:00.000-08:00

Allow me to introduce db2lang.

Db2lang is software that creates wrapper classes for your databases entities. It simply generates source code files, nicely formatted, depending the language of your choice. For now, classes can be generated in C#, PHP and Java languages. Additionally, only MySQL and MSSQL are supported. My operations for extension to Oracle, Postgre and others were halted because of my ecclesiastical exile.

Db2lang was conceptualized when I posted a blog on making your classes talk with your database. Around the same time, a thought came to mind to develop a simple program to do this; instead of having to invariably create concrete classes for database connectivity. Thus, db2lang was born. Let me state here that I did not have any knowledge of any database-mapping tool, whatsoever. It was just my own small way of reducing time on writing code, especially for huge projects that I work on. Don’t get me wrong, I wasn’t re-inventing any wheel.

It really came in handy when I was single-handedly working on over 40 tables in a single database. The user architecture was becoming complex, let alone the ERD. To sit down and write codes to perform CRUD operations would be time-consuming had it not been for db2lang.

After successful testing, verification and validation from trusted software engineer colleagues, I feel to make it open to the public. Try it out, and let me know what you think.

How it works

Here’s a screen shot:

So, you select your database provider, enter your credentials (they are not cached anywhere, locally or sent via some unidentified socket to me, lol), select the language in which you want the source files to be generated and the folder, then start the operation.

Db2lang works in a simple process I call MetaData Reflection. Reflection here has no reference whatsoever to Java or .NET runtime reflection of objects. MetaData Reflection means that it accesses your tables in the specified database, retrieves the metadata, map it to the basic types of the selected language and creates simple class properties out of it. Additionally, it creates a service class containing powerful yet simple methods that perform CRUD operations on your database. The property class and service class have filenames which are the same as your table name. Great huh?

One Tiny Hurdle

The current version assumes that your MySQL database port is set to 3306. I shall rectify this in the next release. And oh, a PRO version will come out soon.

How It Really Works

For code lovers, here are sample codes in C# (parts of the program were written in Java) on MetaData Reflection:

///

/// Generates the class files for the specified language

///

public void GenerateClasses()

{

try

{

string[] thetables = GetTables();

foreach (string onetable in thetables)

{

bool notsupported = false;

switch (_langtype)

{

case general2lang.LanguageType.CSharp:

new db2cs(ClassesFolder, onetable, GetFieldsInformation(onetable),this._connstring,"MySql").StartFileCreation();

break;

case general2lang.LanguageType.Java:

new db2java(ClassesFolder, onetable, GetFieldsInformation(onetable), this._datasource, this._dbname, this._username, this._password).StartFileCreation();

break;

case general2lang.LanguageType.PHP:

new db2php(ClassesFolder, onetable, GetFieldsInformation(onetable), this._datasource, this._dbname, this._username, this._password).StartFileCreation();

break;

case general2lang.LanguageType.VB:

System.Windows.Forms.MessageBox.Show("VB is not supported for now...");

notsupported = true; //vb is not ready now

break;

default:

break;

}

if (notsupported)

{

break;

}

catch (Exception ex)

{

System.Windows.Forms.MessageBox.Show(ex.Message);

}

So, GetTables()retrieves all the tables under the chosen database.

GetFieldsInformation(onetable) returns the metadata about a particular field in the database

StartFileCreation() creates the data and service class for that particular field in the database.

Download the raw .exe and other files here

Back

2011-11-10T05:21:00.003-08:00

Hi,

I'm back from my ecclesiastical exile.

Get ready for more on software engineering.

jSQL release 2

2009-10-12T05:27:00.000-07:00

I'm happy to announce release 2 of jSQL, the much easy-to-use JavaME (or J2ME) wrapper library for Record Management Store(RMS).

Release Notes:

1. Refactored code for optimization

2. Fully documented

Download packages:

1. jSQL v1.0.2

2. jSQL Javadoc

Working with Facebook Platform

2009-10-12T05:26:00.000-07:00

Before you read: This article is like 2 years old now. Facebook has sort-of changed their connectivity architecture. Please read more on this at http://developers.facebook.com

I had a really difficult time trying to develop a simple page on the Facebook platform. It demanded lots of time and effort. It was like i was in a whole new world of re-organised programming platform. Talk about Facebook Markup Language, Facebook Query Language, Facebook JavaScript, the API itself, etc.

You can get really knocked out as to why they have to define their own way for programmers to follow. But hey, i respect their architecture. You can't just play around with people's publicly personal accounts. (lol!!).

After about 3 weeks of battling with the platform, i finally got the modus operandi. As i always do, when i get knowledge, i share.

I've written this post to guide newbies (or dummies, if you're one) on how to create a Facebook Application.

As usual, i assume you already have some basic skills in programming especially Javascript, PHP, or even the ASP.NET languages (C#, VB.NET).

Ok, let's start. I'm going to do 6 things.

1. Briefly introduce you to the Facebook platform

2. Crawl with you through the pre-requisites

3. Walk you you through your application setup and settings

4. Run with you through an example code

5. Fly with you through 1 or 2 high level intricacies.

6. Kick you outta here to start your own application.

1. Intro

Facebook's developer platform enables developers to use any programming language to query their API via REST calls. As such, you can develop both desktop and web applications to do practically the same thing; update status, comment on status, view friend's profiles, it even goes to reading mails, uploading multimedia and send SMS. Awesome init?

2. Let's crawl

Of course, you need to have a Facebook account before you can develop/host your application on their framework. So, after you login, go to the bottom of the page and click on 'Developers'.

3. Walk with me:

Are you on the developer's page? Ok, now click on 'Start Building for your site'.

A wizard-like setup page appears. Enter your details as shown. Click 'Next Step'

You can safely ignore step 2 (Try it if you're that curious)

That's it.

Do you see a page similar to the one shown below?

Great!! Copy your API Key and Secret. They are the the lifeblood of your application. Click on 'Developer Dashboard'. Allow access to the next page. As you might a little confused, the page you are entering is in itself a Facebook Application. It is a sort of control panel for all your applications (yeah, i said applications; you can setup more than 1).

Ok, now click your application name. (shaded yellow in the image below)

The next page is the actual control panel for your new application.Click on 'Edit Settings'.

The next page presents you with a host of options. You can perform 1001 customizations on your application. Go through it, be curious!! One important page is on 'Canvas'.

The portions shaded yellow are those i deem important. The first textfield requires you to specify just a URL name for your application. The next textfield is where you have to enter the exact URL to your index page (e.g. http://www.mytextApp.com). This page would be automatically loaded to the Facebook platform when a user visits your application.

The next step is to specify the render method. As far as i know, Facebook renders your application as either iFrame or FBML. I like FBML;it enables you to use FBJS and FBML tags that would be intepreted and nicely rendered on your page. Read more here. Save your changes.

4. Ready to run?

Honestly writing, the only example i got was on the main dashboard. Click on 'Back to my Applications' at the top. Scroll down and click on the hyperlinked text 'example code'.

This pops up a dialog containing PHP codes. Yipeeeee!! Are we done? NO!! When you inspect the code, do you see 'require_once facebook.php' and a line of code that reads $facebook = new Facebook($appapikey, $appsecret);

Where did they get that? It's a PHP client library and it's freeeee!!. You can get on the same page. Scroll down and click on 'Download the Client Library'.

What about .NET folks? Get yours here.

Java lovers, try here

5. Let's fly

Be patient!! Facebook offers high-level security to their account holders. Before you can do anything, the user needs to grant permission for your application. That permission can either be temporal or permanent.

Let me explain.

Anytime a user visits your page, Facebook transfers a session ID to your application. You can use this to get user's status update, list friends, groups or events. You can even use this to access the user's account offline. However, the user again needs to grant that permission; and this means you have to save it to a database.

Read on permissions here.

Get more info on using session IDs here or there.

6. I encourage you to be more curious. Play with the platform. It's fun.