Object Graphical Web (OGWeb) – это никакой HTML разметки, никаких CSS-стилей, никаких таблиц и блоков div!
Object Graphical Web — это программируемый и повторно используемый Web!
Множество людей корпят — сначала разрабатывают концепцию дизайна сайта и техническое задание, затем рисуют эскизы дизайна, затем верстают шаблоны страниц сайта, затем интегрируют разработанный дизайн в существующую CMS или разрабатывают новую CMS, затем наполняют сайт контентом и наконец публикуют его.
Что же мы получаем в итоге?
В итоге мы получаем набор плоских страниц в окне браузера, состоящих из элементов контроля и контента, который в свою очередь состоит из текста, изображений, анимации, видео.
Где же 21 век?
21 век пока виден только в смартфонах и планшетниках, в которых пальцем перелистывают элементы и увеличивают их для просмотра, раздвигая указательным и большим пальцами.
Хочу такое же в настольном компьютере или ноутбуке!!!
Там правда пальцев как правило нет, но зато есть мышка.
Возьмем к примеру честного программиста. Предположим захотел он сделать свой сайт, чтобы продавать свой программный продукт. Это что же — ему надо вместо какого нибудь благородного языка типа Java ковыряться в этой лапше из блоков div и CSS-селекторов? Да еще может быть что нибудь порисовать в Photoshop? - Хватит! Надоело!
Из чего же все таки состоит сайт? Может все таки из набора объектов?
Элемент контроля — это объект? - объект!
Логическая часть текста — это объект? - объект!
Изображение или композиция изображений — это объект? - объект!
Анимация — это объект? - объект!
Видео — это объект? - конечно же объект!
Все это объекты, которые можно помещать в различные контейнеры компоновки и которыми можно манипулировать с помощью мышки.
Как же все это можно описать и смоделировать?
Описать все это можно например с помощью универсального языка XML.
На самом деле — скажу Вам по секрету — примеров таких масса!
Возьмем JavaFX 2 язык 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 2 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>
