ทั้งเพจและสมาร์ทฟอร์มสามารถปรับแต่งได้เพื่อให้ผู้ใช้สามารถควบคุมได้มากขึ้นในการออกแบบแอพพลิเคชันตามความต้องการเฉพาะของพวกเขา ส่วนต่อไปนี้ให้รายละเอียดวิธีต่างๆ ในการปรับแต่งแต่ละส่วนประกอบ

Smart Forms ที่สร้างขึ้นโดยใช้ ONEWEB สามารถปรับแต่งได้สูง ทั้งในแง่ของรูปลักษณ์และการใช้งานรวมถึงฟังก์ชันการทำงาน นี่คือสิ่งที่ทำให้ ONEWEB เป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างแอพพลิเคชันระดับองค์กร เช่นเดียวกับแอพพลิเคชันพื้นฐานทั่วไป

ONEWEB ควบคุมรูปลักษณ์ของแบบฟอร์มผ่าน CSS เป็นหลัก Cascading Style Sheets (CSS) เป็นภาษาสำหรับอธิบายวิธีการนำเสนอเนื้อหา จุดประสงค์คือเพื่อช่วยแยกเนื้อหา (HTML) ออกจากงานนำเสนอ

ONEWEB จัดเตรียม CSS แบบกำหนดเองเริ่มต้นที่ผู้ใช้สามารถแก้ไขเพื่อสร้างสไตล์ของตนเองได้ ชื่อของไฟล์คือ <CurrentTheme>_Custom_Style.css. หากต้องการค้นหาไฟล์ ให้เปิด Eclipse IDE ในบานหน้าต่าง Project Explorer ไปที่โฟลเดอร์ /MasterWeb/WebContent/theme/<CurrentTheme> และเปิด <CurrentTheme>_Custom_Style.css. สำหรับตัวอย่างที่แสดงด้านล่าง CurrentTheme เป็น Responsive2016

ไฟล์นี้ว่างเปล่าเมื่อคุณเริ่มต้นด้วย ONEWEB คุณสามารถเพิ่ม css ที่กำหนดเองที่คุณต้องการใช้กับโครงการของคุณได้ที่นี่ สไตล์ที่คุณกำหนดที่นี่ใช้ได้กับ Smart Forms ทั้งหมด ตัวอย่างเช่น หากต้องการเปลี่ยนสีของส่วนหัว โปรดเพิ่มส่วนย่อยด้านล่างลงในไฟล์ CSS ที่กำหนดเอง

หรือหากต้องการเพิ่มพื้นหลังเริ่มต้นให้กับช่องข้อความทั้งหมด ให้เพิ่มส่วนย่อยต่อไปนี้

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

สไตล์ รูปลักษณ์ และความรู้สึกเป็นส่วนสำคัญของแอปพลิเคชัน UI ONEWEB เข้าใจถึงความสำคัญของการให้ความสามารถในการปรับแต่งสไตล์ชีต เพื่อจุดประสงค์นี้ Page Designer จัดเตรียมแผง Style Editor เพื่อเพิ่มการตั้งค่า CSS แบบกำหนดเอง

คลิกที่ลูกศรที่ด้านล่างขวาของแผงตัวออกแบบของคุณเพื่อขยายหน้าต่างตัวแก้ไขสไตล์ ผู้ใช้สามารถเขียนการตั้งค่า CSS แบบกำหนดเองได้โดยตรงที่นี่บน editor

ผู้ใช้ยังสามารถเพิ่ม class CSS ที่กำหนดเองให้กับองค์ประกอบ HTML การเปิดแผงการตั้งค่าและการกำหนดค่าข้อมูลบนการควบคุมเมนูด้านซ้าย และพิมพ์ชื่อ class CSS ในรายการคลาสแล้วคลิก Enter มีการเพิ่ม class CSS ในคุณสมบัติขององค์ประกอบ ผู้ใช้ยังสามารถตั้งค่า ID สำหรับองค์ประกอบ HTML ในแผงควบคุมการตั้งค่าและข้อมูล จากนั้นใช้ ID นี้ใน CSS เพื่อกำหนดรูปแบบ

ONEWEB รองรับการเพิ่ม SQL แบบกำหนดเองให้กับเอนทิตีใน 2 วิธี

Inside Module configuration

Java Manual Class

กำหนดค่าโมดูล (Module Configuration)

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

