PDA

View Full Version : Prado ajax DataGrid integrated with yui-ext



christocracy
21 Dec 2006, 11:46 PM
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
16 Jan 2007, 10:01 AM
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
16 Jan 2007, 11:41 PM
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
21 Jan 2007, 2:10 PM
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
21 Jan 2007, 2:18 PM
btw. i clicked on Catalog link just now -- got an error :shock:

christocracy
21 Jan 2007, 4:16 PM
oops, cheers. was playing around with cacheing. works now.

christocracy
21 Jan 2007, 4:21 PM
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
22 Jan 2007, 12:50 PM
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
22 Jan 2007, 12:59 PM
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
11 Nov 2007, 9:54 AM
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???