We use cookies to ensure you get the best experience on our website
Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
0ct0pu5
/
ladybird
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

LibHTML: Implement basic <form> and <input> element support

This patch adds "submit" inputs and default (text box) inputs, as well
as form elements that can be submitted.

Layout of input elements is implemented via a new LayoutWidget class
that allows you to put an arbitrary GWidget in the layout tree.
At the moment, the DOM node sets the initial size of the LayoutWidget,
and then the positioning is done by the normal layout algorithm.

We also now support submitting a <form method="GET">, which does a full
replacing load with a URL based on the form's action + a query string
built from the name/value of input elements within the submitted form.

This is pretty neat! :^)
Andreas Kling 5 gadi atpakaļ
vecāks
a91c17c0eb
revīzija
6d1c4ae5a9
11 mainītis faili ar 229 papildinājumiem un 0 dzēšanām
Apvienotais skats Rādīt salīdzināšanas statistiku
  1. 10 0
      Base/home/anon/www/form.html
  2. 1 0
      Base/home/anon/www/welcome.html
  3. 6 0
      Libraries/LibHTML/DOM/ElementFactory.cpp
  4. 58 0
      Libraries/LibHTML/DOM/HTMLFormElement.cpp
  5. 20 0
      Libraries/LibHTML/DOM/HTMLFormElement.h
  6. 51 0
      Libraries/LibHTML/DOM/HTMLInputElement.cpp
  7. 21 0
      Libraries/LibHTML/DOM/HTMLInputElement.h
  8. 1 0
      Libraries/LibHTML/Layout/LayoutNode.h
  9. 28 0
      Libraries/LibHTML/Layout/LayoutWidget.cpp
  10. 30 0
      Libraries/LibHTML/Layout/LayoutWidget.h
  11. 3 0
      Libraries/LibHTML/Makefile

+ 10 - 0
Base/home/anon/www/form.html
Parādīt failu 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE>
 
+<html>
 
+<head><title>Form</title></head>
 
+<body>
 
+<form method="GET" action="form.html">
 
+<input type="submit" value="cool" name="cyber">
 
+<input type="text" value="hello_friends" name="greeting">
 
+</form>
 
+</body>
 
+</html>

+ 1 - 0
Base/home/anon/www/welcome.html
Parādīt failu 

