วันอังคารที่ 13 กรกฎาคม พ.ศ. 2553

การสร้าง Style กับไฟล์ .css ( การใช้งานแบบ External )

External เป็นจุดประสงค์หลักของการใช้งาน CSS และมันจะประหยัดพื้นที่ในการเก็บแฟ้มต่างๆบนเซิฟเวอร์ เพราะว่าได้มีการแยกโค๊ดคุณสมบัติของเอกสาร HTML ออกมาเป็นแฟ้มเดียวแต่สามารถจัดการลักษณะทั้งหมดในทุกๆเว็บเพจที่เชื่อมโยง มายังแฟ้ม CSS แฟ้มเดียวได้ เมื่อแยกแฟ้มออกมาเป็นแฟ้มเดี่ยวแล้วให้บันทึกแฟ้ม CSS นั้นให้มีนามสกุลเ็ป็น .css เท่านั้นแล้วทำการใช้แท็ก ในเอกสาร HTML เพื่อทำการเชื่อมโยงแฟ้มเอกสาร HTML และแฟ้ม CSS เข้าด้วยกัน ทุกๆเว็บเพจที่มีการเชื่อมโยงมายังแฟ้ม CSS จะมีลักษณะตามที่กำหนดไว้ในแฟ้ม CSS นั้น

ตัวอย่างการใช้งาน

body{

color:#8B0000;

font-size:15px;

}

โดยปกติแล้วแบบ inline เราจะนำ code ดังกล่าวไปใส่ไว้ใน

หรือ

color:#8B0000; font-size:15px;">ข้อความ

ซึ่งแน่นอนว่าหากเราต้องการนำไปใช้กับไฟล์อื่นๆ ก็ต้องนำ code ไปใส่ในลักษณะเดียวกัน แต่ปัญหาคือ สมมุตว่าเรามีไฟล์อยู่ 50 ไฟล์ ใส่ code ให้ตัวอักษรเป็นสีแดงและขนาดตัวอักษร 15px แล้ว วันดีคืนดีต้องการที่จะเปลี่ยนเป็นตัวอักษรสีฟ้า ขนาดตัวอักษร 14px ............. ซวยแล้ว ตั้ง 50 ไฟล์นะ ไล่เปลี่ยนไหวหรอ เสียเวลาทำมาหากินมาก แทนที่จะเอาเวลามานั่งเปลี่ยน 50 ไฟล์นี้ เอาเวลาไปปลูกป่าช่วยโลกร้อนยังได้ประโยชน์มากกว่าเลย

และนี่คือสาเหตุที่ต้องมีการใช้งานแบบ External ซึ่งทุกๆไฟล์สามารถดึง CSS มาใช้ได้หมด หากต้องมีการเปลี่ยนแปลง เราเปลี่ยนแค่ไฟล์ .css ไฟล์เดียวจบเลยครับ หมดปัญหาในการเสียเวลามานั่งเปลี่ยน 50 ไฟล์ และข้อดีอีกอย่างหนึ่งคือ จะเป็นผลดีกับการทำ SEO สำหรับ Google เล็กน้อยด้วย เพราะทำให้ Google Robot ไม่ต้องไปอ่าน code มากๆ เพราะ Google Robot ไม่มีความจำเป็นที่จะต้องไปอ่านพวก CSS หรือ Javascript ทำให้ Google Robot นั้นเก็บข้อมูลเว็บเราได้ง่ายขึ้นครับ

เอาล่ะ มาถึงวิธีใช้แบบ External

จากตัวอย่าง code

body{

color:#8B0000;

font-size:15px;

}

ให้เรานำ code นี้ ไปใส่ใน notepad แล้วเซฟเป็น

(ชื่อไฟล์.css) ในที่นี้ผมจะตั้งชื่อว่า style.css

เวลาเรียกใช้ในหน้า HTML

ข้อความ 1

ข้อความ 2

ข้อความ 3

เขียนโดย ที่ ไม่มีความคิดเห็น:

การใช้ CSS ใน style Tag ( Internal )

Internal

รูปแบบการใช้งานก็จะมีความคล้ายกับแบบ Inline Internal คือเขียนโค๊ดในเอกสาร HTML นั้น และจะมีผลเฉพาะภายในเอกสาร HTML นั้นเท่านั้น รูปแบบ Internal ค่อนข้างจะมีการใช้งานอยู่มากและการใช้งานจะต้องมีแท็ก


เนื้อหา เวบเพจ

นี่เป็นเพียงแต่แบบร่างสำหรับการใช้งาน CSS แบบ Internal เพราะฉะนั้นตัวอย่างโค๊ดต่อไปจะอยู่ภายในแท็ก

เขียนโดย ที่ ไม่มีความคิดเห็น:

