Valores personalizados em 4D Ajax Framework

Este exemplo mostra como utilizar valores personalizados em 4D Ajax Framework. Os valores personalizados são enviados desde a página Web (frontend) e são recebidos no banco de dados 4D (backend). O banco de dados 4D (backend) logo realiza uma consulta e envia os valores personalizados de volta a página (frontend) que, por sua vez, formata os dados e os exibe na página. O exemplo está no formulário de um sistema de cotações interno de uma concessionária de veículos; está desenhado para permitir ao usuário armar um veículo com as opções que quiser e mostrar o preço total na página.

Marcas

O data grid Marchas exibe una lista de fabricantes no banco de dados.

Modelos

O data grid Modelos exibe uma lista de modelos de carros na base. O data grid de dados é carregado inicialmente com uma consulta fictícia para limitar a visualização a zero resultados. Cada vez que se clica em uma marca, é realizada uma consulta no banco de dados e o data grid Modelos é atualizado para mostrar somente os modelos encontrados para a marca selecionada.

Opções

As opções div mostram uma lista de opções (e seus preços associados) encontrados no banco de dados para o modelo de carro selecionado. O div é alterado dinamicamente cada vez que o usuário clica no data grid Marcas ou Modelos.

Preenchendo com dados

Os data grids são preenchidos com a seguinte configuração:

Configuración do data grid Marcas:

JavaScript Code:
var BrandsGrid = new dax_dataGrid('Brands',$('CarBrandDiv'), 0, 0, false);
  BrandsGrid.go();			// go
  BrandsGrid.disableAutoRefresh();	// disable auto refreshing the grid
  BrandsGrid.hideColumn(0); 		// ID column
  BrandsGrid.setColumnWidth(1,80);	// Name 
  BrandsGrid.onDataRowClick = BrandClicked; // call BrandClicked on row click
End JavaScript Code

Configuración de la rejilla modelos:

JavaScript Code:
var ModelsGrid = new dax_dataGrid('Models',$('CarModelsDiv'), 0, 0, false);
  ModelsGrid.go();			// go
  ModelsGrid.disableAutoRefresh(); 	// disable auto refreshing the grid
  ModelsGrid.setColumnWidth(0,110); 	// Model Name
  ModelsGrid.hideColumn(1); 		// model ID
  ModelsGrid.newQuery(); 			//start a new query
  ModelsGrid.addQuery('brandID', '=', 0); // query to get 0 results
  ModelsGrid.runQuery(); 			// run the query
  ModelsGrid.onDataRowClick = ModelClicked;	// set on clicked event
End JavaScript Code

Eventos Click

As seguintes funções são disparadas ao clicar no data grid Marcas e Modelos:

Definição da função BrandClicked():

JavaScript Code:
function BrandClicked(row, column, recordId, fieldReference){
  $totalPrice = 0;
  $lastColorPrice = 0;
  $('CarOptionsDiv').innerHTML = "Please select a model";
  var BrandID = BrandsGrid.getCellValue(row, 0);	// get field 0 value of selected row
  ModelsGrid.newQuery(); 				// start a new query
  ModelsGrid.addQuery('brandID', '=', BrandID);   // Query based on BrandID
  ModelsGrid.runQuery();				// run the query
} // end BrandClicked
End JavaScript Code

Definición de la función ModelClicked():

JavaScript Code:
function ModelClicked(row, column, recordId, fieldReference){
  $totalPrice = 0;
  $lastColorPrice = 0;
  $('CarOptionsDiv').innerHTML = "Getting options from backend";
  var ModelID = ModelsGrid.getCellValue(row, 1);	// get cell value from field 3 of the selected row
  prepOptions(ModelID);
} //end ModelClicked
End JavaScript Code

Envio de valores personalizados ao backend

A função ModelClicked() chama a função prepOptions() que enviará os valores personalizados ao backend:

Definição da função PrepOptions():

JavaScript Code:
function prepOptions(modelID){
  myQuery = new dax_query('Models');
  myQuery.clearCustomValues();
  myQuery.addCustomValue('modelID', modelID);
  myQuery.handler = getOptionValues;
  myQuery.runQuery();
} // end prepOptions
End JavaScript Code

