Resizing/maximizing widgets

Sep 10, 2008 at 1:26 AM
Seems to be logical to have certain property for  widgets which makes them to behave similarly to 100% in HTML terms or   Dock = Fill in Windows Forms terms.
Is it in plans as doesn't seem to be possible now ?
Ideally it would be nice to have a possibility to maximize a widget of your interest , minimizing the rest. I am quite sure there was third party product for maximizing a web part in Sharepoint.
You may see what I mean here
 http://www.mscui.net/PatientJourneyDemonstrator/PrimaryCareAdmin.aspx

I understand it is Silverlight and perhaps resizing and changing layout of all widgets is a big ask for DHTML , but at least maximizing or 100% width behaviour  for certain widget would  be nice to have.
Sep 15, 2008 at 7:20 PM
It is possible to implement a widget maximize feature into dropthings.  I have created a version based upon a prior release, and it works as expected.  I have not yet brought the code base up to the 1.7 release, but expect to do so over the next few weeks.

In order to implement this feature, first I created a new button on the widget container:  Supersize.  I chose Supersize because maximize was used intermittently throughout the portal already.  Expanded could also be used.

I chose a different implementation method for the expanded widget:  I created a new page, with a single column, and moved the widget from the original page to the newly created page.  I stored the original page, row and order in the widgetInstance state column.  That way, when the user chose to restore the widget back to the original page and size, the necessary information was readily available.

A new workFlow needed to be created that performed the actual functionality.  It consisted of the following steps: getUserGuid; createNewPage; changePageLayout; setCurrentPage; changeWidgetInstancePage.

Another workFlow to restore the widget was also needed:  getUserGuid; changeWidgetInstancePage; setCurrentPage; deletePage.

The IWidget interface must be modified to include a pointer to the routine that performs the expand/contract functionality, and the IWidgetHost interface heeds to provide state information for the expanded porperty state.


The WidgetContained need functionality similar to this:

 

private void SetExpandCollapseButtons() {

 

 

if (!this.WidgetInstance.Expanded) { ExpandWidget.Visible = true; CollapseWidget.Visible = false; WidgetBodyPanel.Visible = false;  }

 

 

else {ExpandWidget.Visible = false; CollapseWidget.Visible = true; WidgetBodyPanel.Visible = true; }

 

}


 

void IWidgetHost.Maximize()

 

{

 

// If this is the maximized page, restore it

 

 

if (Profile.MaximizedPageNo==this.WidgetInstance.PageId )

 

{

 

new DashboardBusiness.DashboardFacade(Profile.UserName).RestoreMaximizedWidgetInstance(this.WidgetInstance.Id,Profile.OriginalPageID,Profile.OriginalColNo,Profile.OriginalOrderNo,Profile.MaximizedPageNo, Profile.OriginalState);

 

Profile.OriginalState =

"";

 

Profile.MaximizedPageNo = 0;

Profile.Save();

 

this.Page.Response.Redirect("~");

 

}

 

else

 

{

Profile.OriginalColNo =

this.WidgetInstance.ColumnNo;

 

Profile.OriginalOrderNo =

this.WidgetInstance.OrderNo;

 

Profile.OriginalPageID =

this.WidgetInstance.PageId;

 

Profile.OriginalState =

this.WidgetInstance.State;

 

 

if (this.WidgetInstance.State != null)

 

{

 

if (this.WidgetInstance.State != null && this.WidgetInstance.State !="")

 

{

System.Xml.Linq.

XElement _State = System.Xml.Linq.XElement.Parse(this.WidgetInstance.State);

 

 

if (_State.Element("height") != null)

 

{

Profile.OriginalHeight =

int.Parse(_State.Element("height").Value);

 

_State.Element(

"height").Value = "1000";

 

}

 

else Profile.OriginalHeight = 0;

 

 

if (_State.Element("width") != null)

 

{

Profile.OriginalWidth =

int.Parse(_State.Element("width").Value);

 

_State.Element(

"width").Value = "1000";

 

}

 

else Profile.OriginalWidth = 0;

 

 

if (this.WidgetInstance.State != _State.Xml() )

 

 

this.WidgetInstance.State = _State.Xml() ;

 

}

}

Profile.Save();

 

new DashboardBusiness.DashboardFacade(Profile.UserName).MaximizeWidgetInstance(this.WidgetInstance);

 

 

using (var db = DatabaseHelper.GetDashboardData())

 

{

 

WidgetInstance widgetInstance = db.WidgetInstances.Single(wi => wi.Id == this.WidgetInstance.Id);

 

Profile.MaximizedPageNo = widgetInstance.PageId;

}

Profile.Save();

 

this.Page.Response.Redirect("~");

 

}

}


 

void IWidgetHost.Minimize()

 