วันจันทร์ที่ 12 กรกฎาคม พ.ศ. 2553

ทำ CSS Style Sheet ง่าย ๆ ใน Dreamwaver

CSS ย่อมาจาก Cascading Style Sheets ซึ่งเป็นนมาตราฐานนึงในการกำหนดรูปแบบลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ CSS ช่วยเราได้อย่างมากในการออกแบบหรือจัดการกับปัญหาบางอย่างที่ HTML โดยปรกติไม่สามารถทำได้ หรือทำได้ไม่ดีเท่าที่ควร เช่น การกำหนดขนาด Font ให้ได้ขนาดตามที่เราต้องการ หรือการใส่สีสรรให้กับช่องกรอกข้อมูลบนหน้าเว็บ และอื่น ๆ ในบทเรียนนี้เราจะมาเริ่มรู้จักกับการใช้งาน CSS กับโปรแกรม Dreamweaver เบื้องต้นกันสักนิด สำหรับเทคนิควิธีการใช้งาน CSS ต่าง ๆ คุณอาจจะหาอ่านได้จากหน้า Tricks ของเว็บไซต์นี้

ข้อดีสำคัญของ CSS

  1. ไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะโค้ดน้อยกว่า
  2. มีความยืดหยุ่นสูงในการปรับแต่งแก้ไขในอนาคต
  3. สามารถควบคุมเว็บหลายๆ หน้าได้ด้วย style sheet เพียงแค่ ไฟล์เดียว
  4. สามารถจัดการเลย์เอ้าท์ได้อย่างละเอียด แม่นยำ
  5. ง่ายในการเรียกดู Source
  6. ใช้ดีกับระบบเสิร์ชเอ็นจิน ซึ่ง ระบบเสิร์สเอ็นจิ้นต่างๆ
การใช้งาน CSS Styles Panel เบื้องต้น
1. การเรียกใช้งาน CSS Styles Panel
สำหรับโปรแกรม Dreamweaver เราสามารถเรียกใช้งานหน้าต่าง CSS Styles ได้จาก Main menu -> Window -> CSS Styles หรือหากเป้นเวอร์ชั่น MX2004 คุณสามารถเรียกใช้งานได้จาก Panel Group ทางขวามือของโปรแกรม (ตามค่าเริ่มต้นของโปรแกรม) หน้าตาของ CSS Styles Panel ก็จะได้ดังรูป



2. วิธีการสร้าง CSS Style Sheet ใหม่
เราสามารถสร้าง CSS ขึ้นมาใหม่ได้โดยไปที่หน้าต่าง CSS Styles จากนั้นให้ทำการกดไปที่ Icon ที่มีเครื่องหมายบวก(+) หรือเราเรียก icon นี้ว่า New CSS Styles จะเห็นได้ตามภาพ เมื่อทำการกดไปแล้ว โปรแกรมจะทำการเปิดหน้าต่างขึ้นมาให้เราทำการตั้งชื่อหรือเลือก TAG ของ HTML มาใช้ในการกำหนดค่า ดังรูป


ที่หน้าต่าง New CSS Style นี้จะมีช่องให้เราตั้งชื่อหรือเลือกรูปแบบของ CSS ได้ ดังนี้

  • Selector : เป็นการกำหนดชื่อของ CSS ที่เราต้องการ และที่ช่องนี้จะทำงานสัมพันธ์กับ Type ด้านล่าง หากเราเลือก Type เป็น Redifine HTML TAG ที่ช่อง Selector จะมี List ของ TAG HTML ให้เราเลือกเพื่อทำการกำหนดคุณสมบัติใหม่ให้กับ TAG HTML

  • Tyle : เลือกรูปแบบที่เราจะกำหนดคุณสมบัติ CSS มี 3 ค่าให้เลือก คือ
    Make Custom Style (class) เป็นการสร้าง CSS ขึ้นมาใหม่โดยเราทำการกำหนดชื่อของ Style ขึ้นเอง เราอาจจะเรียก Style นั้นว่า Class ก็ได้
    Redifine HTML Tag เป็นการเลือก TAG ของ HTML ขึ้นมาทำการกำหนดคุณสมบัติใหม่
    Use CSS Selector เป็นการกำหนดคุณสมบัติ CSS ให้กับบางจุดของหน้าเว็้บเพจที่เราต้องการ เช่น จุดที่เป็น Link จุดที่เรากำหนด ID ของ TAG นั้น ๆ ไว้ เป็นต้น ใน MX2004 จะใช้ชื่อ option นี้ว่า Advanced ดังรูป
