TunimEdit and TUnimLabel

[RobYost]

Some of style commands don't work for me.  Am I doing something wrong or is there a problem

 

 

//TUnimLabel

WORKS

  s := ' document.getElementById("' + mUniRyLabel1.JSName + '_id").style.border = "3px solid red"; ';
  UniSession.AddJS(s);

 

WORKS

  s := ' document.getElementById("' + mUniRyLabel1.JSName + '_id").style.color = "red"; ';
  UniSession.AddJS(s);

DOESN"T WORK - But I can make it work by adding  "Property Font" to a TUnimLabel descendant

  s := ' document.getElementById("' + mUniRyLabel1.JSName + '_id").style.fontfamily = "Cambria"; ';
  UniSession.AddJS(s);

----------------------------------------------------------------------------------------------------------------------------------------------

 

//TUnimEdit

 

 

 

WORKS

  s := ' document.getElementById("' + edt1.JSName + '_id").style.border = "3px solid green"; ';
  UniSession.AddJS(s);

 

DOESN"T WORK

  s := ' document.getElementById("' + edt1.JSName + '_id").style.fontsize = "10px"; ';
  UniSession.AddJS(s);

 

DOESN"T WORK  - Can NOT make it work by adding  "Property Font" to a TUnimEdit descendant (which does work with TUnimLabel)

  s := ' document.getElementById("' + edt1.JSName + '_id").style.fontfamily = "Cambria"; ';
  UniSession.AddJS(s);

 

DOESN"T WORK

  s := ' document.getElementById("' + edt1.JSName + '_id").style.color = "green"; ';
  UniSession.AddJS(s);

 

[Sherzod]

Hi,

 

At the moment you can not change some CSS properties I think,
because they are managed by class styles.

 

Please make a simple testcase, we will try to analyze.

 

Best regards,

[Sherzod]

For unimEdit you can use inputCls config

[Sherzod]

for example:

 

1. UniServerModule -> CustomCSS:

._input {
    font-size: 10px;
    font-family: Cambria;
    color: green;
}

2. UnimEdit -> ClientEvents -> ...

function beforeInit(sender, config)
{
    config.inputCls="_input";
}

[Sherzod]

for Height, you can try this:

 

1. UniServerModule -> CustomCSS:

._x-field {
    min-height: auto;
}

2. UnimEdit -> ClientEvents -> ...

function beforeInit(sender, config)
{
    config.cls = "_x-field";
}

As a result:

 

1. UniServerModule -> CustomCSS:

._input {
    font-size: 10px;
    font-family: Cambria;
    color: green;
}

._x-field {
    min-height: auto;
}

2. UnimEdit -> ClientEvents -> ...

function beforeInit(sender, config)
{
    config.inputCls="_input";
    config.cls = "_x-field";
}

Try...

 

Best regards,

[RobYost]

Is it possible to add the clientevent code in my Delphi code?  I would like to not have to put this information in every edit field, I would like to call a function that loops through all components.

 

But thank you I will try your suggestions.

 

I don't see how to attach so I am just putting in the source code.

 

unit Mainm;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, uniGUIFont,
  Controls, Forms, uniGUITypes, uniGUIAbstractClasses,
  uniGUIClasses, uniGUImClasses, uniGUIRegClasses, uniGUIForm, uniGUImForm, uniGUImJSForm, uniEdit, unimEdit, uniGUIBaseClasses, uniLabel,
  unimLabel, unimPanel;

type
  TmUniXLabel = class(TUnimLabel)
  published
    property Font;
  end;

  TmUniXEdit = class(TUnimEdit)
  published
    property Font;
  end;

  TMainmForm = class(TUnimForm)
    lbl1: TUnimLabel;
    edt1: TUnimEdit;
    pnl1: TUnimPanel;
    procedure UnimFormShow(Sender: TObject);
    procedure UnimFormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    xLabel: TmUniXLabel;
    xEdit : TmUniXEdit;
  end;

function MainmForm: TMainmForm;

implementation

{$R *.dfm}

uses
  uniGUIVars, MainModule, uniGUIApplication;

function MainmForm: TMainmForm;
begin
  Result := TMainmForm(UniMainModule.GetFormInstance(TMainmForm));
end;

