Tag: JQuery

  • สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

    เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้

    ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน

    <!-- Remember to include jQuery :) -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
        <!-- jQuery Modal -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />    

    ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด”

     <script type="text/javascript">
            $(document).ready(function () {
                $("#ex1").modal({
                    escapeClose: false,
                    clickClose: false,
                    showClose: false,
                    fadeDuration: 100
                });
            });
    
        </script>

    ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้ tag div

    ขั้นตอนที่ 4 ได้ผลลัพธ์ Modal dialog ออกมาอย่างสวยงาม

    ที่มา : https://jquerymodal.com

  • การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)

               จากความเดิมตอนที่แล้ว เราได้พูดถึงวิธีการจัดการข้อมูลจำนวนมากด้วยการจัดกลุ่มหมวดหมู่ของข้อมูลใน GridView กันไปแล้ว ซึ่งหากผู้อ่านท่านใดต้องการทราบวิธีการจัดหมวดหมู่สามารถตามดูเนื้อหาในบทความได้จาก การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C# และในส่วนของบทความนี้จะเป็นเนื้อหาต่อยอดการทำงานจากการจัดหมวดหมู่ดังกล่าว โดยเพิ่มความสามารถให้หมวดหมู่หรือกลุ่มเหล่านั้นสามารถย่อ-ยุบได้ เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกันชัดเจนมากยิ่งขึ้น หรือเพื่อตอบโจทย์ให้กับผู้ใช้บางท่านที่อาจมีความต้องการดูข้อมูลทีละส่วนได้ โดยจะนำ Component ที่ชื่อว่า Collapse ใน Bootstrap มาประยุกต์ใช้ในการแสดงผลร่วมกับ GridView และยังมี jQuery มาเป็นอีกหนึ่งตัวช่วยเพื่อให้สามารถแสดงผลตามที่ต้องการได้ โดยการอธิบายในบทความนี้ ทางผู้เขียนจะขอตัดตอนในส่วนของรายละเอียดขั้นตอนวิธีการจัดหมวดหมู่ไป และข้ามมาพูดถึงขั้นตอนที่ต้องจัดทำเพิ่มเติมในการทำย่อ-ยุบเลยละกันนะคะ

               ก่อนจะไปเริ่มในส่วนของการเขียนโค้ด เรามาทำความรู้จักกับ ค่าที่จำเป็นต้องใช้ในการระบุให้กับแถวหลัก(parent)เพื่อให้สามารถย่อยุบได้ กันก่อนนะคะ

    • data-toggle=”collapse
    • data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท multi-collapse ตามด้วยรหัสของประเภทกลุ่มนั้น โดยต้องระบุสไตล์ชีทนี้ให้กับแถวย่อย(child)ด้วย
    • aria-controls=”demo1 demo2 demo3 demo4 demo5” เพื่อกำหนดพื้นที่ที่จะย่อยุบ โดยสามารถกำหนดได้มากกว่า 1 พื้นที่ ซึ่งจะแยกด้วยการเว้นวรรคชื่อ id ของแถวย่อย(child) ในตัวอย่างนี้ คือ แถวย่อยของแถวหลักนี้ ประกอบด้วย 5 แถว คือ แถวที่มี id ชื่อ demo1,demo2,demo3,demo4, demo5 นั่นเอง
    • class = “collapseToggle” เป็นการระบุสไตล์ชีทเพื่อใช้ในการระบุตำแหน่งในการเปลี่ยนไอคอนเวลากดย่อ-ยุบ โดยเรียกใช้งานผ่าน jQuery(ซึ่งจะกล่าวถึงในส่วนถัดไป)

               หลังจากเรารู้จักค่าที่จำเป็นต้องใช้กันไปแล้ว เราก็มาเริ่มปรับแก้โค้ดเพิ่มเติม เพื่อเพิ่มความสามารถให้ GridView ของเรากันเลยค่ะ

    1. ปรับแก้ในส่วนของ GroupGv_DataBound เพิ่มเติม เพื่อกำหนดค่าที่ระบุไว้ข้างต้นในแถวของหมวดหมู่ที่แทรกเข้ามา

    string lastCatName = "";
    string AllName = "";
    
     
    protected void GroupGv_DataBound(object sender, EventArgs e)
            {
                lastCatName = "";
                Table table = (Table)GroupGv.Controls[0];
    
                foreach (GridViewRow row in GroupGv.Rows)
                {
                  
                    HiddenField HidCatName = (HiddenField)row.FindControl("HidCatName");
                    HiddenField HidCatID = (HiddenField)row.FindControl("hdCatID");
                    HiddenField HidID = (HiddenField)row.FindControl("hdID");
    
                    ////ตั้งชื่อ id ให้กับแถวย่อย(child) แต่ละแถว
                    row.Attributes.Add("id", "Name" + HidID.Value);
    
                   ////กำนดสไตล์ชีทของตัวแถวย่อยและระบุเพื่อให้ย่อยุบได้ ด้วย accordian-body collapse และระบุพื้นที่เพื่อให้อ้างถึงจากแถวหลัก(parent)ได้ 
                  /////ซึ่งเป็นในส่วนของ multi-collapse จะเป็น multi-collapse ตามด้วยชื่อรหัสประเภทนั่นเอง 
                  /////โดยแถวย่อย(child) ที่มีแถวหลัก(parent)เดียวกัน ค่าของ multi-collapse จะตรงกันและตรงกับค่า target ที่ระบุไว้ในแถวหลัก(parent)ด้วย
    
                    if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
                       row.CssClass = "Blue accordian-body collapse multi-collapse" + HidCatID.Value;
                    else               
                      row.CssClass = "accordian-body collapse multi-collapse" + HidCatID.Value;
    
                    if (HidCatName.Value != lastCatName)
                    {
    
                       ////////วนเพื่อหาจำนวน child ในแต่ละประเภทเพื่อใช้ในการกำหนด aria-controls
    
                        var strList = GroupData.Select("CategoryID='" + HidCatID.Value + "'");
                        foreach (DataRow dr in strList)
                        {
                            AllName += " Name" + dr["ID"];
                        }
    
                       //// เป็นการหาผลรวมค่าของฟิลด์ Amt ซึ่งหมายถึงจำนวน โดยเป็นการรวมค่าฟิลด์แยกตามแต่ละ CategoryID นั่นเอง
    
                        var sumOfValuesInCategory = GroupData.AsEnumerable().Where(x => x.Field<string>("CategoryID") == HidCatID.Value).Sum(x => x.Field<int>("Amt")).ToString();
                       
                        int realIndex = table.Rows.GetRowIndex(row);
                        string text = HidCatName.Value;
                        GridViewRow newHeaderRow = new GridViewRow(realIndex, 0, DataControlRowType.Header, DataControlRowState.Normal);
    
                        /////กำหนดค่าต่างๆ (data-toggle  data-target  aria-controls )ให้กับแถว เพื่อให้สามารถย่อ-ยุบได้ 
    
                        newHeaderRow.Attributes.Add("data-toggle", "collapse");
                        newHeaderRow.Attributes.Add("data-target", ".multi-collapse" + HidCatID.Value);
                        newHeaderRow.Attributes.Add("aria-expanded", "true");
                        newHeaderRow.Attributes.Add("aria-controls", AllName);
    
                        TableCell newCell = new TableCell();
                        newHeaderRow.Cells.AddAt(0, newCell);
    
                       /////ปรับแก้การระบุค่า ColumnSpan จากเดิมที่รวมกันทุกคอลัมน์(GroupGv.Columns.Count) 
                       //// แต่กรณีนี้ต้องเว้นคอลัมน์ไว้แสดงผลจำนวนรวมแต่ละประเภทด้วย
    
                        newCell.ColumnSpan =1;
                        newCell.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCell.ForeColor = System.Drawing.Color.White;
                        newCell.Font.Bold = true;
                        newCell.Attributes.Add("class", "collapseToggle");
    
                        /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-plus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);
    
                        ///สร้าง TableCell หรือคอลัมน์ใหม่ เพื่อแสดงผลข้อมูลจำนวนรวมของแต่ละประเภท 
    
                        TableCell newCellTotal = new TableCell();
    
                        /////เพิ่ม TableCell ในแถวที่กำลังสร้างและระบุค่าต่างๆ
                        newHeaderRow.Cells.AddAt(1, newCellTotal);
                        newCellTotal.ColumnSpan = 1;
                        newCellTotal.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCellTotal.ForeColor = System.Drawing.Color.White;
                        newCellTotal.Font.Bold = true;
                        newCellTotal.HorizontalAlign = HorizontalAlign.Right;
    
                        ////นำค่าผลรวมในตัวแปร sumOfValuesInCategory ที่คำนวณได้ข้างต้นมาจัดรูปแบบก่อนแสดงผลใน TableCell สร้าง
    
                        newCellTotal.Text = string.Format("{0:#,##0}",int.Parse(sumOfValuesInCategory));
                        newCellTotal.Attributes.Add("class", "collapseToggle");
                        table.Controls.AddAt(realIndex, newHeaderRow);
                    
                          AllName = "";
    
                    }
                    lastCatName = HidCatName.Value;
                }
            }

    2.จัดทำให้ไอคอนสามารถเปลี่ยนเป็น + หรือ – ได้ เมื่อกดย่อ-ยุบ ด้วย jQuery

     <script>
         $(document).ready(function () {
    
    ///เมื่อมีการคลิก element ที่มีสไตล์ชีท collapseToggle จะทำการเปลี่ยนค่าไอคอน หากเป็นภาพบวกจะเปลี่ยนเป็นลบ หากเป็นเครื่องหมายลบจะเปลี่ยนเป็นเครื่องหมายบวก
                $('.collapseToggle').click(function () {
                    $(this).find('i').toggleClass('fa-plus fa-minus');
                });
            });
    </script>

    เพิ่มเติม : ท่านสามารถสร้างสไตล์ชีทตกแต่งเพิ่มเติมให้กับแถวของข้อมูลได้ ในกรณีนี้ได้ทำการสร้างสไตล์ชีทเพื่อไว้สำหรับเวลาเอาเม้าส์ชี้ที่แถวที่สามารถย่อ-ยุบได้ จะแสดงเป็นรูปมือ เพื่อให้ผู้ใช้ทราบว่าสามารถกดได้ค่ะ

        <style>
            .collapseToggle {
                cursor: pointer;
            }
        </style>

    ผลลัพธ์

    เกร็ดความรู้เพิ่มเติม : จากตัวอย่างข้างต้น ตอนเปิดหน้าจอครั้งแรก ทุกหมวดหมู่จะถูกยุบอยู่ หากต้องการให้การแสดงผลครั้งแรก ทุกหมวดหมู่ถูกขยายอยู่ สามารถปรับแก้โค้ดอีกเพียงเล็กน้อย ดังนี้ค่ะ

    1. เพิ่มคำว่า “show” เข้าไปในสไตล์ชีทตอนกำหนดให้แถวย่อย ดังนี้ค่ะ

    แบบเดิม

                    if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
                       row.CssClass = "Blue accordian-body collapse multi-collapse" + HidCatID.Value;
                    else               
                      row.CssClass = "accordian-body collapse multi-collapse" + HidCatID.Value;

    แบบใหม่

                      if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
    
                        row.CssClass = "Blue accordian-body collapse show multi-collapse" + HidCatID.Value;
                    else
                        row.CssClass = "accordian-body collapse show multi-collapse" + HidCatID.Value;

    2.ปรับแก้ให้ไอคอนแรกที่ต้องการแสดงเป็นเครื่องหมายลบ ดังนี้ค่ะ

    แบบเดิม

                       /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-plus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);

    แบบใหม่

                        /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-minus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);

    ผลลัพธ์

              จากตัวอย่าง การแสดงผลครั้งแรกก็จะเปลี่ยนเป็นขยายทั้งหมด และแสดงไอคอนเป็นเครื่องหมายลบ(-)ตั้งต้นไว้ให้ และสามารถย่อ-ยุบตามปกติได้แล้วค่ะ

    เพิ่มเติม

              นอกจากนี้ ผู้เขียนขอแถมให้อีกนิดสำหรับท่านที่ต้องการจะย่อประเภทกลุ่มทั้งหมด หรือต้องการให้แสดงประเภทกลุ่มทั้งหมด อาจจะทำเป็นปุ่มให้ผู้ใช้กด ซึ่งมีวิธี ดังนี้ค่ะ

    1. สร้างปุ่ม 2 ปุ่ม เพื่อกดขยายทั้งหมด และย่อทั้งหมด

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="col pull-right">
                    <asp:LinkButton ID="lnkShowAll" runat="server" CssClass="btn btn-sm btn-info mb-1" OnClientClick="javascript:ShowHideAll('1');return false;"><i class="fas fa-eye"></i>แสดงทั้งหมด</asp:LinkButton>
                    <asp:LinkButton ID="lnkHideAll" CssClass="btn btn-sm btn-info mb-1" OnClientClick="ShowHideAll('0');return false;" runat="server"><i class="fas fa-eye-slash"></i>ซ่อนทั้งหมด</asp:LinkButton>
                </div>
    
    
            </ContentTemplate>
        </asp:UpdatePanel>

    2. เขียนฟังก์ชั่นในการซ่อน/แสดงทั้งหมด

    <script>
        
     function ShowHideAll(flag) {
    
              /////ล้างค่าการระบุการแสดงผลและการแสดงไอคอนทั้งหมด ทำให้ทุกแถวยุบอยู่ จนกว่าจะมีการสั่งให้ show
                $(".accordian-body").removeClass("show");
                $(".collapseToggle").find('i').removeClass("fa-plus").removeClass("fa-minus");
    
             /////กรณีต้องการให้แสดงจะเพิ่มสไตล์ชีท show ให้กับทุกแถว และแสดงไอคอนเป็น - ทั้งหมด เพื่อให้กดย่อได้
    
                if (flag == '1') {
                    $(".accordian-body").addClass("show");
                    $(".collapseToggle").find('i').addClass("fa-minus");
                }
            /////กรณีต้องการให้แสดงจะแสดงไอคอนเป็น + ทั้งหมด เพื่อให้กดขยายได้
                else
                    $(".collapseToggle").find('i').addClass("fa-plus");
                }
    
    </script>

    ผลลัพธ์

    หมายเหตุ : ในการทำงานนี้จะใช้ jQuery และ Bootstrap ร่วมด้วย ผู้ที่จะนำไปใช้งานอย่าลืมอ้างอิงไฟล์สไตล์ชีทและสคริปท์ของ Bootstrap รวมทั้งไฟล์ของ jQuery เพื่อให้โค้ดข้างต้นสามารถทำงานได้นะคะ

              ทั้งหมดนี้ก็เป็นเพียงหนึ่งในตัวอย่างวิธีการที่จะแก้ปัญหาในการแสดงผลข้อมูลแบบตารางด้วย GridView แบบจัดกลุ่มและสามารถย่อ-ยุบข้อมูลภายในกลุ่มได้ โดยนำความสามารถของ Component อย่าง collapse ใน Bootstrap เข้ามาช่วยเท่านั้น แต่ในส่วนของรูปแบบ วิธีการ แต่ละท่านสามารถปรับเปลี่ยนและพลิกแพลงเพิ่มเติมได้ตามความเหมาะสม อีกทั้งยังสามารถนำเกร็ดความรู้นี้ไปประยุกต์ใช้กับงานของท่านได้อีกด้วย และขอบคุณที่ติดตามนะคะ ^^

    แหล่งอ้างอิง

    https://getbootstrap.com/docs/4.0/components/collapse/
    https://www.geeksforgeeks.org/how-to-change-symbol-with-a-button-in-bootstrap-accordion/

  • ทบทวนที่เรียนจากติว PhoneGap ด้วย HTML5 & Jquery Mobile

    ผมต้องออกตัวก่อนนะครับว่า ไม่ได้เก่งในการเขียน Mobile Apps. เลยสักนิด เพียงแต่ได้ไปเข้าเรียนมา 2 วัน ผมรู้สึกว่าเป็นศาสตร์ที่น่าลองทำดู และไม่ควรให้มันจางหายไปหลังจากเรียน เดี๋ยววิทยากรจะเสียใจ อิๆ ผมจึงบันทีกไว้แบบใครอ่านแล้วไม่ชอบก็อย่าถือสาผมนะครับ

    ลองทบทวนจากที่เรียนใน workshop
    ติว “แนะนำและสอนการพัฒนาเบื้องต้นเกี่ยวกับ Application บนมือถือด้วย PhoneGap โดยใช้ HTML5 & Jquery Mobile”

    สภาพแวดล้อม
    – เป็นการติดตั้งทดสอบบน Windows 8 (32 bit) บนเครื่องโน้ตบุ๊ค HP ProBook 6450b RAM 4 GB

    1. download JRE
    http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
    32bit ได้ไฟล์สำหรับติดตั้ง jdk-7u25-windows-i586.exe
    (64bit ได้ไฟล์สำหรับติดตั้ง jdk-7u25-windows-x64.exe)
    รันไฟล์ดังกล่าวเพื่อติดตั้งลงในวินโดวส์

    2. download ADT
    http://developer.android.com/sdk/index.html
    32bit ได้ไฟล์ที่ zip ไว้คือ adt-bundle-windows-x86-20130729.zip
    (64bit ได้ไฟล์ที่ zip ไว้คือ adt-bundle-windows-x86_64-20130717.zip)
    แตกไฟล์ดังกล่าวออกมาแล้ว
    32bit ได้ไดเรกทอรี adt-bundle-windows-x86-20130729 ไว้ที่ C:\
    (64bit ได้ไดเรกทอรี adt-bundle-windows-x86_64-20130717 ไว้ที่ C:\)
    สร้าง shortcut ไปยังไฟล์ชื่อ eclipse.exe ในไดเรกทอรี eclipse ไว้บน Desktop
    ทดสอบรันโปรแกรม eclipse
    ตั้งชื่อ workspace ไว้ที่ C:\phonegap
    phonegap-000
    3. สร้าง Andriod Device ในโปรแกรม Java – ADT
    เมนู Windows > Android Virtual Device Manager
    แท็บ Android Virtual Devices คลิก New…
    ADV Name: ตั้งชื่อ ADV-7-inch
    Device: เลือก Nexus 7
    Target: เลือก Android 4.3 – API Level 18
    (adt-bundle-windows-x86-20130729.zip จะได้ Android 4.3 – API Level 18)
    Front Camera: None
    RAM: 768
    ทดสอบเปิด ADV-7-inch คลิก Start แล้วรอ ค่อนข้างนาน
    phonegap-001

    4. สร้าง New Android Application
    File > New > New Android Application
    ตั้งชื่อว่า phonegappsu
    ที่เหลือใช้ค่า default
    phonegap-002
    หน้าต่อไป Create Project in Workspace
    ตั้ง Location เป็นชื่อ C:\phonegap\phonegappsu
    phonegap-003
    หน้าต่อไป ใช้ค่า default
    phonegap-004
    หน้าต่อไป ใช้ค่า Blank Activity
    phonegap-005
    หน้าต่อไป ใช้ค่า default (Activity Name: MainActivity)
    phonegap-006
    คลิก Finish แล้วจะได้หน้าต่างของรายละเอียดเยอะแยะ
    phonegap-007

    5. download phonegap
    http://phonegap.com/install/ เลือก PhoneGap2.9.0
    ได้ไฟล์ที่ zip ไว้คือ phonegap-2.9.0.zip
    แตกไฟล์ดังกล่าวออกมาแล้ว ได้ไดเรกทอรี phonegap-2.9.0

    6. ที่ Windows Explorer เข้าไปในไดเรกทอรี phonegap-2.9.0
    ก็อปปี้เฉพาะไดเรกทอรี lib\android\example\assets\www
    phonegap-008
    ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonegappsu > assets แล้ววาง www ไว้

    ก็อปปี้เฉพาะไดเรกทอรี lib\andriod\xml
    phonegap-009
    ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonegappsu > res แล้ววาง xml ไว้

    ก็อปปี้เฉพาะไดเรกทอรี lib\android\cordova­2.9.0.jar
    phonegap-010
    ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonepagpsu > libs แล้ววาง cordova­2.9.0.jar ไว้
    รวมแล้วจะได้หน้าตาประมาณนี้
    phonegap-011

    7. แก้ไขไฟล์  MainActivity.java ( ข้อนี้ต้องระวังการ copy แล้ว paste เครื่องหมายคำพูด และ ; )
    ที่รายการด้านซ้ายของโปรแกรม ADT ใต้ Project ที่สร้าง
    phonegappsu > src > com.example.phonegappsu> MainActivity.java
    โดยคลิกขวา > ใช้คำสั่ง Open With > Text Editor
    (1)แก้ไขบรรทัดเดิม public class MainActivity extends Activity
    เป็น public class MainActivity extends DroidGap
    (2)แก้ไขชุดบรรทัด import เดิมดังนี้
    ลบบรรทัด import android.app.Activity;
    เพิ่มบรรทัด import org.apache.cordova.*;
    (3)แก้ไขบรรทัดที่มีคำว่า protected เป็น public
    (4)ใส่ comment บรรทัด //setContentView(R.layout.activity_main);
    (5)แล้วเพิ่มบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
    จะได้ประมาณนี้

    phonegap-012

    code

    package com.example.phonegap;
    
    import android.os.Bundle;
    import org.apache.cordova.*;
    import android.view.Menu;
    
    public class MainActivity extends DroidGap {
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            //setContentView(R.layout.activity_main);
            super.loadUrl("file:///android_asset/www/index.html");
        }
    
    
        @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;
        }
        
    }
    
    

    8. ต้องแก้ไข AndroidManifest.xml
    โดยคลิกขวา > ใช้คำสั่ง Open With > Text Editor
    ใส่ Permission Tag ดังนี้

    code

    <uses-permission android:name="android.permission.VIBRATE"/> 
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/> 
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 
    <uses-permission android:name="android.permission.INTERNET"/> 
    <uses-permission android:name="android.permission.RECEIVE_SMS"/> 
    <uses-permission android:name="android.permission.RECORD_AUDIO"/> 
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 
    <uses-permission android:name="android.permission.READ_CONTACTS"/> 
    <uses-permission android:name="android.permission.WRITE_CONTACTS"/> 
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
    <uses-permission android:name="android.permission.CAMERA"/>

    ไว้ก่อนบรรทัดปิด Tag </manifest>

    9.  ติดตั้ง jquery.mobile
    download phonegapcomponent (jquery.mobile)
    เอาจาก facebook group ชื่อ phonegap for psu เลือก files (สามารถโหลดจาก http://jquerymobile.com/ ได้เลย)
    ได้ไฟล์ที่ zip ไว้คือ PhoneGapComponent.zip
    แตกไฟล์ดังกล่าวออกมาแล้ว ได้ไดเรกทอรี PhoneGapComponent
    ที่ Windows Explorer เข้าไปในไดเรกทอรี PhoneGapComponent
    ก็อปปี้เฉพาะไดเรกทอรี css และ js
    ที่รายการด้านซ้ายของโปรแกรม ADT คลิกขวาที่ phonegappsu > assets > www แล้ววาง css กับ js ไว้

    10. ทดสอบสร้าง Application จากตัวอย่าง index.html ที่ให้มา
    จะได้ไฟล์ phonegappsu.apk
    ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
    assets > www > โดยคลิกขวาที่ไฟล์  index.html > ใช้คำสั่ง Open With > Text Editor
    สั่ง Run
    phonegap-014

    11. ในข้อถัดไปเป็นตัวอย่างใน workshop เอาไฟล์ตัวอย่างจากที่นี่
    https://sharedrive.psu.ac.th/public.php?service=files&t=04facfa02dc0204fadbf00925d3c431c )

    12. ทดสอบด้วยตัวอย่างที่ 1 ชื่อ example1.html
    (ตัวอย่างนี้จะเปิด dialog หลังจากเลือกเมนู และบางเมนูเมื่อเลือกก็จะซ่อนข้อความ)
    นำไฟล์ตัวอย่าง example1.html ไปวางไว้ที่ phonegappsu > www
    phonegap-015
    แก้ไขไฟล์  MainActivity.java
    ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
    phonegappsu > src > com.example.phonegappsu> MainActivity.java
    แก้ไขบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
    เป็น super.loadUrl(“file:///android_asset/www/example1.html”);
    รันโปรเจกต์ ได้ผลแสดงบน ADV
    phonegap-016

    13. ทดสอบด้วยตัวอย่างที่ 2 ชื่อ example2.html
    (ตัวอย่างนี้จะมีปุ่ม back ให้ย้อนกลับได้)
    นำไฟล์ตัวอย่าง example2.html ไปวางไว้ที่ phonegappsu > www
    phonegap-017
    แก้ไขไฟล์  MainActivity.java
    ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
    phonegappsu > src > com.example.phonegappsu> MainActivity.java
    แก้ไขบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
    เป็น super.loadUrl(“file:///android_asset/www/example2.html”);
    รันโปรเจกต์ ได้ผลแสดงบน ADV
    phonegap-018

    14. ทดสอบด้วยตัวอย่างที่ 3 ชื่อ dbuser.html
    (ตัวอย่างนี้ป้อนชื่อ นามสกุล เพศ เก็บลง sqlite database บน android และแสดงรายการ
    ขอบคุณกิตติพัฒน์ อุบลกาญจน์ที่เป็นเจ้าของต้นฉบับไฟล์ที่แก้ไปเยอะจากที่วิทยากรให้ลองทำ)
    นำไฟล์ตัวอย่าง dbuser.html ไปวางไว้ที่ phonegappsu > www
    phonegap-019
    แก้ไขไฟล์  MainActivity.java
    ที่รายการด้านซ้ายของโปรแกรม Eclipse ใต้ Project ที่สร้าง
    phonegappsu > src > com.example.phonegappsu> MainActivity.java
    แก้ไขบรรทัด super.loadUrl(“file:///android_asset/www/index.html”);
    เป็น super.loadUrl(“file:///android_asset/www/dbuser.html”);
    รันโปรเจกต์ ได้ผลแสดงบน ADV
    phonegap-020

    15. หากต้องการทดสอบบน Android Smartphone เครื่องจริง ก็เอาไฟล์ phonegappsu.apk ไปใส่แล้วติดตั้ง
    ซึ่งไฟล์อยู่ที่ phonegappsu > bin

    ลองทำตามดูนะครับ