EasyUI Forum
October 15, 2024, 11:57:04 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Desktop Layout for Easyui  (Read 15247 times)
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« on: June 21, 2018, 03:20:58 AM »

Can we have Web Desktop in Easyui like Sencha Web Desktop. Coming from backend experience, it is an extra task for me to code for the Front-End in which Easyui has alread helped me to a great great extend. Easyui helped me very much. However, I wish I could have something like Sencha Web Desktop as an extension or give me a sample code to work with.

Please look at http://examples.sencha.com/extjs/6.6.0/examples/classic/desktop/index.html. It is very nice and clean.

Thanks and regards,
Alfred
Logged
jarry
Administrator
Hero Member
*****
Posts: 2276


View Profile Email
« Reply #1 on: June 22, 2018, 07:36:08 AM »

This plugin will be released in a few days.
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #2 on: June 22, 2018, 12:03:01 PM »

This a very great news. It will be a great extension to my existing project. Hope to see it soon.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2276


View Profile Email
« Reply #3 on: June 23, 2018, 07:00:04 PM »

The desktop extension can be downloaded from https://www.jeasyui.com/extension/desktop.php
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #4 on: June 23, 2018, 08:48:21 PM »

Thanks a million for the extension. The features I would like with the new extension:

  • draggable desktop icon,
  • Maximize the window on double clicking of its title bar,
  • preview of minimized window on hover,
  • settings for changing desktop background and theme.
  • Lastly, why don't we have the Easyui nice theme applied to the taskbar?

Thanks and regards
Alfred
Logged
mapner
Jr. Member
**
Posts: 63


View Profile
« Reply #5 on: June 24, 2018, 12:14:20 PM »

Great extension, but this UI approach is not depreciated? Is the web user interface as a desktop PC limited to one type of device? What would be the advantage?

Regards
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #6 on: June 24, 2018, 09:44:21 PM »

Thanks Jarry,

The desktop icons are draggable now. But the drag cursor is shown when we hover the mouse. This should appear only when we do the dragging. I expect a tooltip/a preview of the minimized window when we hover the minimized window at the taskbar. Like mapner said, it would be even more flexible if the whole thing such as the window, etc... can be made responsive as well. That would make it more a desktop experience.

I hope you could solve them easily.

Your help and support is great.

Thanks and regards,
Alfred
Logged
jega
Full Member
***
Posts: 198


View Profile
« Reply #7 on: June 26, 2018, 01:38:43 PM »

Hi.

What a nice extension.

Maybe you have it on the drawing board, but here is some wish:

Menus:
Icon and submenus

Desktop:
-Properties
-- default-icon
-- dropOnGrid (Drop app icon on nearest grid)
-- gridSize (pixel as square) (90 means 90x90)

-Events:
-- onDrop(e.source) (To save the position of the app icon)

-Methods
-- getAppPosition(x,y point of left upper corner)
-- setAppPosition(x,y point as left upper corner,)


Have changed the buildTimer function to local datetimestamp or to use the language code

   function buildTimer(target){
      var state = $(target).data('desktop');
      var opts = state.options;
      var lngCode = opts.languageCode || []
      //console.log(lngCode)
      var timer = $('<div class="desktop-timer"></div>').appendTo(state.taskbar);
      var setTime = function(){
         var now = new Date();
         var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
         timer.html(now.toLocaleTimeString(lngCode, options));
      }
      setTime();
      setInterval(function(){
         setTime();
      },1000);
   }

default is the local form

To change it, use the property

$('body').desktop({
   languageCode:'da-DK',
});

en-US, de-DE as the BCP 47 standard
Logged
jega
Full Member
***
Posts: 198


View Profile
« Reply #8 on: June 27, 2018, 12:35:12 AM »

Having a test project on http://xxx.xx/desktoptest

When creating an app with href=http://xxx.xx/testproject

On openApp the path is still http://xxx.xx/desktoptest in that window, so the testproject can't run.

Is there any workaround for this Huh


Jesper
Logged
jarry
Administrator
Hero Member
*****
Posts: 2276


View Profile Email
« Reply #9 on: June 27, 2018, 02:04:33 AM »

Is it a cross domain issue? Try to put iframe instead.
Code:
name: 'Computer',
icon: 'images/computer.png',
width: 800,
height: 400,
content: '<iframe src="..." scrolling="yes" style="width:100%;height:100%;border:0"></iframe>'
Logged
jega
Full Member
***
Posts: 198


View Profile
« Reply #10 on: June 27, 2018, 12:00:22 PM »

Hi Jarry

content iframe does the trick. The app window has a vertical scrollbar, even if i use scrolling="no".


Jesper

Logged
jarry
Administrator
Hero Member
*****
Posts: 2276


View Profile Email
« Reply #11 on: June 27, 2018, 07:24:10 PM »

Please set the 'bodyCls' property with 'panel-nlscroll'.
Code:
name: 'Computer',
icon: 'images/computer.png',
width: 800,
height: 400,
bodyCls: 'panel-noscroll',
content: ...
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #12 on: June 28, 2018, 03:48:22 AM »

Hi Jarry,

I have already made some request on the extension. Thanks you have fulfilled some of my request. I have things few things in mind to include in the desktop extension. Please can you help me with this.


1. tooltip on minimized window on mouse hover,
2. Easyui theme applied to the taskbar.
4. Is it possible to minimize the window by clicking its icon on the taskbar?

Thanks
Logged
jarry
Administrator
Hero Member
*****
Posts: 2276


View Profile Email
« Reply #13 on: June 28, 2018, 08:48:23 AM »

A setting window is added to the example. It's hard to make a preview from a window. This feature can't be achieved in current period.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!