Announcement

Collapse
No announcement yet.

ExpressCraft - UI Framework

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

    #31
    Originally posted by DojoMike View Post
    I've never heard of "poco", but I will definitely check out what you got and submit a pull request. Thanks!
    I was referring to server objects, Here is a link to poco: https://msdn.microsoft.com/en-us/lib...v=vs.100).aspx

    you could put all labels and all information in the class - as attributes.

    Comment


      #32
      Added a few stuff, ConsoleForm - Added Stand Alone Forms - so that the consoleForm works.
      Fixed some issues with resize in zoom on a browser, increased speed of dragging the form.

      Comment


        #33
        Added a Theme Form Editor:

        Click image for larger version

Name:	Theme Form.png
Views:	1
Size:	12.4 KB
ID:	3982
        Just Press F2 to Open the Form or you can Call

         
         ThemeForm.ShowThemeForm();  // You can Disable the Global F2 Call to open the Theme Changer  
         Settings.OnF2ShowThemeForm = false; // Default Value is true.

        Comment


          #34
          Added Tooltips in the Base Class Control Click image for larger version  Name:	asdasdaasdadsd.png Views:	1 Size:	3.5 KB ID:	3984



          var control = new Control();
          control.ToolTip = new ToolTip("This is a heading test.", "This is a description test.");  
          Settings.ToolTipPopupDelayMs = 1000;
          Settings.ToolTipPopupStayOpenDelayPerWordMs = 250;

          Comment


            #35
            Very cool. Thanks for the updates. Keep them coming.

            Comment


              #36
              Thank you, will do.

              Comment


                #37
                Added Another Project - https://github.com/samuelGrahame/ExpressCraft.Bootstrap
                Added Rawgit: https://rawgit.com/samuelGrahame/Exp...w/rawprev.html
                Allows for a Form in ExpressCraft to support bootstrap :)
                Click image for larger version  Name:	sdasdasdasdasd.png Views:	1 Size:	12.0 KB ID:	3997

                Comment


                  #38
                  Looks much better. You're onto something good now.

                  Comment


                    #39
                    DELETED POST

                    Comment


                      #40
                      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.

                      Comment


                        #41
                        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.

                        Comment


                          #42
                          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.

                          Comment


                            #43
                            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" }
                                )

                            Comment


                              #44
                              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.

                              Comment


                                #45
                                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.

                                Comment

                                Working...
                                X