How to design multipane with 3 fragment using Android-PanesLibrary?

Question

Good Day Developers, I already implement this fantastic library called "Android-PanesLibrary" by Kenrick Rilee. and what i want to achive is something like this.

But i end up doing like this :

my first problem if in showDetails method i delete the comment symbol, it will showing up an error. but if i make the method empty, it will run just like the second image.

my objective is how can this be done just using string array data?

Any ideas or help would be greatly appreciated.

Environment : Windows 7, Android Studio, Genymotion.

This is MainMenuFragment.java :

public class MainMenuFragment extends android.app.ListFragment {

private static int sExampleNum = 0;
protected final String TAG = "mainmenuFragment" ;

@ViewById(R.id.menu_listview)
protected ListView menuListView ;
private View parentView;
int mCurCheckPosition = 0;

public MainMenuFragment() {
    super();
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    Resources res = getResources();
    String [] mainmenulistview = res.getStringArray(R.array.listview_main_menu);
    ArrayAdapter<String> connectArrayToListView = new ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_activated_1,mainmenulistview);
    setListAdapter(connectArrayToListView);
    if (savedInstanceState != null) {
        mCurCheckPosition = savedInstanceState.getInt("curChoice", 0);
    }
    getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
    showDetails(mCurCheckPosition);
}

@Override
public void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    outState.putInt("curChoice", mCurCheckPosition);
}

@Override
public void onListItemClick(ListView l, View v, int position, long id) {
    showDetails(position);
}

// if I un-comment on method bellow, it will result an error. 

void showDetails(int index) {

    //mCurCheckPosition = index;
    //getListView().setItemChecked(index, true);
    //PCDesktopFragment_ pcDesktop = (PCDesktopFragment_) getFragmentManager().findFragmentById(R.id.sub_one_fragment);
    //if (pcDesktop == null || pcDesktop.getShownIndex() != index) {
    //    welder_pipe_reg = PCDesktopFragment_.newInstance(index);
    //    android.app.FragmentTransaction ft = getFragmentManager().beginTransaction();
    //    ft.replace(R.id.sub_one_fragment, pcDesktop);
    //    ft.commit();
    //}
}
}

and then i already create a class called PCDesktopFragment.java that extends ListFragment (this should be showing up on second fragment using listfragment)

@EFragment(R.layout.sub_one_menu)
public class PCDesktopFragment_ extends ListFragment {

View v;
public static int i;

public static PCDesktopFragment_ newInstance(int index){
    PCDesktopFragment_ f = new PCDesktopFragment_();
    Bundle args = new Bundle();
    args.putInt("index", index);
    index = i;
    f.setArguments(args);
    return f;
}

public int getShownIndex() {
    return getArguments().getInt("index", 0);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    inflater.inflate(R.layout.sub_one_menu, container, false);
    return super.onCreateView(inflater, container, savedInstanceState);
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    if (i == 0) {
        String [] sub_a = {"Test1","Test2"};
        setListAdapter(new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, sub_a));
    }
}

//@ItemClick(R.id.sub_one_listview)
//protected void handleDomainClick(int position) {
//    Fragment f = null ;
//    if (position == 0) {
//        f = new PCDesktopFragment_();
//    }
//    Activity a = getActivity();
//    if (f != null && a != null && a instanceof FragmentLauncher)
//        ((FragmentLauncher) a).addFragment(this, f);
//}
}