PDA

View Full Version : [CLOSED] Dynamic desktop shortcuts



stefanos
Oct 20, 2016, 3:17 PM
Hi,
due to the fact that when adding too many shortcuts in the desktop module using the sortindex they overlap (see attached screenshot) 24772

We have decided to set them by X,Y values. The following code is a sample of a desktop module, where the position is fixed (X,Y). I would like to ask how can I access the X and Y values and from where, in order to dynamically set it depending on the width and height of the window. (explained in the code as well).




<ext:DesktopModuleProxy runat="server">
<Module ModuleID="grid-win">
<Shortcut Name="Grid Window" IconCls="x-grid-shortcut" X=1200 Y=150/>
<%--Here or from a function in the Desktop module I will need to replace X and Y with a dynamic value of my choice--%>

<Launcher Text="Grid Window" Icon="Table" />
<Window>
<ext:Window runat="server"
Icon="Table"
Width="740"
Height="480"
Layout="Fit"
Title="Grid Window">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Something" Icon="Add" ToolTip="Add a new row">
</ext:Button>

<ext:ToolbarSeparator runat="server" />

<ext:Button runat="server" Text="Options" Icon="Plugin">
</ext:Button>

<ext:ToolbarSeparator runat="server" />

<ext:Button runat="server" Text="Remove Something" ToolTip="Remove the selected item" Icon="Decline">
<QTipCfg Text="Remove the selected user" />
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

<Items>
<ext:GridPanel runat="server"
Border="false">
<Store>
<ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Price" Type="Float" />
<ext:ModelField Name="Change" Type="Float" />
<ext:ModelField Name="PctChange" Type="Float" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>

<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column runat="server" Text="Company" Flex="1" Sortable="true" DataIndex="Company" />
<ext:Column runat="server" Text="Price" Width="70" Sortable="true" DataIndex="Price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column runat="server" Text="Change" Width="70" Sortable="true" DataIndex="Change" />
<ext:Column runat="server" Text="% Change" Width="70" Sortable="true" DataIndex="PctChange" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Window>
</Window>
</Module>
</ext:DesktopModuleProxy>



<%@ Page Language="C#" %>

<%@ Register Src="modules/AccordionWindow.ascx" TagPrefix="mod" TagName="AccordionWindow" %>
<%@ Register Src="modules/GridWindow.ascx" TagPrefix="mod" TagName="GridWindow" %>
<%@ Register Src="modules/SystemStatus.ascx" TagPrefix="mod" TagName="SystemStatus" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
// dynamic module loading via DesktopModuleProxy
this.LoadControl("modules/WhatsNew.ascx");
}
}

protected void Logout_Click(object sender, DirectEventArgs e)
{
// Logout from Authenticated Session
this.Response.Redirect("Default.aspx");
}

[DirectMethod(ShowMask = true)]
public void CreateWindow()
{
Desktop.GetInstance().CreateWindow(new Window
{
Title = "New window",
Width = 300,
Height = 300,
CloseAction = CloseAction.Destroy,
Html="The window is created"
});
}

[DirectMethod(ShowMask=true)]
public void AddNewModule()
{
Desktop.GetInstance().RemoveModule("add-module");
DesktopModuleProxy control = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.DesktopModuleProxy>(this.LoadControl("modules/TabWindow.ascx"));
control.RegisterModule();
}

[DirectMethod(ShowMask = true)]
public void AddAnotherModule()
{
Desktop.GetInstance().RemoveModule("add1-module");
DesktopModule m = new DesktopModule
{
ModuleID = "dyn-mod",
Shortcut = new DesktopShortcut
{
Name = "Dynamic Module"
},

Launcher = new Ext.Net.MenuItem
{
Text = "Dynamic module"
},

Window =
{
new Window
{
Title = "Dynamic Window",
Width = 300,
Height = 300,
DefaultRenderTo = Ext.Net.DefaultRenderTo.Form,
Icon = Icon.ApplicationAdd
}
},

AutoRun = true
};

Desktop1.AddModule(m);
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET Examples</title>

<link href="resources/desktop.css" rel="stylesheet" />

<script>
var tile = function () {
Ext.net.Desktop.desktop.tileWindows();
};

var cascade = function () {
Ext.net.Desktop.desktop.cascadeWindows();
};

var initSlidePanel = function () {
this.setHeight(Ext.net.Desktop.desktop.body.getHei ght());

if (!this.windowListen) {
this.windowListen = true;
this.show();

this.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0]);
Ext.on("resize", initSlidePanel, this);
}
};
</script>
</head>
<body>
<ext:ResourceManager runat="server">
<Listeners>
<WindowResize Handler="Ext.net.Bus.publish('App.Desktop.ready');" Buffer="500" />
</Listeners>
</ext:ResourceManager>