SQL ShowList คำสั่ง SQL นี้ใช้เพื่อสืบค้นข้อมูลที่จะแสดงเป็นรายการในโมดูล 1-Many (Insert/Update Mode)

SQL Select Row คำสั่งนี้ใช้สำหรับการสอบถามข้อมูลที่จะแสดงในโมดูล 1-1 (Insert/Update Mode)

SQL Work queue แบบสอบถาม SQL นี้ใช้ในโหมดการค้นหาเพื่อแสดงข้อมูลในผลการค้นหา

Java Manual Class

ONEWEB รองรับการเพิ่มคลาส Java เพื่อเรียกใช้ในการส่งโดยใช้ Java Class Actions หรือโดยการเรียกใช้คลาส Java Manual ผ่านฟังก์ชัน JavaScript คุณสามารถเพิ่มคำสั่ง SQL แบบกำหนดเองให้กับคลาส Java เหล่านี้ได้ เช่นเดียวกับที่คุณทำในแอพพลิเคชันจาวาทั่วไป

เพิ่มตรรกะการตรวจสอบความถูกต้อง (Add Validation Logic)

มีสองวิธีในการเพิ่มตรรกะการตรวจสอบลงในแบบฟอร์มอัจฉริยะของ ONEWEB

การตรวจสอบ JavaScript

ONEWEB Smart Forms มีการดำเนินการของเอนทิตีเพื่อแนบไฟล์ JavaScript กับเอนทิตี โปรดดู Entity Actions สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีแนบ JavaScript กับเอนทิตี

การตรวจสอบความถูกต้องของ JavaScript ส่วนใหญ่ใช้สำหรับการตรวจสอบฝั่งไคลเอ็นต์ เช่น รูปแบบช่องตรวจสอบหรือช่องบังคับ ขั้นแรกให้เพิ่มไฟล์ JavaScript ในการดำเนินการของโมดูล

ตอนนี้เปิดพื้นที่ทำงานใน Eclipse และสร้างไฟล์ JavaScript ที่ระบุในการดำเนินการของโมดูล เพิ่ม method การตรวจสอบ

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

การตรวจสอบ Java

ONEWEB Smart Forms มี Entity Actions เพื่อแนบคลาส Java แบบกำหนดเองเข้ากับเอนทิตี โปรดดู Entity Actions สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีแนบคลาส Java กับเอนทิตี การตรวจสอบความถูกต้องของ Java ใช้สำหรับการตรวจสอบฝั่งเซิร์ฟเวอร์ก่อนที่จะบันทึกเอนทิตี ขั้นตอนแรกคือการเพิ่ม Entity Action และระบุชื่อคลาส Java ในคุณสมบัติ Class Action

เมื่อแนบคลาส java กับเอนทิตีผ่าน Entity Action แล้ว ให้เปิดพื้นที่ทำงาน ONEWEB ใน eclipse สร้างคลาสจาวาเป็นส่วนขยายจาก "ProcessHelper" และใช้อินเทอร์เฟซ "ProcessAction" Eclipse จะสร้าง stub ของคลาส ตอนนี้แทนที่เมธอด "validateResult()" เพื่อเพิ่มตรรกะการตรวจสอบความถูกต้องแบบกำหนดเองก่อนที่จะบันทึกเอนทิตี โปรดดูส่วน validation section in Sample Apps สำหรับตัวอย่างโดยละเอียดเพิ่มเติม

package com.manual.doc.order.java;

import java.util.HashMap; import java.util.Vector;
import org.apache.log4j.Logger;

import com.manual.service.ManualDAOFactory; 
import com.master.form.EntityFormHandler; 
import com.master.util.EAFManualUtil; 
import com.master.util.ProcessAction; 
import com.master.util.ProcessHelper;

public class OrderRequestBackOfficeUpdateMode extends ProcessHelper implements ProcessAction { 
	private static Logger logger = Logger.getLogger(OrderRequestBackOfficeUpdateMode.class);
	
