Lazarus

Announcements => Third party => Topic started by: mr-highball on April 29, 2020, 03:21:17 am

Title: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on April 29, 2020, 03:21:17 am
Hello friends,

I've been following pas2js development for some time now, but just recently began playing around with it. One thing that I thought I could develop to help the community (as well as learn more  :-[ ) was a UI framework to build web apps.

Also in the spirit of write once compile everywhere, I wanted to be able to use the same framework to build desktop applications using the same code (or as much of it as possible).
I also wanted a way to fluently build interfaces via code, since this plays well with both compilers and has the perk of being very readable when reviewing diffs on commits and having full code completion at your disposal.

nyx is my stab at this,
https://github.com/mr-highball/nyx

Under the hood, it will use the dom for browser elements and lcl for native apps.

In terms of maturity, nyx is an infant, and currently only supports a single element (control), and only minimal testing properties at that (but hey... I've only been working on it for a week). But now that I know things work, I plan to add quite a bit more in the coming days/weeks.


Below is a "hello world" with a single button and a click handler
Code: Pascal  [Select][+][-]
  1. procedure TBrowserTest.BuildUI;
  2. var
  3.   I : Integer;
  4.   LID: String;
  5. begin
  6.   //init the UI
  7.   UI := NewNyxUI;
  8.  
  9.   //setup the ui with the demo ui components
  10.   UI
  11.     .AddContainer(NewNyxContainer, I) //add a container (holds elements)
  12.     .ContainerByIndex(I) //get the container we just added
  13.       .Add( //add a button to it
  14.         NewNyxButton
  15.           .UpdateText('Hello World') //sets our text for the display
  16.           .Observe(boClick, @HelloWorldClick, LID), //attaches a handler to the click event
  17.         I //optional recording of the index the button was added to in the container
  18.       )
  19.     .UI //scope to the UI property in order to call render
  20.     .Render(); //renders all containers and elements to the screen
  21. end;
  22.  

(See attached screenshot for this running in the browser)

Like I said, this is very early stages (and much earlier than I normally would post any demo) but if this interests anyone out there, perhaps you could check it out and provide some feedback.


Title: Re: nyx - a UI framework for the web and desktop apps
Post by: lainz on April 29, 2020, 05:14:22 am
Yes that's how modern tools do cross platform UI like Flutter for example.
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on May 01, 2020, 01:46:17 pm
This will be really use full to create Web GUI App.


Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 01, 2020, 03:40:00 pm
This will be really use full to create Web GUI App.

Thank you :) that is intent. I have to say I've been really impressed with pas2js so far
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on May 01, 2020, 03:46:08 pm
pas2js is great no doubt about it.

But it is not easy to use in Lazarus yet.

Your library can help
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 01, 2020, 04:13:36 pm
pas2js is great no doubt about it.

But it is not easy to use in Lazarus yet.

Your library can help

Will definitely keep everyone posted, I have a good amount of work planned soon
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on May 01, 2020, 04:38:59 pm
Please update wiki if possible:

https://wiki.freepascal.org/pas2js_widgetsets
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 01, 2020, 04:41:37 pm
Please update wiki if possible:

https://wiki.freepascal.org/pas2js_widgetsets

I'll look into it (haven't made a wiki account yet   :-[ )
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: lazdeveloper on May 15, 2020, 04:13:29 am
Great!..
Looking forward for your progress.
Please pay attention to db logic so that can give your library a fast utilisation.
Good luck and thanks for the sharing
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 15, 2020, 04:51:09 am
Thanks @lazdeveloper, as for "db logic" do you have some examples on what you would like to see?
It would give me a better idea on where it might fit into the framework.
(Ie. Hook into dataset events, map fields etc...)
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: lazdeveloper on May 20, 2020, 12:11:01 am
Many thanks for your interest. Sorry being late in my reply.
I just at this stage think that many websites are db connected to do some business for clients.
So building a website in my opinion has three basic elements
1. Responsive Design UI
2. Responsive actions on each element I.e. AJAX
3. CRUD db functions.
Now for responsive UI its something similar to bootstrap.
For responsive elements say it can handle a connection to a server something like when you type a new ID on an Edit, then it tells that the ID is avaliable or not without the need to submit.
Finally, function to create, insert, update and delete for a db should be handled.

However it may be better for the focus to be on the first element.
Then the others can be fit well on a separate units of the framework.

I may be too general on my thoughts. But if to be more specific. I can think of using your nice library to build a website to do
Login and logout
View a table records say mysql table since it is so common DBMS for many hosting companies.
Then ofcourse to be able to work on data such as new insertion or update.

I will be more than happy if you may like a further points. So please do let me know.

