Wednesday, March 11, 2015

AngularJS vs Ionic abstract state


Ionic is a wrapper for AngularJS and one of the changes that they've done is to the abstract state of the ui-router. I tried to follow an AngularJS tutorial for abstract state and added the following code:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>',
    controller: 'MyParentController'
})
.state('myparent.mychild', {
    url: '/mychild',
    templateUrl: 'mychild.view.html',
    controller: 'MyChildController'
})


Inside mychild.view.html I had:

<ion-view>
    <ion-content>
    ...
    </ion-content>
</ion-view>


This resultet in a blank page (although the controller was executed since it fetched the model from my backend). Also my navigation, for which I used $ionicHistory, was all messed up.

The trick apparently is to use ion-nav-view instead of ui-view in the abstract state:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ion-nav-view/>',
    controller: 'MyParentController'
})


Lesson learned, use Ionic tutorials. :)

Source:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states
http://ionicframework.com/docs/api/service/$ionicHistory/

Friday, March 6, 2015

Android 9-patch image in HTML5 CSS3

One feature that Android has adopted is 9-patch images. The Android Studio contains a Draw 9-patch tool which lets you 'create bitmap images that automatically resize'. Basically you select areas of an image that can be repeated or stretched while others are kept at the same size. Giving you almost SVG functionality for bitmap images, especially great for buttons.


Now this feature would be great for web as well, e.g. responsive design pages. To achieve this we can use the CSS3 feature border-image which combines border-image-source, border-image-width, border-image-slice and border-image-outset.

border-image-source defines which image to use.

border-image-width defines the width of the border image. Stretches or shrinks the image regions to fit the widths.

border-image-slice divides the image into 9 regions, thereby the name (see the image above) deciding which parts can be repeated/stretched. The regions are: four corners, four edges and a middle. The fill property decides if the middle should be filled in or kept transparent.

border-image-outset decides how far out from the border the image will appear. Together with border-width this enables the border to not take up all the space inside the container caused by it having a wide border to fit the image inside (See http://www.norabrowndesign.com/css-experiments/border-image-frame.html#one). This is especially great for select/dropdown boxes as they can't work around this by using line-height (http://stackoverflow.com/questions/18613279/text-over-the-top-of-a-border-image-using-the-border-as-an-expandable-backgroun)

border-image combines the four above properties, but I felt I had more control when splitting them up. However, as of right now browser support for border-image and especially border-image-outset is a bit limited. Most browsers support border-image, but might need browser-specific CSS (e.g. -webkit-border-image).


 Example:
border-style: solid;
border-width: 5px;
border-image-source: url(dropdown.png);
border-image-width: 25% 10% 25% 5%;
border-image-slice: 10 70 20 60 fill;
border-image-outset: 12px;


http://border-image.com lets you generate border-image CSS from an image. but it doesn't put in border-image-outset.

Source:
https://github.com/chrislondon/9-Patch-Image-for-Websites/wiki/What-Are-9-Patch-Images
http://stackoverflow.com/questions/6806559/does-9-patch-png-can-work-somehow-with-css-on-browsers
http://stackoverflow.com/questions/3659457/nine-patch-images-for-web-development
https://teamtreehouse.com/forum/borderimageslice-vs-borderimagewidth 

Friday, February 13, 2015

Mockito for Play 2 Framework

Mocking is great! :)
To use Mockito to mock stuff for your tests in Play 2 Framework do the following:

1. Add mockito as dependency in Build.scala:
val appDependencies = Seq(
    ...,
    "org.mockito" % "mockito-all" % "1.10.19"
)
Find latest version from https://github.com/mockito/mockito/blob/master/doc/release-notes/official.md

2. Add imports to your JUnit java file:
import org.mockito.Mock;
import org.mockito.runners.MockitoJUnitRunner;
import static org.mockito.Mockito.*;

Note the static import of Mockito. This lets you call mock and when without "Mockito." prefix, like most of the tutorials do.

3. Create mocks:
Either by putting @RunWith(MockitoJUnitRunner.class) on your test class and using @Mock for class members. E.g.:
@RunWith(MockitoJUnitRunner.class)
public class HomeControllerTest {

