Announcement

Collapse
No announcement yet.

ExpressCraft - UI Framework

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • samuelgrahame
    started a topic ExpressCraft - UI Framework

    ExpressCraft - UI Framework

    ClassicForms

    https://github.com/samuelGrahame/ClassicForms

    Support's WinForm's Designer.
    Support's Dock and Anchoring control's
    Support's Custom Styles via the Tag Property - etc Bootstrap button would have a tag like this: btn btn-primary
    Support's basic control's like: Button, Label, LinkedLabel, RadioGroup, CheckEdit, ComboBox, GroupBox, TabControl and Panel - Patial Support for the DataGridView - needs some work.

    Currently Targets Bridge 17 and Retyped.dom - latest version.

    Add the Linked form's to your bridge project
    Click image for larger version

Name:	treelist1.png
Views:	1
Size:	2.7 KB
ID:	5433
    Click image for larger version

Name:	frmA.png
Views:	1
Size:	20.2 KB
ID:	5434
    Preview of this Application using Bootstrap v4

    https://rawgit.com/samuelGrahame/Cla...bootstrap.html

    Preview of this Application using my Window's 10 css

    https://rawgit.com/samuelGrahame/Cla...w.windows.html

    there isn't a up to date nuget yet. still working in progress atm.

    here is what it looks like using bootstrap:

    Click image for larger version

Name:	dock.png
Views:	1
Size:	21.9 KB
ID:	5435






    __________________________________________________ ______________________________________

    vs Windows 10 view

    Click image for larger version

Name:	dock2.png
Views:	1
Size:	17.9 KB
ID:	5436


    ExpressCraft

    https://github.com/samuelGrahame/ExpressCraft
    https://github.com/samuelGrahame/ExpressCraftDemo

    Preview: https://rawgit.com/samuelGrahame/Exp...e/preview.html

    Added Support for Mobile Phone UI - partial.

    new Nuget Version

    https://www.nuget.org/packages/ExpressCraft/0.2.5

    __________________________________________________ _________________________

    ESBootstrap:
    Bootstrap Wrapper.

    Github Repository: https://github.com/samuelGrahame/ESBootstrap
    Nuget: https://www.nuget.org/packages/ESBootstrap

    using Bridge.Html5;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    
    namespace ESBootstrap
    {
        public class Program
        {
            public static void Main()
            {
                Document.Head.AppendChild(new Viewport());
    
                Document.Body.AppendChild(
                    new Container(new TextBox()
                    {
                        Id = "txtUserName",
                        OnTextChanged = (ev) =>
                        {
                            var txtUserName = Widget.GetWidgetById<TextBox>("txtUserName");
                            Console.WriteLine(txtUserName.Text);
                        }
                    })
                );
    
                Console.WriteLine("Ready");
    
                Widget.GetWidgetById<TextBox>("txtUserName").Focus();
            }
        }
    }
    __________________________________________________ __________________________________________

    Windows Inspired Libraries Below

    ExpressCraft (For Bridge.Net) - Create a Windows Application using ExpressCraft UI and Bridge for the Browser.
    Handles Modal and Non-Modal Forms - When using Dialogues you can assign call-backs based on the Dialogue Result.

    Github Repository: https://github.com/samuelGrahame/ExpressCraft

    Dialog Test: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html
    Ribbon Control Test: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html
    Grid View Test: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html
    Designer Test : https://rawgit.com/samuelGrahame/Exp...w/rawprev.html

    Added Nuget Package ExpressCraft version: 0.0.2.9
    Install-Package ExpressCraft - https://www.nuget.org/packages/ExpressCraft/0.0.2.9

    Bootstrap Support:
    Added Nuget Package ExpressCraft.Bootstrap version: 0.0.0.5
    Install-Package ExpressCraft.Bootstrap - https://www.nuget.org/packages/Expre...tstrap/0.0.0.5

    ExpressCraft.Bootstrap: - https://github.com/samuelGrahame/ExpressCraft.Bootstrap
    ExpressCraft.Bootstrap.Demo: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html

    If you like my project give it a star :)
    Last edited by samuelgrahame; 2018-05-12 @ 10:40 AM. Reason: Update the project path - moved to a new github. changed name to classicforms.

  • samuelgrahame
    replied
    pictures of the two examples are at the bottom of:

    https://github.com/samuelGrahame/ClassicForms

    Added two Examples atm:

    https://github.com/samuelGrahame/ClassicForms.Showcase1
    https://github.com/samuelGrahame/ClassicForms.Showcase2

    The first one is just what a simple form with two inputs and a button for a login page.
    The second one is showing how to make a main page with the form.

    and I have partial support of the resource reader. so you can extract strings that are within the form.resx

    You can get access to the following text memo data below:

    
    System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(frmMainPage));
    resources.GetString("label2.Text");
    
    var data= Type.Assembly.GetManifestResourceData($"{Type.FullName}.resources");
    var resourceReader = new ResourceReader(new MemoryStream(data), data);
    
    var pos = resourceReader.FindPosForResource(name);
    var value = resourceReader.LoadString(pos);


    Leave a comment:


  • samuelgrahame
    replied
    This is a little unrelated, I have been working on a project for someone (Not owned by me), I used Bridge + ExpressCraft.
    I am really enjoying working with Bridge - anything related to the web I will be using Bridge.

    What I found was it was really easier to process payloads between the server and the client. as I used the same Core library.
    I found that if you make the bridge script file, for the login page and give that script a flag async. you never really notice having the bridge js there.
    if anyone would like to check it out. it is at https://realitypunting.com/ the website allows free sign-up.

    What I found the best use case for Bridge is when the website is more of an application. where you don't want to reload the entire page.

    Leave a comment:


  • geoffrey.mcgill
    replied
    Demos are looking great. Keep us all updated with your progress.

    https://twitter.com/bridgedotnet/sta...99391581163520

    Leave a comment:


  • samuelgrahame
    replied
    around about 70% converting my gridview from ExpressCraft to Classicforms.

    https://github.com/samuelGrahame/ClassicForms

    working for both bootstrap and windows version:

    https://rawgit.com/samuelGrahame/Cla...bootstrap.html

    https://rawgit.com/samuelGrahame/Cla...w.windows.html

    Leave a comment:


  • samuelgrahame
    replied
    ClassicForms is now focus. ExpressCraft - will be still maintained but not as much.

    https://github.com/samuelGrahame/ClassicForms

    Goals:

    Support Xaml for form designs
    Support Server Side Execution
    Allow for easy User paint over control's etc have a canvas over the top of each control. - if SetStyle(UserPaint, True)
    Support GDI/Graphics Library

    *Read first post to get more information.


    Leave a comment:


  • samuelgrahame
    replied
    ExpressCraft has now been converted to Retyped.dom - ready for bridge.html to be removed..

    Leave a comment:


  • samuelgrahame
    replied
    Working on a new Library - https://github.com/samuelGrahame/ClassicForms

    Very new.. now... - only have button and Panel - but will be working on it.
    if you would like to help just msg me. using this thread as it is a re-design of what expresscraft is.

    It is using Win Forms Designer in Visual Studio 2017

    Click image for larger version

