Announcement

Collapse
No announcement yet.

ExpressCraft - UI Framework

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

  • samuelgrahame
    replied
    Preview:

    https://rawgit.com/samuelGrahame/ExpressCraftDemo/master/ExpressCraftDemo/bin/Debug/Bridge/preview.html

    Click image for larger version

Name:	Desktop View.png
Views:	1
Size:	27.5 KB
ID:	4636
    Click image for larger version

Name:	Hub with New en.png
Views:	1
Size:	37.4 KB
ID:	4637
    Click image for larger version

Name:	Ipad.png
Views:	1
Size:	11.4 KB
ID:	4638

    Click image for larger version

Name:	iphone with new en.png
Views:	1
Size:	15.9 KB
ID:	4639
    Click image for larger version

Name:	iphone.png
Views:	1
Size:	10.7 KB
ID:	4640

    Leave a comment:


  • samuelgrahame
    replied
    https://github.com/samuelGrahame/ExpressCraft
    https://github.com/samuelGrahame/ExpressCraftDemo

    Added Support for Mobile Phone UI - partial.

    new Nuget Version

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

    Leave a comment:


  • samuelgrahame
    replied
    Hey guidovanhils ,

    Okay,They should be up tomorrow, Because making it support bridge.net - beta4 v16 (I have finished that, just need to sync my changes).

    Leave a comment:


  • guidovanhils
    replied
    Hi Samuel,

    Your example code on github looks very promising!

    I tried to see the demo's from your links on github, but non of them are showing? (some show: 404 not found)

    for example: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html
    Can you make the demos working again?

    Thanks, Guido

    Leave a comment:


  • samuelgrahame
    replied
    Updated ExpressCraft to use beta4* Previews are down*

    Leave a comment:


  • samuelgrahame
    replied
    Migrated ExpressCraft.Bootstrap to ESBootstrap - No Reference to ExpressCraft - only a few helper methods.

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

    Leave a comment:


  • samuelgrahame
    replied
    geoffrey.mcgill I was looking at changing to use bootstrap css for the windows. There is a modal but im not sure how it would fit in with a dragable/Resizeable Window.
    Last edited by geoffrey.mcgill; 2017-07-04 @ 11:41 PM.

    Leave a comment:


  • samuelgrahame
    replied
    Originally posted by geoffrey.mcgill View Post
    How about updating your main components, such as the Window to use Bootstrap css instead of your own custom theme? I think you were trying to make it more "Windows" like originally, but I feel you'll attract more attention if it used Bootstrap, and especially if developers were just able to swap out Bootstrap themes to change the style of their app.

    Just a thought. Do with it as you wish.
    Thank you for your input, I agree, That is one reason why i moved to Bootstrap. I will see what I can do.

    Leave a comment:


  • geoffrey.mcgill
    replied
    How about updating your main components, such as the Window to use Bootstrap css instead of your own custom theme? I think you were trying to make it more "Windows" like originally, but I feel you'll attract more attention if it used Bootstrap, and especially if developers were just able to swap out Bootstrap themes to change the style of their app.

    Just a thought. Do with it as you wish.

    Leave a comment:


  • samuelgrahame
    replied
    Added Navbar

    https://rawgit.com/samuelGrahame/Exp...w/rawprev.html

    Added alot of Properties to Ordered List and Unordered List
    Added to Specify Unique Id - It adds the Windows Handle to the Attributes that you have specified.
    Click image for larger version  Name:	6.png Views:	1 Size:	103.3 KB ID:	4023


    new Navbar(
        new NavbarHeader(
            new NavbarCollapseButton("navbarContent") { UnqiueAttributes = "data-target" },
            new NavbarBrand("#", "Brand")
        ),
        new NavbarContent("navbarContent",
            new UnorderedList(
                new ListItem(new Anchor("#", "Link ", new SourceOnly("(current)"))) { Active = true },
                new ListItem(new Anchor("#", "Link")),
                new ListItem(
                    new Anchor("#", "Dropdown ", new Caret()) { Dropdown = true },
                    new UnorderedList(
                        new ListItem(new Anchor("#", "Action")),
                        new ListItem(new Anchor("#", "Another Action")),
                        new ListItem(new Anchor("#", "Something else here")),
                        new ListItem() { Divider = true },
                        new ListItem(new Anchor("#", "Separated link"))
                        )
                    { DropdownMenu = true }
                )
                { Dropdown = true }
            )
            { Nav = true }
        )
        { UnqiueAttributes = "id" }
        )

    Leave a comment:


  • samuelgrahame
    replied
    Added Responsive per Form/Container - https://rawgit.com/samuelGrahame/Exp...vePerForm.html Click image for larger version  Name:	5.png Views:	1 Size:	50.0 KB ID:	4021

    How I make it Responsive:

    Form Resize Event:

    var states = new StyleStates();
    var styleBuilder = new StringBuilder();
    var clientRect = this.Body.GetBoundingClientRect();
    
    if(clientRect.Width >= 480 && Window.InnerWidth > Window.InnerHeight)
    {
        styleBuilder.Append(Min_Width480AndLandscape);
        states.Width480Landscape = true;
    }
    if(clientRect.Width <= 767)
    {
        styleBuilder.Append(Max_Width767);
        states.WidthLess767 = true;
    }
    if(clientRect.Width >= 768 && clientRect.Width <= 991)
    {
        styleBuilder.Append(Min_Width768AndMax_Width991);
        states.WidthGreater768Less991 = true;
    }
    if(clientRect.Width >= 768)
    {
        styleBuilder.Append(Min_Width768);
        states.WidthGreater768 = true;
    }
    if(clientRect.Width >= 992)
    {
        styleBuilder.Append(Min_Width992);
        states.WidthGreater992 = true;
    }
    if(clientRect.Width >= 1200)
    {
        styleBuilder.Append(Min_Width1200);
        states.WidthGreater1200 = true;
    }
    
    if(!states.Equals(PreviouStates))
    {
        privateSyle.InnerHTML = styleBuilder.ToString().Replace("windowHandleId", responsiveClass);
        PreviouStates = states;
    }
    Each Form has a Style Div in the Content - I have all the styles that were required for @media and merged them by type.
    With each selector having .windowHandleId next to it. all i need to do is replace .windowHandleId with the Responsive Class + Form Handle.
    Last edited by samuelgrahame; 2017-04-18 @ 12:20 AM.

    Leave a comment:


  • samuelgrahame
    replied
    Added Tables to ExpressCraft.Bootstrap
    Added a few more Typography object's

    Click image for larger version

