nyx - a UI framework for the web and desktop apps

[PeterEvans]

You have embarked on a mammoth task. What is your vision for this package?

I am sure that you know that the client should not access databases but that is done at the server end?

Perhaps you can use mORMot?
Perhaps you can use Zeos for database access?

[mr-highball]

Ultimately I want a framework that I can build UI in code that is easy to read and use. I also wanted as much of it to be "write once compile everywhere... Including the browser". The way I plan to achieve this is by wrapping as much existing code as possible, while providing an interface that works regardless of target. There will still be the ability to cast or use browser specific code or desktop specific where required, but for the most part, web app UI code should look identical to desktop.

Also to the previous point of a data binding, that will come later but I see it as more of a "contract" layer which would be setup to bind certain response fields of a REST call (or column of a dataset) to properties of a nyx element. This part still needs some thought (which is why I made the github issue for placeholder)

It is a pretty big task, but I don't believe it will take me too much longer to have something useful soon.

[mr-highball]

Sorry for the lack of progress... got sidetracked 

Anyways, have dived back into the weeds of developing nyx fulltime (well, my fulltime open source project...) and wanted to share a quick update.
The past couple of days I've been busy implementing the positioning system for all elements in a UI. This will be performed by a number of "layout" interfaces. The one I finished recently uses fixed units, but the way things are implemented multiple types of layouts can be used in tandem to built a full application, some being

• proportional
• relational

also, I've been keeping tracking progress through git issues / project managment, so anyone interested can check things out here,
https://github.com/mr-highball/nyx/projects/1

to demonstrate how layouts can be used I made a simple example where a button will "run" to the right direction for every click (dynamic positioning),

Code: Pascal  [Select][+][-]

1. procedure TBrowserTest.RunningButtonClick(const AButton: INyxElementButton;
2.   const AEvent: TButtonObserveEvent);
3. var
4.   LLayout: INyxLayoutFixed;
5.   LBounds: INyxFixedBounds;
6.  
7. const
8.   BUTTON_TEXT : array[0 .. 4] of String = (
9.     'oh no! please stop',
10.     'yikes!',
11.     'I''m warning you, stop!',
12.     'That hurt!',
13.     'be gentle senpai <3'
14.   );
15. begin
16.   //using the UI we fetch the fixed layout (this assumes it's in the first index)
17.   LLayout := UI.LayoutByIndex(0) as INyxLayoutFixed;
18.  
19.   //we also assume our button was properly added to the layout (which it was)
20.   //in order to obtain the bounds for the button
21.   LBounds := LLayout.Bounds[AButton];
22.  
23.   //lastly we'll increment the left position to make the button look
24.   //like it's running away from the user clicking it
25.   LBounds.UpdateLeft(LBounds.Left + 50);
26.  
27.   //now for some fun, just update the text of the button
28.   AButton.UpdateText(BUTTON_TEXT[RandomRange(0, 4)]);
29.  
30.   //lastly we need to render the UI for changes on the layout to take place
31.   UI.Render;
32. end;
33.  

below is a gif demonstrating the sample in the browser, but it can be compiled on your side by simply pulling down the repo and running the tester browser application (make sure pas2js is installed)
https://github.com/mr-highball/nyx/blob/master/test/nyx_browser_test.lpr

[heejit]

I don't know if this help.

I am using PyQt there widget layout system is nice
they have different type of layout which you can use and even allow you to
add layout into another layout and you mix all the layout into
one main layout and create user interface all in your code only.

[mr-highball]

@heejit, nyx will also allow you to do so. The basic concepts are

• Elements - (user controls like buttons
• containers - (holds elements like scroll box, tabbed container etc...)
• layouts - (position elements inside of containers)
• ui - (top level interface for holding all other elements, containers, layouts)

Hybrid controls can be easily built via joining all these together (like combining a label with a text box etc...)

[heejit]

That is good very nice

[heejit]

I downloaded your repository.

Opening project nyx_test.lpr or nyx_browser_test.lpr
dont show any file in project inspector
and attempted to compile show error "the project has no main source file"

[mr-highball]

The browser_test is the project I'm mainly working in right now and I haven't put any instructions in the readme on github yet (I will once the project evolves more) but make sure you've first installed pas2js and the pas2js design package for lazarus, then you should be able to open the project and compile. Also one thing to note, you'll have to do a compile, not a "run" since the html file needs to be opened in a browser to do anything.
https://wiki.freepascal.org/pas2js#Where_to_get_it

If youve done all that and can compile a blank pas2js browser project but still can't compile the test, then there may be something like a OS difference (I've been running on Windows)

[heejit]

I can compile test pas2js project but your project is not opening properly  is not showing any project files.

[mr-highball]

I can compile test pas2js project but your project is not opening properly  is not showing any project files.

Hmm... That's odd. I use trunk lazarus / fpc when developing, not sure if that might be a difference...? Could you post a screenshot of what you're seeing and what OS you're running?

[heejit]

Version Info:

Lazarus : 2.0.8
FPC : 3.2.0
OS : Xubuntu 20.04 64 bit

[mr-highball]

From your screenshot it looks like you opened the standard test project (which I won't be gettting to until later) but I also see you've tried the browser test project file here,
https://github.com/mr-highball/nyx/blob/master/test/nyx_browser_test.lpr

I'm really not sure why things wouldnt even be opening though... All files in the src directory should be showing. When I get a chance I'll see about setting up a linux vm to test with. One thing that might give some more details would be opening up the event log prior to opening the project, then opening nyx_browser_test and post (if anything) looks out of the ordinary

[mr-highball]

Also noting I've made an issue for discussion on this here,
https://github.com/mr-highball/nyx/issues/16

[heejit]

I checked the project .lpi file and compare with my test pas2js project

The diff i found between Units elements your project dont have the numbers in elements but my project has numbers in it
and adding number in your project lpi file open up the project may be Lazarus version difference

Your Project:

Code: Pascal  [Select][+][-]

1. <Units>
2.       <Unit>
3.         <Filename Value="nyx_browser_test.lpr"/>
4.         <IsPartOfProject Value="True"/>
5.       </Unit>
6.       <Unit>
7.         <Filename Value="nyx_browser_test.html"/>
8.         <IsPartOfProject Value="True"/>
9.         <CustomData Count="1">
10.           <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
11.         </CustomData>
12.       </Unit>
13.     </Units>
14.  

My Project:

Code: Pascal  [Select][+][-]

1.     <Units Count="2">
2.       <Unit0>
3.         <Filename Value="project1.lpr"/>
4.         <IsPartOfProject Value="True"/>
5.       </Unit0>
6.       <Unit1>
7.         <Filename Value="project1.html"/>
8.         <IsPartOfProject Value="True"/>
9.         <CustomData Count="1">
10.           <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
11.         </CustomData>
12.       </Unit1>
13.  

[PascalDragon]

I checked the project .lpi file and compare with my test pas2js project

The diff i found between Units elements your project dont have the numbers in elements but my project has numbers in it
and adding number in your project lpi file open up the project may be Lazarus version difference

In that case mr-highball is using Lazarus 2.1 without having enabled the compatibility option for his project. So either you use 2.1 as well or mr-highball needs to enable the compatiblity option (it's in the project settings).