Prado ajax DataGrid integrated with yui-ext

[christocracy]

Following is a typical Company Manager component built with Prado2 http://www.xisc.com (I have a functioning version for Prado3) and nicely integrated with yui-ext I chose to send identical yui-ext params via , exploding the string into php arrays (seen below), rather than storing the properties in heavy xml Component.spec files.


<com:RBorderLayout ID="MAIN">
<com:RLayoutRegion ID="center">
titlebar : false
</com:RLayoutRegion>
</com:RBorderLayout>

<com:RDialog ID="DIALOG">
<com:RBorderLayout IsMainLayout="true" ID="MAIN">
<com:RLayoutRegion ID="center">
titlebar : false
</com:RLayoutRegion>
</com:RBorderLayout>

<com:RJavascriptConfig>
modal: true,
title: 'CompanyManager Dialog',
width: 400,
height: 400
</com:RJavascriptConfig>
<com:RToolbarButton ID="btnCancel">
<com:RJavascriptConfig>
text: 'Cancel',
click: 'onCancel'
</com:RJavascriptConfig>
</com:RToolbarButton>
<com:RToolbarButton ID="btnUpdate">
<com:RJavascriptConfig>
text: 'Update',
click: 'onUpdate'
</com:RJavascriptConfig>
</com:RToolbarButton>
<com:RToolbarButton ID="btnInsert">
<com:RJavascriptConfig>
text: 'Insert',
click: 'onInsert'
</com:RJavascriptConfig>
</com:RToolbarButton>
</com:RDialog>

<com:RToolbar ID="TOOLBAR" Location="CompanyList">
<com:RToolbarButton ID="btnNew">
<com:RJavascriptConfig>text:'New', click:'onNew'</com:RJavascriptConfig>
</com:RToolbarButton>
</com:RToolbar>


<com:RDataGrid
ID="CompanyList"
Layout="PAGE"
Region="west"
Panel="ContentPanel"
Title="Companies"
FitToFrame="true"
ResizeEl="recordset"
ShowBoxHeader="false"
AutoLoad="true"
PeerClass="CompanyPeer"
JavascriptClass="RUtil.prado.DataView"
OnSelect="Parent.onSelect"
OnExecute="Parent.onExecute"
CssClass="CompanyList dataview"
TableCssClass="recordset"
UseDroppable="true"
Group="Company"
ShowSearch="false"
OnClick="onSelect">
<com:RBoundColumn HeaderText="Name" Width="200" PeerColumn="CompanyPeer::NAME" DataField="NAME" />
</com:RDataGrid>

<com:RDataGrid
ID="CompanyProperties"
Layout="MAIN"
Region="center"
Panel="GridPanel"
Title="Properties"
JavascriptClass="RUtil.prado.PropertiesGrid"
CssClass="datagrid"
PeerClass="CompanyPeer"
PeerMethod="CompanyPeer::getProperties"
AutoLoad="false"
OnUpdate="Parent.onUpdateProperties"
TableCssClass="recordset">

<com:RTextEditorColumn BlankText="you must enter a value" HeaderText="Company Name" PeerColumn="CompanyPeer::NAME" DataField="NAME" />
<com:RTextEditorColumn HeaderText="Website" PeerColumn="CompanyPeer::WWW" DataField="WWW" />
<com:RTextEditorColumn HeaderText="Description" PeerColumn="CompanyPeer::DESCRIPTION" DataField="DESCRIPTION" />
<com:RTextEditorColumn HeaderText="Nickname" PeerColumn="CompanyPeer::NICKNAME" DataField="NICKNAME" />
<com:RNumberEditorColumn HeaderText="Phone1" PeerColumn="CompanyPeer::PHONE1" DataField="PHONE1" />
<com:RNumberEditorColumn HeaderText="Phone2" PeerColumn="CompanyPeer::PHONE2" DataField="PHONE2" />
<com:RNumberEditorColumn HeaderText="Fax" PeerColumn="CompanyPeer::FAX" DataField="FAX" />
<com:RTextEditorColumn HeaderText="Address1" PeerColumn="CompanyPeer::ADDR1" DataField="ADDR1" />
<com:RTextEditorColumn HeaderText="Address2" PeerColumn="CompanyPeer::ADDR2" DataField="ADDR2" />
<com:RTextEditorColumn HeaderText="City" PeerColumn="CompanyPeer::CITY" DataField="CITY" />
<com:RCountrySelectEditorColumn HeaderText="Country" Mode="Country" PeerColumn="CompanyPeer::COUNTRY" DataField="COUNTRY" />
<com:RCountrySelectEditorColumn HeaderText="Prov/State" Mode="Region" PeerColumn="CompanyPeer::REGION" DataField="REGION" />
<com:RTextEditorColumn HeaderText="Postal/Zip" PeerColumn="CompanyPeer::ZIP" DataField="ZIP" />
<com:RTextEditorColumn HeaderText="Logo" PeerColumn="CompanyPeer::LOGO" DataField="LOGO" />
</com:RDataGrid>

<com:RAccountManager
ID="AccountManager"
Layout="MAIN"
Region="center"
Panel="NestedLayoutPanel"
Title="Account Manager"
UseDialog="true"
UseToolbar="true"
JavascriptClass="Mercury.AccountManager"
CssClass="AccountManager" />

