Seite 3 von 9

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 13:36
von RSBasic
@dige
Bei so vielen Einträgen eher nicht.

Man könnte stattdessen Inline-Styles verwenden. Das könnte eventuell schneller sein, aber leider stelle ich fest, dass es so nicht funktioniert.

1. Drücke in meinem neuen Beispiel auf "Alles markieren". Du wirst feststellen, dass nur die ersten 50-100 Einträge gestylt wurden.
2. Scrolle ganz nach unten. Drücke erneut auf "Alles markieren". Jetzt wirst du feststellen, dass nur die untersten 50-100 Einträge gestylt wurden. Die oberen zuvor gestylten Einträge sind wieder farblos. :?

InlineStyle-Variante:

Code: Alles auswählen

EnableExplicit

Procedure SetGadgetItemColorFast(gadget, item, colortype, color, column)
  Protected styles.s
  Protected id.s
  Protected sb_id.s
  
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  
  ;SB-Hauptelement ermitteln
  ! v_sb_id = spider_GadgetID(v_gadget).gadget.id;
  
  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_ListIcon
      If item = -1
        Select colortype
          Case #PB_Gadget_FrontColor
            ! GadgetElement.find("#" + v_sb_id + "-header").find(".dgrid-column-" + v_column).css("color", spider_helper_ColorToHtml(v_color));
          Case #PB_Gadget_BackColor
            ! GadgetElement.find("#" + v_sb_id + "-header").find(".dgrid-column-" + v_column).css("background-color", spider_helper_ColorToHtml(v_color));
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            ! GadgetElement.find("#" + v_sb_id + "-row-" + v_item).find(".dgrid-column-" + v_column).css("color", spider_helper_ColorToHtml(v_color));
          Case #PB_Gadget_BackColor
            ! GadgetElement.find("#" + v_sb_id + "-row-" + v_item).find(".dgrid-column-" + v_column).css("background-color", spider_helper_ColorToHtml(v_color));
        EndSelect
      EndIf
  EndSelect
  
EndProcedure

;================================================== Beispielcode ==================================================

Define a, time, n