{

DetachAssociation(

new Action(delegate()

 

{

 

DatabaseHelper.Update<WidgetInstance>(this.WidgetInstance, delegate(WidgetInstance i)

 

{

i.Expanded =

false;

 

});

}));

 

 

this.SetExpandCollapseButtons();

 

 

this._WidgetRef.Minimized();

 

WidgetBodyUpdatePanel.Update();

WidgetHeaderUpdatePanel.Update();

}

==========================================
This is not a complete implementation of the functionality, but a description overview on how it could be implemented.  If you would like additional information prior to my posting, feel free to contact me.




Sep 16, 2008 at 4:02 AM
Thanks. I am looking forward to your change to be deployed to code base. Let me summarize what  I understood and please clarify  whether my understanding is correctl for  your implementation :
1. " I chose Supersize because maximize was used intermittently throughout the portal already."  What do you mean by "intermittently" ?  I didn't notice "maximize" visual element  in UI , is this term used in  a code for something else
2. .You provide certaing visual element "Supersize button  in the left top corner of widget window .  When we press on that,  another page/tab is created with the certain name  ( or just third page, fourth page and etc.. ) where maximized widget is placed.
Is the same non-maximized widget  kept on original page or deleted from there ?
3. On maximized page when we click on  "Supersixe" button which acts like a trigger we receive original layout on original page and automatically navigate there. Page with maximized widget is deleted ?
 
Sep 16, 2008 at 8:06 PM
1. The maximize property was sometimes associated with the plus and minus icons used to open and close a widget. It is defined IWidget.cs.
2. Visual Elements
I restructured the title bar as follows:
----------------------------------------------------------------------------------------------
| widgetIcon WIDGET TITLE [ ] ^ - X |
----------------------------------------------------------------------------------------------
where widgetIcon is an icon associated with the Widget (I added a field in the Widgets table to point to an icon)
WIDGET TITLE is the title associated with a widget instance
[ ] is the windows maximize icon, and is used to move the widget instance to a new page, thus removing it from the original location. The original position is saved in the widgetInstance state column, the new page title is set to the widgetInstance title.
^ is an icon that replaces the edit. Similarly, when the widgetInstance is in edit mode, the ^ is replaced with an inverted icon which closes the edit panel.
- minimizes the widget instance, closing the content panel. When the widgetInstance is minimized, the icon is replaced with a + icon.
X closes or deleted the instance off of the page.
3. Restore widget or DownSize
the widgetInstance has the page, row, and index properties reset to their original values, thus removing the widgetInstance from the newlyCreated Maximized page. Afterwards, the empty page is deleted.
----- Original Message -----
From: [email removed]
To: [email removed]
Sent: Tuesday, September 16, 2008 12:02 AM
Subject: Re: Resizing/maximizing widgets [dropthings:35326]

From: micmit

Thanks. I am looking forward to your change to be deployed to code base. Let me summarize what I understood and please clarify whether my understanding is correctl for your implementation :
1. " I chose Supersize because maximize was used intermittently throughout the portal already." What do you mean by "intermittently" ? I didn't notice "maximize" visual element in UI , is this term used in a code for something else
2. .You provide certaing visual element "Supersize button in the left top corner of widget window . When we press on that, another page/tab is created with the certain name ( or just third page, fourth page and etc.. ) where maximized widget is placed.
Is the same non-maximized widget kept on original page or deleted from there ?
3. On maximized page when we click on "Supersixe" button which acts like a trigger we receive original layout on original page and automatically navigate there. Page with maximized widget is deleted ?
Sep 26, 2008 at 11:14 AM
Edited Sep 26, 2008 at 11:16 AM
There does seem to be some confusion over the meaning of these widget icons, I would suggest we got with

Minimise & restore ( equivalent to current plus and minus icons )
Maximise & restore ( maximise expands widget to fit viewable screen area as per the recent builds in source)

Regards

SPacecowboy

:)
Sep 29, 2008 at 6:15 AM
I noticed  new functionality ( downloaded the latest changeset  17783 ) . But behaviour is quite different and sequence of icons is slightly different  to what was  described by kgarbin. Is it just something which is being changed ? $0 In fact, there are benefits to bring maximized widget to the top with the maximum width , but why height icon ( bottom right corner ) which regulates height by mouse drag  $0$0becomes invisible( or prohibited in other words ) ?  It is less destructive than creating another page for maximizing , still if height less than tab height one may need to resize widget height.  Maybe if  maximizing make default height equal to tab heigt ,$0$0 the rest of widgets to be seen will require scrolling or resizing height of maximized widget , but that's  conscious  user's choice when she presses this icon.    Also there up/down arrow icon which is supposedly minimizing/restoring  of  a widget , but doesn't work as expected.$0$0 $0