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", "")
}, {}, {})