All the best for your nice projects and for you.




Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 20, 2020, 02:08:50 am
Thanks @lazdeveloper, I'll have to think about how / where db and api connectivity would fit into the library. Initially my thoughts on your points would be to make an easy way to consume REST apis of all flavors so perhaps a way to bind them to properties.
I'll need some to think on this but for your reference, I've added an issue in the repo where I can address this (and discuss if others are interested)

https://github.com/mr-highball/nyx/issues/3
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: lazdeveloper on May 21, 2020, 01:53:32 am
Cheers!
Many thanks for your interest. I will keep an eye on your progress as I am very interested.
The important thing here is that your library is open source which allows contributions and rapid enhancements hopefully.

May I ask you please to provide an updated list of functionalities as relevant to your progress.
I also thinks it may be usefull to let this project as popular as possible so that it can attracts contributors?
One possible thing is to let    https://www.blaisepascalmagazine.eu/   (https://www.blaisepascalmagazine.eu/) know about the library. I have seen them very interested in TMSwebcore components.

My best wishes..
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 21, 2020, 03:51:29 am
Thanks again for the interest. One of the best way to get some attention would be to star the repo to show others that it has some value (and give me some motivation to put some time towards it   :-[ )

I'll be sure to update this post as progress is made and will try to make a wiki entry under the pas2js widget set topic once I'm further along. The magazine is a good idea, I just know I'm a lot farther behind than I normally would even tell anyone about (just thought it was kind of a cool thing to be able to do with pascal)
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: lazdeveloper on May 22, 2020, 02:26:48 am
That's  good at the moment.
But you are doing something cool and at the beginning  of every project we all think it is something small. Well later on it may grows up into something gaint!
Looking forward for your progress.
All the best
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: PeterEvans on May 22, 2020, 12:01:56 pm
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?
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on May 22, 2020, 05:00:10 pm
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.
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 22, 2020, 03:15:53 am
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

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
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 22, 2020, 09:59:52 pm
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.





Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 22, 2020, 11:52:18 pm
@heejit, nyx will also allow you to do so. The basic concepts are

Hybrid controls can be easily built via joining all these together (like combining a label with a text box etc...)
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 24, 2020, 11:14:03 pm
That is good very nice
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 24, 2020, 11:27:30 pm
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"
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 24, 2020, 11:50:51 pm
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)
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 26, 2020, 12:28:06 am
I can compile test pas2js project but your project is not opening properly  is not showing any project files.

Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 26, 2020, 04:51:13 am
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?
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 26, 2020, 09:59:45 pm
Version Info:

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




Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 26, 2020, 10:49:53 pm
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
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 26, 2020, 11:33:51 pm
Also noting I've made an issue for discussion on this here,
https://github.com/mr-highball/nyx/issues/16
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 27, 2020, 11:00:55 am
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.  

Title: Re: nyx - a UI framework for the web and desktop apps
Post by: PascalDragon on June 27, 2020, 03:29:32 pm
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).
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 27, 2020, 03:51:10 pm
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).

Ahhh thanks @Pascaldragon, I was not aware of the compatibility option. I normally develop with trunk (or closest to the newest) and haven't ever toggled that on.
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on June 27, 2020, 04:20:42 pm
the compat option has been toggled on and pushed up here,
https://github.com/mr-highball/nyx/issues/16

users other than trunk can now open the project file. This will be by new default for other project, never knew about it  :-[
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: heejit on June 27, 2020, 09:58:11 pm
Yes it is ok now.
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on August 08, 2020, 09:10:04 pm
quick update, all major types of layout code for the browser have been finished, which will allow me to go into "element creation mode" (ui components like grids, edits, etc...). here's a summary of how the layouts work,

the browser test project in the repo has been a place for me to hack around while writing this stuff, but once I add more controls/containers I will be cleaning this up and will be adding demos (shopping list, fish facts, etc...). until then though, the tester does show all things implemented up to this point.

project board,
https://github.com/mr-highball/nyx/projects/1
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on September 07, 2020, 11:57:52 pm
here's another project update.
I've made a few more elements and a demo showcasing how one might use nyx to build web apps. I'm still in the early stages, but hopefully it will give a better idea of what can be done (more so than just the buttons I've posted prior). with 3 elements (button, checkbox, input) I've put together a simple todo list demo found here,
https://github.com/mr-highball/nyx/tree/master/demos/browser/todo-list

attached is also a gif showing it working in the browser. It's not perfect, but like I said before, things will improve as development continues and this should give a good idea of the core concepts of nyx (layouts, fluent setters, event/property observation).
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: Leledumbo on September 08, 2020, 10:12:44 pm
Starred. Hope it gets to a somewhat usable quality soon.
Title: Re: nyx - a UI framework for the web and desktop apps
Post by: mr-highball on September 09, 2020, 12:14:50 am
Starred. Hope it gets to a somewhat usable quality soon.
Thanks! I'm getting closer for sure now that a lot of the core stuff is done (for browser anyway, desktop code will come next)
TinyPortal © 2005-2018