3. วิธีการใช้งาน CSS
วิธีการใช้ CSS โดยการลากทึบที่ตัวอักษรแล้วคลิกขวาเลือก CSS Styles แล้วเลือก Style
ตามชื่อที่เราได้ตั้งไว้ แค่นี้เราก็จะได้ Style ในแบบของเรา

เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอาทิตย์ที่ 11 กรกฎาคม พ.ศ. 2553

Application import file(Excel)

JExcelApi เป็น java library ที่เอางานเกี่ยวกับ M$ Excel โดยสามารถที่จะ อ่าน, เขียน และทำการแก้ไข M$ Excel ได้
ก่อนอื่นนั้นต้องนำ library ของ jxl มาใส่ใน Folder : lib ก่อน

1. สร้างหน้าจอเพื่อต้องการเรียกไฟล์ excel มาแสดงผล






2. สร้าง controller.xml โดยไม่ต้องใช้ view-map เพื่อเรียกใช้ processImportFile ที่ไฟล์ AExcelEvents.java



3. สร้างไฟล์แบบ java โดยเมธอดชื่อ processImportFile

package com.orangegears.util;

import java.io.IOException;

import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import jxl.JXLException;
import jxl.Sheet;
import jxl.Workbook;

import org.ofbiz.base.util.Debug;
import org.ofbiz.entity.GenericDelegator;
import org.ofbiz.service.LocalDispatcher;


public class AExcelEvents {
public static final String module = AExcelEvents.class.getName();

public static String processImportFile(HttpServletRequest request, HttpServletResponse response) {
    LocalDispatcher dispatcher = (LocalDispatcher) request.getAttribute("dispatcher");
    GenericDelegator delegator = (GenericDelegator) request.getAttribute("delegator");
    Debug.logInfo("1==============================================", module);

    try
    {
      ServletInputStream is = null;
    try {
        is = request.getInputStream();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
      byte[] junk = new byte[1024];
      int bytesRead = 0;

      // the first four lines are request junk
      try {
        bytesRead = is.readLine(junk, 0, junk.length);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
      try {
        bytesRead = is.readLine(junk, 0, junk.length);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
      try {
        bytesRead = is.readLine(junk, 0, junk.length);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
      try {
        bytesRead = is.readLine(junk, 0, junk.length);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

      try {
        Workbook workbook = Workbook.getWorkbook(is);
        Sheet sheet = (Sheet) workbook.getSheet("Sheet1");

        Debug.logInfo("=============================================="+sheet.getCell(0, 0).getContents(), module);
        Debug.logInfo("=============================================="+sheet.getCell(0, 1).getContents(), module);
        Debug.logInfo("=============================================="+sheet.getCell(1, 0).getContents(), module);
        Debug.logInfo("=============================================="+sheet.getCell(1, 1).getContents(), module);
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }

    }
    catch (JXLException e)
    {

    }
    Debug.logInfo("2==============================================", module);
    return "success";
}
}
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอาทิตย์ที่ 4 กรกฎาคม พ.ศ. 2553

สร้าง Confirmation Window สำหรับ button

ใน ofbiz.9.04 ไม่สามารถเพิ่ม Confirm-message ได้ เหมือนกับ ofbiz.10.04 จึงได้ลองหาวิธีต่าง ๆ มาใช้ โดยลองนำการสร้างปุ่มไปไว้เป็นไฟล์ ftl แล้วเรียกใช้ include เข้ามาใช้แทนการใช้ปุ่มโดยตรง

1. เรียกใช้ javaScript โดยเพิ่มใน common/widget/CommonScreen.xml
ตรง เพื่อใช้สำหรับทุกเพคเกจสามารถเรียกใช้ javascript นี้ได้



2. เขียนคำสั่งแสดง dialog โดยการเรียกใช้ dojo javascript ในไฟล์ testDialog.js ดังตัวอย่างต่อไป

dojo.addOnLoad(function(){
       dojo.parser.parse();
       });

       function removeThis(){
           this.destroyRecursive()
       }

       function showDlg1(formIdName){
           var d = new dijit.Dialog({id:'dlg',title:'Dojo Dialogs',content: "
Do you need to do this thing ?
" +
               "",onExecute:removeThis,onCancel:removeThis});
           d.show()
       }

3. หน้า Screen ของเราจะทำการ include-form เข้ามาแล้วเรียกใช้ปุ่มที่สร้างไว้ผ่าน ftl





4. Comment ปุ่มในหน้า Form ที่ต้องการเรียกใช้ javaScript

5. สร้างไฟล์ submitButton.ftl มาเพื่อเรียกใช้ปุ่มและ javaScript ซึ่งในที่นี่เราจะศึกษาเกี่ยวกับการใช้ dojo (ศึกษาเพิ่มเติมได้จาก http://www.dojotoolkit.org/)




6. เมื่อทดลองใช้ DOJO
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)