Jump to content

jarto

Administrators
  • Content Count

    522
  • Joined

  • Last visited

  • Days Won

    79

Everything posted by jarto

  1. jarto

    UI layout

    ' Working on this now. Align in the RTL is at pretty good shape already.
  2. The Development-channel in SmartUpdate contains all the latest changes in Smart Mobile Studio. It's a good channel to follow for those who want all the new features and bug fixes right away, instead of waiting for the next formal release. To follow the Development-channel: Make a new folder and add: SmartUpdate.exe Your own user.lic from your current Smart Mobile Studio folder. To get all the latest changes in the Development-channel: Run: SmartUpdate /changechannel /showhidden When asked for which channel to follow, choose Development The purpose of this topic is to inform about all the new features and fixes.
  3. jarto

    css styling

    @lynkfs I like it a lot!
  4. jarto

    Sorting arrays and lists

    This is a tutorial for sorting arrays and lists in Smart Mobile Studio. String arrays and TStringList are pretty easy to sort. You only need to call Sort: var strarr: array of String; ... strarr.Sort; var strlist: TStringList; strlist:=TStringList.Create; ... strlist.Sort; But how do you sort arrays of records or arrays of classes? For example: TSortData = record Id: Integer; Data: String; end; You can't simply call Sort as your application does not know how you want to sort the records. You solve this by using a comparison function: function CompareSortData(Item1, Item2: TSortData): Integer; begin result:=CompareStr(Item1.Data, Item2.Data); end; . . . var objarr: array of TSortData; ... objarr.Sort(@CompareSortData); The comparison function should return a negative number if Item1 is smaller, positive number if Item1 is bigger and 0 if they are equal. In Smart Mobile Studio you can also use anonymous methods: var objarr: array of TSortData; ... objarr.Sort( function(Item1, Item2: TSortData): Integer begin result:=CompareStr(Item1.Data,Item2.Data); end); Comparison functions can also be used for TList and even for TStringList. For example, you may want to have greater control over how names are sorted (eliminating prefixes like von): function EliminatePrefix(Name: String): String; const Prefixes: array[0..1] of String = ['von ','af ']; begin result:=Name; for var a:=0 to High(Prefixes) do begin if pos(Prefixes[a],result)=1 then begin Delete(result,1,Length(Prefixes[a])); exit; end; end; end; . . . var StrList:=TStringList.Create; StrList.Add('Perry'); StrList.Add('Miller'); StrList.Add('von Essen'); StrList.Add('Stockton'); StrList.Add('af Trolle'); StrList.Sort( function(Name1,Name2: String): Integer begin result:=CompareStr(EliminatePrefix(Name1),EliminatePrefix(Name2)); end); for var a:=0 to StrList.Count-1 do WriteLn(StrList[a]);
  5. jarto

    css styling

    @lynkfs This is very interesting. The challenge would be to make it easy to use.
  6. A new update is available in the development-channel of SmartUpdate. It contains a completely new Grid: TW3StringGrid. It's a completely new design, which was made to be very fast and able to handle lots of data. This is achieved through dynamic drawing: Only the visible grid lines are rendered. There is a new StringGrid-demo in the Featured Demos. It downloads a json file and populates the grid with data from it. TW3StringGrid supports six different column types: Text (column class TW3StringGridTextColumn) Numeric (column class TW3StringGridNumericColumn) EditBox (column class TW3StringGridEditColumn) ComboBox (column class TW3StringGridComboColumn) Checkmark (column class TW3StringGridCheckmarkColumn) Button (column class TW3StringGridButtonColumn) Columns are created by calling: MyNewColumn:=Grid.AddColumn(ColumnClass); If no ColumnClass is given, a Text column is created. Column properties: Caption Width BorderType Default is btLightBorderRight. Set to btNone if you don't want any vertical borders. Backgroundtype Default is btNone to let the line color through. AlignText (The same way as in TW3Label) taLeft (default) taCenter taRight SelectOptions (for TW3StringGridComboColumn only) This is an array of selectable values. First value (index 0) is the value for no selection. For example: SelectOptions:=['','First','Second','Third']; RowBorderType: Default is btLightBorderBottom. Set to btNone if you don't want any horizontal borders. RowBackgroundType: Default is bsListItemBackground. Set to bsDecorativeListItemBackground (or test other backgrounds) to change the background style for even rows. RowOddBorderType: Default is btLightBorderBottom. Set to btNone if you don't want any horizontal borders. Affects odd rows. RowOddBackgroundType: Default is bsListItemBackground. Set to bsDecorativeListItemBackground (or test other backgrounds) to change the background style for odd rows. Grid properties: RowCount: Set number of rows to show FixedColumns: How many columns should be fixed (aka not scrollable horizontally) LineHeight MultiSelect Events: OnCellClick: Is triggered when the row is clicked. OnCellChanged: Is triggered when cell content changes through editing (for example: through editing) Methods: InvalidateGrid: Triggers a repaint of the grid. Sort Sorting TW3StringGrid supports sorting based on one of multiple columns. Clicking on the column headers sets or reverses sort order. You can also control sorting in code: procedure AddSortColumn(Index: Integer; SortOrder: TW3SortOrder = soNormal); overload; procedure AddSortColumn(Col: TW3StringGridColumn; SortOrder: TW3SortOrder = soNormal); overload; procedure SetSortColumn(Index: Integer; SortOrder: TW3SortOrder = soNormal); overload; procedure SetSortColumn(Col: TW3StringGridColumn; SortOrder: TW3SortOrder = soNormal); overload; procedure ToggleSortColumn(Index: Integer); For example: Grid.SortOptions.AddSortColumn(3,soReverse); //Set primary sort column Grid.SortOptions.AddSortColumn(1); //Add secondary sort columns Grid.Sort; Working with sorted data When the Grid is sorted, it only affects how data is shown. Sorting does not change Grid data itself at all. When you work with a sorted grid events and indexes (for example SelectedIndex) always refer to the index in the grid data itself and NOT the visible line number. TW3StringGrid uses these events: TW3StringGridColumnEvent = procedure(const Sender: TW3StringGridColumn; const Row: Integer); TW3StringGridEvent = procedure(const Sender: TObject; const Row, Col: Integer); If you have a Grid where "Australia" is on line 2, SelectedIndex:=2 selects that row regardless of how the grid is sorted. Clicking on that row or changing data on that row also returns Row=2 regardless of how the grid is sorted.
  7. jarto

    TW3StringGrid is available

    I just updated the first post here with new events, column classes and sort documentation.
  8. jarto

    Development updates

    A new update is available. RTL: Improvements to TW3StringGrid: New column types: TW3StringGridNumericColumn TW3StringGridButtonColumn Added sorting New event: OnCellChanged TStringList and TObjectList: Add Sort() with CompareFunction. Fix CSS browser prefix for Firefox Themes: Use normal size and style text in buttons.
  9. jarto

    layout, wordwrap and label nightmare

    Update: I've been running some tests. It's a bit dangerous to dynamically increase the label height when AutoSize is false. In the meantime, maybe you should try simply using a TW3DivHtmlElement where you do not specify height at all? You need to create the control in code and then set InnerText (or InnerHtml if you want to use html tags). When no height is set, the browser automatically resizes the height according to the content.
  10. jarto

    RoadMap 2019

    Well, I believe that open sourcing is not a silver bullet that will magically bring new resources to the project. If there are people who are interested in participating, I'll be more than happy to actually offer them contract work. Before I joined this project, SMS was in an eternal "coming soon" -stage. A new update was just around the corner but days turned into weeks and weeks to months and years. I didn't like that as a customer. So when I've been running this development, I've not wanted to make promises that I can't keep. Before this my family owned and ran a very succesfull software company that developed the best and most used School Administration software in Finland. We did constant development making new features. We used constant evolution. I've been doing that same thing with Smart Mobile Studio and we really have seen a lot of development and improvements. And we will see constant and good development in the future too. When it comes to a roadmap, I've noticed that I'm really bad at making one. A software project is a moving target. A lot of features are being worked on. In the end, it's not clear when a feature will be finished and delivered. That's because priorities do change and sometimes (for example the new Grid) technology throws us a hard challenge that takes a very long time to solve. At the moment our top priorities are: Improve documentation, tutorials, demos. Update internal browser to a newer version of Chromium. Upgrade compiler to use a newer version of DWScript. Improve IDE (Designer, Wizards) On top of that we keep a keen eye on the needs and requests of our users and add new features/components to the RTL based on that. @Czar Thanks for the tip about the events related bug in the IDE. I was able to reproduce it. There are restrictions on what the IDE can do at the moment. And some restrictions actually depend on what's the best way of developing for the browser. For example, it's a lot better to have fonts and font sizes in CSS instead of setting them in the Object Inspector. @IElite Let me know what you want to see regarding mobile devices.
  11. jarto

    Font size and style in buttons

    I'd like to open up a little discussion about font sizes. Specifically, the font size in buttons, which to my eyes looks too big and bulky compared to all other text: Suggestion 1: Decrease font size: Suggestion 2: Decrease font size, remove bold and text shadow, black text: Which one do you guys like most?
  12. jarto

    Font size and style in buttons

    When Lennart had his latest competition, I suggested also adding a category for Themes. I'd love to for example have a theme that looks like Windows Metro.
  13. jarto

    layout, wordwrap and label nightmare

    Controls currently have no information about how they are resized or moved. They don't know that the layout is controlling it. It is possible to add a flag for that if it is beneficial. However, in this case I believe that it's easiest to just change how Autosize works: AutoSize True Resize width based on content. Resizing happens before WordWrap. Resize height based on content. AutoSize False Width comes from the control itself. Layout sets it in this example we've been handling. If WordWrap True, content is split into lines. If height is too small, it's increased.
  14. jarto

    layout, wordwrap and label nightmare

    All right, you seem to have both AutoSize and WordWrap on in the top label. So basically, we have a conflict situation: The layout should resize the label width according to the form size but you also want the label width to match the caption. Reading TW3Label code, SetWidth and SetHeight are ignored if AutoSize is true, so basically the layout does not get to set the label size at all and the width is only determined by the content. The second label has AutoSize off, which explains why it's not being resized. Now, I wonder how this should be tackled. Is this what should happen in this particular case: Layout sets label width Text is wrapped Label height is AutoSized (but not label width)
  15. jarto

    layout, wordwrap and label nightmare

    I was travelling, so didn't get to have a look right away. Gonna take a good look at this today.
  16. jarto

    layout, wordwrap and label nightmare

    @Czar if you can update the zip file, I'll certainly take a look. If there are issues with TW3Label, I'll certainly want to fix them as SimpleLabel is an inferior control.
  17. jarto

    vendor prefix

    Thank you. I'll include this in the next update
  18. jarto

    TW3StringGrid is available

    Sure, I can add a Button column type too. Also OnCellChanged will be added in the next update. I've also been working on sorting. As the data is dynamically drawn, it's actually surprisingly easy to add. The trickiest is just to decide how the sorting interface should be done (properties etc.) so that I don't unnecessarily restrict future features. For example, in many Delphi grids there are quite detailed possibilities to control sorting.
  19. jarto

    Development updates

    A new update is available. This one contains a completely new Grid: TW3StringGrid. It's a completely new design, which was made to be very fast and able to handle lots of data. This is achieved through dynamic drawing: Only the visible grid lines are rendered. There is a new StringGrid-demo in the Featured Demos. It downloads a json file and populates the grid with data from it. RTL: New control: TW3StringGrid New featured demo for the StringGrid. New TW3CustomScrollControl, for developing scroll controls with scrollbars/indicators-support. New border types: btLightBorderTop, -Bottom, -Left, -Right, -Horiz and -Vert EventManager: Check TouchPreventDefault before trying to prevent extra artificial mouse events from touch events Improvements to TW3BlockBox and Modal dialogs: TW3BlockBox did not trigger a resize Dialogs did not get resized when window was resized or device flipped Make sure the dialogs are not too big
  20. jarto

    restrict width of page?

    Yes, because left is changed to 0 when the form is shown.
  21. jarto

    UI layout

    Yes, we need anchors and aligns. Now that I'm about to get TW3StringGrid finished, I'll have a look at Anchors and Align.
  22. jarto

    restrict width of page?

    Set something like this in InitializeForm: Handle.style['max-width'] := '500px'; //Whatever you want your limit to be Handle.style['left'] := '50%'; Handle.style['transform'] := 'translateX(-50%)'; Then it's only a matter of setting the style and color of TW3DisplayView to something nice.
  23. jarto

    How to resize a modal dialog

    Got it. TW3BlockBox was using 100% as width and height. It's a nice trick but that also prevents javascript from triggering resizes.
  24. jarto

    How to resize a modal dialog

    Thanks. Gonna have a look.
×