<ext:Desktop ID="Desktop1" runat="server">
<Modules>
<ext:DesktopModule ModuleID="Hello" AutoRun="true">
<Window>
<ext:Window runat="server"
Plain="true"
Padding="10"
Width="150"
Height="100"
Title="Greeting"
CloseAction="Destroy"
Maximizable="false"
Minimizable="false">
<Content>
Welcome to Ext.Net desktop!
</Content>
</ext:Window>
</Window>
</ext:DesktopModule>

<ext:DesktopModule ModuleID="notepad">
<Shortcut Name="Notepad" IconCls="x-notepad-shortcut" SortIndex="2" />
<Launcher Text="Notepad" Icon="ApplicationForm" />
<Window>
<ext:Window runat="server"
Title="Notepad"
Width="750"
Height="400"
Icon="ApplicationForm"
AnimCollapse="false"
Border="false"
HideMode="Offsets"
Layout="FitLayout"
CloseAction="Destroy">
<Items>
<ext:HtmlEditor
runat="server"
Text="Some <b>rich</b> <font color='red'>text</font> goes <u>here</u><br>Give it a try!" />
</Items>
</ext:Window>
</Window>
</ext:DesktopModule>

<ext:DesktopModule ModuleID="create-module">
<Shortcut Name="Create window" Handler="function () {#{DirectMethods}.CreateWindow();}" SortIndex="3">
</Shortcut>
</ext:DesktopModule>

<ext:DesktopModule ModuleID="add-module">
<Shortcut Name="Render dynamic module" Handler="function () {#{DirectMethods}.AddNewModule();}" X="200" Y="100" TextCls="x-long-label">
</Shortcut>
</ext:DesktopModule>

<ext:DesktopModule ModuleID="add1-module">
<Shortcut Name="Render another module" Handler="function () {#{DirectMethods}.AddAnotherModule();}" X="200" Y="300" TextCls="x-long-label">
</Shortcut>
</ext:DesktopModule>
</Modules>

<DesktopConfig Wallpaper="resources/wallpapers/blue.jpg" ShortcutDragSelector="true">
<ShortcutDefaults IconCls="x-default-shortcut" />
<ContextMenu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Change Settings" />
<ext:MenuSeparator runat="server" />
<ext:MenuItem runat="server" Text="Tile" Handler="tile" Icon="ApplicationTileVertical" />
<ext:MenuItem runat="server" Text="Cascade" Handler="cascade" Icon="ApplicationCascade" />
</Items>
</ext:Menu>
</ContextMenu>

<Content>
<ext:Image runat="server" ImageUrl="resources/logo.png" StyleSpec="position:absolute;top: 50%;left: 50%;width: 77px; height: 78px;margin-top: -39px; margin-left: -39px;"/>
<ext:Image runat="server" ImageUrl="resources/powered.png" StyleSpec="position:absolute;right:10px;bottom:20px;width:300 px;height:39px;"/>
<ext:DisplayField runat="server" Text="You can place controls to desktop" FieldStyle="color:white;font-size:24px;" StyleSpec="position:absolute;left: 50%; bottom: 100px;margin-left: -180px;"/>
<ext:DisplayField runat="server" Text="Move mouse to the right edge -->" FieldStyle="color:white;font-size:24px;" StyleSpec="position:absolute;right:50px;top:50px;"/>

<ext:Toolbar runat="server" Width="545" Floating="true" ClassicButtonStyle="true" Flat="true" Border="false" Shadow="false">
<Defaults>
<ext:Parameter Name="IconAlign" Value="top" />
<ext:Parameter Name="Width" Value="105" />
<ext:Parameter Name="Icon" Value="resources/cmd.png" />
<ext:Parameter Name="Scale" Value="large" />
<ext:Parameter Name="Handler" Value="function () {Ext.Msg.alert('Launch', this.text);}" Mode="Raw" />
</Defaults>
<Items>
<ext:Button runat="server" Text="Word" />
<ext:Button runat="server" Text="Excel" />
<ext:Button runat="server" Text="Notepad" />
<ext:Button runat="server" Text="Paint" />
<ext:Button runat="server" Text="Explorer" />
</Items>
<MessageBusListeners>
<ext:MessageBusListener Name="App.Desktop.ready" Handler="this.el.anchorTo(Ext.net.Desktop.desktop.body, 'c-b', [0, -50]);" />
</MessageBusListeners>
</ext:Toolbar>
</Content>
</DesktopConfig>

