Saturday, March 24, 2012

A widget framework

I am currently embarking on a project to deliver content via a mini portal for students at a community college.

What I would like to do is build a framework which works the same way as iGoogle, PageFlakes, Live.com or any other site which allows you to mash up your own start page.

Are there any frameworks or projects underdevelopment which will demonstrate the patterns involved in creating "Widgets" that you can include on a page just by adding a <script src="http://pics.10026.com/?src=APPLICATIONSRC"></script>

I have a couple working models where I use the external script to write innerHTML to a div where the script tag is included, but there is much more work to do and I was wondering if anyone has any ideas on the best / most resuable way to accomplish this.

For all backend data we will be using standard web services decorated with the [ScriptMethod] and [ScriptService] attributes.

Here is the code i've got working so far:

 initWidgetContainer(); initWidget(); function initWidgetContainer() { var wc = $get("WidgetContainer_1");if (wc ==null) { document.write("<div id='WidgetContainer_1' class='widgetcontainer'>Add widgets here</div>"); } } function initWidget() { SunGard.Public.Services.ERP.InitWidget(initComplete); } function initComplete(result) { Render(result); } function LoadData(widgetObj) { SunGard.Public.Services.ERP.LoadProfile(widgetObj,"lucasstark", Render); } function Render(result) {//Write the contanier to push the data into. var wc = $get("WidgetContainer_1"); wc.innerHTML = wc.innerHTML + result.WidgetContainer;//Now that we have our container set up for us, lets write some content into it; $get(result.WidgetID).innerHTML = result.WidgetContent; }
 
//Here is the asmx service
//Partial listing:
 
 [WebMethod]public Widget InitWidget() { Widget w =new Widget(); w.WidgetID = Guid.NewGuid().ToString(); w.LoadWidgetData();return w; }

// and finally partial of the widget

/// <summary>/// Summary description for Widget/// </summary>public class Widget{private string _widgetID;private string _widgetContent;public string WidgetID {get {return _widgetID; }set { _widgetID =value; } }public string WidgetContent {get {return _widgetContent; }set { _widgetContent =value; } }public string WidgetContainer {get {return"<div id = '" + WidgetID +"' class=\"widgetdata\"></div>"; } }public Widget(){ }private void SetOutput(string innerData) {this._widgetContent = innerData; }public void LoadWidgetData() {#region Datastring data = @." <h2>Lucas Stark</h2> <table> <tr> <td> Full Name: </td> <td> Lucas Stark </td> <td> </td> </tr> <tr> <td> Email Address: </td> <td> <a href='mailto:lucasstark@.delta.edu'>lucassatrk@.delta.edu</a> </td> <td> </td> </tr> <tr> <td> Phone Number: </td> <td> 9541 </td> <td> </td> </tr> </table>";#endregion SetOutput(data); }


Checkout this articlehttp://www.codeproject.com/Ajax/MakingGoogleIG.asp


Thanks for the link.

I've played around with and reviewed the code for that applicaiton before, but it seems WAY overly complex. I thought there used to be a slimmed down version of that which wasn't using DLINQ or workflow to acomplish the same things, but I can't seem to locate it..

No comments:

Post a Comment