Creating your first page

Reference the Framework via extending your servlet:

/

* @author Marc Magon
/
public class FirstFrameworkServlet extends JWebSwingServlet
{
@Override
public IPage getPage()
{
try
{
return new TestScreen();
}
catch (InvalidAttributeException | InvalidChildException | IOException | NoSuchFieldException ex)
{
Logger.getLogger(FirstFrameworkServlet.class.getName()).log(Level.SEVERE, null, ex);
return null;
}
}
}

TestScreen() is our class implementing IPage, denoting the current root page.
All fields are available by getServlet() returning the JWebServlet, and getSession() returning the session.

No Mess, No Fuss, No million methods polluting your navigation of your classes, just what you need, as easy to get it.

/

* @author Marc Magon
/
public class TestScreen extends Page
{

@FormattingCSS(Color =
@ColourCSS(ColorName = ColourNames.BurlyWood))
@LayoutCSS(Display= Displays.Inline)
private Body body = new Body();
private SimpleObjectLayouts textLayouts;

public TestScreen() throws InvalidAttributeException, InvalidChildException, IOException, NoSuchFieldException
{
    super("My First Page", Html.HTMLVersions.HTML5, new DefaultTheme());
    addMetadata(new Metadata(Metadata.MetadataFields.Author, "Marc Magon"));
    addMetadata(new Metadata(Metadata.MetadataFields.Description, "Free Web tutorials on HTML and CSS"));
    addMetadata(new Metadata(Metadata.MetadataFields.Keywords, "HTML, CSS, XML, XHTML, JavaScript"));

    textLayouts = new SimpleObjectLayouts();
    body.add(textLayouts);
    add(body);
}

This is my page that I reference, as you can see I add my Metadata oh my site, I create my simple object (That extends Div, eventually these will be layouts and panels, but those are a complex component and are coming pretty soon if I continue at this pace...)

protected class SimpleObjectLayouts extends Div
{

    @BoxModelCSS(Outline_Style = BorderStyles.Solid,
                 Outline_Width =
    @MeasurementCSS(4),
                 Outline_Color$ = ColourNames.Black)
    @LayoutCSS(Width =
    @MeasurementCSS(value=50,MeasurementType= MeasurementTypes.Percent))
    private Div textFormatDiv = new Div();
    private Div listFormatDiv = textFormatDiv.cloneComponent();
    private Div tableFormatDiv = textFormatDiv.cloneComponent();
    //private Div formFormatDiv = textFormatDiv.cloneComponent();
    @FormattingCSS(Color =
    @ColourCSS("Blue"))
    private Header header1 = new Header(Header.HeaderTypes.H1, "Header 1 Example");
    private Header header2 = new Header(Header.HeaderTypes.H2, "Header 2 Example");
    private Header header3 = new Header(Header.HeaderTypes.H3, "Header 3 Example");
    private Header header4 = new Header(Header.HeaderTypes.H4, "Header 4 Example");
    private Header header5 = new Header(Header.HeaderTypes.H5, "Header 5 Example");

This references 4 of the 6 CSS models. To view all the models, visit http://www.w3schools.org/css.
The CSS model is fully based, however for simplicity sakes, I merged a few of the divisions. A reference will be provided soon.

The clone component is especially useful, it allows a full duplication (based on Object.clone()) of all components, assigning new ID's, and producing new (cloned) children.

This includes any STYLING that was attached to that object!!!!

public final void addHeaders()
{
HeaderClick hClick = new HeaderClick();
textFormatDiv.add(header1).addEvent(hClick);
textFormatDiv.add(header2).addEvent(hClick);
textFormatDiv.add(header3).addEvent(hClick);
header3.addEvent(new ClickEventAdapter(){

            @Override
            public void onClick(Component calledFromComponent, String value)
            {
                Header head = (Header) calledFromComponent;
                head.getCSS().Formatting().setBackground_Color$(ColourNames.DarkGoldenRod);
            }

        });
        textFormatDiv.add(header4).addEvent(hClick);
        textFormatDiv.add(header5).addEvent(hClick);
        textFormatDiv.add(new Header(Header.HeaderTypes.H6, "Added Header 6 with in line CSS")).addEvent(hClick);

        add(textFormatDiv);
    }

Here I add my click events. Holding true to Swing to produce JWebSwing Events, have children types (I have enumerated these), that have adapters.
The get CSS allows a direct input to update the entire CSS model for any component, regardless of what it is.
If you want an image map (I will be producing one, a really styling one..) that highlights, selects tooltips and data heatmaps from selectable colours to create something usable and presentable in business, you can have it, with not much coding.. We'll be creating that one together, it utilizes all functions..

Enjoy your first JWebSwing App! Play around with tables rows cells all forms components including buttons, text, password, inputs, and enjoy the ease of generating themes! :

/
* A default theme for a web site Very monochrome stock standard stuff

* @author Marc Magon
/
public class DefaultTheme extends Theme
{
@BoxModelCSS(Margin_Bottom =@MeasurementCSS(0),
Margin_Top =@MeasurementCSS(0),
Margin_Left =@MeasurementCSS(0),
Margin_Right =@MeasurementCSS(0),
Padding_Bottom =@MeasurementCSS(0),
Padding_Right =@MeasurementCSS(0),
Padding_Left =@MeasurementCSS(0),
Padding_Top =@MeasurementCSS(0),
Outline_Width =@MeasurementCSS(0),
Border_Bottom_Width =@MeasurementCSS(0),
Border_Left_Width =@MeasurementCSS(0),
Border_Right_Width =@MeasurementCSS(0),
Border_Top_Width =@MeasurementCSS(0))
private Body body;
private Button button;
@CSS(Formatting =
@FormattingCSS(),
BoxModel =
@BoxModelCSS(Margin_Bottom =@MeasurementCSS(0),
Margin_Top =@MeasurementCSS(0),
Margin_Left =@MeasurementCSS(0),
Margin_Right =@MeasurementCSS(0),
Padding_Bottom =@MeasurementCSS(0),
Padding_Right =@MeasurementCSS(0),
Padding_Left =@MeasurementCSS(0),
Padding_Top =@MeasurementCSS(0),
Outline_Width =@MeasurementCSS(0),
Border_Bottom_Width =@MeasurementCSS(0),
Border_Left_Width =@MeasurementCSS(0),
Border_Right_Width =@MeasurementCSS(0),
Border_Top_Width =@MeasurementCSS(0)))
private Header header2 = Header.header2;
@CSS(Formatting =
@FormattingCSS(),
BoxModel =
@BoxModelCSS(Margin_Bottom =@MeasurementCSS(0),
Margin_Top =@MeasurementCSS(0),
Margin_Left =@MeasurementCSS(0),
Margin_Right =@MeasurementCSS(0),
Padding_Bottom =@MeasurementCSS(0),
Padding_Right =@MeasurementCSS(0),
Padding_Left =@MeasurementCSS(0),
Padding_Top =@MeasurementCSS(0),
Outline_Width =@MeasurementCSS(0),
Border_Bottom_Width =@MeasurementCSS(0),
Border_Left_Width =@MeasurementCSS(0),
Border_Right_Width =@MeasurementCSS(0),
Border_Top_Width =@MeasurementCSS(0)))
private Header header1 = Header.header1;

Sets all headers to not have any spacing between them and other components on the page...

Extend this class to keep these and/or override them (The lowest class takes preference.. True inheritence), or create your own theme by inheriting ITheme, or extend Theme for some nice added functionality

Styling made easy!! An interactive web framework where you can do what you are truly good at!, JAVA.