ทำความรู้จัก App Maker ผ่าน tutorial (ตอนที่ 2)

ต่อจากตอนที่แล้วนะคับ เรามาทำความรู้จัก App Maker ไปพร้อมกับภาพประกอบกันเลย

Tutorial 3: Style Your App

https://developers.google.com/appmaker/tutorials/style-your-app/

เลือก theme ของ app ได้จากเมนูรูปถาดสี มีให้เลือก 2 them คือ Material และ Plain
หน้าตาของ app เมื่อเลือก theme เป็น Plain

ที่มุมซ้ายล่างจะมีปุ่ม Show outlines สำหรับแสดงเส้นรอบ object ทั้งหมด เพื่อความสะดวกในการจัด layout

เมื่อกดเลือก object จะสามารถปรับแการแสดงผลของ object นั้นๆ ได้จากเมนูด้านซ้ายบน เรียกว่า Variant
เราสามารถใส่ custom variant ได้ในเมนู Style Editor (จากรูปภาพคือใส่ variant ชื่อ "Orange" เข้าไป) หรือจะเขียน style ทับ variant เดิมก็ได้


นอกจาก variant แล้ว เราสามารถระบุ style ของ object ที่เมนู Property Editor (icon รูปดินสอ) > styles และระบุชื่อ style ที่ต้องการ

จากใช้ stylesheet จากภายนอก สามารถนำมาใส่ได้จากเมนู App Settings > CSS URLs

Tutorial 4: Call Scripts

https://developers.google.com/appmaker/tutorials/call-scripts/

การใส่คำสั่งให้กับปุ่ม ผ่าน Porperty Editor > onClick โดยการใส่ code ลงในช่อง custom action โดยตรง ให้สังเกตุวิธีการอ้างอิงเพื่อดึงค่าจาก object อื่นๆ ใน app
หากไม่ต้องการใส่ code ลงใน Custom action สามารถใส่เป็นชื่อ function แทนได้ (แต่ต้องมี function ที่เรียกใช้ เตรียมไว้ในส่วนของ Scripts ด้วย)
การสร้าง ClientScript เพื่อเรียกใช้งานจาก Custom action โดย ClientScript จะทำงานบน browser โดยตรง
การสร้าง ServerScript เพื่อเรียกใช้งานจาก ClientScript อีกทีหนึ่ง (หรือจะเรียกจาก Custom action ก็ได้เช่นกัน) โดย ServerScript จะเรียกการทำงานไปที่ server ของ App Maker อีกต่อหนึ่ง

สำหรับตอนที่ 2 นี้ ก็ขอจบเท่านี้ก่อนนะครับ ตอนหน้าจะเป็นตอนสุดท้ายในซีรีส์แล้วครับ
---
www.tangerine.co.th

Comments

Popular posts from this blog

ป้องกันอีเมลสวมรอย (Email spoofing) ด้วย SPF, DKIM และ DMARC

แนวทางการใช้ Spreadsheet เป็น Directory ด้วย Google Apps Script

อบรม Google Apps แบบ on demand ด้วย Synergyse