procedure TMainmForm.UnimFormCreate(Sender: TObject);
begin
  xLabel := TmUniXLabel.Create(self);

  xLabel.Parent  := pnl1;
  xLabel.Top     := 0;
  xLabel.Left    := 0;
  xLabel.Width   := 100;
  xLabel.Caption := 'xLabel';

  xLabel.Font.Size  := 9;                          //works
  xLabel.Font.Style := [fsBold];                   //works
  xLabel.Font.Color := clGreen;                    //works
  xLabel.Font.Name := 'Comic Sans MS';             //works

  xEdit := TmUniXEdit.Create(self);

  xEdit.Parent := pnl1;
  xEdit.Top    := 50;
  xEdit.Left   := 0;
  xEdit.Width  := 100;
  xEdit.Text   := 'xEdit';

  xEdit.Font.Size  := 9;                              // Not works
  xEdit.Font.Style := [fsBold];                       // Not works
  xEdit.Font.Color := clGreen;                        // Not works
  xEdit.Font.Name := 'Comic Sans MS';                 // Not works

end;

procedure TMainmForm.UnimFormShow(Sender: TObject);
var
  s: String;
begin
  // ==========================================================================================
  //  TUnimLabel
  // ==========================================================================================
  s := ' document.getElementById("' + lbl1.JSName + '_id").style.border = "3px solid red"; ';        //works
  UniSession.AddJS(s);

  s := ' document.getElementById("' + lbl1.JSName + '_id").style.fontsize = "8px"; ';                //works
  UniSession.AddJS(s);

  s := ' document.getElementById("' + lbl1.JSName + '_id").style.color = "green"; ';                //works
  UniSession.AddJS(s);

  s := ' document.getElementById("' + lbl1.JSName + '_id").style.fontfamily = "Cambria"; ';         // Not works
  UniSession.AddJS(s);

  // ==========================================================================================
  //  TUnimEdit
  // ==========================================================================================
  s := ' document.getElementById("' + edt1.JSName + '_id").style.border = "3px solid red"; ';       //works
  UniSession.AddJS(s);

  s := ' document.getElementById("' + edt1.JSName + '_id").style.fontsize = "8px"; ';               // Not works
  UniSession.AddJS(s);

  s := ' document.getElementById("' + edt1.JSName + '_id").style.fontfamily = "Cambria"; ';         // Not works
  UniSession.AddJS(s);

  s := ' document.getElementById("' + edt1.JSName + '_id").style.color = "green"; ';                // Not works
  UniSession.AddJS(s);
end;

initialization

RegisterAppFormClass(TMainmForm);

end.

object MainmForm: TMainmForm
  Left = 0
  Top = 0
  ClientHeight = 480
  ClientWidth = 320
  Caption = 'MainmForm'
  OnShow = UnimFormShow
  TitleButtons = <>
  OnCreate = UnimFormCreate
  PixelsPerInch = 96
  TextHeight = 13
  ScrollPosition = 0
  ScrollHeight = 47
  PlatformData = {}
  object lbl1: TUnimLabel
    Left = 72
    Top = 33
    Width = 85
    Height = 23
    Hint = ''
    AutoSize = False
    Caption = 'lbl1'
  end
  object edt1: TUnimEdit
    Left = 72
    Top = 77
    Width = 154
    Height = 47
    Hint = ''
    Text = 'edt1'
  end
  object pnl1: TUnimPanel
    Left = 24
    Top = 192
    Width = 256
    Height = 128
    Hint = ''
  end
end

[Sherzod]

Hi,

 

You can add the above CSS and for your created component add a few configurations:

  with TUnimEdit.Create(Self), JSInterface do
  begin
    Parent := Self;
    Left := 10;
    Top := 60;
    Name := '_UnimEdit1';
    JSConfig('inputCls', ['_input']);
    JSConfig('cls', ['_x-field']);
  end;

[RobYost]

Thank you, I got that working and have started a new control to use it. I will share it when I am done.

 

Here is what I have so far:   https://unigui.miraheze.org/wiki/Main_Page  (it is not done)

 

I am trying to add border-width and border-color.  Is there any documentation that shows how to use JSConfig.

 

When I look at https://www.w3schools.com  to look at how to format JS I see that examples like:

document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";

 

 

But in CustomCSS I need to use font-family. So is there somewhere where I can see what the expected input for a CSS? Not just for font-family.

 

For example JSConfig('inputCls', [something]);  

this works for TUnimEdit but not for TUnimLabel.  It makes sense label is not an input class, but what is it?  It tried: JSConfig('text', [something]); but that didn't work, and I don;t know how to look it up

 

ALSO.

 

in JSConfig your example for the first parameter is 'inpoutCls' and 'cls'  what is the difference and there seems to more options, where can I look up what I can use for the first parameter?  What parameter goes with border-width and border-color?

[Sherzod]

Hi,

 

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Label

http://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Text