Recebimento de valores personalizados no backend

O método de projeto DAX_DevHook_OnQuery será chamado depois que 4D reciba os valores personalizados:

DAX_DevHook_OnQuery method (custom modification in BOLD):

4D Code:
C_LONGINT($1;$selectionNumber_l;$size_l;$i)
C_POINTER($2;$3;$4;$5;$6;$tableNumbers_p;$fieldNumbers_p;$queryValues_p;$queryComparators_p;$queryLineLinks_p)
C_BOOLEAN($7;$0;$queryInSelection_b;$queryDone_b)
C_TEXT($tableName_t;$selectionName_t;$operator_t;$value_t)
C_POINTER($table_p;$field_p)

` variable declarations for modelID custom value query
C_TEXT($modelID_t;$colorsSpan_t)
C_LONGINT($modelCount_li;$i;$colorCount_li)
C_REAL($basePrice_r)
` end variable declarations for modelID custom values query

$selectionNumber_l:=$1
$tableNumbers_p:=$2
$fieldNumbers_p:=$3
$queryValues_p:=$4
$queryComparators_p:=$5
$queryLineLinks_p:=$6
$queryInSelection_b:=$7

$queryDone_b:=False  ` Change to True if you handle the Query

` *** This is an advanced feature - you'll need to be comfortable with building complex 
`       queries using pointers and text values

` *** To handle the queries yourself
`        Convert the passed parameters to tables, fields, and values, and perform the queries 

$modelID_t:=DAX_Dev_GetWebVar ("modelID")

If ($modelID_t#"")
  $queryDone_b:=True
	
  ALL RECORDS([Options])
  QUERY([Options];[Options]modelID=$modelID_t)
  $modelCount_li:=Records in selection([Options])
  ARRAY TEXT(customVarName_at;($modelCount_li+2))
  ARRAY TEXT(customVarValue_at;($modelCount_li+2))
	
  ALL RECORDS([Models])
  QUERY([Models];[Models]ID=$modelID_t)
  $basePrice_r:=[Models]basePrice
	
  customVarName_at{1}:="Base Price"
  customVarValue_at{1}:=String($basePrice_r)
	
  FIRST RECORD([Options])
  For ($i;1;$modelCount_li)
    customVarName_at{($i+1)}:=[Options]name
    customVarValue_at{($i+1)}:=String([Options]price)
    NEXT RECORD([Options])
  End for 
	
  ` compose HTML for colors and send as name="Colors" and value="composedHTML"
  ALL RECORDS([Colors])
  QUERY([Colors];[Colors]modelID=$modelID_t)
  $colorCount_li:=Records in selection([Colors])
  FIRST RECORD([Colors])
  $colorsSpan_t:="<table border=0 cellpadding=0 cellspacing=0 border=0 width=100%>\r"
  $colorsSpan_t:=$colorsSpan_t+"<tr><td rowspan="+String($colorCount_li+1)+" valign=top align=left>Colors:</td></tr>"
  For ($x;1;$colorCount_li)
    If ([Colors]Color="White")
      $colorsSpan_t:=$colorsSpan_t+"<tr><td align=left><input type=\"radio\" id=\"White\" checked=true onclick=\"calcColor(this);\" value=\""+String([Colors]Price)+"\" name=\"color\">"+[Colors]Color+"</td><td align=right>$"+String([Colors]Price)+"</td></tr>\r"
    Else 
      $colorsSpan_t:=$colorsSpan_t+"<tr><td align=left><input type=\"radio\" onclick=\"calcColor(this);\" value=\""+String([Colors]Price)+"\" name=\"color\">"+[Colors]Color+"</td><td align=right>$"+String([Colors]Price)+"</td></tr>\r"
    End if
    NEXT RECORD([Colors])
  End for 
  $colorsSpan_t:=$colorsSpan_t+"</table>"
	
  customVarName_at{($modelCount_li+2)}:="Colors"
  customVarValue_at{($modelCount_li+2)}:=$colorsSpan_t
	
  DAX_Dev_SetCustomVariables (->customVarName_at;->customVarValue_at)
	