<com:RGroupManager
ID="GroupManager"
Layout="MAIN"
Region="center"
Panel="NestedLayoutPanel"
Title="Groups"
UseDialog="true"
UseToolbar="true"
JavascriptClass="Mercury.GroupManager"
CssClass="GroupManager" />








<?php
/*
* Created on Dec 21, 2006
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
class RToolbarButton extends TComponent {

protected $text = 'button-text';
protected $callback = 'onCancel';
protected $requiredRole = 'Admin';
protected $config = null;

public function addParsedObject($object, $contect) {
if ($object instanceof RJavascriptConfig) {
$this->config = $object;
}
}

public function getOptions() {
// can do a role check on each button here with $this->User->isInRole($this->requiredRole);
$config = array('ID' => $this->getID());
if ($this->config) $config['Config'] = $this->config->get();
return $config;
}
}
?>


which get JSONed back to client, rather than defining the params


<?php
/*
* RJavascript, turns js {name:'value'} found in template, into php arrays which get
* turned into
* <script type="text/javascript">
* <%='new ' . $className . '(' . $id . ', ' . json_encode($options) . ');' %>
* </script>
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/
class RJavascriptConfig extends TControl {

protected $config = '';

/***
* override TControl::addParsedObject.
* simply grab strings. strings should look like std yui-ext region config
* titlebar:true, collapsed:true, closable:false
*
*/
public function addParsedObject($object, $context) {
if (is_string($object))
$this->config .= $object;
}

/***
* turn the yui-ext config string into a php array with explode.
* be sure to turn booleans into real bools.
*/
public function get() {
$config = explode(',', preg_replace("/ /", "", str_replace(array("\n", "\r", "\t"), '', $this->config)));
$options = array();
foreach ($config as $opt) {
$params = explode(':', $opt);
if ($params[1] == 'true') $params[1] = true;
else if ($params[1] == 'false') $params[1] = false;
else $params[1] = preg_replace("/[\"']/", "", $params[1]);
$options[$params[0]] = $params[1];
}
return $options;
}

}

?>


<com:RToolbarButton Text="click this, motherer" Click="onSelect" /> through xml config file on server.



<?php
/*
* RBorderLayout, a class for expressing yui-ext BorderLayouts in Prado. overrides
* parent::addParsedObject() and allows only RLayoutRegion to be added to its body collection.
*
* Created on Dec 21, 2006
*
* To change the template for this generated file go to
* Window - Preferences - PHPeclipse - PHP - Code Templates
*/

class RBorderLayout extends TComponent {

/***
* list of layout regions (north, west, center, east, south)
*/
protected $regions = array();

/***
* add LayoutRegions to array
*/
public function addParsedObject($object, $context) {
if ($object instanceof RLayoutRegion) {
$this->regions[] = $object;
}
}

/***
* return found BorderLayout config (the array of regions) for the javascipt
* constructor config.
*/
public function getOptions() {
$config = array();
foreach ($this->regions as $r)
$config[$r->getID()] = $r->getOptions();
return array('ID' => strToUpper($this->getID()), 'Config' => $config);
}

}

?>

[skitsanos]

this PRADO looks like close to what i'm digging here actually, you can see some source on http://www.mywdk.com/default.waml?mode=source or output of it on http://www.mywdk.com/default.waml

[christocracy]

what you got going on for ajax callbacks to that thing?
what's the serverside built like?

I've been using prado ~2 years now. it's .NET-like php. I use Propel / Creole for db-access, it's great.

I have a pretty nice core of my own js transformer components (prado->Ext), which seem like they'll work without too much hassle, avec RoR.

I like the idea of using this style of framework as an app builder. you can still farm-out your ajax callbacks to lighter-weight resource-handlers when you so desire.

still in progress, public-side of an app I'm making:
(select "Catalog")
http://www.thirdsidemusic.com

(lemme' know if you have any issues getting RealPlayer to work)

[skitsanos]

for this moment i can use Windows, Linux and MacOS server side, but rather will concentrate only on Windows one. For me it is way easier to extend WAML with new features, without actually having "recompliling" whole thing...

basically it is something that i havent finally decided yet. so it is very possible that i will keep it crosss platform. For this moment framework not linked to any platform.

I did couple of new widgets this week, will add file upload (wa:FileUpload) and wa:Flash for embedding flash movies and have in a list couple of other things. Most probably i will post info in https://www.xing.com/net/waml

[skitsanos]

btw. i clicked on Catalog link just now -- got an error :shock:

[christocracy]

oops, cheers. was playing around with cacheing. works now.

[christocracy]

when I say serverside, I mean what you using for scripting language? RubyOnRails, Java, python, php?

I use php. stuff has to run on linux server, no question.

[skitsanos]

the build that i'm polishing right now works on .NET. it is not exactly scripting actually, the way i do stuff not require me to code anything.

[christocracy]

no coding, eh? what you got...an army of monkeys at your disposal?

I certainly use a number of tools that free me from drudgery, like an ORM framework called Propel, which frees me from writing SQL, but sooner-or-later, to solve real problems and fulfill your client's needs, you have to build code.

in fact, the php MVC framework I use, Prado, is built by .NET developers and based upon .NET. I write lots of code.

[kokoadi]

I so interest tocombine prado with extjs can give me simple example like using loading progress extjs with using prado need more helping how to combine this???