SpiderBasic Library - Liste neuer Funktionen

Hier könnt ihr alle Fragen zu SpiderBasic austauschen.
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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.
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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
Hygge
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von Kiffi »

RSBasic hat geschrieben:@Kiffi
Auf jeden Fall schneller, aber [...]
ahja, das habe ich schlampigerweise übersehen. Gut, dass Du da aufgepasst hast. :allright:
Hygge
Benutzeravatar
Kiffi
Beiträge: 10621
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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
Hygge
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag von RSBasic »

Danke für den Tipp. Ich hab beide (deine und meine Variante) Codes angepasst.
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
RSBasic
Admin
Beiträge: 8022
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Benutzeravatar
dige
Beiträge: 1182
Registriert: 08.09.2004 08:53

Re: SpiderBasic Library - Liste neuer Funktionen

Beitrag 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.)?
Zuletzt geändert von dige am 16.10.2018 10:20, insgesamt 1-mal geändert.
"Papa, mein Wecker funktioniert nicht! Der weckert immer zu früh."
Antworten