Alvin Sim's Blog

Bye

The last post I wrote here was 6 February, 2013 – more than two years ago!

Unfortunately, I have decided to retire this site and will be blogging at my website.

What this means is

  • This is my last post here.
  • All the posts here will remain here and won’t be removed or moved to the new site.

Thanks to all of you who have read and commented on my posts.

Advertisements

Podcast I Listen

What is a Podcast?

A podcast is a type of digital media consisting of an episodic series of audio radio, video, PDF, or ePub files subscribed to anddownloaded through web syndication or streamed online to a computer or mobile device.

Why do I listen to Podcasts?

I learnt a lot listening to podcasts. Basically, I listen to them when I am doing house chores, feeding/cleaning the pets, driving alone, running errands, on long commutes, travelling, at work writing codes/scripts, etc. The podcasts’ topics vary, but they are mainly about IT security, software development, open source softwares, business, comedy, etc.

How do I listen to Podcast?

I subscribe and tag the Podcasts via Google Reader. I sync and copy them to my ipod and also some to my phone’s memory card.

What Podcasts do I listen to?

I listen to quite a number of podcasts. Here is a list of some of my favourite podcasts (in no particular order).

  1. This Developer’s Life
  2. .NET Rocks!
    • I started listening to .NET Rocks! since 2004 or 2005. It all started after I attended TechEd Kuala Lumpur (2004 or 2005) and got to know some interesting speakers such as Richard Campbell (@richcampbell) and Steven Forte (@worksonmypc). It is when I followed their blogs that I got to know about this podcast. Its hosts are Carl Franklin and Richard Campbell. This podcast focuses mainly on Microsoft Technologies, but they do interview some interesting people. They do interview people on other non-Microsoft related projects such as HTML5, NodeJS, UX design, NoSQL, etc.
  3. The Hanselmintes Podcasts
    • Hanselminutes is hosted by Scott Hanselman, which he also does “This Developer’s Life”. On his show, he talks to interesting guests about the interesting things they do; or he sometimes has random chat with his fellow friends .
  4. NSFW
    • This podcast is part of the TWiT network and is hosted by Brian Brushwood (@shwood) and his sidekick Justin Robert Young (@justinryoung).
    • NSFW is an abbreviation of “Normally Safe For Work”.
    • If you want to listen to something funny, extraordinary, strange and bizzare, then this is the one for you.
  5. Security Now
    • Security Now  is also part of the TWiT network hosted by Steve Gibson (@SGgrc) and co-hosted by Leo Laporte (@leolaporte).
    • Steve Gibson mainly talks about IT security and he gives in-dept information on various security topics.
  6. FLOSS Weekly
  7. Ham Nation
    • This show is also from the TWiT network hosted by Bob Heil and co-hosted by Gordon West.
    • They talk mainly about being ham radio or also known as amateur radio.
    • Listening to this podcast has got me interested to be a ham.

What interesting podcasts do you listen to?

Dynamically include a JSF

Currently I am working on a prototype program, building a CRUD program using JSF together with PrimeFaces. Being totally new in both, I started to get my hands dirty in code without properly going through the tutorials. I am still at the beginning chapters of the Java EE 6 tutorial.

In this program, I have a layout with 4 main sections – top, left, center and bottom. This is done using PrimeFaces layout component. In this component, there are three sub-components whereby its position are defined as “North”, “West”, “Center” and “South”.

primefaces-include

For the purpose of this demo, the program has been simplified to best describe the scenario.

Lets have an overview of the file hierarchy first. There is an “index.html”, which is the screen capture above. And in the same directory, there are “documentA.xhtml” and “documentB.xhtml”. The contents of these two documents will be displayed on the center section of the layout.

On the left section, there are two buttons – “Search Document A” and “Search Document B”.

 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
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head><title>Test Layout Include</title></h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="60">NORTH</p:layoutUnit>
            <p:layoutUnit position="west" size="200">
                <h:form>
                    <h:panelGroup>
                        <p:commandButton id="btnPoSearch" value="Search Document A" />
                        <p:commandButton id="btnList" value="Search DocumentB" />
                    </h:panelGroup>
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <h:form id="frmContent">
                    <p:panel id="pnlContent">
                        <ui:include src="documentA.xhtml" />
                    </p:panel>
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit position="south" size="60">SOUTH</p:layoutUnit>
        </p:layout>
    </h:body>
</html>

And in “documentA.xhtml”, we should not use any of the <html />, <head />, <body /> and <form /> tags. The code for “documentA.xhtml” is as below.


1
2
3
4
5
6
7
8
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">
    <h3>Document A</h3>
    <p:commandButton id="btnSearch" value="Search" type="submit" action="#{documentAController.doSearch}" />
</ui:composition>

With this, the contents of “documentA.xhtml” could be displayed in the “index.xhtml”. So, we come to my second problem. I want the contents on the center section to be dynamic i.e. clicking on the “Search Document A” button will display contents from “documentA.xhtml” and clicking on the “Search Document B” button will display contents from “documentB.xhtml”.

To do this, we have to use JSF’s managed beans. It is a type of Java Bean. If you are familiar with the MVC pattern, managed bean is the controller.

In the managed bean, I need to declare a property “page” of String type and also its getters and setters.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/** === Getter / Setter === **/

