Interfejs użytkownika w programach uruchamianych za pomocą przeglądarek internetowych jest pisany w języku HTML. W module Html dostępny jest szereg metod ułatwiających skompletowanie podstawowych elementów, z których składa się strona. Większość metod jest przeciążona, co pozwala na łatwe budowanie strony z domyślnymi parametrami, a jednocześnie, w razie potrzeby, umożliwia pełną konfigurację wyglądu i treści. W większości metod obowiązkowymi parametrami są wartości atrybutów "id" i "name" elementów HTML
Formularz to część dokumentu HTML, zawierająca elementy służące do skompletowania informacji i następnie wysłania ich do serwera. Użytkownik kompletuje informacje poprzez
Do tworzenia formularza służą metody html.createForm(). Zapewniają one:
Zawartość formularza wprowadzana jest jako parametr formCode w języku jPALIO - może on zawierać metody modułu HTML lub bezpośrednio kod HTML.
Przykład:
$html.createForm("customerForm",
"customerForm",
$page.url($currentPageCode()),
"input",
"button",
(String) null,
{
$// jPALIO code to create form content
},
{},
{}
)
Podstawową metodą umożliwiającą użytkownikowi wpisywanie danych jest textField(). Istnieje również szereg metod szczegółowych, do wprowadzania szczególnych typów danych, o charakterystycznych właściwościach lub formatach, np.:
Dwie ostatnie metody, ze względu na swój szczególny charakter, mają automatycznie przypisane nazwy parametrów i niektóre właściwości.
Istnieje również metoda textArea(), wyświetlająca obszar tekstowy do wprowadzania danych.
Szczególnym przypadkiem są metody uploadField(), pozwalające na wyświetlanie pola do przesyłania plików na serwer. Jeśli się korzysta z którejś z nich, należy uwzględnić to przy tworzeniu formularza: zamiast podstawowej metody createForm() należy wykorzystać przystosowaną specjalnie do tego celu metodę createUploadForm().
Przykład
<label>"Customer last name"</label>
$html.textField("customer.name",
(String) $getParam("customer.name"),
100,
false,
(String) "CUSTOMER LAST NAME",
(String) null,
(String) "customer.name",
(String) null,
(String) null,
(String) null,
(String) null,
{})
Lista wyboru jest elementem formularza, pozwalającym na wybranie jednej (jeśli użyjemy metody dropList()) lub dowolnej liczby pozycji (w przypadku multipleDropList()) z przygotowanego zestawu. Zestaw pozycji w obu tych metodach można zadeklarować jako tablicę lub kolekcję (np. listę) o wartościach będących tablicami [wartość, etykieta].
Przykłady
Lista pojedynczego wyboru:
$html.dropList("customer.type",
(String) $getParam("customer.type"),
(List) $customerTypeList,
true,
"CUSTOMER TYPE",
"customer.type",
"",
"",
(String) null,
"----",
"")
Lista wyboru wielokrotnego
$html.multipleDropList("processes",
$util.asArray((Collection)$processes),
(Collection)$processList,
3,
false,
(String)null,
"processes",
"doubleWidth",
(String)null,
"")
Moduł Html udostępnia metody wspomagające tworzenie tabel, które użytkownik może posortować wg swoich potrzeb. Wyświetlanie takich tabel trzeba poprzedzić przygotowaniem odpowiedniego kodu CSS metodą sortTableCSS(). Kod ten powinien zostać umieszczony w odpowiednim arkuszu stylów.
Do tworzenia tabel służą metody sortTable(). Pozwalają one na wyświetlanie prostych, dwuwymiarowych tabel, umożliwiając dodatkowo według życzenia:
We wszystkich tych metodach nagłówki (postać i obsługę) określa się jako tablicę, której każdy element definiuje sposób wyświetlania jednej kolumny, w szczególności to, czy tabela może być sortowana (w obu kierunkach) po tej kolumnie i typ wartości w kolumnie (dopuszczalne są: "T"- tekst, "C"- currency, "D"- date, "I"- integer, "F"- float).
Dane do wyświetlenia (zawartość tabeli) mogą być przekazane jako lista (java.util.List) albo tablica. Można też przygotować własny kod jPALIO (palio.compiler.PalioCode) tworzący tabelkę, ze standardowymi znacznikami - wiersze <tr> i kolumny <td>. Należy pamiętać, że pierwsza kolumna listy (indeks 0) nie jest wyświetlana - musi zawierać używany wewnętrznie identyfikator (tzn. przygotowana do wyświetlenia tablica musi zawierać o jedną kolumnę więcej, niż wskazuje na to nagłówek).
Po wyświetleniu tabeli można dodać javascript, wstępnie sortujący jej pozycje.
Przykłady
Standardowa tabela sortowana:
$html.sortTable(
"processesTable",
"100%",
false,
[["Code", true, true, null, null, "T"],
["Name", true, true, null, null, "T"],
["Description", true, true, null, null, "T"],
["Frequency of execution", true, true, null, null, "T"],
["Frequency unit", true, true, null, null, "T"],
["Date of nearest execution", true, true, null, null, "D"],
["Edit", true, true, $pageID("system.processes.edit.page"), null, "T"]],
(List)$processesList,
false,
{<div class="info">"No data matching required criteria"</div>}
)
Definiowana przez programistę tabela z polami kontrolnymi, umożliwiającymi wskazanie wybranych pozycji
$html.sortTable(
"CustomersTable",
"90%",
false,
true,
[["", false, false, null, null, "T"],
["Customer’s first name", false, false, null, null, "T"],
["Customer’s surname", true, true, null, null, "T"],
["Company", false, false, null, null, "T"]],
{ $@=(index,0)
$for( customer, (List)$customersList, {
$if($==( $%((Long)$@index, 2), 0), { $@=(trClass, "normalRow") }, { $@=(trClass, "alternateRow") })
$@=(customerNo, (String)$customer[0])
$ifNotNull((String)$getParam($+("customer_", (String)$columnNo)), {
$@=(checked, true)
}, {
$@=(checked, false)
})
<tr class=$@trClass>
<td>$html.checkBox($+("customer_", (String)$customerNo), $@customerNo, (Boolean)$@checked, $+("customer_", (String)$customerNo), "style class=\"checkBox\" onchange=\"conditionallyDisableTextFieldsAndTestButton()\"")</td>
<td>$customer[1]</td>
<td>$customer[2]</td>
<td>$customer[3]</td>
</tr>
$++(@index)
})
}
)
Duże znaczenie w większości formularzy mają elementy pozwalające użytkownikowi na sterowanie działaniem programu, Należą do nich:
Przykłady
Prosty przycisk, zmieniający stronę programu:
$html.simpleButton("backToPreviuosPage.action", "Powrót", $+(["window.location='",$page.pageURL($pageID("system.customers.page")),"'"]),"backToPreviuosPage.action", "yellowButton", "")
Wysłanie danych do serwera:$html.submitButton("saveButton", "Save", "saveButton", "greenButton", "")
Pojedyncze pole kontrolne:<div class="row">
<label for="process.active">Active</label>
$html.checkBox("process.active", "T", (Boolean)$getParam("process.active"), "process.active", "class='checkbox'")
</div>
Grupa przycisków radiowych:<div class="row">
<label class="bold">Customer type:</label>
<div class="radioButtonsInputsOnLeft">
$html.radioButtons("customerType", "F", (List)$customerTypes, "<div class="radioButtonRow">INPUT <label>LABEL</label></div>")
</div>
</div>
Szczególnym rodzajem danych, które mogą być wprowadzane przez użytkownika, są daty. Ze względu na konieczność ścisłej kontroli formalnej przy ich wprowadzaniu, do wprowadzania ich przygotowane są specjalne metody dateField() i calendarField(). Dla wygody użytkownika istnieją również metody calendarShow() i calendarShowInLine(), które wywołują funkcję pokazującą kalendarz i umożliwiającą wybranie daty. Przed wywołaniem ich (w nagłówku strony) należy umieścić metodę calendarInit().
Przykład
$html.calendarInit()
$html.createForm("REPORT_form", "REPORT_form", $pageURL($currentPage()), "field", "button", {
<div class="blankLine"></div>
<div class="row">
<label for="report.signDateFrom">Start date</label>
$html.calendarField("report.signDateFrom", $toDate((String) $getParam("report.signDateFrom"), $global.get("report.dateFormat")), true, "START DATE ", (Date) null, (Date) null, $global.get("report.dateFormat"), "report.signDateFrom", "short", (String) null, (String) null, (String) null)
$html.simpleButton("", "...", $html.calendarShow("report.signDateFrom", $global.get("report.dateFormatForCalendar")), (String) null, "shortButton", (String) null)
</div>
<div class="row">
<label>End date:</label>
$html.calendarField("report.signDateTo", $toDate((String) $getParam("report.signDateTo"), $global.get("report.dateFormat")), true, "END DATE", (Date) null, (Date) null, $global.get("report.dateFormat"), "report.signDateTo", "short", (String) null, (String) null, (String) null)
$html.simpleButton("", "...", $html.calendarShow("report.signDateTo", $global.get("report.dateFormatForCalendar")), (String) null, "shortButton", (String) null)
</div>
$html.submitButton("searchButton", "Display", "searchButton", "blueButton", (String) null)
}, {})
Uzupełnieniem formularza mogą być podpowiedzi, ukazujące się na ekranie przy najechaniu myszką na odpowiedni element. Do tworzenia ich służą metody initTooltips(), addTooltip(), addTooltipToBuffer() i flushTooltipsBuffer(). Dwie ostatnie są użyteczne, gdy na stronie chcemy mieć dużo elementów z podpowiedziami.
Przed rozpoczęciem wprowadzania zakładek konieczne jest utworzenie kodu CSS metodą tabCSS(). Kod ten powinien zostać umieszczony w odpowiednim arkuszu stylów.
Panel z przyciskami konstruowany jest poprzez wywołanie metody createTabs(), przyjmującej jako parametr kod Palio - wewnątrz tego kodu należy zawrzeć wywołania addTab().
Bezpośrednio po wywołaniu createTabs(), należy wywołać createTabBody(), również przyjmującej jako parametr kod Palio - kod HTML będący efektem wykonania tego kodu zostanie umieszczony na panelu zakładek. Kod źródłowy do wyświetlenia każdej zakładki należy umieścić w oddzielnym podkatalogu.
Przykład
Organizacja panelu zakładek
$// Tabs list
$=(tabs, $createMap(
[0, 1, 2],
["General", "Services", "Documents"]
))
$ifNull($activeTab, {
$=(activeTabNo, 0)
}, {
$=(activeTabNo, $toLong($activeTab))
})
$=(tabDirName, $+(["tab", $toLower((String) $get((Map) $tabs, $activeTabNo))]))
$// Create navigation panel
$html.createTabs((Long) $activeTabNo, {
$// And add tabs to it
$for("tab", (Map) $tabs, {
$=(@rowId, $toString($getParam("_RowID")))
$// The 0’th tab is active always, rest only if the _RowID parameter is set (customer exists)
$=(@isTabActive, $or($==((Long) $tab[0], 0), $isNotNull($@rowId)))
$html.addTab($#((String) $tab[1]), $page.url($currentPageCode(), $@rowId, $+("&activeTab=", $tab[0])), $@isTabActive)
})
})
$// Create panel body
$html.createTabBody({
$=(@objCode, $+([" system.customers.define.details.", $tabDirName, ".tab"]))
$=(@sqlQuery, "select 1 from p_objects where code = ?")
$if($sql.exists($@sqlQuery, [$@objCode]), {
$object($@objCode)
})
})
Przykład formularza dla zerowej zakładki
$// Basic tab – general information
$object("system.customer.details.tabgeneral.form$init")
$html.createForm("customerDetailsGeneral", "customerDetailsGeneral", $page.url($currentPageCode()), "input", "button", (String) null, {
$html.setParam("REQUIRED_CHAR", "<em></em>")
<div class="blankLine"></div>
<div class="row">
<label for="customer.lastName">Surname</label>
$html.textField("customer.lastName", (String)$getParam("customer.lastName"), 50, false, "SURNAME", (String) null, "customer.lastName", "", "", "", "", {})
</div>
<div class="row">
<label for="customer.firstName">First name</label>
$html.textField("customer.firstName", (String)$getParam("customer.firstName"), 30, false, "FIRST NAME", (String) null, "customer.firstName", "", "", "", "", {})
</div>
<div class="row">
<label for="customer.companyName">Company name </label>
$html.textField("customer.companyName", (String)$getParam("customer.companyName"), 200, false, "COMPANY NAME", (String) null, "customer.companyName", "", "", "", "", {})
</div>
$html.submitButton("saveCustomersList", "Save", "saveCustomersList", "submit", "")
$html.simpleButton("backToPreviuosPage", "Back", $+(["window.location='",$page.pageURL($pageID("system.customers.page")) ,"'"]),"backToPreviuosPage", "button", "")
}, {}, {})Klasyczny, prosty formularz do wprowadzania i edycji danych.
$html.calendarInit()
$// Current message
$ifNotNull($status, {
<div class="$statusStyle">
$status
$=(status, null)
</div>
})
$html.createForm("processEditForm", "processEditForm", $page.url($currentPageCode()), "input", "button", (String) null, {
<fieldset>
<div class="blankLine"></div>
$// Code (identifier) can be entered only for new positions
<div class="row">
<label for="process.code">Code<em></em></label>
$if( $==( $actionType, "new"), {
$html.textField("process.code", (String)$getParam("process.code"), 1, true, "CODE", (String) null, "process.code", "doubleWidth", "", "", "", {})
}, {
$html.textField("process.code", (String)$getParam("process.code"), 1, true, "CODE", (String) null, "process.code", "doubleWidth readonly", "", "", "readonly", {})
})
</div>
$// Required field
<div class="row">
<label for="process.name">Name<em></em></label>
$html.textField("process.name", (String)$getParam("process.name"), 50, true, "NAME", (String) null, "process.name", "doubleWidth", "", "", "", {})
</div>
<div class="row">
<label for="process.description">Description<em></em></label>
$html.textField("process.description", (String)$getParam("process.description"), 200, true, "DESCRIPTION", (String) null, "process.description", "doubleWidth", "", "", "", {})
</div>
$// Field with controlled value: only digits can be entered
<div class="row">
<label for="process.frequency">Frequency</label>
$html.textField("process.frequency", (String)$getParam("process.frequency"), 5, false, "FREQUENCY", "/^[0-9]*$/", "process.frequency", "width-XS", "", "", "", {})
$// Single select list
$=(@frequencyUnit, "Frequency unit")
$html.dropList("process.frequencyUnit", (String) $getParam("process.frequencyUnit"), (List) $getParam("dict.frequencyUnits"), false, "FREQUENCY UNIT", "process.frequencyUnit", "", (String) null, (String) null, "------", "")
</div>
<div class="row">
$// Adding calendar
<label>Next date</label>
$html.textField("process.nextDate", $toString((Date) $getParam("process.nextDate"), $global.get("dateFormat")), 10, false, "NEXT DATE", $+(["/", $global.get("regexp.dateFormat"), "/"]), "process.nextDate", "", (String) null, (String) null, (String) null)
$html.simpleButton("", "...", $html.calendarShow("process.nextDate", $global.get("dateFormatForCalendar")), (String) null, "shortButton", "")
</div>
<div class="row">
$// Check box
<label for="process.active">Active</label>
$html.checkBox("process.active", "T", (Boolean)$getParam("process.active"), "process.active", "class='checkbox'")
</div>
<fieldset class="submit">
$// Buttons
$html.submitButton("saveprocess.action", "Save", "saveprocess.action", "greenSubmit", "")
$html.simpleButton("backToPreviuosPage.action", "Back", $+(["window.location='",$page.pageURL($pageID("system.processes.page")),"'"]),"backToPreviuosPage.action", "yellowSubmit", "")
$// Tooltips
$html.initTooltips()
$html.addTooltip( "saveRefreshProcess.action", "Save data", 1000 )
$html.addTooltip( "backToPreviuosPage.action", "Back to processes list", 1000 )
</fieldset>
</fieldset>
}, {}, {})
Przykład formularza umożliwiającego zalogowanie się do programu
<html>
<head>
<title>$#(Login)</title>
<link rel="stylesheet" type="text/css" href="$page.url(system.layout.css.main)">
</head>
<body>
<div id="login">
<div id="centralBlock">
<h1>Logging In</h1>
$// Information about login status
$ifNotNull($getParam("page.message"), {
<div id="#page-message" class="info">$getParam("page.message")</div>
})
$ifNotNull($getParam("page.error"), {
<div id="#page-error" class="error">$getParam("page.error")</div>
})
$// The login form points to a page, to which date should be sent after successful login.
$// If the application uses different access right for different users,
$// that page should read permissions of logged in user.
$html.createForm("loginForm", "loginForm", $page.login(system.home.page), "form", "", {
<div class="centered">LOGIN</div>
$html.loginField("", 20, "LOGIN", "_UserName", "centered", "")
<div class="centered">PASSWORD</div>
$html.passwordField( 30, "PASSWORD","_Password", "centered", "")
$html.submitButton("checkLogin", "Log in", "checkLogin", submit, "")
}, {})
</div>
</div>
</body>
</html>