Thursday, March 27, 2014

Use code igniter [Code ignigter install and create helloworld app.]

1. Install code igniter.

  • go to code igniter site and click download button.
http://ellislab.com/codeigniter
  • Installation Instruction.(Please refer to Code Igniter user guide.)
  1. Unzip the package.
  2. Upload the CodeIgniter folders and files to your server. Normally the index.php file will be at your root.
  3. Open the application/config/config.php file with a text editor and set your base URL. If you intend to use encryption or sessions, set your encryption key.
  4. If you intend to use a database, open the application/config/database.php file with a text editor and set your database settings.
2. create hello world php.
  • create helloworld.php file in application/controllers folder with these codes.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Helloworld extends CI_Controller {
    public function __construct() {
        parent::__construct();
    }

   function index()
   {
     echo 'Hello world!';
   }
   function test()
   {
      echo 'Second hello world!';
   }
}
3. create hello world php with view.
  • update helloworld.php file with these codes.
   function index()
   {
    // echo 'Hello world!';
       $this->load->view('helloview');
   }
  • create helloview.php file in application/view folder with these codes.
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello World App</title>
</head>
<body>
    <h1>Hello World!</h1>
    <div >
        <p>My First CodeIgniter Application.
    </div>
</body>
</html>
4. passing parameters to view.

  • update helloworld.php file with these codes.
   function index()
   {
     // echo 'Hello world!';
  $data['message'] = 'Hello World!!!';
  $this->load->view('helloview', $data);
   }
  • update helloview.php file with these codes.
  <body>
    <h1><?php echo $message; ?></h1>



Wednesday, March 26, 2014

How to install WAMP Server and getting started web development.

1. What is WAMP?
WAMP stands for Windows-Apache-MySQL-PHP.
When it goes for Linux it is LAMP and MAMP for Mac.

2. Install WAMP server.















3. Start up WAMP server.
  • choose "start WampServer" from the "Start" menu; or run "wampmanager.exe".
  • You can see WAMP Server icon from tray as below.


4. Start service.
  • Left mouse buton click on WAMP Server icon.
  • Select 'Start All Services'.
  • Make sure if the WAMP Server icon is green.
  • If 80 port is used by another process, the Apache server cannot be started.

  • If the server is running properly, you can access to web pages.
          http://localhost/
          http://localhost/phpmyadmin/

5. Folder structures.
  • bin : binaries for Apache, MySQL, and PHP. Multiful version can be installed.
  • apps : server-side tools such as PhpMyAdmin, SQL Buddy and WebGrind.
  • tools : client-side tools such as xdc(XDebug Client).
  • www : web root
  • logs : log files.
  • alias : appache's alias configuration.
6. Helloworld app.
Create helloworld.php in www folder(web root).
Add this codes.

<?php echo 'Hello world!';?>

You can see the result at....
http://localhost/helloworld.php


How to change background color and text color of sub menu of action bar.

When we use action bar in old android version such as Android 2.2(under Android 3.0), we need to use sub menu sometimes. Also, if menu overflow is not allowed in some devices we have to use sub menu as below.

  • sub menu example
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.helloworld.MainActivity" >
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
android:icon="@drawable/car_tow"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_exit"
android:orderInCategory="101"
app:showAsAction="ifRoom"
android:title="more"
android:icon="@drawable/action_more">
<menu android:background="@color/action_bar">
    <item android:id="@+id/action_law"
    android:background="@color/action_bar"
    android:showAsAction="ifRoom"
    android:icon="@drawable/car_lawyer"
    android:title="test"/>
    <item android:id="@+id/action_buysell"
   android:showAsAction="ifRoom"
   android:icon="@drawable/car_buy_sell"
   android:title="test2"/>
   </menu>
</item>   
</menu>

This is how to change the background color and text color of sub menu.
It seems that the sub menu is not working as a part of action bar but as popup menu.
These three styles can be used in AppCompat and there probably are similar style items in other themes.

Widget.AppCompat.Base.PopupMenu
TextAppearance.AppCompat.Widget.PopupMenu.Large
TextAppearance.AppCompat.Widget.PopupMenu.Small

  • Style example
<resources>
<color name="white_opaque">#FFFFFFFF</color>
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:popupMenuStyle">@style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">@style/PopupTextStyleLarge</item>
<item name="android:textAppearanceSmallPopupMenu">@style/PopupTextStyleSmall</item>
</style>
<style name="MyActionBar"
parent="@style/Widget.AppCompat.ActionBar">
 
