Recent

Author Topic: nyx - a UI framework for the web and desktop apps  (Read 6151 times)

mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
nyx - a UI framework for the web and desktop apps
« 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.



lainz

  • Hero Member
  • *****
  • Posts: 3807
  • Leandro Diaz
Re: nyx - a UI framework for the web and desktop apps
« Reply #1 on: April 29, 2020, 05:14:22 am »
Yes that's how modern tools do cross platform UI like Flutter for example.
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

heejit

  • Full Member
  • ***
  • Posts: 245
Re: nyx - a UI framework for the web and desktop apps
« Reply #2 on: May 01, 2020, 01:46:17 pm »
This will be really use full to create Web GUI App.



mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
Re: nyx - a UI framework for the web and desktop apps
« Reply #3 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

heejit

  • Full Member
  • ***
  • Posts: 245
Re: nyx - a UI framework for the web and desktop apps
« Reply #4 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

mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
Re: nyx - a UI framework for the web and desktop apps
« Reply #5 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

heejit

  • Full Member
  • ***
  • Posts: 245
Re: nyx - a UI framework for the web and desktop apps
« Reply #6 on: May 01, 2020, 04:38:59 pm »
Please update wiki if possible:

https://wiki.freepascal.org/pas2js_widgetsets

mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
Re: nyx - a UI framework for the web and desktop apps
« Reply #7 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   :-[ )

lazdeveloper

  • Jr. Member
  • **
  • Posts: 61
Re: nyx - a UI framework for the web and desktop apps
« Reply #8 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

mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
Re: nyx - a UI framework for the web and desktop apps
« Reply #9 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...)

lazdeveloper

  • Jr. Member
  • **
  • Posts: 61
Re: nyx - a UI framework for the web and desktop apps
« Reply #10 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.





mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
Re: nyx - a UI framework for the web and desktop apps
« Reply #11 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

lazdeveloper

  • Jr. Member
  • **
  • Posts: 61
Re: nyx - a UI framework for the web and desktop apps
« Reply #12 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/  know about the library. I have seen them very interested in TMSwebcore components.

My best wishes..

mr-highball

  • Full Member
  • ***
  • Posts: 214
    • Highball Github
Re: nyx - a UI framework for the web and desktop apps
« Reply #13 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)
« Last Edit: May 21, 2020, 03:53:15 am by mr-highball »

lazdeveloper

  • Jr. Member
  • **
  • Posts: 61
Re: nyx - a UI framework for the web and desktop apps
« Reply #14 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

 

TinyPortal © 2005-2018