Name:	Untitled.png
Views:	1
Size:	7.3 KB
ID:	5157
    Here is the same page without bootstrap 4 css added to the index page.
    Click image for larger version

Name:	Untitled2.png
Views:	1
Size:	5.7 KB
ID:	5158
    here is the design of the form in visual studio

    Click image for larger version

Name:	Untitled3.png
Views:	1
Size:	15.0 KB
ID:	5159
    I am using the tag field as the class for the object
    Click image for larger version

Name:	Untitled4.png
Views:	1
Size:	12.7 KB
ID:	5160

    Click image for larger version

Name:	Untitled5.png
Views:	1
Size:	4.8 KB
ID:	5161
    you can just link your Form + Form.Designer to the Bridge Program so that you can do this
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Test;
    
    namespace App
    {
        public class Class1
        {
            public static void Main()
            {
                var x = new Form1();
                x.Show();
            }
        }
    }

    Leave a comment:


  • samuelgrahame
    replied
    Updated to Bridge 16.5*

    Added Graphics Class from WinForms: (Not fully supported but will slowly add more support)

    Supported functions atm:

    
            public void Clear(Color color);
    
            public void FillRectangle(Brush brush, float x, float y, float width, float height);
    
            public void FillRectangle(Brush brush, int x, int y, int width, int height);
    
            public void FillRectangle(Brush brush, Rectangle rect);
    
            public void FillRectangle(Brush brush, RectangleF rect);
    
            public void FillEllipse(Brush brush, float x, float y, float width, float height);
    
            public void FillEllipse(Brush brush, int x, int y, int width, int height);
    
            public void FillEllipse(Brush brush, Rectangle rect);
    
            public void FillEllipse(Brush brush, RectangleF rect);
    
            public void DrawEllipse(Pen pen, float x, float y, float width, float height);
    
            public void DrawEllipse(Pen pen, int x, int y, int width, int height);
    
            public void DrawEllipse(Pen pen, Rectangle rect);
    
            public void DrawEllipse(Pen pen, RectangleF rect);
    
            public void DrawRectangle(Pen pen, float x, float y, float width, float height);
    
            public void DrawRectangle(Pen pen, int x, int y, int width, int height);
    
            public void DrawRectangle(Pen pen, Rectangle rect);
    
            public void DrawRectangle(Pen pen, RectangleF rect);
    
            public void DrawLine(Pen pen, float x1, float y1, float x2, float y2);
    
            public void DrawLine(Pen pen, PointF pt1, PointF pt2);
    
            public void DrawLine(Pen pen, int x1, int y1, int x2, int y2);
    
            public void DrawLine(Pen pen, Point pt1, Point pt2);
    
            public void DrawString(string s, Font font, Brush brush, PointF point);
    
            public void DrawString(string s, Font font, Brush brush, float x, float y);
    
            public void DrawBezier(Pen pen, float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4);
    
            public void DrawBezier(Pen pen, PointF pt1, PointF pt2, PointF pt3, PointF pt4);
    
            public void DrawBezier(Pen pen, Point pt1, Point pt2, Point pt3, Point pt4);
    
            public void DrawBeziers(Pen pen, PointF[] points);
    
            public void DrawBeziers(Pen pen, Point[] points);
    
            public SizeF MeasureString(string text, Font font);
    Click image for larger version  Name:	drawTest.png Views:	1 Size:	87.2 KB ID:	5005




    Also Added - ExpressCraft Css file now is included in the source code at run time - using a base64 uri;

    Also with the Graphics class - Pen/Brush - SolidBrush, Point,PointF, Size, SizeF, Rectangle and RetangleF have also been added - need to add operators...

    Graphics Test Control

    
            public class Test : CanvasControl
            {
                public override void OnPaint()
                {
                    var g = CreateGraphics();
                    var rnd = new Random();
                    for (int i = 0; i < 100; i++)
                    {
                        g.DrawLine(new Pen(Color.FromArgb(rnd.Next())), rnd.Next(10, 300), rnd.Next(10, 300), rnd.Next(10, 300), rnd.Next(10, 300));
                    }
                    g.DrawString("Hello World", new Font("Arial 10pt"), new SolidBrush(Color.Black), 50, 50);
    
                    g.DrawEllipse(new Pen(Color.Red, 2), 100, 100, 50, 50);
    
                    g.FillEllipse(new SolidBrush(Color.Green), 100, 200, 50, 50);
    
                    var size = g.MeasureString("Hello World", new Font("Arial 11pt"));
    
                    g.DrawString(size.ToString(), new Font("Arial 11pt"), new SolidBrush(Color.Black), 200, 50);
    
                    base.OnPaint();
                }
            }
    Last edited by samuelgrahame; 2017-11-18 @ 08:43 AM.

    Leave a comment:


  • geoffrey.mcgill
    replied
    Looking good. You have been adding a lot of new functionality. Keep up the great work.

    Leave a comment:


  • samuelgrahame
    replied
    Added Find Panel to the GridView with Highlighted Results.

    To hide and show the Find Panel - you can change via the right click menu. also via code

    You can test this at: https://rawgit.com/samuelGrahame/Exp...e/preview.html
    Click image for larger version  Name:	Preview.png Views:	1 Size:	56.5 KB ID:	4715

    Leave a comment:


  • samuelgrahame
    replied
    Added Icons to Demo
    Increase Performance for GridView
    Fixed bugs with SearchEdit, TextInput, NumberInput, MemoInput.
    Added More Methods to Layout Control.

    Nuget Package Updated: https://www.nuget.org/packages/ExpressCraft/0.0.5

    Click image for larger version

Name:	Preview.png
Views:	1
Size:	48.1 KB
ID:	4710

    Leave a comment:


  • samuelgrahame
    replied
    hahaha yeah i was thinking that, I will have to look for some nice free stock images.

    Leave a comment:


  • guidovanhils
    replied
    It works very good.
    Maybe you could use more graphics/images to make the UI more attractive? people like a good-looking demo.

    Leave a comment:


  • guidovanhils
    replied
    Great work !!

    Leave a comment:

Working...
X