Name:	4.png
Views:	1
Size:	101.9 KB
ID:	4010
    All themes supported.

    Leave a comment:


  • samuelgrahame
    replied
    Added more things to. https://github.com/samuelGrahame/ExpressCraft.bootstrap
    rawgit link: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html

    Supports Phones - // #TODO - Remove Minimize buttons and Maximize buttons off ExpressCraft Form

    Streamlined the GUI in code: Click image for larger version  Name:	1.png Views:	2 Size:	30.4 KB ID:	4007
    Click image for larger version  Name:	2.png Views:	1 Size:	43.0 KB ID:	4005
    Click image for larger version  Name:	3.png Views:	1 Size:	57.5 KB ID:	4006


    Code to create html:

    HTML Code:
    public class Program
        {
            public static void Main()
            {
                Settings.IncludeFocusRegion = false;
                Settings.AllowCloseWithoutQuestion = true;
    
                Application.SetApplicationDefinition();
    
                Action<MouseEvent> buttonClick = (ev) => { Global.Alert(ev.CurrentTarget.As<HTMLElement>().InnerHTML); };
    
                BootstrapWindow.SetupMetaTags();
    
                Application.Run(
                    new BootstrapWindow(
                        new Panel(BootstrapTheme.Default,
                            new PanelHeading("Welcome to ExpressCraft-Bootstrap"),
                            new PanelBody(
                                new BootstrapSelectionDiv(
                                    new FormGroupList(
                                        new TextBox("Textbox"),
                                        new CheckBox("checkbox", "true"),
                                        new FormGroup(
                                            new CheckBox("checkbox-inline 1", "true") { Inline = true },
                                            new CheckBox("checkbox-inline 2", "false") { Inline = true },
                                            new CheckBox("checkbox-inline 3", "true") { Inline = true }
                                            ),
                                        new TextBox("11/04/2017", InputType.Date),
                                        new TextBox("Password", InputType.Password),
                                        new TextArea("TextArea", 4),
                                        new BootstrapForm(bootstrapForm.Inline,
                                            new Label(
                                                "Email:",
                                                new TextBox()
                                            ),
                                            new Label(
                                                "Password:",
                                                new TextBox(InputType.Password)
                                            ),
                                            new CheckBox("Remeber me"),
                                            new Button("Submit", ButtonType.Submit)
                                        ),
                                        new BootstrapForm(bootstrapForm.Horizontal,
                                            new Label(
                                                "Email:",
                                                new TextBox()
                                            ),
                                            new Label(
                                                "Password:",
                                                new TextBox(InputType.Password)
                                            ),
                                            new CheckBox("Remeber me"),
                                            new Button("Submit", ButtonType.Submit)
                                        ),
                                        new Button("Basic", BootstrapTheme.None) { OnClick = buttonClick },
                                        new Button("Default", BootstrapTheme.Default) { OnClick = buttonClick },
                                        new Button("Primary", BootstrapTheme.Primary) { OnClick = buttonClick },
                                        new Button("Success", BootstrapTheme.Success) { OnClick = buttonClick },
                                        new Button("Info", BootstrapTheme.Info) { OnClick = buttonClick },
                                        new Button("Warning", BootstrapTheme.Warning) { OnClick = buttonClick },
                                        new Button("Danger", BootstrapTheme.Danger) { OnClick = buttonClick },
                                        new Button("Link", BootstrapTheme.Link) { OnClick = buttonClick }                                                                                                                                
                                    ),
                                    new Heading(HeadingType.H2, "Heading", new Small(" - Heading Small")),
                                        new ParagraphList(
                                            "Text",
                                            new Abbr("Abbr hover", "Abbr"),
                                            new Small("Small"),
                                            new Blockquote("Block Quote Content", "Block Quote From"),
                                            new Blockquote("Block Quote Content Reverse", "Block Quote From Reverse") { Reverse = true },
                                            new DescriptionList(
                                                new DescriptionTitle("Description Title 1"),
                                                new DescriptionDetail("- Description Detail 1"),
                                                new DescriptionTitle("Description Title 2"),
                                                new DescriptionDetail("- Description Detail 2")),
                                            new Paragraph("The following HTML elements: ", new Code("span"), ", ", new Code("section"), ", and ", new Code("div"), " defines a section in a document."),
                                            new Paragraph("Use ", new Kbd("ctrl + p"), " to open the Print dialog box."),
                                            new Pre(
    @"Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks."),
                                            new Paragraph(
                                                new ParagraphList(
                                                    new Heading(HeadingType.H2, "Contextual Colors"),
                                                    new Paragraph("This text is muted.") { ContextualText = Contextual.Text.Muted },
                                                    new Paragraph("This text is important.") { ContextualText = Contextual.Text.Primary },
                                                    new Paragraph("This text indicates success.") { ContextualText = Contextual.Text.Success },
                                                    new Paragraph("This text represents some information.") { ContextualText = Contextual.Text.Info },
                                                    new Paragraph("This text represents a warning.") { ContextualText = Contextual.Text.Warning },
                                                    new Paragraph("This text represents danger.") { ContextualText = Contextual.Text.Danger }
                                                )
                                            ),
                                            new Paragraph(
                                                new ParagraphList(
                                                    new Heading(HeadingType.H2, "Contextual Backgrounds"),
                                                    new Paragraph("This text is important.") { ContextualBackground = Contextual.Background.Primary },
                                                    new Paragraph("This text indicates success.") { ContextualBackground = Contextual.Background.Success },
                                                    new Paragraph("This text represents some information.") { ContextualBackground = Contextual.Background.Info },
                                                    new Paragraph("This text represents a warning.") { ContextualBackground = Contextual.Background.Warning },
                                                    new Paragraph("This text represents danger.") { ContextualBackground = Contextual.Background.Danger }
                                                )
                                            )
                                        )
                                    )
                            ),
                            new PanelFooter(
                                "Footer"
                                )
                            )
                    )
                    { Windowstate = WindowState.Maximized }                
                );            
            }
        }
    Output HTML
    HTML Code:
    <div class="container" style="padding: 0px;">
       <div class="panel panel-default">
          <div class="panel-heading">Welcome to ExpressCraft-Bootstrap</div>
          <div class="panel-body">
             <div class="selection">
                <div>
                   <div class="form-group"><input class="form-control" type="19"></div>
                   <div class="form-group">
                      <div class="checkbox"><label><input class="" type="checkbox" checked="null">checkbox</label></div>
                   </div>
                   <div class="form-group">
                      <div class="checkbox-inline"><label><input class="" type="checkbox" checked="null">checkbox-inline 1</label></div>
                      <div class="checkbox-inline"><label><input class="" type="checkbox">checkbox-inline 2</label></div>
                      <div class="checkbox-inline"><label><input class="" type="checkbox" checked="null">checkbox-inline 3</label></div>
                   </div>
                   <div class="form-group"><input class="form-control" type="date"></div>
                   <div class="form-group"><input class="form-control" type="password"></div>
                   <div class="form-group"><textarea class="form-control" rows="4">TextArea</textarea></div>
                   <div class="form-group">
                      <form class="form-inline">
                         <div class="form-group"><label>Email:<input class="form-control" type="19"></label></div>
                         <div class="form-group"><label>Password:<input class="form-control" type="password"></label></div>
                         <div class="form-group">
                            <div class="checkbox"><label><input class="" type="checkbox">Remeber me</label></div>
                         </div>
                         <div class="form-group"><button type="submit" class="btn btn-default">Submit</button></div>
                      </form>
                   </div>
                   <div class="form-group">
                      <form class="form-horizontal">
                         <div class="form-group"><label>Email:<input class="form-control" type="19"></label></div>
                         <div class="form-group"><label>Password:<input class="form-control" type="password"></label></div>
                         <div class="form-group">
                            <div class="checkbox"><label><input class="" type="checkbox">Remeber me</label></div>
                         </div>
                         <div class="form-group"><button type="submit" class="btn btn-default">Submit</button></div>
                      </form>
                   </div>
                   <div class="form-group"><button type="2" class="btn">Basic</button></div>
                   <div class="form-group"><button type="2" class="btn btn-default">Default</button></div>
                   <div class="form-group"><button type="2" class="btn btn-primary">Primary</button></div>
                   <div class="form-group"><button type="2" class="btn btn-success">Success</button></div>
                   <div class="form-group"><button type="2" class="btn btn-info">Info</button></div>
                   <div class="form-group"><button type="2" class="btn btn-warning">Warning</button></div>
                   <div class="form-group"><button type="2" class="btn btn-danger">Danger</button></div>
                   <div class="form-group"><button type="2" class="btn btn-link">Link</button></div>
                </div>
                <h2>Heading<small> - Heading Small</small></h2>
                <div>
                   <p>Text</p>
                   <p><abbr title="Abbr hover">Abbr</abbr></p>
                   <p><small>Small</small></p>
                   <p>
                   <blockquote>
                      <p>Block Quote Content</p>
                      <footer>Block Quote From</footer>
                   </blockquote>
                   </p>
                   <p>
                   <blockquote class="blockquote-reverse">
                      <p>Block Quote Content Reverse</p>
                      <footer>Block Quote From Reverse</footer>
                   </blockquote>
                   </p>
                   <p>
                   <dl>
                      <dt>Description Title 1</dt>
                      <dd>- Description Detail 1</dd>
                      <dt>Description Title 2</dt>
                      <dd>- Description Detail 2</dd>
                   </dl>
                   </p>
                   <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
                   <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
                   <p>
                   <pre>Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.</pre>
                   </p>
                   <p>
                   <div>
                      <p>
                      <h2>Contextual Colors</h2>
                      </p>
                      <p class="text-muted">This text is muted.</p>
                      <p class="text-primary">This text is important.</p>
                      <p class="text-success">This text indicates success.</p>
                      <p class="text-info">This text represents some information.</p>
                      <p class="text-warning">This text represents a warning.</p>
                      <p class="text-danger">This text represents danger.</p>
                   </div>
                   </p>
                   <p>
                   <div>
                      <p>
                      <h2>Contextual Backgrounds</h2>
                      </p>
                      <p class="bg-primary">This text is important.</p>
                      <p class="bg-success">This text indicates success.</p>
                      <p class="bg-info">This text represents some information.</p>
                      <p class="bg-warning">This text represents a warning.</p>
                      <p class="bg-danger">This text represents danger.</p>
                   </div>
                   </p>
                </div>
             </div>
          </div>
          <div class="panel-footer">Footer</div>
       </div>
    </div>
    Attached Files
    Last edited by samuelgrahame; 2017-04-11 @ 06:01 AM.

    Leave a comment:


  • samuelgrahame
    replied
    DELETED POST

    Leave a comment:


  • geoffrey.mcgill
    replied
    Looks much better. You're onto something good now.

    Leave a comment:

Working...
X