T.M. SoftStudio

feci quod potui, faciant meliora potentes

Object Graphical Web

 

Object Graphical Web (OGWeb) – это никакой HTML разметки, никаких CSS-стилей, никаких таблиц и блоков div!!!

Object Graphical Web — это программируемый и повторно используемый Web!

Множество людей корпят — сначала разрабатывают концепцию дизайна сайта и техническое задание, затем рисуют эскизы дизайна, затем верстают шаблоны страниц сайта, затем интегрируют разработанный дизайн в существующую CMS или разрабатывают новую CMS, затем наполняют сайт контентом и наконец публикуют его.

Что же мы получаем в итоге?

В итоге мы получаем набор плоских страниц в окне браузера, состоящих из элементов контроля и контента, который в свою очередь состоит из текста, изображений, анимации, видео.

Где же 21 век?

21 век пока виден только в смартфонах и планшетниках, в которых пальцем перелистывают элементы и увеличивают их для просмотра, раздвигая указательным и большим пальцами.

Хочу такое же в настольном компьютере или ноутбуке!!!

Там правда пальцев как правило нет, но зато есть мышка.

Возьмем к примеру честного программиста. Предположим захотел он сделать свой сайт, чтобы продавать свой программный продукт. Это что же — ему надо вместо какого нибудь благородного языка типа Java ковыряться в этой лапше из блоков div и CSS-селекторов? Да еще может быть что нибудь порисовать в Photoshop? - Хватит! Надоело!

Из чего же все таки состоит сайт? Может все таки из набора объектов?

Элемент контроля — это объект? - объект!

Логическая часть текста — это объект? - объект!

Изображение или композиция изображений — это объект? - объект!

Анимация — это объект? - объект!

Видео — это объект? - конечно же объект!

Все это объекты, которые можно помещать в различные контейнеры компоновки и которыми можно манипулировать с помощью мышки.

Как же все это можно описать и смоделировать?

Описать все это можно например с помощью универсального языка XML.

На самом деле — скажу Вам по секрету — примеров таких масса!

Возьмем JavaFX язык FXML.

Как будет выглядеть простая страница приложения? :

 

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>

<?import java.util.*?>

<?import javafx.scene.control.*?>

<?import javafx.scene.layout.*?>

<?import javafx.scene.paint.*?>

<?import javafx.scene.web.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">

<children>

<HBox layoutX="14.0" layoutY="14.0" prefHeight="28.0" prefWidth="572.0">

<children>

<Hyperlink text="Home" />

<Hyperlink text="Services" />

<Hyperlink text="Blog" />

<Hyperlink text="Contacts" />

</children>

</HBox>

<VBox layoutX="492.0" layoutY="53.0" prefHeight="305.0" prefWidth="100.0">

<children>

<Hyperlink text="Home" />

<Hyperlink text="Services" />

<Hyperlink text="Blog" />

<Hyperlink text="Contacts" />

</children>

</VBox>

<HBox layoutX="14.0" layoutY="358.0" prefHeight="28.0" prefWidth="572.0">

<children>

<Label text="Copyright" />

</children>

</HBox>

<ScrollPane layoutX="34.0" layoutY="53.0" prefHeight="291.0" prefWidth="445.0">

<content>

<WebView prefHeight="276.0" prefWidth="430.0" />

</content>

</ScrollPane>

</children>

</AnchorPane>

 

Или же возьмем фреймворк UiBinder Google Web Toolkit:

 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"

xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>

</ui:style>

<g:HTMLPanel>

<g:AbsolutePanel height="300px">

<g:at left="0" top="0">

<g:HorizontalPanel width="440px" height="34px">

<g:Hyperlink text="Home" targetHistoryToken="newHistoryToken"/>

<g:Hyperlink text="Services" targetHistoryToken="newHistoryToken"/>

<g:Hyperlink text="Blog" targetHistoryToken="newHistoryToken"/>

<g:Hyperlink text="Contacts" targetHistoryToken="newHistoryToken"/>

</g:HorizontalPanel>

</g:at>

<g:at left="352" top="40">

<g:VerticalPanel width="88px" height="222px">

<g:Hyperlink text="Home" targetHistoryToken="newHistoryToken"/>

<g:Hyperlink text="Services" targetHistoryToken="newHistoryToken"/>

<g:Hyperlink text="Blog" targetHistoryToken="newHistoryToken"/>

<g:Hyperlink text="Contacts" targetHistoryToken="newHistoryToken"/>

</g:VerticalPanel>

</g:at>

<g:at left="0" top="271">

<g:HorizontalPanel width="440px" height="19px">

<g:Label text="Copyright"/>

</g:HorizontalPanel>

</g:at>

<g:at left="0" top="40">

<g:HTMLPanel width="346px" height="215px"/>

</g:at>

</g:AbsolutePanel>

</g:HTMLPanel>

</ui:UiBinder>

 

Или же возьмем Flex 4:

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

</fx:Declarations>

<s:HGroup x="12" y="6" width="808" height="30">

<mx:LinkButton label="Home"/>

<mx:LinkButton label="Services"/>

<mx:LinkButton label="Blog"/>

<mx:LinkButton label="Contacts"/>

</s:HGroup>

<s:VGroup x="620" y="44" width="200" height="483">

<mx:LinkButton label="Home"/>

<mx:LinkButton label="Services"/>

<mx:LinkButton label="Blog"/>

<mx:LinkButton label="Contacts"/>

</s:VGroup>

<s:HGroup x="10" y="544" width="820" height="46">

<s:Label text="Copyright" height="29" width="90"/>

</s:HGroup>

<s:RichText x="10" y="44" width="602" height="492"/>

</s:Application>

 

Что мы видим?

Да — это декларативное описание графа объектов. Да — к этим объектам можно присоединять различные эффекты. Да — для этих объектов можно определять различные действия.

Но — все это опять какое-то плоское и на самом деле разрозненное. Но - каждый объект нужно украшать индивидуально. Но — в итоге мы все равно получаем всю ту же имитацию HTML-страницы.

Какой же может быть из этого выход?

Ну, например можно каждый объект поместить в унифицированный 3D-контейнер, к которому можно применять различные эффекты и действия, который можно передвигать по экрану и который можно увеличивать или уменьшать для просмотра содержимого.

Таким образом все усилия дизайнеров можно направить на разработку контейнера, а создание сайта сведется к описанию графа контейнеров и его трансляции в код.

Вот как это будет выглядеть в JavaFX FXML:

 

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>

<?import java.util.*?>

<?import javafx.scene.*?>

<?import javafx.scene.control.*?>

<?import javafx.scene.layout.*?>

<?import javafxogwebfxml.*?>

<AnchorPane id="AnchorPane" prefHeight="600" prefWidth="800" xmlns:fx="http://javafx.com/fxml" >

<children>

<MenuContainer layoutX="50" layoutY="50" label="Home" />

<MenuContainer layoutX="160" layoutY="50" label="Services" />

<MenuContainer layoutX="270" layoutY="50" label="Blog" />

<MenuContainer layoutX="380" layoutY="50" label="Contacts" />

<ContentContainer layoutX="100" layoutY="200" url="http://www.google.com/" />

</children>

</AnchorPane>

 



 

Демо сайт OGWeb можно посмотреть по адресу http://site.obgweb.com/ .