    @Mock
    HomeForm mockHome;

or by creating the mocks in your code:
HomeForm mockHome = mock(HomeForm.class);

4. Set up mock behavior:
List mockNames = (List) mock(List.class);
when(mockNames.get(0)).thenReturn("bob");
when(mockCompany.getNames()).thenReturn(mockNames);


5. Run using play test, you might want to run play clean first to make sure mockito is downloaded.

Nice feature:
If you've used googlemock - Google C++ Mocking Framework and miss the "Uninteresting function call encountered" messages, for example for debugging, you can get verbose output from mocks by adding withSettings().verboseLogging() like this:
HomeForm mockHome = mock(HomeForm.class, withSettings().verboseLogging());

Sources:
http://www.javacodegeeks.com/2013/05/junit-and-mockito-cooperation.html
http://stackoverflow.com/questions/11802088/how-do-i-enable-mockito-debug-messages
http://www.baeldung.com/mockito-behavior

Monday, July 21, 2014

Make your Raspberry Pi wireless

Make your Raspberry Pi wireless and be able to hide it away wherever you have a power outlet handy, just follow these steps:

1. Buy a Edimax EW-7811Un 150M 11n Wi-Fi USB Adapter, great plug and play adapter.
2. Follow the steps on http://www.savagehomeautomation.com/projects/raspberry-pi-installing-the-edimax-ew-7811un-usb-wifi-adapte.html
3. Follow https://www.modmypi.com/blog/tutorial-how-to-give-your-raspberry-pi-a-static-ip-address to set a static IP address

Consider upgrading your software and firmware by following https://raspberrypi.stackexchange.com/questions/4698/how-can-i-keep-my-raspbian-wheezy-up-to-date

Good luck! Have fun with your pi. :)

Tuesday, June 24, 2014

Play 2 framework access files in WAR

So you've created WAR files from your Play project, see Play 2 framework WAR file. But how to fetch files within you WAR file.

I previously used:
new File(play.Play.application().path().toString() + "//mydirectory//myfile.txt");
which works fine when running on the Play "stack".

After exporting to WAR file the path ended up looking in the application home directory, e.g. /home/<runninguser>/.
Still works for files not in the WAR, since they are expected to be found here anyways.

Solution for my WAR files:
InputStream is = Play.class.getResourceAsStream("/mydirectory/myfile.txt"");
StringWriter writer = new StringWriter();
IOUtils.copy(is, writer, Charsets.UTF_8);
writer.toString();


Source: http://stackoverflow.com/questions/309424/read-convert-an-inputstream-to-a-string and http://stackoverflow.com/questions/6888343/getting-a-resource-file-as-an-inputstream-in-playframework

Note: Jetty will unpack you WAR file to a temp directory, either /tmp or below you application path /home/<runninguser>/ so this is what you are accessing. Remember not to have a script deleting these files as this will crash your web application.

Play 2 framework WAR file

Play 2 framework is a nice framework for writing web applications in Java/Scala. Play runs it's own netty server so you get it up and running by just writing play run. It detects file changes and recompiles classes as needed upon page refresh in development mode.

A small catch is that Play does not natively support running in a container, e.g. Jetty, Tomcat, Glassfish, or JBoss. In fact it doesn't support ServletContext at all as far as I can see. (See http://www.playframework.com/documentation/1.2.2/faq and http://guillaumebort.tumblr.com/post/558830013/why-there-is-no-servlets-in-play)
This is a minus when trying to get started with Play in existing server environments. Luckily Damien Lecan started an open source project to build WAR files from Play, play2war plugin.

Follow https://github.com/play2war/play2-war-plugin/wiki/Configuration to install the plugin.

Basically your Build.scala file should look something like:
import com.github.play2war.plugin._
object ApplicationBuild extends Build {
    val main = play.Project(appName, appVersion, appDependencies)
        .settings(Play2WarPlugin.play2WarSettings: _*)
        .settings(
      // Add your own project settings here 
      Play2WarKeys.servletVersion := "3.0"
    )

}

and your plugins.sbt:
// Use play2war for creating war files using 'play war'
addSbtPlugin("com.github.play2war" % "play2-war-plugin" % "1.2-beta4")

And hopfully, magic! (Note currently (2014.06.24) only support Play 2.2.1)

Once installed, just run play war and a war file is created for you. In addition you will need a config file for your application, the application.conf in your project folder, and any extra files/folders like the private folder of your project.