<StartMenu Title="Ext.Net Desktop" Icon="Application" Height="300">
<ToolConfig>
<ext:Toolbar runat="server" Width="100">
<Items>
<ext:Button runat="server" Text="Settings" Icon="Cog" />
<ext:Button runat="server" Text="Logout" Icon="Key">
<DirectEvents>
<Click OnEvent="Logout_Click">
<EventMask ShowMask="true" Msg="Good Bye..." MinDelay="1000" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</ToolConfig>
</StartMenu>

<TaskBar TrayWidth="120">
<QuickStart>
<ext:Toolbar runat="server" Width="80">
<Items>
<ext:Button runat="server" Handler="tile" Icon="ApplicationTileVertical" OverflowText="Tile windows">
<QTipCfg Text="Tile windows" />
</ext:Button>

<ext:Button runat="server" Handler="cascade" Icon="ApplicationCascade" OverflowText="Cascade windows">
<QTipCfg Text="Cascade windows" />
</ext:Button>
</Items>
</ext:Toolbar>
</QuickStart>

<Tray>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="LangButton" runat="server" Text="EN" Cls="x-bold-text" MenuAlign="br-tr" ArrowVisible="false">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:CheckMenuItem runat="server" Group="lang" Text="English" Checked="true" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('EN');}" />
<ext:CheckMenuItem runat="server" Group="lang" Text="French" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('FR');}" />
<ext:MenuSeparator runat="server" />
<ext:MenuItem runat="server" Text="Show the Language Bar" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarFill runat="server" />
</Items>
</ext:Toolbar>
</Tray>
</TaskBar>
<Listeners>
<Ready BroadcastOnBus="App.Desktop.ready" />
</Listeners>
</ext:Desktop>

<ext:Panel runat="server" Title="Slide panel" Frame="true" Width="250" Layout="AccordionLayout" Floating="true" Shadow="false" Hidden="true">
<Items>
<ext:Panel runat="server" Title="Section 1" Icon="User" />
<ext:Panel runat="server" Title="Section 2" Icon="UserB" />
<ext:Panel runat="server" Title="Section 3" Icon="UserB" />
<ext:Panel runat="server" Title="Section 4" Icon="UserB" />
<ext:Panel runat="server" Title="Section 5" Icon="UserB" />
</Items>
<MessageBusListeners>
<ext:MessageBusListener Name="App.Desktop.ready" Fn="initSlidePanel" />
</MessageBusListeners>
<Plugins>
<ext:MouseDistanceSensor runat="server" Opacity="false" Threshold="25">
<Listeners>
<Near Handler="this.component.el.alignTo(Ext.net.Desktop.desktop. body, 'tr-tr', [0, 0], true);" />
<Far Handler="this.component.el.alignTo(Ext.net.Desktop.desktop. body, 'tl-tr', [0, 0], true);" />
</Listeners>
</ext:MouseDistanceSensor>
</Plugins>
</ext:Panel>

<%--Modules from User controls--%>
<mod:AccordionWindow runat="server" />
<mod:GridWindow runat="server" />
<mod:SystemStatus runat="server" />
</body>
</html>

fabricio.murta
Oct 21, 2016, 2:42 AM
Hello @stefanos!

Hello! Your sample does not run in our side. So, I will provide you directions on one of the approaches you could use:

1. bind the shortcut to a variable



X=<%# winX %> Y=<%# winY %> AutoDataBind="true"


2. define it in the control's scope and bind value during page load:



public int winX;
public int winY;

public void Page_Load(object sender, EventArgs e)
{
winX = 400;
winY = 200;
}


Hope this helps!

fabricio.murta
Oct 29, 2016, 11:48 PM
Hello again @stefanos!

It's been some time already and you didn't provide feedback on this thread. Did the directions above help you at all?