	@Override
	public boolean validateResult() {		
		String nextEntity = request.getParameter("goEntity");
		logger.debug("@@@@@ nextEntity :" + nextEntity);
	
		if(nextEntity == null || "".equals(nextEntity)) {
			String entityID = (String)getRequest().getSession().getAttribute("entityID");
			EntityFormHandler entityForm = (EntityFormHandler)getRequest().getSession().getAttribute(entityID +"_session");
			Vector errorVect = entityForm.getFormErrors();
			String moduleID = entityForm.getMainModuleID();
		
			HashMap mainRequestData = EAFManualUtil.getDataHashMapFromSession(moduleID, request);
			String requestID = (String)mainRequestData.get("REQUEST_ID");
		
			try{
				int inCompleteAmt = ManualDAOFactory.getManualDocOrderDAO().countInCompleteOrderUnit(requestID);
				logger.debug("@@@@@ completeAmt :" + completeAmt);
				if(completeAmt > 0){
					errorVect.add("Please verify un-assign order unit.");
					return false;
				}
			}catch(Exception e){
				errorVect.add(e.getMessage());
				return false;
			}
		}
		return super.validateResult();
	}
}

เมื่อเสร็จสิ้นการสร้างและเผยแพร่ไปยังเซิร์ฟเวอร์ ตอนนี้ ONEWEB จะดำเนินการตรวจสอบความถูกต้องนี้ทุกครั้งก่อนที่จะบันทึกเอนทิตี

คุณสามารถเพิ่ม logic การคำนวณลงใน ONEWEB Smart Forms โดยใช้ JavaScript & Manual Java Class ONEWEB Smart Forms มีการดำเนินการของเอนทิตีเพื่อแนบไฟล์ JavaScript กับเอนทิตี โปรดดูส่วน Entity Actions สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับวิธีแนบ JavaScript กับเอนทิตี

JavaScript เพียงอย่างเดียวสามารถใช้สำหรับการคำนวณง่ายๆ แต่ ONEWEB ให้ความสามารถในการเรียกใช้คลาส Java ด้วยตนเองผ่านการ calls AJAX

คลาส Manual Java จำเป็นต้องใช้ ManualInterface และแทนที่เมธอด processManual ดังที่แสดงด้านล่าง

การดำเนินการของเอนทิตีทำให้คุณสามารถใช้โค้ด Java เพื่อขยายฟังก์ชันการทำงานของแอพพลิเคชันของคุณใน ONEWEB ส่วนนี้จะแสดงวิธีเพิ่มโค้ด Java แบบกำหนดเองให้กับเอนทิตีของคุณ

การกําหนดค่า Class Action (Configuring Class Action)

1. ไปที่ AppDesigner และเปิดเอนทิตีของคุณ

2. ในหน้าต่างนำทาง ภายใต้ Tool -> Action ลาก และวางไปที่เอนทิตี

2. เลือก Process Name: UPDATE

3. ป้อน Class Action: com.training.manual.ApplicationManualClass คลิก OK บันทึก dialog

1. ทำตามขั้นตอนที่ 2- 5 สำหรับ Process Name: INSERT

สร้างไฟล์ Java Class โดยใช้ Eclipse

จาก Eclipse IDE บน Project Explorer Pane ให้คลิกขวาที่โฟลเดอร์ /MasterWeb/Java Sources/src เลือก New > Class และตั้งชื่อคลาส ApplicationManualClass คลิก Finish เพื่อสร้างไฟล์ Java Class

class ที่สร้างขึ้นควรมีลักษณะดังนี้

package com.training.manual;

import java.util.Vector;


import com.master.util.ProcessAction; 
import com.master.util.ProcessHelper;

public class ApplicationManualClass extends ProcessHelper implements ProcessAction {

	@Override
	public Vector modifyResult() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public boolean validateResult() {
		// TODO Auto-generated method stub
		return false;
	}
}

มีวิธีการเริ่มต้น 2 วิธีที่สร้างขึ้น

public Vector modifyResult() เพื่อแก้ไขโมเดลข้อมูลที่ส่งมาก่อนที่จะประมวลผล INSERT/UPDATE/DELETE ไปยังฐานข้อมูล

public boolean validateResult() เพื่อตรวจสอบรูปแบบข้อมูลที่ส่งมา ให้คืนค่าจริงหากตรวจสอบความถูกต้องผ่าน

แก้ไข ApplicationManualClass เพื่อพิมพ์ข้อมูลที่ส่งและชื่อของปุ่มที่คลิก

package com.training.manual;

import java.util.HashMap; 
import java.util.Vector;

import com.master.util.ProcessAction; 
import com.master.util.ProcessHelper;

public class ApplicationManualClass extends ProcessHelper implements ProcessAction {