End if 



+If (False)
End if 

` *** Return True if you have performed the query
`       Return False to have 4DAF perform the query
$0:=$queryDone_b
End 4D Code

Recebimento da retrochamada de valores personalizados do backend

A função getOptionsValues() anteriormente foi definida como o tratador para o objeto myQuery que foi utilizado para enviar os valores personalizados ao backend; esta função é chamada quando os dados voltam de 4D ao frontend:

Definição da função getOptionValues():

Código JavaScript:
function getOptionValues(){
  myCustomValues = myQuery.getCustomValuesFrom4D();
  var len = myCustomValues.length;
  if(len!=0){
    $optionsHTML = "<form><table border=0 cellspacing=0 cellpadding=0 width=100%>\r";
    for(var i = 0; i<len;i++){
      if(myCustomValues[i].name == "Base Price"){
        $basePrice=myCustomValues[i].value;
        $optionsHTML = $optionsHTML + "<tr><td style=\"padding: 3px\">Base Price:</td>\r<td align=right style=\"padding: 3px\">$"+ $basePrice +"</td></tr>\r";
        $optionsHTML = $optionsHTML + "<tr height=1 bgcolor=#000000><td colspan=2></td></tr>\r";
      }else{ // end if / start else
        $name = myCustomValues[i].name; 
        $value = myCustomValues[i].value;
        if($name=="Colors"){
          $spanForColors = $value;
        }else{ // end COLOR 
          $optionsHTML = $optionsHTML + "<tr>\r";
          $optionsHTML = $optionsHTML + "<td><input type=checkbox value=\""+ $value +"\" ID=\"DaxCarOption\" name=\""+ $name +"\" onclick=\"calcTotal(this);\">"+ $name +"</td>\r";
          $optionsHTML = $optionsHTML + "<td align=right style=\"padding: 3px\">$"+ $value +"</td>\r";
          $optionsHTML = $optionsHTML + "</tr>\r";
        } // end COLOR else
      } // end BASE PRICE else
    } // end for loop
    $optionsHTML = $optionsHTML + "<tr height=1 bgcolor=#000000><td colspan=2></td></tr>\r";
    $optionsHTML = $optionsHTML + "<tr><td valign=top colspan=2 style=\"padding: 3px\"><span ID=\"ColorsDropDown\"></span></td></tr>\r";
    $optionsHTML = $optionsHTML + "<tr height=1 bgcolor=#000000><td colspan=2></td></tr>\r";
    $optionsHTML = $optionsHTML + "<tr><td><b style=\"padding: 3px\">Total Price:</b></td>\r<td align=right style=\"padding: 3px\"><b><div ID=\"TotalPrice\"></div></b></td></tr>\r";
    $optionsHTML = $optionsHTML + "</table>\r</form>";
    $('CarOptionsDiv').innerHTML = $optionsHTML;
    $('ColorsDropDown').innerHTML = $spanForColors;
    $totalPrice = $basePrice;
    $('TotalPrice').innerHTML = "$"+$totalPrice;
  $('White').click();
  } // end IF len # 0
} // end getOptionValues
End JavaScript Code

Cálculo do custo total

Cada vez que o usuário escolha qualquer das opções, as seguintes funções são utilizadas para calcular o custo total:

Definição da função calcTotal:

JavaScript Code:
function calcTotal(item){
  if(item.checked==true){
    $totalPrice = parseInt($totalPrice) + parseInt(item.value);
    $('TotalPrice').innerHTML = "$"+$totalPrice;
  }else{
    $totalPrice = parseInt($totalPrice) - parseInt(item.value);
    $('TotalPrice').innerHTML = "$"+$totalPrice;
  }
}
End JavaScript Code

Definição da função calcColor:

JavaScript Code:
function calcColor(item){
  $totalPrice = parseInt($totalPrice) + parseInt(item.value) - parseInt($lastColorPrice);
  $('TotalPrice').innerHTML = "$"+$totalPrice;
  $lastColorPrice = parseInt(item.value); // update the price of the last color used for the next calculation
}
End JavaScript Code