<!-- action bar style is here -->
 
</style>
<style name="PopupMenu"
parent="@style/Widget.AppCompat.Base.PopupMenu">
<item name="android:textColor">@color/pitch_black</item>
<item name="android:popupBackground">@drawable/MyPopupMenuBackgroundImg</item>
</style>
<style name="PopupTextStyleLarge"
parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
<item name="android:textColor">@color/white_opaque</item>
</style>   
<style name="PopupTextStyleSmall"
parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Small">
<item name="android:textColor">@color/white_opaque</item>
</style>   
</resources>

 

Use action bar on API8(below Android 3.0).

1. What is action bar?
You can find informatio about android action bar in below site.

http://developer.android.com/guide/topics/ui/actionbar.html

2. How to use action bar in API8?
You can find the info from above site...

The ActionBar APIs were first added in Android 3.0 (API level 11) but they are also available in the Support Library for compatibility with Android 2.1 (API level 7) and above.

  • What is support library?
http://developer.android.com/tools/support-library/index.html

  • How to setup support library?
http://developer.android.com/tools/support-library/setup.html

  • It seems that the support 7 library is already included if you create project with selecting API8 of the option 'Minimum Required SDK' and action bar can be used in the latest version of EClipse.
3. Add menu to res>>menu folder of the project.

[example] res>>menu>>main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.helloworld.MainActivity" >
<item
android:id="@+id/action_exit"
android:orderInCategory="101"
app:showAsAction="ifRoom"
android:title="exit"
android:icon="@drawable/btn_exit"/>
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="@string/action_settings"
android:icon="@drawable/btn_exit"
app:showAsAction="ifRoom"/>
</menu>

 

4. The codes in the activity.
  • When creating activity, android.support.v7.app.ActionBarActivity should be extended.
example]
import android.support.v7.app.ActionBarActivity;
public class MainActivity extends ActionBarActivity {
  • Load option menu from main.xml.
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;

}

 
  • Hanle action bar items.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_exit) {
     Toast.makeText(this, "Selected!" + item.getTitle(), Toast.LENGTH_LONG).show();
     return true;
}else if (id == R.id.action_settings) {
     Toast.makeText(this, "Selected!" + item.getTitle(), Toast.LENGTH_LONG).show();
     return true;
}
 
return super.onOptionsItemSelected(item);
}


Create Hello World application.

1. Open new project window from File>>New>>Project and select Android Application Project.
 
 
2. Input application information and click next> button.
 


3. Click Next> button until finish.

4. Run the application.
  • Click right button and select Android Application or select Run>>Run As>>Android Application from menu.


5. Choose a device to run.
  • If you connected a real device with USB debugging on or a running virtual emualator, you can select it in 'Choose a running Android device'.
  • You also select virtual device from 'Launch a new Android Virtual Device' if you setup virtual devices in Android Virtual Device Manager.


6. See logs in LogCat.


Monday, March 24, 2014

Create Environment to develop android


This is main steps to setup android development environment.

1. Install JDK
2. Install EClipse
3. ADT Plugin
4. SDK download and setup
5. Emulator setup


1. Install JDK
  • Download Java SE Development Kit
 http://www.oracle.com/technetwork/java/javase/downloads/index.html

  • Run the downloaded file.  

2. Install EClipse

http://www.eclipse.org/downloads/

  • Download Eclipse Standard from above site.










  • Unzip the downloaded file under C:\.

3. ADT Plugin
  • Start Eclipse
  • Help >> Install New Software
  • Select 'Add...' button and input these info on the popup window.
         Name : ADT
         Location : https://dl-ssl.google.com/android/eclipse/
         Try this path if there's an error... http://dl-ssl.google.com/android/eclipse/



  • Select all items and click Next> button.
  • Agree all the license terms and conditions.
  • Click Next> buttons.
 

4. Android SDK

http://developer.android.com/sdk/index.html

  • Download SDK zip file from above site.
  • Unzip the downloaded file and setup SDK Location on Android menu of  Window>>Preferences.
  • Start Android SDK Manager from Window>>Android SDK Manager.
  • Select SDKs to install or upgrade and click Install packages... button.

  • Accept all licence terms and conditions.
 
  • Do above processes until the SDKs are installed.


 5. Emulator Setup
  • Start Emulator from Window>>Android virtual device manager.
  • Click New... button and add new devices.