	@Override
	public Vector modifyResult() {

		Vector vDataModels = getResultForProcess();
		String buttonAction = request.getParameter("SUBMIT_BUTTON");
	
		System.out.println("######## data: " + vDataModels);
		System.out.println("######## buttonAction: " + buttonAction);
	
		return vDataModels;
	}

	@Override
	public boolean validateResult() {
		return true;
	}

	@Override
	public HashMap modifyLoadUpdateResult() {
		return super.modifyLoadUpdateResult();
	}
}

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

หากต้องการทดสอบคลาส ApplicationManualClass ให้เปิด http://:8080/FrontWeb ในเว็บเบราว์เซอร์และแอพพลิเคชันเข้าสู่ระบบ

คลิกเมนู Create Application เพื่อเปิดหน้าจอ Create Application

คลิกปุ่ม Add

ใน Application Detail ป้อนข้อมูลการสมัครและคลิกปุ่ม Submit

ใน Eclipse แท็บ Open Console มาตรฐานควรแสดงดังนี้

Page Designer ยังอนุญาตให้รวม library JS ของบุคคลที่สาม (third-party JS libraries)ไว้ในแอพพลิเคชันผู้ใช้และเรียกใช้จากภายในเพจ นักออกแบบสามารถรวมไฟล์ library JavaScript ไว้ในแท็บ RESOURCE ภายใต้การตั้งค่า คลิกที่ไอคอน Add JavaScript เรียกดูและเลือกไฟล์ของคุณเพื่อรวมไว้ในแอพพลิเคชัน library เหล่านี้จะรวมอยู่ในการสร้างเพจด้วย

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

ONEWEB Page Designer มีเครื่องมือทั้งหมดที่จำเป็นสำหรับการออกแบบ ทดสอบ และปรับใช้แอพมือถือในอุปกรณ์ทุกประเภทในท้ายที่สุด และยังใช้ประโยชน์จากฟังก์ชันเนทีฟของอุปกรณ์ เช่น กล้องหรือตำแหน่งทางภูมิศาสตร์

โดยทั่วไปแล้ว แพลตฟอร์มการพัฒนา low-code สำหรับมือถือประกอบด้วยแอพพลิเคชันไคลเอ็นต์บนอุปกรณ์เคลื่อนที่ เซิร์ฟเวอร์มิดเดิลแวร์ และบริการต่างๆ ที่อำนวยความสะดวกในการเชื่อมต่อกับแอพพลิเคชันอื่นๆ ตลอดจนทำให้แน่ใจว่าโปรโตคอลความปลอดภัยทั้งหมดได้รับการเอาใจใส่ แอพพลิเคชันไคลเอนต์มือถือช่วยให้มั่นใจในการเชื่อมต่อกับเซิร์ฟเวอร์มิดเดิลแวร์และให้บริการตรรกะทางธุรกิจกับอุปกรณ์มือถือที่กำหนด ONEWEB ใช้เครื่องมือไมโครโฟลว์เพื่อจัดการตรรกะทางธุรกิจและให้บริการเพื่อให้แน่ใจว่ามีการเชื่อมต่อด้วยภาพ

คุณสามารถเรียนรู้วิธีการสร้างแอพพลิเคชันไคลเอ็นต์บนมือถือได้ในส่วน และวิธีรวมแอพพลิเคชันไคลเอ็นต์กับ Microflow ในส่วน

Page Designer มีคุณสมบัติเพื่อรองรับส่วนประกอบที่ผู้ใช้กำหนดเป็นส่วนขยายในตัวออกแบบ ทุกคนสามารถพัฒนาได้และเฉพาะสำหรับเว็บหรือแอพพลิเคชันมือถือ หากต้องการทราบรายละเอียดเพิ่มเติมเกี่ยวกับ Component Extension โปรดไปที่ส่วน

UI ที่โดดเด่นและมีประสิทธิภาพมีความสำคัญต่อความสำเร็จของแอปพลิเคชันใดๆ เพื่อให้บรรลุความซับซ้อนในระดับสูง บางครั้งผู้ออกแบบอาจต้องแนะนำฟังก์ชันที่กำหนดเองให้กับองค์ประกอบ UI เพจและแอปพลิเคชันมือถือที่พัฒนาโดยใช้ Page Designer สามารถปรับแต่งให้รองรับคุณสมบัติขั้นสูงที่จำเป็นในแอปพลิเคชัน

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