public String getPage() {
    return page;
}

public void setPage(String page) {
    this.page = page;
}

/** === Properties === **/

private String page = "documentA";

I have also set “documentA.xhtml” as my default page i.e. when “index.xhtml” loads in the browser, it will always display contents from “documentA.xhtml”.

In the “index.xhtml”, I make the below change.

1
<ui:include src="#{menuController.page}.xhtml" />

The value in the src attribute is using an Expression Language, or commonly called EL. By using EL, it makes it possible to easily access application data stored in the JavaBean component. In this context, we are getting the value of the page property instantiated in the managed bean.

We need to add two attributes to the two buttons in the left section – action and update.

1
2
3
4
<p:commandButton id="btnPoSearch" value="Search Document A"
                 action="#{menuController.doViewDocumentA()}" update=":frmContent:pnlContent" />
    <p:commandButton id="btnList" value="Search DocumentB" update=":frmContent:pnlContent"
                     action="#{menuController.doViewDocumentB()}" />

In the action attribute, we use EL to have it call method doViewDocumentA() in the managed bean. In the managed bean, the method is as below.

1
2
3
public void doViewDocumentA() {
    this.page = "documentA";
}

So, by clicking on the button “Search Document A”, it is calling a method which sets the page property to “document A”. And by clicking the “Search Document B” button, it changes the page property to “document B”. The content in the center section will also be changed based on the page property value.

But how does the content get changed? This is where the button’s update attribute comes into play. If you look at the value, it is :frmContent:pnlContent. This means that upon clicking on the button, whatever happens, it should update the contents of the panel which is in the form with the id of “frmContent” and panel with the id of “pnlContent”.

1
2
3
4
5
6
7
<p:layoutUnit position="center">
    <h:form id="frmContent">
        <p:panel id="pnlContent">
            <ui:include src="#{menuController.page}.xhtml" />
        </p:panel>
    </h:form>
</p:layoutUnit>

One final thing to note. The managed beans for both “documentA.xhtml” and “documentB.xhtml” must be set to use either RequestScoped, SessionScoped or ApplicationScoped. Initially I had it set to ViewScoped and upon change the content to “documentB.xhtml”, the “Search” button’s action which calls a managed bean’s method was not called at all. For more details on each scope, you can refer to BalusC’s explanation.

I have uploaded the source code to my bitbucket account. Do feel free to fork and comment. The intention of this post is basically for Java EE Developers who are starting to use JSF and PrimeFaces that they understand the correct way to dynamically include JSF contents. I had a hard time scoring through internet and asking in forums trying to fix these problems which I faced.

Thanks.

A Simple Http Server

Yes, a simple HTTP Server does exists.. as a Python module. If you really need to test your website which contains HTML, JavaScript and/or CSS files, you can use this instead of installing and configuring Apache Web Server or Lighttpd. But as a pre-requisite, you do need to have Python install in your machine, first.

Before starting the Simple HTTP Server, change the current director’s path to one which has an HTML file.

$ cd ~/www/test/

Run the command below:

$ python –m SimpleHTTPServer 8000

* The last option (‘8000’) is the port the HTTP Server is to listen to.

Open your favourite web browser and now open the URL http://localhost:8000/mytest.html. If the directory has a index.html file, you can just remove the file name from the URL, as so http://localhost:8000/.

For more information, you can refer to the python documentation.

Update #1

As of python version 3, the SimpleHTTPServer module has been merged into http.server. So, the change in the command to start a HTTP Server is as below

$ python -m http.server 8000

Mounting NFS From Linux To AIX

Linux Box (192.168.1.99)

  1. SSH to the Linux box
  2. Add an entry in the /etc/hosts to add the AIX server IP and hostname, if it is not already there
  3. Specify the file system to be exported in the /etc/exports file
    /data 192.168.1.100 
  4. Start the nfs service, if it has not already been started
    [root@linux ~]# service nfs status
    rpc.mountd (pid 3170) is running…
    nfsd (pid 3167 3166 3165 3164 3163 3162 3161 3160) is running…
    rpc.rquotad (pid 3145) is running…
    [root@linux ~]# service nfs restart
    Shutting down NFS mountd: [ OK ]
    Shutting down NFS daemon: [ OK ]
    Shutting down NFS quotas: [ OK ]
    Shutting down NFS services: [ OK ]
    Starting NFS services: [ OK ]
    Starting NFS quotas: [ OK ]
    Starting NFS daemon: [ OK ]
    Starting NFS mountd: [ OK ]
  5. Run the exportfs command to export the file system
    # exportfs -a

AIX Box (192.168.1.100)

  1. Add an entry in the /etc/hosts for the Linux box, if it is not already there.
  2. Run the showmount command to check if AIX can see the exported file system
    # showmount -e 192.168.1.100 
  3. Create a directory to mount the NFS
    # mkdir /data 
  4. Run the mount command to mount the exported NFS
    # mount 192.168.1.99:/data /data 
  5. If not able to mount and the error message is "vmount: operation not permitted", run the command below. Detailed explanation here.
    #  nfso -p -o nfs_use_reserved_ports=1
  6. Try the mount command again.
  7. If successful, try to access the directory.

Post Navigation