@@ -24,6 +24,7 @@ h1 {
 
     <p>Some small test pages:</p>
 
     <p>Some small test pages:</p>
 
     <ul>
 
     <ul>
 
         <li><a href="small.html">small</a></li>
 
         <li><a href="small.html">small</a></li>
 
+        <li><a href="form.html">form</a></li>
 
         <li><a href="borders.html">borders</a></li>
 
         <li><a href="borders.html">borders</a></li>
 
         <li><a href="css.html">css</a></li>
 
         <li><a href="css.html">css</a></li>
 
         <li><a href="acid1.html">acid1</a></li>
 
         <li><a href="acid1.html">acid1</a></li>

+ 6 - 0
Libraries/LibHTML/DOM/ElementFactory.cpp
Parādīt failu 

@@ -4,11 +4,13 @@
 
 #include <LibHTML/DOM/HTMLBlinkElement.h>
 
 #include <LibHTML/DOM/HTMLBlinkElement.h>
 
 #include <LibHTML/DOM/HTMLBodyElement.h>
 
 #include <LibHTML/DOM/HTMLBodyElement.h>
 
 #include <LibHTML/DOM/HTMLFontElement.h>
 
 #include <LibHTML/DOM/HTMLFontElement.h>
 
+#include <LibHTML/DOM/HTMLFormElement.h>
 
 #include <LibHTML/DOM/HTMLHRElement.h>
 
 #include <LibHTML/DOM/HTMLHRElement.h>
 
 #include <LibHTML/DOM/HTMLHeadElement.h>
 
 #include <LibHTML/DOM/HTMLHeadElement.h>
 
 #include <LibHTML/DOM/HTMLHeadingElement.h>
 
 #include <LibHTML/DOM/HTMLHeadingElement.h>
 
 #include <LibHTML/DOM/HTMLHtmlElement.h>
 
 #include <LibHTML/DOM/HTMLHtmlElement.h>
 
 #include <LibHTML/DOM/HTMLImageElement.h>
 
 #include <LibHTML/DOM/HTMLImageElement.h>
 
+#include <LibHTML/DOM/HTMLInputElement.h>
 
 #include <LibHTML/DOM/HTMLLinkElement.h>
 
 #include <LibHTML/DOM/HTMLLinkElement.h>
 
 #include <LibHTML/DOM/HTMLStyleElement.h>
 
 #include <LibHTML/DOM/HTMLStyleElement.h>
 
 #include <LibHTML/DOM/HTMLTitleElement.h>
 
 #include <LibHTML/DOM/HTMLTitleElement.h>
 
@@ -38,6 +40,10 @@ NonnullRefPtr<Element> create_element(Document& document, const String& tag_name
 
         return adopt(*new HTMLImageElement(document, lowercase_tag_name));
 
         return adopt(*new HTMLImageElement(document, lowercase_tag_name));
 
     if (lowercase_tag_name == "blink")
 
     if (lowercase_tag_name == "blink")
 
         return adopt(*new HTMLBlinkElement(document, lowercase_tag_name));
 
         return adopt(*new HTMLBlinkElement(document, lowercase_tag_name));
 
+    if (lowercase_tag_name == "form")
 
+        return adopt(*new HTMLFormElement(document, lowercase_tag_name));
 
+    if (lowercase_tag_name == "input")
 
+        return adopt(*new HTMLInputElement(document, lowercase_tag_name));
 
     if (lowercase_tag_name == "br")
 
     if (lowercase_tag_name == "br")
 
         return adopt(*new HTMLBRElement(document, lowercase_tag_name));
 
         return adopt(*new HTMLBRElement(document, lowercase_tag_name));
 
     if (lowercase_tag_name == "h1"
 
     if (lowercase_tag_name == "h1"

+ 58 - 0
Libraries/LibHTML/DOM/HTMLFormElement.cpp
Parādīt failu 

@@ -0,0 +1,58 @@
 
+#include <AK/StringBuilder.h>
 
+#include <LibHTML/DOM/HTMLFormElement.h>
 
+#include <LibHTML/DOM/HTMLInputElement.h>
 
+#include <LibHTML/Frame.h>
 
+#include <LibHTML/HtmlView.h>
 
+
 
+HTMLFormElement::HTMLFormElement(Document& document, const String& tag_name)
 
+    : HTMLElement(document, tag_name)
 
+{
 
+}
 
+
 
+HTMLFormElement::~HTMLFormElement()
 
+{
 
+}
 
+
 
+void HTMLFormElement::submit()
 
+{
 
+    if (action().is_null()) {
 
+        dbg() << "Unsupported form action ''";
 
+        return;
 
+    }
 
+
 
+    if (method().to_lowercase() != "get") {
 
+        dbg() << "Unsupported form method '" << method() << "'";
 
+        return;
 
+    }
 
+
 
+    URL url(document().complete_url(action()));
 
+
 
+    struct NameAndValue {
 
+        String name;
 
+        String value;
 
+    };
 
+
 
+    Vector<NameAndValue> parameters;
 
+
 
+    for_each_in_subtree([&](auto& node) {
 
+        if (is<HTMLInputElement>(node)) {
 
+            auto& input = to<HTMLInputElement>(node);
 
+            if (!input.name().is_null())
 
+                parameters.append({ input.name(), input.value() });
 
+        }
 
+        return IterationDecision::Continue;
 
+    });
 
+
 
+    StringBuilder builder;
 
+    for (int i = 0; i < parameters.size(); ++i) {
 
+        builder.append(parameters[i].name);
 
+        builder.append('=');
 
+        builder.append(parameters[i].value);
 
+        if (i != parameters.size() - 1)
 
+            builder.append('&');
 
+    }
 
+    url.set_query(builder.to_string());
 
+
 
+    // FIXME: We shouldn't let the form just do this willy-nilly.
 
+    document().frame()->html_view()->load(url);
 
+}

+ 20 - 0
Libraries/LibHTML/DOM/HTMLFormElement.h
Parādīt failu 

@@ -0,0 +1,20 @@
 
+#pragma once
 
+
 
+#include <LibHTML/DOM/HTMLElement.h>
 
+
 
+class HTMLFormElement : public HTMLElement {
 
+public:
 
+    HTMLFormElement(Document&, const String& tag_name);
 
+    virtual ~HTMLFormElement() override;
 
+
 
+    String action() const { return attribute("action"); }
 
+    String method() const { return attribute("method"); }
 
+
 
+    void submit();
 
+};
 
+
 
+template<>
 
+inline bool is<HTMLFormElement>(const Node& node)
 
+{
 
+    return is<Element>(node) && to<Element>(node).tag_name().to_lowercase() == "form";
 
+}

+ 51 - 0
Libraries/LibHTML/DOM/HTMLInputElement.cpp
Parādīt failu 

@@ -0,0 +1,51 @@
 
+#include <LibGUI/GButton.h>
 
+#include <LibGUI/GTextBox.h>
 
+#include <LibHTML/DOM/Document.h>
 
+#include <LibHTML/DOM/HTMLFormElement.h>
 
+#include <LibHTML/DOM/HTMLInputElement.h>
 
+#include <LibHTML/Frame.h>
 
+#include <LibHTML/HtmlView.h>
 
+#include <LibHTML/Layout/LayoutWidget.h>
 
+
 
+HTMLInputElement::HTMLInputElement(Document& document, const String& tag_name)
 
+    : HTMLElement(document, tag_name)
 
+{
 
+}
 
+
 
+HTMLInputElement::~HTMLInputElement()
 
+{
 
+}
 
+
 
+RefPtr<LayoutNode> HTMLInputElement::create_layout_node(const StyleProperties*) const
 
+{
 
+    ASSERT(document().frame());
 
+    auto& frame = *document().frame();
 
+    ASSERT(frame.html_view());
 
+    auto& html_view = const_cast<HtmlView&>(*frame.html_view());
 
+
 
+    RefPtr<GWidget> widget;
 
+    if (type() == "submit") {
 
+        auto button = GButton::construct(value(), &html_view);
 
+        int text_width = Font::default_font().width(value());
 
+        button->set_relative_rect(0, 0, text_width + 20, 20);
 
+        button->on_click = [this](auto&) {
 
+            if (auto* form = first_ancestor_of_type<HTMLFormElement>()) {
 
+                // FIXME: Remove this const_cast once we have a non-const first_ancestor_of_type.
 
+                const_cast<HTMLFormElement*>(form)->submit();
 
+            }
 
+        };
 
+        widget = button;
 
+    } else {
 
+        auto text_box = GTextBox::construct(&html_view);
 
+        text_box->set_text(value());
 
+        text_box->on_change = [this] {
 
+            auto& widget = to<LayoutWidget>(layout_node())->widget();
 
+            const_cast<HTMLInputElement*>(this)->set_attribute("value", static_cast<const GTextBox&>(widget).text());
 
+        };
 
+        int text_width = Font::default_font().width(value());
 
+        text_box->set_relative_rect(0, 0, text_width + 20, 20);
 
+        widget = text_box;
 
+    }
 
+
 
+    return adopt(*new LayoutWidget(*this, *widget));
 
+}

+ 21 - 0
Libraries/LibHTML/DOM/HTMLInputElement.h
Parādīt failu 

@@ -0,0 +1,21 @@
 
+#pragma once
 
+
 
+#include <LibHTML/DOM/HTMLElement.h>
 
+
 
+class HTMLInputElement : public HTMLElement {
 
+public:
 
+    HTMLInputElement(Document&, const String& tag_name);
 
+    virtual ~HTMLInputElement() override;
 
+
 
+    virtual RefPtr<LayoutNode> create_layout_node(const StyleProperties* parent_style) const override;
 
+
 
+    String type() const { return attribute("type"); }
 
+    String value() const { return attribute("value"); }
 
+    String name() const { return attribute("name"); }
 
+};
 
+
 
+template<>
 
+inline bool is<HTMLInputElement>(const Node& node)
 
+{
 
+    return is<Element>(node) && to<Element>(node).tag_name().to_lowercase() == "input";
 
+}

+ 1 - 0
Libraries/LibHTML/Layout/LayoutNode.h
Parādīt failu 

@@ -57,6 +57,7 @@ public:
 
     virtual bool is_text() const { return false; }
 
     virtual bool is_text() const { return false; }
 
     virtual bool is_block() const { return false; }
 
     virtual bool is_block() const { return false; }
 
     virtual bool is_replaced() const { return false; }
 
     virtual bool is_replaced() const { return false; }
 
+    virtual bool is_widget() const { return false; }
 
     virtual bool is_box() const { return false; }
 
     virtual bool is_box() const { return false; }
 
     virtual bool is_table() const { return false; }
 
     virtual bool is_table() const { return false; }
 
     virtual bool is_table_row() const { return false; }
 
     virtual bool is_table_row() const { return false; }

+ 28 - 0
Libraries/LibHTML/Layout/LayoutWidget.cpp
Parādīt failu 

@@ -0,0 +1,28 @@
 
+#include <LibDraw/Font.h>
 
+#include <LibDraw/StylePainter.h>
 
+#include <LibGUI/GPainter.h>
 
+#include <LibGUI/GWidget.h>
 
+#include <LibHTML/Layout/LayoutWidget.h>
 
+
 
+LayoutWidget::LayoutWidget(const Element& element, GWidget& widget)
 
+    : LayoutReplaced(element, StyleProperties::create())
 
+    , m_widget(widget)
 
+{
 
+}
 
+
 
+LayoutWidget::~LayoutWidget()
 
+{
 
+    widget().remove_from_parent();
 
+}
 
+
 
+void LayoutWidget::layout()
 
+{
 
+    rect().set_size(FloatSize(widget().width(), widget().height()));
 
+    LayoutReplaced::layout();
 
+    widget().move_to(rect().x(), rect().y());
 
+}
 
+
 
+void LayoutWidget::render(RenderingContext& context)
 
+{
 
+    LayoutReplaced::render(context);
 
+}

+ 30 - 0
Libraries/LibHTML/Layout/LayoutWidget.h
Parādīt failu 

@@ -0,0 +1,30 @@
 
+#pragma once
 
+
 
+#include <LibHTML/Layout/LayoutReplaced.h>
 
+
 
+class GWidget;
 
+
 
+class LayoutWidget : public LayoutReplaced {
 
+public:
 
+    LayoutWidget(const Element&, GWidget&);
 
+    virtual ~LayoutWidget() override;
 
+
 
+    virtual void layout() override;
 
+    virtual void render(RenderingContext&) override;
 
+
 
+    GWidget& widget() { return m_widget; }
 
+    const GWidget& widget() const { return m_widget; }
 
+
 
+    virtual bool is_widget() const final { return true; }
 
+
 
+private:
 
+    virtual const char* class_name() const override { return "LayoutWidget"; }
 
+
 
+    NonnullRefPtr<GWidget> m_widget;
 
+};
 
+
 
+template<>
 
+inline bool is<LayoutWidget>(const LayoutNode& node)
 
+{
 
+    return node.is_widget();
 
+}

+ 3 - 0
Libraries/LibHTML/Makefile
Parādīt failu 

@@ -27,11 +27,13 @@ LIBHTML_OBJS = \
 
     DOM/HTMLBodyElement.o \
 
     DOM/HTMLBodyElement.o \
 
     DOM/HTMLElement.o \
 
     DOM/HTMLElement.o \
 
     DOM/HTMLFontElement.o \
 
     DOM/HTMLFontElement.o \
 
+    DOM/HTMLFormElement.o \
 
     DOM/HTMLHRElement.o \
 
     DOM/HTMLHRElement.o \
 
     DOM/HTMLHeadElement.o \
 
     DOM/HTMLHeadElement.o \
 
     DOM/HTMLHeadingElement.o \
 
     DOM/HTMLHeadingElement.o \
 
     DOM/HTMLHtmlElement.o \
 
     DOM/HTMLHtmlElement.o \
 
     DOM/HTMLImageElement.o \
 
     DOM/HTMLImageElement.o \
 
+    DOM/HTMLInputElement.o \
 
     DOM/HTMLLinkElement.o \
 
     DOM/HTMLLinkElement.o \
 
     DOM/HTMLStyleElement.o \
 
     DOM/HTMLStyleElement.o \
 
     DOM/HTMLTitleElement.o \
 
     DOM/HTMLTitleElement.o \
 
@@ -59,6 +61,7 @@ LIBHTML_OBJS = \
 
     Layout/LayoutTableRow.o \
 
     Layout/LayoutTableRow.o \
 
     Layout/LayoutText.o \
 
     Layout/LayoutText.o \
 
     Layout/LayoutTreeBuilder.o \
 
     Layout/LayoutTreeBuilder.o \
 
+    Layout/LayoutWidget.o \
 
     Layout/LineBox.o \
 
     Layout/LineBox.o \
 
     Layout/LineBoxFragment.o \
 
     Layout/LineBoxFragment.o \
 
     Parser/CSSParser.o \
 
     Parser/CSSParser.o \

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5