Procedure GadgetEvent()
  Protected a, time, n
  
  Select EventGadget()
    Case 2
      For n = 1 To 1
        
        time = ElapsedMilliseconds()
        
        For a=1 To 250
          Debug a
          SetGadgetItemColorFast(1, a, #PB_Gadget_BackColor, #Red, 0)
        Next
        
        Debug ElapsedMilliseconds() - time
      Next
  EndSelect
  
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ListIconGadget(1, 10, 20, WindowWidth(0)-20, WindowHeight(0)-20, "Spalte 1", 200, #PB_ListIcon_GridLines)
  AddGadgetColumn(1, 1, "Spalte 2", 200)
  ButtonGadget(2, 10, 0, 200, 20, "Alles markieren", 0)
  
  For a=1 To 250
    AddGadgetItem(1, -1, "Item " + Str(a) + Chr(10) + "More Text")
  Next
  
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
  
EndIf

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 13:41
von RSBasic
Ich habe herausgefunden, woran das liegt. Es liegt daran, dass SpiderBasic nur eine begrenzte Anzahl an Einträgen im DOM behält. Einträge, die in der Scroll-Liste zu weit entfernt sind, schmeißt er raus und wenn man scrollt, fügt er neue hinzu und die anderen werden entfernt, so dass nur eine bestimmte Anzahl an Elementen existiert. Also per Inline-Style kann man vergessen. Es geht nur über CSS.

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 14:06
von RSBasic
Gadget > (Alle Gadgets) > Design (flat oder claro) aller Gadgets ändern

Code: Alles auswählen

EnableExplicit

#SB_Gadget_Theme_None = 1
#SB_Gadget_Theme_Classic = 2
#SB_Gadget_Theme_Claro = 3
#SB_Gadget_Theme_Flat = 4

Procedure SetGadgetTheme(theme)
  
  Select theme
    Case #SB_Gadget_Theme_None
      ! $("link[href*='/spiderbasic/libraries/javascript/dojo/themes/claro/claro.css']").remove(); 
      ! $("link[href*='/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css']").remove(); 
      ! $('body').removeClass("claro");
      ! $('body').removeClass("flat");
    Case #SB_Gadget_Theme_Classic
      ! $("link[href*='/spiderbasic/libraries/javascript/dojo/themes/claro/claro.css']").remove(); 
      ! $("link[href*='/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css']").remove(); 
      ! $('head').append('<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/themes/claro/claro.css">');
      ! $('body').removeClass("claro");
      ! $('body').removeClass("flat");
    Case #SB_Gadget_Theme_Claro
      ! $("link[href*='/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css']").remove(); 
      ! $('head').append('<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/themes/claro/claro.css">');
      ! $('body').removeClass("flat");
      ! $('body').addClass("claro");
    Case #SB_Gadget_Theme_Flat
      ! $("link[href*='/spiderbasic/libraries/javascript/dojo/themes/claro/claro.css']").remove(); 
      ! $('head').append('<link rel="stylesheet" href="/spiderbasic/libraries/javascript/dojo/themes/flat/flat.css">');
      ! $('body').removeClass("claro");
      ! $('body').addClass("flat");
    
  EndSelect
  
EndProcedure

;================================================== Beispielcode ==================================================

Procedure GadgetEvent()
  Select EventGadget()
    Case 6
      SetGadgetTheme(#SB_Gadget_Theme_Claro)
    Case 7
      SetGadgetTheme(#SB_Gadget_Theme_Flat)
    Case 8
      SetGadgetTheme(#SB_Gadget_Theme_Classic)
    Case 9
      SetGadgetTheme(#SB_Gadget_Theme_None)
  EndSelect
  
EndProcedure

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  TrackBarGadget(1, 10, 10, 480, 20, 0, 100, 0)
  SetGadgetState(1, 60)
  ProgressBarGadget(2, 10, 40, 480, 20, 0, 100, 0)
  SetGadgetState(2, 60)
  CheckBoxGadget(3, 10, 70, 100, 20, "Checkbox", 0)
  OptionGadget(4, 150, 70, 100, 20, "Option")
  ButtonGadget(5, 300, 70, 100, 20, "Button", 0)
  
  ButtonGadget(6, 10, 100, 110, 20, "Set Claro theme", 0)
  ButtonGadget(7, 130, 100, 110, 20, "Set Flat theme", 0)
  ButtonGadget(8, 250, 100, 110, 20, "Set classic theme", 0)
  ButtonGadget(9, 370, 100, 110, 20, "No theme", 0)
  
  BindEvent(#PB_Event_Gadget, @GadgetEvent())
  
EndIf

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 14:08
von Kiffi
bzgl. SetGadgetItemColor():

nicht ideal, aber ein wenig schneller: Für jede Zelle einen eigenen Style-Block erstellen.

Code: Alles auswählen

Procedure SetGadgetItemColor(gadget, item, colortype, color, column)
  Protected styles.s
  Protected id.s
  Protected sb_id.s
  Protected hexcolor.s
 
  ! $("#" + 'SBCustomStyles_' + v_item + "_" + v_column).remove();
  
  ! var StyleElement = document.createElement('style');
  ! StyleElement.type = 'text/css';
  ! StyleElement.id = 'SBCustomStyles_' + v_item + "_" + v_column;
  ! var HeadElement = document.getElementsByTagName('head')[0];
  ! HeadElement.appendChild(StyleElement);
  
 
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;RGB in Hex konvertieren
  hexcolor = "#" + RSet(Hex(Red(color)), 2, "0") + RSet(Hex(Green(color)), 2, "0") + RSet(Hex(Blue(color)), 2, "0")
 
  ;SB-Hauptelement ermitteln
  ! v_sb_id = spider_GadgetID(v_gadget).gadget.id;
 
  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_ListIcon
      If item = -1
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column + " { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column + " { background-color: " + hexcolor + "; }"
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column + " { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column + " { background-color: " + hexcolor + "; }"
        EndSelect
      EndIf
    Case #PB_GadgetType_Tree
      item = item + 2
      If column = 0
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow { background-color: " + hexcolor + "; }"
        EndSelect
      Else
        Select colortype
          Case #PB_Gadget_FrontColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ") { color: " + hexcolor + "; }"
          Case #PB_Gadget_BackColor
            styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ") { background-color: " + hexcolor + "; }"
        EndSelect
      EndIf
  EndSelect
 
  ;Styles hinzufügen
  ! document.getElementById('SBCustomStyles_' + v_item + "_" + v_column).appendChild(document.createTextNode( v_styles ));
 
EndProcedure
Grüße ... Peter

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 14:33
von RSBasic
@Kiffi
Auf jeden Fall schneller, aber man müsste beim separaten Block noch gadget (sonst überschreibt er andere Gadgets) und colortype (sonst überschreibt #PB_Gadget_FrontColor oder #PB_Gadget_BackColor) hinzufügen. Hier die angepasste Version, die ich ins Inhaltsverzeichnis aufnehmen werde.

Gadget > ListIconGadget > Schriftfarbe und Hintergrundfarbe der Spalten und Zeilen ändern (schneller)
Gadget > TreeGadget > Schriftfarbe und Hintergrundfarbe der Einträge ändern (schneller)

Code: Alles auswählen

;Autor: Kiffi

EnableExplicit

Procedure SetGadgetItemColorFast(gadget, item, colortype, color, column)
  Protected styles.s
  Protected id.s
  Protected sb_id.s
  Protected hexcolor.s
 
  ! $("#" + "SBCustomStyles_" + v_gadget + "_" + v_item + "_" + v_column + "_" + v_colortype).remove();
 
  ! var StyleElement = document.createElement('style');
  ! StyleElement.type = 'text/css';
  ! StyleElement.id = 'SBCustomStyles_' + v_gadget + "_" + v_item + "_" + v_column + "_" + v_colortype;
  ! var HeadElement = document.getElementsByTagName('head')[0];
  ! HeadElement.appendChild(StyleElement);
  
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
 
  ;RGB in Hex konvertieren
  hexcolor = "#" + RSet(Hex(Red(color)), 2, "0") + RSet(Hex(Green(color)), 2, "0") + RSet(Hex(Blue(color)), 2, "0")
 
  ;SB-Hauptelement ermitteln
  ! v_sb_id = spider_GadgetID(v_gadget).gadget.id;
 
  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_ListIcon
      If item = -1
        styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column
      Else
        styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column
      EndIf
    Case #PB_GadgetType_Tree
      item = item + 2
      If column = 0
        styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow"
      Else
        styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ")"
      EndIf
  EndSelect
  
  Select colortype
    Case #PB_Gadget_FrontColor
      styles + " { color: " + hexcolor + "; }"
    Case #PB_Gadget_BackColor
      styles + " { background-color: " + hexcolor + "; }"
  EndSelect
 
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles_" + v_gadget + "_" + v_item + "_" + v_column + "_" + v_colortype).appendChild(document.createTextNode( v_styles ));
 
EndProcedure

;================================================== Beispielcode ==================================================

Define a

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_ScreenCentered)
  ListIconGadget(1, 10, 10, WindowWidth(0)-20, WindowHeight(0)-20, "Spalte 1", 200, #PB_ListIcon_GridLines)
  AddGadgetColumn(1, 1, "Spalte 2", 200)
 
  For a=1 To 50
    AddGadgetItem(1, -1, "Item " + Str(a) + Chr(10) + "More Text")
  Next
 
  SetGadgetItemColorFast(1, -1, #PB_Gadget_BackColor, RGB(0, 0, 255), 1)
  SetGadgetItemColorFast(1, -1, #PB_Gadget_FrontColor, RGB(255, 255, 255), 1)
  SetGadgetItemColorFast(1, 5, #PB_Gadget_FrontColor, RGB(255, 0, 0), 0)
  SetGadgetItemColorFast(1, 6, #PB_Gadget_FrontColor, RGB(0, 100, 0), 1)
  SetGadgetItemColorFast(1, 7, #PB_Gadget_BackColor, RGB(100, 100, 100), 0)
  SetGadgetItemColorFast(1, 7, #PB_Gadget_BackColor, RGB(100, 100, 100), 1)
  SetGadgetItemColorFast(1, 7, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
  SetGadgetItemColorFast(1, 7, #PB_Gadget_FrontColor, RGB(255, 255, 255), 1)
 
;   TreeGadget(1, 10, 10, WindowWidth(0)-20, WindowHeight(0)-20, 0)
;   
;   For a=1 To 50
;     AddGadgetItem(1, -1, "Item " + Str(a), 0, 0)
;     AddGadgetItem(1, -1, "SubItem 1", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 2", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 3", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 4", 0, 1)
;     AddGadgetItem(1, -1, "SubItem 5", 0, 1)
;   Next
;   
;   SetGadgetItemColorFast(1, 1, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
;   SetGadgetItemColorFast(1, 1, #PB_Gadget_BackColor, RGB(255, 0, 0), 0)
;   SetGadgetItemColorFast(1, 3, #PB_Gadget_FrontColor, RGB(255, 255, 255), 0)
;   SetGadgetItemColorFast(1, 3, #PB_Gadget_BackColor, RGB(100, 100, 100), 0)
;   SetGadgetItemColorFast(1, 3, #PB_Gadget_FrontColor, RGB(255, 255, 255), 2)
;   SetGadgetItemColorFast(1, 3, #PB_Gadget_BackColor, RGB(0, 0, 255), 2)
 
EndIf

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 14:39
von Kiffi
RSBasic hat geschrieben:@Kiffi
Auf jeden Fall schneller, aber [...]
ahja, das habe ich schlampigerweise übersehen. Gut, dass Du da aufgepasst hast. :allright:

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 15:58
von Kiffi
kleiner Verbesserungsvorschlag: Die Farbe erst am Schluss hinzufügen (macht den Code kürzer und übersichtlicher).

Code: Alles auswählen

[...]

  ;Unterstützte Gadgets und deren Style-Erstellungen
  Select GadgetType(gadget)
    Case #PB_GadgetType_ListIcon
      If item = -1
        styles = "#" + id + " #" + sb_id + "-header .dgrid-column-" + column
      Else
        styles = "#" + id + " #" + sb_id + "-row-" + item + " .dgrid-column-" + column
      EndIf
    Case #PB_GadgetType_Tree
      item = item + 2
      If column = 0
        styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeRow"
      Else
        styles = "#" + id + " #" + sb_id + " #dijit__TreeNode_" + item + " > .dijitTreeNodeContainer > .dijitTreeNode:nth-child(" + column + ")"
      EndIf
  EndSelect
  
  Select colortype
    Case #PB_Gadget_FrontColor
      styles + " { color: " + hexcolor + "; }"
    Case #PB_Gadget_BackColor
      styles + " { background-color: " + hexcolor + "; }"
  EndSelect

[...]
Grüße ... Peter

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 16:48
von RSBasic
Danke für den Tipp. Ich hab beide (deine und meine Variante) Codes angepasst.

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 15.10.2018 20:57
von RSBasic
Standardmäßig ist das Kontextmenü per Rechtsklick von SpiderBasic deaktiviert. Wenn man das Kontextmenü doch haben möchte, kann man dieses mit folgender Funktion nachträglich aktivieren.

Hauptseite > Browser-Kontextmenü aktivieren oder deaktivieren

Code: Alles auswählen

EnableExplicit

Procedure DisableSiteContextMenu(state)
  If state
    ! $('body').attr("oncontextmenu", "return false;");
  Else
    ! $('body').attr("oncontextmenu", "");
  EndIf
  
EndProcedure

;================================================== Beispielcode ==================================================

If OpenWindow(0, 0, 0, 500, 400, "Window", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ButtonGadget(1, 10, 10, 100, 20, "Button", 0)
  
  DisableSiteContextMenu(0)
  
EndIf

Re: SpiderBasic Library - Liste neuer Funktionen

Verfasst: 16.10.2018 10:16
von dige
RSBasic hat geschrieben:Standardmäßig ist das Kontextmenü per Rechtsklick von SpiderBasic deaktiviert. Wenn man das Kontextmenü doch haben möchte, kann man dieses mit folgender Funktion nachträglich aktivieren.
@RSBasic: you made my day!!! :D das hatte ich schon lange gesucht! Muchas gracias!

Edit: Hast du noch eine Idee, wie man den Text, der bspw. in einem TextGadget angezeigt wird, auswählbar machen kann (zum kopieren usw.)?